@charset "UTF-8";
:root {
  --paper:#FBFAF7;
  --white:#FFFFFF;
  --milk:#F4F0E9;
  --line:#E9E5DF;
  --ink:#414840;
  --muted:#777A70;
  --forest:#536F5D;
  --sage:#E9F0E8;
  --sage-strong:#CADBCB;
  --blush:#F6E9E8;
  --blush-strong:#EBCFCB;
  --gold:#D6C3A5;
  --coffee:#847569;
  --radius:16px;
  --serif:"Songti TC","Songti SC","Noto Serif CJK TC","Noto Serif CJK SC","STSong","Source Han Serif TC",Georgia,serif;
}
*,*:before,*:after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { background:var(--paper); -webkit-text-size-adjust:100%; }
body { padding:0; margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:17px; font-weight:400; line-height:1.65; letter-spacing:.015em; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.38; cursor:not-allowed; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; max-width:100%; }
input,textarea,select { outline:none; }
:focus-visible { outline:2px solid var(--forest); outline-offset:3px; }
.shell { max-width:560px; min-height:100dvh; margin:0 auto; padding:env(safe-area-inset-top) 22px calc(112px + env(safe-area-inset-bottom)); }
.topbar { height:84px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:16px; }
.wordmark { border:0; background:transparent; padding:0; cursor:pointer; display:inline-flex; flex-direction:column; gap:0; line-height:1; text-align:left; }
.wordmark strong { font-family:Georgia,"Times New Roman",serif; font-size:34px; letter-spacing:.14em; line-height:1.08; font-weight:400; color:var(--forest); }
.wordmark span { margin-top:6px; font-family:Georgia,serif; font-size:15px; letter-spacing:.10em; line-height:1.2; color:var(--coffee); }
.top-actions { display:flex; align-items:center; gap:10px; }
.icon-button { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; border-radius:50%; color:var(--ink); flex-shrink:0; }
.icon-button.sage { background:var(--sage); color:var(--forest); }
.icon-button svg,.btn svg,.nav-item svg,.field-icon svg,.back-link svg,.text-action svg { width:20px; height:20px; stroke-width:1.7; flex:0 0 auto; }
.page-title { font-size:34px; font-weight:400; line-height:1.3; letter-spacing:.045em; margin:28px 0 6px; color:var(--ink); }
.kicker { font-size:15px; line-height:1.5; color:var(--coffee); letter-spacing:.085em; }
.subtle { color:var(--muted); }
.spacer { height:16px; }
.searchbox { display:flex; align-items:center; width:100%; height:58px; padding:0 18px; border:1px solid var(--line); border-radius:13px; background:var(--white); margin:23px 0 20px; }
.searchbox .field-icon { display:flex; color:var(--coffee); }
.searchbox input { width:100%; flex:1; padding:0 12px; background:transparent; border:0; font-size:17px; line-height:1; min-width:0; }
.searchbox input::placeholder { color:#96938B; opacity:1; }
.filterbar { display:flex; gap:10px; overflow-x:auto; padding:0 0 6px; scrollbar-width:none; margin:0 -22px 23px; padding-left:22px; padding-right:22px; }
.filterbar::-webkit-scrollbar { display:none; }
.pill { padding:9px 17px; background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:99px; white-space:nowrap; font-size:16px; min-height:44px; }
.pill.active { background:var(--forest); border-color:var(--forest); color:white; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:23px 0 16px; }
.section-heading h2 { margin:0; font-size:23px; font-weight:400; letter-spacing:.04em; }
.section-heading .count { font-size:15px; color:var(--coffee); }
.feature { background:var(--blush); border-radius:19px; overflow:hidden; display:grid; grid-template-columns:1.08fr .92fr; min-height:230px; margin-bottom:28px; }
.feature-copy { padding:27px 12px 27px 25px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.feature .eyebrow { font-size:15px; color:var(--coffee); margin-bottom:10px; }
.feature h2 { font-size:27px; line-height:1.4; font-weight:400; margin:0 0 15px; letter-spacing:.05em; }
.feature .feature-link { display:inline-flex; gap:9px; align-items:center; font-size:16px; border-bottom:1px solid var(--coffee); padding-bottom:2px; color:var(--ink); }
.feature-image { align-self:stretch; height:100%; width:100%; object-fit:cover; background:#E9DAD3; }
.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px 14px; }
.gallery-card { display:block; min-width:0; border:0; margin:0; padding:0; text-align:left; background:transparent; }
.thumb-wrap { position:relative; aspect-ratio: .87; border-radius:13px; background:var(--milk); overflow:hidden; }
.thumb-wrap img { height:100%; object-fit:cover; }
.thumb-wrap .photo-count { position:absolute; right:10px; bottom:10px; padding:2px 10px; background:rgba(251,250,247,.95); color:var(--ink); border-radius:99px; font-size:15px; line-height:1.8; }
.gallery-card .kind { color:var(--coffee); font-size:15px; line-height:1.5; margin:12px 0 3px; }
.gallery-card .card-title { font-size:19px; line-height:1.45; font-weight:400; margin:0; }
.gallery-card .desc { color:var(--muted); font-size:16px; margin:3px 0 0; }
.empty { border:1px dashed var(--line); border-radius:15px; padding:36px 25px; text-align:center; color:var(--muted); }
.empty h2 { color:var(--ink); font-size:21px; font-weight:400; }
.empty svg { width:34px; height:34px; color:var(--forest); margin:0 auto 8px; }
.bottombar { position:fixed; z-index:20; bottom:0; left:0; right:0; background:rgba(251,250,247,.98); border-top:1px solid var(--line); padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
.bottom-inner { display:flex; align-items:center; justify-content:space-around; max-width:540px; margin:auto; gap:7px; }
.nav-item { background:none; border:0; min-width:86px; padding:5px 9px; display:flex; flex-direction:column; align-items:center; gap:3px; color:#8A887F; font-size:15px; }
.nav-item.active { color:var(--forest); }
.nav-item svg { width:22px; height:22px; }
.back-row { display:flex; align-items:center; justify-content:space-between; min-height:66px; margin-top:7px; }
.back-link { border:0; background:none; display:inline-flex; align-items:center; gap:7px; padding:12px 0; font-size:17px; }
.detail-title { margin:18px 0 5px; font-size:31px; font-weight:400; line-height:1.35; }
.detail-sub { margin:0 0 22px; color:var(--muted); font-size:16px; }
.image-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.image-choice { background:var(--milk); border:0; padding:0; border-radius:13px; overflow:hidden; position:relative; aspect-ratio:.85; }
.image-choice img { height:100%; object-fit:cover; }
.image-choice .checkmark { width:30px; height:30px; border-radius:50%; position:absolute; right:10px; top:10px; display:flex; align-items:center; justify-content:center; background:rgba(251,250,247,.93); color:var(--muted); border:1px solid #E5E0D9; }
.image-choice.selected .checkmark { background:var(--forest); border-color:var(--forest); color:#fff; }
.image-choice .checkmark svg { width:18px; height:18px; }
.image-choice .image-label { background:rgba(251,250,247,.96); border-radius:7px; padding:2px 9px; position:absolute; bottom:11px; left:10px; font-size:14px; max-width:calc(100% - 20px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.selection-row { display:flex; align-items:center; justify-content:space-between; margin:17px 0 24px; color:var(--coffee); font-size:16px; }
.text-action { display:inline-flex; gap:6px; align-items:center; border:0; background:transparent; color:var(--forest); padding:5px 0; }
.content-section { padding:20px 0 0; border-top:1px solid var(--line); }
.content-section .section-heading { margin-top:0; }
.copy-area { border:1px solid var(--line); background:#fff; padding:17px; border-radius:13px; width:100%; min-height:138px; resize:vertical; line-height:1.85; font-size:17px; color:var(--ink); }
.copy-area:focus { border-color:var(--sage-strong); }
.button-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:54px; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:var(--white); color:var(--ink); font-size:17px; font-weight:400; text-align:center; line-height:1.4; }
.btn.primary { background:var(--forest); border-color:var(--forest); color:#fff; }
.btn.soft { background:var(--sage); border-color:var(--sage); color:var(--forest); }
.btn.blush { background:var(--blush); border-color:var(--blush); }
.btn.block { width:100%; }
.btn.danger { color:#966A68; }
.btn svg { width:18px; height:18px; }
.hint { font-size:15px; color:var(--muted); line-height:1.7; margin:14px 0; }
.status-tag { display:inline-flex; align-items:center; font-size:14px; color:var(--forest); background:var(--sage); border-radius:99px; padding:4px 12px; }
.status-tag.draft { background:var(--blush); color:#876F71; }
.form-grid { display:grid; gap:20px; margin-top:22px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field label { color:var(--ink); font-size:17px; }
.form-field input,.form-field select,.form-field textarea { min-height:54px; padding:13px 14px; background:var(--white); border:1px solid var(--line); border-radius:11px; font-size:17px; width:100%; }
.form-field textarea { min-height:156px; resize:vertical; line-height:1.7; }
.file-drop { border:1px dashed var(--sage-strong); border-radius:13px; background:var(--sage); color:var(--forest); display:flex; justify-content:center; align-items:center; gap:8px; padding:22px 12px; cursor:pointer; min-height:78px; }
.file-drop svg { width:21px; height:21px; }
.upload-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; }
.upload-preview[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.upload-preview[data-count="1"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.upload-preview-item { position:relative; isolation:isolate; aspect-ratio:.85; overflow:hidden; background:var(--milk); border-radius:12px; }
.upload-preview-item img { width:100%; height:100%; object-fit:cover; }
.upload-preview-item .remove-media { position:absolute; inset:6px 6px auto auto; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; background:transparent; border-radius:50%; color:var(--ink); -webkit-appearance:none; appearance:none; touch-action:manipulation; }
.upload-preview-item .remove-media::before { content:""; position:absolute; inset:5px; border-radius:50%; background:rgba(255,255,255,.97); border:1px solid rgba(65,72,64,.06); }
.upload-preview-item .remove-media svg { position:relative; display:block; width:17px; height:17px; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; transform:translateY(-.25px); }
.upload-preview-item .remove-media:active::before { background:var(--blush); }
.admin-list { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.admin-item { border:1px solid var(--line); background:var(--white); border-radius:14px; display:flex; align-items:center; text-align:left; gap:15px; padding:10px; width:100%; }
.admin-item img { width:82px; height:91px; object-fit:cover; border-radius:9px; background:var(--milk); }
.admin-item .admin-title { font-size:19px; line-height:1.5; }
.admin-item .admin-meta { display:block; color:var(--muted); font-size:15px; margin-top:2px; }
.admin-item .push { margin-left:auto; padding:6px; color:var(--coffee); }
.utility-card { padding:19px; background:var(--sage); border-radius:14px; color:var(--forest); margin:22px 0; }
.utility-card p { margin:4px 0 0; font-size:16px; line-height:1.6; }
.mini-note { color:var(--muted); font-size:15px; margin:10px 0 0; }
.divider { border:0; border-top:1px solid var(--line); margin:25px 0; }
#toast { position:fixed; z-index:50; bottom:calc(93px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%) translateY(10px); max-width:min(450px,90vw); width:max-content; background:var(--ink); border-radius:11px; padding:12px 21px; color:white; text-align:center; font-size:16px; opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media(min-width:650px) {
  body { background:#F1EEE9; }
  .shell { border-left:1px solid var(--line); border-right:1px solid var(--line); background:var(--paper); }
  .bottombar { max-width:560px; left:50%; right:auto; width:100%; transform:translateX(-50%); }
}
@media(max-width:375px) {
  .shell { padding-left:17px; padding-right:17px; }
  .filterbar { margin-left:-17px; margin-right:-17px; padding-left:17px; }
  .feature-copy { padding-left:18px; }
  .feature h2 { font-size:23px; }
  .page-title { font-size:31px; }
  .btn { padding-inline:7px; font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto !important; transition:none !important; } }
/* Refined optical alignment / minimal supporting actions. */
.sync-note { display:flex; align-items:center; gap:12px; min-height:56px; margin:23px 0; padding:13px 17px; border-radius:12px; border:1px solid var(--line); background:var(--white); color:var(--coffee); font-size:16px; line-height:1.55; }
.sync-note svg { width:19px; height:19px; stroke-width:1.65; flex-shrink:0; }
.destructive-row { display:flex; justify-content:center; padding:15px 0 0; }
.destructive-link { min-height:44px; padding:10px 18px; color:#987D7A; font-size:16px; }
.destructive-link:active { color:#6F5552; }
.form-field label { line-height:1.5; }
.form-field input, .form-field select, .form-field textarea { display:block; }
.button-pair > .btn { width:100%; min-width:0; }
.btn svg, .icon-button svg, .nav-item svg, .back-link svg, .text-action svg { display:block; }

/* MORI 0.2 — component-level optical rhythm */
.topbar { border-color:#E9E7E0; }
.wordmark { align-self:center; justify-content:center; }
.wordmark strong { font-size:33px; font-weight:400; letter-spacing:.145em; }
.wordmark span { margin-top:5px; letter-spacing:.105em; }
.icon-button { width:46px; height:46px; display:grid; place-items:center; padding:0; }
.icon-button svg { width:23px; height:23px; stroke-width:1.45; }
.bottombar { background:rgba(251,250,247,.985); }
.bottom-inner { gap:4px; justify-content:space-evenly; }
.nav-item { min-width:88px; min-height:63px; padding:8px 10px 6px; gap:4px; justify-content:center; line-height:1.5; border-radius:11px; }
.nav-item svg { width:23px; height:23px; stroke-width:1.45; transform:translateY(-.25px); }
.nav-item.active { color:#4E6B59; }
.nav-item:active { background:var(--sage); }
.icon-button.sage { background:var(--sage); }
.gallery { row-gap:26px; }
.thumb-wrap { border-radius:13px; }
.gallery-card .kind { margin-top:12px; }
.gallery-card .card-title { font-size:19px; letter-spacing:.025em; }
.page-title,.detail-title,.section-heading h2 { font-weight:400; }
.page-title { margin-top:24px; margin-bottom:15px; }
.searchbox { margin-top:18px; margin-bottom:20px; }
.searchbox .field-icon svg { width:21px; height:21px; stroke-width:1.5; }
.back-link svg, .text-action svg, .btn svg { stroke-width:1.5; }
.image-choice .checkmark { width:31px; height:31px; display:grid; place-items:center; }
.image-choice .checkmark svg { width:17px; height:17px; stroke-width:1.6; }
.image-choice img { width:100%; height:100%; object-fit:cover; }
.gallery-card, .image-choice { -webkit-tap-highlight-color:transparent; }
.empty { margin-top:15px; border:1px solid var(--line); padding:49px 24px; background:rgba(255,255,255,.58); }
.empty h2 { font-size:21px; margin:0; }
.empty p { font-size:17px; line-height:1.65; margin:15px 0 0; }
.admin-empty { text-align:left; }
.manager-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; }
.manager-heading .page-title { margin-bottom:0; }
.manager-heading .text-action { color:var(--coffee); min-height:44px; padding:8px 0; font-size:16px; }
.admin-list { margin:0; gap:12px; }
.admin-item { padding:11px; gap:16px; border-radius:14px; min-height:98px; }
.admin-thumb { flex:0 0 73px; width:73px; height:79px; background:var(--milk); border-radius:9px; overflow:hidden; }
.admin-thumb img { width:100%; height:100%; object-fit:cover; border-radius:0; }
.admin-item-text { display:flex; flex:1; flex-direction:column; min-width:0; gap:2px; }
.admin-title { font-size:19px; letter-spacing:.02em; }
.admin-meta { font-size:16px; }
.admin-item .push { color:var(--coffee); display:grid; place-items:center; }
.admin-item .push svg { width:19px; height:19px; stroke-width:1.4; }
.drive-section { margin-top:35px; padding-top:7px; }
.drives { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding-bottom:20px; }
.drive-card { border:1px solid var(--line); border-radius:15px; background:#fff; padding:19px; }
.drive-main { display:flex; align-items:center; gap:14px; min-height:49px; }
.drive-mark { background:var(--sage); color:var(--forest); width:48px; height:48px; border-radius:11px; display:grid; place-items:center; flex-shrink:0; }
.drive-mark svg { width:22px; height:22px; stroke-width:1.45; }
.drive-text { display:flex; flex:1; flex-direction:column; gap:2px; min-width:0; }
.drive-text strong { font-size:19px; font-weight:400; line-height:1.35; }
.drive-email { font-size:16px; color:var(--muted); overflow-wrap:anywhere; line-height:1.6; }
.drive-indicator { width:9px; height:9px; border-radius:50%; background:var(--blush-strong); flex:0 0 9px; }
.drive-indicator.connected { background:#9ABA9F; }
.drive-folder { display:flex; align-items:center; gap:10px; color:var(--coffee); padding:14px 0 0 0; font-size:16px; line-height:1.6; }
.drive-folder svg { width:19px; height:19px; stroke-width:1.4; }
.drive-tools { display:flex; gap:10px; margin-top:18px; }
.drive-tools .btn { flex:1; min-width:0; font-size:16px; padding:10px 9px; min-height:50px; }
.drive-disconnect { display:block; margin:12px 0 0 auto; padding:7px 0; color:#927D77; border:0; background:transparent; font-size:15px; }
.upload-state { color:var(--forest); min-height:0; font-size:16px; }
.upload-state:not(:empty) { min-height:27px; margin-top:4px; }
.upload-preview .remove-media { outline-offset:2px; }
#login-form { margin-top:25px; }
.form-field select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23746B62' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:50px; }
@media (max-width:375px) {
  .drive-card { padding:16px; }
  .drive-tools { gap:8px; }
  .drive-tools .btn { font-size:15px; }
}

/* Discreet controls for storage details. */
.drive-folder { min-height:43px; align-items:center; justify-content:space-between; gap:12px; }
.folder-title { flex:1; min-width:0; display:flex; align-items:center; gap:9px; overflow:hidden; text-overflow:ellipsis; line-height:1.5; }
.folder-title svg { flex-shrink:0; }
.folder-edit, .folder-save { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border:1px solid transparent; border-radius:10px; color:var(--forest); background:var(--sage); padding:0; }
.folder-edit svg, .folder-save svg { width:19px; height:19px; stroke-width:1.45; }
.folder-input { flex:1; width:100%; min-width:0; height:44px; border-radius:9px; border:1px solid var(--line); background:var(--paper); padding:9px 12px; font-size:16px; }
.folder-input:focus { border-color:var(--forest); }
.quota-line { padding-top:11px; color:var(--muted); font-size:15px; line-height:1.7; }
.quota-track { margin-top:7px; width:100%; height:5px; border-radius:99px; overflow:hidden; background:#EEEDE9; }
.quota-track > span { display:block; height:100%; border-radius:inherit; background:#A9C1AF; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
