:root{
  --bg:#FFF7F3; --card:#FFFFFF; --ink:#3A2B33; --ink-soft:#8A7480; --line:#F0DEE4;
  --rose:#EC6A9C; --rose-deep:#D64C81; --plum:#9B72CF; --gold:#F4C56B;
  --rose-tint:#FDEEF4; --plum-tint:#F1EAFA;
  --ok:#3FA971; --err:#D64C57;
  --shadow:0 6px 22px rgba(214,76,129,.12);
  --radius:22px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#201A20; --card:#2B232C; --ink:#F5EAF0; --ink-soft:#B49BA8; --line:#3C303D;
  --rose:#F489B2; --rose-deep:#F6A0C2; --plum:#B896E4; --gold:#F4C56B;
  --rose-tint:#3A2530; --plum-tint:#2E2740;
  --shadow:0 6px 22px rgba(0,0,0,.35);
}}
:root[data-theme="light"]{
  --bg:#FFF7F3; --card:#FFFFFF; --ink:#3A2B33; --ink-soft:#8A7480; --line:#F0DEE4;
  --rose:#EC6A9C; --rose-deep:#D64C81; --plum:#9B72CF; --rose-tint:#FDEEF4; --plum-tint:#F1EAFA; --shadow:0 6px 22px rgba(214,76,129,.12);
}
:root[data-theme="dark"]{
  --bg:#201A20; --card:#2B232C; --ink:#F5EAF0; --ink-soft:#B49BA8; --line:#3C303D;
  --rose:#F489B2; --rose-deep:#F6A0C2; --plum:#B896E4; --rose-tint:#3A2530; --plum-tint:#2E2740; --shadow:0 6px 22px rgba(0,0,0,.35);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0}
html.locked,html.locked body{overflow:hidden;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px; line-height:1.45; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(24px + var(--safe-b));
}
button,textarea,input{font-family:inherit}
.screen{max-width:620px;margin:0 auto;padding:0 16px}
.muted{color:var(--ink-soft);font-weight:600;font-size:.8em}
.err{color:var(--err);font-weight:600;font-size:.92rem;margin:.5rem 2px 0}

/* ---------- LOGIN ---------- */
#login{min-height:100dvh;display:grid;place-items:center;padding-top:var(--safe-t)}
.login-card{text-align:center;width:100%;max-width:340px}
.login-mouse{font-size:76px;line-height:1;filter:drop-shadow(0 8px 16px rgba(214,76,129,.25));animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.login-title{font-size:34px;margin:.3em 0 .1em;letter-spacing:-.5px;background:linear-gradient(100deg,var(--rose),var(--plum));-webkit-background-clip:text;background-clip:text;color:transparent}
.login-sub{color:var(--ink-soft);margin:0 0 1.6em}
#loginForm{display:flex;flex-direction:column;gap:12px}
#pw{padding:15px 18px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-size:18px;text-align:center;letter-spacing:2px}
#pw:focus{outline:none;border-color:var(--rose)}

/* ---------- BUTTONS ---------- */
.go,#loginBtn{border:none;border-radius:18px;padding:17px;font-size:18px;font-weight:800;color:#fff;
  background:linear-gradient(100deg,var(--rose),var(--rose-deep));box-shadow:var(--shadow);cursor:pointer;transition:transform .08s,opacity .15s}
.go:active,#loginBtn:active{transform:scale(.97)}
.go[disabled]{opacity:.6;box-shadow:none;pointer-events:none}
.go{width:100%;margin-top:18px}
.ghost{background:transparent;border:none;color:var(--ink-soft);font-weight:700;font-size:.95rem;cursor:pointer;padding:8px}
.linkbtn{background:none;border:none;color:var(--rose-deep);font-weight:800;font-size:.9rem;cursor:pointer;padding:4px}

/* ---------- TOPBAR ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px + var(--safe-t)) 4px 12px;background:linear-gradient(var(--bg) 82%,transparent)}
.brand{font-size:22px;font-weight:900;letter-spacing:-.3px}
.brand-mouse{filter:drop-shadow(0 2px 4px rgba(214,76,129,.3))}

/* ---------- COMPOSER ---------- */
.composer{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.row-head{display:flex;align-items:center;justify-content:space-between;min-height:24px}
.lead{font-size:1rem;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid:empty{display:none}
@media(max-width:380px){.grid{grid-template-columns:repeat(3,1fr)}}
.cell{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--rose-tint);border:1px solid var(--line)}
.cell img{width:100%;height:100%;object-fit:cover;display:block}
.cell .rm{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(0,0,0,.55);color:#fff;font-size:15px;line-height:26px;padding:0;cursor:pointer}
.add-photos{width:100%;padding:16px;border-radius:16px;border:2px dashed var(--rose);background:var(--rose-tint);color:var(--rose-deep);font-weight:800;font-size:1.02rem;cursor:pointer}
.add-photos:active{transform:scale(.98)}

#prompt,#enhanced{width:100%;padding:15px;border-radius:16px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font-size:16px;resize:vertical;line-height:1.4}
#prompt:focus,#enhanced:focus{outline:none;border-color:var(--rose)}

.opt.magic{display:flex;align-items:center;gap:12px;background:var(--plum-tint);border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer}
.opt-txt{flex:1;display:flex;flex-direction:column}
.opt-txt small{color:var(--ink-soft);font-weight:600;font-size:.78rem;margin-top:1px}
.opt.magic input{position:absolute;opacity:0;pointer-events:none}
.switch{width:50px;height:30px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;flex:0 0 auto}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.opt.magic input:checked ~ .switch{background:var(--plum)}
.opt.magic input:checked ~ .switch::after{transform:translateX(20px)}

.seg{display:flex;align-items:center;gap:7px}
.seg-label{font-size:.9rem;font-weight:800;color:var(--ink-soft);margin-right:4px}
.seg button{flex:1;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:13px;padding:12px 6px;font-weight:800;font-size:1rem;cursor:pointer}
.seg button.on{background:var(--rose);border-color:var(--rose);color:#fff}
.cost{font-size:.9rem;color:var(--ink-soft);margin:-4px 2px 0;text-align:right;font-weight:600}

/* ---------- GALLERY ---------- */
.gallery-wrap{margin-top:26px}
.section-h{font-size:1rem;font-weight:800;margin:0 0 12px}
.gallery{display:flex;flex-direction:column;gap:14px}
.empty{color:var(--ink-soft);text-align:center;padding:16px;font-size:.95rem}
.job{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.job-top{display:flex;gap:12px;align-items:flex-start}
.job-thumb{width:50px;height:50px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:var(--rose-tint)}
.job-prompt{font-size:.9rem;color:var(--ink);flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.job-time{font-size:.75rem;color:var(--ink-soft);margin-top:3px}
.job-del{background:none;border:none;color:var(--ink-soft);font-size:1.15rem;cursor:pointer;padding:2px 6px;flex:0 0 auto}
.job-body{margin-top:12px}
.results{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.results.n1{grid-template-columns:1fr}
.results img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;cursor:zoom-in;background:var(--rose-tint)}
.save-all{margin-top:10px;width:100%;border:1.5px solid var(--rose);background:var(--rose-tint);color:var(--rose-deep);border-radius:13px;padding:11px;font-weight:800;cursor:pointer}
.working{display:flex;align-items:center;gap:14px;padding:8px 2px;color:var(--ink-soft);font-weight:700}
.mouse-load{font-size:34px;animation:magic 1.5s ease-in-out infinite}
@keyframes magic{0%,100%{transform:translateY(0) rotate(-6deg)}25%{transform:translateY(-6px) rotate(6deg) scale(1.08)}50%{transform:translateY(0) rotate(-4deg)}}
.sparkles{animation:tw 1.2s steps(3) infinite}
@keyframes tw{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}
.job.err .job-body{color:var(--err);font-weight:600;font-size:.9rem}
.retry{margin-top:8px;border:1.5px solid var(--rose);background:transparent;color:var(--rose-deep);border-radius:12px;padding:9px 15px;font-weight:800;cursor:pointer}

.foot{text-align:center;color:var(--ink-soft);font-size:.85rem;margin:34px 0 6px}

/* ---------- SHEET ---------- */
.sheet-backdrop{position:fixed;inset:0;z-index:50;background:rgba(30,20,26,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:620px;border-radius:24px 24px 0 0;padding:10px 18px calc(20px + var(--safe-b));box-shadow:0 -8px 30px rgba(0,0,0,.25);animation:up .25s ease}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:translateY(0);opacity:1}}
.sheet-grip{width:40px;height:5px;border-radius:3px;background:var(--line);margin:2px auto 12px}
.sheet h3{margin:0 0 4px;font-size:1.15rem}
.sheet-sub{color:var(--ink-soft);font-size:.85rem;margin:0 0 12px}
.sheet-btns{display:flex;gap:12px;margin-top:14px}
.sheet-btns .go{flex:2;margin-top:0}
.sheet-btns .ghost{flex:1;border:1.5px solid var(--line);border-radius:18px}

/* ---------- VIEWER (robust, always-visible controls) ---------- */
.viewer{position:fixed;inset:0;height:100dvh;z-index:60;background:#0c090b;display:flex;flex-direction:column;overscroll-behavior:contain}
.v-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + var(--safe-t)) 14px 8px}
.v-close{width:44px;height:44px;border-radius:50%;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:19px;cursor:pointer}
.v-count{color:#fff;font-weight:800;font-size:.95rem}
.v-spacer{width:44px}
.v-stage{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.v-slide{flex:0 0 100%;scroll-snap-align:center;padding:10px 12px;display:flex}
.v-slide img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.v-bar{flex:0 0 auto;display:flex;gap:12px;padding:12px 16px calc(14px + var(--safe-b));background:#141013}
.v-btn{flex:1;background:rgba(255,255,255,.14);border:none;color:#fff;font-weight:800;font-size:1rem;padding:15px;border-radius:14px;cursor:pointer}
.v-btn.primary{background:linear-gradient(100deg,var(--rose),var(--rose-deep))}
.v-btn:active{transform:scale(.98)}

@media (prefers-reduced-motion:reduce){*{animation:none!important}}