:root{
  --bg:#12171b;
  --bg-2:#1b2329;
  --panel:#202930;
  --panel-2:#2a353d;
  --text:#eef3f6;
  --muted:#b5c1c9;
  --line:#3a4750;
  --accent:#8ea3b0;
  --accent-2:#cfdbe2;
  --nav:#0d1216;
  --nav-2:#171e23;
  --nav-text:#f4f7f9;
  --shadow:0 12px 28px rgba(0,0,0,.28);
  --radius:18px;

  --division-shell:#243038;
  --division-shell-2:#2e3a43;
  --division-edge:#4f636f;
  --division-title:#f2f7fa;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  color:var(--text);
}

a{color:inherit}
.shell{min-height:100vh}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  background:linear-gradient(180deg,var(--nav) 0%,var(--nav-2) 100%);
  color:var(--nav-text);
  box-shadow:0 8px 22px rgba(0,0,0,.26);
}
.eyebrow{
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#d4dbe1;
}
.title{
  font-size:1.5rem;
  font-weight:800;
}
.topnav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.topnav a{
  text-decoration:none;
  font-weight:700;
  color:var(--nav-text);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  padding:10px 14px;
  border-radius:999px;
}
.topnav a:hover{
  background:rgba(255,255,255,.14);
}
.nav-dropdown{
  position:relative;
}
.nav-dropdown__toggle{
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:var(--nav-text);
  font-weight:700;
  cursor:pointer;
}
.nav-dropdown__menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:220px;
  padding:8px;
  border-radius:14px;
  background:#182026;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 28px rgba(0,0,0,.28);
  z-index:50;
}
.nav-dropdown__menu a{
  display:block;
  border-radius:10px;
  padding:10px 12px;
  background:transparent;
  border:none;
}
.nav-dropdown__menu a:hover{
  background:rgba(255,255,255,.08);
}
.nav-dropdown:hover .nav-dropdown__menu{
  display:block;
}
.nav-dropdown.is-open .nav-dropdown__menu{
  display:block;
}

.main{
  width:min(1180px,calc(100% - 24px));
  margin:24px auto;
}
.card{
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}
.card-narrow{
  max-width:520px;
  margin:40px auto;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.stack > div + div{margin-top:14px}
label{
  display:block;
  font-weight:700;
  margin-bottom:6px;
  color:var(--text);
}
input,select,textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#10161a;
  color:var(--text);
}
button{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,var(--accent-2) 0%,var(--accent) 100%);
  color:#101215;
  font-weight:800;
  padding:12px 16px;
  border-radius:999px;
  cursor:pointer;
}
button:hover{filter:brightness(.98)}
.flash{
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:16px;
  border:1px solid transparent;
  font-weight:700;
}
.flash-success{
  background:#1f4f33;
  border-color:#3f7a5b;
  color:#e8fff0;
}
.flash-error{
  background:#5b2222;
  border-color:#8b4040;
  color:#ffeaea;
}
.muted{color:var(--muted)}
.plain-list{
  list-style:none;
  margin:0;
  padding:0;
}
.plain-list li + li{
  margin-top:8px;
}
h1,h2{
  margin-top:0;
  color:var(--division-title);
}
.row-between{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}
.button-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.button-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,var(--accent-2) 0%,var(--accent) 100%);
  color:#101215;
  font-weight:800;
}
.button-link.small-btn{
  min-height:38px;
  padding:0 12px;
}
.table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,
.admin-table td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:top;
}
.admin-table.compact{min-width:0}
.inline-form{display:inline}
.publish-pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-weight:700;
}
.publish-pill.is-live{
  background:#1f4f33;
  color:#e8fff0;
  border:1px solid #3f7a5b;
}
.publish-pill.is-draft{
  background:#6a5415;
  color:#fff6db;
  border:1px solid #9c8341;
}
.hero-card{margin-top:4px}
.session-filter{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
.session-filter select{min-width:280px}
.session-summary{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  font-weight:700;
}
.session-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}
.game-card-list{
  display:grid;
  gap:16px;
}
.game-card{
  border:1px solid var(--division-edge);
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}
.game-card.shade-a{
  background:linear-gradient(180deg,var(--division-shell) 0%,var(--division-shell-2) 100%);
}
.game-card.shade-b{
  background:linear-gradient(180deg,var(--division-shell-2) 0%,var(--division-shell) 100%);
}
.game-card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.game-card__body{
  display:grid;
  gap:14px;
}
.game-meta{
  font-weight:800;
  color:var(--division-title);
}
.game-meta-subtle{
  color:var(--muted);
  font-size:.95rem;
  margin-top:4px;
}
.status-block select{max-width:260px}
.team-score-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:end;
}
.team-score-box{
  display:grid;
  gap:8px;
}
.versus-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  min-height:44px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:var(--text);
  font-weight:800;
}
.division-card{border-color:var(--division-edge)}
.division-theme.division-red{
  --division-shell:#412223;
  --division-shell-2:#542b2d;
  --division-edge:#8f5054;
}
.division-theme.division-white{
  --division-shell:#f3f6f8;
  --division-shell-2:#e7edf1;
  --division-edge:#c3ced6;
  --division-title:#11161a;
}
.division-theme.division-gold{
  --division-shell:#4a3a1c;
  --division-shell-2:#5b4924;
  --division-edge:#b08b36;
}
.division-theme.division-gray{
  --division-shell:#d8dfe4;
  --division-shell-2:#c9d2d9;
  --division-edge:#99a7b1;
  --division-title:#11161a;
}
.division-theme.division-blue{
  --division-shell:#1f3552;
  --division-shell-2:#274163;
  --division-edge:#4f7db8;
}
.division-theme.division-white,
.division-theme.division-gray{
  color:#11161a;
}
.division-theme.division-white .muted,
.division-theme.division-gray .muted,
.division-theme.division-white .game-meta-subtle,
.division-theme.division-gray .game-meta-subtle,
.division-theme.division-white .tiny-note,
.division-theme.division-gray .tiny-note{
  color:#3f4d57;
}
.division-theme.division-white label,
.division-theme.division-gray label,
.division-theme.division-white .game-meta,
.division-theme.division-gray .game-meta,
.division-theme.division-white .versus-pill,
.division-theme.division-gray .versus-pill,
.division-theme.division-white .session-summary,
.division-theme.division-gray .session-summary{
  color:#11161a;
}
.division-theme.division-white input,
.division-theme.division-gray input,
.division-theme.division-white select,
.division-theme.division-gray select,
.division-theme.division-white textarea,
.division-theme.division-gray textarea{
  background:#ffffff;
  color:#11161a;
  border-color:#aebbc4;
}
.division-theme.division-white .versus-pill,
.division-theme.division-gray .versus-pill,
.division-theme.division-white .session-summary,
.division-theme.division-gray .session-summary{
  background:rgba(0,0,0,.05);
  border-color:rgba(0,0,0,.12);
}
.division-theme.division-white .publish-pill.is-live,
.division-theme.division-gray .publish-pill.is-live{
  color:#10361d;
  background:#dff3e4;
  border-color:#88b997;
}
.division-theme.division-white .publish-pill.is-draft,
.division-theme.division-gray .publish-pill.is-draft{
  color:#654900;
  background:#f6e9c6;
  border-color:#d6bd77;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.top-gap{padding-top:28px}
.checkbox-row{
  display:flex;
  align-items:center;
}
.checkbox-inline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
.checkbox-inline input{
  width:auto;
  margin:0;
}
.subpanel{
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.04);
}
.division-assignment-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.assignment-card{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.04);
}
.secondary-check{margin-top:12px}
.tiny-note{
  margin-top:6px;
  color:var(--muted);
  font-size:.92rem;
}
@media (max-width: 720px){
  .topbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .main{
    width:min(100% - 16px,1180px);
    margin:16px auto;
  }
  .team-score-grid{
    grid-template-columns:1fr;
  }
  .versus-pill{
    justify-self:start;
  }
  .session-actions{
    justify-content:stretch;
  }
  .session-actions button{
    width:100%;
  }
  .nav-dropdown__menu{
    position:static;
    margin-top:8px;
    width:100%;
  }
  .nav-dropdown:hover .nav-dropdown__menu{
    display:none;
  }
  .nav-dropdown.is-open .nav-dropdown__menu{
    display:block;
  }
}