/* =====================================================================================================
   Staff panel: glass theme.
   Loaded after the panel's own styles and only restyles them: no markup or data changes, so removing the
   <link> to this file (and the staff-glass.js <script>) puts the panel back exactly as it was.
   Behind everything: the blurred ball hockey photos from /caps-bg, faded in by staff-glass.js.
   ===================================================================================================== */

/* Whatever the panel hides stays hidden (admin-only tabs, cards and buttons included). Nothing below may
   change that, so this one wins over every display rule in the theme. */
[hidden]{display:none!important}

:root{
  color-scheme:dark;
  --ink:#fff; --ink-2:rgba(255,255,255,.76); --ink-3:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.13); --shell:rgba(255,255,255,.07); --paper:rgba(255,255,255,.06);
  --ok:#5BE38A; --ok-bg:rgba(48,209,88,.17); --warn:#FFC56B; --warn-bg:rgba(255,179,64,.17); --bad:#FF8379; --bad-bg:rgba(255,69,58,.19);
  --body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Barlow Condensed","Barlow",-apple-system,"Segoe UI",Arial,sans-serif;
  --g-fill:linear-gradient(160deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.07) 45%,rgba(255,255,255,.05) 100%);
  --g-solid:linear-gradient(160deg,rgba(52,56,66,.9),rgba(26,28,34,.92));
  --g-line:rgba(255,255,255,.16);
  --g-blur:blur(26px) saturate(165%);
  --g-sh:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.16),0 22px 56px -20px rgba(0,0,0,.6);
  --card-sh:var(--g-sh);
  --dark:#14171C;
}
html{background:#0b0d10}
body{background:transparent!important;color:var(--ink);font-family:var(--body);font-weight:500;letter-spacing:0}
:focus-visible{outline:3px solid #6CB6FF}
::selection{background:rgba(237,28,36,.55);color:#fff}
a{color:#8CC8FF}
a.btn{text-decoration:none}

/* ---------- the photo background ---------- */
.gbg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#0b0d10}
.gbg i{position:absolute;inset:-6%;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);
  filter:blur(14px) saturate(1.25) brightness(.6);transition:opacity 2.4s ease;animation:gDrift 40s ease-in-out infinite alternate}
.gbg i.on{opacity:1}
.gbg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(10,12,16,0) 0%,rgba(10,12,16,.38) 60%,rgba(10,12,16,.78) 100%),
             linear-gradient(180deg,rgba(8,10,14,.3) 0%,rgba(8,10,14,.15) 30%,rgba(8,10,14,.6) 100%)}
@keyframes gDrift{from{transform:scale(1.08) translate3d(-1.2%,-.8%,0)}to{transform:scale(1.16) translate3d(1.2%,.8%,0)}}
@media (prefers-reduced-motion:reduce){.gbg i{animation:none;transition:none}}

/* ---------- glass surfaces ---------- */
.card,.tbl,.log,.in-card,.stat,.txset,.sumgrid div,details.list,.drop,.dcard,.dtile,.npcard,.vcard,.aicard,.sbreq,.in-range,.side,.dvsec,.npteam,
.admin-card[style],.datecard{
  background:var(--g-fill)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-line)!important;box-shadow:var(--g-sh)!important;color:var(--ink)}
.card,.log,.in-card,.dcard,.npcard,.vcard,.tbl,.dvsec,.npteam{border-radius:22px!important}
.dvchips button[aria-pressed=true]{background:rgba(255,255,255,.92);color:var(--dark);border-color:transparent}
.dvbar span{border-right-color:rgba(10,12,16,.55)}
.dtile{border-radius:22px!important}
.stat,.sumgrid div{border-radius:18px!important}
.datecard{border-radius:0!important;box-shadow:none!important;border-width:0 0 1px!important;background:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
/* a soft shine across the top-left of each card */
.dcard,.dtile,.card,.in-card,.npcard,.vcard,.stat{position:relative}
.dcard::before,.dtile::before,.card::before,.in-card::before,.npcard::before,.vcard::before,.stat::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(130% 70% at 0% 0%,rgba(255,255,255,.13),rgba(255,255,255,0) 55%)}
.dcard > *,.dtile > *,.card > *,.in-card > *,.npcard > *,.vcard > *,.stat > *{position:relative}

/* inner boxes: a lighter tint inside the glass */
.apdetails,.apdetails[style],.sbrep,.replink,.ppcard,.vwhy,.vfinal,.npimp,.sugev,.aic-to,.mfakey,.apbox,.sbafter.back{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.1);color:var(--ink)}
.apbox[style]{background:rgba(48,209,88,.1)!important;border-color:rgba(48,209,88,.3)!important}
.sbmatch,.sbmatch[style]{background:rgba(255,179,64,.12)!important;border:1px solid rgba(255,179,64,.26);color:var(--ink)}
.sbmatch[style*="E8F0FD"]{background:rgba(10,132,255,.14)!important;border-color:rgba(10,132,255,.3)}
.sbafter{background:rgba(48,209,88,.14);color:var(--ok);border:1px solid rgba(48,209,88,.26)}
.sbdup{background:rgba(255,69,58,.14)!important;color:var(--ink)!important;border:1px solid rgba(255,69,58,.3)}
.npsug{background:rgba(10,132,255,.14);color:var(--ink-2)}
.npsug button{background:rgba(255,255,255,.1);border-color:rgba(10,132,255,.45);color:#8CC8FF}
.sugcard{border-left:4px solid #7D7BFF!important}

/* ---------- top bar ---------- */
.bar{background:rgba(14,16,20,.35)!important;-webkit-backdrop-filter:saturate(170%) blur(22px);backdrop-filter:saturate(170%) blur(22px);border-bottom:1px solid rgba(255,255,255,.1)!important}
.bar .in{color:#fff}
.appid{color:#fff}
.appid b{font:800 18px/1 var(--display)!important;letter-spacing:.04em;text-transform:uppercase!important}
.appid small{color:var(--ink-3)}
.appid img{border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 22px -6px rgba(237,28,36,.75)}
.bar .me{color:var(--ink-2)}
.bar .me b{color:#fff}
.role{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.16)}
.bar .btn.ghost{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important}
.bar .btn.ghost:hover{background:rgba(255,255,255,.18)!important}
.gsearch{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:0 8px 0 14px;color:var(--ink-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.gsearch input{color:#fff!important}
.gsearch input::placeholder{color:var(--ink-3)}
.gsearch kbd{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:var(--ink-2);border-radius:7px}
.gsres{background:linear-gradient(160deg,rgba(44,48,58,.985),rgba(24,26,32,.99))!important;border:1px solid var(--g-line)!important;border-radius:18px;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.gsres button{color:#fff}
.gsres button.on,.gsres button:hover{background:rgba(255,255,255,.14)!important;color:#fff}

/* ---------- side menu ---------- */
.side{border-radius:26px!important;padding:10px!important}
.side .tab{color:var(--ink-2);font:600 15px/1.2 var(--body);border-radius:14px;padding:8px 10px}
.side .tab:hover{background:rgba(255,255,255,.08);color:#fff}
.side .tab[aria-selected=true]{background:linear-gradient(180deg,#fff,#E8EBF0)!important;color:var(--dark)!important;box-shadow:inset 0 -1px 0 rgba(0,0,0,.08),0 8px 20px -8px rgba(0,0,0,.6)!important}
.side .tab[aria-selected=true] .ic{box-shadow:none}
.side .tab[aria-selected=true] .badge{background:var(--brand);color:#fff}
.side .ic{border-radius:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.15)}
.sgrp{color:var(--ink-3);font:700 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase!important}
.sfoot{border-top-color:rgba(255,255,255,.12)}
.sfoot a{color:var(--ink-3)}.sfoot a:hover{color:#fff}
.badge{background:var(--brand);box-shadow:0 0 12px rgba(237,28,36,.6)}

/* ---------- type ---------- */
h1{font-family:var(--display)}
.dhero h1{font:800 48px/1 var(--display)!important;letter-spacing:.2px;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.dhero p{color:var(--ink-2);font-weight:600}
h2{font:800 28px/1.1 var(--display);letter-spacing:.2px}
.dcard h3,.in-card h3,.apbox h3,.of-card h3,.card > h3,.sugwrap h2{font:700 19px/1.1 var(--display)!important;letter-spacing:.05em;text-transform:uppercase!important}
.ppcard h3,.npcard h3,.vcard h3{font:700 19px/1.15 var(--display)!important;letter-spacing:.02em}
.muted,.small.muted{color:var(--ink-3)}
.lnk{color:#8CC8FF;font-weight:600}
.lnk:hover{color:#fff}
.linkish{color:#fff}

/* ---------- buttons ---------- */
.btn{background:linear-gradient(180deg,#FF4A50,#D0121A);color:#fff;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -12px rgba(237,28,36,.9)}
.btn:hover{background:linear-gradient(180deg,#FF5A60,#B3141A)}
.btn.q,.btn.danger,.qa,.al button,.rem .rb button,.aihb,.aichips button,.npsug button,.npos2,.btn.ghost{background:rgba(255,255,255,.1)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.btn.q:hover,.qa:hover,.al button:hover,.rem .rb button:hover,.aihb:hover,.aichips button:hover{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.3)!important}
.btn.danger{color:#FF8A82!important;border-color:rgba(255,69,58,.4)!important}
.btn.danger:hover{background:rgba(255,69,58,.2)!important}
.btn.dark,.al .abtns .rep{background:rgba(255,255,255,.92)!important;color:var(--dark)!important;border-color:transparent!important}
.btn.dark:hover,.al .abtns .rep:hover{background:#fff!important}
.qa{padding:9px 16px 9px 10px;font-weight:600}
.qa span{background:linear-gradient(180deg,#FF4A50,#D0121A);box-shadow:0 0 10px rgba(237,28,36,.6)}
.dquick .qa:first-child{background:linear-gradient(180deg,#FF4A50,#D0121A)!important;border-color:rgba(255,130,130,.5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 28px -10px rgba(237,28,36,.9)}
.dquick .qa:first-child span{background:rgba(255,255,255,.25);box-shadow:none}
.switch{background:rgba(255,255,255,.2)}
.switch[aria-checked=true]{background:#30D158;box-shadow:0 0 14px rgba(48,209,88,.45)}

/* segmented controls */
.segbar,.in-range,.sort,.npos2{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:999px!important;padding:3px!important}
.segbar button,.in-range button,.npos2 button{color:var(--ink-2)!important;border-radius:999px!important}
.segbar button[aria-pressed=true],.in-range button[aria-pressed=true],.npos2 button[aria-pressed=true]{background:rgba(255,255,255,.92)!important;color:var(--dark)!important;box-shadow:0 4px 12px -4px rgba(0,0,0,.5)!important}
.in-range button:not([aria-pressed=true]):hover{background:rgba(255,255,255,.1)!important;color:#fff!important}

/* ---------- forms ---------- */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],input[type=time],input[type=url],input[type=tel],select,textarea,
.apbox textarea,.pastebox textarea,.vyours textarea{
  background:rgba(0,0,0,.22)!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:12px;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.4)}
input:focus,select:focus,textarea:focus{border-color:rgba(108,182,255,.8)!important;box-shadow:0 0 0 4px rgba(10,132,255,.22)!important}
select option,select optgroup{background:#23262E;color:#fff}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}
.login label,.form label{color:var(--ink-2)}
.aiform{background:rgba(0,0,0,.25)!important;border-color:rgba(255,255,255,.16)!important}
.aiform textarea{background:none!important;border:0!important;box-shadow:none!important}
.gsearch input,.aiform textarea{background:none!important;border:0!important;box-shadow:none!important}
.msg.info{background:rgba(255,255,255,.08);color:var(--ink-2)}
.msg.err{background:var(--bad-bg);color:var(--bad)}.msg.ok{background:var(--ok-bg);color:var(--ok)}
.drop{border-style:dashed!important;border-width:2px!important}

/* ---------- tables and lists ---------- */
.tbl{border-collapse:separate;border-spacing:0}
.tbl th{background:rgba(255,255,255,.06)!important;color:var(--ink-3);border-bottom:1px solid rgba(255,255,255,.12)}
.tbl td{border-bottom:1px solid rgba(255,255,255,.08)}
.tbl tbody tr:hover td{background:rgba(255,255,255,.04)}
.tbl tr.pending td{background:rgba(255,179,64,.08)}
.le.hid{background:rgba(255,255,255,.03)}
.dl-r,.da-r,.al,.rem,.pprow,.elrow,.vline,.vdone,.trr,.of-kv td,.of-tbl tr{border-color:rgba(255,255,255,.09)!important}
.dl-r .pill{background:rgba(255,255,255,.1);color:var(--ink-2)}
.dl-r .pill.bad{background:var(--bad-bg);color:var(--bad)}.dl-r .pill.ok{background:var(--ok-bg);color:var(--ok)}
.da-r .av{background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.1));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.rank li i{background:rgba(237,28,36,.55);opacity:.45}
.elbar i{background:rgba(255,255,255,.1)}.elbar i b{background:linear-gradient(90deg,#FF6A6F,#ED1C24)}
.elrow{color:#fff}.elrow:hover .q{color:#8CC8FF}
.elrow .tg{background:rgba(255,255,255,.1);color:var(--ink-2)}.elrow .tg.miss{background:var(--warn-bg);color:var(--warn)}
.tros{border-top-color:rgba(255,255,255,.5)}
.trr .xb:hover{background:var(--bad-bg)}
.sug{background:linear-gradient(160deg,rgba(44,48,58,.985),rgba(24,26,32,.99))!important;border:1px solid var(--g-line)!important;-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)}
.sug button{background:none!important;color:#fff;border-top-color:rgba(255,255,255,.08)}
.sug button.on,.sug button:hover{background:rgba(255,255,255,.12)!important}
.vpick .dl-r:hover,.vpick .dl-r.sel{background:rgba(255,255,255,.1)}
.chglist li.add{background:rgba(48,209,88,.14)}.chglist li.rem{background:rgba(255,69,58,.14)}
.tl:before{background:rgba(255,255,255,.18)}
.tle:before{border-color:#2A2D35}

/* tags and pills */
.tag,.tstate.none,.sbst.returned,.txk.note,.vtag.done,.tsp.off,.npchip{background:rgba(255,255,255,.1);color:var(--ink-2)}
.tag.ok,.tstate.ok,.sbst.approved,.txk.added,.fitpill.ok,.vtag.ok,.tsp.on{background:var(--ok-bg);color:var(--ok)}
.tag.warn,.tstate.at,.sbst.pending,.txk.division,.vtag.split,.npchip.w{background:var(--warn-bg);color:var(--warn)}
.tag.bad,.tstate.bad,.txk.removed,.fitpill.bad,.vtag.wait{background:var(--bad-bg);color:var(--bad)}
.kindtag,.gk,.vadm{background:rgba(255,255,255,.9);color:var(--dark)}
.kindtag[style]{color:#fff}
.vwho{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:var(--ink-3)}
.vwho.done{background:rgba(255,255,255,.9);border-color:transparent;color:var(--dark)}
.mfastep > b{background:rgba(255,255,255,.9);color:var(--dark)}
.online{color:var(--ok)}

/* rating chips: the light ones keep dark numbers, and black gets an edge so it shows on glass */
.r1,.r2,.r3,.r4,.rsel button.cur.r1,.rsel button.cur.r2,.rsel button.cur.r3,.rsel button.cur.r4{color:var(--dark)!important}
.r7,.rsel button.cur.r7{box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.rt{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.rt.prov{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.5)!important;color:var(--ink-2)!important}
.rsel button:not(.cur){background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.16)!important;color:var(--ink-3)!important}
.rsel button:not(.cur):hover{border-color:#fff!important;color:#fff!important}
.rsel button.cur{border-color:#fff!important}
.rsel button.cur.r1{background:var(--r1)!important}.rsel button.cur.r2{background:var(--r2)!important}.rsel button.cur.r3{background:var(--r3)!important}.rsel button.cur.r4{background:var(--r4)!important}
.rsel button.cur.r5{background:var(--r5)!important}.rsel button.cur.r6{background:var(--r6)!important}.rsel button.cur.r7{background:var(--r7)!important}
.nprt button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 3px rgba(108,182,255,.45)}

/* ---------- dashboard ---------- */
.dtile{padding:20px 20px 18px!important;min-height:150px;color:#fff}
button.dtile:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3)!important}
#p-dash .dtile::after{content:"";position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;
  background:var(--tic) center/19px no-repeat,radial-gradient(circle,var(--tc2) 0%,var(--tc3) 100%);box-shadow:0 0 0 1px var(--tc4),0 0 26px var(--tc3)}
#p-dash .dtiles .dtile:nth-child(1){--tc2:rgba(255,179,64,.32);--tc3:rgba(255,179,64,.14);--tc4:rgba(255,179,64,.45);
  --tic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC977' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l1 2h3v14H5V6h3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
#p-dash .dtiles .dtile:nth-child(2){--tc2:rgba(255,149,0,.32);--tc3:rgba(255,149,0,.14);--tc4:rgba(255,149,0,.45);
  --tic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB45C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V4M6 4h11l-2.5 4L17 12H6'/%3E%3C/svg%3E")}
#p-dash .dtiles .dtile:nth-child(3){--tc2:rgba(10,132,255,.32);--tc3:rgba(10,132,255,.14);--tc4:rgba(10,132,255,.5);
  --tic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236CB6FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
#p-dash .dtiles .dtile:nth-child(4){--tc2:rgba(255,69,58,.32);--tc3:rgba(255,69,58,.14);--tc4:rgba(255,69,58,.5);
  --tic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E")}
.dt-l{color:var(--ink-2);font-size:13.5px}
#p-dash .dt-l{margin-top:46px}
.dtile b{font:800 46px/1 var(--display)!important;letter-spacing:.3px;color:#fff}
.dtile b.hot{color:#FF6A6F!important;text-shadow:0 0 22px rgba(237,28,36,.55)}
.dtile b.ok{color:#5BE38A!important}
.dt-s{color:var(--ink-3)}
.dalerts{background:linear-gradient(100deg,rgba(255,69,58,.2),rgba(255,255,255,.06) 55%)!important;border-color:rgba(255,120,110,.3)!important}
.dalerts .dch .small{color:var(--ink-3)}
.al .ai{color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.al .ai.bad{background:#FF453A;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 16px rgba(255,69,58,.55)}
.al .ai.warn{background:#FF9500;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 16px rgba(255,149,0,.5)}
.al .ai.info{background:#8E8E93}
.alst{color:var(--ok)}.alok{color:var(--ok)}
.dvis{height:120px!important;gap:10px!important}
.dvis i{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.08))!important;border:1px solid rgba(255,255,255,.2);border-radius:12px 12px 7px 7px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.dvis i.today{background:linear-gradient(180deg,#FF6A6F 0%,#ED1C24 55%,#A80F16 100%)!important;border-color:rgba(255,140,140,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 30px -4px rgba(237,28,36,.8),0 0 70px -10px rgba(237,28,36,.6)!important}
.dvis-x{color:var(--ink-3)}
.dnums b{font:800 26px/1.1 var(--display)!important;color:#fff}
.dnums div{color:var(--ink-3)}
.rem small.late{color:var(--bad)}
.dpol .btn{white-space:nowrap}

/* ---------- other pages ---------- */
/* tables inside a card sit flat in it (one layer of glass, not two) */
.card .tbl,.in-card .tbl,details.list .tbl,.sheet .tbl{background:rgba(0,0,0,.12)!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:14px!important}
.tbl[style*="border:0"]{border:0!important;border-radius:0!important;background:none!important}
input[type=file]{color:var(--ink-2)}
input[type=file]::file-selector-button{font:600 13px var(--body);color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 14px;margin-right:10px;cursor:pointer}
.stat b,.sumgrid b{font-family:var(--display)!important;font-weight:800!important}
.dl.up{color:var(--ok)}.dl.down{color:var(--bad)}
.bars{border-bottom-color:rgba(255,255,255,.4)}
.bars .b{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.12))}
.bars .b:hover,.bars .b:focus-visible,.bars .b.on{background:linear-gradient(180deg,#FF6A6F,#ED1C24);box-shadow:0 0 18px rgba(237,28,36,.6)}
.bars .b.zero{background:rgba(255,255,255,.1)}
.hours{border-bottom-color:rgba(255,255,255,.4)}
.hours i{background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12))}
.hours i.top{background:linear-gradient(180deg,#FF6A6F,#ED1C24);box-shadow:0 0 14px rgba(237,28,36,.6)}
.vbarw{background:rgba(255,255,255,.08)}
.prog{background:rgba(255,255,255,.12)}
.of-key i.hollow{background:transparent}
.admin-card[style]{color:#fff!important}
.admin-card:not([style]){background:linear-gradient(120deg,rgba(237,28,36,.26),rgba(255,255,255,.06))!important;border:1px solid rgba(255,120,120,.28);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.raprev{border-color:rgba(255,255,255,.16)}
details.list summary{color:#fff}

/* team editor's score box */
.tm-score{background:linear-gradient(170deg,rgba(255,255,255,.12),rgba(0,0,0,.25))!important;border:1px solid rgba(255,255,255,.16);box-shadow:var(--g-sh)}
.tm-score .dn{color:var(--ink-2)}
.tm-meter{background:rgba(255,255,255,.12)}
.tm-meter span{border-right-color:rgba(0,0,0,.4)}

/* ---------- pop-up windows ---------- */
.modal{background:rgba(6,8,12,.45)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
.sheet{background:var(--g-solid)!important;color:#fff;border:1px solid var(--g-line);border-radius:26px!important;
  -webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 100px -20px rgba(0,0,0,.75)!important}
.sheet .x{background:rgba(255,255,255,.12)!important;color:#fff;border:1px solid rgba(255,255,255,.14)}
.sheet .x:hover{background:rgba(255,255,255,.2)!important}
.toast{background:rgba(255,255,255,.94);color:var(--dark);box-shadow:0 14px 40px -10px rgba(0,0,0,.6)}

/* ---------- sign-in screens ---------- */
.login{margin-top:12vh!important;border-radius:28px!important;padding:30px!important}
.login h1{font:800 38px/1 var(--display)!important;text-transform:uppercase!important;letter-spacing:.02em}

/* ---------- side menu: a slim icon strip that opens when the cursor rests on it (computers only; staff.html adds .open) ---------- */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  #app:not([hidden]){grid-template-columns:72px minmax(0,1fr)!important;column-gap:26px!important}
  .side{width:72px;overflow:hidden;z-index:40;padding:10px 10px!important;
    transition:width .28s cubic-bezier(.2,.8,.2,1) .15s,background .28s ease .15s,box-shadow .28s ease .15s}
  .side.open,.side:has(:focus-visible){width:252px;transition-delay:.04s;
    background:linear-gradient(160deg,rgba(60,64,76,.86),rgba(30,32,40,.9))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 30px 70px -18px rgba(0,0,0,.8)!important}
  .side .tab{position:relative;width:100%;white-space:nowrap;gap:13px}
  .side .lb,.sgrp,.sfoot{transition:opacity .15s ease}
  .side .lb{overflow:hidden;text-overflow:ellipsis}
  .side .sgrp{white-space:nowrap;position:relative}
  .side .sfoot{min-width:226px}
  /* closed: icons only, a thin line for each group heading, counts sit on the icons */
  .side:not(.open):not(:has(:focus-visible)) .lb,.side:not(.open):not(:has(:focus-visible)) .sfoot{opacity:0}
  .side:not(.open):not(:has(:focus-visible)) .sgrp{color:transparent}
  .side:not(.open):not(:has(:focus-visible)) .sgrp::after{content:"";position:absolute;left:10px;width:28px;bottom:6px;height:1px;background:rgba(255,255,255,.22)}
  .side:not(.open):not(:has(:focus-visible)) .tab .badge{position:absolute;top:2px;left:30px;min-width:17px;height:17px;padding:0 4px;font-size:10.5px}
  .side:not(.open):not(:has(:focus-visible)) .tab[aria-selected=true]{width:48px}
  .side.open .lb,.side:has(:focus-visible) .lb,.side.open .sfoot,.side:has(:focus-visible) .sfoot{opacity:1;transition-delay:.12s}
}
@media (min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.side{transition:none!important}}

/* ---------- phones: the bottom bar and the More panel (layout is in staff.html) ---------- */
@media (max-width:900px), (hover:none) and (pointer:coarse) and (max-height:520px){
  .bar{background:rgba(8,9,12,.88)!important}
  .side{background:linear-gradient(160deg,rgba(40,43,52,.94),rgba(18,20,26,.97))!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    border-color:rgba(255,255,255,.1)!important;box-shadow:0 -10px 30px -12px rgba(0,0,0,.7)!important}
  .side .tab,.side .smore{color:rgba(255,255,255,.6)!important}
  .side .tab[aria-selected=true],.side .smore[aria-selected=true]{background:none!important;color:#fff!important;box-shadow:none!important}
  .side .tab[aria-selected=true] .ic,.side .smore[aria-selected=true] .ic{box-shadow:0 0 0 2px #fff,0 0 16px rgba(255,255,255,.35)!important}
  .side .tab .badge,.side .smore .badge{background:var(--brand)!important;color:#fff!important}
  .msheet{background:linear-gradient(160deg,rgba(52,56,66,.97),rgba(24,26,32,.98))!important;border:1px solid rgba(255,255,255,.14);color:var(--ink);box-shadow:0 24px 60px -10px rgba(0,0,0,.8)}
  .msgrid button{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#fff}
  .msgrid button[aria-current=true]{background:rgba(255,255,255,.92);color:var(--dark);box-shadow:none}
  .msgrid .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.15)}
  .msgrid .badge{background:var(--brand);color:#fff}
  .mback{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
}

/* ---------- phones and small screens ---------- */
@media (max-width:900px){
}
@media (max-width:640px){
  .dhero h1{font-size:36px!important}
  .dtile{min-height:128px;padding:14px 14px 14px!important}
  #p-dash .dtile::after{top:14px;right:14px;width:34px;height:34px;background-size:16px,auto}
  .dt-l{font-size:12.5px}
  #p-dash .dt-l{margin-top:38px}
  .dtile b{font-size:36px!important}
  .login{margin-top:6vh!important;padding:22px!important}
}

/* Appeal votes: the appeal's details on each vote card, and the "use the vote" row in the appeal window */
.vappeal{background:rgba(255,149,0,.13)!important;border:1px solid rgba(255,176,80,.38)!important;color:var(--ink)}
.vappeal .vad{color:var(--ink-2)}.vappeal .vam{color:var(--ink-3)}
.linkbtn{color:var(--ink)}
.apuse{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.1);color:var(--ink)}
.vtag.appeal{background:rgba(255,149,0,.2);color:#FFC27A}
/* team logins */
.lgchip{background:rgba(255,255,255,.1);color:var(--ink-2)}
.lg-pick{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.lg-ready .lgr,.lg-pick h4{border-color:rgba(255,255,255,.1)}