:root{
  --bg:#0d0d0d; --surface:#161311; --surface-2:#1f1b18; --line:#2e2824; --line-2:#443b35;
  --text:#f8efe5; --muted:#b3a79c; --accent:#ffb072; --accent-2:#ff9e80; --bad:#ff6b5a;
  --radius:10px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:500 15px/1.45 Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(16px,3vw,32px);border-bottom:1px solid var(--line);background:var(--surface)}
.bar__brand{display:flex;align-items:center;gap:10px}
.bar h1{margin:0;font:800 19px/1.1 Montserrat,Inter,sans-serif;letter-spacing:-.01em}
.bar__reg{margin:2px 0 0;color:var(--muted);font-size:13px}
.bar__actions{display:flex;flex-wrap:wrap;gap:6px}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{appearance:none;border:1px solid var(--line-2);background:var(--surface-2);border-radius:8px;
  padding:8px 14px;font-weight:650;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn--primary{background:linear-gradient(100deg,#ffd7a0,#ff9e80);color:#1a1210;border-color:transparent}
.btn--ghost{background:transparent}
.btn--small{padding:4px 10px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:progress}

/* ── Layout ──────────────────────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;
  padding:24px clamp(16px,3vw,32px) 40px;max-width:1500px;margin:0 auto;align-items:start}
.preview{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px}
@media (max-width:980px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .preview{position:static}
}

.preview__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.preview__size{color:var(--muted);font-size:13px}
.preview__frame{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);
  background:#0d0d0d;max-height:calc(100vh - 190px);margin-inline:auto;width:100%}
@media (max-width:980px){ .preview__frame{max-height:none} }
.preview__frame iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;pointer-events:none;
  background:#0d0d0d}
.preview__actions{display:flex;flex-wrap:wrap;gap:8px}

.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:9px;padding:3px;background:var(--surface)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:6px 14px;border-radius:6px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted)}
.seg input:checked+span{background:var(--accent);color:#1a1210}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}

.warnings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.warnings li{padding:6px 10px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 6px 6px 0;color:var(--muted)}
.warnings li b{color:var(--text)}

/* ── Form ────────────────────────────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:14px 16px 16px;min-width:0}
.panel legend{padding:0 6px;font:800 13px/1 Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.grid{display:grid;gap:10px}
.grid--event{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.field{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:650;color:var(--muted);min-width:0}
.field--wide{grid-column:1/-1}
.field--listing textarea{background:var(--bg);border:1px solid var(--line-2);border-radius:7px;padding:8px 10px;
  font:500 13px/1.45 ui-monospace,monospace;color:var(--text);width:100%;resize:vertical;min-height:88px}
.listing-status{margin:6px 0 12px;min-height:1.2em;font-size:12px;color:var(--muted)}
.listing-status b{color:var(--accent);font-weight:700}
.field input[type=date]{color-scheme:dark;min-height:38px}
.field input,.dialog textarea{background:var(--bg);border:1px solid var(--line-2);border-radius:7px;padding:7px 9px;
  font-size:15px;font-weight:550;color:var(--text);min-width:0;width:100%}
.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;align-self:end;padding-bottom:8px}
.check input{width:18px;height:18px;accent-color:var(--accent)}

.team-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.standings{display:flex;flex-direction:column;gap:10px}
.player{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:10px 12px 12px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:start}
.player__place{font:800 26px/1 Inter;color:var(--accent);min-width:2.2em;padding-top:18px;font-variant-numeric:tabular-nums}
.player__place sup{font-size:.5em}
.player__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.player__row{display:grid;grid-template-columns:minmax(0,1fr) 84px 84px auto;gap:8px;align-items:end}
@media (max-width:520px){
  .player{grid-template-columns:minmax(0,1fr)}
  .player__place{padding-top:0}
  .player__row{grid-template-columns:1fr 1fr}
  .player__row .field:first-child{grid-column:1/-1}
  .team-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.mon{position:relative;display:flex;align-items:center;min-width:0}
.mon img{position:absolute;left:3px;width:30px;height:30px;pointer-events:none;object-fit:contain}
.mon input{background:var(--bg);border:1px solid var(--line-2);border-radius:7px;padding:6px 6px 6px 36px;
  font-size:13px;font-weight:550;width:100%;min-width:0;height:36px}
.mon--bad input{border-color:var(--bad)}
.mon img[src=""]{display:none}

.dialog{border:1px solid var(--line-2);border-radius:14px;background:var(--surface);color:var(--text);
  width:min(560px,calc(100vw - 32px));padding:18px}
.dialog::backdrop{background:rgb(0 0 0/.6)}
.dialog h2{margin:0 0 4px;font:800 18px/1.2 Montserrat,Inter,sans-serif}
.dialog p{margin:0 0 10px;color:var(--muted);font-size:13px}
.dialog textarea{font:500 13px/1.45 ui-monospace,monospace;resize:vertical}
.dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

.foot{padding:10px clamp(16px,3vw,32px) 28px;color:#7d7269;font-size:12px;text-align:center}