:root{
    --bg:#f4f1ec; --panel:#fff; --ink:#2c2a27; --ink-soft:#8a857d; --line:#e6e1d8;
    --accent:#6b7f6e; --accent-hi:#5d7160; --danger:#b4544a; --radius:18px;
    --shadow:0 8px 30px rgba(60,55,45,.08);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--ink);
    font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;display:flex;justify-content:center;padding:clamp(16px,4vw,48px) 16px 64px}
  main{width:100%;max-width:680px}
  header{text-align:center;margin-bottom:28px}
  header h1{font-size:clamp(24px,5vw,32px);font-weight:600;letter-spacing:-.01em;margin:0 0 4px}
  header p{margin:0;color:var(--ink-soft);font-size:15px}
  .composer{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;position:relative}
  textarea#prompt, textarea#askBox{width:100%;border:none;outline:none;resize:none;background:transparent;color:var(--ink);
    font:inherit;font-size:19px;line-height:1.45;min-height:110px;padding:6px 4px}
  textarea#prompt::placeholder, textarea#askBox::placeholder{color:var(--ink-soft)}
  /* Simple/Advanced segmented control above the composer (styled like .shape-options). */
  .seg{display:flex;gap:6px;margin-bottom:12px}
  .seg-btn{flex:1;appearance:none;background:transparent;border:1px solid var(--line);border-radius:10px;
    color:var(--ink-soft);font:inherit;font-size:14px;font-weight:600;padding:9px 8px;cursor:pointer;
    transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
  .seg-btn:hover{border-color:var(--accent)}
  .seg-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
  .composer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
  button#generate, button#simpleGenerate{appearance:none;border:none;border-radius:999px;background:var(--accent);color:#fff;font:inherit;
    font-weight:600;font-size:17px;padding:13px 30px;cursor:pointer;transition:background .15s,transform .05s,opacity .15s;white-space:nowrap;
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
  button#generate:hover:not(:disabled), button#simpleGenerate:hover:not(:disabled){background:var(--accent-hi)}
  button#generate:active:not(:disabled), button#simpleGenerate:active:not(:disabled){transform:translateY(1px)}
  button#generate:disabled, button#simpleGenerate:disabled{opacity:.55;cursor:default}
  button#generate.is-cancel{background:var(--danger)}
  button#generate.is-cancel:hover:not(:disabled){background:#9d473e}
  .hint{font-size:12.5px;color:var(--ink-soft)}
  .model-bar{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
    color:var(--ink-soft);font-size:13px}
  .model-bar label{white-space:nowrap}
  .shape-bar{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--ink-soft);font-size:13px}
  .shape-bar label{white-space:nowrap}
  .shape-options{display:flex;flex:1;gap:6px}
  .shape-options button{flex:1;appearance:none;background:transparent;border:1px solid var(--line);border-radius:10px;
    color:var(--ink-soft);font:inherit;font-size:13px;padding:7px 8px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
  .shape-options button:hover{border-color:var(--accent)}
  .shape-options button.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
  .opt-bar{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--ink-soft);font-size:13px}
  .opt-bar[hidden]{display:none}   /* author display:flex would otherwise override the `hidden` attribute */
  .opt-chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
  .opt-chk input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;flex:none}
  .opt-sub{color:var(--ink-soft);opacity:.8}
  .model-tip{margin:12px 2px 0;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
  .model-tip b{color:var(--ink);font-weight:600}
  .model-tip .mi-note{margin-top:6px}
  .model-tip a{color:var(--accent);text-decoration:underline;font-weight:500}
  .model-tip a:hover{color:var(--accent-hi)}
  /* '#'/'@' tag autocomplete popup, anchored under the Advanced prompt box */
  .tag-pop{position:absolute;z-index:60;max-height:262px;overflow-y:auto;background:var(--panel);
    border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:4px}
  .tag-pop.hidden{display:none}
  .tag-pop .opt{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:7px 10px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink)}
  .tag-pop .opt .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tag-pop .opt .nm .mk{color:var(--accent);font-weight:700;margin-right:1px}
  .tag-pop .opt .ct{flex:none;color:var(--ink-soft);font-size:12px;font-variant-numeric:tabular-nums}
  .tag-pop .opt.sel,.tag-pop .opt:hover{background:var(--bg)}
  .nsfw-yes{color:#a8632e;font-weight:600}
  .nsfw-no{color:var(--accent);font-weight:600}
  .nsfw-limited{color:#a8632e;font-weight:600}
  .nsfw-unknown{color:var(--ink-soft);font-weight:600}
  select#model{flex:1;min-width:0;appearance:none;background:transparent;border:1px solid var(--line);border-radius:10px;
    color:var(--ink-soft);font:inherit;font-size:13px;padding:7px 10px;cursor:pointer;text-overflow:ellipsis}
  select#model:focus{outline:none;border-color:var(--accent);color:var(--ink)}
  .status{margin:22px 2px 0;min-height:22px;text-align:center;font-size:14.5px;color:var(--ink-soft);transition:color .2s}
  .status.error{color:var(--danger)}
  .bar{height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin:10px auto 0;max-width:320px;display:none}
  .bar.show{display:block}
  .bar > i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s ease}
  #result{margin-top:22px}
  .result-card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;animation:rise .35s ease}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .result-card img{display:block;width:100%;height:auto}
  .result-actions{display:flex;justify-content:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
  a.download{text-decoration:none;color:var(--ink-soft);font-size:13.5px;padding:6px 12px;border-radius:999px;transition:background .15s,color .15s}
  a.download:hover{background:var(--bg);color:var(--ink)}
  /* history: recent row + gallery + detail */
  .link-btn{appearance:none;background:transparent;border:none;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:8px}
  .link-btn:hover{background:var(--bg);color:var(--accent-hi)}
  .hist-head{display:flex;align-items:center;justify-content:space-between;margin:26px 2px 10px}
  .hist-head h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:0}
  #recent{display:flex;gap:10px;overflow:hidden;padding:4px}   /* padding gives the .fresh ring room (not clipped) */
  #recent.expanded{flex-wrap:wrap;overflow:visible}   /* batch: wrap so the whole batch is visible, not clipped */
  /* just-generated: an OUTSET accent ring around the thumb (inset is hidden behind the loaded image). */
  #recent img.fresh{box-shadow:0 0 0 2px var(--accent), 0 0 7px rgba(107,127,110,.5)}
  #recent img{height:72px;width:72px;object-fit:cover;border-radius:12px;cursor:pointer;flex:0 0 auto;border:2px solid transparent;transition:border-color .15s,transform .1s;background:var(--line)}
  #recent img:hover{border-color:var(--accent);transform:translateY(-1px)}
  #galleryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
  #galleryGrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .1s;background:var(--line)}
  #galleryGrid img:hover{border-color:var(--accent);transform:translateY(-1px)}
  #galleryPager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;color:var(--ink-soft);font-size:13.5px}
  #galleryPager button{appearance:none;border:1px solid var(--line);background:var(--panel);border-radius:10px;color:var(--ink);font:inherit;font-size:13px;padding:7px 14px;cursor:pointer}
  #galleryPager button:disabled{opacity:.4;cursor:default}
  #detailView{animation:rise .25s ease}
  .detail-card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-top:12px}
  .detail-card img{display:block;width:100%;height:auto;background:var(--line)}
  .detail-meta{padding:16px}
  .detail-meta #detailPrompt{margin:0 0 8px;font-size:16px;line-height:1.5;color:var(--ink);word-break:break-word;display:flex;flex-wrap:wrap;gap:6px}
  .detail-sub{margin:0 0 12px;font-size:12.5px;color:var(--ink-soft)}
  .detail-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .detail-actions .link-btn.on{color:var(--accent-hi)}
  /* prompt tokens as chips (detail view + bookmarks). Marked tags/artists are interactive; plain text is inert. */
  .plainchip{font-size:15px;color:var(--ink);padding:2px 0}
  .tagchip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:13.5px;
    border:1px solid var(--line);background:var(--bg);color:var(--ink);user-select:none;-webkit-user-select:none;cursor:pointer}
  .tagchip.tag{border-color:#c9d6cb}
  .tagchip.artist{border-color:var(--accent);color:var(--accent-hi)}
  .tagchip .tc-star{font-size:12px;color:var(--ink-soft);line-height:1}
  .tagchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .tagchip.on .tc-star{color:#ffd86b}
  .tagchip .tc-name{appearance:none;background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0}
  .tagchip .tc-x{appearance:none;background:none;border:none;color:inherit;font:inherit;font-size:15px;line-height:1;cursor:pointer;padding:0 0 0 3px;opacity:.8}
  .tagchip .tc-x:hover{opacity:1}
  /* bookmarks view */
  .bm-group{margin:18px 2px 0}
  .bm-group h3{margin:0 0 8px;font-size:14px;color:var(--ink-soft);font-weight:600}
  .bm-chips{display:flex;flex-wrap:wrap;gap:8px}
  .bm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
  .bm-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:pointer;border:2px solid transparent;background:var(--line)}
  .bm-grid img:hover{border-color:var(--accent)}
  .bm-empty{margin:24px 2px;color:var(--ink-soft);font-size:14px;text-align:center}
  .hist-head-actions{display:flex;align-items:center;gap:8px}
  /* transient toast (bookmark feedback) */
  .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;
    padding:9px 16px;border-radius:999px;font-size:13.5px;box-shadow:var(--shadow);z-index:200;max-width:90vw;text-align:center}
  .toast.hidden{display:none}
  .edit-entry{margin-top:14px;text-align:center}
  /* edit conversation (Gemini-style multi-turn) */
  .edit-head{display:flex;align-items:center;gap:10px;margin:0 2px 14px}
  .edit-head-label{font-size:13px;color:var(--ink-soft);white-space:nowrap}
  #editModel{flex:1;min-width:0;appearance:none;background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--ink-soft);font:inherit;font-size:13px;padding:7px 10px;cursor:pointer}
  #editModel:focus{outline:none;border-color:var(--accent);color:var(--ink)}
  #thread{display:flex;flex-direction:column;gap:14px;min-height:38vh;padding:4px 2px 8px}
  .bubble{animation:rise .25s ease}
  .bubble.user{align-self:flex-end;max-width:88%;display:flex;flex-direction:column;align-items:flex-end}
  .b-edit{margin-top:3px;background:none;border:none;color:var(--ink-soft);font-size:12px;cursor:pointer;padding:2px 4px;opacity:.55}
  .b-edit:hover{opacity:1;color:var(--accent)}
  .b-editta{width:min(78vw,460px);border:1px solid var(--line);border-radius:14px;padding:10px 13px;font:inherit;font-size:15px;resize:vertical;box-sizing:border-box}
  .b-editrow{display:flex;gap:8px;margin-top:6px}
  .b-save,.b-cancel{border:none;border-radius:10px;padding:7px 13px;font-size:13px;cursor:pointer}
  .b-save{background:var(--accent);color:#fff}
  .b-cancel{background:var(--line);color:var(--ink)}
  .bubble.ai{align-self:flex-start;width:88%}
  .bubble.user .b-text{background:var(--accent);color:#fff;border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
  .bubble.ai .b-img{background:var(--panel);border-radius:16px 16px 16px 4px;box-shadow:var(--shadow);overflow:hidden}
  .bubble.ai .b-img img{display:block;width:100%;height:auto;cursor:pointer;background:var(--line)}
  .bubble.ai .b-text{margin-top:6px;color:var(--ink-soft);font-size:13px}
  .bubble.ai.loading .b-img{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink-soft);font-size:13.5px}
  .bubble.ai.loading .b-bar{width:60%;max-width:220px;height:4px;background:var(--line);border-radius:999px;overflow:hidden}
  .bubble.ai.loading .b-bar > i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s ease}
  #editComposer{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;position:sticky;bottom:8px;margin-top:8px}
  .edit-refs{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px}
  .edit-ref-hint{flex-basis:100%;font-size:12px;line-height:1.45;color:var(--ink-soft);background:rgba(127,127,127,.10);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
  .edit-refs .ref-chip{position:relative;width:48px;height:48px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--line)}
  .edit-refs .ref-chip img{width:100%;height:100%;object-fit:cover;display:block}
  .edit-refs .ref-chip button{position:absolute;top:1px;right:1px;width:17px;height:17px;border:none;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:12px;line-height:17px;cursor:pointer;padding:0}
  .edit-ref-btn{appearance:none;background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);font:inherit;font-size:13px;padding:9px 13px;cursor:pointer;white-space:nowrap}
  .edit-ref-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
  .edit-ref-btn:disabled{opacity:.5;cursor:default}
  .bubble.user .b-refs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-bottom:5px}
  .bubble.user .b-refs img{width:56px;height:56px;object-fit:cover;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:var(--line)}
  #instruction{flex:1;border:none;outline:none;resize:none;background:transparent;color:var(--ink);font:inherit;font-size:16px;min-height:24px;max-height:120px;padding:6px 4px}
  #instruction::placeholder{color:var(--ink-soft)}
  #editSend{appearance:none;border:none;border-radius:999px;background:var(--accent);color:#fff;font:inherit;font-weight:600;font-size:15px;padding:10px 22px;cursor:pointer;white-space:nowrap;transition:background .15s}
  #editSend:hover:not(:disabled){background:var(--accent-hi)}
  #editSend.is-cancel{background:var(--danger)}
  /* Narrow screens: give the textarea its own full-width row so the ref/Send buttons wrap BELOW it
     instead of squeezing it to nothing (flex:1 gives it flex-basis:0, so the buttons win the width). */
  @media (max-width:560px){
    #editComposer #instruction{flex-basis:100%}
    #editComposer #editSend{margin-left:auto}
  }
  /* Simple-tab refinement conversation (reuses the .bubble styles above). */
  #simpleThread{display:flex;flex-direction:column;gap:14px;padding:4px 2px 8px}
  .refine-composer{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;position:sticky;bottom:8px;margin-top:8px}
  .refine-head{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin-bottom:8px}
  .refine-row{display:flex;gap:10px;align-items:flex-end}
  #refineBox{flex:1;border:none;outline:none;resize:none;background:transparent;color:var(--ink);font:inherit;font-size:16px;min-height:24px;max-height:120px;padding:6px 4px}
  #refineBox::placeholder{color:var(--ink-soft)}
  #refineSend{appearance:none;border:none;border-radius:999px;background:var(--accent);color:#fff;font:inherit;font-weight:600;font-size:15px;padding:10px 22px;cursor:pointer;white-space:nowrap;transition:background .15s}
  #refineSend:hover:not(:disabled){background:var(--accent-hi)}
  .hidden{display:none!important}
  /* Hold-to-reveal "how many" picker, anchored above the Generate button. */
  .gen-wrap{ position:relative; display:inline-flex; }
  .count-pop{ position:absolute; bottom:calc(100% + 8px); right:0; display:flex; gap:6px;
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:6px;
    box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:30; }
  .count-pop[hidden]{ display:none; }
  .count-pop button{ appearance:none; border:1px solid var(--line); background:var(--bg); color:var(--ink);
    border-radius:10px; font:inherit; font-size:15px; min-width:40px; padding:9px 12px; cursor:pointer;
    touch-action:manipulation; }
  .count-pop button:hover, .count-pop button:active{ border-color:var(--accent); color:var(--accent-hi); }
  /* Custom batch-amount modal */
  .modal-overlay{ position:fixed; inset:0; background:rgba(40,38,34,.45); display:flex; align-items:center; justify-content:center; z-index:120; padding:20px; }
  .modal-overlay.hidden{ display:none; }
  .modal-card{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; width:min(320px,92vw); text-align:center; }
  .modal-card h3{ margin:0 0 16px; font-size:16px; color:var(--ink); }
  .num-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:18px; }
  .num-row input{ width:96px; text-align:center; font:inherit; font-size:22px; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); }
  .num-row input:focus{ outline:none; border-color:var(--accent); }
  .num-row button{ appearance:none; border:1px solid var(--line); background:var(--bg); color:var(--ink); width:44px; height:44px; border-radius:10px; font-size:22px; line-height:1; cursor:pointer; touch-action:manipulation; }
  .num-row button:hover, .num-row button:active{ border-color:var(--accent); color:var(--accent-hi); }
  .modal-actions{ display:flex; justify-content:flex-end; gap:10px; align-items:center; }
  .modal-actions #ccGo{ appearance:none; border:none; border-radius:999px; background:var(--accent); color:#fff; font:inherit; font-weight:600; padding:9px 18px; cursor:pointer; }
  .modal-actions #ccGo:hover{ background:var(--accent-hi); }
  /* Detail-view prev/next arrows — fixed to the viewport, so only visible while the detail view is shown. */
  .detail-nav{ position:fixed; top:50%; transform:translateY(-50%); z-index:40; border:none; cursor:pointer;
    width:46px; height:72px; border-radius:12px; background:rgba(0,0,0,.4); color:#fff; font-size:30px; line-height:1;
    display:flex; align-items:center; justify-content:center; touch-action:manipulation; }
  .detail-nav:hover{ background:rgba(0,0,0,.6); }
  .detail-nav:disabled{ opacity:.2; cursor:default; }
  .detail-nav.prev{ left:12px; } .detail-nav.next{ right:12px; }
  /* In-page debug console: a discreet footer link + a slide-up log panel (so we can read the AI's context on a
     phone with no devtools). */
  .app-foot{ text-align:center; margin:34px 0 4px; }
  .app-foot .link-btn{ color:var(--ink-soft); font-weight:400; opacity:.6; }
  .app-foot .link-btn:hover{ opacity:1; }
  .dbg-panel{ position:fixed; left:0; right:0; bottom:0; max-height:62vh; z-index:60;
    display:flex; flex-direction:column; background:#0c0d10; color:#d6d9df;
    border-top:2px solid var(--accent); box-shadow:0 -10px 30px rgba(0,0,0,.45); }
  .dbg-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:9px 14px; border-bottom:1px solid #23252b; font-size:13px; flex:0 0 auto; }
  .dbg-head strong{ color:#e8eaee; }
  .dbg-actions{ display:flex; gap:14px; }
  .dbg-head .link-btn{ color:#8fb4ff; }
  .dbg-head .link-btn:hover{ background:#1a1c22; color:#bcd2ff; }
  #dbgLog{ margin:0; padding:10px 14px; overflow:auto; -webkit-overflow-scrolling:touch;
    font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }

/* --- auth gate + account actions (added in the ASP.NET conversion) --- */
.auth-gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:300;padding:24px;text-align:center}
.auth-gate.hidden{display:none}
.auth-gate .card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;max-width:360px}
.auth-gate h2{margin:0 0 8px;font-weight:600}
.auth-gate p{color:var(--ink-soft);margin:0 0 16px}
.auth-gate form{display:flex;flex-direction:column;gap:10px;text-align:left}
.auth-gate input{appearance:none;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:15px;background:var(--bg);color:var(--ink);width:100%}
.auth-gate input:focus{outline:none;border-color:var(--accent)}
#authSubmit{appearance:none;border:none;border-radius:999px;background:var(--accent);color:#fff;font:inherit;font-weight:600;font-size:16px;padding:12px 24px;cursor:pointer;margin-top:4px}
#authSubmit:hover:not(:disabled){background:var(--accent-hi)}
#authSubmit:disabled{opacity:.6;cursor:default}
.auth-error{color:var(--danger);font-size:13px}
.auth-toggle{margin:14px 0 0}

/* --- MVC: top nav, account pages, gallery pager, tagline --- */
header h1{margin:0}
header h1 a{color:inherit;text-decoration:none}
.topnav{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;font-size:14px}
.topnav a{color:var(--accent);text-decoration:none;font-weight:600}
.topnav a:hover{color:var(--accent-hi)}
.topnav-user{color:var(--ink-soft)}
.topnav-logout{display:inline;margin:0}
.tagline{text-align:center;color:var(--ink-soft);font-size:15px;margin:0 0 22px}
.account{display:flex;justify-content:center;padding:24px 0}
.account .card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;width:min(360px,92vw);text-align:center}
.account h2{margin:0 0 16px;font-weight:600}
.account form{display:flex;flex-direction:column;gap:10px;text-align:left}
.account input{appearance:none;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:15px;background:var(--bg);color:var(--ink)}
.account input:focus{outline:none;border-color:var(--accent)}
.account button[type=submit]{appearance:none;border:none;border-radius:999px;background:var(--accent);color:#fff;font:inherit;font-weight:600;font-size:16px;padding:12px 24px;cursor:pointer;margin-top:4px}
.account button[type=submit]:hover{background:var(--accent-hi)}
.account .auth-error{margin-bottom:6px}
.account .auth-toggle a{color:var(--accent);text-decoration:none}
.pager-btn{appearance:none;border:1px solid var(--line);background:var(--panel);border-radius:10px;color:var(--ink);font:inherit;font-size:13px;padding:7px 14px;cursor:pointer;text-decoration:none}
.pager-btn.disabled{opacity:.4;cursor:default}