:root { --bg: #faf7f2; --fg: #2b2118; --muted: #7a6c5d; --accent: #6f4e37; --accent-fg: #fff; --card: #fff; --line: #e4dccf; --ok: #2f7d4f; --warn: #b45309; --bad: #b42318; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1612; --fg: #f1e8dc; --muted: #a8998a; --accent: #c8935f; --accent-fg: #1b1612; --card: #271f19; --line: #3a2f26; --ok: #6cc08b; --warn: #f0a04b; --bad: #f08a80; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--fg); }
main, section { max-width: 42rem; margin: 0 auto; }
main { padding: .75rem 1rem 4rem; }
h2 { margin: .5rem 0; font-size: 1.3rem; } h3 { margin: 1rem 0 .4rem; font-size: 1.05rem; }
small, .sub, .note, .muted { color: var(--muted); }
.sub { font-size: .85rem; }
.bar { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; padding-top: calc(.6rem + env(safe-area-inset-top)); background: var(--accent); color: var(--accent-fg); position: sticky; top: 0; z-index: 5; }
.bar button { background: transparent; color: inherit; border-color: currentColor; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: .5rem; align-items: center; margin: .35rem 0; }
.row.wrap { flex-wrap: wrap; }
.row > select { width: auto; flex: 0 1 11rem; min-width: 5rem; max-width: 55%; }
.row > .grow { flex: 1 1 8rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.center { text-align: center; }
.plain { list-style: none; padding: 0; margin: .25rem 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; margin: .6rem 0; }
.card h3 { margin-top: .1rem; }

button, select, input, textarea { font: inherit; color: inherit; }
button { padding: .55rem .9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--card); cursor: pointer; min-height: 44px; }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
button.danger { color: var(--bad); border-color: var(--bad); }
button.ghost { border-color: transparent; background: transparent; }
button:disabled { opacity: .45; cursor: not-allowed; }
input[type=text], input[type=number], input[type=date], input[type=password], select, textarea { width: 100%; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); min-height: 44px; }
input[type=checkbox] { width: 1.4rem; height: 1.4rem; }
input.code { width: 5rem; flex: none; }
.field { display: block; margin: .6rem 0; }
.field .lbl { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.field small { display: block; margin-top: .15rem; }

.tabs { display: flex; gap: .3rem; padding: .4rem 1rem; max-width: 42rem; margin: 0 auto; flex-wrap: wrap; }
.tabs button { padding: .4rem .8rem; min-height: 40px; white-space: nowrap; }
.tabs button.on, .seg button.on, .cup.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.seg { display: flex; gap: .4rem; } .seg button { flex: 1; }

.cups { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .5rem; margin-top: .4rem; }
.cup { font-size: 1.6rem; font-weight: 700; min-height: 4rem; }
.namegrid { display: grid; gap: .5rem; }
.namegrid button { text-align: left; font-size: 1.1rem; min-height: 52px; }
.letter { font-size: 1.6rem; font-weight: 700; width: 2.2rem; text-align: center; }
.cupnum { font-weight: 700; font-size: 1.3rem; width: 2rem; text-align: center; }
.cuprow, .coffee { display: flex; gap: .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
.photo { max-width: 100%; max-height: 14rem; border-radius: 10px; display: block; margin: .4rem 0; }

.ok { color: var(--ok); } .warn { color: var(--warn); } .errors { color: var(--bad); }
.banner { background: color-mix(in srgb, var(--warn) 18%, transparent); border: 1px solid var(--warn); padding: .5rem .7rem; border-radius: 8px; margin: .5rem 0; }
.break { word-break: break-all; display: block; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .25rem .35rem; border-bottom: 1px solid var(--line); }
tr.sel td { font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.qr { width: min(80vw, 22rem); margin: .5rem auto; background: #fff; padding: .4rem; border-radius: 8px; }
.qr svg { width: 100%; height: auto; display: block; }
textarea[readonly] { font-family: ui-monospace, monospace; font-size: .8rem; }

.toast { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #222; color: #fff; padding: .6rem 1rem; border-radius: 8px; z-index: 50; max-width: 90vw; }
.overlay { position: fixed; inset: 0; background: var(--bg); z-index: 40; padding: 1rem; overflow: auto; display: flex; flex-direction: column; gap: .6rem; }
.overlay.center { align-items: center; justify-content: center; text-align: center; }
.overlay video { width: 100%; max-height: 55vh; background: #000; border-radius: 10px; }
.coin { font-size: 2rem; font-weight: 700; white-space: pre-line; min-height: 8rem; display: flex; align-items: center; justify-content: center; }

/* Reveal show */
body.show .tabs, body.show .bar { display: none; }
.stage { min-height: 100vh; padding: 1.2rem; padding-bottom: 5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slide { width: 100%; max-width: 46rem; text-align: center; }
.giant { font-size: clamp(4rem, 22vw, 9rem); font-weight: 800; line-height: 1; color: var(--accent); }
.giant2 { font-size: clamp(2rem, 9vw, 3.5rem); }
.big { font-size: clamp(1.6rem, 7vw, 2.6rem); font-weight: 700; margin: .3rem 0; }
.meta { color: var(--muted); font-size: 1.1rem; }
.likes { font-size: clamp(1.1rem, 4.5vw, 1.5rem); margin: .6rem 0; text-align: left; }
.points { font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 700; color: var(--accent); }
.bigphoto { max-width: 100%; max-height: 32vh; border-radius: 12px; margin: .5rem auto; display: block; }
.stagebar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: .6rem; align-items: center; justify-content: center; padding: .6rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.slide .card { text-align: left; }

/* Insights */
.tablewrap { overflow-x: auto; margin: .5rem 0; }
.tablewrap table { min-width: 38rem; }
.barrow { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: .15rem 0; }
.barlbl { width: 7rem; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bartrack { flex: 1; height: .6rem; background: var(--line); border-radius: 4px; overflow: hidden; }
.barfill { display: block; height: 100%; background: var(--accent); }
.barval { width: 2.8rem; text-align: right; color: var(--muted); }