:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark;--bg:#11151b;--surface:#1b222c;--surface2:#252e3a;--text:#edf2f7;--muted:#9aa8b8;--line:#354150;--accent:#6fb58a;--danger:#e14d55}html[data-theme="light"]{color-scheme:light;--bg:#f3f5f7;--surface:#fff;--surface2:#e9eef2;--text:#17212b;--muted:#637182;--line:#d4dce4;--accent:#24784a;--danger:#c62832}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:15px}.topbar{height:62px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1100px)/2));background:var(--surface)}a{color:var(--accent);text-decoration:none}.brand{font-weight:800;color:var(--text);font-size:17px}.top-actions{display:flex;align-items:center;gap:18px}.nickname{color:var(--muted)}button{font:inherit;cursor:pointer}.theme-btn{border:1px solid var(--line);border-radius:7px;padding:7px 10px;background:var(--surface2);color:var(--text)}.container{max-width:1100px;margin:32px auto;padding:0 20px;min-height:calc(100vh - 125px)}h1{font-size:30px;margin:4px 0 8px}h2{font-size:19px;margin:4px 0 12px}h3{margin:5px 0}.muted{color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:750}.auth-card{max-width:430px;margin:7vh auto;background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:30px}.auth-card h1{text-align:center;font-size:25px;margin-bottom:8px}.auth-card>.muted{text-align:center;margin-bottom:25px}form{display:grid;gap:15px}label{display:grid;gap:6px;color:var(--muted);font-size:13px}input{width:100%;padding:11px 12px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}.primary{border:0;border-radius:7px;background:var(--accent);color:#07140c;font-weight:800;padding:12px;margin-top:4px}.auth-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px;font-size:13px}.alert,.success{padding:10px 12px;border-radius:7px;margin:12px 0;background:#5a252b;color:#ffdadd}.success{background:#1d4932;color:#d5ffe3}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.welcome{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.pill{border:1px solid var(--line);border-radius:30px;padding:8px 13px;color:var(--muted);font-size:12px}.unpaid{background:#9f1722;color:white;padding:13px 16px;border-radius:8px;font-weight:900;letter-spacing:.08em;margin-bottom:18px;font-size:18px}.unpaid span{font-size:12px;font-weight:500;letter-spacing:0;margin-left:12px}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.tile,.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px}.tile{color:var(--text);min-height:165px}.tile p{color:var(--muted);font-size:13px;line-height:1.5}.tile strong{font-size:13px;color:var(--accent)}.featured{border-color:var(--accent)}.section-head{display:flex;justify-content:space-between;align-items:center}.announcement{padding:13px 0;border-top:1px solid var(--line)}.announcement p{white-space:pre-wrap;color:var(--muted);line-height:1.5}.quick-links{display:flex;gap:18px;flex-wrap:wrap;padding:20px 2px;font-size:13px}.page-heading{margin-bottom:22px}.text-link{display:inline-block;margin-top:15px}footer{text-align:center;color:var(--muted);font-size:11px;padding:22px;border-top:1px solid var(--line)}@media(max-width:700px){.container{margin:20px auto;padding:0 13px}.tiles{grid-template-columns:1fr}.welcome{display:block}.pill{display:inline-block;margin-top:12px}.topbar{padding:0 14px}.nickname{display:none}.two-col{grid-template-columns:1fr}.unpaid span{display:block;margin:5px 0 0}}

/* Weekly Pick Sheet */
.pick-section{margin-top:20px}
.game-row{display:grid;grid-template-columns:115px minmax(180px,1fr) minmax(160px,1fr) minmax(160px,1fr);gap:12px;align-items:center;padding:12px 8px;border-bottom:1px solid var(--line);font-size:13px}
.game-row:last-child{border-bottom:0}
.game-time{color:var(--muted);font-size:12px}
.game-teams{font-weight:700}
.game-network{font-size:11px;color:var(--muted);margin-top:3px}
.game-market{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.game-market label{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text);cursor:pointer}
.game-market input[type=radio]{width:auto;margin:0;accent-color:var(--accent)}
.market-title{font-size:11px;color:var(--muted);font-weight:700;width:100%}
.pick-counter{font-weight:700;color:var(--accent)}
@media(max-width:800px){
.game-row{grid-template-columns:1fr 1fr;gap:10px}
.game-time{grid-column:1}
.game-teams{grid-column:2}
}
@media(max-width:480px){
.game-row{grid-template-columns:1fr}
.game-time,.game-teams{grid-column:auto}
}

/* Competition enrollment dashboard */
.enrollment-panel {
    margin-bottom: 20px;
}

.competition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.competition-card {
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.competition-card h3 {
    font-size: 20px;
    margin: 3px 0 5px;
}

.competition-card p {
    margin: 0;
    font-size: 13px;
}

.status-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.status {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    border: 1px solid var(--line);
}

.status.enrolled,
.status.paid {
    color: #77d69a;
    background: #173b2a;
    border-color: #286342;
}

.status.unpaid-status {
    color: var(--muted);
    background: var(--surface);
}

.status.open {
    color: #82c9f2;
    background: #18364a;
    border-color: #315d79;
}

.status.closed {
    color: var(--muted);
    background: var(--surface);
}

.join-button {
    margin-top: 2px;
}

@media(max-width:700px) {
    .competition-grid {
        grid-template-columns: 1fr;
    }
}

/* Payment pending warning */
.status.unpaid-status {
    color: #ff8585;
    background: #4a2025;
    border-color: #a83d46;
}


/* Commissioner player directory */
.roster-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.roster-table th,
.roster-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.roster-table th {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}
.roster-table td div {
    margin-bottom: 5px;
}


/* Account management */
.account-link:hover {
    color: var(--accent);
    text-decoration: underline;
}
.account-panel {
    margin-bottom: 18px;
    max-width: 650px;
}
.account-panel form {
    max-width: 450px;
}

/* Consistent top navigation links */
.top-actions > a {
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.top-actions > a:hover {
    text-decoration: underline;
}

/* Commissioner payment controls */
.payment-toggle {
    display: inline-block;
    margin: 4px 0 6px 8px;
}
.payment-toggle button {
    background: var(--surface2);
    color: var(--accent);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 12px;
}
.payment-toggle button:hover {
    border-color: var(--accent);
}

/* Commissioner player administration */
.admin-inline {
    display: inline-block;
    margin: 4px 0 4px 8px;
}

.admin-inline button {
    background: var(--surface2);
    color: var(--accent);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 5px 9px;
    font-size: 12px;
}

.admin-inline button:hover {
    border-color: var(--accent);
}

.admin-inline .danger-action {
    color: #ff8585;
    border-color: #a83d46;
}

.admin-inline .danger-action:hover {
    background: #4a2025;
}

/* Three-section site navigation */
.pickem-header {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  gap: 20px;
}

.pickem-header .brand {
  justify-self: start;
}

.pickem-header .primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  white-space: nowrap;
}

.pickem-header .primary-nav a {
  color: var(--accent, #65b88c);
  text-decoration: none;
  font-weight: 600;
}

.pickem-header .primary-nav a:hover {
  text-decoration: underline;
}

.pickem-header .top-actions {
  justify-self: end;
}

@media (max-width: 1200px) {
  .pickem-header {
    grid-template-columns: 1fr auto;
  }

  .pickem-header .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 650px) {
  .pickem-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pickem-header .brand,
  .pickem-header .top-actions,
  .pickem-header .primary-nav {
    grid-column: 1;
    justify-self: center;
  }

  .pickem-header .top-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .pickem-header .primary-nav {
    gap: 18px;
  }
}

/* Hamburger quick navigation */
.hamburger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.quick-nav {
  position: relative;
  flex-shrink: 0;
}

.quick-nav summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 42px;
  border: 1px solid var(--line, #344354);
  border-radius: 9px;
  cursor: pointer;
  list-style: none;
  color: var(--accent, #65b88c);
}

.quick-nav summary::-webkit-details-marker {
  display: none;
}

.hamburger-icon {
  font-size: 27px;
  line-height: 1;
}

.quick-nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1000;
  min-width: 205px;
  padding: 8px;
  background: #1b2531;
  border: 1px solid #344354;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}

.quick-nav-menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 6px;
  color: #e8edf4;
  text-decoration: none;
  font-weight: 600;
}

.quick-nav-menu a:hover {
  background: #2b3b49;
  color: #65b88c;
}

@media (max-width: 650px) {
  .hamburger-header {
    flex-wrap: wrap;
  }

  .hamburger-header .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}