/* theme.css — design tokens + glass building blocks (port of _theme.html / style.css).
   Viewport split: mobile <=640px, desktop >=641px. Size knobs ONLY in those two blocks. */
:root{
  --bg:#f4efe6; --ink:#1c1915; --muted:#6b6459; --card:#fffcf7; --line:#ddd4c6; --err:#9f1239;
  --frost-fill:rgba(255,255,255,0.42); --frost-solid:rgba(255,255,255,0.72);
  --frost-line:rgba(255,255,255,0.55); --frost-shadow:0 8px 32px rgba(28,25,21,0.08);
  --frost-blur:blur(28px) saturate(180%);
  --ink-fade:rgba(28,25,21,0.82); --ink-soft:rgba(28,25,21,0.48);
  --btn-upload:rgba(244,239,230,0.85); --btn-slideshow:#d4d1cc; --btn-lottery:#d4af37;
  --gold:#d4af37; --gold-pale:#ffe9b0; --silver:#d8dde3;
  --font:"PingFang TC","Noto Sans TC","Noto Sans CJK TC",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}

/* Stage background (no cover photo yet): cream with soft gold/silver light so the frost reads */
.stage-bg{position:fixed;inset:0;z-index:0;background:
  radial-gradient(60vmax 50vmax at 12% 18%,rgba(212,175,55,0.30),transparent 60%),
  radial-gradient(55vmax 45vmax at 88% 82%,rgba(216,221,227,0.85),transparent 60%),
  radial-gradient(40vmax 35vmax at 80% 10%,rgba(255,233,176,0.65),transparent 60%),
  var(--bg)}

/* Glass stage */
.glass-stage{position:fixed;inset:0;z-index:10;display:grid;grid-template-rows:minmax(0,1fr) auto;
  gap:0.1cm;padding:var(--glass);padding-top:max(64px,var(--glass))}
.glass-card{border-radius:28px;background:var(--frost-fill);border:1px solid var(--frost-line);
  box-shadow:var(--frost-shadow);-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);
  overflow:auto;display:flex;justify-content:center}
.glass-wait .glass-card{background:var(--frost-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
.glass-wait.is-ready .glass-card{background:var(--frost-fill);-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur)}
.glass-body{width:min(720px,100%);display:flex;flex-direction:column;align-items:stretch;margin:auto 0}
.glass-body.narrow{width:min(360px,100%)}
.credit{text-align:center;font-size:12px;color:var(--ink-soft);letter-spacing:.04em}

/* Headings / text */
.title{margin:0 0 6px;font-weight:700;text-align:center;color:var(--ink)}
.lead{margin:0 0 18px;text-align:center;color:var(--muted);white-space:pre-line;line-height:1.6}
.note{color:var(--muted);text-align:center;white-space:pre-line;line-height:1.5}
.label{display:block;color:var(--muted);font-size:14px;margin:12px 0 6px}

/* Chrome pills */
.chrome-pill{position:fixed;top:12px;z-index:30;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:700;
  color:var(--ink-fade);text-decoration:none;background:var(--frost-fill);border:1px solid var(--frost-line);
  box-shadow:var(--frost-shadow);-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);
  font-family:inherit;cursor:pointer;line-height:1.4;appearance:none}
.back-btn{left:var(--chrome-inset)}
.chrome-home{left:50%;transform:translateX(-50%)}
.chrome-end{right:var(--chrome-inset)}
.chrome-drop{position:fixed;top:52px;right:var(--chrome-inset);z-index:31;min-width:150px;padding:6px;border-radius:16px;
  background:var(--frost-solid);border:1px solid var(--frost-line);box-shadow:var(--frost-shadow);
  -webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);display:flex;flex-direction:column}
.chrome-drop button,.chrome-drop a{all:unset;cursor:pointer;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:700;color:var(--ink-fade)}
.chrome-drop button:hover,.chrome-drop a:hover{background:rgba(255,255,255,0.6)}

/* Buttons */
.btn{display:block;text-align:center;text-decoration:none;font-family:inherit;font-weight:700;cursor:pointer;
  border:1px solid #fff;color:var(--ink-fade);background:var(--btn-upload);white-space:pre-line;width:100%}
.btn.secondary{background:var(--btn-slideshow)}
.btn.lottery{background:var(--btn-lottery)}
.btn.ink{background:var(--ink);color:var(--card);border-color:var(--ink)}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed}
.actions{display:flex;flex-direction:column;gap:var(--pjt-gap)}
.btn .sub{display:block;font-weight:400;opacity:.75;margin-top:4px;font-size:.72em}

/* Forms */
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px}
input[disabled]{opacity:.7}
.flash{border-radius:12px;padding:10px 14px;background:var(--card);border:1px solid var(--line);color:var(--muted);text-align:center;white-space:pre-line}
.flash.err{color:var(--err);border-color:var(--err)}

/* Lists (reports) */
.list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;
  background:rgba(255,252,247,0.7);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.row .meta{color:var(--muted);font-size:13px}
.row .go{font-weight:700;color:var(--ink-fade);white-space:nowrap}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--gold);color:#fff;font-size:12px;font-weight:700;margin-left:8px;vertical-align:middle}

/* ===== Mobile ===== */
@media (max-width:640px){
  :root{--glass:1cm;--chrome-inset:1cm;--pjt-gap:12px}
  .glass-stage{padding-left:0.4cm;padding-right:0.4cm;padding-bottom:0.3cm}
  .glass-card{padding:22px 16px}
  .title{font-size:24px}
  .lead{font-size:15px}
  .chrome-pill{}
  .back-btn{left:0.4cm}.chrome-end{right:0.4cm}.chrome-drop{right:0.4cm}
  .btn{font-size:16px;padding:16px 14px;border-radius:14px}
  .btn.cover{font-size:20px;padding:24px 14px}
  .row{padding:14px}
}
/* ===== Desktop ===== */
@media (min-width:641px){
  :root{--glass:2cm;--chrome-inset:2cm;--pjt-gap:16px}
  .glass-card{padding:40px 32px}
  .title{font-size:32px}
  .lead{font-size:17px}
  .btn{font-size:18px;padding:22px 20px;border-radius:16px}
  .btn.cover{font-size:22px;padding:30px 20px}
}