/* INTXA learner area — built on app.css + v2.css tokens. */
.lflashes { padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.lflash { padding: 12px 16px; border-radius: var(--r-card); border: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.9; }
.lflash--ok { border-color: color-mix(in srgb, var(--tone-build) 50%, transparent); background: color-mix(in srgb, var(--tone-build) 8%, transparent); }
.lflash--warn { border-color: color-mix(in srgb, var(--tone-gov) 50%, transparent); background: color-mix(in srgb, var(--tone-gov) 8%, transparent); }
.lflash--error { border-color: color-mix(in srgb, var(--flare) 55%, transparent); background: color-mix(in srgb, var(--flare) 8%, transparent); }
.lkicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--tone, var(--haze)); }
.lbadge { display: inline-block; font-size: var(--fs-xs); padding: 1px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ion-soft); background: var(--nebula); line-height: 1.8; }
.lbadge--ok { color: var(--tone-build); border-color: color-mix(in srgb, var(--tone-build) 45%, var(--line)); }
.lbadge--muted { color: var(--haze); }
.lempty { padding: 36px 24px; border: 1px dashed var(--line); border-radius: var(--r-panel); text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; color: var(--haze); line-height: 1.95; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* user menu */
.umenu { position: relative; }
.umenu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: var(--r-pill); }
.umenu summary::-webkit-details-marker { display: none; }
.umenu summary:hover { background: var(--nebula); }
.uavatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--nebula); border: 1px solid var(--line); color: var(--tone-gov); font-weight: 600; }
.umenu__name { font-size: var(--fs-sm); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu__pop { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 180px; padding: 6px; border-radius: var(--r-card); background: var(--orbit); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; z-index: 60; }
.umenu__pop a, .umenu__pop button { text-align: start; padding: 8px 12px; border-radius: 8px; color: var(--starlight); background: none; border: 0; cursor: pointer; font-size: var(--fs-sm); }
.umenu__pop a:hover, .umenu__pop button:hover { background: var(--nebula); text-decoration: none; }
.umenu__pop form { margin: 0; }
@media (max-width: 640px) { .umenu__name { display: none; } }

/* auth */
.auth { min-height: calc(100vh - 200px); display: grid; place-items: center; padding-block: 48px; }
.auth__card { width: min(100%, 440px); display: flex; flex-direction: column; gap: 16px; padding: 32px 28px; border-radius: var(--r-panel); background: var(--orbit); border: 1px solid var(--line); }
.auth__card h1 { font-size: var(--fs-2xl); }
.auth__card .muted { line-height: 1.95; }
.auth__links { font-size: var(--fs-sm); text-align: center; color: var(--haze); }
.lfield { display: flex; flex-direction: column; gap: 6px; }
.lfield > span { font-size: var(--fs-sm); color: var(--haze); }
.lfield input { width: 100%; min-height: 46px; padding: 8px 14px; border-radius: var(--r-input); background: var(--nebula); border: 1px solid var(--line); color: var(--starlight); }
.lfield input:focus { outline: none; border-color: var(--ion); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ion) 25%, transparent); }
.lfield input[aria-invalid="true"] { border-color: var(--flare); }
.lerr { color: var(--flare); font-size: var(--fs-xs); }
.lcheck { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.9; color: var(--haze); cursor: pointer; }
.lcheck input { margin-top: 7px; accent-color: var(--ion); }

/* course page */
.chero { position: relative; padding-block: clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 45%); }
.chero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.chero__t { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; margin-top: 14px; line-height: 1.5; }
.chero__o { margin-top: 16px; color: var(--haze); font-size: var(--fs-lg); line-height: 2; font-family: var(--font-read); }
.chero__o b { color: var(--starlight); }
.chero__meta { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--haze); font-size: var(--fs-sm); }
.chero__meta b { color: var(--tone); font-family: var(--font-mono); font-size: var(--fs-lg); }
.chero .x-ctas { margin-top: 28px; }
.chero__side { padding: 24px; border-radius: var(--r-panel); background: var(--orbit); border: 1px solid var(--line); border-top: 2px solid var(--tone); }
.chero__side h2 { font-size: var(--fs-lg); margin-bottom: 12px; }
.chero__side h3 { font-size: var(--fs-base); margin: 20px 0 8px; color: var(--haze); }
.skillmap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.skillmap li, .dskills summary { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); line-height: 1.8; }
.skillmap__dot { flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; border: 1.5px solid var(--tone, var(--ion)); background: transparent; }
.is-started .skillmap__dot { background: linear-gradient(to left, var(--tone, var(--ion)) 50%, transparent 50%); }
.is-mastered .skillmap__dot { background: var(--tone, var(--ion)); box-shadow: 0 0 10px var(--tone, var(--ion)); }
.prelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.lprog { height: 6px; border-radius: 6px; background: var(--nebula); overflow: hidden; margin-top: 20px; max-width: 420px; }
.lprog span { display: block; height: 100%; width: var(--w, 0%); background: var(--tone); border-radius: 6px; }
.csec { padding-block: 56px 16px; }
.csec .x-h2 { margin-bottom: 24px; }
.cmod { margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--orbit); overflow: hidden; }
.cmod__t { padding: 14px 20px; font-size: var(--fs-base); border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.clessons { list-style: none; margin: 0; padding: 0; }
.clessons li { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.clessons li:last-child { border-bottom: 0; }
.clessons li > a, .clessons li > span:nth-child(2) { flex: 1; color: var(--starlight); }
.clessons li > span:nth-child(2) { color: var(--haze); }
.clessons__st { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; color: var(--void); }
.is-done .clessons__st { background: var(--tone-build); border-color: var(--tone-build); }
.clessons__meta { color: var(--haze); font-size: var(--fs-xs); white-space: nowrap; display: flex; gap: 8px; align-items: center; }
@media (max-width: 900px) { .chero__grid { grid-template-columns: minmax(0, 1fr); } }

/* dashboard */
.dash { padding-block: 40px 72px; }
.dash__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }
.dash__stats { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.dash__stats li { padding: 10px 18px; border-radius: var(--r-card); background: var(--orbit); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 120px; }
.dash__stats b { font-family: var(--font-mono); font-size: var(--fs-xl); }
.dash__stats span { font-size: var(--fs-xs); color: var(--haze); }
.nba { position: relative; display: grid; gap: 4px; padding: 24px 28px; border-radius: var(--r-panel); color: var(--starlight);
  background: linear-gradient(110deg, color-mix(in srgb, var(--tone) 22%, var(--orbit)), var(--orbit) 70%); border: 1px solid color-mix(in srgb, var(--tone) 50%, var(--line)); }
.nba:hover { text-decoration: none; box-shadow: 0 18px 50px -28px var(--tone); }
.nba__k { font-size: var(--fs-sm); color: var(--tone); font-weight: 600; }
.nba__t { font-size: var(--fs-xl); font-weight: 700; line-height: 1.6; }
.nba__m { font-size: var(--fs-sm); color: var(--haze); }
.nba__go { position: absolute; inset-inline-end: 28px; top: 50%; transform: translateY(-50%); font-size: 28px; color: var(--tone); }
.dash__h { font-size: var(--fs-xl); margin-top: 48px; }
.dash .muted.small { margin-top: 6px; line-height: 1.9; }
.dcourses { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dcourse { padding: 20px; border-radius: var(--r-card); background: var(--orbit); border: 1px solid var(--line); }
.dcourse.is-enrolled { border-color: color-mix(in srgb, var(--tone) 45%, var(--line)); }
.dcourse__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.dcourse__head > div { flex: 1; }
.dcourse__head h3 { font-size: var(--fs-lg); line-height: 1.6; }
.dcourse__head h3 a { color: var(--starlight); }
.dcourse .x-course__n { font-size: 1.6rem; }
.dskills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dskills summary { cursor: pointer; list-style: none; padding: 4px 6px; border-radius: 8px; }
.dskills summary::-webkit-details-marker { display: none; }
.dskills summary:hover { background: var(--nebula); }
.why { margin: 4px 26px 10px 0; padding: 10px 14px; border-radius: 8px; background: var(--void); border: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.95; }
.why ul { margin: 4px 0; padding-inline-start: 18px; }
@media (max-width: 860px) { .dcourses { grid-template-columns: minmax(0, 1fr); } }

/* lesson player */
body.is-player .nav { position: sticky; }
.player { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100vh - 68px); }
.player__side { position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; padding: 24px 18px; border-inline-end: 1px solid var(--line); background: var(--orbit); }
.player__course { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--starlight); margin-bottom: 16px; line-height: 1.7; }
.player__mod { font-size: var(--fs-xs); color: var(--haze); margin: 16px 0 6px; }
.player__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.player__list a { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; font-size: var(--fs-sm); color: var(--haze); line-height: 1.7; }
.player__list a:hover { background: var(--nebula); text-decoration: none; color: var(--starlight); }
.player__list .is-current a { background: var(--nebula); color: var(--starlight); box-shadow: inset -3px 0 0 var(--tone); }
.player__list .clessons__st { width: 18px; height: 18px; margin-top: 4px; font-size: 10px; }
.player__main { width: 100%; max-width: 820px; margin-inline: auto; padding: 40px clamp(16px, 4vw, 48px) 80px; }
.player__head { margin-bottom: 32px; }
.player__toggle { display: none; margin-bottom: 12px; }
.player__t { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.55; margin-top: 10px; }
.player__head .x-tags { margin-top: 14px; }
.blocks { display: flex; flex-direction: column; gap: 28px; }
.prose { font-family: var(--font-read); font-size: 1.1rem; line-height: 2.05; max-width: 68ch; }
.prose h2 { font-family: var(--font); font-size: var(--fs-xl); margin: 12px 0 4px; line-height: 1.6; }
.prose h3 { font-family: var(--font); font-size: var(--fs-lg); margin: 8px 0 2px; line-height: 1.6; }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + ol { margin-top: 14px; }
.prose ul, .prose ol { padding-inline-start: 24px; margin: 0; }
.prose li + li { margin-top: 6px; }
.prose code { font-family: var(--font-mono); font-size: .88em; padding: 1px 6px; border-radius: 4px; background: var(--nebula); border: 1px solid var(--line); }
.prose blockquote { margin: 0; padding: 4px 18px; border-inline-start: 3px solid var(--tone); color: var(--haze); }
.prose strong { color: var(--starlight); }
.blk--callout { padding: 16px 20px; border-radius: var(--r-card); background: var(--orbit); border: 1px solid var(--line); border-inline-start: 3px solid var(--ion); }
.callout--tip { border-inline-start-color: var(--tone-build); }
.callout--warn { border-inline-start-color: var(--tone-gov); }
.callout__k { font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; color: var(--haze); margin-bottom: 4px; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #000; border: 1px solid var(--line); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blk--video figcaption { margin-top: 8px; }
.blk--video { margin: 0; }
.blk--code .code__bar button { min-height: 28px; }
.cp, .blk--reflect { padding: 22px 24px; border-radius: var(--r-panel); background: var(--orbit); border: 1px solid var(--line); border-top: 2px solid var(--tone); }
.cp.is-solved { border-top-color: var(--tone-build); }
.cp__k { font-size: var(--fs-xs); color: var(--tone); font-weight: 600; }
.cp__q { font-size: var(--fs-lg); font-weight: 600; margin: 6px 0 14px; line-height: 1.8; }
.cp__opts { display: flex; flex-direction: column; gap: 8px; }
.cp__opt { text-align: start; padding: 12px 16px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--void); cursor: pointer; font-size: var(--fs-base); line-height: 1.8; transition: border-color .15s, background-color .15s; }
.cp__opt:hover:not([disabled]) { border-color: var(--ion); }
.cp__opt[disabled] { cursor: default; }
.cp__opt.is-right { border-color: var(--tone-build); background: color-mix(in srgb, var(--tone-build) 12%, var(--void)); }
.cp__opt.is-wrong { border-color: var(--flare); background: color-mix(in srgb, var(--flare) 9%, var(--void)); }
.cp__fb { margin-top: 12px; min-height: 1.9em; font-family: var(--font-read); line-height: 1.95; }
.cp__fb.is-right { color: var(--tone-build); }
.cp__fb.is-wrong { color: var(--flare); }
.blk--reflect textarea { width: 100%; padding: 12px 14px; border-radius: var(--r-card); background: var(--void); border: 1px solid var(--line); color: var(--starlight); font-family: var(--font-read); line-height: 1.9; resize: vertical; }
.player__foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.player__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.player__nav form { margin: 0; }
@media (max-width: 960px) {
  .player { grid-template-columns: minmax(0, 1fr); }
  .player__side { position: fixed; inset-block: 68px 0; inset-inline-start: 0; width: min(86vw, 320px); z-index: 40; height: auto; transform: translateX(100%); transition: transform .25s var(--ease); box-shadow: -20px 0 40px rgba(0,0,0,.35); }
  html[dir="ltr"] .player__side { transform: translateX(-100%); }
  .player__side.is-open { transform: none; }
  .player__toggle { display: inline-flex; }
}
.cp__opt.is-hint { border-color: var(--tone-build); border-style: dashed; }
.preview-bar { position: sticky; top: 0; z-index: 10; margin: 0; padding: 8px 16px; text-align: center; font-size: var(--fs-sm); background: var(--tone-gov); color: #1a1200; font-weight: 600; }
.player--preview { grid-template-columns: minmax(0, 1fr); }

/* checkout */
.co { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding-block: 56px 80px; }
.co__desc { margin-top: 14px; line-height: 2; font-size: var(--fs-lg); font-family: var(--font-read); }
.co__desc b { color: var(--starlight); }
.co__list { margin-top: 24px; }
.co__list li > span:first-child { color: var(--tone-build); font-weight: 700; }
.co__card { position: sticky; top: 88px; padding: 26px; border-radius: var(--r-panel); background: var(--orbit); border: 1px solid var(--line); border-top: 2px solid var(--tone); display: flex; flex-direction: column; gap: 16px; }
.co__row { display: flex; gap: 8px; }
.co__row input { flex: 1; min-height: 40px; padding: 6px 12px; border-radius: var(--r-input); background: var(--nebula); border: 1px solid var(--line); color: var(--starlight); font-family: var(--font-mono); text-transform: uppercase; }
.co__sum { margin: 0; display: flex; flex-direction: column; gap: 8px; padding-block: 14px; border-block: 1px solid var(--line); }
.co__sum div { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.co__sum dt { color: var(--haze); } .co__sum dd { margin: 0; font-family: var(--font-mono); }
.co__disc dd { color: var(--tone-build); }
.co__total { font-size: var(--fs-lg) !important; font-weight: 700; }
.co__total dt { color: var(--starlight) !important; }
.co__pay { display: flex; flex-direction: column; gap: 12px; }
.co__note { line-height: 1.9; text-align: center; }
.lok { color: var(--tone-build); font-size: var(--fs-xs); }
.co__ret { text-align: center; align-items: center; }
.co__ok { font-size: 30px; }
.co__spin { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ion); animation: cospin 1s linear infinite; }
@keyframes cospin { to { transform: rotate(360deg); } }
.buybox { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.passcta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 16px; padding: 16px 22px; border-radius: var(--r-card); border: 1px dashed color-mix(in srgb, var(--tone-gov) 60%, var(--line)); color: var(--starlight); background: color-mix(in srgb, var(--tone-gov) 6%, transparent); }
.passcta:hover { text-decoration: none; border-style: solid; }
.passcta b { color: var(--tone-gov); }
.dash--orders { padding-top: 0; }
.orders { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.order { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 18px; border-radius: var(--r-card); background: var(--orbit); border: 1px solid var(--line); color: var(--starlight); }
.order:hover { text-decoration: none; border-color: var(--ion); }
.order small { display: block; }
@media (max-width: 860px) { .co { grid-template-columns: minmax(0, 1fr); } .co__card { position: static; } }

/* ---------- advanced Google Drive lecture player ---------- */
.dplayer { margin: 0; border-radius: var(--r-panel); overflow: hidden; background: #03050f; border: 1px solid var(--line); box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--tone, var(--ion)) 60%, transparent); }
.dplayer__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--ion)) 16%, #070b20), #070b20); color: #E8EEFF; }
.dplayer__live { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--ion)); box-shadow: 0 0 10px var(--tone, var(--ion)); flex: none; }
.dplayer__t { flex: 1; min-width: 0; font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dplayer__dur { font-family: var(--font-mono); font-size: var(--fs-xs); color: #9AA6D1; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(154,166,209,.3); }
.dplayer__btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(154,166,209,.25); background: transparent; color: #E8EEFF; cursor: pointer; display: grid; place-items: center; }
.dplayer__btn:hover { background: rgba(255,255,255,.08); }
.dplayer__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dplayer__stage { position: relative; aspect-ratio: 16 / 9; background: #000; user-select: none; }
.dplayer__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; visibility: hidden; }
.dplayer.is-on .dplayer__stage iframe { visibility: visible; }
.dplayer__poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: pointer; z-index: 3;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tone, var(--ion)) 28%, transparent), transparent 55%), repeating-radial-gradient(circle at 50% 45%, transparent 0 59px, rgba(122,168,255,.07) 59px 60px), #03050f; color: #9AA6D1; font-size: var(--fs-sm); }
.dplayer.is-on .dplayer__poster { display: none; }
.dplayer__play { width: 78px; height: 78px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--tone, var(--ion)); box-shadow: 0 0 0 10px color-mix(in srgb, var(--tone, var(--ion)) 22%, transparent), 0 0 50px var(--tone, var(--ion)); transition: transform .2s var(--ease); }
.dplayer__poster:hover .dplayer__play { transform: scale(1.06); }
.dplayer__play svg { width: 30px; height: 30px; fill: #03050f; margin-inline-start: 4px; }
html[dir="rtl"] .dplayer__play svg { transform: scaleX(1); }
/* covers Drive's top-right "open in new window" control */
.dplayer__shield { position: absolute; top: 0; right: 0; width: 64px; height: 64px; z-index: 2; background: transparent; }
.dplayer__mark { position: absolute; z-index: 2; pointer-events: none; font: 500 12px/1 var(--font-mono); color: rgba(255,255,255,.16); white-space: nowrap; transition: top 1.2s linear, left 1.2s linear; top: 12%; left: 8%; }
.dplayer__foot { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #070b20; }
.dplayer__prog { flex: 1; height: 4px; border-radius: 4px; background: rgba(154,166,209,.18); overflow: hidden; }
.dplayer__prog span { display: block; height: 100%; width: var(--w, 0%); background: var(--tone, var(--ion)); transition: width .6s linear; }
.dplayer__watch { white-space: nowrap; color: #9AA6D1 !important; }
/* Fullscreen styles (Native + Simulated iOS viewport mode) */
.dplayer:fullscreen,
.dplayer:-webkit-full-screen,
.dplayer.is-fs {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  z-index: 999999 !important;
  background: #000 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.dplayer:fullscreen .dplayer__stage,
.dplayer:-webkit-full-screen .dplayer__stage,
.dplayer.is-fs .dplayer__stage {
  flex: 1 1 0% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  width: 100% !important;
  position: relative !important;
}

.dplayer:fullscreen .dplayer__stage iframe,
.dplayer:-webkit-full-screen .dplayer__stage iframe,
.dplayer.is-fs .dplayer__stage iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}

.dplayer:fullscreen .dplayer__bar,
.dplayer:-webkit-full-screen .dplayer__bar,
.dplayer.is-fs .dplayer__bar {
  background: rgba(3, 5, 15, 0.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 18px !important;
  z-index: 10;
}

.dplayer:fullscreen .dplayer__foot,
.dplayer:-webkit-full-screen .dplayer__foot,
.dplayer.is-fs .dplayer__foot {
  background: rgba(3, 5, 15, 0.96) !important;
  z-index: 10;
}

body.is-player-fs {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Theater / Expanded Mode on desktop and mobile */
body.is-theater .player { grid-template-columns: minmax(0, 1fr) !important; }
body.is-theater .player__side { display: none !important; }
body.is-theater .player__main { max-width: 100% !important; width: 100% !important; }

/* Mobile Expanded Mode */
@media (max-width: 820px) {
  .dplayer.is-expanded {
    margin-inline: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  .dplayer.is-expanded .dplayer__stage {
    aspect-ratio: 16 / 9 !important;
    width: 100vw !important;
  }
}

/* ==========================================================================
   SKILLS BOARD & CONSTELLATION (/app/skills) — LMS Spec §4.9
   ========================================================================== */
.skills-page { padding-block: 40px 80px; }
.skills-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.skills-head__intro { max-width: 680px; }
.skills-head__intro h1 { margin: 10px 0 12px; }
.skills-head__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.skills-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 32px; }
.sk-stat-card { background: var(--orbit); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 22px; position: relative; overflow: hidden; box-shadow: 0 10px 30px -15px rgba(0,0,0,.5); }
.sk-stat-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--ion); }
.sk-stat-card[data-tone="aurora"]::before { background: var(--aurora, #10b981); }
.sk-stat-card[data-tone="build"]::before { background: var(--ion, #4f46e5); }
.sk-stat-card .sk-stat-k { font-size: var(--fs-sm); color: var(--haze); display: block; margin-bottom: 6px; }
.sk-stat-card .sk-stat-v { font-size: 32px; font-weight: 800; font-family: var(--font-mono, monospace); color: var(--starlight); display: block; line-height: 1.1; }
.sk-stat-card .sk-stat-v small { font-size: 16px; font-weight: 500; color: var(--haze); }
.sk-stat-card .sk-stat-d { font-size: var(--fs-xs); color: var(--haze); display: block; margin-top: 8px; }
.sk-stat-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; margin-top: 14px; overflow: hidden; }
.sk-stat-bar-fill { height: 100%; background: var(--aurora, #10b981); border-radius: 999px; transition: width .6s ease; }

.sk-constellation-wrap { background: var(--orbit); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 24px; margin-bottom: 40px; }
.sk-constellation-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 16px; }
.sk-constellation-legend { display: flex; gap: 16px; font-size: var(--fs-xs); color: var(--haze); }
.sk-constellation-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-inline-end: 4px; }
.dot--mastered { background: #34d399; box-shadow: 0 0 8px #34d399; }
.dot--started { background: #60a5fa; box-shadow: 0 0 6px #60a5fa; }
.dot--locked { background: rgba(255,255,255,.3); }

.sk-tracks-section { margin-top: 40px; }
.sk-track-card { background: var(--orbit); border: 1px solid var(--line); border-radius: var(--r-panel); margin-bottom: 24px; overflow: hidden; }
.sk-track-head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: linear-gradient(90deg, rgba(255,255,255,.03), transparent); border-bottom: 1px solid var(--line); }
.sk-track-badge { background: var(--ion); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; }
.sk-track-card[data-tone="found"] .sk-track-badge { background: #6366f1; }
.sk-track-card[data-tone="build"] .sk-track-badge { background: #3b82f6; }
.sk-track-card[data-tone="agents"] .sk-track-badge { background: #8b5cf6; }
.sk-track-card[data-tone="gov"] .sk-track-badge { background: #10b981; }

.sk-domain-group { padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.05); }
.sk-domain-group:last-child { border-bottom: 0; }
.sk-domain-title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; font-size: var(--fs-md); }
.sk-domain-count { font-size: var(--fs-xs); color: var(--haze); font-weight: normal; }

.sk-skills-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sk-skills-table { width: 100%; border-collapse: collapse; text-align: start; font-size: var(--fs-sm); }
.sk-skills-table th { padding: 10px 14px; color: var(--haze); font-weight: 600; border-bottom: 1px solid var(--line); font-size: 12px; }
.sk-skills-table td { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.sk-skill-row:hover td { background: rgba(255,255,255,.015); }
.sk-skill-row.is-mastered .sk-bullet { background: #10b981; box-shadow: 0 0 8px #10b981; }
.sk-skill-row.is-started .sk-bullet { background: #3b82f6; }

.sk-name-box { display: flex; align-items: center; gap: 12px; }
.sk-bullet { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); flex-shrink: 0; }
.sk-title { display: block; color: var(--starlight); font-size: 14px; }
.sk-sub { display: block; font-size: 11px; color: var(--haze); font-family: var(--font-mono, monospace); }

.sk-progress-box { display: flex; align-items: center; gap: 10px; max-width: 180px; }
.sk-progress-bar { flex: 1; height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.sk-progress-fill { height: 100%; background: var(--ion); border-radius: 999px; }
.is-mastered .sk-progress-fill { background: #10b981; }
.sk-progress-val { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--starlight); min-width: 36px; text-align: end; }

.sk-evidence-details { position: relative; }
.sk-evidence-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; user-select: none; }
.sk-evidence-summary::-webkit-details-marker { display: none; }
.sk-why-link { color: var(--ion); font-size: 11px; margin-inline-start: auto; font-weight: 600; }
.sk-retention-pill { font-size: 11px; background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 999px; color: var(--haze); }

.sk-evidence-dropdown { margin-top: 10px; padding: 14px 16px; background: var(--nebula, #0b112c); border: 1px solid var(--line); border-radius: var(--r-card); font-size: 12px; animation: fadeIn .2s ease; }
.sk-evidence-explainer { margin: 0 0 10px; color: var(--haze); }
.sk-evidence-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sk-evidence-list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; background: rgba(255,255,255,.03); border-radius: 6px; }
.sk-ev-type { color: var(--starlight); font-weight: 500; }
.sk-ev-stats { color: var(--haze); font-family: var(--font-mono, monospace); font-size: 11px; }

/* ==========================================================================
   PUBLIC LEARNER PORTFOLIO (/u/[username]) — LMS Spec §4.10
   ========================================================================== */
.portfolio-page { padding-block: 40px 80px; }
.pf-header { background: var(--orbit); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 32px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; position: relative; overflow: hidden; }
.pf-identity { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; flex: 1; }
.pf-avatar { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--ion), var(--aurora, #10b981)); color: #fff; font-size: 38px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 30px rgba(99,102,241,.3); flex-shrink: 0; }
.pf-meta { flex: 1; min-width: 240px; }
.pf-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pf-name { margin: 0; font-size: 26px; font-weight: 800; color: var(--starlight); }
.pf-handle { font-family: var(--font-mono, monospace); color: var(--haze); font-size: 14px; }
.pf-headline { font-size: 15px; color: var(--starlight); margin: 6px 0 12px; font-weight: 500; }
.pf-info-row { display: flex; gap: 16px; font-size: 12px; color: var(--haze); margin-bottom: 12px; flex-wrap: wrap; }
.pf-info-item { display: inline-flex; align-items: center; gap: 6px; }
.pf-bio { font-size: 14px; color: var(--haze); line-height: 1.6; margin-bottom: 16px; max-width: 700px; }

.pf-social-links { display: flex; gap: 10px; flex-wrap: wrap; }
.pf-social-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 8px; color: var(--starlight); font-size: 12px; text-decoration: none; transition: all .2s ease; }
.pf-social-btn:hover { background: rgba(255,255,255,.1); border-color: var(--ion); text-decoration: none; color: #fff; }

.pf-stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.pf-stat-item { background: var(--orbit); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 24px; text-align: center; }
.pf-stat-item b { display: block; font-size: 32px; font-weight: 800; font-family: var(--font-mono, monospace); color: var(--starlight); line-height: 1.1; }
.pf-stat-item span { font-size: 13px; color: var(--haze); margin-top: 4px; display: block; }

.pf-section { margin-bottom: 36px; }
.pf-sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.pf-sec-head h2 { margin: 0; }

.pf-skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pf-skill-chip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--orbit); border: 1px solid var(--line); border-radius: var(--r-card); transition: transform .2s ease; }
.pf-skill-chip:hover { transform: translateY(-2px); border-color: var(--ion); }
.pf-skill-star { color: #f59e0b; font-size: 16px; flex-shrink: 0; }
.pf-skill-info strong { display: block; font-size: 13px; color: var(--starlight); }
.pf-skill-info small { display: block; font-size: 11px; color: var(--haze); margin-top: 2px; }

.pf-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pf-project-card { background: var(--orbit); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; }
.pf-prj-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pf-prj-title { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--starlight); }
.pf-prj-desc { font-size: 13px; color: var(--haze); line-height: 1.5; margin: 0 0 16px; flex: 1; }
.pf-mentor-note { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #a7f3d0; margin-bottom: 16px; }
.pf-mentor-note strong { display: block; margin-bottom: 3px; }
.pf-prj-actions { display: flex; gap: 10px; margin-top: auto; }

.pf-certs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pf-cert-card { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--orbit); border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: inherit; transition: all .2s ease; }
.pf-cert-card:hover { border-color: var(--aurora, #10b981); transform: translateY(-2px); text-decoration: none; }
.pf-cert-seal { width: 36px; height: 36px; border-radius: 50%; background: rgba(16,185,129,.15); color: #10b981; display: grid; place-items: center; font-size: 16px; font-weight: bold; flex-shrink: 0; }
.pf-cert-info { flex: 1; min-width: 0; }
.pf-cert-info strong { display: block; font-size: 14px; color: var(--starlight); margin-bottom: 2px; }
.pf-cert-sub { display: flex; gap: 10px; font-size: 11px; color: var(--haze); margin-top: 4px; font-family: var(--font-mono, monospace); }
.pf-cert-arrow { font-size: 18px; color: var(--haze); transition: transform .2s ease; }
.pf-cert-card:hover .pf-cert-arrow { transform: translateX(-4px); color: #10b981; }

.pf-private-box { background: var(--orbit); border: 1px dashed var(--line); border-radius: var(--r-panel); padding: 60px 24px; text-align: center; }
.pf-private-icon { font-size: 48px; margin-bottom: 16px; }

/* ==========================================================================
   PORTFOLIO SETTINGS (/app/portfolio)
   ========================================================================== */
.portfolio-settings-page { padding-block: 40px 80px; max-width: 760px; }
.pfs-head { margin-bottom: 28px; }
.pfs-head h1 { margin: 8px 0 10px; }
.pfs-form { background: var(--orbit); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.pfs-group { display: flex; flex-direction: column; gap: 6px; }
.pfs-label { font-size: 13px; font-weight: 600; color: var(--starlight); }
.pfs-hint { font-size: 11px; color: var(--haze); margin: 2px 0 0; }
.pfs-input, .pfs-textarea { width: 100%; padding: 11px 14px; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 8px; color: var(--starlight); font-family: inherit; font-size: 14px; transition: border-color .2s; }
.pfs-input:focus, .pfs-textarea:focus { border-color: var(--ion); outline: none; }
.pfs-input-prefix-box { display: flex; align-items: center; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.pfs-input-prefix-box:focus-within { border-color: var(--ion); }
.pfs-prefix { padding: 0 12px; font-family: var(--font-mono, monospace); font-size: 13px; color: var(--haze); background: rgba(255,255,255,.03); border-inline-end: 1px solid var(--line); height: 100%; display: flex; align-items: center; }
.pfs-input-prefix-box .pfs-input { border: 0; border-radius: 0; background: transparent; }
.pfs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .pfs-grid-2 { grid-template-columns: 1fr; } }

.pfs-privacy-box { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 10px; gap: 16px; }
.pfs-privacy-info strong { display: block; font-size: 14px; color: var(--starlight); }
.pfs-privacy-info p { margin: 4px 0 0; }

.pfs-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; cursor: pointer; }
.pfs-switch input { opacity: 0; width: 0; height: 0; }
.pfs-slider { position: absolute; inset: 0; background-color: rgba(255,255,255,.2); border-radius: 34px; transition: .3s; }
.pfs-slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .3s; }
.pfs-switch input:checked + .pfs-slider { background-color: var(--ion); }
.pfs-switch input:checked + .pfs-slider::before { transform: translateX(22px); }

.pfs-actions { display: flex; gap: 14px; align-items: center; margin-top: 10px; }


.nav__live { display: inline-block; margin-inline-start: 4px; padding: 0 7px; border-radius: 999px; font-size: .68rem; line-height: 1.7; color: #fff; background: #E0314F; vertical-align: 2px; }

/* live program card on /app */
.dash-live { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 20px; padding: 18px 22px; border-radius: var(--r-panel); border: 1px solid color-mix(in srgb, var(--tone-gov) 40%, var(--line)); background: color-mix(in srgb, var(--tone-gov) 7%, var(--orbit)); }
.dash-live__txt { display: grid; gap: 4px; min-width: 0; }
.dash-live__k { color: var(--tone-gov); font-size: var(--fs-sm); font-weight: 600; }
.dash-live__t { color: var(--starlight); font-size: 1.05rem; }
.dash-live__m { color: var(--muted, #8E9BC9); font-size: var(--fs-sm); }
.dash-live__cta { display: flex; flex-wrap: wrap; gap: 10px; }