/* ============================================================
   School Lottery Manager v15  —  Mobile-first Responsive
   ============================================================ */
:root {
  --brand:      #2563eb;
  --brand-dk:   #1d4ed8;
  --brand-lt:   #dbeafe;
  --danger:     #dc2626;
  --danger-dk:  #b91c1c;
  --bg:         #f1f5f9;
  --surface:    #ffffff;
  --surface2:   #f8fafc;
  --border:     #e2e8f0;
  --border2:    #cbd5e1;
  --text:       #0f172a;
  --text2:      #475569;
  --muted:      #94a3b8;
  --header-h:   54px;
  --bnav-h:     58px;
  --sidebar-w:  256px;
  --r:          10px;
  --r-sm:       6px;
  --shadow:     0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.05);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.18);
  --nav-bg:     #1e293b;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     background:var(--bg);color:var(--text);line-height:1.5;min-height:100dvh}

/* ── Header ── */
header{position:sticky;top:0;z-index:200;height:var(--header-h);
       background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#162044 100%);
       display:flex;align-items:center;justify-content:space-between;
       padding:0 16px;gap:12px;
       box-shadow:0 2px 12px rgba(0,0,0,.4);
       border-bottom:2px solid rgba(251,191,36,.35)}
.header-logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
#schoolLogo{max-height:38px;max-width:56px;object-fit:contain;
            border-radius:4px;flex-shrink:0}
#schoolLogo:not([src]),#schoolLogo[src=""]{display:none}
#headerTitle{font-size:15px;font-weight:700;color:#f1f5f9;
             white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-nav{display:none;gap:2px;flex-shrink:0;
            position:absolute;left:50%;transform:translateX(-50%)}/* shown ≥768 */
.header-spacer{flex:0 0 auto;min-width:0}/* mirrors logo side for centering */
.nav-tab{background:transparent;border:none;color:#94a3b8;padding:7px 12px;
         border-radius:var(--r-sm);font-size:13px;font-weight:500;cursor:pointer;
         transition:background .15s,color .15s;white-space:nowrap}
.nav-tab:hover{background:rgba(255,255,255,.09);color:#e2e8f0}
.nav-tab.active-tab{background:rgba(59,130,246,.22);color:#93c5fd;font-weight:600}

/* ── Bottom nav (mobile) ── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:200;
            height:var(--bnav-h);background:var(--nav-bg);
            display:flex;align-items:stretch;
            border-top:1px solid rgba(255,255,255,.08);
            box-shadow:0 -2px 12px rgba(0,0,0,.25)}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;
          justify-content:center;gap:2px;background:transparent;border:none;
          color:#64748b;font-size:10px;font-weight:500;cursor:pointer;
          padding:4px 2px;transition:color .15s;
          -webkit-tap-highlight-color:transparent}
.bnav-btn .icon{font-size:19px;line-height:1}
.bnav-btn.active-tab{color:#60a5fa}
.bnav-btn:active{background:rgba(255,255,255,.06)}

/* ── Overlay ── */
#overlay{position:fixed;inset:0;z-index:9998;background:rgba(15,23,42,.8);
         display:none;align-items:center;justify-content:center;
         color:#fff;font-size:16px;font-weight:600}

/* ── Main ── */
main{padding:14px 12px calc(var(--bnav-h) + 14px);max-width:1440px;margin:0 auto}
.panel{display:none}
.panel.active{display:block}

/* ── Layout ── */
.layout{display:flex;flex-direction:column;gap:12px}

/* ── Sidebar ── */
.sidebar{background:var(--surface);border-radius:var(--r);
         box-shadow:0 2px 6px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.09);
         border:1px solid var(--border);overflow:hidden}
/* Toggle button (mobile) */
.sidebar-header{display:flex;align-items:center;justify-content:space-between;
                width:100%;padding:12px 16px;background:var(--nav-bg);color:#f1f5f9;
                border:none;cursor:pointer;font-size:13px;font-weight:600;
                letter-spacing:.02em;-webkit-tap-highlight-color:transparent}
.sidebar-chevron{font-size:11px;transition:transform .25s;display:inline-block}
/* Body: collapsed on mobile by default */
.sidebar-body{display:none;flex-direction:column}
.sidebar-body.open{display:flex}
.sidebar section{padding:12px 14px;border-bottom:1px solid var(--border)}
.sidebar section:last-child{border-bottom:none}
.sidebar h3{font-size:10px;text-transform:uppercase;letter-spacing:.07em;
            color:var(--brand);margin-bottom:8px;font-weight:800;
            display:flex;align-items:center;gap:6px}
.sidebar h3::before{content:'';display:inline-block;width:3px;height:10px;
            background:var(--brand);border-radius:2px;flex-shrink:0}
.sidebar button,.sidebar .input-full{width:100%;margin-top:4px}
.sidebar small{font-size:11px;color:var(--text2);display:block;margin-top:5px;line-height:1.4}

/* ── Content ── */
.content{background:var(--surface);border-radius:var(--r);
         padding:16px;
         box-shadow:0 2px 6px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.08);
         border:1px solid var(--border);
         min-width:0}

/* ── Typography ── */
h2{font-size:18px;font-weight:800;margin-bottom:14px;
   color:var(--text);letter-spacing:-.01em;
   padding-left:12px;
   border-left:4px solid var(--brand);
   line-height:1.25}
h3{font-size:13px;font-weight:700;margin:12px 0 6px}

/* ── Buttons ── */
.btn-primary,.btn-secondary,.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  border:none;border-radius:var(--r-sm);cursor:pointer;
  font-size:13px;font-weight:500;padding:8px 13px;line-height:1.2;
  transition:opacity .15s,transform .1s;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
.btn-primary{background:var(--brand);color:#fff}
.btn-secondary{background:#64748b;color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-primary:hover{background:var(--brand-dk)}
.btn-secondary:hover{background:#475569}
.btn-danger:hover{background:var(--danger-dk)}
.btn-primary:active,.btn-secondary:active,.btn-danger:active{transform:scale(.96)}
.btn-primary:disabled,.btn-secondary:disabled,.btn-danger:disabled
  {opacity:.4;cursor:not-allowed;transform:none!important}
.btn-sm{padding:3px 8px;font-size:11px;border-radius:4px;
        border:none;cursor:pointer;font-weight:500}
.btn-sm.btn-secondary{background:#64748b;color:#fff}
.btn-sm.btn-danger{background:var(--danger);color:#fff}
.btn-sm.btn-primary{background:var(--brand);color:#fff}
#btnRunDraw{background:var(--danger);color:#fff;font-weight:700;
            font-size:14px;padding:10px 14px;
            box-shadow:0 2px 8px rgba(220,38,38,.4)}
#btnRunDraw:not(:disabled):hover{background:var(--danger-dk)}
#btnRunDraw:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

/* ── Forms ── */
.label-small{font-size:12px;font-weight:500;color:var(--text2);
             display:block;margin-bottom:3px}
input[type="text"],input[type="number"],input[type="email"],
select,textarea{font-family:inherit;font-size:13px;color:var(--text);
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--r-sm);padding:7px 10px;width:100%;
  transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.input-full{width:100%;margin-top:2px}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2)}
.checkbox-row input{accent-color:var(--brand);width:15px;height:15px;flex-shrink:0}
input[type="file"]{font-size:12px;padding:5px;background:var(--surface2)}

/* ── Tables ── */
.table-container{border:1px solid var(--border);border-radius:var(--r-sm);
                 overflow:auto;-webkit-overflow-scrolling:touch;
                 background:var(--surface)}
.table-scroll-200{max-height:220px}
.table-scroll-300{max-height:340px}
table{border-collapse:collapse;width:100%;font-size:12px;min-width:360px}
th,td{border-bottom:1px solid var(--border);padding:7px 10px;
      text-align:center;white-space:nowrap}
.col-name,.col-teacher,
th[data-sort-key="name"],th[data-sort-key="teacher"],
th:first-child{text-align:left}
td.col-name,td.col-teacher{text-align:left}
tr:last-child td{border-bottom:none}
th{background:linear-gradient(180deg,#eff6ff 0%,#e8f1fc 100%);
   font-size:10px;font-weight:700;
   text-transform:uppercase;letter-spacing:.05em;color:#1e40af;
   position:sticky;top:0;z-index:1;cursor:pointer;user-select:none;
   border-bottom:2px solid #bfdbfe}
th:hover{background:linear-gradient(180deg,#dbeafe 0%,#d1e8fb 100%)}
th.sort-asc::after{content:" ▲";font-size:9px}
th.sort-desc::after{content:" ▼";font-size:9px}
tr:nth-child(even) td{background:#fafbfd}
tr:hover td{background:#eff6ff;transition:background .1s}
code{font-family:"Courier New",monospace;font-size:11px;
     background:var(--surface2);border:1px solid var(--border);
     border-radius:3px;padding:1px 5px;color:var(--brand-dk);letter-spacing:.03em}

/* ── Stats cards ── */
.stats-header,.stats-section-label{font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:14px 0 8px}
.stats-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.stats-card{background:var(--surface);border:1px solid var(--border);
            border-radius:var(--r-sm);overflow:hidden;
            box-shadow:0 1px 4px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.05);
            transition:transform .15s,box-shadow .15s}
.stats-card:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.stats-card-header{background:var(--brand);color:#fff;font-size:10px;
                   font-weight:700;padding:5px 8px;text-align:center;letter-spacing:.04em}
.stats-card-body{padding:8px;text-align:center;font-size:18px;
                 font-weight:800;color:var(--text);line-height:1.2}
.stats-card-sub{font-size:10px;font-weight:400;color:var(--muted);
                margin-top:3px;line-height:1.3;white-space:normal}
.stats-row-money .stats-card-body span{font-size:18px}

/* ── Batch cards ── */
.batch-card{background:var(--surface);border:1px solid var(--border);
            border-radius:var(--r-sm);padding:12px 14px;margin-bottom:8px}
.batch-card-header{display:flex;justify-content:space-between;
                   align-items:flex-start;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.batch-filename{font-weight:700;font-size:13px;color:var(--text);word-break:break-all}
.batch-mode-tag{background:var(--brand-lt);color:var(--brand-dk);
                font-size:10px;padding:2px 7px;border-radius:10px;white-space:nowrap}
.batch-meta{font-size:11px;color:var(--muted)}
.batch-stats{display:flex;gap:14px;font-size:12px;color:var(--text2);
             margin-bottom:8px;flex-wrap:wrap}
.batch-actions{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.batch-rows{margin-top:8px;border-top:1px solid var(--border);padding-top:8px}
.batch-tx-table{font-size:11px;width:100%;border-collapse:collapse}
.batch-tx-table th,.batch-tx-table td{border:1px solid var(--border);padding:4px 7px}
.batch-tx-table th{background:var(--surface2)}

/* ── Wizard ── */
.wizard-layout{display:flex;flex-direction:column;gap:12px}
.wizard-column{min-width:0}
#wizardModeLabel{font-size:13px;font-weight:700;margin-bottom:8px}
.wizard-summary-box{background:#f0fdf4;border:1px solid #86efac;
  border-radius:var(--r-sm);padding:10px 14px;font-size:12px;
  display:flex;flex-direction:column;gap:4px}
.wizard-summary-box strong{font-size:13px;color:#166534}

/* ── Reveal controls ── */
.reveal-controls{display:flex;align-items:center;gap:10px;
  background:#1e293b;border-radius:var(--r-sm);
  padding:10px 14px;flex-wrap:wrap;margin-bottom:12px}
.reveal-controls-label{font-size:10px;font-weight:700;color:#94a3b8;
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.reveal-toggle{display:flex;align-items:center;gap:5px;
  font-size:12px;color:#e2e8f0;cursor:pointer;user-select:none}
.reveal-toggle input{accent-color:#3b82f6;width:14px;height:14px;cursor:pointer}

/* ── Ticket pool state ── */
#poolStaleBanner{background:#fef3c7;border:1px solid #f59e0b;
  border-radius:var(--r-sm);padding:10px 14px;margin-bottom:10px;
  font-size:12px;color:#92400e}
.filter-active{background:var(--brand)!important;color:#fff!important;font-weight:700!important}

/* ── Draw modal ── */
#drawModal{position:fixed;inset:0;z-index:9500;background:#0f172a;
           display:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.draw-modal-inner{min-height:100%;width:100%;max-width:640px;
  margin:0 auto;padding:14px 14px 48px;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.draw-top-bar{width:100%;display:flex;align-items:center;gap:10px;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
.draw-prize-label{flex:1;font-size:15px;font-weight:700;color:#f1f5f9}
.draw-spinner-wrap{display:flex;flex-direction:column;align-items:center;
                   width:100%;padding:8px 0}
.draw-spinner-code{font-family:"Courier New",monospace;
  font-size:clamp(34px,9vw,56px);font-weight:900;color:#fbbf24;
  letter-spacing:.1em;text-shadow:0 0 28px rgba(251,191,36,.55);
  min-height:58px;display:flex;align-items:center;text-align:center}
.draw-spinner-code.spinning{animation:codeFlicker .12s infinite}
.draw-spinner-meta{text-align:center;font-size:16px;font-weight:700;
  color:#e2e8f0;min-height:22px;margin-top:8px;opacity:0;transition:opacity .3s}
.draw-spinner-meta:not(:empty){opacity:1}
@keyframes codeFlicker{
  0%{opacity:1}50%{opacity:.6;color:#60a5fa}100%{opacity:1}}
.draw-winner-banner{width:100%;text-align:center;padding:20px 16px;
  background:linear-gradient(135deg,#1d4ed8,#7c3aed);border-radius:14px;
  box-shadow:0 0 40px rgba(124,58,237,.4)}
.winner-crown{font-size:36px;margin-bottom:4px}
.winner-name{font-size:clamp(22px,6vw,36px);font-weight:800;color:#fff}
.winner-sub{font-size:13px;color:rgba(255,255,255,.75);margin-top:4px}
.winner-pop{animation:winnerPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes winnerPop{0%{transform:scale(.85);opacity:.6}100%{transform:scale(1);opacity:1}}
.draw-action-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.btn-reveal{background:var(--brand);color:#fff;border:none;
  padding:11px 26px;border-radius:var(--r-sm);font-size:14px;font-weight:700;
  cursor:pointer;box-shadow:0 2px 12px rgba(59,130,246,.4);transition:background .2s}
.btn-reveal:hover{background:var(--brand-dk)}
.btn-next-prize{background:#10b981;color:#fff;border:none;
  padding:11px 26px;border-radius:var(--r-sm);font-size:14px;font-weight:700;
  cursor:pointer;box-shadow:0 2px 12px rgba(16,185,129,.4);transition:background .2s}
.btn-next-prize:hover{background:#059669}
.draw-winners-panel{width:100%;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px}
.draw-winners-title{font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:#475569;margin-bottom:10px}
.draw-winners-item{display:flex;align-items:center;gap:8px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:#e2e8f0;font-size:13px;flex-wrap:wrap}
.draw-winners-item:last-child{border-bottom:none}
.draw-prize-badge{background:var(--brand);color:#fff;font-size:10px;
  font-weight:700;padding:2px 7px;border-radius:10px;
  min-width:28px;text-align:center;flex-shrink:0}
.draw-code-badge{font-family:monospace;font-size:12px;color:#fbbf24;margin-left:auto}
.draw-winners-item-new{animation:itemFlash .5s ease-out}
#confettiCanvas{position:fixed;inset:0;pointer-events:none;z-index:9501;display:none}

/* ── Dialogs ── */
#drawModeModal,#ticketPrintModal{position:fixed;inset:0;z-index:9700;
  background:rgba(10,15,30,.9);display:none;
  align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.draw-mode-dialog{background:#1e293b;border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:26px 22px;width:100%;max-width:480px;
  text-align:center;box-shadow:var(--shadow-lg);color:#f1f5f9}
.draw-mode-dialog h3{font-size:18px;color:#f1f5f9;margin-bottom:8px}
.draw-mode-dialog>p{font-size:13px;color:#94a3b8;margin-bottom:18px}
.draw-mode-options{display:flex;gap:12px;justify-content:center;
  flex-wrap:wrap;margin-bottom:16px}
.draw-mode-btn{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);
  border-radius:12px;padding:16px 18px;flex:1;min-width:130px;max-width:200px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:5px;color:#f1f5f9;transition:background .15s,border-color .15s,transform .1s;
  -webkit-tap-highlight-color:transparent}
.draw-mode-btn:hover{background:rgba(59,130,246,.2);border-color:#3b82f6;transform:translateY(-2px)}
.draw-mode-icon{font-size:26px}
.draw-mode-title{font-size:13px;font-weight:700}
.draw-mode-desc{font-size:11px;color:#94a3b8;line-height:1.4;text-align:center}

/* ── Transaction modal ── */
#txModal{display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(15,23,42,.7);align-items:center;justify-content:center}
#txModalInner{position:relative;background:var(--surface);border-radius:var(--r);
  padding:20px;width:90%;max-width:800px;max-height:88vh;
  overflow:auto;box-shadow:var(--shadow-lg)}

/* ── How To ── */
.howto-wrap{max-width:820px;padding-bottom:32px}
.howto-intro{color:var(--text2);font-size:13px;margin:0 0 16px}
.howto-section{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:16px 18px;margin-bottom:12px}
.howto-section-title{font-size:14px;font-weight:700;color:var(--brand-dk);
  margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--brand-lt)}
.howto-subsection{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin:14px 0 6px}
.howto-p{font-size:13px;color:var(--text2);line-height:1.6;margin:0 0 8px}
.howto-steps{display:flex;flex-direction:column;gap:8px}
.howto-step{display:flex;gap:10px;align-items:flex-start;
            font-size:13px;color:var(--text2);line-height:1.5}
.howto-step-num{min-width:22px;height:22px;background:var(--brand);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0}
.howto-table{border:1px solid var(--border);border-radius:var(--r-sm);
             overflow:hidden;margin:6px 0 8px}
.howto-row{display:flex;border-bottom:1px solid #f3f4f6;font-size:12px;flex-wrap:wrap}
.howto-row:last-child{border-bottom:none}
.howto-row:nth-child(even){background:var(--surface2)}
.howto-cell-label{min-width:140px;max-width:140px;padding:8px 12px;
  font-weight:700;color:#1e3a8a;background:#eff6ff;
  border-right:1px solid var(--border);font-size:11px;line-height:1.4}
.howto-cell-desc{padding:8px 12px;color:var(--text2);line-height:1.5;flex:1;min-width:160px}
.howto-list{font-size:13px;color:var(--text2);line-height:1.7;padding-left:20px;margin:4px 0 0}
.howto-list li{margin-bottom:4px}

/* ── Misc ── */
.info-icon{position:relative;cursor:pointer;font-size:1.1em;color:var(--muted)}
.info-tooltip{position:fixed;background:var(--surface);
  border:1px solid var(--border);padding:8px 12px;border-radius:var(--r-sm);
  box-shadow:var(--shadow);z-index:2147483647;max-width:280px;
  white-space:normal;display:none;font-size:12px;color:var(--text2)}
#fundraiserName,#fundraiserNotes{color:var(--text);background:var(--surface)}
#fundraiserCreated{font-size:11px;color:var(--muted);margin-top:6px}

/* ── Animations ── */
@keyframes itemFlash{0%{background:rgba(251,191,36,.22)}100%{background:transparent}}

/* ============================================================
   DESKTOP  ≥ 768px
   ============================================================ */
@media(min-width:768px){
  main{padding:20px 20px 24px}
  .header-nav{display:flex}
  .bottom-nav{display:none}
  /* Sidebar always open, sticky, no toggle */
  .sidebar-header{display:none}
  .sidebar-body{display:flex!important}
  .sidebar{width:var(--sidebar-w);flex-shrink:0;align-self:flex-start;
           position:sticky;top:calc(var(--header-h) + 12px);
           max-height:calc(100dvh - var(--header-h) - 24px);overflow-y:auto}
  .layout{flex-direction:row;align-items:flex-start}
  .content{flex:1;min-width:0}
  .wizard-layout{flex-direction:row}
  .wizard-column{flex:1}
  .draw-spinner-code{font-size:56px}
}
@media(min-width:1100px){
  :root{--sidebar-w:272px}
  main{padding:24px 28px 28px}
}

/* ── Collapsible section within sidebar (teacher list etc.) ── */
.section-collapse-header {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; padding: 2px 0;
  -webkit-tap-highlight-color: transparent;
}
.section-collapse-header:hover h3 { color: var(--brand); }
.section-chev {
  font-size: 10px; color: var(--muted); transition: transform .22s;
  display: inline-block; flex-shrink: 0;
}
.section-collapse-body { display: none; }
.section-collapse-body.open { display: block; }

/* ── Filter badge above class lists ── */
.filter-badge {
  background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.3);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 6px;
  margin-top: 6px;
}
.filter-badge span { color: var(--text); font-weight: 700; }

/* ── Prize summary cards row ── */
.prize-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.prize-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  text-align: center;
}
.prize-card-label {
  background: linear-gradient(135deg,#0f172a,#1e3a5f);
  color: #93c5fd;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(99,179,237,.2);
}
.prize-card-value {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  padding: 8px 6px 3px;
  line-height: 1.1;
}
.prize-card-sub {
  font-size: 10px;
  color: var(--muted);
  padding: 0 8px 8px;
  line-height: 1.3;
}

/* ── Stats card sizing — value prominent, label small ── */
.stats-card-header {
  font-size: 10px !important;
}
.stats-card-body {
  font-size: 20px !important;
  font-weight: 900 !important;
  padding: 8px 6px 3px !important;
}
.stats-card-body span {
  font-size: 20px !important;
  font-weight: 900 !important;
}
.stats-row-money .stats-card-body span {
  font-size: 20px !important;
}
.stats-card-sub {
  font-size: 11px !important;
  font-weight: 400 !important;
}

/* ── Wizard: mapping row with description ── */
.mapping-row {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 8px;
  align-items: start;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.mapping-row-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.mapping-row-desc {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
  margin-top: 2px;
}
.mapping-row select {
  font-size: 12px;
  padding: 5px 8px;
  width: 100%;
}

/* ── btn-full: full width inside sidebar ── */
.btn-full { width: 100%; }

/* ── v15.1: Active filters display (above sidebar-header, always visible) ── */
.active-filters-display {
  background: #0f172a;
  border-bottom: 2px solid #2563eb;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.6;
}
.active-filters-display .afd-row-label {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #64748b; margin-bottom: 2px;
}
.active-filters-display .afd-item {
  display: flex; align-items: center; gap: 5px;
  background: rgba(37,99,235,.25);
  border: 1px solid rgba(99,179,237,.3);
  border-radius: 4px;
  padding: 2px 6px; margin-bottom: 3px;
}
.active-filters-display .afd-item strong { color: #bfdbfe; font-weight: 700; }
.active-filters-display .afd-clear {
  background: none; border: none; cursor: pointer;
  color: #93c5fd; font-size: 11px; padding: 0 0 0 3px; line-height: 1;
  font-weight: 700; opacity: .8;
}
.active-filters-display .afd-clear:hover { color: #fff; opacity: 1; }

/* ── Info icon + tooltip (v15.1) ── */
.info-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #93c5fd; font-size: 12px; font-style: normal;
  cursor: pointer; position: relative; user-select: none;
  flex-shrink: 0;
}
.info-icon:hover { background: rgba(255,255,255,.2); }
.info-tooltip {
  display: none;
  position: fixed;
  width: 260px;
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 12px; font-style: normal;
  color: #cbd5e1; line-height: 1.6;
  z-index: 2147483647;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  pointer-events: none;
  isolation: isolate;
}
.info-tooltip strong { color: #f1f5f9; }
.info-tooltip.tip-visible { pointer-events: auto; }

/* ── Mobile input-number width fix (5-digit buffer) ── */
table input[type="number"] {
  width: 72px !important;
  min-width: 72px;
}
table input[type="text"] {
  min-width: 80px;
}

/* ── Quick add student row ── */
#quickAddSection {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
#splashScreen {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  background: #0a0f2e;
  transition: opacity 1.1s ease, visibility 1.1s ease;
}
#splashScreen.hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#splashBg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%,
    rgba(37,99,235,.25) 0%, transparent 70%);
}
#splashImg {
  position: relative;
  width: min(780px, 90vw);
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(37,99,235,.4));
  animation: splashImgIn .8s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes splashImgIn {
  from { opacity:0; transform: scale(.9) translateY(16px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
#splashContent {
  position: relative;
  text-align: center;
  margin-top: -32px;
  animation: splashTextIn .9s .2s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes splashTextIn {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}
#splashTitle {
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 800;
  color: #f1f5f9;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-shadow: 0 2px 20px rgba(59,130,246,.5);
}
#splashSub {
  font-size: clamp(11px, 2vw, 14px);
  color: rgba(147,197,253,.75);
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-top: 5px;
  font-family: 'Courier New', monospace;
}
#splashEnter {
  margin-top: 22px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 11px 32px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  box-shadow: 0 4px 20px rgba(37,99,235,.5);
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
#splashEnter:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,99,235,.6); }
#splashEnter:active { transform: scale(.97); }
#splashDismiss {
  position: absolute;
  bottom: 20px;
  font-size: 11px;
  color: rgba(148,163,184,.45);
  letter-spacing: .04em;
  font-family: 'Courier New', monospace;
  animation: splashDismissIn 1s .5s both;
}
@keyframes splashDismissIn {
  from { opacity:0; } to { opacity:1; }
}

/* ── School logo upload ── */
#logoPreviewWrap{display:none;margin-top:8px;text-align:center}
#logoPreview{max-height:60px;max-width:140px;object-fit:contain;
             border-radius:6px;border:1px solid var(--border);
             background:var(--surface2);padding:4px}
.logo-upload-label{display:flex;align-items:center;justify-content:center;
  gap:6px;padding:8px;border:2px dashed var(--border2);border-radius:var(--r-sm);
  cursor:pointer;font-size:12px;color:var(--text2);
  transition:border-color .15s,color .15s;margin-top:6px;background:var(--surface2)}
.logo-upload-label:hover{border-color:var(--brand);color:var(--brand)}

/* ── Amount update modal ── */
#amountModal{display:none;position:fixed;inset:0;z-index:9900;
  background:rgba(10,15,30,.88);align-items:center;justify-content:center;padding:16px}
#amountModalInner{background:#1e293b;border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:26px 24px;width:100%;max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);color:#f1f5f9;text-align:center}
#amountModalName{font-size:18px;font-weight:800;color:#f1f5f9;margin-bottom:4px}
#amountModalSub{font-size:12px;color:#64748b;margin-bottom:18px}
#amountModalCurrent{font-size:13px;color:#94a3b8;margin-bottom:16px}
.amount-modal-type{display:flex;gap:8px;margin-bottom:16px;justify-content:center}
.amount-type-btn{flex:1;max-width:140px;padding:9px 12px;border-radius:8px;
  border:2px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);
  color:#94a3b8;font-size:13px;font-weight:600;cursor:pointer;
  transition:all .15s}
.amount-type-btn.active-increase{background:rgba(16,185,129,.18);
  border-color:#10b981;color:#6ee7b7}
.amount-type-btn.active-decrease{background:rgba(239,68,68,.18);
  border-color:#ef4444;color:#fca5a5}
#amountModalInput{width:100%;padding:14px;font-size:28px;font-weight:800;
  text-align:center;background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.12);border-radius:10px;color:#fbbf24;
  font-family:'Courier New',monospace;margin-bottom:6px;
  transition:border-color .15s}
#amountModalInput:focus{outline:none;border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.2)}
#amountModalField{display:flex;align-items:center;gap:8px;margin-bottom:16px}
#amountModalFieldLabel{font-size:12px;color:#64748b;text-align:left;flex-shrink:0}
.amount-modal-row{display:flex;gap:10px}
#amountModalApply{flex:1;padding:11px;background:#2563eb;color:#fff;
  border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;
  transition:background .15s}
#amountModalApply:hover{background:#1d4ed8}
#amountModalCancel{flex:1;padding:11px;background:rgba(255,255,255,.07);
  color:#94a3b8;border:1px solid rgba(255,255,255,.1);border-radius:8px;
  font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}
#amountModalCancel:hover{background:rgba(255,255,255,.12)}

/* ── Amount modal section labels & field toggle ── */
.amount-modal-section-label{
  font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  color:#475569;margin:12px 0 6px;text-align:left}
.amount-type-btn.active-field{
  background:rgba(59,130,246,.22);
  border-color:#3b82f6;color:#93c5fd}