:root{--bg:#0b0f14;--muted:#95a3b3;--text:#e8eef6;--accent:#4aa3ff;--danger:#ff4d5d;--ok:#35d07f;--border:rgba(255,255,255,.08);}
*{box-sizing:border-box}html,body{color-scheme: dark;
height:100%}
body{color-scheme: dark;
margin:0;color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background-image:linear-gradient(rgba(11,15,20,.78),rgba(11,15,20,.78)),url("/static/cs2_bg.jpg");background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;background-color:var(--bg);}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1200px;padding:18px;margin:0 auto}
.topbar{position:sticky;top:0;z-index:5;background:rgba(11,15,20,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand a{font-weight:800;color:var(--text)}
.nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.nav a{color:var(--muted);padding:8px 10px;border-radius:10px}
.nav a.active{color:var(--text);background:rgba(255,255,255,.06)}
.nav a:hover{background:rgba(255,255,255,.05);text-decoration:none}
.footer{border-top:1px solid var(--border);margin-top:26px;padding:18px 0;color:var(--muted)}
.muted{color:var(--muted)}.small{font-size:12px}.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.page-head{margin:8px 0 14px}.page-head h1{margin:0 0 6px;font-size:28px}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between}.row.gap{gap:12px;justify-content:flex-start}
.flash-wrap{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px}
.flash{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04)}
.flash.success{border-color:rgba(53,208,127,.25)}.flash.error{border-color:rgba(255,77,93,.25)}
.card{background:rgba(18,25,36,.85);border:1px solid var(--border);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.28);overflow:hidden}
.card.narrow{max-width:520px}.card-head{padding:14px 16px;border-bottom:1px solid var(--border)}.card-head h2{margin:0;font-size:18px}
.card-pad{padding:16px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.table th{text-align:left;color:var(--muted);font-weight:600;font-size:13px}
.team{font-weight:650}.vs{color:var(--muted);margin:0 6px}.links{white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid rgba(74,163,255,.35);background:rgba(74,163,255,.12);color:var(--text);font-weight:650;cursor:pointer;text-decoration:none}
.btn:hover{background:rgba(74,163,255,.18);text-decoration:none}.btn.small{padding:8px 10px;border-radius:10px;font-size:13px}
.btn.ghost{border-color:var(--border);background:rgba(255,255,255,.04);color:var(--muted)}
.btn.ghost:hover{background:rgba(255,255,255,.06);color:var(--text)}
.btn.danger{border-color:rgba(255,77,93,.35);background:rgba(255,77,93,.10)}.btn.danger:hover{background:rgba(255,77,93,.16)}
.chip{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font-size:12px;margin-right:6px}
.grid-2{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}.row{flex-direction:column;align-items:flex-start}}
.roster{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.roster li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(0,0,0,.18)}
.roster li.inactive{opacity:.55}
.badge{margin-left:8px;padding:2px 8px;border-radius:999px;border:1px solid rgba(53,208,127,.35);background:rgba(53,208,127,.10);font-size:11px}
.ok{color:var(--ok);font-weight:650}
.checkbox{display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}.checkbox input{width:auto}
.prose h1{font-size:28px;margin-top:0}.prose h2{font-size:20px;margin-top:18px}.prose p{line-height:1.7}
.bracket-wrap{overflow:auto;padding:16px}
.bracket-grid{display:grid;grid-template-columns:repeat(var(--cols),320px);grid-template-rows:repeat(var(--rows),22px);gap:10px 18px;align-items:start}
.br-slot{border:1px solid var(--border);background:rgba(0,0,0,.18);border-radius:14px;padding:12px;text-align:left;min-height:86px}
.bracket-grid.admin .br-slot{cursor:pointer}
.br-label{font-size:12px;color:var(--muted);font-weight:800;margin-bottom:10px}
.br-body{color-scheme: dark;
display:flex;flex-direction:column;gap:8px}.br-team{display:flex;justify-content:space-between;align-items:center;gap:10px}
.br-team .name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-team .sc{min-width:26px;text-align:right;font-weight:900;color:var(--muted)}
.br-links{margin-top:10px}.br-btn{appearance:none;border:none;background:transparent;padding:0}
.modal{position:fixed;inset:0;display:none;z-index:50}.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-dialog{position:relative;max-width:980px;margin:6vh auto;background:rgba(18,25,36,.95);border:1px solid var(--border);border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.5);overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.modal-title{font-weight:900;font-size:18px}.modal-body{color-scheme: dark;
padding:16px}


/* v3.2 fixes: force dark form controls */
.field input,
.field select,
.field textarea,
input, select, textarea{
  background-color: rgba(0,0,0,.25) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* v3.2 fixes: bracket grid layout (no overlap) */
.bracket-grid{
  grid-template-rows: none !important;
  grid-auto-rows: 120px !important;
  row-gap: 18px !important;
}
.br-slot{ min-height: 110px !important; }

/* v3.3: form controls polish (closer to v2 look) */
input, select, textarea{
  font-size: 14px !important;
  padding: 12px 14px !important;
  line-height: 1.2 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 rgba(0,0,0,0);
}
input::placeholder, textarea::placeholder{ color: rgba(149,163,179,.7) !important; }
input:focus, select:focus, textarea:focus{
  border-color: rgba(74,163,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(74,163,255,.16);
}
.field{gap:8px}
label{letter-spacing:.2px}

/* v3.3: compact playoff bracket */
.bracket-wrap{ position: relative; }
.bracket-grid{
  --cell-w: 200px;   /* was ~320 */
  --cell-h: 72px;    /* was ~120 */
  grid-template-columns: repeat(var(--cols), var(--cell-w)) !important;
  grid-auto-rows: var(--cell-h) !important;
  column-gap: 14px !important;
  row-gap: 14px !important;
  padding-bottom: 14px;
}
.br-slot{
  padding: 10px !important;
  min-height: calc(var(--cell-h) - 8px) !important;
  border-radius: 12px !important;
}
.br-label{ margin-bottom: 8px !important; }
.br-links{ margin-top: 8px !important; }

/* v3.3: bracket connector lines */
.br-lines{
  position:absolute;
  inset: 0;
  pointer-events:none;
}
.br-lines path{
  fill:none;
  stroke: rgba(255,255,255,.16);
  stroke-width: 2;
}
.br-lines path.strong{
  stroke: rgba(255,255,255,.22);
}

/* v3.4: canvas wrapper so SVG lines scroll with grid */
.bracket-canvas{
  position: relative;
  width: max-content;
  height: max-content;
}
.br-lines{
  position:absolute;
  left:0; top:0;
  width: 100%;
  height: 100%;
}

/* v3.5 UI polish */
.textarea-big{width:100% !important; min-height: 520px; border-radius: 16px !important;}
.card .field{min-width: 0;}
.grid-2 .field{min-width: 0;}
/* make labels not overlap by giving input full width and allowing wrap */
label{white-space: normal;}
/* slightly brighter card borders */
.card{border-color: rgba(255,255,255,.10) !important;}

/* v3.8 footer */
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-right{display:flex; gap:10px; align-items:center}
.social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.social:hover{background: rgba(255,255,255,.07); color: var(--text); text-decoration:none}

/* v3.9 filters */
.filters{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin: 10px 0 14px}
.filters .field{min-width:220px}
.filters .actions{min-width:auto}

/* v3.9.4 footer compact fixed */
body{padding-bottom:72px;}
.footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin-top: 0 !important;
  padding: 10px 0 !important;
  background: rgba(11,15,20,.78);
  backdrop-filter: blur(10px);
}
.footer .container{padding-top:0; padding-bottom:0;}
.footer-left .muted{font-size:12px;}
.footer-left .small{font-size:11px;}
.footer-inner{gap:10px;}
.social{width:32px;height:32px;border-radius:10px;}

/* v3.9.4 bracket viewport */
.bracket-wrap{min-height:520px;}

/* v3.10.1: keep horizontal scrollbar above fixed footer */
.bracket-wrap{
  padding-bottom: 90px;
}
/* slightly smaller footer */
body{padding-bottom:64px;}
.footer{padding:8px 0 !important;}


/* v3.10.2: footer should NOT block playoff scrollbars */
.is-playoff .footer,
.is-admin-playoff .footer{
  position: sticky !important;
  bottom: 0;
}

/* keep playoff bracket viewport comfortable */
.is-playoff .bracket-wrap,
.is-admin-playoff .bracket-wrap{
  max-height: calc(100vh - 240px);
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

/* brand logo */
.brand{display:flex; align-items:center; gap:10px}
.brand-logo {
    height: 40px;
    width: auto;
    opacity: .95;
    border-radius: 6px;
}

/* v3.10.14: prevent footer overlapping rules page */

/* v3.10.15: extra bottom space on rules pages so footer doesn't overlap */

/* v3.10.16: prevent fixed footer overlapping rules text */

/* v3.10.17: rules pages should not have huge empty space; disable fixed footer instead */
.is-rules body{padding-bottom:0 !important;}

/* v3.10.18: only rules content gets bottom padding (do NOT touch header/footer containers) */
.is-rules .rules-page{padding-bottom:24px !important;}

/* v3.10.19: keep page content above fixed footer */
.page{padding-bottom:50px;}