:root{--bg:#0f172a;--panel:#111827;--panel-soft:#1f2937;--text:#e5e7eb;--muted:#94a3b8;--accent:#38bdf8;--green:#22c55e;--red:#ef4444;--border:#243244;--font-sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box} body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:260px;background:linear-gradient(180deg,rgba(10,15,25,1) 0%,rgba(8,12,20,1) 100%);border-right:1px solid var(--border);padding:1rem;flex-shrink:0}
.brand{font-size:1.25rem;font-weight:700;margin-bottom:1rem}
/* Sidebar nav: one shared style for desktop sidebar + mobile drawer (layout differs by media query only) */
.app-shell--with-sidebar .sidebar .nav{display:flex;flex-direction:column;gap:0}
.app-shell--with-sidebar .sidebar .nav-group{display:flex;flex-direction:column;gap:.35rem;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.app-shell--with-sidebar .sidebar .nav-group:first-child{margin-top:0;padding-top:0;border-top:none}
.app-shell--with-sidebar .sidebar .nav-title,
.app-shell--with-sidebar .sidebar h4{text-transform:uppercase;font-size:11px;letter-spacing:1px;opacity:.6;color:var(--muted);margin:0 0 .35rem}
.app-shell--with-sidebar .sidebar .nav a.nav-link{display:block;padding:9px 12px;border-radius:8px;color:var(--text);transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.app-shell--with-sidebar .sidebar .nav a.nav-link:hover{background:rgba(255,255,255,.05);color:var(--text)}
.app-shell--with-sidebar .sidebar .nav a.nav-link--active,
.app-shell--with-sidebar .sidebar .nav a.nav-link[aria-current="page"]{background:rgba(56,189,248,.18);color:var(--text);box-shadow:inset 3px 0 0 var(--accent);font-weight:500}
.main-shell{flex:1;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(15,23,42,.96);z-index:100}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.topbar h1{margin:0 6px 0 0;font-size:1.3rem}
.muted{color:var(--muted)} .container{padding:1.25rem;display:flex;flex-direction:column;gap:1rem}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
.card.soft{background:var(--panel-soft)} .slim{max-width:560px} .hero{max-width:760px}
.grid{display:grid;gap:1rem} .grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}
.stats-grid.top-rated{gap:10px}
.stat{background:var(--panel-soft);padding:.8rem;border-radius:.8rem;border:1px solid var(--border);display:flex;flex-direction:column;gap:.3rem}
.stat strong{font-size:1.2rem}
.form-grid{display:grid;gap:.9rem} .form-grid.two-col{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .full{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:.35rem;color:var(--muted)} input,select{background:#0b1220;color:var(--text);border:1px solid var(--border);border-radius:.65rem;padding:.7rem}
.checkbox{flex-direction:row;align-items:center}
.button{display:inline-block;background:var(--accent);color:#082f49;padding:.7rem 1rem;border:none;border-radius:.7rem;font-weight:700;cursor:pointer}
.button.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.flash{padding:.8rem 1rem;border-radius:.8rem;margin-bottom:.5rem}
.flash.success{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35)}
.flash.error{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35)}
table{width:100%;border-collapse:collapse} th,td{padding:.7rem;border-bottom:1px solid var(--border);text-align:left} th{color:var(--muted)}
.frame-status{font-weight:600}
.frame-status--complete{color:#22c55e}
.frame-status--partial{color:#eab308}
.frame-status--missing{color:#ef4444}
.frame-status--nomatch{color:var(--muted)}
.table-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrapper table{min-width:600px}
.table-wrapper table.bsa-scorecard{min-width:980px}
.table-hint{font-size:12px;opacity:.6;margin-bottom:6px}
.progress,.battle-bar{width:100%;height:18px;background:#0b1220;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#60a5fa)} .battle-bar{display:flex}
.battle-win{background:var(--green);height:100%} .battle-loss{background:var(--red);height:100%}
.battle-meta{display:flex;justify-content:space-between;margin-top:.45rem;color:var(--muted)}
.pill{padding:.4rem .7rem;background:var(--panel-soft);border:1px solid var(--border);border-radius:999px;margin-right:.5rem}
.nav-toggle{display:none}
.topbar-main{flex:1;min-width:0}
.title-row {display: flex;align-items: center;gap: 0.75rem;}

/* Responsive nav: desktop sidebar always visible; tablet/narrow = drawer + overlay */
@media (min-width: 1101px) {
  .app-shell--with-sidebar .nav-toggle { display: none !important; }
  .app-shell--with-sidebar .sidebar-backdrop { display: none !important; }
  .app-shell--with-sidebar .sidebar {
    position: relative;
    transform: none !important;
    box-shadow: none !important;
    height: auto;
    min-height: 100vh;
  }
}

@media (max-width: 1100px) {
  .app-shell--with-sidebar .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: 260px;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: none;
  }
  .app-shell--with-sidebar.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  }
  .app-shell--with-sidebar .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }
  .app-shell--with-sidebar.nav-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .app-shell--with-sidebar .main-shell {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .topbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
  }
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: var(--panel-soft);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    color: var(--text);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .nav-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
  }
  .topbar-desktop-extra {
    display: none !important;
  }
  .topbar h1 {
    font-size: 1.05rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 600px) {
  .topbar h1 {
    font-size: 16px;
  }
  .topbar .version,
  .topbar .version-badge {
    display: none;
  }
  .topbar .user-pill,
  .topbar .topbar-user-pill {
    display: none;
  }
  .card {
    padding: 14px;
  }
}

.version-badge {display: inline-block;padding: 0.2rem 0.55rem;border-radius: 999px;background: var(--panel-soft);border: 1px solid var(--border);color: var(--muted);font-size: 0.8rem;}

/* Auth / Login - centered, professional */
.auth-center{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 80px);padding:2rem}
.login-card{background:var(--panel);border:1px solid var(--border);border-radius:1.25rem;padding:2.5rem;width:100%;max-width:400px;box-shadow:0 25px 50px -12px rgba(0,0,0,.4)}
.login-brand{text-align:center;margin-bottom:2rem}
.login-logo{font-size:3rem;display:block;margin-bottom:.5rem}
.login-brand h1{margin:0;font-size:1.75rem;font-weight:700;letter-spacing:-.02em}
.login-tagline{color:var(--muted);font-size:.9rem;margin:.35rem 0 0}
.login-form{display:flex;flex-direction:column;gap:1.25rem}
.login-form .label-text{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.4rem}
.login-form input{padding:.85rem 1rem;font-size:1rem}
.login-submit{width:100%;padding:.9rem;font-size:1rem;margin-top:.25rem}
.login-footer{text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.login-footer a{color:var(--muted);font-size:.9rem}
.login-footer a:hover{color:var(--accent)}

/* Dashboard sections */
.dashboard-section{margin-bottom:2rem}
.section-title{font-size:1.1rem;margin:0 0 1rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.league-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:1rem}
.fee-status{display:flex;gap:1rem;flex-wrap:wrap}
.fee-badge{padding:.4rem .75rem;background:var(--panel-soft);border:1px solid var(--border);border-radius:.5rem;font-size:.9rem;color:var(--muted)}
.progress-card{margin-bottom:1rem}
.progress-row{display:flex;justify-content:space-between;margin-bottom:.5rem}
.battle-bar-wrap{margin-top:1rem}
.result-win{color:var(--green)} .result-loss{color:var(--red)} .result-draw{color:var(--muted)}
.link-small{font-size:.85rem}
.ghost-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.top-rated{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.ghost-card{background:var(--panel-soft);padding:.6rem 1rem;border-radius:.6rem;border:1px solid var(--border);display:flex;flex-direction:column;gap:.2rem}
.badge-cuescore{display:inline-block;padding:.15rem .4rem;border-radius:.35rem;background:rgba(56,189,248,.2);color:var(--accent);font-size:.7rem;font-weight:600;margin-left:.35rem}
.toggle-row{display:flex;align-items:center;gap:1rem}
.toggle-switch{position:relative;width:44px;height:24px;background:var(--panel-soft);border:1px solid var(--border);border-radius:999px;cursor:pointer}
.toggle-switch.checked{background:var(--accent)}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-label{font-size:.9rem;color:var(--muted)}
.form-actions{display:flex;gap:.75rem;margin-top:1rem}
.link-danger{color:var(--red);background:none;border:none;cursor:pointer;font-size:inherit;padding:0}
.profile-section{margin-bottom:1.5rem}
.profile-scope-toggle{margin:0 0 .75rem}
.profile-scope-toggle a{text-decoration:none;color:var(--link)}
.profile-scope-toggle a:hover{text-decoration:underline}
.profile-scope-toggle a.active{font-weight:700;color:var(--text)}
.profile-stats-footnote{font-size:.85rem;margin:0 0 .75rem;max-width:36rem;line-height:1.4}
.profile-section h3{font-size:1rem;margin:0 0 .75rem;color:var(--muted)}
.profile-dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .75rem}
.profile-dl dt{color:var(--muted);font-weight:500}
.profile-dl dd{margin:0}
.pr-identity{display:flex;flex-direction:column;gap:.2rem;margin-bottom:1rem;padding:1rem 1.1rem;background:var(--panel-soft);border:1px solid var(--border);border-radius:.75rem;max-width:16rem}
.pr-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pr-value{font-size:2rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--text)}
.pr-class{font-size:.9rem;color:var(--accent);font-weight:600}
.profile-section--achievements{margin-top:2.25rem;padding-top:.35rem}
.profile-section--achievements .achievements-heading{font-size:1.2rem;font-weight:700;letter-spacing:.02em;color:var(--text);margin:0 0 .5rem}
.profile-section--achievements .achievement-intro{margin:0 0 1.25rem;font-size:.9rem;max-width:42rem}
.achievement-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.85rem}
@media (max-width:520px){.achievement-badges{grid-template-columns:1fr}}
.achievement-badge{display:flex;flex-direction:column;justify-content:center;gap:.45rem;padding:.85rem .95rem;border-radius:.75rem;background:rgba(15,23,42,.92);border:1px solid rgba(255,255,255,.08);border-left:4px solid var(--border);min-height:5rem;box-shadow:0 2px 12px rgba(0,0,0,.35);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.achievement-badge:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.45);border-color:rgba(255,255,255,.14)}
.achievement-badge__name{font-weight:700;font-size:.95rem;line-height:1.25;color:var(--text)}
.achievement-badge__meta{font-size:.82rem;display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem}
.achievement-badge__tier{font-weight:600;opacity:.92}
.achievement-badge__sep{opacity:.4;font-weight:500}
.achievement-badge__count{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.05rem;color:var(--text);letter-spacing:.02em}
.achievement-badge--tier-bronze{border-left-color:#d97736;background:linear-gradient(145deg,rgba(217,119,54,.18),rgba(15,23,42,.95));box-shadow:0 2px 14px rgba(217,119,54,.08),0 2px 12px rgba(0,0,0,.35)}
.achievement-badge--tier-bronze:hover{box-shadow:0 8px 28px rgba(217,119,54,.15),0 4px 16px rgba(0,0,0,.4)}
.achievement-badge--tier-bronze .achievement-badge__tier{color:#fdba74}
.achievement-badge--tier-silver{border-left-color:#94a3b8;background:linear-gradient(145deg,rgba(148,163,184,.2),rgba(15,23,42,.95));box-shadow:0 2px 14px rgba(148,163,184,.1),0 2px 12px rgba(0,0,0,.35)}
.achievement-badge--tier-silver:hover{box-shadow:0 8px 28px rgba(148,163,184,.18),0 4px 16px rgba(0,0,0,.4)}
.achievement-badge--tier-silver .achievement-badge__tier{color:#e2e8f0}
.achievement-badge--tier-gold{border-left-color:#eab308;background:linear-gradient(145deg,rgba(234,179,8,.16),rgba(15,23,42,.95));box-shadow:0 2px 14px rgba(234,179,8,.12),0 2px 12px rgba(0,0,0,.35)}
.achievement-badge--tier-gold:hover{box-shadow:0 8px 28px rgba(234,179,8,.2),0 4px 16px rgba(0,0,0,.4)}
.achievement-badge--tier-gold .achievement-badge__tier{color:#fde047}
.achievement-badge--tier-elite{border-left-color:#a78bfa;background:linear-gradient(145deg,rgba(167,139,250,.2),rgba(15,23,42,.95));box-shadow:0 2px 14px rgba(167,139,250,.14),0 2px 12px rgba(0,0,0,.35)}
.achievement-badge--tier-elite:hover{box-shadow:0 8px 28px rgba(167,139,250,.25),0 4px 16px rgba(0,0,0,.4)}
.achievement-badge--tier-elite .achievement-badge__tier{color:#ddd6fe}

/* BSA Match Entry scorecard */
.bsa-scorecard-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0;border:1px solid var(--border);border-radius:.65rem;background:var(--panel-soft)}
table.bsa-scorecard{font-size:.82rem;min-width:980px;width:100%;margin:0}
table.bsa-scorecard--grid{table-layout:fixed}
.bsa-col-ps{width:4%}
.bsa-col-name{width:13%}
.bsa-col-bf{width:5%}
.bsa-col-lag{width:8%}
.bsa-col-p{width:8%}
.bsa-col-fr{width:5%}
table.bsa-scorecard .bsa-session-range{text-align:center;font-weight:600}
table.bsa-scorecard .bsa-session-foot-label{text-align:left;font-size:.78rem;color:var(--text)}
table.bsa-scorecard .bsa-sess-foot-score--p{text-align:center!important}
.bsa-fr-cell{position:relative}
.match-entry-frame-hiddens{position:absolute;left:-8000px;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
table.bsa-scorecard tbody tr.bsa-frame-row .bsa-flags label{cursor:pointer}
table.bsa-scorecard th,table.bsa-scorecard td{padding:.35rem .45rem;border:1px solid var(--border);vertical-align:middle}
table.bsa-scorecard thead th{background:var(--panel);color:var(--muted);font-weight:600;text-align:center}
table.bsa-scorecard .bsa-title-row th{text-align:left;font-size:.95rem;color:var(--text)}
table.bsa-scorecard .bsa-mid{text-align:center;font-weight:600;background:rgba(56,189,248,.12);font-size:.9rem}
table.bsa-scorecard .bsa-session-row td{background:rgba(255,255,255,.05);font-weight:600;color:var(--accent)}
table.bsa-scorecard .bsa-session-tot{font-variant-numeric:tabular-nums;text-align:right;font-weight:600;color:var(--text)}
table.bsa-scorecard .bsa-name{text-align:left;min-width:6.5rem}
table.bsa-scorecard select.bsa-sel{font-size:.75rem;padding:.25rem .35rem;min-width:4.5rem}
table.bsa-scorecard .bsa-num{text-align:center;width:2rem;color:var(--muted);font-weight:500}
table.bsa-scorecard .bsa-flags{text-align:center;white-space:nowrap}
table.bsa-scorecard .bsa-flags label{display:inline-flex;align-items:center;gap:.15rem;font-size:.65rem;color:var(--muted);margin:0 .1rem;cursor:default}
table.bsa-scorecard .bsa-flags input{margin:0;width:13px;height:13px;accent-color:var(--accent)}
table.bsa-scorecard .bsa-flags .bsa-placeholder{opacity:.4;pointer-events:none}
table.bsa-scorecard tbody tr.bsa-frame-row:hover{background:rgba(255,255,255,.03)}
table.bsa-scorecard tbody tr.bsa-frame-row.bsa-slot-ff{background:rgba(249,115,22,.07)}
table.bsa-scorecard tbody tr.bsa-frame-row.bsa-row-manual-forfeit{background:rgba(239,68,68,.07);box-shadow:inset 2px 0 0 rgba(248,113,113,.35)}
table.bsa-scorecard tbody tr.bsa-frame-row.bsa-row-void{background:rgba(148,163,184,.09)}
table.bsa-scorecard .bsa-void-label{display:block;margin-top:.28rem;font-size:.62rem;line-height:1.2;cursor:pointer;-webkit-user-select:none;user-select:none}
table.bsa-scorecard .bsa-void-label input{margin:0 .2rem 0 0;vertical-align:middle;width:12px;height:12px;accent-color:var(--muted)}
table.bsa-scorecard .bsa-total-row td{background:var(--panel);font-weight:600}
table.bsa-scorecard tbody tr.bsa-session-foot-row td{background:rgba(15,23,42,.35);font-weight:600;font-size:.8rem;border-top:1px solid var(--border);color:var(--muted)}
table.bsa-scorecard .bsa-sess-foot-score{text-align:center;font-variant-numeric:tabular-nums;color:var(--text)}
table.bsa-scorecard .bsa-session-foot-mid{background:rgba(56,189,248,.08)!important}
table.bsa-scorecard .bsa-session-spacer td{border:none;height:.4rem;padding:0;background:transparent!important}
table.bsa-scorecard .bsa-match-summary{background:rgba(15,23,42,.4);font-size:.88rem;color:var(--text);line-height:1.45}
table.bsa-scorecard .bsa-match-summary div{margin:.12rem 0}
table.bsa-scorecard .bsa-meta-cell{min-width:7rem;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
table.bsa-scorecard .bsa-meta-cell label{font-size:.7rem;color:var(--muted);flex-direction:row;align-items:center;gap:.25rem}
.match-entry-full-void-banner{display:none;margin:.6rem 0 0;font-size:.8rem;line-height:1.4}
.match-entry-card.match-entry--full-void .match-entry-full-void-banner{display:block}
.match-entry-card.match-entry--full-void .match-entry-detail-only{opacity:.48;pointer-events:none;user-select:none}
.match-entry-scorecard-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 1rem}
.match-entry-scorecard-actions--footer{margin:1rem 0 0}
.lineup-bsa-side strong{display:block;margin-bottom:.35rem}
.lineup-bsa-head{display:grid;grid-template-columns:1fr auto;gap:.5rem;font-size:.75rem;margin:.25rem 0 .5rem;padding-right:0}
.lineup-bsa-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:end;margin-bottom:.5rem}
.lineup-bsa-row .lineup-bsa-player{margin:0}
.lineup-bsa-ff{margin:0;display:flex;flex-direction:column;align-items:stretch;min-width:5rem}
.lineup-bsa-ff .lineup-bsa-ff-h{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:.15rem}
.lineup-bsa-ff select{width:100%;font-size:.85rem}
table.bsa-scorecard select:disabled{opacity:.55}

@media print {
  .no-print { display: none !important; }
}