:root {
  --bg: #fafaf7; --fg: #1c1c1a; --muted: #8a8a82; --line: #e4e4dc;
  --accent: #106b3c; --accent2: #b78116; --card: #ffffff; --mine: #f0f6ef;
  --def: #2b6cb0; --mid: #2f855a; --fwd: #c05621; --gk: #6b46c1;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #131413; --fg: #e8e8e2; --muted: #7d7d75; --line: #2a2b28;
          --accent: #4cc38a; --accent2: #d9a83c; --card: #1b1c1a; --mine: #1c2620; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 1080px; margin: 0 auto; padding: 1rem 1.2rem 4rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 1rem 0 .8rem; }
h1 small, h2 small, h3 small { color: var(--muted); font-weight: 400; font-size: .75em; }
h2 { font-size: 1.1rem; margin-top: 2rem; }
.muted { color: var(--muted); }

.strip { background: var(--card); border-bottom: 1px solid var(--line);
         padding: .35rem 1.2rem; font-size: .85rem; color: var(--muted);
         display: flex; gap: 1rem; }
.strip .window { color: var(--accent2); font-weight: 600; letter-spacing: .04em; }
.banner { background: #b91c1c; color: #fff; padding: .5rem 1.2rem; font-weight: 600; }

nav { display: flex; gap: 1.1rem; align-items: baseline; padding: .7rem 1.2rem;
      border-bottom: 1px solid var(--line); background: var(--card); }
nav .brand { font-weight: 700; color: var(--fg); }
nav .spacer { flex: 1; }
nav .who { color: var(--muted); font-size: .9rem; }

table { border-collapse: collapse; width: 100%; }
td, th { padding: .35rem .5rem; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
     color: var(--muted); font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.mine { background: var(--mine); }
tr.muted td { color: var(--muted); }

.standings { max-width: 480px; }
.pname small { color: var(--muted); display: block; font-size: .75rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
        padding: .8rem 1rem; }
.card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.card table td { border-bottom: 1px solid var(--line); padding: .28rem .3rem; }
.card tr:last-child td { border-bottom: none; }
tr.nominated { background: var(--mine); }
tr.nominated .pname::after { content: " ©"; color: var(--accent2); font-weight: 700; }

.pos { font-size: .68rem; font-weight: 700; padding: .1rem .35rem; border-radius: 4px;
       color: #fff; letter-spacing: .03em; }
.pos-DEF { background: var(--def); } .pos-MID { background: var(--mid); }
.pos-FWD { background: var(--fwd); } .pos-GK { background: var(--gk); }
.pos-TBD { background: var(--muted); }
.chip { font-size: .65rem; border: 1px solid var(--line); border-radius: 4px;
        padding: 0 .3rem; color: var(--muted); vertical-align: middle; }
.chip.cap { border-color: var(--accent2); color: var(--accent2); font-weight: 700; }
.pips { font-size: .7rem; letter-spacing: .1em; color: var(--accent); white-space: nowrap; }

.feed { list-style: none; padding: 0; max-width: 640px; }
.feed li { padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.feed .wk { color: var(--muted); font-size: .78rem; margin-right: .5rem; }

.filters { display: flex; gap: .5rem; margin: .8rem 0; flex-wrap: wrap; }
.filters select, .filters input, .filters button, .login input, .login button {
  font: inherit; padding: .35rem .6rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--card); color: var(--fg); }
.filters button, .login button { cursor: pointer; background: var(--accent); color: #fff;
  border-color: var(--accent); }
.playerlist .pname { font-weight: 500; }
.pager { margin-right: 1rem; font-size: .9rem; }

.login { max-width: 380px; margin: 14vh auto; text-align: center; }
.login form { display: flex; gap: .5rem; justify-content: center; }
.rulecard { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
            padding: 1rem 1.2rem; max-width: 720px; line-height: 1.6; }

.flash { max-width: 1080px; margin: .6rem auto 0; padding: 0 1.2rem; }
.flash div { background: var(--mine); border: 1px solid var(--accent); border-radius: 6px;
             padding: .45rem .8rem; font-size: .92rem; margin-bottom: .3rem; }
button.primary { background: var(--accent); color: #fff; border: none; border-radius: 6px;
                 padding: .4rem .9rem; font: inherit; cursor: pointer; }
button.linklike { background: none; border: none; color: var(--accent); cursor: pointer;
                  font: inherit; padding: 0; text-decoration: underline; }
form.inline { display: inline; }
tr.queued { background: var(--mine); outline: 1px solid var(--accent); }
tr.queued .pname::after { content: " ©?"; color: var(--accent); font-weight: 700; }
.tick input { transform: scale(1.15); }
.hint { color: var(--muted); font-size: .88rem; }
.act details { position: relative; }
.act summary { cursor: pointer; color: var(--accent); font-size: .85rem; }
.rowform { display: flex; gap: .4rem; align-items: center; padding: .4rem 0; flex-wrap: wrap; }
.rowform select, .rowform input { font: inherit; font-size: .85rem; padding: .25rem .4rem;
  border: 1px solid var(--line); border-radius: 5px; background: var(--card); color: var(--fg); }
nav .mkt { color: var(--accent2); font-weight: 600; }
.draftcols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.6rem; }
@media (max-width: 900px) { .draftcols { grid-template-columns: 1fr; } }
.scrollx { overflow-x: auto; }
.board td { min-width: 108px; font-size: .8rem; vertical-align: top; border: 1px solid var(--line); }
.board td small { display: block; color: var(--muted); font-size: .68rem; }
.board td.done { background: var(--card); }
.board td.otc { outline: 2px solid var(--accent2); }
.board td.mineseat { background: var(--mine); }
.otcline { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
           padding: .6rem .9rem; }
.otcline.meotc { border-color: var(--accent); background: var(--mine); }
h1 small a { margin-right: .8rem; }
h1 small a.onlg { font-weight: 700; text-decoration: underline; }
.ratbox { background: var(--card); border: 2px solid var(--accent2); border-radius: 8px;
          padding: .9rem 1.1rem; margin-bottom: 1.2rem; max-width: 720px; }
.ratbox.signed { border-color: var(--accent); }
.ratbox form { margin-bottom: .6rem; display: flex; gap: .8rem; align-items: center; }
.ratroster { max-width: 380px; margin-top: .5rem; }
.ratroster td { border: none; padding: .15rem .4rem; font-size: .9rem; }
.constitution h2 { margin-top: 1.4rem; font-size: 1.05rem; }
.constitution ul { padding-left: 1.2rem; }
.constitution li { margin-bottom: .35rem; }
.matchline { background: var(--card); border: 1px solid var(--accent2); border-radius: 8px;
             padding: .5rem .9rem; max-width: 560px; }
.hero { background: var(--card); border: 2px solid var(--line); border-radius: 10px;
        padding: 1rem 1.2rem; max-width: 560px; margin: .8rem 0 1.4rem; }
.hero.won { border-color: var(--accent); }
.hero.lost { border-color: #b91c1c; }
.heroline { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
.heroline .me { font-weight: 700; font-size: 1.15rem; }
.heroline .them { font-size: 1.15rem; }
.heroline .score { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.herotable { max-width: 320px; }
.herotable td { border: none; padding: .15rem .6rem; }
.herotable .lgname { text-align: center; color: var(--muted); font-size: .8rem;
                     text-transform: uppercase; letter-spacing: .04em; }
.herotable tr.edge-me td:first-child { font-weight: 700; color: var(--accent); }
.herotable tr.edge-them td:last-child { font-weight: 700; color: var(--accent2); }
.prov { color: var(--accent2); font-weight: 700; letter-spacing: .03em; }
.move .up { color: var(--accent); font-size: .8rem; }
.move .down { color: #b91c1c; font-size: .8rem; }
.race { width: 100%; max-width: 680px; background: var(--card);
        border: 1px solid var(--line); border-radius: 8px; }
.legend { max-width: 680px; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; }
.swatch { display: inline-block; width: .7em; height: .7em; border-radius: 2px;
          margin-right: .35em; }
.season { max-width: 720px; margin: .6rem 0 1.4rem; }
.seasonstatus { margin: .2rem 0 .6rem; }
.tl { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
      padding: .7rem .9rem .2rem; }
.tl-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.tl-label { width: 3.2rem; font-size: .72rem; text-transform: uppercase;
            letter-spacing: .05em; color: var(--muted); text-align: right; }
.tl-track { position: relative; flex: 1; height: 1.25rem; background: var(--bg);
            border-radius: 4px; }
.tl-band { position: absolute; top: 0; height: 100%; border-radius: 4px;
           font-size: .66rem; color: #fff; display: flex; align-items: center;
           justify-content: center; overflow: hidden; white-space: nowrap; }
.tl-band.qual { background: var(--mid); opacity: .85; }
.tl-band.window { background: var(--accent2); }
.tl-knock { position: absolute; top: -2px; transform: translateX(-50%);
            background: var(--gk); color: #fff; font-size: .62rem; font-weight: 700;
            padding: .1rem .3rem; border-radius: 4px; height: auto; line-height: 1.2; }
.tl-now { position: absolute; top: -4px; bottom: -4px; width: 2px;
          background: var(--fg); border-radius: 2px; }
.tl-axis { position: relative; flex: 1; height: .95rem; }
.tl-month { position: absolute; transform: translateX(-2px); font-size: .66rem;
            color: var(--muted); }
.modetoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px;
              overflow: hidden; margin: .2rem 0 .8rem; }
.modetoggle a { padding: .45rem 1.1rem; color: var(--muted); font-weight: 600; }
.modetoggle a.on { background: var(--accent); color: #fff; }
.modetoggle a:hover { text-decoration: none; }
.wirepanel { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
             padding: .55rem .9rem; margin-bottom: .8rem; max-width: 720px; font-size: .92rem; }
.wirepanel .window { color: var(--accent2); font-weight: 700; }

tr.benchrow td { opacity: .5; }
tr.benchrow .pname::after { content: " (sits)"; color: var(--muted); font-size: .75rem; }
.colhead th { font-size: .65rem; color: var(--muted); border-bottom: none; padding: 0 .3rem; }