:root {
  --bg:#fafafa; --surface:#fff; --surface-2:#f7f7f8; --surface-3:#f1f1f3;
  --ink:#18181b; --ink-2:#3f3f46; --muted:#71717a; --faint:#a1a1aa;
  --line:#ececef; --line-2:#e0e0e4;
  --accent:#4f46e5; --accent-soft:#eef0fe;
  --blue:#2563eb; --blue-soft:#eff4ff;
  --amber:#b45309; --amber-soft:#fdf4e7;
  --green:#15803d; --green-soft:#eefaf1;
  --red:#dc2626; --red-soft:#fdeded;
  --gold:#ca8a04; --gold-soft:#fef9c3;
  --r-lg:12px; --r-md:9px; --r-sm:6px;
  --sh-sm:0 1px 2px rgba(24,24,27,.04);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:var(--sans); font-size:13px; color:var(--ink);
  background:var(--bg); -webkit-font-smoothing:antialiased;
}
body.loading { pointer-events:none; opacity:.85; }

.app {
  max-width:480px; margin:0 auto; min-height:100dvh;
  display:flex; flex-direction:column; background:var(--bg);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  position:relative; overflow:hidden;
}
@media (min-width:481px) {
  body { background:#f0f0f2; padding:12px 0; }
  .app { min-height:calc(100dvh - 24px); border-radius:14px; overflow:hidden; box-shadow:0 8px 30px rgba(24,24,27,.08); }
}

.app-head {
  flex:none; padding:10px 16px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
}
.app-head-row { display:flex; align-items:center; gap:10px; }
.brand { font-weight:700; font-size:16px; letter-spacing:-.02em; }
.brand span { color:var(--accent); }
.grow { flex:1; }
.chip {
  font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:99px;
  display:inline-flex; align-items:center; gap:5px;
}
.chip.green { background:var(--green-soft); color:var(--green); }
.chip.amber { background:var(--amber-soft); color:var(--amber); }
.chip.blue { background:var(--blue-soft); color:var(--blue); }

.screen { display:flex; flex-direction:column; flex:1; min-height:0; }
.screen-stack {
  position:relative; flex:1; min-height:0; display:flex; flex-direction:column;
}
.screen-stack > .screen {
  position:absolute; inset:0; display:none; flex-direction:column; background:var(--bg);
}
.screen-stack > .screen.on { display:flex; }
#app > .screen { flex:1; min-height:0; }
#app > .screen:not(.on) { display:none; }
#app > .screen.on { display:flex; }
.app-body { flex:1; overflow-y:auto; min-height:0; -webkit-overflow-scrolling:touch; }
.section { padding:14px 16px; }
.section-title { font-size:11px; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px; }

.field { margin-bottom:12px; }
.field label { display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:5px; }
.field input, .field select {
  width:100%; border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:11px 12px; font:inherit; font-size:14px; background:var(--surface);
}
.field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.btn-primary, .btn-action, .btn-ghost {
  border-radius:var(--r-md); font:inherit; cursor:pointer;
}
.btn-primary {
  width:100%; border:0; padding:12px; background:var(--ink); color:#fff;
  font-size:14px; font-weight:600;
}
.btn-action {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; border:0; padding:14px; font-size:14px; font-weight:600;
}
.btn-action.primary { background:var(--accent); color:#fff; }
.btn-action.secondary { background:var(--surface); border:1px solid var(--line-2); color:var(--ink-2); margin-top:8px; }
.btn-action:disabled { opacity:.45; cursor:default; }
.btn-ghost {
  border:1px solid var(--line-2); background:var(--surface); padding:8px 12px;
  font-size:12px; color:var(--ink-2);
}
.btn-link { border:0; background:none; color:var(--accent); font:inherit; font-size:12px; cursor:pointer; padding:0; }

.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px; margin-bottom:10px; box-shadow:var(--sh-sm);
}
.hint { font-size:11px; color:var(--muted); margin-top:8px; line-height:1.5; }
.empty { text-align:center; color:var(--muted); padding:32px 16px; font-size:12px; }

.setter-row { display:flex; align-items:center; gap:10px; }
.avatar {
  width:36px; height:36px; border-radius:99px; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; font-size:13px; font-weight:700;
}
.question-preview {
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line);
  background:var(--surface-2); position:relative;
}
.question-preview img { width:100%; display:block; }
.question-preview .overlay {
  position:absolute; bottom:0; left:0; right:0; padding:8px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.55)); color:#fff; font-size:11px;
}

.my-status {
  display:flex; align-items:center; gap:10px; padding:12px;
  background:var(--green-soft); border:1px solid #bbf7d0; border-radius:var(--r-md);
}
.my-status.pending { background:var(--amber-soft); border-color:#fde68a; }
.score-big { font-size:28px; font-weight:800; color:var(--green); }

.upload-zone {
  display:block; width:100%;
  border:2px dashed var(--line-2); border-radius:var(--r-lg);
  padding:24px 16px 20px; text-align:center; background:var(--surface);
}
.upload-zone .icon { font-size:28px; margin-bottom:6px; }
.upload-zone > p { margin:0 0 4px; font-size:13px; color:var(--ink-2); }
.upload-zone > .hint { margin:0 0 14px; }
.upload-actions { display:flex; gap:8px; justify-content:center; }
.btn-upload-opt {
  border:0; border-radius:var(--r-md); padding:10px 18px;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  background:var(--accent); color:#fff; min-width:108px;
}
.btn-upload-opt.secondary {
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line-2);
}
.upload-file-input {
  position:absolute; width:0; height:0; opacity:0; pointer-events:none;
}
.upload-panel { width:100%; overflow:hidden; }
.upload-panel.hidden { display:none; }
.answer-question .empty-state {
  text-align:center; padding:20px 12px; color:var(--muted); font-size:12px;
  background:var(--surface-2); border-radius:var(--r-md); border:1px solid var(--line);
}
.mine-profile {
  display:flex; align-items:center; gap:12px; padding:14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  margin-bottom:14px;
}
.mine-profile .avatar { width:44px; height:44px; font-size:15px; }
.mine-profile .name { font-size:15px; font-weight:600; }
.ai-comment { font-size:13px; line-height:1.7; color:var(--ink-2); }
.ai-error {
  font-size:12px; line-height:1.6; color:var(--red);
  background:var(--red-soft); border:1px solid #fecaca;
}
.thumb-row { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; min-height:0; }
.thumb-row:empty { display:none; }
.thumb {
  width:72px; height:72px; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line); position:relative;
}
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb .x {
  position:absolute; top:2px; right:2px; width:18px; height:18px;
  border-radius:99px; background:rgba(0,0,0,.6); color:#fff; font-size:11px;
  display:grid; place-items:center; cursor:pointer;
}

.bottom-nav {
  flex:none; height:56px; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); background:rgba(255,255,255,.95);
}
.bottom-nav button {
  border:0; background:transparent; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  color:var(--faint); font-size:10px; font-weight:500; cursor:pointer;
}
.bottom-nav button.on { color:var(--accent); font-weight:600; }
.bottom-nav svg { width:20px; height:20px; }

.lb-tabs { display:flex; gap:4px; background:var(--surface-3); padding:3px; border-radius:8px; margin-bottom:12px; }
.lb-tabs button {
  flex:1; border:0; background:transparent; font:inherit; font-size:12px;
  padding:7px; border-radius:6px; color:var(--muted); cursor:pointer;
}
.lb-tabs button.on { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--sh-sm); }

.rank-row {
  display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);
}
.rank-row:last-child { border-bottom:0; }
.rank-no { width:24px; text-align:center; font-size:13px; font-weight:700; color:var(--faint); }
.rank-no.gold { color:var(--gold); }
.rank-no.silver { color:var(--muted); }
.rank-no.bronze { color:#b45309; }
.rank-name { flex:1; font-size:13px; font-weight:500; }
.rank-name .no { color:var(--faint); font-size:11px; margin-right:4px; }
.rank-score { font-size:14px; font-weight:700; color:var(--accent); }
.rank-meta { font-size:10px; color:var(--faint); text-align:right; }
.me-row { background:var(--accent-soft); margin:0 -16px; padding:10px 16px; border-radius:var(--r-md); }

.mistake-item {
  display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px;
}
.mistake-item:last-child { border-bottom:0; }
.mistake-item .cell {
  width:28px; height:28px; border-radius:var(--r-sm); background:var(--red-soft);
  color:var(--red); display:grid; place-items:center; font-weight:700;
}
.mistake-item .reason { color:var(--muted); font-size:11px; margin-top:2px; }

.review-card { margin-bottom:10px; }
.review-card img { width:100%; border-radius:var(--r-sm); margin-top:8px; }
.review-actions { display:flex; gap:8px; margin-top:10px; }
.review-actions input {
  width:64px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:8px; font:inherit; text-align:center;
}

.login-wrap { flex:1; display:flex; flex-direction:column; justify-content:center; padding:24px 20px; }
.login-logo { text-align:center; margin-bottom:24px; }
.login-logo h1 { margin:0 0 6px; font-size:26px; font-weight:800; }
.login-logo h1 em { font-style:normal; color:var(--accent); }

.toast {
  position:fixed; left:50%; bottom:72px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:99px;
  font-size:12px; opacity:0; pointer-events:none; transition:.2s; z-index:100;
  max-width:90vw; text-align:center;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err { background:var(--red); }

/* admin desktop */
.admin-page { max-width:960px; margin:0 auto; padding:16px; min-height:100dvh; }
.admin-top { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.admin-top h1 { margin:0; font-size:20px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; text-align:center; }
.stat .v { font-size:22px; font-weight:800; }
.stat .k { font-size:11px; color:var(--muted); }
.table { width:100%; border-collapse:collapse; font-size:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.table th, .table td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; }
.table th { color:var(--faint); font-weight:600; background:var(--surface-2); }
.badge-yes { color:var(--green); font-weight:600; }
.badge-no { color:var(--faint); }
.badge-late { color:var(--amber); font-weight:600; }
.admin-grid { display:grid; grid-template-columns:1fr 300px; gap:16px; }
@media (max-width:760px) { .admin-grid { grid-template-columns:1fr; } }