:root {
  --bg: #0f1216; --panel: #1a1f26; --text: #eef1f4; --muted: #9aa5b1; --line: #2c343e;
  --green: #1f9d55; --orange: #e67e22; --grey: #6b7280; --blue: #2b7de9; --red: #d63a3a;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font-family: "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; }
main { padding: 12px 16px 24px; }
a { color: #8ab4ff; }

.banner { text-align: center; font-weight: 800; letter-spacing: .12em; padding: 8px 16px;
  font-size: clamp(1.1rem, 2.2vw, 2rem); color: #111; background: repeating-linear-gradient(45deg, #ffd23f, #ffd23f 18px, #ffc107 18px, #ffc107 36px); }
.banner-replay { background: repeating-linear-gradient(45deg, #b39ddb, #b39ddb 18px, #9575cd 18px, #9575cd 36px); }
.banner-sub { display: block; font-size: .5em; letter-spacing: .04em; font-weight: 600; }

.topbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 8px 16px;
  border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 1.25rem; }
.brand .sub { color: var(--muted); font-weight: 400; font-size: .9rem; }
.badge-unverified { background: var(--orange); color: #111; font-weight: 800; padding: 4px 10px; border-radius: 4px;
  letter-spacing: .06em; }
nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
nav a, .tabs a { color: var(--text); text-decoration: none; padding: 6px 12px; border-radius: 4px; }
nav a.active, .tabs a.active { background: var(--panel); outline: 1px solid var(--line); }

/* board */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.card { background: var(--panel); border-radius: 10px; padding: 14px 16px; border-top: 10px solid var(--grey);
  display: flex; flex-direction: column; gap: 8px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card h2 { margin: 0; font-size: clamp(1.4rem, 1.8vw, 2.1rem); }
.heat { color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.4rem); }
.status { font-weight: 800; font-size: clamp(1.2rem, 1.6vw, 1.9rem); padding: 4px 10px; border-radius: 6px;
  background: var(--grey); color: #fff; }
.st-ok { border-top-color: var(--green); } .st-ok .status { background: var(--green); }
.st-noyield { border-top-color: var(--orange); } .st-noyield .status { background: var(--orange); color: #111; }
.st-off, .st-offline { border-top-color: var(--grey); } .st-off .status, .st-offline .status { background: var(--grey); }
.st-offline .status { font-size: clamp(1rem, 1.25vw, 1.5rem); }
.heat-on { display: block; text-align: right; font-size: .75em; }
.raw { font-size: .6em; color: var(--muted); font-weight: 400; white-space: nowrap; }
.st-ready { border-top-color: var(--blue); } .st-ready .status { background: var(--blue); }
.st-anomaly, .st-stale { border-top-color: var(--red); } .st-anomaly .status, .st-stale .status { background: var(--red); }
.ett-row { display: flex; flex-direction: column; gap: 2px; }
.label { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.ett-clock { font-size: clamp(3.4rem, 5.6vw, 6.8rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ett-clock.long { font-size: clamp(2.2rem, 3.4vw, 4rem); }
.ett-note { color: var(--orange); font-weight: 700; font-size: clamp(1rem, 1.2vw, 1.4rem); }
.time-left { font-size: clamp(1.5rem, 2vw, 2.4rem); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.time-left .label { font-size: .45em; vertical-align: middle; margin-right: 6px; }
.ett-none { opacity: .55; }
.ett-invalid { font-size: clamp(2rem, 3vw, 3.6rem); font-weight: 700; line-height: 1.1; color: var(--muted);
  text-decoration: line-through; text-decoration-thickness: 3px; font-variant-numeric: tabular-nums; }
.ett-invalid.long { font-size: clamp(1.6rem, 2.2vw, 2.6rem); }
.ett-caption { color: var(--muted); font-size: clamp(.9rem, 1vw, 1.15rem); font-style: italic; }
.time-left.paused { color: var(--muted); white-space: normal; font-size: clamp(1.2rem, 1.6vw, 1.9rem); }
.paused-tag { white-space: nowrap; }
.progress { height: 14px; background: #0b0e11; border-radius: 7px; overflow: hidden; }
.progress .bar { height: 100%; background: linear-gradient(90deg, #3a8dde, #2fbf71); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: clamp(1rem, 1.2vw, 1.35rem); }
.kv div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; border-bottom: 1px dashed var(--line); }
.kv .label { white-space: nowrap; font-size: .8rem; letter-spacing: .02em; }
@media (min-width: 1200px) { .kv .label { font-size: .95rem; } }
.kv b { font-variant-numeric: tabular-nums; }
.asof { color: var(--muted); font-size: clamp(.9rem, 1vw, 1.15rem); }
.asof.late { color: #ff8a8a; font-weight: 700; }

/* forms, tables */
.panel { background: var(--panel); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.narrow { max-width: 460px; margin: 24px auto; }
.yield-layout { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 14px; }
.yield-layout > * { min-width: 0; }
@media (max-width: 800px) { .yield-layout { grid-template-columns: minmax(0, 1fr); } }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
label { display: block; margin: 10px 0; font-weight: 600; }
input, select, button { font: inherit; font-size: 1.1rem; width: 100%; padding: 10px; margin-top: 4px;
  border-radius: 6px; border: 1px solid var(--line); background: #0b0e11; color: var(--text); }
button { background: var(--blue); border: 0; font-weight: 700; cursor: pointer; margin-top: 12px; }
button.secondary { background: var(--grey); }
button:disabled { opacity: .5; cursor: not-allowed; }
form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
form.inline input { flex: 1 1 180px; width: auto; }
form.inline button { flex: 0 0 auto; width: auto; margin-top: 4px; }
.error { color: #ff8a8a; font-weight: 700; }
.ok-msg { color: #6ee7a0; font-weight: 700; }
.muted { color: var(--muted); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tr.current td { font-weight: 700; }
.mae b { font-size: 1.2rem; }

@media (max-width: 480px) {
  main { padding: 8px 16px 16px; }
  .grid { grid-template-columns: 1fr; }
}