@charset "UTF-8";

/* Палитра из Referense/palette.scss. Геометрия кнопок — по обоим референсам. */
@property --glass-angle { syntax: "<angle>"; inherits: true; initial-value: -75deg; }
:root {
  color-scheme: dark;
  --silver: #bfacaa;
  --black: #02020a;
  --prussian-blue: #05204a;
  --wisteria: #b497d6;
  --lavender: #e1e2ef;
  --bg: #02020a;
  --surface: #0c1020;
  --ink: #e1e2ef;
  --muted: #9698b0;
  --line: rgba(225,226,239,.10);
  --accent: #b497d6;
  --accent-light: rgba(180,151,214,.12);
  --green: #b497d6;
  --radius: 24px;
  --panel: linear-gradient(145deg,rgba(225,226,239,.055),rgba(5,32,74,.11) 55%,rgba(180,151,214,.025));
  --panel-shadow: inset 0 1px 0 rgba(225,226,239,.07),0 16px 44px rgba(0,0,0,.16);
  font-family: "Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
}
html { background:var(--black); }
body { background:radial-gradient(ellipse at 78% 3%,rgba(5,32,74,.4),transparent 50%),radial-gradient(ellipse at 35% 67%,rgba(180,151,214,.035),transparent 45%),var(--black); background-attachment:fixed; }
::selection { background:rgba(180,151,214,.38); color:#fff; }
* { scrollbar-width:thin; scrollbar-color:#39324e transparent; }
[hidden] { display:none!important; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--wisteria); outline-offset:4px; }
input,textarea,select { accent-color:var(--wisteria); }
h1,h2,h3,h4 { color:var(--lavender); }
h1 { font-size:31px; font-weight:600; letter-spacing:-1px; }
.muted { color:var(--muted); }
.sidebar { background:linear-gradient(180deg,rgba(13,15,29,.94),rgba(5,7,17,.94)); border-right:1px solid rgba(225,226,239,.08); backdrop-filter:blur(28px); }
.brand { color:var(--lavender); font-weight:650; }
.brand-light { color:#b9a7d3; }
.brand small { color:#7c7e99; letter-spacing:1.65px; }
.brand-mark { border:1px solid rgba(225,226,239,.3); background:linear-gradient(135deg,rgba(225,226,239,.2),rgba(180,151,214,.23) 45%,rgba(5,32,74,.7)); color:#f0eafa; box-shadow:inset 0 1px 1px #ffffff38,inset 0 -1px 2px #b497d644,0 6px 24px #0006; border-radius:13px; }
.brand-mark span { color:var(--silver); }
.workspace-label { color:#9995ac; }
.status-dot { background:var(--wisteria); box-shadow:0 0 8px #b497d63b; }
.local-tag { background:#b497d608; border-color:#b497d624; color:#c3afd9; }
.nav-label { color:#666981; }
nav { gap:8px; }
nav a { color:#999bb2; font-size:12px; border:1px solid transparent; min-height:47px; }
nav a:hover { background:#e1e2ef06; border-color:#e1e2ef0c; color:var(--lavender); }
nav a.active { background:linear-gradient(115deg,#b497d626,#b497d60a); border-color:#b497d632; color:#d7c3ed; box-shadow:inset 0 1px 0 #e1e2ef14,0 5px 18px #0002; }
.nav-indicator { background:#d4b6f0; box-shadow:0 0 12px #b497d69c; }
.nav-count { background:#e1e2ef06; border-color:#e1e2ef12; color:#a6a1bb; }
.offline-card { background:linear-gradient(135deg,#b497d60b,#05204a14); border-color:#b497d617; border-radius:15px; }
.offline-card svg { color:#ae98c9; }
.offline-card strong { color:#c0b8cf; }
.offline-card p { color:#81839e; }
.settings-link { color:#9390aa; line-height:1.6; }
.settings-link:hover { color:#d5c4eb; }
.profile { border-color:#e1e2ef12; }
.profile strong { color:#c6c2d6; }
.profile small { color:#83809a; }
.avatar { background:linear-gradient(135deg,#bfacaa1c,#b497d61a); color:#d1bfcd; border:1px solid #bfacaa26; box-shadow:inset 0 1px 0 #e1e2ef14; }
.topbar { background:rgba(4,6,16,.73); border-bottom-color:#e1e2ef10; backdrop-filter:blur(24px) saturate(120%); }
.breadcrumb { color:#767991; }
.breadcrumb strong { color:#b8b3ca; }
.breadcrumb span { color:#49475e; }
.search-box { color:#8a85a1; }
.search-box input { color:#d0c8df; font-size:12px; }
.search-box input::placeholder { color:#85829d; }
kbd { border-color:#e1e2ef1c; background:#e1e2ef03; color:#9290a7; }
.offline-badge { color:#ac9dba; }
main { padding-top:38px; }
.page-heading { margin-bottom:28px; }
.page-heading p { color:#9292ab; font-size:13px; line-height:1.7; }
.date-label { color:#85839c; font-size:11px; }
.eyebrow { color:var(--wisteria); }
.text-link { color:#aca1be; font-size:11px; }
.text-link:hover { color:#e0c9f8; }
.text-link svg { transition:transform .2s; }
.text-link:hover svg { transform:translateX(3px); }

/* Стеклянная кромка, диагональные блики и вдавливание линзовых кнопок. */
.btn,.filter-chip,.icon-button,.video-tools button,.player-button,.player-big-play {
  --glass-angle:-75deg;
  position:relative;
  isolation:isolate;
  border:1px solid rgba(225,226,239,.11);
  border-radius:999px;
  background:linear-gradient(-75deg,#e1e2ef04,#e1e2ef13 47%,#e1e2ef05);
  box-shadow:inset 0 1px 1px #ffffff1c,inset 0 -1px 1px #e1e2ef17,0 4px 9px #0003;
  backdrop-filter:blur(7px);
  color:#d4c9e3;
  transition:transform .25s,box-shadow .3s,background .3s,--glass-angle .5s;
  text-shadow:0 2px 8px #0005;
}
.btn { min-height:42px; padding:11px 18px; font-size:12px; font-weight:550; }
.btn::before,.filter-chip::before,.player-button::before,.player-big-play::before {
  content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none; z-index:-1;
  background:linear-gradient(130deg,#ffffff0d 0%,transparent 24% 72%,#e1e2ef09); box-shadow:inset 1px -1px 1px #e1e2ef17,inset -1px 1px 1px #e1e2ef10;
}
.btn::after,.filter-chip::after,.player-button::after,.player-big-play::after {
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--glass-angle),#ffffff7a,transparent 7% 38%,#b497d68c 50%,transparent 62% 92%,#e1e2ef70);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;
}
.btn:hover,.filter-chip:hover,.player-button:hover { --glass-angle:-125deg; transform:translateY(-2px); box-shadow:inset 0 1px 2px #ffffff38,inset 0 -1px 2px #b497d63d,0 7px 18px #0005; color:#f4eaff; }
.btn:active,.filter-chip:active,.player-button:active { transform:translateY(1px) scale(.975); box-shadow:inset 0 2px 7px #0007,inset 0 -1px 1px #e1e2ef3b; }
.btn.primary { background:linear-gradient(135deg,#b497d64f,#b497d625 45%,#05204a77); border-color:#c9b1e048; color:#f1e6ff; box-shadow:inset 0 1px 1px #e1e2ef47,inset 0 -1px 2px #b497d630,0 8px 25px #0005,0 0 22px #b497d608; }
.btn.primary:hover { background:linear-gradient(135deg,#b497d670,#b497d63d 45%,#05204a88); }
.btn.secondary,.btn.soft { border-color:#b497d62a; background:linear-gradient(-65deg,#e1e2ef04,#b497d614,#e1e2ef08); color:#c3b4d6; }
.btn.dark { background:linear-gradient(135deg,#05204a90,#b497d628); color:var(--lavender); }
.icon-button { border-color:transparent; color:#b2a8c3; background:transparent; box-shadow:none; backdrop-filter:none; }
.icon-button:hover { background:#b497d618; color:#e1d0f1; }
.btn:disabled,.player-button:disabled { transform:none; opacity:.4; }

.hero { min-height:278px; background:linear-gradient(115deg,#101120dd,#102140c9 60%,#25203b99); border:1px solid #b497d630; border-radius:25px; box-shadow:inset 0 1px 1px #e1e2ef13,0 18px 60px #0003; }
.hero-content { padding:31px 33px; position:relative; border-radius:23px; background:linear-gradient(120deg,#e1e2ef02,transparent); }
.hero .eyebrow { color:#bea6d8; font-size:10px; letter-spacing:1.5px; }
.hero h2 { color:#e1e2ef; font-size:34px; font-weight:550; letter-spacing:-1.1px; margin:18px 0 13px; }
.hero p { color:#a6a3bc; font-size:12px; line-height:1.8; margin-bottom:23px; }
.hero-caption { color:#b4a5c4; font-size:10px; }
.hero .hero-art { z-index:1; min-height:260px; }
.hero-art:before { border-color:#b497d629; box-shadow:0 0 60px #05204a66,inset 0 0 30px #b497d608; }
.hero-art:after { border-color:#b497d613; }
.code-tile { background:linear-gradient(135deg,#e1e2ef16,#b497d60b 45%,#05204a3b); border:1px solid #e1e2ef3d; border-radius:20px; color:#b497d6; box-shadow:inset 1px 1px 1px #ffffff29,inset -1px -1px 2px #b497d63d,10px 18px 45px #0005; backdrop-filter:blur(18px); }
.tile-dots i { background:#bfacaa80; }
.code-tile b { color:#d4b6f0; text-shadow:0 0 25px #b497d637; }
.code-tile small { color:#a8a0bb; }
.art-chip { background:linear-gradient(135deg,#e1e2ef12,#05204a55); border-color:#b497d638; color:#d1bedf; border-radius:13px; box-shadow:inset 0 1px 1px #e1e2ef29,0 8px 24px #0005; backdrop-filter:blur(20px); }
.art-chip svg { color:#c0a2da; }
.spark { color:#c6acde; text-shadow:0 0 24px #b497d644; }
.glass-scene { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; pointer-events:none; z-index:0; }
.hero>.glass-scene { opacity:.6; }
.optical-surface { position:absolute!important; inset:0; border-radius:inherit; pointer-events:none; z-index:0; isolation:isolate; }
.hero>.optical-surface { z-index:1; }
.hero-content { z-index:2; }
.stat-card,.course-card,.side-widget,.path-item,.stage,.homework-card,.note-card,.material-card,.settings-panel,.tab-content,.lesson-side,.search-list {
  background:var(--panel),rgba(9,12,25,.84); border-color:var(--line); border-radius:18px; box-shadow:var(--panel-shadow); backdrop-filter:blur(16px);
}
.stats-grid { gap:16px; }
.stat-card { padding:20px; }
.stat-label { color:#9491ab; font-size:11px; }
.stat-value { color:#ded5ec; font-size:26px; font-weight:550; }
.stat-value small { color:#797b96; font-size:12px; }
.stat-card>span,.stat-card:first-child>span { background:#b497d60d; border:1px solid #b497d61b; color:#b3a0cc; border-radius:11px; }
.mini-progress { height:4px; background:#e1e2ef09; }
.mini-progress i { background:linear-gradient(90deg,#706392,#b497d6,#d9bfed); box-shadow:0 0 10px #b497d63b; }
.section-heading h2 { font-size:19px; font-weight:550; }
.section-heading p { color:#85819d; font-size:11px; }
.course-banner { background:radial-gradient(ellipse at right,#b497d61f,transparent 70%),linear-gradient(120deg,#05204a77,#10172b 65%,#231b36); border-bottom:1px solid #b497d623; height:138px; padding:24px; }
.course-banner:after { border-color:#b497d61b; }
.course-banner .eyebrow { color:#a89abf; font-size:9px; }
.course-banner h3 { color:#e1d8f0; font-size:25px; font-weight:550; }
.php-badge { color:#b497d670; text-shadow:0 1px 0 #e1e2ef10; }
.course-card-body { padding:24px; }
.course-meta { color:#9290a9; font-size:10px; }
.course-card-body h3 { font-size:17px; font-weight:550; }
.course-card-body p { color:#9490a9; font-size:12px; line-height:1.8; }
.progress-label { color:#8d8aa4; font-size:10px; }
.progress-label strong { color:#b7a4cd; }
.course-bottom { margin-top:22px; }
.pill { background:#e1e2ef07; border:1px solid #e1e2ef0d; color:#b2a7c1; font-size:10px; border-radius:999px; padding:5px 9px; }
.pill.orange,.pill.green { background:#b497d60e; color:#c9acdf; border-color:#b497d621; }
.side-widget { padding:21px; }
.side-widget h3 { font-size:13px; font-weight:550; }
.side-widget .eyebrow { color:#8f81a2; font-size:8px; }
.task-preview .task-icon { background:#b497d610; color:#b49ccf; border:1px solid #b497d61f; border-radius:11px; }
.task-preview h4 { font-size:12px; font-weight:550; }
.task-preview p { color:#9186a4; font-size:10px; }
.hint-widget { background:linear-gradient(145deg,#b497d60e,#05204a19); border-color:#b497d61b; }
.hint-widget>svg { color:#b69bce; }
.hint-widget h3 { color:#c5afd9; font-size:12px; }
.hint-widget p { color:#968ba7; font-size:11px; }
.path-item { padding:19px 16px; transition:border-color .2s,transform .2s; }
.path-item:hover { border-color:#b497d64d; transform:translateY(-3px); }
.path-item .path-number { background:#b497d60b; color:#9687ac; border:1px solid #b497d619; width:29px; height:29px; }
.path-item.active { border-color:#b497d63b; background:linear-gradient(135deg,#b497d616,#05204a1c); }
.path-item.active .path-number { background:#b497d61e; color:#dbc1ef; }
.path-item h3 { color:#c9c1db; font-size:11px; font-weight:550; }
.path-item p { color:#878099; font-size:10px; }
footer { border-color:#e1e2ef0b; color:#6f6d88; font-size:10px; }
footer span { font-size:8px; color:#74708b; }
footer b { color:#b497d6; }
.filter-chip { color:#a79ab9; padding:9px 15px; font-size:11px; }
.filter-chip.active { background:linear-gradient(130deg,#b497d63e,#05204a60); border-color:#b497d64a; color:#e0c9f3; }
.filter-bar .search-box { background:#e1e2ef03; border-color:#e1e2ef16; border-radius:999px; padding:9px 15px; }
.stage summary { padding:23px; }
.stage-number { background:#b497d60b; border:1px solid #b497d61f; color:#b7a0ce; border-radius:12px; }
.stage summary h3 { color:#cbc3da; font-size:14px; font-weight:550; }
.stage summary p { color:#8c86a0; font-size:11px; }
.stage-meta { color:#8c829e; font-size:11px; }
.lesson-row { border-color:#e1e2ef09; font-size:12px; color:#b9b1ca; min-height:55px; }
.lesson-row:hover { background:#b497d60c; }
.lesson-row.current { background:linear-gradient(90deg,#b497d618,#b497d605); color:#ddc8ef; }
.lesson-row .lesson-number { color:#716880; }
.lesson-row .lesson-duration { color:#8c829c; font-size:11px; }
.lesson-row svg { color:#a496b7; }
.lesson-row.done svg { color:#c0a4dc; }
.lesson-row .pill { font-size:9px; }
.empty-state { background:linear-gradient(145deg,#b497d606,#05204a12); border-color:#b497d624; color:#9689a9; border-radius:18px; }
.empty-state>svg { color:#89739f; }
.empty-state h3 { color:#c6b1da; }
.homework-card { padding:25px; }
.homework-card .eyebrow { color:#9280a5; }
.homework-card h3 { font-size:16px; font-weight:550; }
.homework-card p { color:#a397b2; font-size:12px; }
.homework-card .card-top>svg { background:#b497d610; color:#b79ace; border:1px solid #b497d624; border-radius:13px; }
.note-card p { color:#b0a5c0; font-size:13px; }
.note-card h3 { color:#d0bfdf; font-size:14px; }
.bookmark { border-color:#b497d62f; background:#b497d60e; color:#bda5d2; border-radius:999px; }
.bookmark button { color:#b7a0ca; }
.material-card>svg { color:#ba9fd3; }
.material-card p { color:#a296b2; font-size:13px; }
.settings-panel p { color:#9d91af; font-size:13px; }
.setting-row { border-color:#e1e2ef0c; }
.setting-row strong { color:#c7bdd8; font-size:13px; }
.setting-row small { color:#91859f; font-size:11px; line-height:1.6; }
.setting-row select { background:#141325; border-color:#b497d62a; color:#c9b5dd; border-radius:999px; font-size:12px; }
.help-text,.tip { background:#b497d608; border:1px solid #b497d614; border-radius:12px; color:#9c8fac; font-size:11px; }
.tip svg { color:#b29bc8; }
.error-box,.video-error { background:#bfacaa10; border:1px solid #bfacaa3b; color:#d2b7bf; }
.toast { background:linear-gradient(135deg,#222037e8,#101c33f2); color:#e0ccee; border:1px solid #b497d638; box-shadow:inset 0 1px 1px #e1e2ef1c,0 12px 40px #0007; backdrop-filter:blur(20px); border-radius:999px; }
dialog { color:var(--lavender); background:linear-gradient(135deg,#1b1a2ce8,#08152bef); border:1px solid #b497d640; border-radius:26px; box-shadow:inset 1px 1px 1px #e1e2ef21,inset -1px -1px 1px #b497d61c,0 30px 110px #000a; backdrop-filter:blur(32px); overflow:hidden; }
dialog::backdrop { background:#02020ac7; backdrop-filter:blur(9px); }
dialog p { color:#b2a3c4; font-size:13px; }
#modal-content { position:relative; z-index:1; max-height:calc(90vh - 65px); overflow:auto; padding:5px; margin:-5px; }
.modal-close { position:absolute; z-index:3; background:#b497d60d; }
.document-text p { color:#b1a3c5; }
.skip-link { background:#211a31; color:#e1e2ef; border-radius:8px; }

.lesson-side { border-radius:21px; }
.lesson-side-header { padding:21px 18px; border-color:#e1e2ef0d; }
.lesson-side-header h3 { font-size:13px; }
.lesson-side .stage { background:transparent; box-shadow:none; backdrop-filter:none; }
.lesson-side .stage summary { border-color:#e1e2ef0b; }
.lesson-side .stage summary h3 { font-size:11px; color:#a99bbc; }
.lesson-side .stage-number { font-size:9px; }
.lesson-side .lesson-row { padding:13px 12px; font-size:11px; }
.lesson-side .lesson-row .lesson-duration { font-size:9px; }
.lesson-title-block { padding-top:26px; }
.lesson-title-block h1 { font-size:24px; font-weight:550; }
.lesson-info { color:#9285a3; font-size:11px; }
.lesson-top .eyebrow { color:#ab94c1; }
.tabs { border-color:#b497d61c; gap:27px; }
.tab { color:#9c8eae; font-size:12px; padding-bottom:15px; }
.tab:hover { color:#dcc2f1; }
.tab.active { color:#d6b7ef; }
.tab.active:after { background:#b497d6; box-shadow:0 -2px 13px #b497d64d; border-radius:3px; }
.tab-content { padding:25px; }
.tab-content h3 { font-size:15px; font-weight:550; }
.tab-content p { color:#a193b4; font-size:13px; }
.check-item { color:#b7a5cb; border-color:#b497d61c; border-radius:12px; background:#b497d603; font-size:12px; }
.check-item:has(input:checked) { background:#b497d60f; border-color:#b497d638; color:#cdb2e4; }
.note-textarea { color:#ccbddc; border-color:#b497d624; background:#02020a55; border-radius:13px; font-size:13px; }
.note-textarea::placeholder { color:#766b86; }
.note-actions span { color:#8e7da0; font-size:10px; }
.source-list { border-color:#b497d61f; background:#02020a33; border-radius:12px; }
.source-file { color:#9c89ae; font-size:11px; }
.source-file.active { background:#b497d618; color:#d2b6eb; }
.source-code,.run-info { background:#030611c9; border-color:#b497d61f; color:#b3aacb; border-radius:12px; font-size:12px; }
.source-toolbar>span { color:#8e809e; font-size:11px; }
.file-tab { background:#b497d607; border-color:#b497d621; color:#9f89b6; border-radius:999px; }
.file-tab.active { background:linear-gradient(135deg,#b497d62a,#05204a50); color:#dfc8f4; border-color:#b497d647; }
.code-editor { background:#030611e6; border-color:#b497d627; color:#d0c4e5; border-radius:15px; font-size:13px; line-height:1.9; box-shadow:inset 0 2px 15px #0004; }
.editor-caption { color:#867295; font-size:10px; line-height:1.8; }
.preview-header h4 { color:#baabcc; font-size:12px; }
.preview-header span { color:#8f7c9f; font-size:10px; }
.preview-frame { border-color:#b497d62e; border-radius:13px; background:white; color-scheme:light; }
.search-result-title { color:#9c87ae; }

/* Базовые стеклянные элементы плеера. Компоновка поверх кадра — в player.css. */
.video-shell { position:relative; background:radial-gradient(ellipse at 70% 100%,#05204a99,transparent 65%),#040610; border:1px solid #b497d63a; border-radius:23px; box-shadow:inset 0 1px 1px #e1e2ef1a,0 20px 60px #0006; }
.video-shell video { position:relative; z-index:1; background:#02020a; border-radius:21px 21px 0 0; }
.video-shell>.glass-scene { z-index:0; }
.player-console { position:relative; z-index:3; margin:14px; padding:15px 17px 8px; border:1px solid #e1e2ef2a; border-radius:22px; background:linear-gradient(135deg,#e1e2ef0b,#b497d609 50%,#05204a22); box-shadow:inset 1px 1px 1px #ffffff1e,inset -1px -1px 1px #b497d628,0 8px 24px #0004; backdrop-filter:blur(18px) saturate(120%); overflow:hidden; }
.player-console.glass-rendered { background:rgba(5,9,23,.28); }
.player-transport { position:relative; z-index:1; display:flex; align-items:center; gap:11px; padding-top:9px; }
.player-button { width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:0; }
.player-button svg { width:15px; height:15px; }
.player-button.main-play { width:41px; height:41px; background:linear-gradient(145deg,#e1e2ef26,#b497d62f,#05204a5c); color:#f0e3ff; }
.player-button.main-play svg { width:18px; height:18px; }
.player-clock { display:flex; align-items:center; gap:7px; font-size:11px; font-variant-numeric:tabular-nums; color:#d5c1e7; white-space:nowrap; }
.player-clock .duration { color:#9b88ae; }
.player-clock i { color:#675579; font-style:normal; }
.player-spacer { flex:1; }
.player-volume { display:flex; align-items:center; gap:5px; }
.player-volume .player-button { background:none; box-shadow:none; border-color:transparent; }
.player-volume .player-button::before,.player-volume .player-button::after { display:none; }
.player-volume input { width:65px; height:3px; accent-color:#b497d6; }
.player-seek-wrap { position:relative; z-index:1; height:16px; display:flex; align-items:center; }
.player-seek { width:100%; height:4px; margin:0; border:0; appearance:none; -webkit-appearance:none; border-radius:999px; background:linear-gradient(to right,#b497d6 0%,#c9afe3 var(--played,0%),#e1e2ef2b var(--played,0%),#e1e2ef2b var(--buffered,0%),#e1e2ef12 var(--buffered,0%)); cursor:pointer; transition:height .15s; }
.player-seek:hover { height:6px; }
.player-seek::-webkit-slider-thumb { appearance:none; width:11px; height:11px; border-radius:50%; background:#e1e2ef; border:2px solid #b497d6; box-shadow:0 0 12px #b497d670; }
.player-seek::-moz-range-thumb { width:8px; height:8px; border-radius:50%; background:#e1e2ef; border:2px solid #b497d6; }
.video-tools { position:relative; z-index:1; color:#a997bb; background:transparent; border-top:1px solid #b497d618; padding:11px 0 4px; margin-top:12px; gap:8px; }
.video-tools button { color:#bba7cf; min-height:29px; padding:5px 9px; font-size:10px; border-radius:999px; border-color:#b497d618; background:#b497d608; box-shadow:inset 0 1px 0 #e1e2ef0d; }
.video-tools button:hover { background:#b497d61b; color:#e0c7f6; }
.video-tools select { color:#d3b9eb; border:1px solid #b497d62d; background:#161226; border-radius:999px; padding:5px 8px; font-size:10px; }
.video-tools label { font-size:10px; color:#a18bb4; }
.video-tools input { accent-color:#b497d6; }
.player-big-play { display:flex; align-items:center; justify-content:center; position:absolute; z-index:4; top:calc((100% - 160px)/2); left:50%; transform:translate(-50%,-50%); width:70px; height:70px; border-color:#e1e2ef50; background:linear-gradient(135deg,#e1e2ef2e,#b497d625,#05204a66); box-shadow:inset 1px 1px 1px #ffffff66,inset -1px -1px 1px #b497d666,0 10px 30px #0007; backdrop-filter:blur(10px); color:#fff; transition:opacity .2s,transform .2s; }
.player-big-play svg { width:25px; height:25px; }
.is-playing .player-big-play { opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.85); }
.player-hud { position:absolute; z-index:3; left:17px; top:15px; display:flex; align-items:center; gap:7px; font-size:9px; letter-spacing:1.3px; color:#c1a8d5; background:#02020ab0; border:1px solid #b497d62a; backdrop-filter:blur(12px); padding:7px 10px; border-radius:999px; pointer-events:none; }
.player-hud b { width:4px; height:4px; background:#b497d6; border-radius:50%; box-shadow:0 0 8px #b497d6; }
.is-playing .player-hud { opacity:0; transition:opacity .3s; }
.video-shell:hover .player-hud { opacity:1; }
.video-shell:fullscreen { display:flex; flex-direction:column; justify-content:center; border:0; border-radius:0; background:#02020a; }
.video-shell:fullscreen video { flex:1; min-height:0; width:100%; aspect-ratio:auto; max-height:calc(100vh - 160px); border-radius:0; }
.video-shell:fullscreen .player-console { flex-shrink:0; width:min(1100px,calc(100% - 50px)); align-self:center; }
.video-shell:fullscreen .player-big-play { top:45%; }
.focus-mode main { padding-top:25px; }
.focus-mode .video-shell video { max-height:70vh; }
.focus-exit { color:#d4bde6; }

@media(min-width:1600px) {
  .hero h2 { font-size:39px; }
  .hero-content { padding:36px; }
  .hero { min-height:300px; }
  .path-item h3 { font-size:13px; }
}
@media(max-width:1180px) {
  .hero h2 { font-size:30px; }
  .hero-content { padding:28px; }
  .stat-card { padding:17px 15px; }
  .stat-value { font-size:24px; }
  .lesson-side .stage summary h3 { font-size:10px; }
  .player-transport { gap:8px; }
  .player-volume input { width:48px; }
}
@media(max-width:980px) {
  .hero h2 { font-size:28px; }
  .hero p { font-size:11px; }
  .hero-content { padding:25px; }
  .stat-card { padding:20px; }
  .lesson-side .stage summary h3 { font-size:12px; }
  .lesson-side .lesson-row { font-size:12px; }
}
@media(max-width:720px) {
  h1,.page-heading h1 { font-size:26px; }
  .page-heading p { font-size:12px; }
  main { padding-top:28px; }
  .topbar { background:rgba(5,6,16,.88); }
  .sidebar { background:linear-gradient(180deg,#101020f5,#050711f5); box-shadow:20px 0 70px #0009; }
  .hero { border-radius:22px; }
  .hero h2 { font-size:28px; }
  .hero-content { padding:25px; }
  .hero .eyebrow { font-size:9px; }
  .hero p { font-size:11px; }
  .hero .btn { min-height:42px; font-size:11px; }
  .hero-caption { font-size:9px; }
  .stats-grid { gap:12px; }
  .stat-card { padding:18px; border-radius:17px; }
  .stat-label { font-size:10px; }
  .stat-value { font-size:24px; }
  .section-heading h2 { font-size:18px; }
  .course-meta { font-size:9px; }
  .course-card-body { padding:21px; }
  .course-card-body p { font-size:11px; }
  .course-banner h3 { font-size:25px; }
  .homework-card { padding:20px; }
  .homework-card h3 { font-size:15px; }
  .homework-card p { font-size:12px; }
  .path-item h3 { font-size:11px; }
  .path-item p { font-size:10px; }
  .stage summary { padding:19px 16px; }
  .stage summary h3 { font-size:13px; }
  .stage summary p { font-size:10px; }
  .lesson-row { font-size:12px; }
  .lesson-row .lesson-duration { font-size:10px; }
  .lesson-title-block h1 { font-size:23px; }
  .lesson-info { font-size:10px; }
  .tab-content { padding:20px; }
  .tabs { gap:23px; }
  .tab { font-size:11px; }
  .player-console { margin:10px; padding:10px 12px 6px; border-radius:18px; }
  .player-clock { font-size:10px; gap:5px; }
  .player-transport { gap:7px; padding-top:6px; }
  .player-button { width:30px; height:30px; }
  .player-button.main-play { width:36px; height:36px; }
  .player-volume input { width:40px; }
  .video-tools { margin-top:10px; padding-top:9px; }
  .video-tools button { font-size:9px; padding:4px 7px; }
  .video-tools label { font-size:9px; }
  .player-big-play { width:57px; height:57px; top:calc((100% - 154px)/2); }
  .player-big-play svg { width:21px; height:21px; }
  .player-hud { top:12px; left:12px; font-size:8px; padding:6px 9px; }
  .settings-panel { padding:22px; }
  .setting-row strong { font-size:12px; }
  .setting-row small { font-size:10px; }
  .source-code { font-size:11px; }
  .code-editor { font-size:12px; }
  .toast { border-radius:15px; }
}
@media(max-width:420px) {
  .hero h2 { font-size:29px; }
  .hero-content { padding:25px; }
  .hero-caption { font-size:10px; }
  .hero p { max-width:none; }
  .player-volume input { display:none; }
  .player-clock { font-size:9px; gap:4px; }
  .player-transport { gap:5px; }
  .video-tools-left,.video-tools-right { gap:4px; }
  .video-tools label { font-size:8px; }
  .video-tools button { font-size:8px; }
  .lesson-title-block h1 { font-size:21px; }
}
@media(prefers-reduced-motion:reduce) {
  .btn,.filter-chip,.player-button { transition:none; }
  .btn:hover,.filter-chip:hover,.path-item:hover { transform:none; }
}
@supports not (backdrop-filter:blur(1px)) {
  .sidebar,.topbar { background:#080a17; }
  .stat-card,.course-card,.side-widget,.path-item,.stage,.homework-card,.note-card,.material-card,.settings-panel,.tab-content,.lesson-side { background:#0c1020; }
  .player-console { background:#16152a; }
}