/* ============ Glass surface ============ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-2), var(--hairline);
  border-radius: var(--r-3);
}

.panel { background: var(--bg-1); border: 1px solid var(--stroke); border-radius: var(--r-3); }
.panel-pad { padding: var(--s-4); }
.card-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); font-weight: 600; }

/* ============ Status bar ============ */
.statusbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-4);
  margin: var(--s-4) var(--s-4) 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--stroke);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2), var(--hairline);
  overflow: hidden;
  min-height: 52px;
}
.statusbar.working::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(110,168,255,.10) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer-sweep 2.6s linear infinite;
}
.sb-brand { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--text-0); letter-spacing: .01em; }
.sb-brand .logo { width: 26px; height: 26px; color: var(--accent); }
.sb-brand small { color: var(--text-2); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }
.sb-round { color: var(--text-1); font-weight: 600; }
.sb-sep { width: 1px; height: 22px; background: var(--stroke); }
.sb-counters { display: flex; gap: var(--s-4); margin-left: auto; }
.sb-counter { display: flex; flex-direction: column; align-items: center; line-height: 1.1; min-width: 46px; }
.sb-counter .n { font-size: 15px; font-weight: 700; color: var(--text-0); }
.sb-counter .l { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }
.sb-clock { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.sb-clock .big { font-size: 15px; font-weight: 700; color: var(--text-0); }
.sb-clock .eta { font-size: 10px; color: var(--text-2); }
.sb-actions { display: flex; gap: var(--s-2); }

/* Model pill */
.model-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--stroke); background: var(--bg-2); text-transform: uppercase;
}
.model-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.model-pill.gemma { color: var(--mint); } .model-pill.gemma .dot { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.model-pill.llama { color: var(--accent); } .model-pill.llama .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* Live dot */
.live-dot { position: relative; width: 10px; height: 10px; }
.live-dot i, .live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pos);
}
.live-dot::after { animation: pulse-ring 1.8s ease-out infinite; opacity: .6; }
.live-dot.amber i, .live-dot.amber::after { background: var(--warn); }
.live-dot.off i { background: var(--text-2); } .live-dot.off::after { display: none; }
.live-dot i { box-shadow: 0 0 8px currentColor; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-2);
  background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text-0);
  font-weight: 600; font-size: 13px;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover { background: #1c2230; border-color: #33405a; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn .icon { width: 15px; height: 15px; }
.btn-primary { background: linear-gradient(180deg, #79b0ff, #5a93f0); border-color: transparent; color: #08101e; box-shadow: var(--glow-accent); }
.btn-primary:hover { background: linear-gradient(180deg, #8bbcff, #6ea0ff); }
.btn-danger { color: var(--neg); border-color: rgba(255,122,122,.3); }
.btn-danger:hover { background: rgba(255,122,122,.12); border-color: rgba(255,122,122,.5); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-2); }
.btn-block { width: 100%; }
.btn-lg { padding: 12px 18px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============ Composer ============ */
.composer { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > label { font-size: 12px; font-weight: 600; color: var(--text-1); }
.field .hint { font-size: 11px; color: var(--text-2); }

.input, .textarea, .select {
  width: 100%; padding: 10px 12px;
  background: var(--bg-0); border: 1px solid var(--stroke); border-radius: var(--r-2);
  color: var(--text-0); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input:focus, .textarea:focus, .select:focus, .input:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(110,168,255,.16); outline: none;
}
.textarea { resize: vertical; min-height: 74px; font-family: var(--font-mono); line-height: 1.45; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%238b93a7' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* Dropzone */
.dropzone {
  border: 1.5px dashed var(--stroke); border-radius: var(--r-3);
  padding: var(--s-6) var(--s-4); text-align: center; color: var(--text-2);
  transition: border-color var(--dur-med), background var(--dur-med), color var(--dur-med);
  cursor: pointer; position: relative;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: rgba(110,168,255,.06); color: var(--text-1); }
.dropzone .icon { width: 26px; height: 26px; margin-bottom: 6px; color: var(--accent); }
.dropzone-preview { position: relative; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--stroke); }
.dropzone-preview img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }
.dropzone-preview .rm { position: absolute; top: 8px; right: 8px; background: rgba(10,12,16,.8); border: 1px solid var(--stroke); border-radius: var(--r-full); width: 28px; height: 28px; display: grid; place-items: center; color: var(--text-0); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-full);
  border: 1px solid var(--stroke); background: var(--bg-0); color: var(--text-2);
  font-size: 12px; font-weight: 600; transition: all var(--dur-fast) var(--ease-out); user-select: none;
}
.chip:hover { border-color: #33405a; color: var(--text-1); }
.chip.on { color: var(--text-0); border-color: color-mix(in srgb, var(--tint, var(--accent)) 55%, var(--stroke)); background: color-mix(in srgb, var(--tint, var(--accent)) 14%, var(--bg-0)); }
.chip .swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--tint, var(--accent)); }
.chip:active { transform: scale(.95); }

/* Tag input */
.taginput { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 7px; background: var(--bg-0); border: 1px solid var(--stroke); border-radius: var(--r-2); min-height: 42px; align-items: center; }
.taginput:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(110,168,255,.16); }
.taginput input { flex: 1; min-width: 90px; background: transparent; border: none; padding: 4px; color: var(--text-0); }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: var(--r-1); font-size: 12px; font-weight: 600; }
.tag.must { background: rgba(110,168,255,.14); color: var(--accent); border: 1px solid rgba(110,168,255,.3); }
.tag.breaker { background: rgba(255,122,122,.12); color: var(--neg); border: 1px solid rgba(255,122,122,.28); }
.tag button { display: grid; place-items: center; opacity: .7; } .tag button:hover { opacity: 1; }

/* Segmented control */
.segmented { display: inline-flex; padding: 3px; background: var(--bg-0); border: 1px solid var(--stroke); border-radius: var(--r-2); gap: 2px; width: 100%; }
.segmented button { flex: 1; padding: 7px 8px; border-radius: var(--r-1); font-size: 12px; font-weight: 600; color: var(--text-2); transition: all var(--dur-fast); }
.segmented button.on { background: var(--bg-2); color: var(--text-0); box-shadow: var(--shadow-1); }

/* Range / slider */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-full); background: var(--bg-0); border: 1px solid var(--stroke); outline: none; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-0); box-shadow: 0 0 10px rgba(110,168,255,.6); cursor: pointer; }
.slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-0); cursor: pointer; }

/* Brief chip (collapsed composer) */
.brief-chip { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-3); border: 1px solid var(--stroke); background: var(--bg-1); }
.brief-chip img { width: 52px; height: 52px; border-radius: var(--r-2); object-fit: cover; border: 1px solid var(--stroke); flex: none; }
.brief-chip .q { font-weight: 600; color: var(--text-0); line-height: 1.3; }
.brief-chip .meta { font-size: 11px; color: var(--text-2); margin-top: 3px; }

/* ============ Plan panel + checklist ============ */
.plan-summary { font-size: 13px; color: var(--text-1); line-height: 1.5; }
.checklist { display: flex; flex-direction: column; gap: 2px; }
.check-row { display: flex; align-items: center; gap: var(--s-2); padding: 8px 6px; border-radius: var(--r-2); transition: background var(--dur-fast); }
.check-row:hover { background: var(--bg-0); }
.check-row .cbox { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--stroke); display: grid; place-items: center; flex: none; transition: all var(--dur-med) var(--ease-spring); }
.check-row .cbox .icon { width: 12px; height: 12px; opacity: 0; transform: scale(.5); transition: all var(--dur-med) var(--ease-spring); }
.check-row.met .cbox { background: var(--pos); border-color: var(--pos); } .check-row.met .cbox .icon { opacity: 1; transform: scale(1); color: #05130c; }
.check-row.partial .cbox { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 22%, transparent); } .check-row.partial .cbox .icon { opacity: 1; color: var(--warn); }
.check-row.unmet .cbox { border-color: var(--neg); } .check-row.unmet .cbox .icon { opacity: 1; color: var(--neg); }
.check-row .lbl { font-size: 13px; color: var(--text-1); flex: 1; }
.check-row.met .lbl { color: var(--text-0); }
.check-row .kind { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: var(--r-full); font-weight: 700; }
.kind.must { background: rgba(110,168,255,.15); color: var(--accent); }
.kind.nice { background: rgba(139,147,167,.15); color: var(--text-2); }
.kind.breaker { background: rgba(255,122,122,.14); color: var(--neg); }
.gaps { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--stroke-soft); }
.gaps li { font-size: 12px; color: var(--text-2); margin-left: 16px; }

/* ============ Leader hero ============ */
.hero { position: relative; padding: var(--s-6); overflow: hidden; }
.hero.exact { box-shadow: var(--glow-mint), var(--hairline); border-color: color-mix(in srgb, var(--exact) 40%, var(--stroke)); }
.hero-inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-6); align-items: center; }
.hero-ring { position: relative; }
.hero-media { position: relative; }
.hero-media img { width: 132px; height: 132px; object-fit: cover; border-radius: var(--r-3); border: 1px solid var(--stroke); }
.hero-ref { position: absolute; bottom: -10px; right: -10px; width: 48px; height: 48px; border-radius: var(--r-2); border: 2px solid var(--bg-1); object-fit: cover; box-shadow: var(--shadow-2); }
.hero-body { min-width: 0; }
.hero-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: var(--r-full); margin-bottom: var(--s-2); }
.hero h2 { font-size: 20px; line-height: 1.25; margin-bottom: 6px; }
.hero-price { font-size: 24px; font-weight: 700; color: var(--text-0); }
.hero-rationale { color: var(--text-1); font-size: 13px; margin-top: var(--s-3); line-height: 1.5; }
.hero-actions { margin-top: var(--s-4); display: flex; gap: var(--s-2); align-items: center; }
.laurel { position: absolute; top: var(--s-4); right: var(--s-4); color: var(--exact); opacity: .9; width: 30px; height: 30px; }
.recap { display: flex; gap: var(--s-6); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--stroke-soft); }
.recap div { display: flex; flex-direction: column; }
.recap .n { font-size: 18px; font-weight: 700; color: var(--text-0); }
.recap .l { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }

/* Hero shimmer skeleton */
.hero-skel { display: flex; align-items: center; gap: var(--s-6); }
.skel { background: linear-gradient(100deg, var(--bg-2) 30%, #1f2735 50%, var(--bg-2) 70%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; border-radius: var(--r-2); }

/* ============ Score ring ============ */
.ring { --pct: 0; --ring-size: 56px; --ring-w: 6px; width: var(--ring-size); height: var(--ring-size); border-radius: 50%; display: grid; place-items: center; position: relative;
  background:
    radial-gradient(closest-side, var(--bg-1) calc(100% - var(--ring-w) - 1px), transparent calc(100% - var(--ring-w))),
    conic-gradient(var(--ring-color, var(--accent)) calc(var(--pct) * 1%), var(--stroke) 0);
  transition: --pct 1s var(--ease-out);
}
.ring.big { --ring-size: 116px; --ring-w: 10px; }
.ring .val { font-weight: 800; font-size: calc(var(--ring-size) * .3); color: var(--text-0); font-variant-numeric: tabular-nums; }
.ring.big .val { font-size: 34px; }
.ring .val small { font-size: .5em; color: var(--text-2); font-weight: 600; }

/* ============ Results grid ============ */
.grid-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--s-6) 0 var(--s-3); }
.grid-head h3 { font-size: 15px; }
.grid-head .count { font-size: 12px; color: var(--text-2); }
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-3); }

.pcard { position: relative; background: var(--bg-1); border: 1px solid var(--stroke); border-radius: var(--r-3); overflow: hidden; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med); will-change: transform; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: #33405a; }
.pcard.leader { border-color: color-mix(in srgb, var(--mint) 50%, var(--stroke)); box-shadow: var(--glow-mint); }
.pcard-media { position: relative; aspect-ratio: 1/1; background: var(--bg-2); overflow: hidden; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity var(--dur-slow); }
.pcard-media img.loaded { opacity: 1; }
.pcard-media .shimmer { position: absolute; inset: 0; }
.pcard-ring { position: absolute; top: 8px; right: 8px; --ring-size: 40px; --ring-w: 4px; background:
  radial-gradient(closest-side, rgba(10,12,16,.85) calc(100% - var(--ring-w) - 1px), transparent calc(100% - var(--ring-w))),
  conic-gradient(var(--ring-color, var(--accent)) calc(var(--pct) * 1%), rgba(36,43,58,.9) 0); }
.pcard-ring .val { font-size: 12px; }
.pcard-body { padding: var(--s-3); }
.pcard-title { font-size: 13px; font-weight: 600; color: var(--text-0); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.pcard-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: var(--s-2); }
.pcard-price { font-size: 15px; font-weight: 700; color: var(--text-0); font-variant-numeric: tabular-nums; }
.pcard-rationale { font-size: 11.5px; color: var(--text-2); margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--accent); }
.pcard-link .icon { width: 12px; height: 12px; }

/* Market badge */
.mbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-full); text-transform: capitalize; border: 1px solid color-mix(in srgb, var(--tint) 40%, transparent); color: var(--tint); background: color-mix(in srgb, var(--tint) 12%, transparent); }
.mbadge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tint); }

/* Verdict pill */
.vpill { text-transform: capitalize; }
.vpill.exact { background: color-mix(in srgb, var(--exact) 18%, transparent); color: var(--exact); }
.vpill.strong { background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos); }
.vpill.partial { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.vpill.no { background: color-mix(in srgb, var(--neg) 14%, transparent); color: var(--neg); }

/* ============ Timeline ============ */
.timeline { display: flex; flex-direction: column; }
.tl-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.tl-log { display: flex; flex-direction: column; gap: 2px; }
.tl-row { display: flex; gap: var(--s-3); padding: 7px 6px; border-radius: var(--r-2); position: relative; animation: row-in var(--dur-med) var(--ease-out); }
.tl-row .ic { width: 24px; height: 24px; border-radius: var(--r-full); display: grid; place-items: center; flex: none; background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text-2); margin-top: 1px; }
.tl-row .ic .icon { width: 13px; height: 13px; }
.tl-row .body { min-width: 0; flex: 1; }
.tl-row .tx { font-size: 12.5px; color: var(--text-1); line-height: 1.4; }
.tl-row .tx b { color: var(--text-0); font-weight: 600; }
.tl-row .tm { font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; margin-left: auto; flex: none; }
.tl-rowhead { display: flex; align-items: center; gap: var(--s-2); }

.tl-divider { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 var(--s-1); }
.tl-divider .line { flex: 1; height: 1px; background: var(--stroke-soft); }
.tl-divider .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); font-weight: 700; }

.tl-row.query .ic { color: var(--accent); }
.tl-row.candidate .ic { color: var(--mint); }
.tl-row.judge .ic { color: var(--warn); }
.tl-row.leader { background: color-mix(in srgb, var(--mint) 8%, transparent); }
.tl-row.leader .ic { color: var(--exact); border-color: color-mix(in srgb, var(--exact) 40%, var(--stroke)); }
.tl-row.thought .ic { color: var(--text-1); }
.tl-row.error .ic { color: var(--neg); border-color: rgba(255,122,122,.4); }

.chip-inline { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--r-full); font-size: 10.5px; font-weight: 700; vertical-align: middle; }
.chip-inline.score { background: var(--bg-2); border: 1px solid var(--stroke); font-variant-numeric: tabular-nums; }

/* Thinking stream bubble */
.thinking { position: sticky; top: 0; z-index: 5; margin-bottom: var(--s-2); padding: var(--s-3); border-radius: var(--r-3); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--stroke)); background: color-mix(in srgb, var(--accent) 8%, var(--bg-1)); box-shadow: 0 0 24px rgba(110,168,255,.12), var(--hairline); overflow: hidden; }
.thinking::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent, rgba(110,168,255,.08), transparent); background-size: 200% 100%; animation: shimmer-sweep 3s linear infinite; pointer-events: none; }
.thinking .who { display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
.thinking .who .icon { width: 13px; height: 13px; animation: spin-slow 3s linear infinite; }
.thinking .lines { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--text-1); max-height: 118px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.thinking .lines .ln { opacity: .55; }
.thinking .lines .ln:last-child { opacity: 1; color: var(--text-0); }
.caret { display: inline-block; width: 7px; height: 1.05em; background: var(--accent); vertical-align: text-bottom; margin-left: 2px; animation: blink 1s step-end infinite; border-radius: 1px; }

/* ============ History ============ */
.history { max-width: 900px; margin: 0 auto; padding: var(--s-6) 0; }
.history h2 { margin-bottom: var(--s-4); }
.hist-list { display: flex; flex-direction: column; gap: var(--s-3); }
.hist-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3); border-radius: var(--r-3); border: 1px solid var(--stroke); background: var(--bg-1); cursor: pointer; transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); text-align: left; width: 100%; }
.hist-row:hover { transform: translateY(-2px); border-color: #33405a; box-shadow: var(--shadow-2); }
.hist-row img, .hist-row .noimg { width: 56px; height: 56px; border-radius: var(--r-2); object-fit: cover; border: 1px solid var(--stroke); flex: none; background: var(--bg-2); display: grid; place-items: center; color: var(--text-2); }
.hist-row .q { font-weight: 600; color: var(--text-0); }
.hist-row .sub { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.status-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding: 3px 9px; border-radius: var(--r-full); }
.status-badge.running { background: rgba(110,168,255,.15); color: var(--accent); }
.status-badge.found, .status-badge.finished { background: rgba(124,243,209,.15); color: var(--mint); }
.status-badge.failed, .status-badge.cancelled { background: rgba(255,122,122,.14); color: var(--neg); }

/* ============ Connection banner ============ */
.banner { display: flex; align-items: center; gap: var(--s-2); padding: 8px var(--s-4); margin: var(--s-2) var(--s-4) 0; border-radius: var(--r-2); font-size: 13px; font-weight: 500; animation: slide-down var(--dur-med) var(--ease-out); }
.banner .icon { width: 15px; height: 15px; }
.banner.reconnect { background: color-mix(in srgb, var(--warn) 14%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); }
.banner.error { background: color-mix(in srgb, var(--neg) 12%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent); color: var(--neg); }
.banner.paused { background: color-mix(in srgb, var(--accent) 12%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); }
.banner .spin { animation: spin-slow 2s linear infinite; }

/* ============ Toasts ============ */
.toasts { position: fixed; bottom: var(--s-6); right: var(--s-6); z-index: 100; display: flex; flex-direction: column; gap: var(--s-2); pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-3); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--stroke); box-shadow: var(--shadow-3), var(--hairline); pointer-events: auto; animation: toast-in var(--dur-med) var(--ease-spring); max-width: 340px; }
.toast.leaving { animation: toast-out var(--dur-med) var(--ease-out) forwards; }
.toast .ic { width: 32px; height: 32px; border-radius: var(--r-2); display: grid; place-items: center; flex: none; }
.toast.leader .ic { background: color-mix(in srgb, var(--mint) 18%, transparent); color: var(--mint); }
.toast.finish .ic { background: color-mix(in srgb, var(--exact) 18%, transparent); color: var(--exact); }
.toast.error .ic { background: color-mix(in srgb, var(--neg) 16%, transparent); color: var(--neg); }
.toast .t { font-weight: 600; color: var(--text-0); font-size: 13px; }
.toast .d { font-size: 12px; color: var(--text-2); }

/* ============ Empty / howto ============ */
.howto { display: flex; flex-direction: column; gap: var(--s-3); }
.howto-step { display: flex; gap: var(--s-3); align-items: flex-start; }
.howto-step .num { width: 26px; height: 26px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--stroke); font-weight: 700; font-size: 12px; color: var(--accent); flex: none; }
.howto-step .tx { font-size: 12.5px; color: var(--text-1); line-height: 1.45; }
.howto-step .tx b { color: var(--text-0); }
.standby { text-align: center; color: var(--text-2); padding: var(--s-6) var(--s-4); }
.standby .icon { width: 32px; height: 32px; color: var(--text-2); margin-bottom: var(--s-2); opacity: .6; }

.empty-stage { display: grid; place-items: center; height: 100%; text-align: center; padding: var(--s-8); }
.empty-stage .big { font-size: 22px; color: var(--text-0); font-weight: 700; margin-bottom: var(--s-2); }
.empty-stage p { color: var(--text-2); max-width: 420px; }
.empty-stage .icon { width: 48px; height: 48px; color: var(--accent); opacity: .7; margin-bottom: var(--s-4); }

/* Tab bar (mobile) */
.tabbar { position: sticky; bottom: 0; z-index: 50; margin: 0 var(--s-4) var(--s-4); background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--stroke); border-radius: var(--r-3); padding: 4px; gap: 4px; box-shadow: var(--shadow-3); }
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px; border-radius: var(--r-2); color: var(--text-2); font-size: 10px; font-weight: 600; }
.tabbar button.on { background: var(--bg-2); color: var(--accent); }
.tabbar button .icon { width: 18px; height: 18px; }
.tabbar .badge { position: absolute; top: 4px; right: 30%; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.mt2 { margin-top: var(--s-2); } .mt3 { margin-top: var(--s-3); } .mt4 { margin-top: var(--s-4); }