:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #182230; background: #f7f8fa; font-synthesis: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.status-banner { padding: 12px 0; color: #46566f; font-size: 14px; }
.answer-copy { white-space: pre-wrap; line-height: 1.8; margin: 16px 0; overflow-wrap: anywhere; }
.rating { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rating button { border-radius: 10px; padding: 12px 16px; background: #e9efff; color: #155eef; }
.review-note { font-size: 13px; color: #667085; line-height: 1.7; }
button:disabled { opacity: .55; cursor: default; }
.review-note { overflow-wrap: anywhere; margin: 8px 0; }
body { margin: 0; min-height: 100vh; padding-bottom: 84px; }
button, input, textarea { font: inherit; } button { border: 0; cursor: pointer; }
.topbar, main { width: min(100% - 32px, 760px); margin: 0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding: 28px 0 18px; }
h1, h2, p { margin: 0; } h1 { font-size: 28px; letter-spacing: -.04em; } h2 { font-size: 20px; margin: 26px 0 14px; } .eyebrow { color:#667085; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }
.hero-card { display:flex; justify-content:space-between; align-items:end; gap:18px; padding:24px; color:white; border-radius:24px; background:linear-gradient(135deg,#155eef,#6938ef); box-shadow:0 16px 36px #155eef2b; }
.hero-card strong { display:block; font-size:50px; line-height:1; margin:8px 0; } .hero-card p { color:#dbe5ff; font-size:13px; max-width:330px; }
.primary, .secondary { border-radius:12px; padding:12px 16px; font-weight:700; white-space:nowrap; } .primary { color:#155eef; background:white; } .secondary { color:#155eef; background:#e9efff; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; } .stats div { background:white; border:1px solid #e5e7eb; border-radius:16px; padding:15px; } .stats strong { display:block; font-size:24px; } .stats span { color:#667085; font-size:12px; }
.category-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } .category { background:white; border:1px solid #e5e7eb; border-radius:18px; padding:18px; } .category strong { display:block; margin-bottom:8px; } .category span { color:#667085; font-size:13px; }
.view { display:none; } .view.active { display:block; } .section-head { display:flex; align-items:center; gap:10px; margin:10px 0 24px; } .section-head h2 { margin:0; } .back { border-radius:12px; background:white; width:42px; height:42px; font-size:28px; color:#344054; }
.card-panel, .notice, .form-card { background:white; border:1px solid #e5e7eb; border-radius:20px; padding:22px; } .card-panel.empty { min-height:260px; display:grid; place-items:center; text-align:center; color:#667085; } .card-panel.empty button { margin-top:12px; }
.notice { background:#fff8eb; border-color:#fedf89; color:#7a4d00; font-size:13px; } .notice p { margin-top:5px; }
.form-card { display:grid; gap:16px; margin:14px 0 26px; } label { display:grid; gap:7px; font-weight:600; font-size:14px; } input, textarea { width:100%; border:1px solid #d0d5dd; border-radius:10px; padding:11px 12px; resize:vertical; } .form-card .primary { background:#155eef; color:white; }
.admin-token { display:grid; gap:7px; margin-top:14px; font-size:13px; color:#667085; }
.queue-list { display:grid; gap:10px; } .queue-item { background:white; border:1px solid #e5e7eb; border-radius:14px; padding:14px; } .queue-item strong { display:block; } .queue-item span { color:#667085; font-size:12px; overflow-wrap:anywhere; }
.link-button { padding:0; color:#155eef; background:transparent; text-decoration:underline; font-size:12px; } .check-line { display:flex; grid-template-columns:none; align-items:center; gap:9px; } .check-line input { width:auto; }
.bottom-nav { position:fixed; z-index:3; bottom:0; left:0; right:0; display:flex; justify-content:center; gap:10px; padding:10px max(16px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)); background:#ffffffee; backdrop-filter:blur(14px); border-top:1px solid #e5e7eb; } .nav-item { width:100px; color:#667085; background:transparent; font-size:20px; } .nav-item span { display:block; font-size:11px; margin-top:3px; } .nav-item.active { color:#155eef; }
@media (min-width: 650px) { .category-list { grid-template-columns:repeat(3,1fr); } .bottom-nav { position:static; margin-top:50px; border:0; background:transparent; } body { padding-bottom:0; } }