/* ============================================================
   CortovaDrive TX — course player theme
   Design language: dark navy, electric blue glow, Texas red.
   Reskin for future Cortova courses by editing the variables below.
   ============================================================ */
:root{
  --bg0:#04070f;
  --bg1:#071021;
  --panel:rgba(11,21,44,.78);
  --panel-2:rgba(8,15,33,.92);
  --line:rgba(56,116,235,.22);
  --line-bright:rgba(72,148,255,.5);
  --blue:#2f7dff;
  --blue-deep:#1455e8;
  --cyan:#46c8ff;
  --green:#2ad17e;
  --red:#ff6b7c;
  --gold:#f5b73e;
  --text:#eaf3ff;
  --mut:#93a7c8;
  --dim:#7f95b8;
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-disp:'Sora',var(--font-ui);
  --font-digit:'Oxanium',var(--font-ui);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:var(--font-ui);
  color:var(--text);
  /* Cortova monogram — the mark on a seamless half-drop repeat, the way a
     fashion-house monogram canvas staggers its motifs. Opacity lives inside
     the SVG so the pattern rides as a background layer and never affects
     stacking or hit-testing. Regenerate with CortovaBrand/make-monogram.py. */
  background:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDEyOCAxMjgiPjxnIG9wYWNpdHk9IjAuMDcyIj48aW1hZ2UgeD0iMTMuMDAiIHk9IjcuMDAiIHdpZHRoPSIzOCIgaGVpZ2h0PSI1MCIgb3BhY2l0eT0iMC44NSIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFDWUFBQUF5Q0FZQUFBQXdlcWtqQUFBRVFFbEVRVlI0MnQzWmE2aGxZeGdIOE45YWU1MVRrb3dQR0pjMEtPWFdpVEZrbXBseUtSS2w1b1A3clJncG9SVENTSVpNVEV5SlJybE5vNWdQU0psb0NybGZaa3hSSkh5WXBJZzRNMmhvWnU5OWZKaG5UVSs3Yytic3M4L2FrcmZPaDczUFd1L3pmNS8vOC82Znl5N0dsazlvWUpXWWlMK0Q4UWlPeDIzWUdNOVU2TVF6ZlcwNG0xV0V3VzRZdkFhZjRsS000WFdzd3pGb3h6T3RZUU5yaGFFMjV1TXRQSU1qRXRBU2wyTUw3c2VjOEZveEhjQnlRTnJLTURBSEsvRVJ6a2hVbFdGY2ZMY3Y3c0pudURxZTZRUzRjcmJBTW0xZFhCYWV1QjBqeVZDeEY4OGVoV2Z4THBiRU85M1l0eGdFV043OFJHekE4eml5ejlqSmgrcGdNZDRKNnVkTnRrZlpCMjJ0Uk1jS2ZJTHo5bmJhUHZlckw4c1czSXJSVEcvWjV3a3Z4Q2JjalgybWk0OCtHU2hpbndPd0t1TDAzUHJBNVJTZ2F0cU94bnE4Z21ObmV1Vm5FQ0lkbkJ6eThoekdxaWxBamVEbThORCs0YmxhSkp0ZVJYaCtaOUI1RmZhcmVoNW9oV3MzWUVHNjdpM0RXL1grbzlpS083Qys2b21wWFRnc1FMWGpoV0dCbWdnbVdtRjNOUjdFT0lveThid0xGMkJ0QWxVTUNWUTdNYlFScDBkZUhhL3gxSW4xMEZEd0t3eDMxYlJWK0Q1aWVGMVBrdS9VSDY3RGZaaWJncndjSW0zdG9HMGxmazIyMnZtRkNnL2d3UGhITlNUYXFnRDFkcVN3VFVrdU9sTXA4ZmFHdEttMzFxb3JqQW8vWVJuT0RGQlZFdGhKVjVVcWdZa0d4Rkl5Vm45K0dzdnhZOWdwZW1rYlJxRllnMWdYZ2J3elNjem1LSVd1RFZCVmlyVnBWOVZBVU1PMmlOWFhjRS9VWFErSEJMVUNUSHNtRzFjTlVDaFNXQXVmWTJrUHZaMUJOcXdhRk5GT0tsMmt5c1Nnd0pwY3N3SXpXZHVsb1ZocmJKVkR6SWYvWDJEK3o4Q0tTZXI1L3d5VlJXcUVaNTE3bS9MWWFJRFppVVU0S0FDV2c5cG95bVBib2xkWWkvZWk5N3c0ZGUwekZ2TFpBcXU5Y1ZZMHJsY0drSGw0QVc5RVc5Wk9KZEMvQ213c3dOVDAxUm5nSEh5TVIxTXhXdlFUZjJXRHFhaWJET1pSd0FodUNZOWUzelBwS2FZRDFtbmdkcGZUREdNT3g1cUl3Y1hwOWxaVGJUalNNK2dZUnFkZEpVOHRpakhVazlHZFRVcHZpWXZ3UVQ5MWVBTUFzd09XUlVGNVE3SzdoOTR5MEMvR1RmZ3RWWnpEV3ExVTk4L0ZFMEh2a2l6T1pYTGhZemdKTHdYZ3R1R3VUTy9DR09TdHFjVzVTT1Awa2FqUkQ0bmh4bWdhNUE0NzJYZFRCeldPVmRsZzNUajhqRk5qNHROSzNwc1lJckM4OTEvWVVVNVN0M2VqcVRnZmwrRGJJVjZNckdrVEVVNG5ZSFU1eGNPMUxyMklVMkk4OUhlNlZkMkdKejd2cHdzNGpxcnNROGwveDUwNHJTRjY4K2pnRjl3WU4vTER4RXk3N0tNbHF3WHlpMFR2TndQUVcyZUFPajgvRlFuKzhTUWpldzViem5ERFRPOEs3RWk2MSszemdKdHhkb3kvZnVpUmpZR1NlS2IzanhnRkxNQ3JDWFI3a29sUC9jNzJHRUV0eEpzOVF0dElkWkZQLzVYZHZ3RXN4ZGVKM2hwUURmamw4UEpEU1piMm1wdkxXVnp6ZG8vaCtiZzNQRk4vLzJVQy90MU00ckpvNklmVVBEdzVManl6MWU3UitKOUpwL3FXbVg4QXlWRlJaVDBBYjlzQUFBQUFTVVZPUks1Q1lJST0iLz48aW1hZ2UgeD0iNzcuMDAiIHk9IjcxLjAwIiB3aWR0aD0iMzgiIGhlaWdodD0iNTAiIG9wYWNpdHk9IjAuODUiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQ1lBQUFBeUNBWUFBQUF3ZXFrakFBQUVRRWxFUVZSNDJ0M1phNmhsWXhnSDhOOWFlNTFUa293UEdKYzBLT1hXaVRGa21wbHlLUktsNW9QN3JSZ3BvUlRDU0laTVRFeUpScmxObzVnUFNKbG9DcmxmWmt4UkpIeVlwSWc0TTJob1p1OTlmSmhuVFUrN2MrYnNzOC9ha3JmT2g3M1BXdS96ZjUvLzgvNmZ5eTdHbGs5b1lKV1lpTCtEOFFpT3gyM1lHTTlVNk1RemZXMDRtMVdFd1c0WXZBYWY0bEtNNFhXc3d6Rm94ek90WVFOcmhhRTI1dU10UElNakV0QVNsMk1MN3NlYzhGb3hIY0J5UU5yS01EQUhLL0VSemtoVWxXRmNmTGN2N3NKbnVEcWU2UVM0Y3JiQU1tMWRYQmFldUIwanlWQ3hGODhlaFdmeExwYkVPOTNZdHhnRVdONzhSR3pBOHppeXo5akpoK3BnTWQ0SjZ1ZE50a2ZaQjIydFJNY0tmSUx6OW5iYVB2ZXJMOHNXM0lyUlRHL1o1d2t2eENiY2pYMm1pNDgrR1NoaW53T3dLdUwwM1ByQTVSU2dhdHFPeG5xOGdtTm5ldVZuRUNJZG5Cenk4aHpHcWlsQWplRG04TkQrNGJsYUpKdGVSWGgrWjlCNUZmYXJlaDVvaFdzM1lFRzY3aTNEVy9YK285aUtPN0MrNm9tcFhUZ3NRTFhqaFdHQm1nZ21XbUYzTlI3RU9Jb3k4YndMRjJCdEFsVU1DVlE3TWJRUnAwZGVIYS94MUluMTBGRHdLd3gzMWJSVitENWllRjFQa3UvVUg2N0RmWmliZ3J3Y0ltM3RvRzBsZmsyMjJ2bUZDZy9nd1BoSE5TVGFxZ0QxZHFTd1RVa3VPbE1wOGZhR3RLbTMxcW9yakFvL1lSbk9ERkJWRXRoSlY1VXFnWWtHeEZJeVZuOStHc3Z4WTlncGVta2JScUZZZzFnWGdid3pTY3ptS0lXdURWQlZpclZwVjlWQVVNTzJpTlhYY0UvVVhRK0hCTFVDVEhzbUcxY05VQ2hTV0F1Zlkya1B2WjFCTnF3YUZORk9LbDJreXNTZ3dKcGNzd0l6V2R1bG9WaHJiSlZEeklmL1gyRCt6OENLU2VyNS93eVZSV3FFWjUxN20vTFlhSURaaVVVNEtBQ1dnOXBveW1QYm9sZFlpL2VpOTd3NGRlMHpGdkxaQXF1OWNWWTBybGNHa0hsNEFXOUVXOVpPSmRDL0Ntd3N3TlQwMVJuZ0hIeU1SMU14V3ZRVGYyV0RxYWliRE9aUndBaHVDWTllM3pQcEthWUQxbW5nZHBmVERHTU94NXFJd2NYcDlsWlRiVGpTTStnWVJxZGRKVTh0aWpIVWs5R2RUVXB2aVl2d1FUOTFlQU1Bc3dPV1JVRjVRN0s3aDk0eTBDL0dUZmd0Vlp6RFdxMVU5OC9GRTBIdmtpek9aWExoWXpnSkx3WGd0dUd1VE8vQ0dPU3RxY1c1U09QMGthalJENG5oeG1nYTVBNDcyWGRUQnpXT1ZkbGczVGo4akZOajR0TkszcHNZSXJDODkxL1lVVTVTdDNlanFUZ2ZsK0RiSVY2TXJHa1RFVTRuWUhVNXhjTzFMcjJJVTJJODlIZTZWZDJHSno3dnB3czRqcXJzUThsL3g1MDRyU0Y2OCtqZ0Y5d1lOL0xEeEV5NzdLTWxxd1h5aTBUdk53UFFXMmVBT2o4L0ZRbis4U1FqZXc1YnpuRERUTzhLN0VpNjErM3pnSnR4ZG95L2Z1aVJqWUdTZUtiM2p4Z0ZMTUNyQ1hSN2tvbFAvYzcyR0VFdHhKczlRdHRJZFpGUC81WGR2d0VzeGRlSjNocFFEZmpsOFBKRFNaYjJtcHZMV1Z6emRvL2grYmczUEZOLy8yVUMvdDFNNHJKbzZJZlVQRHc1TGp5ejFlN1IrSjlKcC9xV21YOEF5VkZSWlQwQWI5c0FBQUFBU1VWT1JLNUNZSUk9Ii8+PC9nPjwvc3ZnPg=="),
    radial-gradient(1100px 500px at 85% -10%, rgba(21,68,160,.28), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(14,52,124,.30), transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg0) 40%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-size:128px 128px,auto,auto,auto;
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
.ic{width:18px;height:18px;flex:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(64,110,190,.35);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- ambient background art ---------- */
.bg-art{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5}
.bg-skyline{position:absolute;left:-10px;bottom:-8px;width:520px}
.bg-circuit{position:absolute;right:-30px;bottom:140px;width:420px;opacity:.55}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:26px;
  padding:14px 22px;
  background:linear-gradient(180deg,rgba(6,12,26,.96),rgba(5,10,22,.88));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.brand{position:relative;display:flex;align-items:center;text-decoration:none;font-family:var(--font-disp);font-weight:800;font-size:30px;letter-spacing:-.5px;line-height:1;padding:2px 6px}
.brand-logo{height:40px;width:auto;display:block;mix-blend-mode:screen;filter:drop-shadow(0 0 10px rgba(47,141,255,.35))}
.brand-glow{position:absolute;inset:-14px -20px;background:radial-gradient(60% 90% at 40% 50%,rgba(47,141,255,.30),transparent 70%);filter:blur(6px);pointer-events:none}
.brand-cortova{background:linear-gradient(180deg,#9fe9ff 5%,#2fa8ff 55%,#0c64d8);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 24px rgba(47,160,255,.55)}
.brand-mid{background:linear-gradient(180deg,#ffffff 30%,#b9cdf2);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:1px}
.brand-tx{position:relative;background:linear-gradient(180deg,#ff5566 20%,#c8102e 80%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:3px;text-shadow:0 0 18px rgba(224,38,60,.4)}
.tx-star{position:absolute;top:-5px;left:-3px;width:11px;height:11px;color:#fff;opacity:.95;filter:drop-shadow(0 0 4px rgba(255,255,255,.8))}

.top-progress{flex:1;max-width:520px;min-width:240px}
.tp-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.tp-label{font-size:12.5px;color:#c6d8f4;font-weight:600}
.tp-pct{font-size:12.5px;color:var(--mut)} .tp-pct b{color:#fff;font-size:13px}
.tp-track{height:11px;border-radius:999px;border:1px solid rgba(42,209,126,.55);background:rgba(7,16,34,.9);padding:1.5px;box-shadow:inset 0 0 8px rgba(0,0,0,.6)}
.tp-fill{position:relative;height:100%;min-width:8px;border-radius:999px;background:linear-gradient(90deg,#0a47d9,#2f8dff 60%,#46c8ff);box-shadow:0 0 12px rgba(47,141,255,.7);transition:width .5s ease}
.tp-tip{position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid #7adcff;filter:drop-shadow(0 0 4px #46c8ff)}

.top-controls{display:flex;align-items:center;gap:12px;margin-left:auto}
.seg{display:flex;border:1px solid var(--line-bright);border-radius:12px;padding:3px;background:rgba(10,20,42,.7)}
.seg-btn{padding:7px 16px;border-radius:9px;font-size:13px;font-weight:600;color:var(--mut)}
.seg-btn.active{background:linear-gradient(180deg,#2f8dff,#1455e8);color:#fff;box-shadow:0 2px 12px rgba(31,111,255,.5)}
.pill{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line-bright);border-radius:12px;background:rgba(10,20,42,.7);font-size:13px;font-weight:600;color:#cfe3ff;transition:.15s}
.pill:hover{border-color:#5fa8ff;box-shadow:0 0 14px rgba(47,125,255,.25)}
.pill .ic{color:var(--cyan)}
.pill.muted .ic{color:var(--dim)} .pill.muted .eq i{animation-play-state:paused;opacity:.3}
.eq{display:flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:2.5px;background:var(--cyan);border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(1){height:6px} .eq i:nth-child(2){height:11px;animation-delay:.2s} .eq i:nth-child(3){height:8px;animation-delay:.4s}
@keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.1)}}
.avatar-wrap{display:flex;align-items:center;gap:5px}
.avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;color:#fff;background:linear-gradient(135deg,#2f8dff,#7a3df0);border:2px solid rgba(120,180,255,.5);box-shadow:0 0 12px rgba(47,125,255,.4)}
.chev{width:15px;height:15px;color:var(--dim)}

/* ---------- shell ---------- */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:228px minmax(0,1fr) 392px;gap:18px;padding:18px 22px 30px;max-width:1980px;margin:0 auto}

/* ---------- left nav ---------- */
.leftnav{display:flex;flex-direction:column;gap:4px;padding-top:4px}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border-radius:12px;font-size:13.5px;font-weight:600;color:#a8bde2;text-align:left;transition:.15s}
.nav-item .ic{color:#6f95cf;width:19px;height:19px}
.nav-item:hover{background:rgba(34,74,158,.22);color:#fff}
.nav-item:hover .ic{color:var(--cyan)}
.nav-item .arr{margin-left:auto;width:15px;height:15px;color:var(--dim)}
.nav-strong{border:1px solid var(--line);background:rgba(12,24,50,.6)}
.nav-sec{margin:18px 4px 6px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.nav-badge{margin-left:auto;min-width:19px;height:19px;border-radius:999px;background:linear-gradient(180deg,#ff4d5e,#c8102e);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 0 10px rgba(224,38,60,.5)}
.promo{margin-top:auto;display:flex;align-items:center;gap:12px;padding:15px 14px;border:1px solid rgba(70,150,255,.55);border-radius:14px;background:linear-gradient(160deg,rgba(16,40,96,.65),rgba(9,18,40,.85));box-shadow:0 0 22px rgba(31,100,255,.22), inset 0 0 30px rgba(31,100,255,.08)}
.promo-bolt{width:34px;height:34px;flex:none;border-radius:10px;background:linear-gradient(180deg,#2f8dff,#1455e8);display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(47,141,255,.6)}
.promo-bolt svg{width:18px;height:18px;color:#fff}
.promo-title{font-family:var(--font-disp);font-size:14.5px;font-weight:700;color:#fff}
.promo-sub{font-size:11px;color:#7fb0e8;margin-top:2px}

/* ---------- cards ---------- */
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* ---------- course head ---------- */
.course-head{display:flex;align-items:center;gap:16px;padding:14px 20px}
.tx-flag{width:58px;height:58px;flex:none;filter:drop-shadow(0 0 10px rgba(47,125,255,.35))}
.tx-flag svg{width:100%;height:100%}
.tx-flag img{width:100%;height:100%;object-fit:contain;display:block}
.course-head-text{min-width:0}
.course-head h1{font-family:var(--font-disp);font-size:25px;font-weight:700;letter-spacing:-.3px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.course-meta{margin-top:4px;font-size:12.5px;color:var(--mut)}
.mode-pill{margin-left:auto;flex:none;padding:5px 12px;border-radius:999px;border:1px solid rgba(80,200,255,.55);color:#59d0ff;font-size:10px;font-weight:800;letter-spacing:.16em;background:rgba(18,52,110,.35);box-shadow:0 0 12px rgba(70,200,255,.2)}
.mode-pill.student{border-color:rgba(42,209,126,.55);color:#3fe096;box-shadow:0 0 12px rgba(42,209,126,.2)}

/* ---------- workspace ---------- */
.workspace{display:grid;grid-template-columns:282px minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}

/* modules card */
.modules-card{padding:10px}
.modules-head{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;background:linear-gradient(90deg,rgba(21,68,190,.55),rgba(13,36,90,.35));border:1px solid rgba(64,130,255,.45);margin-bottom:8px}
.mh-ic{width:26px;height:26px;border-radius:8px;background:linear-gradient(180deg,#2f8dff,#1455e8);display:flex;align-items:center;justify-content:center;flex:none}
.mh-ic svg{width:15px;height:15px;color:#fff}
.mh-title{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap}
.mh-count{margin-left:auto;font-size:11px;color:#79c4ff;font-weight:600;white-space:nowrap}
.modules-list{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 320px);overflow-y:auto;padding-right:2px}

.mod{border:1px solid transparent;border-radius:12px;transition:.15s}
.mod-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 11px;border-radius:12px;text-align:left}
.mod-head:hover{background:rgba(28,62,134,.3)}
.mod-num{width:24px;height:24px;flex:none;border-radius:8px;border:1px solid rgba(120,160,230,.4);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:#cfe0ff;background:rgba(16,32,66,.6)}
.mod-title{flex:1;min-width:0;font-size:12.8px;font-weight:600;color:#dbe7fb;line-height:1.25}
.mod-min{font-size:10.5px;color:var(--dim);flex:none}
.mod-state{flex:none;display:flex;align-items:center}
.mod-state svg{width:17px;height:17px}
.st-done{color:var(--green)} .st-lock{color:#5d7397} .st-open{color:#557cc0}
.mod.open{background:rgba(15,32,70,.55);border-color:rgba(64,130,255,.4);box-shadow:0 0 18px rgba(31,100,255,.12), inset 0 0 24px rgba(31,100,255,.05)}
.mod.open .mod-num{border-color:#3fa9ff;color:#fff;background:linear-gradient(180deg,#2f8dff,#1455e8)}
.prog-pill{flex:none;display:flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#1455e8,#2f9dff);box-shadow:0 0 10px rgba(47,141,255,.5)}
.prog-pill svg{width:10px;height:10px}
.mod-lessons{display:none;flex-direction:column;gap:2px;padding:2px 6px 8px}
.mod.open .mod-lessons{display:flex}
.les{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px 8px 12px;border-radius:10px;border-left:3px solid transparent;text-align:left;transition:.12s}
.les:hover{background:rgba(30,64,138,.3)}
.les-num{width:30px;flex:none;font-size:11px;font-weight:700;color:#6fa4ff}
.les-title{flex:1;min-width:0;font-size:12.3px;color:#b8cdf0;line-height:1.3}
.les-min{flex:none;font-size:10px;color:var(--dim)}
.les-state{flex:none;display:flex}
.les-state svg{width:15px;height:15px}
.les.current{background:linear-gradient(90deg,rgba(26,72,180,.55),rgba(20,50,120,.35));border-left-color:#3fa9ff;box-shadow:0 0 14px rgba(31,100,255,.18)}
.les.current .les-title{color:#fff;font-weight:600}
.les.locked{opacity:.5}
.dot-current{width:9px;height:9px;border-radius:50%;background:#3fa9ff;box-shadow:0 0 8px #3fa9ff;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.75);opacity:.6}}

/* lesson panel */
.lesson-panel{min-width:0}
.crumb-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.crumbs{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.crumb-mod{color:#4da3ff}
.crumbs .ic{width:13px;height:13px;color:#46648f}
.crumb-name{color:var(--mut)}
.crumb-side{display:flex;align-items:center;gap:8px}
.lesson-count{font-size:12px;color:var(--mut);margin-right:4px}
.pager{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-bright);background:rgba(12,24,52,.7);display:flex;align-items:center;justify-content:center;transition:.15s}
.pager:hover{border-color:#5fa8ff;box-shadow:0 0 12px rgba(47,125,255,.3)}
.pager .ic{width:15px;height:15px;color:#cfe3ff}
.pager:disabled{opacity:.35;cursor:default;box-shadow:none}
.lesson-title{margin-top:12px;font-family:var(--font-disp);font-size:30px;font-weight:700;letter-spacing:-.4px;color:#fff}
.title-rule{width:230px;height:3px;border-radius:99px;margin:10px 0 12px;background:linear-gradient(90deg,#2f8dff,rgba(47,141,255,0));box-shadow:0 0 10px rgba(47,141,255,.6)}
.lesson-desc{font-size:13.8px;line-height:1.55;color:#9db1d6;max-width:62ch}

/* stage */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:16px;margin-top:16px;align-items:start}
.stage.reading-mode{grid-template-columns:minmax(0,1fr)}
.stage.quiz-mode{grid-template-columns:minmax(0,1fr)}
.stage.reading-mode .side-panel{display:none}
.stage.quiz-mode .side-panel{display:none}
.player-wrap{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(60,120,230,.4);box-shadow:0 0 34px rgba(20,80,220,.2)}
.player-wrap.has-reading{aspect-ratio:auto;height:min(78vh,840px);min-height:640px}
.player-wrap.has-quiz{aspect-ratio:auto;min-height:560px}
.player-wrap video,.player-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none}
.player-wrap.has-video video{display:block}
.player-wrap.has-img img{display:block;object-fit:cover}

.quiz-stage{position:absolute;inset:0;display:none;overflow-y:auto;padding:22px 26px;background:linear-gradient(170deg,#0a1531,#060d1f)}
.player-wrap.has-quiz .quiz-stage{display:block}
.reading-stage{position:absolute;inset:0;display:none;overflow-y:auto;padding:22px 26px;background:linear-gradient(170deg,#0a1531,#060d1f);--rd-font-size:18px}
.player-wrap.has-reading .reading-stage{display:block}
.rd-top{position:sticky;top:-22px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 -26px 14px;padding:15px 26px 12px;background:rgba(6,13,31,.97);border-bottom:1px solid rgba(90,150,255,.22)}
.rd-meta{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#4da3ff}
.rd-clock{font-size:12px;color:#c6d8f4;font-variant-numeric:tabular-nums}
.rd-top-right,.rd-font-tools{display:flex;align-items:center;gap:9px}
.rd-font-tools{padding-left:9px;border-left:1px solid rgba(90,150,255,.28)}
.rd-font-btn{width:36px;height:32px;border:1px solid rgba(90,150,255,.4);border-radius:7px;background:rgba(14,28,58,.8);color:#eaf3ff;font-size:13px;font-weight:800}
.rd-font-btn:hover:not(:disabled){border-color:#5fa8ff;background:rgba(31,90,210,.35)}
.rd-font-btn:disabled{opacity:.4;cursor:not-allowed}
.rd-font-size{min-width:36px;text-align:center;font-size:11px;color:#9db4d6;font-variant-numeric:tabular-nums}
.rd-progress{height:8px;border-radius:999px;background:rgba(126,149,173,.18);overflow:hidden;border:1px solid rgba(90,150,255,.2);margin:0 0 16px}
.rd-fill{height:100%;width:0;background:linear-gradient(90deg,#2f8dff,#46c8ff);box-shadow:0 0 10px rgba(70,200,255,.55)}
.rd-article{display:flex;flex-direction:column;gap:22px;width:min(100%,82ch);margin:0 auto}
.rd-section h3{font-size:calc(var(--rd-font-size) + 4px);line-height:1.3;color:#eaf3ff;margin-bottom:10px}
.rd-section p{font-size:var(--rd-font-size);line-height:1.72;color:#c6d8f4;margin:0 0 11px}
.rd-section ul{display:grid;gap:8px;margin:9px 0 0;padding-left:22px;color:#c6d8f4;font-size:calc(var(--rd-font-size) - 1px);line-height:1.62}
.rd-section li::marker{color:#46c8ff}
.rd-callout{border-left:3px solid #46c8ff;padding:12px 14px;background:rgba(31,90,210,.16);color:#dbeaff;font-size:calc(var(--rd-font-size) - 1px);line-height:1.6}
.rd-resources{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.rd-resource{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:9px;border:1px solid rgba(90,150,255,.36);background:rgba(14,28,58,.58);font-size:12.5px;color:#d6e7ff}
.rd-resource:hover{border-color:#5fa8ff;box-shadow:0 0 12px rgba(47,125,255,.25)}
.rd-sources{border-top:1px solid rgba(90,150,255,.28);padding-top:16px}
.rd-sources h3{font-size:15px;color:#eaf3ff;margin:0 0 8px}
.rd-sources ul{display:grid;gap:7px;margin:0;padding-left:20px;font-size:12.5px;line-height:1.5;color:#9db1d6}
.rd-sources a,.rd-source-file{color:#8ed9ff;text-decoration:underline;text-underline-offset:2px}
.rd-source-file{padding:0;border:0;background:transparent;font:inherit;cursor:pointer}
.rd-sources a:focus-visible,.rd-source-file:focus-visible{outline:2px solid #8ed9ff;outline-offset:3px}
.rd-actions{position:sticky;bottom:-22px;margin:18px -26px -22px;padding:12px 26px;display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,rgba(6,13,31,.88),rgba(6,13,31,.98));border-top:1px solid rgba(90,150,255,.25)}
.rd-actions .btn-primary[disabled]{opacity:.48;cursor:not-allowed;filter:saturate(.45)}
.rd-status{font-size:12.5px;color:#9db4d6}
.qz-kicker{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#4da3ff;margin-bottom:8px}
.qz-q{margin:16px 0 10px;font-size:15px;font-weight:600;color:#eaf3ff;line-height:1.4}
.qz-opt{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;margin-bottom:7px;border:1px solid rgba(70,120,210,.35);border-radius:10px;background:rgba(14,28,58,.6);font-size:13px;color:#c6d8f4;text-align:left;transition:.12s}
.qz-opt:hover{border-color:#5fa8ff}
.qz-opt.sel{border-color:#3fa9ff;background:rgba(31,90,210,.35);color:#fff}
.qz-opt.correct{border-color:var(--green);background:rgba(42,209,126,.15)}
.qz-opt.wrong{border-color:var(--red);background:rgba(224,38,60,.12)}
.qz-answer-status{margin-left:auto;font-size:11px;font-weight:800;color:#eaf3ff}
.qz-radio{width:15px;height:15px;flex:none;border-radius:50%;border:2px solid #5f87c9}
.qz-opt.sel .qz-radio{border-color:#fff;background:radial-gradient(circle at center,#fff 35%,transparent 40%)}
.qz-explain{font-size:12px;color:#86d7a9;margin:4px 0 6px;padding-left:4px}
.qz-actions{margin-top:18px;display:flex;align-items:center;gap:14px}
.qz-result{font-size:14px;font-weight:700}
.qz-result.pass{color:var(--green)} .qz-result.fail{color:#ff7585}
.qz-note{margin-top:14px;font-size:12.5px;color:var(--mut);line-height:1.5}

/* Course-complete panel — the emotional payoff / last screen a TDLR
   reviewer sees after passing the final exam. See §5.3,
   docs/SPEC-mode-stamp-and-deploy-guard.md. Distinct tones per outcome:
   ccp-ok (issued/success), ccp-review-* (neutral review-mode end-state),
   ccp-error (genuine misconfiguration). "ccp-" avoids colliding with the
   unrelated "cc-" closed-caption prefix (.cc-overlay/.cc-chip/#btnCC). */
.course-complete-panel{margin-top:18px;padding:20px 22px;border-radius:14px;background:linear-gradient(170deg,rgba(14,28,58,.82),rgba(8,15,33,.92));border:1px solid rgba(90,150,255,.3);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.course-complete-panel h3{font-size:18px;font-weight:800;color:var(--text);margin-bottom:6px}
.course-complete-panel>p{font-size:13.5px;line-height:1.6;color:#c6d8f4}
.ccp-ok{margin-top:10px;padding:12px 14px;border-radius:10px;font-size:14px;font-weight:700;color:#eafff3;background:rgba(42,209,126,.14);border:1px solid rgba(42,209,126,.5);box-shadow:0 0 16px rgba(42,209,126,.2)}
.ccp-note{margin-top:10px;font-size:12.5px;color:var(--mut)}
.ccp-review-title{margin-top:12px;font-size:14.5px;font-weight:800;color:var(--cyan)}
.ccp-review-body{margin-top:6px;font-size:13px;color:#c6d8f4}
.ccp-review-note{margin-top:8px;padding:10px 12px;border-radius:9px;font-size:12px;color:#9db4d6;background:rgba(31,90,210,.14);border-left:3px solid var(--cyan)}
.ccp-error{margin-top:10px;padding:12px 14px;border-radius:10px;font-size:14px;font-weight:700;color:#ffe3e6;background:rgba(224,38,60,.14);border:1px solid rgba(224,38,60,.5)}

.empty-state{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:20px;background:linear-gradient(170deg,#0a1531,#060d1f)}
.player-wrap.empty .empty-state{display:flex}
.empty-state::before{content:"";position:absolute;inset:12px;border:1.6px dashed rgba(90,150,255,.4);border-radius:10px;pointer-events:none}
.es-ic{width:46px;height:46px;color:#3f7fd9}
.es-title{font-size:15px;font-weight:700;color:#cfe0ff}
.es-hint{font-size:12px;color:#7f97c2;max-width:46ch}
.es-file{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#7fd0ff;background:#0a1730;border:1px solid rgba(70,140,255,.4);padding:6px 12px;border-radius:8px}
.es-actions{display:flex;gap:10px;margin-top:6px}
.btn-ghost{padding:8px 14px;border:1px solid var(--line-bright);border-radius:10px;font-size:12.5px;font-weight:600;color:#cfe3ff;background:rgba(14,28,58,.6);transition:.15s}
.btn-ghost:hover{border-color:#5fa8ff;box-shadow:0 0 12px rgba(47,125,255,.3)}

.cc-overlay{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);max-width:84%;padding:7px 16px;border-radius:8px;background:rgba(0,0,0,.74);font-size:15px;line-height:1.4;color:#fff;text-align:center;text-shadow:0 1px 2px #000;pointer-events:none;z-index:4}
.player-wrap.empty .stage-badge,.player-wrap.has-quiz .stage-badge{display:none}
.stage-badge{position:absolute;left:14px;bottom:14px;padding:6px 11px;border-radius:8px;background:rgba(7,18,40,.88);border:1px solid rgba(80,150,255,.5);font-size:11.5px;font-weight:600;color:#d6e7ff;z-index:3}
.stage-required{position:absolute;right:12px;top:12px;padding:5px 10px;border-radius:8px;background:rgba(60,42,8,.85);border:1px solid rgba(245,183,62,.6);color:var(--gold);font-size:9.5px;font-weight:800;letter-spacing:.1em;z-index:3}
.img-complete{position:absolute;right:14px;bottom:14px;z-index:4;padding:9px 16px;border-radius:10px;background:linear-gradient(180deg,#2f8dff,#1455e8);color:#fff;font-size:12.5px;font-weight:700;box-shadow:0 4px 16px rgba(31,111,255,.5)}
.img-complete.done{background:linear-gradient(180deg,#2ad17e,#159a56)}
.img-complete[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

.img-expand{position:absolute;right:14px;top:14px;z-index:4;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(7,18,40,.82);border:1px solid rgba(80,150,255,.5)}
.img-expand:hover{border-color:#5fa8ff;box-shadow:0 0 12px rgba(47,125,255,.35)}
.img-expand .ic{width:17px;height:17px;color:#cfe3ff}

.img-narration{position:absolute;left:14px;right:60px;bottom:14px;z-index:4;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(7,18,40,.9);border:1px solid rgba(80,150,255,.4)}
.player-wrap.has-img .img-complete{right:14px;bottom:60px}
.ina-play{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(180deg,#2f8dff,#1455e8);color:#fff}
.ina-play .ic-play,.ina-play .ic-pause{width:14px;height:14px}
.ina-track{flex:1;height:5px;border-radius:5px;background:rgba(126,149,173,.25);overflow:hidden;cursor:pointer}
.ina-fill{width:0;height:100%;background:var(--cyan);box-shadow:0 0 8px rgba(70,200,255,.6)}
.ina-time{flex:none;font-size:11px;color:#9db4d6;font-variant-numeric:tabular-nums}
.ina-hint{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--gold)}
.ina-hint.done{color:#2ad17e}

.img-lightbox{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:rgba(2,6,14,.94);backdrop-filter:blur(6px);animation:ilbIn .22s ease-out}
@keyframes ilbIn{from{opacity:0}to{opacity:1}}
.img-lightbox img{max-width:92vw;max-height:80vh;border-radius:12px;box-shadow:0 20px 80px rgba(0,0,0,.6);object-fit:contain}
.ilb-resume{display:flex;align-items:center;gap:9px;padding:12px 22px;border-radius:11px;background:linear-gradient(180deg,#2f8dff,#1455e8);color:#fff;font-size:14px;font-weight:700;box-shadow:0 6px 20px rgba(31,111,255,.5)}
.ilb-resume .ic{width:17px;height:17px}
.ilb-resume:hover{filter:brightness(1.08)}

.drop-overlay{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:rgba(8,20,50,.82);border:2px dashed #3fa9ff;border-radius:14px}
.drop-box{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#bfe3ff}
.drop-box .ic{width:26px;height:26px;color:var(--cyan)}
.preview-banner{position:absolute;top:10px;left:10px;right:10px;z-index:5;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(10,24,52,.94);border:1px solid rgba(70,140,255,.5);font-size:12px;color:#cfe3ff}
.preview-banner code{color:#7fd0ff;font-size:11px}
.pb-btn{margin-left:auto;flex:none;padding:6px 11px;border-radius:8px;background:linear-gradient(180deg,#2f8dff,#1455e8);color:#fff;font-size:11.5px;font-weight:700}
.pb-x{flex:none;color:var(--dim);font-size:13px;padding:4px}

/* side panel */
.side-panel{min-width:0}
.side-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:8px}
.side-tab{position:relative;padding:8px 10px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.side-tab.active{color:#fff}
.side-tab.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2.5px;border-radius:99px;background:#3fa9ff;box-shadow:0 0 8px #3fa9ff}
.topic-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.topic{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:10px;font-size:12.6px;color:#b9cdf2;line-height:1.3}
.topic svg{width:17px;height:17px;flex:none}
.topic .t-done{color:var(--green)}
.topic .t-pend{color:#46648f}
.topic.current{background:linear-gradient(90deg,#1559d8,#2f8cff);color:#fff;font-weight:600;box-shadow:0 4px 16px rgba(31,111,255,.4)}
.topic.current svg{color:#fff}
.topic .t-arr{margin-left:auto;width:14px;height:14px;color:#9fccff}
.ts-empty{font-size:12.5px;color:var(--dim);line-height:1.6;padding:10px 6px}
.ts-empty code{color:#7fd0ff;font-size:11px}
.ts-sub{font-size:11.5px}
.ts-list{display:flex;flex-direction:column;gap:3px;max-height:330px;overflow-y:auto;padding-right:4px}
.ts-cue{padding:7px 9px;border-radius:8px;border-left:2px solid transparent;cursor:pointer;transition:.12s}
.ts-cue:hover{background:rgba(30,64,138,.3)}
.ts-cue time{display:block;font-family:var(--font-digit);font-size:10px;color:#5f87c9;margin-bottom:2px}
.ts-cue p{font-size:12.4px;line-height:1.45;color:#aac2e8}
.ts-cue.active{background:rgba(38,96,210,.4);border-left-color:#45b3ff}
.ts-cue.active p{color:#fff}

/* controls bar */
.controls-bar{display:flex;align-items:center;gap:13px;margin-top:13px;padding:9px 14px;border-radius:12px;background:rgba(9,18,40,.72);border:1px solid rgba(50,100,200,.3)}
.cb-btn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#cfe3ff;transition:.13s;position:relative}
.cb-btn:hover{background:rgba(38,84,176,.35)}
.cb-btn .ic{width:19px;height:19px}
.cb-btn.sm .ic{width:17px;height:17px}
.cb-track{position:relative;flex:1;height:5px;border-radius:99px;background:rgba(70,110,180,.3);cursor:pointer}
.cb-buffer{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:rgba(120,160,230,.25);width:0}
.cb-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#1f6fff,#43c6ff);box-shadow:0 0 8px rgba(67,198,255,.6);width:0}
.cb-knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(120,200,255,.9);left:0;pointer-events:none}
.cb-time{font-family:var(--font-digit);font-size:12px;color:var(--mut);flex:none;letter-spacing:.04em}
.cc-chip{border:1.6px solid currentColor;border-radius:4.5px;font-size:9.5px;font-weight:800;padding:1.5px 4.5px;letter-spacing:.03em}
#btnCC.on{color:var(--cyan)} #btnCC.on .cc-chip{box-shadow:0 0 10px rgba(70,200,255,.5);background:rgba(40,140,220,.18)}
.speed-tag{position:absolute;bottom:-4px;right:-2px;font-size:8.5px;font-weight:800;color:var(--cyan)}

/* notes */
.notes-card{margin-top:15px;overflow:hidden}
.notes-head{display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line)}
.notes-tabs{display:flex}
.ntab{position:relative;padding:13px 15px;font-size:13px;font-weight:600;color:var(--mut)}
.ntab.active{color:#fff}
.ntab.active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:99px;background:#3fa9ff;box-shadow:0 0 8px #3fa9ff}
.notes-side{display:flex;align-items:center;gap:14px}
.autosave{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#56cf92}
.autosave .ic{width:15px;height:15px}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;background:linear-gradient(180deg,#2f8dff,#1455e8);color:#fff;font-weight:700;box-shadow:0 4px 18px rgba(31,111,255,.45);transition:.15s}
.btn-primary:hover{filter:brightness(1.12)}
.btn-primary.sm{padding:8px 16px;font-size:12.5px}
.btn-primary.big{width:100%;padding:13px;font-size:14.5px;border-radius:12px}
.btn-outline{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;border:1px solid rgba(120,170,255,.4);background:rgba(16,30,60,.45);color:#d6e4fa;font-weight:600;transition:.15s}
.btn-outline:hover{border-color:#5fa8ff}
.btn-outline.big{width:100%;padding:12px;font-size:13.5px;margin-top:10px}
.notes-toolbar{display:flex;align-items:center;gap:3px;padding:8px 12px;border-bottom:1px solid var(--line)}
.notes-toolbar button{width:29px;height:29px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#a8bde2;font-size:13px}
.notes-toolbar button:hover{background:rgba(38,84,176,.35);color:#fff}
.notes-toolbar .ic{width:15px;height:15px}
.nt-sep{width:1px;height:18px;background:var(--line);margin:0 6px}
.notes-area{min-height:98px;max-height:220px;overflow-y:auto;padding:13px 16px 17px;font-size:13.5px;line-height:1.6;color:#d7e4fa;outline:none}
.notes-area:empty::before{content:attr(data-placeholder);color:var(--dim)}
.notes-area a{color:var(--cyan)}
.lesson-notes{color:#aac2e8}
.lesson-notes .ln-aid{margin-top:10px;font-size:12px;color:#79c4ff}

/* ---------- right rail ---------- */
.rightrail{display:flex;flex-direction:column;gap:16px;min-width:0}
.rc-head{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#dbe9ff}
.rc-head .ic{width:18px;height:18px;color:#56b6ff}
.rc-bolt{width:26px;height:26px;border-radius:8px;background:linear-gradient(180deg,#2f8dff,#1455e8);display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(47,141,255,.55)}
.rc-bolt svg{width:14px;height:14px;color:#fff}

.timer-card{position:relative;overflow:hidden;padding:18px 20px 20px;border-color:rgba(70,150,255,.55);box-shadow:0 0 30px rgba(31,100,255,.25), inset 0 0 40px rgba(31,100,255,.06)}
.bolt-art{position:absolute;right:-6px;top:0;height:100%;width:auto;opacity:.85;pointer-events:none}
.bolt{filter:drop-shadow(0 0 7px rgba(61,165,255,.9));animation:bolt-flicker 3.2s ease-in-out infinite}
.bolt.b2{animation-delay:1.4s;opacity:.7}
@keyframes bolt-flicker{0%,100%{opacity:.9}45%{opacity:.55}55%{opacity:1}}
.timer-digits{display:flex;align-items:baseline;margin:14px 0 3px}
.td{width:66px;text-align:center;font-family:var(--font-digit);font-weight:700;font-size:46px;line-height:1;color:#fff;text-shadow:0 0 18px rgba(64,160,255,.85)}
.tc{width:20px;text-align:center;font-family:var(--font-digit);font-size:38px;font-weight:600;color:#3f86e0}
.timer-units{display:flex;align-items:center}
.timer-units span{width:66px;text-align:center;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6f8ab5}
.timer-units span:nth-child(2){margin:0 20px}
.timer-sub{margin-top:13px;font-size:12px;color:#9db1d6;line-height:1.5}
.timer-req{color:var(--dim);font-size:11.5px}
.timer-reset{margin-top:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:8px;border:1px solid rgba(120,170,255,.4);background:rgba(30,60,120,.28);color:#c3d8ff;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.timer-reset:hover{background:rgba(50,95,175,.42);border-color:rgba(150,190,255,.7)}

.res-card{padding:16px}
.res-list{display:flex;flex-direction:column;gap:8px;margin-top:13px}
.res-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:1px solid rgba(50,100,190,.3);border-radius:11px;background:rgba(12,24,50,.55);text-align:left;transition:.13s}
.res-row:hover{border-color:#5fa8ff;box-shadow:0 0 12px rgba(47,125,255,.2)}
.pdf-ic{width:27px;height:27px;flex:none;border-radius:7px;background:linear-gradient(180deg,#ff5560,#c81f31);display:flex;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(224,38,60,.35)}
.pdf-ic span{font-size:7.5px;font-weight:800;color:#fff;letter-spacing:.03em}
.res-name{flex:1;min-width:0;font-size:12.4px;font-weight:600;color:#d6e4fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-row .ic{width:15px;height:15px;color:#4f7ab0}
.res-all{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:10px;border:1px solid rgba(64,140,255,.45);border-radius:11px;font-size:12.5px;font-weight:700;color:#57b6ff;transition:.15s}
.res-all:hover{box-shadow:0 0 14px rgba(47,125,255,.25)}
.res-all .ic{width:15px;height:15px}

.cont-card{padding:16px}
.upnext-label{margin-top:13px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6f8ab5}
.upnext-row{display:flex;align-items:center;gap:9px;margin:8px 0 14px}
.un-num{flex:none;padding:3px 8px;border-radius:7px;border:1px solid rgba(80,150,255,.5);background:rgba(30,70,160,.4);font-size:11.5px;font-weight:700;color:#79c4ff}
.un-title{flex:1;min-width:0;font-size:13px;font-weight:600;color:#e2ecfd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.un-min{flex:none;font-size:11px;color:var(--dim)}

.sum-card{padding:16px}
.sum-text{margin-top:12px;font-size:12.6px;color:#9db1d6;line-height:1.5}
.sum-row{display:flex;align-items:center;gap:11px;margin-top:11px}
.sum-track{flex:1;height:7px;border-radius:99px;background:rgba(70,110,180,.25)}
.sum-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#1f6fff,#43c6ff);box-shadow:0 0 10px rgba(67,198,255,.55);transition:width .4s}
.sum-pct{font-size:13.5px;font-weight:800;color:#4db1ff}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;z-index:300;background:rgba(2,6,16,.72);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:24px}
.modal{width:580px;max-width:100%;max-height:82vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#0c1838,#070f24);border:1px solid var(--line-bright);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 40px rgba(31,100,255,.15)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head .mh-title{font-size:13px}
.modal-x{color:var(--dim);font-size:15px;padding:4px 8px;border-radius:8px}
.modal-x:hover{color:#fff;background:rgba(38,84,176,.35)}
.modal-search{margin:14px 20px 4px;padding:10px 14px;border-radius:10px;border:1px solid var(--line-bright);background:rgba(8,16,36,.8);color:var(--text);font-size:13px;font-family:inherit;outline:none}
.modal-search:focus{border-color:#5fa8ff;box-shadow:0 0 12px rgba(47,125,255,.25)}
.modal-body{overflow-y:auto;padding:10px 20px 20px}
.res-dl-modal{width:440px}
.res-dl-body{font-size:13px;line-height:1.6;color:#c6d8f4;margin:2px 0 18px}
.res-dl-actions{display:flex;justify-content:flex-end;gap:10px}
.res-dl-actions .btn-primary{padding:8px 18px}
.g-term{padding:13px 4px;border-bottom:1px solid rgba(56,116,235,.14)}
.g-term:last-child{border-bottom:none}
.g-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.g-en{font-size:14px;font-weight:800;color:#eaf3ff;background:linear-gradient(180deg,rgba(47,141,255,.22),rgba(20,85,232,.16));padding:2px 9px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(72,148,255,.38)}
.g-es{font-size:12.5px;font-weight:600;color:var(--cyan)}
.g-pron{font-size:12px;font-weight:500;font-style:italic;color:var(--mut)}
html[dir="rtl"] .g-head{flex-direction:row-reverse;justify-content:flex-end}
.g-def{margin-top:5px;font-size:12.6px;line-height:1.55;color:#9db1d6}
.g-def-es{margin-top:3px;font-size:12px;line-height:1.5;color:#6f8ab5;font-style:italic}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:400;padding:11px 20px;border-radius:12px;background:#0d1c3d;border:1px solid var(--line-bright);color:#d6e4fa;font-size:13px;font-weight:600;box-shadow:0 12px 36px rgba(0,0,0,.5), 0 0 20px rgba(31,100,255,.2);animation:toast-in .25s ease}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- file guard ---------- */
.file-guard{position:fixed;inset:0;z-index:500;background:var(--bg0);display:flex;align-items:center;justify-content:center;padding:24px}
.fg-box{max-width:480px;padding:30px;background:linear-gradient(180deg,#0c1838,#070f24);border:1px solid var(--line-bright);border-radius:18px}
.fg-title{font-family:var(--font-disp);font-size:18px;font-weight:700;margin-bottom:10px}
.fg-box p{font-size:13.5px;line-height:1.6;color:#9db1d6}
.fg-box b{color:#7fd0ff}

/* ---------- responsive ---------- */
@media (max-width:1620px){ .shell{grid-template-columns:210px minmax(0,1fr) 350px} .td{width:56px;font-size:40px} .timer-units span{width:56px} }
@media (max-width:1380px){
  .shell{grid-template-columns:minmax(0,1fr) 340px}
  .leftnav{display:none}
  .pill span[data-i18n="definitions"]{display:none}
}
@media (max-width:1120px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rightrail{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .workspace{grid-template-columns:minmax(0,1fr)}
  .modules-list{max-height:340px}
  .stage{grid-template-columns:minmax(0,1fr)}
  .top-progress{display:none}
}

/* ============================================================
   Round-1 feedback additions
   ============================================================ */

/* ---------- ambient traffic line-art (A7) ---------- */
.bg-signs-left{position:absolute;left:8px;top:110px;width:200px;opacity:.42}
.bg-signs-right{position:absolute;right:6px;top:96px;width:210px;opacity:.4}
.bg-road{position:absolute;left:50%;transform:translateX(-58%);bottom:-6px;width:820px;opacity:.34}
@media (max-width:1500px){.bg-signs-left,.bg-signs-right{opacity:.22}}

/* ---------- playback lockdown (A1) ---------- */
.cb-track{cursor:default}
.ts-cue{cursor:default}

/* ---------- quiz v2 (A4) ---------- */
.qz-topbar{display:flex;align-items:center;justify-content:space-between;margin:2px 0 4px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.qz-meta{font-size:11.5px;color:var(--mut)}
.qz-elapsed{font-size:12px;font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums}
.qz-block{padding:6px 0 4px;border-bottom:1px dashed rgba(56,116,235,.14)}
.qz-scenario{margin:14px 0 2px;padding:10px 13px;border-left:3px solid var(--gold);border-radius:8px;background:rgba(245,183,62,.07);font-size:13px;color:#e6d9b8;line-height:1.5}
.qz-scen-tag{display:block;font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--gold);margin-bottom:4px}
.qz-fib{margin:6px 0 10px;font-size:14px;color:#dbe8fb}
.qz-fib-line{margin:7px 0;line-height:2.1}
.qz-bank{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px;padding:10px;border:1px dashed rgba(90,150,255,.35);border-radius:10px;background:rgba(10,20,44,.5)}
.qz-hint{margin:8px 2px 2px;font-size:12px;line-height:1.5;color:var(--muted);display:flex;gap:7px;align-items:flex-start}
.qz-hint::before{content:'💡';font-size:12px;line-height:1.5}
.qz-chip{padding:6px 13px;border-radius:999px;border:1px solid rgba(90,160,255,.55);background:rgba(24,54,116,.55);color:#dff0ff;font-size:12.5px;font-weight:600;cursor:grab;transition:.12s}
.qz-chip:hover{border-color:#7fc2ff;box-shadow:0 0 10px rgba(47,125,255,.35)}
.qz-chip.used{opacity:.18;pointer-events:none}
.qz-slot-row{display:flex;align-items:center;gap:10px;margin:7px 0}
.qz-slot-label{min-width:170px;font-size:13px;color:#c6d8f4}
.qz-slot{display:inline-flex;align-items:center;justify-content:center;min-width:130px;min-height:30px;padding:3px 12px;border-radius:8px;border:1.5px dashed rgba(110,160,240,.5);background:rgba(12,24,52,.5);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;vertical-align:middle}
.qz-slot.inline{min-width:78px;min-height:26px;padding:2px 11px;margin:0 5px;white-space:nowrap;vertical-align:middle}
.qz-slot.filled{border-style:solid;border-color:#4da3ff;background:rgba(31,90,210,.35)}
.qz-slot.correct{border-color:var(--green);background:rgba(42,209,126,.16)}
.qz-slot.wrong{border-color:var(--red);background:rgba(224,38,60,.14)}
.qz-slot-ans{font-size:11.5px;color:var(--green);font-style:normal;font-weight:700;margin-left:6px}
.qz-cw{--cwc:34px;display:grid;gap:3px;margin:12px 0;width:max-content}
.qz-cw-cell{position:relative;width:var(--cwc);height:var(--cwc);border:1px solid rgba(110,160,240,.55);border-radius:6px;background:rgba(12,24,52,.72)}
.qz-cw-cell i{position:absolute;top:1px;left:3px;font-size:8.5px;font-style:normal;color:var(--cyan)}
.qz-cw-cell input{width:100%;height:100%;background:transparent;border:none;outline:none;text-align:center;color:#fff;font:700 15px/1 "Oxanium",monospace;text-transform:uppercase}
.qz-cw-cell.correct{border-color:var(--green);background:rgba(42,209,126,.16)}
.qz-cw-cell.wrong{border-color:var(--red);background:rgba(224,38,60,.16)}
.qz-cw-void{width:var(--cwc);height:var(--cwc)}
.qz-cw-clues{margin:6px 0 12px;font-size:12.5px;color:#c6d8f4;line-height:1.65}
.qz-cw-clues b{display:block;margin-top:6px;color:var(--cyan);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.qz-cw-clues p{margin:1px 0}
.qz-intro{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.qz-intro video{width:100%;max-height:52vh;border-radius:12px;background:#000}
.qz-intro.no-media video{display:none}
.qz-bingo-clue{margin:10px 0 12px;padding:11px 13px;border:1px solid rgba(90,150,255,.28);border-radius:8px;background:rgba(10,24,54,.6);font-size:13px;font-weight:700;color:#e6f0ff;line-height:1.45}
.qz-bingo-instructions{margin:0 0 10px;color:#b9cbea;font-size:12.5px;line-height:1.5}
.qz-bingo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0 8px}
.qz-bingo-cell{aspect-ratio:1.15;min-height:58px;padding:6px;border:1px solid rgba(110,160,240,.42);border-radius:8px;background:rgba(12,24,52,.72);color:#dceaff;font-size:11px;font-weight:700;line-height:1.2;text-align:center;overflow-wrap:anywhere;cursor:pointer;transition:.12s}
.qz-bingo-cell:hover{border-color:#69b7ff;box-shadow:0 0 12px rgba(47,125,255,.25)}
.qz-bingo-cell.marked{border-color:var(--green);background:rgba(42,209,126,.16);color:#f1fff8}
.qz-bingo-cell.wrong-pick{border-color:#ff5b67;background:rgba(224,38,60,.2);color:#fff;box-shadow:0 0 12px rgba(224,38,60,.28)}
.qz-bingo-cell.free{cursor:default;color:#0b1a32;background:linear-gradient(180deg,#7dd7ff,#37a8ff);border-color:#a9e5ff}
.qz-bingo-status{min-height:18px;font-size:12.5px;font-weight:700;color:var(--gold)}
.qz-pagefact{display:flex;flex-direction:column;gap:9px;margin:8px 0 12px}
.qz-pagefact p{margin:0;color:#d8e6fb;font-size:13.5px;line-height:1.5}
.qz-pagefact label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.qz-pagefact input{width:min(180px,100%);height:38px;border-radius:8px;border:1px solid rgba(110,160,240,.45);background:rgba(7,16,36,.8);color:#fff;padding:0 12px;font:700 15px "Oxanium",monospace}
.qz-pagefact input.correct{border-color:var(--green);background:rgba(42,209,126,.12)}
.qz-pagefact input.wrong{border-color:var(--red);background:rgba(224,38,60,.12)}
@media (max-width:720px){.qz-bingo{gap:4px}.qz-bingo-cell{min-height:50px;font-size:10px;padding:4px}}

/* ---------- identity gate (A5) ---------- */
.id-modal{width:520px}
.id-badge{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--cyan);border:1px solid rgba(70,200,255,.4);border-radius:999px;padding:4px 10px}
.id-body{display:flex;flex-direction:column;gap:14px;padding:6px 20px 22px}
.id-attest{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#c6d8f4;line-height:1.5;cursor:pointer}
.id-attest input{margin-top:3px;accent-color:var(--blue)}
.id-status{min-height:18px;font-size:13px;font-weight:700}
.id-status.busy{color:var(--gold)}
.id-status.busy::after{content:"";display:inline-block;width:10px;height:10px;margin-left:8px;border:2px solid var(--gold);border-top-color:transparent;border-radius:50%;animation:idspin .8s linear infinite;vertical-align:-1px}
.id-status.ok{color:var(--green)}
@keyframes idspin{to{transform:rotate(360deg)}}

/* fullscreen shrink pill (mouse-reveal) */
.fs-shrink{position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);z-index:40;display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:rgba(7,18,40,.92);border:1px solid rgba(90,150,255,.55);color:#dceaff;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.fs-shrink.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.fs-shrink .ic{width:15px;height:15px}
.fs-shrink:hover{border-color:#5fa8ff;box-shadow:0 0 14px rgba(47,125,255,.4)}

/* all-notes modal */
.an-actions{display:flex;align-items:center;gap:10px}
.an-print{padding:7px 12px;font-size:12px}
.an-print:hover{border-color:#5fa8ff;box-shadow:0 0 12px rgba(47,125,255,.3)}
.an-empty{color:var(--dim);font-size:13px;padding:14px 4px}
.an-group{margin:14px 0 6px}
.an-mod{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5fa8ff;margin:0 0 8px}
.an-note{display:block;width:100%;text-align:left;background:rgba(8,16,36,.75);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 10px;cursor:pointer;transition:.15s;color:var(--text)}
.an-note:hover{border-color:#5fa8ff;box-shadow:0 0 12px rgba(47,125,255,.25)}
.an-lesson{font-size:12.5px;font-weight:700;color:#cfe3ff;margin-bottom:4px}
.an-body{font-size:12.5px;color:var(--dim);max-height:88px;overflow:hidden}
.an-body p{margin:0 0 4px}

/* ---------- language picker (English + 10 Texas languages) ---------- */
.lang-picker{position:relative}
.lang-btn{gap:7px;min-width:118px}
.lang-btn .caret{width:16px;height:16px;color:var(--mut);transition:transform .15s}
.lang-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.lang-btn #langCurrent{font-weight:700;color:#eaf3ff}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:420;min-width:210px;max-height:60vh;overflow:auto;
  padding:6px;background:linear-gradient(180deg,#0c1838,#070f24);border:1px solid var(--line-bright);
  border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 34px rgba(31,100,255,.16)}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;border-radius:10px;
  font-size:13px;font-weight:600;color:#cfe3ff;background:transparent;border:1px solid transparent;transition:.12s;cursor:pointer}
.lang-opt:hover{background:rgba(20,40,84,.7);border-color:var(--line)}
.lang-opt.active{background:linear-gradient(180deg,#2f8dff,#1455e8);color:#fff;box-shadow:0 2px 12px rgba(31,111,255,.45)}
.lang-opt .lo-native{font-weight:700}
.lang-opt .lo-en{margin-left:auto;font-size:11px;color:var(--mut)}
.lang-opt.active .lo-en{color:rgba(255,255,255,.85)}
.lang-reset{padding:9px 13px;font-weight:800;letter-spacing:.04em;color:#0a1836;background:linear-gradient(180deg,#8fd0ff,#4aa3ff);border-color:#7cc0ff}
.lang-reset:hover{box-shadow:0 0 16px rgba(120,190,255,.5);border-color:#bfe2ff}
/* RTL: mirror layout when Arabic/Urdu is active */
html[dir="rtl"] .top-controls{flex-direction:row-reverse}
html[dir="rtl"] .lang-menu{right:auto;left:0}
html[dir="rtl"] .lang-opt{text-align:right}
html[dir="rtl"] .lang-opt .lo-en{margin-left:0;margin-right:auto}
html[dir="rtl"] .sidebar,html[dir="rtl"] .nav-item,html[dir="rtl"] .nav-sec{text-align:right}
html[dir="rtl"] .an-note{text-align:right}

/* ---------- Phase 2: server-driven identity + enrollment ---------- */
/* Compliance modals sit above everything and cannot be dismissed. */
.gate-back{z-index:220}
.id-status.err{color:var(--red)}
.id-question{font-size:15.5px;font-weight:700;color:#eaf3ff;line-height:1.5}
.val-question{margin:0 0 12px;color:#eaf3ff;font-weight:800;line-height:1.45}
.val-options{display:grid;gap:8px;margin-top:12px}
.val-option{width:100%;border:1px solid rgba(148,163,184,.32);border-radius:8px;background:rgba(15,23,42,.82);color:#eaf3ff;padding:11px 12px;text-align:left;font-weight:750;line-height:1.35}
.val-option:hover{border-color:rgba(96,165,250,.7);background:rgba(30,41,59,.92)}
.val-option:disabled{opacity:.6;cursor:not-allowed}
.val-feedback{margin:12px 0 0;color:#fecaca;font-weight:750;line-height:1.4}
.id-timer{display:flex;align-items:center;gap:10px}
.id-ring{width:40px;height:40px;transform:rotate(-90deg)}
.id-ring circle{fill:none;stroke-width:4}
.id-ring-track{stroke:rgba(90,150,255,.25)}
.id-ring-fill{stroke:var(--cyan);stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s}
.id-timer.low .id-ring-fill{stroke:var(--red)}
.id-secs{font-size:13px;color:#c6d8f4}
.id-secs b{font:700 16px "Oxanium",monospace;color:#eaf3ff}
.id-timer.low .id-secs b{color:var(--red)}

.auth-modal{width:min(680px,94vw);max-height:88vh;overflow-y:auto}
.auth-tabs{display:flex;gap:8px;padding:4px 20px 0}
.auth-tab{flex:1;padding:10px 12px;border-radius:10px 10px 0 0;border:1px solid rgba(90,150,255,.3);border-bottom:none;background:rgba(12,24,52,.5);color:#c6d8f4;font-size:13px;font-weight:700;cursor:pointer}
.auth-tab.active{background:rgba(31,90,210,.3);color:#eaf3ff;border-color:rgba(90,150,255,.6)}
.auth-pane{display:flex;flex-direction:column;gap:14px;padding:16px 20px 24px}
.auth-note{font-size:12.5px;color:#c6d8f4;line-height:1.55;margin:0}
.auth-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#9fb6dd}
.auth-field span{font-weight:700;letter-spacing:.04em}
.auth-field input{padding:10px 12px;border-radius:10px;border:1px solid rgba(90,150,255,.4);background:rgba(12,24,52,.6);color:#eaf3ff;font-size:14px;outline:none}
.auth-field input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(70,200,255,.18)}
.auth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.auth-grid .wide{grid-column:span 3}
.auth-code{display:flex;flex-direction:column;gap:12px}
.auth-sec{display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(90,150,255,.2);padding-top:14px}
.auth-sec-title{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.pvq-row{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-bottom:8px}
.pvq-sel,.pvq-ans{padding:9px 10px;border-radius:9px;border:1px solid rgba(90,150,255,.4);background:rgba(12,24,52,.6);color:#eaf3ff;font-size:12.5px;outline:none}
.pvq-sel:focus,.pvq-ans:focus{border-color:var(--cyan)}

/* ---------- MFA second factor (Phase 2 REVISION 2026-07-06) ---------- */
.mfa-factor{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(90,150,255,.3);border-radius:12px;padding:12px 14px;background:rgba(12,24,52,.5);cursor:pointer;transition:border-color .15s,background .15s}
.mfa-factor:hover{border-color:rgba(90,150,255,.55)}
.mfa-factor:has(input:checked){border-color:var(--cyan);background:rgba(31,90,210,.25);box-shadow:0 0 0 1px rgba(70,200,255,.25)}
.mfa-factor:focus-within{outline:2px solid rgba(70,200,255,.45);outline-offset:2px}
.mfa-factor input{margin-top:3px;accent-color:var(--blue);flex:none}
.mfa-factor-body{display:flex;flex-direction:column;gap:3px}
.mfa-factor-body b{font-size:13.5px;color:var(--text)}
.mfa-factor-body small{font-size:12px;color:#c6d8f4;line-height:1.5}
.totp-panel{display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(90,150,255,.2);padding-top:16px;align-items:center;text-align:center}
.totp-qr{background:#fff;border-radius:14px;padding:10px;line-height:0;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.totp-qr svg{display:block;width:196px;height:196px}
.totp-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.12em;color:var(--cyan);background:rgba(12,24,52,.6);border:1px solid rgba(90,150,255,.4);border-radius:10px;padding:8px 12px;word-break:break-all;user-select:all}
.totp-key-note{margin:0}
.totp-code-field{width:min(260px,100%)}
.totp-code-field input{text-align:center;font-size:20px;letter-spacing:.35em}
#totpConfirm{width:min(260px,100%)}
#idAnswer.id-code{text-align:center;font-size:20px;letter-spacing:.35em}

.refund-box{max-height:170px;overflow-y:auto;border:1px solid rgba(90,150,255,.3);border-radius:10px;background:rgba(12,24,52,.5);padding:12px 14px;font-size:12.5px;color:#c6d8f4;line-height:1.6}
.refund-box ul{margin:8px 0 0;padding-left:18px}
.refund-box li{margin-bottom:6px}
.refund-box a{color:#9cc3ff;text-decoration:underline}
.refund-box a:focus-visible{outline:2px solid #9cc3ff;outline-offset:2px}
@media(max-width:760px){.auth-grid{grid-template-columns:1fr}.auth-grid .wide{grid-column:span 1}.pvq-row{grid-template-columns:1fr}}

/* ---------- Reading accent clips (silent, 2026-10-09) ----------
   Muted looping clip shown under a reading-section heading. No autoplay;
   the visible play/pause toggle is the WCAG 2.2.2 pause mechanism. The
   figcaption is the visible text alternative. 16:9, never wider than the
   reading column, so it scales down to phone width. */
.rd-clip{margin:4px 0 14px;max-width:100%}
.rd-clip-frame{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#050b1a;border:1px solid rgba(90,150,255,.3)}
.rd-clip-frame video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.rd-clip-btn{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px;border-radius:999px;border:1px solid rgba(156,195,255,.6);background:rgba(5,11,26,.82);color:#eaf3ff;font-size:13px;font-weight:700;cursor:pointer}
.rd-clip-btn:hover{border-color:var(--cyan)}
.rd-clip-btn:focus-visible{outline:2px solid #9cc3ff;outline-offset:2px}
.rd-clip-btn[aria-pressed="true"]{border-color:var(--cyan)}
.rd-clip-btn:disabled{opacity:.7;cursor:default}
.rd-clip-icon{display:inline-block;min-width:1.1em;text-align:center}
.rd-clip figcaption{margin-top:8px;font-size:calc(var(--rd-font-size) - 3px);line-height:1.55;color:#c6d8f4}
.rd-clip-failed .rd-clip-frame video{visibility:hidden}

/* Oct 30: 3x3 handbook bingo, liquid-glass cards, a caller banner that cannot be mistaken for a card */
.qz-bingo-instructions{max-width:460px;margin:0 auto 10px;color:#a9bde0;font-size:12.5px;line-height:1.5;text-align:center}
.qz-bingo-clue{position:relative;display:flex;align-items:center;gap:14px;max-width:460px;margin:0 auto 14px;padding:14px 18px;border-radius:16px;overflow:hidden;
  background:linear-gradient(120deg,#2f7dff 0%,#5b6bff 55%,#8a5bff 100%);border:1px solid rgba(200,225,255,.65);color:#fff;font-size:16px;font-weight:800;line-height:1.35;text-align:left;
  box-shadow:0 0 0 3px rgba(80,150,255,.22),0 10px 30px rgba(60,100,255,.45),inset 0 1px 0 rgba(255,255,255,.55)}
.qz-bingo-clue::after{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.qz-bingo-clue.pop{animation:bgClue .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes bgClue{0%{transform:translateY(6px) scale(.98);opacity:.4}100%{transform:none;opacity:1}}
.qz-bingo-tag{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(6,14,40,.55);border:1px solid rgba(255,255,255,.45);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap}
.qz-bingo-tag svg{width:16px;height:16px}
.qz-bingo-q{position:relative;z-index:1}
.qz-bingo-clue.done{background:linear-gradient(120deg,#13b36b,#2ad17e 60%,#6df0b0);box-shadow:0 0 0 3px rgba(60,230,150,.25),0 10px 30px rgba(30,200,120,.45),inset 0 1px 0 rgba(255,255,255,.55)}
.qz-bingo-status{max-width:460px;margin:8px auto 0;min-height:18px;text-align:center}
/* the card: a frosted panel with colour behind it so the glass has something to bend */
.qz-bingo{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:460px;margin:0 auto;padding:16px;border-radius:26px;
  background:radial-gradient(60% 70% at 12% 8%,rgba(47,125,255,.65),transparent 70%),radial-gradient(55% 60% at 92% 18%,rgba(0,225,255,.42),transparent 70%),radial-gradient(60% 70% at 72% 100%,rgba(150,95,255,.5),transparent 70%),rgba(8,16,38,.78);
  border:1px solid rgba(160,205,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 46px rgba(0,0,0,.5)}
.qz-bingo-cell{position:relative;overflow:hidden;aspect-ratio:auto;min-height:78px;height:78px;padding:6px 10px;display:flex;align-items:center;justify-content:center;
  border-radius:18px;border:1px solid rgba(255,255,255,.34);color:#fff;font-size:13.5px;font-weight:750;line-height:1.25;text-align:center;overflow-wrap:normal;word-break:normal;hyphens:manual;text-shadow:0 1px 8px rgba(0,10,40,.55);cursor:pointer;
  background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.07) 48%,rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(14px) saturate(1.7);backdrop-filter:blur(14px) saturate(1.7);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.7),inset 0 -12px 20px rgba(30,80,200,.28),inset 0 0 0 1px rgba(255,255,255,.05),0 10px 20px rgba(0,0,0,.35);
  transition:transform .18s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease}
.qz-bingo-cell::before{content:"";position:absolute;left:3px;right:3px;top:3px;height:46%;border-radius:15px 15px 55% 55%/15px 15px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.02));pointer-events:none}
.qz-bingo-cell:hover:not(.marked){transform:translateY(-3px);border-color:rgba(255,255,255,.7);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.85),inset 0 -12px 20px rgba(60,140,255,.35),0 14px 26px rgba(40,120,255,.38)}
.qz-bingo-cell:active:not(.marked){transform:scale(.97)}
.qz-bingo-cell:focus-visible{outline:3px solid #fff;outline-offset:3px}
.qz-bingo-cell.marked{background:linear-gradient(145deg,rgba(120,255,185,.55),rgba(25,170,105,.26) 55%,rgba(100,250,170,.34));border-color:rgba(170,255,210,.9);cursor:default;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.85),inset 0 -12px 20px rgba(10,150,90,.4),0 0 24px rgba(60,235,150,.5),0 10px 20px rgba(0,0,0,.3)}
.qz-bingo-cell.wrong-pick{animation:bgNo .4s ease;background:linear-gradient(145deg,rgba(255,110,125,.6),rgba(200,30,60,.3));border-color:rgba(255,170,180,.95);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.7),0 0 22px rgba(255,80,100,.5)}
@keyframes bgNo{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.qz-bingo-cell.free{cursor:default;padding:8px;background:linear-gradient(145deg,rgba(255,255,255,.32),rgba(120,200,255,.14) 50%,rgba(255,255,255,.2));border-color:rgba(190,235,255,.85);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.9),inset 0 -12px 20px rgba(40,140,255,.32),0 0 26px rgba(90,210,255,.45),0 10px 20px rgba(0,0,0,.3)}
.player-wrap .qz-bingo-cell.free img{position:static;inset:auto;width:100%;height:100%;background:none;object-fit:contain;display:block;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(0,20,60,.5))}
@media (max-width:720px){.qz-bingo{gap:8px;padding:12px;border-radius:22px}.qz-bingo-cell{min-height:72px;height:72px;font-size:11.5px;padding:4px 3px;border-radius:15px}.qz-bingo-clue{flex-direction:column;align-items:flex-start;gap:8px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.qz-bingo-clue.pop,.qz-bingo-cell.wrong-pick{animation:none}.qz-bingo-cell{transition:none}}

/* Oct 30 (Juan): intro lights: a fluorescent glow runs twice clockwise around the squares, then the logo square flashes */
.qz-bingo-cell.bg-lite{animation:bgLite .5s linear both}
@keyframes bgLite{
  12%{border-color:#eafcff;filter:brightness(1.9);box-shadow:inset 0 0 22px rgba(210,250,255,.75),0 0 0 2px rgba(190,245,255,.95),0 0 30px 8px rgba(110,225,255,.95)}
  18%{filter:brightness(1.15)}
  26%{border-color:#eafcff;filter:brightness(2);box-shadow:inset 0 0 24px rgba(210,250,255,.8),0 0 0 2px rgba(190,245,255,1),0 0 34px 10px rgba(110,225,255,1)}
  60%{filter:brightness(1.35);box-shadow:inset 0 0 12px rgba(210,250,255,.35),0 0 0 1px rgba(190,245,255,.5),0 0 18px 4px rgba(110,225,255,.45)}}
.qz-bingo-cell.free.bg-flash{animation:bgFlash 1.25s ease-out both}
@keyframes bgFlash{
  12%{transform:scale(1.07);filter:brightness(2.6) saturate(1.2);border-color:#fff;box-shadow:inset 0 0 30px rgba(255,255,255,.95),0 0 0 3px #fff,0 0 60px 20px rgba(150,235,255,1)}
  26%{transform:scale(1.02);filter:brightness(1.2)}
  42%{transform:scale(1.08);filter:brightness(2.8) saturate(1.2);border-color:#fff;box-shadow:inset 0 0 30px rgba(255,255,255,1),0 0 0 3px #fff,0 0 70px 24px rgba(150,235,255,1)}
  70%{transform:scale(1.01);filter:brightness(1.35)}}
@media (prefers-reduced-motion:reduce){.qz-bingo-cell.bg-lite,.qz-bingo-cell.free.bg-flash{animation:none}}

/* Oct 30 (Juan): the caller clue is a speaker button; while Danny talks the tag's speaker pulses and the logo square glows */
.qz-bingo-clue[role=button]{cursor:pointer}
.qz-bingo-clue[role=button]:hover{filter:brightness(1.08)}
.qz-bingo-clue[role=button]:focus-visible{outline:3px solid #fff;outline-offset:3px}
.qz-bingo-clue.talking .qz-bingo-tag svg{animation:bgSpk .5s ease-in-out infinite alternate}
@keyframes bgSpk{to{transform:scale(1.25);filter:drop-shadow(0 0 6px #fff)}}
.qz-bingo-cell.free.bg-talk{animation:bgTalk .45s ease-in-out infinite alternate}
@keyframes bgTalk{to{filter:brightness(1.45);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.9),0 0 0 2px rgba(190,245,255,.8),0 0 34px 8px rgba(110,225,255,.75)}}
@media (prefers-reduced-motion:reduce){.qz-bingo-clue.talking .qz-bingo-tag svg,.qz-bingo-cell.free.bg-talk{animation:none}}

/* ---------- Oct 31 2026 (Juan): Texas skyline + more signs, steering wheel on the timer card ---------- */
.bg-signs-left2{position:absolute;left:14px;top:560px;width:190px;opacity:.36}
.bg-signs-right2{position:absolute;right:10px;top:580px;width:200px;opacity:.36}
.bg-txsky{position:absolute;left:0;right:0;bottom:0;width:100%;height:210px;opacity:.38}
@media (max-width:1500px){.bg-signs-left2,.bg-signs-right2{opacity:.2}.bg-txsky{opacity:.26}}
@media (max-height:820px){.bg-signs-left2,.bg-signs-right2{display:none}}
.wheel-art .wh{filter:drop-shadow(0 0 6px rgba(61,165,255,.75));transform-box:view-box;transform-origin:100px 74px;animation:wh-steer 9s ease-in-out infinite}
@keyframes wh-steer{0%,100%{transform:rotate(-9deg);opacity:.8}50%{transform:rotate(9deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.wheel-art .wh{animation:none}}
/* Oct 31 (Juan): the timer's numbers stay in front of the steering wheel */
.timer-card .bolt-art{z-index:0}
.timer-card .rc-head,.timer-card .timer-digits,.timer-card .timer-units,.timer-card .timer-sub,.timer-card button{position:relative;z-index:1}
/* Oct 31 (Juan): module skylines, a little taller, crossfading per module (tx-skyline-switch.js) */
.bg-txsky{height:270px}
.bg-txsky .sky-layer{transition:opacity 1.4s ease}
.sky-city{position:absolute;right:22px;bottom:10px;font:700 11px/1 var(--font-ui,system-ui);letter-spacing:.24em;text-transform:uppercase;color:#2f63b8;opacity:.6}
@media (max-width:1500px){.bg-txsky{height:230px}}
@media (prefers-reduced-motion:reduce){.bg-txsky .sky-layer{transition:none}}

/* Oct 31: the per-module city skyline replaces the old generic one */
.bg-skyline{display:none}

/* TOTP setup: "Step 1: Get the app" (2026-11-05). Download QRs are labeled
   "Scan to download the app"; the setup QR is labeled "Scan this with the app". */
.getapp{width:100%;text-align:left;border:1px solid rgba(90,150,255,.3);border-radius:12px;background:rgba(12,24,52,.5)}
.getapp summary{cursor:pointer;padding:12px 14px;font-weight:800;color:#eaf3ff;font-size:14px}
.getapp[open] summary{border-bottom:1px solid rgba(90,150,255,.2)}
.getapp-body{padding:10px 14px 12px}
.getapp-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}
.getapp-app{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:rgba(4,10,24,.5);border-radius:10px;padding:10px;color:#eaf3ff;font-size:13px}
.getapp-icon{width:56px;height:56px;border-radius:13px}
.getapp-badges{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.getapp-badges a{display:block;line-height:0}
.getapp-qr{background:#fff;border-radius:8px;padding:6px;line-height:0}
.getapp-qr img{width:120px;height:auto;display:block}
.getapp-qr-label{font-weight:700;color:#c6d8f4}
.getapp-tip{margin-top:8px}
.getapp-marks{font-size:10.5px;color:#8ea3c4;line-height:1.5;margin:8px 0 0}
.totp-step2{font-weight:800;color:#eaf3ff;font-size:14px;margin-top:4px}
.totp-scan-label{font-weight:700;color:#c6d8f4;font-size:13px;margin:-4px 0 0}

/* Enrollment form (2026-11-05): required-field star and legend, phone text
   disclosure, the clickwrap line directly above the checkout button. */
.req{color:#ffb547;font-weight:800}
.req-legend{font-size:11.5px;color:#9fb6dd;margin:0 0 -4px;text-align:right}
.req-legend span{color:#ffb547;font-weight:800}
.phone-note{font-size:11px;line-height:1.45;color:#9fb6dd;font-weight:400;letter-spacing:0}
.doc-versions{font-size:11px;color:#8ea3c4;margin:4px 0 0}
.agree-line{font-size:12.5px;line-height:1.55;color:#c6d8f4;margin:4px 0 0}
.agree-line a{color:#9cc3ff;text-decoration:underline}
.agree-line a:focus-visible{outline:2px solid #9cc3ff;outline-offset:2px}