/* Dashboard in the Modernist system, dark ground (Rossoneri). Flat, 0 radius, 2px rules, flush-left labels. */
:root { --g0: #0d0c0c; --g1: #161413; --g2: #201e1d; --line: #444141; --sub: #bab6b6; --acc: var(--color-accent, #ec3013); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--g1); color: #f3f2f2; font-family: "Archivo", system-ui, sans-serif; font-size: 15px; }
.stripe { height: 10px; background: repeating-linear-gradient(90deg, var(--acc) 0 30px, var(--g0) 30px 60px); }
.top { position: sticky; top: 0; z-index: 10; background: var(--g0); border-bottom: 2px solid #f3f2f2; }
.bar { display: flex; align-items: center; gap: 24px; padding: 12px 24px; flex-wrap: wrap; }
.brand { display: flex; flex-direction: column; line-height: 1; }
.brand b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.brand span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-400, #ff9783); margin-top: 4px; }
nav { display: flex; gap: 0; flex-wrap: wrap; }
nav button { background: none; border: 0; border-bottom: 4px solid transparent; color: var(--sub); font: 800 14px Archivo, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; cursor: pointer; text-align: left; }
nav button:hover { color: #fff; } nav button.on { color: #fff; border-bottom-color: var(--acc); }
.who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--sub); }
.pill { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; background: var(--g2); border: 2px solid var(--line); }
.pill.live { background: var(--acc); border-color: var(--acc); color: #fff; }

main { padding: 24px; max-width: 1500px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 24px; align-items: start; }
.span2 { grid-column: span 2; }
@media (max-width: 960px) { .span2 { grid-column: auto; } .grid { grid-template-columns: 1fr; } main { padding: 16px; } }
.card { background: var(--g2); border-top: 6px solid var(--acc); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
h2 { margin: 0; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--line); padding-bottom: 12px; }
h2 small { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--sub); text-transform: none; }
h3 { margin: 8px 0 0; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-400, #ff9783); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-400, #ff9783); min-width: 110px; flex: 1; }
label small { text-transform: none; letter-spacing: 0; color: var(--sub); }
label.w2 { flex: 2; } label.grow { flex: 1 1 260px; }
label.chk { flex-direction: row; align-items: center; flex: none; color: #f3f2f2; font-size: 13px; letter-spacing: .02em; text-transform: none; min-width: 0; padding-bottom: 10px; }
input, select, textarea { background: var(--g0); border: 2px solid var(--line); color: #f3f2f2; border-radius: 0; padding: 9px 10px; font: 600 15px Archivo, sans-serif; width: 100%; min-width: 0; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--acc); }
input.u { text-transform: uppercase; }
textarea { resize: vertical; font-weight: 400; line-height: 1.4; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.btn, .btn-sm, .seg button, .sc button, .btns button { cursor: pointer; border-radius: 0; font: 800 14px Archivo, sans-serif; text-align: left; padding: 10px 16px; border: 2px solid var(--acc); background: var(--acc); color: #fff; text-decoration: none; display: inline-block; }
.btn:hover, .btns button:hover { background: var(--color-accent-500, #ff563c); }
.btn:active { background: var(--color-accent-600, #dd2b0f); }
.btn-secondary, .btn-sm { background: transparent; border-color: #f3f2f2; }
.btn-secondary:hover, .btn-sm:hover { background: var(--g1); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--sub); }
.btn-ghost:hover { border-color: #f3f2f2; color: #fff; background: transparent; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.big { font-size: 20px; padding: 14px 22px; letter-spacing: .04em; }
.seg { display: flex; flex-wrap: wrap; }
.seg button { background: var(--g0); border-color: var(--line); color: var(--sub); margin-right: -2px; padding: 9px 12px; font-size: 13px; }
.seg button.on { background: var(--acc); border-color: var(--acc); color: #fff; position: relative; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btns button { text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }
.hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--sub); }
.hint code, code { color: var(--color-accent-400, #ff9783); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.scoreline { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; background: var(--g0); padding: 14px; }
.sc { display: flex; align-items: center; gap: 0; }
.sc span { font-weight: 800; font-size: 13px; letter-spacing: .1em; margin-right: 10px; min-width: 44px; }
.sc b { font-size: 40px; font-weight: 800; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; background: var(--acc); padding: 2px 10px; }
.sc button { background: var(--g2); border-color: var(--line); font-size: 22px; padding: 6px 14px; }
.sc button:hover { border-color: #fff; }
.clock { font-size: 72px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--acc); line-height: 1; }
.tele { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); }
.tele div { background: var(--g0); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.tele span { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--sub); }
.tele b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tally > div { display: grid; grid-template-columns: 70px 1fr 50px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 2px solid var(--line); font-weight: 800; }
.tally i { display: block; height: 14px; background: var(--acc); }
#slipLive { display: flex; flex-direction: column; gap: 12px; }
.slip { background: var(--g0); padding: 12px; }
.slip b { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-400, #ff9783); }
.legs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.leg { cursor: pointer; background: var(--g2); border: 2px solid var(--line); color: #f3f2f2; padding: 8px 10px; font: 800 13px Archivo, sans-serif; text-align: left; }
.leg.won { background: #f3f2f2; color: var(--g0); } .leg.lost { opacity: .5; text-decoration: line-through; }
.link { display: grid; grid-template-columns: 200px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 2px solid var(--line); }
.link b { font-size: 14px; } .link small { display: block; color: var(--sub); font-size: 12px; font-weight: 600; }
.link input { font: 12px ui-monospace, Menlo, monospace; color: var(--color-accent-400, #ff9783); }
.link a { color: #fff; font-weight: 800; font-size: 13px; }
@media (max-width: 760px) { .link { grid-template-columns: 1fr auto auto; } .link > div:first-child { grid-column: 1 / -1; } }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.steps li.done { color: var(--sub); } .steps li.done::marker { color: var(--acc); }
#toast { position: fixed; right: 20px; bottom: 20px; background: var(--g0); border-left: 6px solid var(--acc); padding: 12px 16px; font-weight: 800; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.on { opacity: 1; }
.hidden { display: none !important; }

.sounds { display: flex; flex-direction: column; }
.snd { display: grid; grid-template-columns: 90px 120px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 2px solid var(--line); }
.snd b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.snd select, .snd input { padding: 6px 8px; font-size: 13px; }
.snd input.hidden { display: block !important; visibility: hidden; }
input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--acc); height: 32px; }