:root{
  --bg:#1C1A1F; --panel:#252229; --wine:#7A1F2B; --gold:#C9A24B;
  --text:#EDE7E0; --muted:#9C9498; --line:#3A353C;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
.app{ max-width:560px; margin:0 auto; padding:16px 16px 60px; }
h1{ font-family:var(--font-display); font-weight:600; font-size:1.7rem; margin:12px 0 4px; }
h2{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; margin:0 0 10px; }
.lede{ color:var(--muted); margin:0 0 16px; }
.muted{ color:var(--muted); font-size:0.9rem; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:0.85rem; color:var(--muted); margin-bottom:4px; }
input, select, textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line);
  background:#1A1820; color:var(--text); font-size:1rem; font-family:var(--font-body);
}
textarea{ resize:vertical; }
input[type=checkbox]{ width:auto; }
input[type=range]{ padding:0; }
button{ cursor:pointer; font-family:var(--font-body); font-weight:600; border:none; border-radius:8px; padding:11px 16px; font-size:0.95rem; }
.btn-primary, .btn_primary{ background:var(--wine); color:#fff; width:100%; }
.btn-primary:disabled{ opacity:0.4; cursor:not-allowed; }
.btn-gold{ background:var(--gold); color:#221C0F; width:100%; }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
.btn-ghost.btn-small, .btn-small{ padding:6px 10px; font-size:0.82rem; width:auto; }
.linklike{ display:inline-block; margin-top:10px; color:var(--gold); cursor:pointer; text-decoration:none; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.row{ display:flex; gap:8px; }
.divider{ height:1px; background:var(--line); margin:12px 0; }
.pill{ display:inline-block; background:#332A2D; color:var(--gold); font-size:0.75rem; padding:3px 9px; border-radius:99px; }
table{ width:100%; border-collapse:collapse; font-size:0.9rem; }
th, td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); }
th{ color:var(--muted); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.03em; }
/* Freeze-pane-style pinned first column for wide tables (e.g. the Tasting notes matrix) so
   the row label stays visible while scrolling horizontally through the rest of the row. */
.sticky-col{ position:sticky; left:0; background:var(--panel); z-index:1; white-space:nowrap; }
.score-slider{ width:100%; }
.score-display{ font-family:var(--font-display); font-size:1.8rem; color:var(--gold); text-align:center; margin-bottom:6px; }
.link-box{ font-size:0.85rem; word-break:break-all; color:var(--muted); background:#1A1820; padding:8px 10px; border-radius:8px; }
.tabbar{ display:flex; gap:6px; margin-bottom:16px; }
.tabbar button{ flex:1; background:var(--panel); color:var(--muted); border:1px solid var(--line); }
.tabbar button.active{ background:var(--wine); color:#fff; border-color:var(--wine); }
.warn{ background:rgba(200,60,60,0.12); }
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#111; color:#fff; padding:10px 18px; border-radius:8px; font-size:0.9rem;
  box-shadow:0 4px 20px rgba(0,0,0,0.4); z-index:50;
}
details summary{ cursor:pointer; color:var(--gold); }

/* ===== v29 ===== */
.host-modes{ display:flex; gap:6px; }
.host-mode-btn{ flex:1; width:auto; padding:13px 2px; font-size:0.88rem; }
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:60; }
.modal{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw,420px); max-height:84vh; overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; z-index:61;
}
.modal-brand{ display:block; width:100%; text-align:left; margin-bottom:8px; }
.soon-note{ background:rgba(201,162,75,0.12); border:1px solid var(--gold); border-radius:8px; padding:10px 12px; font-size:0.9rem; margin:0 0 12px; }
.price-over-limit{ color:#E5645F; font-weight:700; }
.btn-stack{ margin-top:12px; }
p.after-btn{ margin:8px 0 14px; }

/* ===== v32 ===== */
table.id-board{ table-layout:fixed; }
table.id-board th, table.id-board td{ overflow-wrap:anywhere; }
table.id-board th{ white-space:normal; font-size:0.7rem; line-height:1.15; vertical-align:bottom; }
table.id-board th:first-child{ width:27%; }
table.id-board th:last-child{ width:15%; }

/* ===== v33: Save -> Saved ===== */
.btn-save{ width:100%; background:var(--gold); color:#221C0F; }
.btn-save.is-saved{ background:rgba(60,160,90,0.18); color:#7BD88F; border:1px solid #3C7A4C; }
.save-note{ margin:6px 0 0; font-size:0.82rem; }

/* ===== v34 ===== */
.lbl{ color:#fff; font-weight:700; }

/* v35: out-of-bounds score / over-limit price warnings */
label.score-bad-lbl{ color:#ff6b6b !important; font-weight:700; }
input.score-bad{ border-color:#ff6b6b !important; box-shadow:0 0 0 1px #ff6b6b; }
.field-warn{ color:#ff6b6b; font-size:0.9em; margin:4px 0 6px; }

/* v37: visible calendar/clock pickers on the dark theme; judge-adjusted colours */
input[type="date"], input[type="time"]{ color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator{ filter:none; opacity:1; cursor:pointer; width:22px; height:22px; color:transparent; background-position:center; background-repeat:no-repeat; background-size:22px; }
input[type="date"]::-webkit-calendar-picker-indicator{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A24B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>"); }
input[type="time"]::-webkit-calendar-picker-indicator{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A24B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>"); }
.adj-up{ color:#7BC47F; font-weight:700; } .adj-down{ color:#E5645F; font-weight:700; }

.sug{ margin-top:4px; border-radius:10px; overflow:hidden; }
.sug-item{ display:block; width:100%; text-align:left; background:#1c1b24; color:inherit; border:1px solid #33313f; border-top:0; padding:10px 12px; font:inherit; cursor:pointer; }
.sug-item:first-child{ border-top:1px solid #33313f; border-radius:10px 10px 0 0; } .sug-item:last-child{ border-radius:0 0 10px 10px; }
.sug-item:hover{ background:#2a2834; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.chip{ background:#2a2834; border:1px solid #C9A24B; border-radius:999px; padding:4px 6px 4px 12px; font-size:0.9rem; display:inline-flex; align-items:center; gap:4px; }
.chip-x{ background:none; border:0; color:#C9A24B; font-size:1.2rem; line-height:1; cursor:pointer; padding:0 6px; }

.chip-loaded{ padding:4px 12px; border-color:#7BD88F; color:#7BD88F; }

/* v44 */
.note-lbl{ color:var(--text); font-weight:600; }
.note-hint{ color:var(--muted); font-size:0.8rem; font-weight:400; margin-left:4px; line-height:1.3; }
.aroma-group{ font-size:0.78rem; color:var(--muted); margin:6px 0 2px; }
.aroma-row{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 6px; }
.aroma-chip{ background:transparent; color:var(--text); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:0.85rem; cursor:pointer; font-family:inherit; }
.aroma-chip.on{ background:var(--gold); color:#1C1A1F; border-color:var(--gold); font-weight:600; }
tr.rk-main td{ border-bottom:none; padding-bottom:2px; }
tr.rk-detail td{ padding-top:0; padding-bottom:10px; font-size:0.88rem; }

/* v46 */
.hscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  background: linear-gradient(to right, var(--panel) 30%, rgba(37,34,41,0)) 0 0, linear-gradient(to left, var(--panel) 30%, rgba(37,34,41,0)) 100% 0,
              radial-gradient(farthest-side at 0 50%, rgba(201,162,75,.35), rgba(0,0,0,0)) 0 0, radial-gradient(farthest-side at 100% 50%, rgba(201,162,75,.45), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat; background-size:40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment:local, local, scroll, scroll; }
.swipe-chip{ text-align:right; color:var(--gold); font-size:0.78rem; margin:0 0 4px; }
.evcard{ border:1px solid var(--gold); border-radius:12px; padding:12px; margin-bottom:10px; cursor:pointer; background:var(--panel); }
.evrow{ display:flex; align-items:center; gap:10px; }
.evtick{ flex:0 0 auto; } .evmain{ flex:1; min-width:0; overflow-wrap:anywhere; } .evgo{ color:var(--gold); font-size:1.6rem; line-height:1; }
.evact{ margin-top:8px; }

.turn-banner{ background:rgba(201,162,75,0.16); border:1px solid var(--gold); color:var(--text); border-radius:10px; padding:10px 12px; margin:0 0 10px; font-weight:600; }
.live-status{ font-size:0.75rem; text-align:right; margin:2px 0 8px; }

/* v50: quiz level buttons */
.quiz-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.quiz-lv{display:flex;flex-direction:column;gap:4px;text-align:left;padding:10px;border:1.5px solid var(--line);border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.quiz-lv strong{font-size:1.05rem}
.quiz-lv span{font-size:0.78rem;opacity:.75;line-height:1.3}
.quiz-lv.on{border-color:var(--gold,#b8903a);background:rgba(184,144,58,.14)}
.btn-small{white-space:nowrap}
.rowbtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rowbtns .btn-small{padding:6px 9px;font-size:0.85rem;width:auto;margin:0}
.fb-fab{position:fixed;right:12px;bottom:12px;z-index:50;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:inherit;font:inherit;font-size:0.8rem;opacity:.85;cursor:pointer}
#fb-root .modal{max-height:90vh;overflow:auto}
#fb-root textarea{padding:8px;border-radius:8px;border:1px solid var(--line);background:transparent;color:inherit;font:inherit}

/* v51: three buttons on one row (Results, example results) */
.rowbtns.r3{flex-wrap:nowrap;gap:5px}
.rowbtns.r3 .btn-small{flex:1 1 0;min-width:0;padding:6px 3px;font-size:clamp(0.66rem,3.1vw,0.85rem);text-align:center;overflow:hidden;text-overflow:ellipsis}

/* v52: Home start tiles */
.host-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;margin-bottom:10px;padding:14px}
.host-tile strong{font-size:1.05rem}
.host-tile span{font-size:0.82rem;font-weight:400;opacity:.85;line-height:1.3}
.host-modes{flex-wrap:wrap}
.host-tile{width:100%;flex:1 1 100%}

/* v53 */
details.sat-notes{margin-bottom:24px}
details.sat-notes + .btn-save, details.sat-notes + .btn-primary{margin-top:6px}
.id-board th, .id-board td{padding-left:6px;padding-right:6px}
.id-board th{white-space:nowrap}
.legal-sec{border-bottom:1px solid var(--line);padding:9px 0}
.legal-sec summary{font-weight:600;color:var(--text,inherit)}
details.other-guess{margin-top:8px}

/* v54 */
.pick-preview{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pick-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:10px 12px;border-bottom:1px solid var(--line);line-height:1.35}
.pick-row:last-child{border-bottom:0}
.pick-row .linklike{flex:none;padding:0 4px}
.pour-modal{max-height:90vh;overflow:auto}
.pour-btn{display:block;width:100%;text-align:left;margin:0 0 8px;padding:14px 12px;font-size:1.02rem;line-height:1.35;white-space:normal}
textarea[id^="ls-"]{min-height:56px;resize:vertical}

/* v55 */
.qr-box{width:220px;max-width:70vw;margin:10px auto 0;background:#fff;padding:6px;border-radius:10px}
.qr-box svg{width:100%;height:auto;display:block}
input[type=search]{width:100%}

/* v59: until Phase 3, the app keeps its own 💬 Feedback button (saves screenshots to Admin > Feedback),
   so the Hub kit's second Feedback button is hidden. The kit's TRIAL sash still shows. Delete this rule in Phase 3. */
.kit-feedback-btn{display:none !important}