/* Sthenos UI, 2026 rebuild. Visual layer only: loaded after every other stylesheet, it restyles the existing markup.
   Reference direction: broadcast-grade sports-data identity (deep navy field, light large display type, pill actions).
   Palette: Royal #0042AC and Signal #00D3FB as base, Pitch #83FD80 for actions and details;
   added Ink, Deep, Frost, Mist for surfaces and text, Amber and Coral for medical states. */

:root{
  --ink:#00102E;--deep:#001A45;--royal:#0042AC;--royal-2:#0B55CC;--signal:#00D3FB;--pitch:#83FD80;--pitch-hi:#A9FFA6;
  --frost:#EAF4FF;--mist:#9AB3DB;--amber:#FFC25C;--coral:#FF7E73;
  --bg:var(--ink);--panel:#011D4C;--surface-raised:#0A2C66;--text:var(--frost);--muted:var(--mist);
  --line:rgba(122,170,255,.17);--line-strong:rgba(0,211,251,.38);--glass:rgba(255,255,255,.055);--glass-2:rgba(255,255,255,.09);
  --field:rgba(0,8,30,.55);--lime:var(--pitch);--cyan:var(--signal);--gold:var(--amber);--accent:var(--pitch);--on-accent:var(--ink);
  --focus:var(--signal);--blue:var(--royal);
  --panel-fill:linear-gradient(180deg,rgba(14,52,118,.52),rgba(1,29,76,.62));
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 24px 48px -28px rgba(0,4,18,.85);
  --font-display:'Commissioner',system-ui,sans-serif;--font-body:'Fira Sans',system-ui,sans-serif;
  --r-xs:8px;--r-sm:12px;--r-md:18px;--r-lg:26px;--radius-sm:12px;--radius-md:18px;--radius-lg:26px;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-slide:cubic-bezier(.68,-.2,.15,.98);--motion:240ms;
  --nav-w:252px;
}
:root[data-theme=light]{
  --bg:#F1F6FF;--panel:#FFFFFF;--surface-raised:#E5EEFF;--text:#00163F;--muted:#3B5687;
  --line:rgba(0,66,172,.14);--line-strong:rgba(0,66,172,.35);--glass:rgba(0,66,172,.045);--glass-2:rgba(0,66,172,.09);
  --field:#FFFFFF;--cyan:#0077A8;--lime:#1C8A3A;--focus:#0042AC;--gold:#A86500;
  --panel-fill:linear-gradient(180deg,#FFFFFF,#F9FBFF);
  --shadow:0 1px 2px rgba(0,30,90,.06),0 18px 40px -26px rgba(0,30,90,.35);
}

/* ---------- base ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 0}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(900px 520px at 78% -8%,rgba(0,211,251,.13),transparent 60%),
   radial-gradient(760px 600px at 18% 110%,rgba(0,66,172,.38),transparent 62%),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900' fill='none' stroke='%2300D3FB' stroke-opacity='.07' stroke-width='1.5'%3E%3Ccircle cx='900' cy='0' r='210'/%3E%3Ccircle cx='900' cy='0' r='6' fill='%2300D3FB' fill-opacity='.12'/%3E%3Cpath d='M690 0v900M900 380H560V0'/%3E%3C/svg%3E") right top/720px no-repeat,
   var(--bg)}
:root[data-theme=light] body::before{background:radial-gradient(900px 520px at 78% -8%,rgba(0,211,251,.16),transparent 60%),radial-gradient(760px 600px at 18% 110%,rgba(0,66,172,.10),transparent 62%),var(--bg)}
::selection{background:var(--pitch);color:var(--ink)}
*{scrollbar-width:thin;scrollbar-color:rgba(122,170,255,.35) transparent}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);letter-spacing:-.012em}
h1{font-weight:300}h2{font-weight:500}h3{font-weight:600}
p{font-size:15px;color:var(--muted)}
small,.subtle,.muted{font-size:13px;color:var(--muted)}
a{color:var(--cyan);text-underline-offset:3px}
b,strong{font-weight:600}
.ui-icon{stroke-width:1.6}
:focus-visible{outline:2px solid var(--focus)!important;outline-offset:3px!important;border-radius:6px}

/* ---------- shell: sidebar ---------- */
.sidebar{width:var(--nav-w);padding:28px 16px 20px;color:#EAF4FF;
  background:
   radial-gradient(420px 260px at 0 0,rgba(0,211,251,.22),transparent 70%),
   linear-gradient(180deg,#0042AC 0%,#00338A 46%,#00225E 100%);
  border-right:1px solid rgba(0,211,251,.22);box-shadow:24px 0 60px -40px rgba(0,0,0,.8)}
.shell{margin-left:var(--nav-w)}
.brand{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:.16em;padding:0 10px;color:#fff;line-height:1}
.brand span{color:var(--pitch)!important}
.brand small{display:block;margin-top:8px;font:500 10.5px/1.2 var(--font-body);letter-spacing:.22em;color:rgba(234,244,255,.62)!important}
.workspace-label{margin:18px 10px 18px;padding:5px 10px;width:max-content;border-radius:999px;font:600 10.5px/1.2 var(--font-body);letter-spacing:.12em;color:var(--ink)!important;background:var(--signal)}
#nav{position:relative;display:flex;flex-direction:column;gap:2px}
#nav a,.sidebar nav a{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;border-radius:14px;
  font:500 14.5px/1.2 var(--font-display);color:rgba(234,244,255,.78);text-decoration:none;background:transparent;box-shadow:none;
  transition:color var(--motion) var(--ease-out),background var(--motion) var(--ease-out)}
#nav a i{display:flex;opacity:.8}
#nav a i .ui-icon{width:20px;height:20px}
#nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
#nav a.active{color:var(--ink);background:var(--pitch);box-shadow:0 10px 26px -10px rgba(131,253,128,.55)}
#nav a.active i{opacity:1}
body.ux-ready #nav a.active{background:transparent;box-shadow:none}
body.ux-ready #nav a.active:hover{background:transparent}
.ux-nav-indicator{position:absolute;left:0;right:0;top:0;height:44px;width:auto!important;display:block!important;margin:0!important;border-radius:14px;background:var(--pitch);z-index:0;pointer-events:none;
  box-shadow:0 10px 26px -10px rgba(131,253,128,.6);transition:transform .5s var(--ease-slide),height .5s var(--ease-slide),opacity .2s}
.sidebar-bottom{border-top:1px solid rgba(255,255,255,.14)}
/* icons for the medical links that other scripts add without one */
#nav a[href="#academies"]::before,#nav a[href="#workspace"]::before,#nav a[href="#med-reports"]::before,#nav a[href="#med-rtp"]::before,#nav a[href="#medical-center"]::before,#nav a[href="#approvals"]::before,#nav a[href="#load-growth"]::before{content:"";width:20px;height:20px;flex-shrink:0;background:currentColor;opacity:.8;-webkit-mask:var(--ux-ico) center/20px no-repeat;mask:var(--ux-ico) center/20px no-repeat}
#nav a[href="#workspace"]{--ux-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-5 4 10 2-5h6'/%3E%3C/svg%3E")}
#nav a[href="#med-reports"]{--ux-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l4 4v16H6zM14 2v5h5M9 13h6M9 17h6M12 10v6'/%3E%3C/svg%3E")}
#nav a[href="#med-rtp"]{--ux-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4v-5h4v-5h4V5h4'/%3E%3C/svg%3E")}
#nav a[href="#medical-center"]{--ux-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v6h6v6h-6v6H9v-6H3V9h6z'/%3E%3C/svg%3E")}
#nav a[href="#approvals"]{--ux-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6zM8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
#nav a[href="#load-growth"]{--ux-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16M8 15l3-4 3 2 5-7'/%3E%3C/svg%3E")}
#nav a[href="#academies"]{--ux-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z'/%3E%3C/svg%3E")}
#nav a.active::before{opacity:1}
.device-status{margin:10px 40px 0;padding:0;font-size:12px}

/* ---------- shell: header ---------- */
header{position:sticky;top:0;z-index:30;height:72px;padding:0 40px;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--font-display);color:var(--ink);background:linear-gradient(135deg,var(--pitch),var(--signal));box-shadow:0 0 0 3px rgba(131,253,128,.18)}
.crumb{font:500 15px var(--font-display);color:var(--text);margin-right:auto;margin-left:14px}
.header-controls{gap:8px}
header select,header button,.ui-tools select,.ui-tools button{min-height:38px!important;height:38px;border-radius:999px!important;padding:0 14px;font:500 13px var(--font-body);
  background:var(--glass)!important;border:1px solid var(--line)!important;color:var(--text)!important}
header select:hover,header button:hover{border-color:var(--line-strong)!important;background:var(--glass-2)!important;filter:none}
header select:disabled{opacity:1;cursor:default}
.ui-tools button{width:38px;padding:0;display:grid;place-items:center}
.ui-tools .ui-icon{width:18px;height:18px}

/* ---------- pilot notice ---------- */
.notice{display:flex;gap:12px;align-items:baseline;margin:20px 40px 0;padding:11px 16px;border-radius:14px;border:1px solid var(--line);background:var(--glass);font-size:13px;line-height:1.55;color:var(--muted)}
.notice span{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;font:600 12px var(--font-body);color:var(--lime)!important}
.notice span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pitch);box-shadow:0 0 0 0 rgba(131,253,128,.6);animation:ux-ping 2.4s var(--ease-out) infinite}

/* ---------- main + page heading ---------- */
main{max-width:1320px;padding:36px 40px 88px;margin:0}
.heading,.coach-heading{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px;padding-bottom:28px}
.heading::after,.coach-heading::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--signal) 0,var(--pitch) 22%,var(--line) 48%,transparent 100%);transform-origin:0 50%}
.heading>div:first-child,.coach-heading>div:first-child{min-width:min(100%,420px);flex:1 1 0}
.heading h1,.coach-heading h1{margin:12px 0 12px;font-weight:300;font-size:clamp(34px,2.4vw + 18px,58px);line-height:1.04;letter-spacing:-.028em;max-width:20ch;text-wrap:balance}
.heading p,.coach-heading p{font-size:16px;line-height:1.6;max-width:62ch;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 11.5px/1.2 var(--font-body);letter-spacing:.16em;color:var(--cyan)!important}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--pitch)}
.heading .actions,.coach-heading>.tag{margin:0}
.heading>button,.heading>.actions{flex-shrink:0}

/* ---------- surfaces ---------- */
.panel,.session-builder,.method-panel,.coach-next,.welcome-hero,.library-hero,.medical-workspace>section{border-radius:var(--r-lg)}
.panel{position:relative;padding:28px;background:var(--panel-fill);border:1px solid var(--line);box-shadow:var(--shadow)}
.panel h2{font-size:21px;font-weight:500;letter-spacing:-.01em;margin:0 0 16px}
.panel h3{font-size:16px}
.panel-head{margin-bottom:18px}
.grid,.cd-row,.coach-today{gap:20px}
.callout{border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--lime) 30%,transparent);background:color-mix(in srgb,var(--lime) 8%,transparent);color:var(--text);padding:14px 16px}
.empty,.mh-empty,.plan-empty{border-radius:var(--r-md)!important;border:1px dashed var(--line-strong)!important;background:var(--glass)!important;color:var(--muted)}

/* hero: next session */
.coach-next{position:relative;overflow:hidden;padding:34px;border:1px solid rgba(0,211,251,.35);
  background:
   radial-gradient(420px 300px at var(--mx,85%) var(--my,0%),rgba(0,211,251,.28),transparent 70%),
   linear-gradient(140deg,#0B55CC 0%,#0042AC 40%,#012463 100%)!important;color:#EAF4FF;box-shadow:0 30px 60px -36px rgba(0,66,172,.9)}
.coach-next::after{content:"";position:absolute;right:-110px;top:50%;width:300px;height:300px;margin-top:-150px;border-radius:50%;border:1.5px solid rgba(131,253,128,.26);pointer-events:none}
.coach-next::before{content:"";position:absolute;right:40px;top:0;bottom:0;width:1.5px;background:linear-gradient(180deg,transparent,rgba(131,253,128,.24) 30%,rgba(131,253,128,.24) 70%,transparent);pointer-events:none}
.coach-next>*{position:relative;z-index:1}
.coach-next h2{font-weight:300;font-size:clamp(26px,1.4vw + 16px,36px);line-height:1.12;letter-spacing:-.02em;color:#fff;margin:16px 0 10px}
.coach-next p,.coach-next .cd-muted{color:rgba(234,244,255,.78)}
.coach-next .eyebrow{color:var(--pitch)!important}
.coach-next .eyebrow::before{background:var(--signal)}
:root[data-theme=light] .coach-next{background:linear-gradient(140deg,#0B55CC,#0042AC 60%,#012463)!important}

/* stat tiles */
.metrics{gap:16px}
.metric,.cd-count,.coach-summary a{position:relative;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel-fill);box-shadow:var(--shadow);padding:20px 22px;text-decoration:none;color:var(--text);
  transition:transform .45s var(--ease-out),border-color var(--motion)}
.metric::before,.coach-summary a::before{content:"";position:absolute;left:22px;top:0;width:28px;height:2px;border-radius:0 0 2px 2px;background:var(--signal)}
.metric:after{display:none}
.metric strong,.cd-count b,.coach-summary b,.hero-counts b,.plan-total b{font-family:var(--font-display);font-weight:200;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1}
.metric strong,.coach-summary b{display:block;font-size:44px;margin:10px 0 6px;color:var(--text)}
.cd-count{padding:16px}
.cd-count b{font-size:36px}
.cd-count.ok b{color:var(--lime)}.cd-count.rehab b{color:var(--amber)}.cd-count.out b{color:var(--coral)}
:root[data-theme=light] .cd-count.rehab b{color:#A86500}:root[data-theme=light] .cd-count.out b{color:#C0392B}
.metric span,.metric small,.coach-summary span,.cd-count span{font-size:13px;color:var(--muted)}
.coach-summary a:hover,.metric:hover{transform:translateY(-3px);border-color:var(--line-strong)}

/* shortcuts list */
.coach-shortcuts{gap:6px}
.coach-shortcuts a,.coach-shortcuts button{display:flex!important;align-items:center;gap:14px;width:100%;min-height:52px;padding:12px 16px;border-radius:14px!important;border:1px solid transparent!important;
  background:var(--glass)!important;color:var(--text)!important;font:500 15px var(--font-display);text-decoration:none;text-align:left;justify-content:flex-start;
  transition:background var(--motion),border-color var(--motion),padding .4s var(--ease-out)}
.coach-shortcuts span{font:500 12px var(--font-body);color:var(--cyan);font-variant-numeric:tabular-nums;min-width:22px}
.coach-shortcuts a:hover,.coach-shortcuts button:hover{background:var(--glass-2)!important;border-color:var(--line-strong)!important;padding-left:22px;filter:none}

/* ---------- buttons ---------- */
button,.btn,a.btn{border-radius:999px;min-height:44px;padding:0 20px;font:600 14px/1 var(--font-display);letter-spacing:.005em;
  background:var(--glass);border:1px solid var(--line);color:var(--text);cursor:pointer;
  transition:background var(--motion) var(--ease-out),border-color var(--motion),color var(--motion),box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
.btn,a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
button:hover,.btn:hover{filter:none;background:color-mix(in srgb,var(--signal) 14%,transparent);border-color:var(--line-strong)}
button:active,.btn:active{transform:scale(.97)}
button.primary,.btn.primary,.gate-actions button.primary{background:var(--pitch);border-color:var(--pitch);color:var(--ink);box-shadow:0 10px 24px -14px rgba(131,253,128,.9)}
button.primary:hover,.btn.primary:hover{background:var(--pitch-hi);border-color:var(--pitch-hi);color:var(--ink);box-shadow:0 14px 30px -12px rgba(131,253,128,.85)}
/* text roll on hover (single copy of the label, drawn twice with text-shadow) */
@media (hover:hover) and (min-width:761px) and (prefers-reduced-motion:no-preference){
  button.primary,.btn.primary{overflow:hidden;color:transparent!important;text-shadow:0 0 0 var(--ink),0 3em 0 var(--ink);transition:text-shadow .42s var(--ease-slide),background var(--motion),box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
  button.primary:hover,.btn.primary:hover{text-shadow:0 -3em 0 var(--ink),0 0 0 var(--ink)}
  button.primary:disabled{text-shadow:0 0 0 var(--ink)}
}
button:disabled,.btn[aria-disabled=true]{opacity:.42;cursor:not-allowed;box-shadow:none}
.text-button{background:none;border:0;color:var(--cyan);padding:0 4px;min-height:36px}
.text-button:hover{background:none;text-decoration:underline}

/* ---------- forms ---------- */
.field label,label.field{font:500 13px var(--font-body);color:var(--text)}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--field);color:var(--text);padding:10px 14px;font:400 15px var(--font-body);
  transition:border-color var(--motion),box-shadow var(--motion),background var(--motion)}
textarea{line-height:1.5;padding:12px 14px}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px rgba(0,211,251,.18)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2300D3FB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important}
select option{background:#011D4C;color:#EAF4FF}
:root[data-theme=light] select option{background:#fff;color:#00163F}
input[type=checkbox],input[type=radio]{accent-color:var(--pitch);width:18px;height:18px}
input[type=range]{accent-color:var(--pitch)}
fieldset{border-color:var(--line);border-radius:var(--r-sm)}

/* ---------- tags ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font:600 12px/1.3 var(--font-body);letter-spacing:.01em;border:1px solid transparent;
  background:color-mix(in srgb,var(--signal) 13%,transparent);color:var(--cyan);text-decoration:none}
a.tag:hover{border-color:var(--line-strong)}
.tag.lime{background:color-mix(in srgb,var(--pitch) 14%,transparent);color:var(--lime)}
.tag.amber{background:rgba(255,194,92,.14);color:var(--amber)}
.tag.red{background:rgba(255,126,115,.15);color:var(--coral)}
:root[data-theme=light] .tag.amber{color:#8A5300}:root[data-theme=light] .tag.red{color:#B42318}
.cd-pill.ok{background:rgba(131,253,128,.14);color:var(--lime)}
.cd-pill.rehab{background:rgba(255,194,92,.14);color:var(--amber)}
.cd-pill.out{background:rgba(255,126,115,.15);color:var(--coral)}

/* ---------- lists + tables ---------- */
.list-item{padding:16px 4px;border-bottom:1px solid var(--line);transition:background var(--motion),padding .35s var(--ease-out)}
.list-item strong{font:500 15.5px var(--font-display);color:var(--text)}
.list-item p{font-size:13px}
.tablewrap{border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--bg) 40%,transparent)}
table{font-size:14px;font-variant-numeric:tabular-nums}
th{font:500 12.5px var(--font-body);color:var(--muted);background:var(--glass);position:sticky;top:0}
td,th{padding:13px 14px;border-bottom:1px solid var(--line)}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--glass)}
tbody tr:last-child td{border-bottom:0}

/* ---------- schedule ---------- */
.session{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--line)}
.session:last-child{border-bottom:0}
.date-box{display:grid;place-items:center;align-content:center;width:62px;height:62px;border-radius:16px;flex-shrink:0;
  font:300 26px/1 var(--font-display);color:var(--ink)!important;background:linear-gradient(160deg,var(--pitch),#4FE4B6)!important}
.date-box small{display:block;font:600 11px var(--font-body);color:rgba(0,16,46,.7);margin-top:2px}
.session strong{font:500 16px var(--font-display)}
.session button{min-height:38px;padding:0 14px;font-size:13px}

/* ---------- dialog ---------- */
dialog{border-radius:var(--r-lg);border:1px solid var(--line);border-top-color:var(--line-strong);padding:30px;max-width:min(760px,calc(100vw - 32px));
  background:linear-gradient(180deg,#05285F,#011D4C 40%)!important;color:var(--text);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
:root[data-theme=light] dialog{background:#fff!important}
dialog::backdrop{background:rgba(0,8,26,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog[open]{animation:ux-pop .5s var(--ease-out) both}
dialog[open]::backdrop{animation:ux-fade .35s ease both}
.modal-top{align-items:flex-start;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.modal-top h2{font-weight:400;font-size:clamp(22px,1vw + 16px,30px);letter-spacing:-.02em;line-height:1.15;margin:0}
.modal-top p{margin:6px 0 0}
.modal-top>button{width:40px;height:40px;min-height:40px;padding:0;display:grid;place-items:center;font-size:15px}
.modal-top>button:hover{transform:rotate(90deg)}

/* ---------- toast ---------- */
#toast{border-radius:999px;padding:13px 22px;background:var(--pitch);color:var(--ink);font:600 14px var(--font-display);box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
  transform:translate(-50%,16px);transition:opacity .3s,transform .5s var(--ease-slide)}
#toast.show{transform:translate(-50%,0)}

/* ---------- library ---------- */
.library-hero,.welcome-hero{position:relative;overflow:hidden;border:1px solid rgba(0,211,251,.3)!important;
  background:radial-gradient(520px 320px at 100% 0,rgba(0,211,251,.25),transparent 65%),linear-gradient(140deg,#0B55CC,#0042AC 45%,#012463)!important;color:#EAF4FF}
.library-hero h1,.library-hero h2,.welcome-hero h1,.welcome-hero h2{color:#fff;font-weight:300;letter-spacing:-.025em}
.library-hero p,.welcome-hero p{color:rgba(234,244,255,.8)}
.hero-counts b{font-size:40px;color:var(--pitch)}
.category-tabs{gap:8px}
.category-tabs button{border-radius:999px;font-size:13.5px}
.drill-card{border-radius:var(--r-md)!important;border:1px solid var(--line)!important;background:var(--panel-fill)!important;overflow:hidden;
  transition:transform .55s var(--ease-out),border-color .3s,box-shadow .55s var(--ease-out)}
.drill-card:hover{transform:translateY(-5px);border-color:var(--line-strong)!important;box-shadow:0 30px 50px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,211,251,.12)}
.drill-visual{overflow:hidden}
.drill-visual svg,.drill-visual .pitch-art{transition:transform .7s var(--ease-out)}
.drill-card:hover .drill-visual svg,.drill-card:hover .pitch-art{transform:scale(1.045)}
.drill-content h3{font:500 17px/1.25 var(--font-display)}
.visual-tag{border-radius:999px}
.favorite{border-radius:50%!important}
.drill-bottom button{border-radius:999px}
.session-builder{border-radius:var(--r-lg)!important;border:1px solid var(--line)!important;background:var(--panel-fill)!important}
.plan-number{border-radius:10px}

/* ---------- player cards ---------- */
.sa-card{transition:transform .6s var(--ease-out),filter .4s}
.sa-shield{transform-style:preserve-3d;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);will-change:transform}
.sa-card:hover .sa-shield{box-shadow:0 30px 60px -28px rgba(0,211,251,.45)}
.sa-actions button{border-radius:999px}
.player{border-radius:var(--r-md);transition:transform .5s var(--ease-out),border-color .3s}
.player:hover{transform:translateY(-4px);border-color:var(--line-strong)}

/* ---------- sign-in screens ---------- */
body.auth-gate .shell{background:radial-gradient(800px 500px at 50% 0,rgba(0,211,251,.16),transparent 70%)}
.gate-wrap{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel-fill);box-shadow:0 40px 90px -40px rgba(0,0,0,.95);padding:36px;animation:ux-pop .7s var(--ease-out) both}
.gate-wrap h1{font:300 34px/1.1 var(--font-display);letter-spacing:-.025em;margin:6px 0 10px}
.gate-role label,.gate-role-3 label{border-radius:999px}

/* ---------- phone ---------- */
@media (max-width:1150px){:root{--nav-w:212px}main{padding:30px 28px 80px}header{padding:0 28px}.notice{margin:18px 28px 0}}
@media (max-width:760px){
  .sidebar{width:auto;position:static;background:linear-gradient(180deg,#0042AC,#00338A);padding:14px 16px;box-shadow:none;border-right:0;border-bottom:1px solid rgba(0,211,251,.25)}
  #nav,.sidebar nav,.workspace-label,.sidebar-bottom{display:none!important}
  .brand{font-size:19px}.brand small{display:inline;margin:0 0 0 10px;font-size:9.5px}
  .device-status{margin:8px 16px 0}
  .shell{margin-left:0}
  header{position:static;height:auto;padding:12px 16px}
  header .avatar,.crumb{display:none!important}
  .header-controls{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .header-controls select{flex:1 1 40%;min-width:0}
  .header-controls>button{flex:0 0 auto;padding:0 12px}
  .ui-tools{margin-left:auto;flex-wrap:nowrap}
  .header-controls .ui-tools select{flex:0 0 auto;width:76px}
  .heading>div:first-child,.coach-heading>div:first-child{flex:none;min-width:0;width:100%}
  .notice{margin:14px 16px 0;display:block}
  main{padding:26px 16px 120px}
  .heading,.coach-heading{margin-bottom:26px;padding-bottom:22px}
  .heading h1,.coach-heading h1{font-size:clamp(30px,8vw,40px)}
  .panel,.coach-next{padding:20px;border-radius:20px}
  .metric strong,.coach-summary b{font-size:34px}
  dialog{border-radius:26px 26px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));max-width:100%}
  dialog[open]{animation:ux-sheet .55s var(--ease-out) both}
  .bottom-nav{background:color-mix(in srgb,#011D4C 86%,transparent)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:1px solid var(--line)!important;border-radius:22px 22px 0 0}
  .bottom-nav a,.bottom-nav button{border-radius:14px;background:transparent;border:0;min-height:52px;font:500 11px var(--font-body);color:var(--muted)}
  .bottom-nav .active,.bottom-nav [aria-current=page]{color:var(--ink)!important;background:var(--pitch)!important}
  :root[data-theme=light] .bottom-nav{background:rgba(255,255,255,.9)!important}
  #toast{transform:translate(-50%,16px)}
}

/* ---------- motion ---------- */
@keyframes ux-rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes ux-wipe{from{clip-path:inset(0 0 100% 0);transform:translateY(.25em)}to{clip-path:inset(0 0 -10% 0);transform:none}}
@keyframes ux-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ux-pop{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
@keyframes ux-sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes ux-fade{from{opacity:0}to{opacity:1}}
@keyframes ux-ping{0%{box-shadow:0 0 0 0 rgba(131,253,128,.55)}70%,100%{box-shadow:0 0 0 9px rgba(131,253,128,0)}}
@media (prefers-reduced-motion:no-preference){
  #app.ux-enter>*{animation:ux-rise .75s var(--ease-out) both;animation-delay:calc(var(--ux-i,0) * 70ms + 80ms)}
  #app.ux-enter .heading h1,#app.ux-enter .coach-heading h1{animation:ux-wipe .9s var(--ease-out) both .12s}
  #app.ux-enter .heading::after,#app.ux-enter .coach-heading::after{animation:ux-line 1.1s var(--ease-out) both .3s}
  .ux-pending{opacity:0;transform:translate3d(0,22px,0)}
  .ux-shown{animation:ux-rise .7s var(--ease-out) both;animation-delay:calc(var(--ux-d,0) * 55ms)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ux-nav-indicator{transition:none}
}
@media print{body::before{display:none}.ux-nav-indicator{display:none}}