:root{
  --bg:#faf6ef; --card:#ffffff; --ink:#2a2118; --muted:#7a6a55;
  --line:#e3d5bd; --accent:#b8663b; --accent-ink:#ffffff;
  --accent-soft:#f2e2cf; --danger:#b23b3b; --danger-bg:#fbeaea;
  --ok-bg:#eaf4ea;
  --radius:10px;
  --shadow:0 1px 3px rgba(40,25,10,.08), 0 6px 18px rgba(40,25,10,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1b1712; --card:#252019; --ink:#efe6d8; --muted:#a9977e;
    --line:#3a3226; --accent:#d98a53; --accent-ink:#1b1712;
    --accent-soft:#3a2c1c; --danger:#e58787; --danger-bg:#3a2222;
    --ok-bg:#1f2e1f;
    --shadow:0 1px 3px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  }
}
:root[data-theme="light"]{
  --bg:#faf6ef; --card:#ffffff; --ink:#2a2118; --muted:#7a6a55;
  --line:#e3d5bd; --accent:#b8663b; --accent-ink:#ffffff;
  --accent-soft:#f2e2cf; --danger:#b23b3b; --danger-bg:#fbeaea; --ok-bg:#eaf4ea;
}
:root[data-theme="dark"]{
  --bg:#1b1712; --card:#252019; --ink:#efe6d8; --muted:#a9977e;
  --line:#3a3226; --accent:#d98a53; --accent-ink:#1b1712;
  --accent-soft:#3a2c1c; --danger:#e58787; --danger-bg:#3a2222; --ok-bg:#1f2e1f;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
main{max-width:880px;margin:0 auto;padding:1.5rem 1.25rem 4rem;}
h1{font-size:1.6rem;margin:.2rem 0 .3rem;}
h2{font-size:1.15rem;margin:0 0 .8rem;}
h2.inline{display:inline;}
.muted{color:var(--muted);}
.hint{display:block;color:var(--muted);font-size:.82rem;font-weight:400;margin-top:.15rem;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.25rem;border-bottom:1px solid var(--line);
  background:var(--card);
}
.brand{color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:.02em;}
.brand-mark{color:var(--accent);}
.brand-sub{font-weight:400;color:var(--muted);font-size:.85em;}
.logout{color:var(--muted);text-decoration:none;font-size:.9rem;}
.logout:hover{color:var(--ink);}

footer{
  text-align:center;color:var(--muted);font-size:.8rem;
  padding:2rem 1rem 3rem;
}

.flash-wrap{max-width:880px;margin:1rem auto 0;padding:0 1.25rem;}
.flash{padding:.6rem .9rem;border-radius:var(--radius);margin-bottom:.6rem;font-size:.9rem;}
.flash-error{background:var(--danger-bg);color:var(--danger);}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;margin-bottom:1.25rem;box-shadow:var(--shadow);
}
.page-head{margin:1.5rem 0;}
.page-head p{max-width:65ch;}

.field-group{margin-bottom:2rem;}
.field-group h2{border-bottom:1px solid var(--line);padding-bottom:.5rem;}
.field-row{margin:1rem 0;}
.field-row label{display:block;font-weight:600;margin-bottom:.4rem;}
.slider-line{display:flex;align-items:center;gap:.9rem;}
.slider-line input[type=range]{flex:1;accent-color:var(--accent);}
.slider-val{font-variant-numeric:tabular-nums;min-width:5.5em;color:var(--accent);font-weight:700;}

.style-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem;}
.style-card{
  border:2px solid var(--line);border-radius:var(--radius);padding:.8rem 1rem;
  cursor:pointer;display:block;transition:border-color .15s, background .15s;
}
.style-card input{position:absolute;opacity:0;pointer-events:none;}
.style-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft);}
.style-card-body strong{display:block;margin-bottom:.2rem;}
.style-card-body .muted{font-size:.85rem;}

.conditional{margin-top:1rem;padding:1rem;background:var(--accent-soft);border-radius:var(--radius);display:none;}
.conditional.is-visible{display:block;}
.preset-row{display:flex;flex-wrap:wrap;gap:.5rem;}
.preset-pill{border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;cursor:pointer;font-size:.88rem;background:var(--card);}
.preset-pill input{position:absolute;opacity:0;pointer-events:none;}
.preset-pill:has(input:checked){border-color:var(--accent);background:var(--accent);color:var(--accent-ink);}

input[type=file]{margin-top:.4rem;width:100%;color:var(--ink);}

.btn{
  display:inline-block;padding:.55rem 1.1rem;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  text-decoration:none;font-size:.92rem;cursor:pointer;font-weight:600;
}
.btn:hover{border-color:var(--accent);}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.btn-ghost{background:transparent;}
.btn-block{display:block;width:100%;text-align:center;}
.btn-generate{padding:.85rem;font-size:1rem;}

.login-wrap{display:flex;justify-content:center;padding-top:3rem;}
.login-card{width:100%;max-width:360px;}
.login-card label{display:block;margin:.8rem 0 .3rem;font-weight:600;}
.login-card input{width:100%;padding:.55rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg);color:var(--ink);font-size:1rem;}
.login-card .btn{margin-top:1.2rem;}

.banner-error{border-color:var(--danger);}
.banner-error h1{color:var(--danger);}

.result-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;}
.result-actions{display:flex;gap:.6rem;flex-wrap:wrap;}

.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;}
.preview-grid img{width:100%;border-radius:8px;border:1px solid var(--line);cursor:zoom-in;background:#fff;}

.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;}
.sheet-tile{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;}
.sheet-thumb{display:block;aspect-ratio:3/4;overflow:hidden;cursor:zoom-in;}
.sheet-thumb img{width:100%;height:100%;object-fit:contain;background:#fff;}
.sheet-caption{padding:.5rem .6rem;font-size:.82rem;display:flex;justify-content:space-between;
  align-items:center;gap:.4rem;background:var(--card);color:var(--ink);}
.mini-link{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap;}

pre.log{white-space:pre-wrap;font-size:.78rem;background:var(--bg);padding:.8rem;
  border-radius:8px;max-height:420px;overflow:auto;border:1px solid var(--line);}

.lightbox{
  position:fixed;inset:0;background:rgba(10,8,5,.9);display:none;
  align-items:center;justify-content:center;z-index:50;
}
.lightbox.is-open{display:flex;}
.lightbox-stage{width:92vw;height:88vh;overflow:hidden;position:relative;cursor:grab;}
.lightbox-stage.dragging{cursor:grabbing;}
.lightbox-stage img{
  position:absolute;left:50%;top:50%;max-width:none;
  transform:translate(-50%,-50%) scale(1);background:#fff;border-radius:4px;
  transform-origin:center center;
}
.lightbox-close{
  position:absolute;top:1rem;right:1.2rem;background:none;border:none;
  color:#fff;font-size:2rem;cursor:pointer;line-height:1;
}