:root {
  --red: #e50914;
  --red-bright: #ff202a;
  --orange: #ff5b00;
  --yellow: #ffc107;
  --green: #2ed47a;
  --ink: #080808;
  --panel: #111214;
  --panel-2: #17181b;
  --line: rgba(255, 255, 255, .1);
  --muted: #97999f;
  --text: #f7f7f7;
  --display: "Raleway", sans-serif;
  --body: "Inter", sans-serif;
  --shadow: 0 24px 80px rgba(0, 0, 0, .48);
}
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: #090a0b; font-family: var(--body); -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.icon { width: 1.25em; height: 1.25em; display: inline-block; flex: 0 0 auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.55em; height: 1.55em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page-noise { position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }

.app-header { position: sticky; top: 0; z-index: 100; height: 76px; padding: 0 2.1vw; display: flex; align-items: center; gap: clamp(20px, 3vw, 52px); border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(7, 7, 8, .88); backdrop-filter: blur(22px); }
.brand { flex: 0 0 auto; display: block; width: 206px; }
.brand img { width: 100%; height: auto; }
.app-nav { display: flex; align-items: stretch; align-self: stretch; gap: 8px; }
.app-nav a { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 13px; color: #aaa; font-size: 13px; font-weight: 600; transition: .2s ease; }
.app-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transition: .2s ease; }
.app-nav a:hover, .app-nav a.is-active { color: #fff; }
.app-nav a.is-active::after { transform: scaleX(1); }
.nav-icon { font-size: 17px; color: #e9e9e9; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 13px; }
.search-box { width: clamp(210px, 20vw, 340px); height: 42px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50px; background: rgba(255, 255, 255, .055); transition: .2s ease; }
.search-box:focus-within { border-color: rgba(229, 9, 20, .75); box-shadow: 0 0 0 3px rgba(229, 9, 20, .12); }
.search-box > span { color: #bbb; font-size: 21px; line-height: 1; }
.search-box input { width: 100%; border: 0; outline: 0; color: #fff; background: transparent; font-size: 12px; }
.search-box input::placeholder { color: #777; }
.search-box kbd { color: #6f7175; border: 1px solid #3d3e41; border-radius: 5px; padding: 2px 5px; font: 10px var(--body); }
.icon-button { width: 40px; height: 40px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.notification-button { position: relative; font-size: 24px; }
.notification-button i { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid #080808; border-radius: 50%; background: var(--red-bright); }
.account-link { display: flex; align-items: center; gap: 9px; color: #ddd; font-size: 12px; font-weight: 600; }
.account-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255, 95, 0, .45); border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%, #ff5c00, #a5070f 45%, #181818 46%); font: 800 14px var(--display); }
.nav-toggle { display: none; margin-left: auto; border: 0; background: transparent; width: 42px; height: 42px; padding: 10px; }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: #fff; }

.member-hero { --hero-image: none; position: relative; min-height: 525px; isolation: isolate; overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .07); background: #080808; }
.hero-backdrop { position: absolute; z-index: -2; inset: 0; background-image: var(--hero-image); background-size: cover; background-position: 60% 47%; transform: scale(1.01); }
.hero-backdrop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #050505 0%, rgba(5, 5, 5, .94) 20%, rgba(5, 5, 5, .46) 52%, rgba(5, 5, 5, .05) 76%), linear-gradient(0deg, #090a0b 0%, transparent 33%, rgba(0,0,0,.14) 100%); }
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 57% 48%, transparent 0 24%, rgba(255, 63, 0, .12) 48%, transparent 64%); }
.hero-content { width: min(720px, 52%); padding: 64px 0 64px max(28px, 4vw); }
.content-badge { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.content-badge i { width: 22px; height: 2px; background: var(--red); box-shadow: 9px -4px 0 -1px var(--red); transform: skewX(-30deg); }
.hero-kicker { margin: 24px 0 8px; color: #ddd; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero-content h1 { margin: 0; max-width: 700px; color: #fff; font: 900 clamp(36px, 4.1vw, 65px)/.92 var(--display); letter-spacing: -.045em; text-transform: uppercase; text-shadow: 0 7px 30px rgba(0, 0, 0, .55); }
.hero-content h1 em { color: #fff; font-style: normal; }
.hero-content h1 em::after { content: ""; display: block; margin-top: 12px; width: 94px; height: 4px; background: linear-gradient(90deg, var(--red), transparent); transform: skewX(-30deg); }
.hero-description { max-width: 570px; margin: 20px 0 15px; color: #d6d6d8; font-size: 14px; line-height: 1.65; }
.hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 18px; color: #babcc0; font-size: 11px; }
.hero-meta span:first-child { color: #ffc107; font-weight: 800; }
.hero-actions { display: flex; gap: 11px; margin-top: 24px; }
.button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { background: linear-gradient(135deg, #fa1823, #d8040e); box-shadow: 0 10px 25px rgba(229, 9, 20, .25); }
.button--primary:hover { box-shadow: 0 13px 34px rgba(229, 9, 20, .36); }
.button--glass { border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .1); backdrop-filter: blur(12px); }
.button--outline { border: 1px solid rgba(255, 255, 255, .14); background: transparent; }
.button--full { width: 100%; min-height: 49px; }
.play-triangle { font-size: 11px; }
.hero-mascot-tag { position: absolute; right: 3.2vw; bottom: 78px; display: flex; flex-direction: column; align-items: flex-start; color: #fff; font: italic 900 clamp(20px, 2vw, 32px)/.96 var(--display); text-shadow: 0 3px 15px #000; transform: rotate(-4deg); }
.hero-mascot-tag i { margin-top: 8px; width: 115px; height: 4px; background: var(--red); transform: skewX(-35deg); }
.hero-dots { position: absolute; left: 50%; bottom: 34px; display: flex; gap: 7px; }
.hero-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #8d8d8f; cursor: pointer; transition: width .2s ease, background .2s ease; }
.hero-dots button.is-active { width: 21px; border-radius: 6px; background: var(--red); }

.content-shell { position: relative; z-index: 2; max-width: 1600px; margin: 0 auto; padding: 6px clamp(22px, 3vw, 50px) 80px; }
.course-section { padding-top: 34px; }
.section-heading { min-height: 50px; margin-bottom: 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-heading > div:first-child { position: relative; padding-left: 15px; }
.title-mark { position: absolute; left: 0; top: 1px; bottom: 0; width: 3px; border-radius: 4px; background: var(--red); box-shadow: 0 0 14px rgba(229, 9, 20, .7); }
.section-eyebrow { margin: 0 0 3px; color: #777b82; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-heading h2 { margin: 0; font: 800 clamp(17px, 1.7vw, 23px)/1.15 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.section-heading > a { margin-bottom: 5px; color: #9fa1a5; font-size: 11px; }
.section-heading > a:hover { color: #fff; }
.section-heading > a span { color: var(--red); font-size: 18px; vertical-align: -1px; }
.course-row { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 11px; }
.course-card { position: relative; min-width: 0; }
.course-cover { --cover-image: none; --cover-position: center; position: relative; height: 156px; overflow: hidden; display: block; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; background-image: var(--cover-image); background-size: cover; background-position: var(--cover-position); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.course-cover:hover { z-index: 3; transform: translateY(-4px) scale(1.015); border-color: rgba(255,255,255,.35); box-shadow: 0 16px 35px rgba(0,0,0,.5); }
.course-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,3,3,.98), rgba(3,3,3,.1) 76%); }
.course-category { position: absolute; top: 11px; left: 12px; padding: 4px 7px; color: #fff; background: rgba(0,0,0,.7); border-left: 2px solid var(--accent); border-radius: 3px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.round-play { position: absolute; right: 12px; bottom: 24px; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(0,0,0,.48); font-size: 10px; }
.course-copy { position: absolute; left: 13px; right: 52px; bottom: 14px; display: flex; flex-direction: column; text-shadow: 0 2px 8px #000; }
.course-copy strong { overflow: hidden; color: #fff; font: 800 14px/1.12 var(--display); text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.course-copy small { margin-top: 3px; overflow: hidden; color: #bbb; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.course-card .progress-line { position: absolute; z-index: 3; left: 12px; right: 44px; bottom: 9px; }
.progress-line { height: 3px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.19); }
.progress-line i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f20b17, #ff3b43); box-shadow: 0 0 8px rgba(242,11,23,.6); }
.progress-value { position: absolute; z-index: 4; right: 10px; bottom: 5px; color: #ddd; font-size: 8px; font-weight: 700; }

.tracks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.track-card { --cover-image: none; --cover-position: center; position: relative; height: 147px; padding: 17px; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background-image: var(--cover-image); background-size: cover; background-position: var(--cover-position); transition: .25s ease; }
.track-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.1)), linear-gradient(0deg, rgba(0,0,0,.85), transparent); }
.track-card:hover { transform: translateY(-4px); border-color: rgba(229,9,20,.6); box-shadow: 0 18px 45px rgba(0,0,0,.45); }
.track-index { position: absolute; top: 10px; right: 12px; color: rgba(255,255,255,.4); font: 900 23px var(--display); }
.track-content { display: flex; flex-direction: column; }
.track-content small { color: var(--red-bright); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.track-content strong { margin: 3px 0 6px; font: 900 17px var(--display); text-transform: uppercase; }
.track-content em { color: #b8b8ba; font: normal 9px var(--body); }
.track-arrow { position: absolute; right: 14px; bottom: 14px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; font-size: 12px; }
.section-heading--filters { align-items: flex-end; }
.filter-pills { display: flex; gap: 6px; padding-left: 0 !important; }
.filter-pills button { padding: 7px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; color: #8f9196; background: rgba(255,255,255,.03); font-size: 9px; cursor: pointer; }
.filter-pills button:hover, .filter-pills button.is-active { border-color: rgba(229,9,20,.6); color: #fff; background: rgba(229,9,20,.13); }
.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 13px; }
.catalog-card { min-width: 0; transition: opacity .2s ease, transform .2s ease; }
.catalog-card[hidden] { display: none; }
.catalog-cover { --cover-image: none; --cover-position: center; position: relative; height: 148px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background-image: linear-gradient(0deg, rgba(0,0,0,.5), transparent), var(--cover-image); background-size: cover; background-position: var(--cover-position); }
.catalog-cover::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.12); border-radius: inherit; transition: .2s ease; }
.catalog-card:hover .catalog-cover::after { border-color: rgba(255,255,255,.4); box-shadow: inset 0 -35px 60px rgba(0,0,0,.25); }
.catalog-main-link { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; }
.catalog-play { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(0,0,0,.48); font-size: 11px; opacity: 0; transform: scale(.8); transition: .2s ease; }
.catalog-card:hover .catalog-play { opacity: 1; transform: scale(1); }
.new-badge { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 4px 8px; border-radius: 4px; background: var(--red); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.favorite-button { position: absolute; z-index: 3; top: 7px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.55); font-size: 18px; cursor: pointer; opacity: 0; transition: .2s; }
.catalog-card:hover .favorite-button, .favorite-button.is-favorite { opacity: 1; }
.favorite-button.is-favorite { color: #fff; background: var(--red); }
.catalog-card__body { padding: 10px 3px 0; }
.catalog-card__body > span { color: var(--red-bright); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.catalog-card__body h3 { margin: 4px 0 4px; font-size: 13px; }
.catalog-card__body p { margin: 0; color: #888b91; font-size: 9px; }
.catalog-card__body div { display: flex; gap: 6px; margin-top: 9px; color: #6f7277; }
.catalog-card__body small { font-size: 8px; }
.empty-state { padding: 50px; text-align: center; color: #888; border: 1px dashed #333; border-radius: 8px; }

.community-banner { position: relative; min-height: 280px; margin-top: 62px; padding: 48px 55px; overflow: hidden; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: radial-gradient(circle at 80% 60%, rgba(229,9,20,.3), transparent 28%), linear-gradient(115deg, #161719, #0a0a0b 65%); }
.community-banner::before { content: ""; position: absolute; inset: 0; opacity: .07; background: repeating-linear-gradient(130deg, transparent 0 18px, #fff 19px, transparent 20px); }
.community-banner > div:first-child { position: relative; z-index: 2; max-width: 590px; }
.community-banner h2 { margin: 14px 0 10px; font: 900 clamp(25px, 3vw, 42px)/1.02 var(--display); text-transform: uppercase; }
.community-banner p { max-width: 540px; color: #aaaeb3; font-size: 12px; line-height: 1.65; }
.community-banner .button { margin-top: 10px; }
.community-orbit { position: absolute; right: 9%; width: 180px; height: 180px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 34px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.018); }
.community-orbit > span { width: 80px; height: 80px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--red), #680005); box-shadow: 0 0 55px rgba(229,9,20,.5); font: 900 42px var(--display); }
.community-orbit i { position: absolute; width: 28px; height: 28px; border: 3px solid #111; border-radius: 50%; background: linear-gradient(135deg, #ff9b43, #a60000); }
.community-orbit i:nth-of-type(1) { top: -10px; left: 55px; }
.community-orbit i:nth-of-type(2) { right: -8px; top: 70px; }
.community-orbit i:nth-of-type(3) { bottom: 0; left: 32px; }
.community-orbit i:nth-of-type(4) { left: -8px; top: 55px; }

.modal[hidden] { display: none; }
.modal { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 22px; }
.modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(8px); cursor: default; }
.course-modal { position: relative; width: min(780px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: #131416; box-shadow: var(--shadow); animation: modalIn .3s ease both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.modal-close { position: absolute; z-index: 5; top: 15px; right: 15px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(0,0,0,.65); font-size: 24px; cursor: pointer; }
.modal-art { height: 300px; background-size: cover; background-position: center; }
.modal-art::after { content: ""; display: block; height: 100%; background: linear-gradient(0deg, #131416, transparent 65%); }
.modal-body { padding: 0 32px 32px; margin-top: -42px; position: relative; }
.modal-body h2 { margin: 14px 0 8px; font: 900 34px var(--display); text-transform: uppercase; }
.modal-body > p { color: #afb1b6; line-height: 1.65; font-size: 13px; }

/* Authentication */
.app-header--minimal { position: fixed; width: 100%; border-bottom-color: transparent; background: linear-gradient(180deg, rgba(0,0,0,.78), transparent); backdrop-filter: none; }
.app-header--minimal .brand { width: 218px; }
.minimal-help { margin-left: auto; color: #b7b9bd; font-size: 12px; }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, 46%) 1fr; background: #0b0b0c; }
.auth-panel { position: relative; z-index: 2; min-height: 100vh; padding: 115px clamp(30px, 6vw, 105px) 50px; display: flex; justify-content: center; background: radial-gradient(circle at 15% 70%, rgba(229,9,20,.08), transparent 35%), #0c0c0d; }
.auth-card { width: 100%; max-width: 440px; align-self: center; }
.mobile-auth-logo { display: none; width: 190px; margin-bottom: 35px; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--red-bright); font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.auth-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--red); }
.auth-card h1 { margin: 12px 0 10px; font: 900 clamp(34px, 3.5vw, 51px)/.97 var(--display); letter-spacing: -.04em; text-transform: uppercase; }
.auth-card h1 em { color: var(--red-bright); font-style: italic; }
.auth-card > p { margin: 0; color: #8c8f94; font-size: 12px; line-height: 1.55; }
.auth-form { margin-top: 29px; display: grid; gap: 15px; }
.auth-form > label:not(.check-label) { display: grid; gap: 7px; color: #d7d8db; font-size: 10px; font-weight: 700; }
.input-shell { height: 48px; padding: 0 13px; display: flex; align-items: center; gap: 10px; border: 1px solid #2a2b2f; border-radius: 7px; background: #141517; transition: .2s ease; }
.input-shell:focus-within { border-color: rgba(229,9,20,.8); box-shadow: 0 0 0 3px rgba(229,9,20,.1); }
.input-shell i { width: 18px; color: #696c72; font-style: normal; text-align: center; }
.input-shell input { flex: 1; min-width: 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: 12px; }
.input-shell input::placeholder { color: #56585d; }
.input-shell button { border: 0; color: #777a80; background: transparent; cursor: pointer; }
.auth-form label > small { min-height: 0; color: #ff646b; font-size: 9px; }
.form-options { display: flex; align-items: center; justify-content: space-between; }
.check-label { display: flex !important; align-items: center; gap: 8px; color: #898c91 !important; font-size: 10px !important; font-weight: 500 !important; cursor: pointer; }
.check-label input { position: absolute; opacity: 0; pointer-events: none; }
.check-label > span { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #3b3d42; border-radius: 4px; background: #161719; }
.check-label input:checked + span { border-color: var(--red); background: var(--red); }
.check-label input:checked + span::after { content: "✓"; color: white; font-size: 10px; }
.text-button { padding: 0; border: 0; color: #dadadd; background: transparent; font-size: 10px; cursor: pointer; }
.text-button:hover { color: var(--red-bright); }
.form-message { display: none; margin: 0 !important; padding: 10px 12px; border-radius: 5px; color: #ff9599 !important; background: rgba(229,9,20,.1); font-size: 10px !important; }
.form-message.is-visible { display: block; }
.form-message.is-success { color: #7ee7ac !important; background: rgba(46,212,122,.09); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 17px 0; color: #62656a; font-size: 9px; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #242529; }
.social-button { width: 100%; height: 46px; border: 1px solid #2c2e32; border-radius: 7px; color: #cfd0d3; background: #141517; font-size: 11px; cursor: pointer; }
.social-button strong { margin-right: 9px; color: #4285f4; font-size: 15px; }
.auth-switch { margin-top: 19px !important; color: #777a7f !important; text-align: center; font-size: 10px !important; }
.auth-switch a { color: #fff; font-weight: 700; }
.auth-switch a:hover { color: var(--red-bright); }
.demo-access { width: 100%; margin-top: 12px; padding: 10px; border: 1px dashed #34363a; border-radius: 6px; color: #7f8287; background: transparent; font-size: 9px; cursor: pointer; }
.demo-access:hover { color: #fff; border-color: #555; }
.demo-access span { margin-left: 5px; color: var(--red); }
.terms-check { align-items: flex-start; line-height: 1.5; }
.terms-check a { color: #fff; text-decoration: underline; }
.auth-visual { position: relative; min-height: 100vh; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 7vw 7vw 5vw; }
.auth-visual::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #0c0c0d 0%, transparent 24%), linear-gradient(0deg, rgba(4,4,4,.96), transparent 58%), radial-gradient(circle at 65% 38%, transparent, rgba(0,0,0,.45)); }
.auth-visual__image { position: absolute; z-index: -2; inset: 0; background: url('../../assets/hero-background-desktop-v3.webp') 65% center / cover; filter: saturate(1.05); }
.auth-quote { max-width: 570px; }
.auth-quote > span { display: block; height: 25px; color: var(--red); font: 900 56px/.8 Georgia, serif; }
.auth-quote blockquote { margin: 10px 0 18px; font: 800 clamp(24px, 2.4vw, 37px)/1.12 var(--display); text-transform: uppercase; }
.auth-quote blockquote em { color: var(--red-bright); font-style: italic; }
.auth-quote p { color: #97999d; font-size: 10px; line-height: 1.5; }
.auth-quote p strong { color: #fff; }
.auth-stats { margin-top: 28px; padding-top: 24px; display: flex; gap: 35px; border-top: 1px solid rgba(255,255,255,.14); }
.auth-stats div { display: flex; flex-direction: column; }
.auth-stats strong { font: 800 21px var(--display); }
.auth-stats span { margin-top: 3px; color: #808389; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.auth-layout--register .auth-panel { padding-top: 105px; }
.auth-card--register .auth-form { margin-top: 22px; gap: 12px; }
.auth-visual--register .auth-visual__image { background-image: url('../../assets/story-cta-v2.webp'); background-position: 60% center; }
.register-promise { max-width: 550px; position: relative; z-index: 2; }
.register-promise h2 { margin: 16px 0 22px; font: 900 clamp(26px, 2.7vw, 43px)/1 var(--display); text-transform: uppercase; }
.register-promise h2 em { color: var(--red-bright); font-style: italic; }
.register-promise ul { margin: 0; padding: 0; display: grid; gap: 15px; list-style: none; }
.register-promise li { display: flex; gap: 12px; align-items: center; }
.register-promise li b { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(229,9,20,.4); border-radius: 50%; color: var(--red-bright); background: rgba(229,9,20,.12); }
.register-promise li span { display: flex; flex-direction: column; }
.register-promise li strong { font-size: 11px; }
.register-promise li small { margin-top: 3px; color: #97999f; font-size: 9px; }

/* Course player */
body[data-page="course"] { background: #0b0c0d; }
.learning-layout { height: calc(100vh - 76px); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 390px; }
.learning-layout[data-content-locked="true"] > .player-column, .learning-layout[data-content-locked="true"] > .curriculum-panel, .learning-layout[data-content-locked="true"] > .curriculum-fab { display: none !important; }
.course-access-gate { grid-column: 1 / -1; min-height: calc(100vh - 76px); padding: 40px 20px; display: grid; place-content: center; justify-items: center; text-align: center; background: radial-gradient(circle at 50% 25%, rgba(229,9,20,.16), transparent 35%), #080808; }
.course-access-gate > span { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; color: var(--red-bright); background: rgba(255,255,255,.04); }
.course-access-gate > span .icon { width: 24px; height: 24px; }.course-access-gate small { margin-top: 18px; color: var(--red-bright); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.course-access-gate h1 { margin: 8px 0; font: 900 clamp(25px,4vw,46px) var(--display); }.course-access-gate p { max-width: 530px; margin: 0; color: #aaa; font-size: 12px; line-height: 1.65; }.course-access-gate > div { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }.course-access-gate .button--outline { color: #fff; border-color: #393939; }
.curriculum-loading, .curriculum-empty { padding: 30px 20px; color: #777; font-size: 10px; line-height: 1.6; text-align: center; }
.player-column { overflow-y: auto; padding: 18px clamp(20px, 3vw, 48px) 70px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.breadcrumbs { display: flex; gap: 9px; color: #60636a; font-size: 9px; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs strong { color: #b5b7bb; font-weight: 600; }
.video-player { --video-image: none; --video-position: center; position: relative; aspect-ratio: 16/8.4; margin-top: 15px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: #030303; box-shadow: 0 22px 60px rgba(0,0,0,.45); }
.video-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(0deg, rgba(0,0,0,.82), transparent 52%), linear-gradient(90deg, rgba(0,0,0,.3), transparent), var(--video-image); background-size: cover; background-position: var(--video-position); }
.video-badge { position: absolute; top: 20px; left: 20px; padding: 6px 8px; border-left: 2px solid var(--red); border-radius: 3px; color: #ddd; background: rgba(0,0,0,.6); font-size: 9px; text-transform: uppercase; }
.big-play { width: 68px; height: 68px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; color: #fff; background: rgba(229,9,20,.8); box-shadow: 0 0 0 10px rgba(229,9,20,.12), 0 10px 35px rgba(0,0,0,.4); cursor: pointer; }
.video-placeholder > div { position: absolute; left: 24px; bottom: 40px; display: flex; flex-direction: column; }
.video-placeholder small { color: var(--red-bright); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.video-placeholder strong { margin-top: 4px; font: 800 16px var(--display); }
.fake-video-ui { position: absolute; inset: 0; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle, #251214, #030303 65%); }
.fake-video-ui[hidden] { display: none; }
.pulse-logo { width: 90px; height: 90px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--red), #6f0006); box-shadow: 0 0 70px rgba(229,9,20,.4); font: 900 45px var(--display); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); box-shadow: 0 0 95px rgba(229,9,20,.58); } }
.fake-video-ui p { max-width: 470px; color: #a7a9ad; font-size: 12px; line-height: 1.6; }
.fake-video-ui button { border: 0; background: transparent; cursor: pointer; }
.player-controls { position: absolute; z-index: 5; left: 15px; right: 15px; bottom: 11px; height: 21px; display: flex; align-items: center; gap: 10px; font-size: 8px; }
.player-controls button { padding: 0 2px; border: 0; background: transparent; cursor: pointer; }
.player-controls div { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); }
.player-controls div i { display: block; width: 6%; height: 100%; background: var(--red); }
.lesson-header { padding: 24px 0 18px; display: flex; gap: 25px; justify-content: space-between; border-bottom: 1px solid var(--line); }
.lesson-label { color: var(--red-bright); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.lesson-header h1 { margin: 5px 0 7px; font: 800 clamp(22px, 2.4vw, 34px)/1.05 var(--display); }
.lesson-header p { max-width: 720px; margin: 0; color: #8f9297; font-size: 10px; line-height: 1.6; }
.lesson-actions { display: flex; gap: 7px; align-items: flex-start; }
.lesson-actions button { min-width: 85px; height: 38px; border: 1px solid var(--line); border-radius: 5px; background: #141517; font-size: 9px; cursor: pointer; }
.lesson-tabs { display: flex; gap: 25px; border-bottom: 1px solid var(--line); }
.lesson-tabs button { position: relative; padding: 18px 2px 13px; border: 0; color: #73767b; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.lesson-tabs button.is-active { color: #fff; }
.lesson-tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); }
.lesson-tabs button span { padding: 2px 5px; border-radius: 8px; background: #282a2e; font-size: 7px; }
.tab-panel { padding: 23px 0; }
.tab-panel h2 { margin: 0 0 10px; font: 800 17px var(--display); }
.tab-panel > p { max-width: 850px; color: #95989e; font-size: 11px; line-height: 1.75; }
.lesson-notes { margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: #121315; }
.lesson-notes h3 { margin: 0 0 10px; font-size: 11px; }
.lesson-notes ul { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.lesson-notes li { color: #9b9da2; font-size: 10px; }
.lesson-notes li::before { content: "✓"; margin-right: 9px; color: var(--red-bright); }
.material-item { max-width: 650px; margin: 8px 0; padding: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 6px; background: #121315; }
.material-item > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 5px; color: var(--red-bright); background: rgba(229,9,20,.1); font-size: 9px; font-weight: 800; }
.material-item div { display: flex; flex: 1; flex-direction: column; }
.material-item strong { font-size: 10px; }.material-item small { color: #777a80; font-size: 8px; }
.comment-box { display: flex; align-items: center; gap: 10px; }.comment-box > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--red); font-weight: 800; }.comment-box input { max-width: 600px; flex: 1; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; color: #fff; background: #141517; outline: 0; font-size: 10px; }.comment-box button { height: 40px; border: 0; border-radius: 5px; color: #fff; background: var(--red); font-size: 9px; font-weight: 700; }
.curriculum-panel { min-width: 0; overflow-y: auto; border-left: 1px solid var(--line); background: #101113; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.curriculum-heading { padding: 18px 20px; border-bottom: 1px solid var(--line); background: #151619; }
.curriculum-heading > div:first-child { display: flex; align-items: center; justify-content: space-between; font-size: 9px; }
.curriculum-heading strong { color: var(--red-bright); }
.curriculum-heading .progress-line { margin: 8px 0 6px; }
.curriculum-heading small { color: #73767c; font-size: 8px; }
.curriculum-title { padding: 18px 20px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.curriculum-title small { color: #686b70; font-size: 8px; text-transform: uppercase; }
.curriculum-title h2 { margin: 4px 0 0; font: 800 15px var(--display); text-transform: uppercase; }
.curriculum-title button { border: 0; color: #85888d; background: transparent; font-size: 20px; cursor: pointer; }
.module { border-bottom: 1px solid var(--line); }
.module-toggle { width: 100%; padding: 15px 18px; border: 0; display: flex; align-items: center; justify-content: space-between; text-align: left; background: #151619; cursor: pointer; }
.module-toggle span { display: flex; flex-direction: column; }
.module-toggle small { color: var(--red-bright); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.module-toggle strong { margin: 4px 0; font-size: 10px; }
.module-toggle em { color: #6f7277; font: normal 8px var(--body); }
.module-toggle i { color: #777; font-style: normal; transition: .2s; }
.module.is-open .module-toggle i { transform: rotate(180deg); }
.module-lessons { display: none; }
.module.is-open .module-lessons { display: block; }
.lesson-item { width: 100%; padding: 11px 18px; border: 0; display: flex; align-items: center; gap: 11px; text-align: left; background: #101113; cursor: pointer; }
.lesson-item:hover { background: #191a1d; }
.lesson-item.is-current { background: linear-gradient(90deg, rgba(229,9,20,.16), transparent); box-shadow: inset 3px 0 var(--red); }
.lesson-status { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #383a3e; border-radius: 50%; color: #6d7076; font-size: 7px; }
.lesson-item.is-current .lesson-status { border-color: var(--red); color: #fff; background: var(--red); }
.lesson-item > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.lesson-item strong { overflow: hidden; color: #b9bbc0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-item small { margin-top: 4px; color: #65686d; font-size: 7px; }
.curriculum-fab { position: fixed; right: 20px; bottom: 20px; z-index: 20; padding: 12px 15px; border: 0; border-radius: 6px; color: #fff; background: var(--red); font-size: 10px; font-weight: 800; box-shadow: var(--shadow); }

/* Admin */
body[data-page="admin"] { background: #f4f5f7; color: #15171a; }
body[data-page="admin"] .page-noise { display: none; }
.admin-app { min-height: 100vh; display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.admin-sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; width: 240px; padding: 22px 14px 15px; display: flex; flex-direction: column; color: #e9e9eb; background: #0b0c0e; border-right: 1px solid #202125; }
.admin-sidebar .brand { width: 182px; margin: 0 auto 20px 8px; }
.admin-workspace { margin: 0 4px 17px; padding: 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #25262b; border-radius: 7px; background: #131416; }
.admin-workspace > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 5px; color: #fff; background: var(--red); font: 900 14px var(--display); }
.admin-workspace div { flex: 1; display: flex; flex-direction: column; }.admin-workspace small { color: #65686e; font-size: 7px; }.admin-workspace strong { margin-top: 2px; font-size: 9px; }.admin-workspace button { border: 0; color: #666; background: transparent; }
.admin-sidebar nav { display: grid; gap: 3px; }
.admin-sidebar nav a { padding: 10px 11px; display: flex; align-items: center; gap: 10px; border-radius: 5px; color: #777a80; font-size: 10px; font-weight: 600; }
.admin-sidebar nav a span { width: 18px; color: #8d9096; text-align: center; font-size: 14px; }
.admin-sidebar nav a:hover { color: #fff; background: #17181b; }
.admin-sidebar nav a.is-active { color: #fff; background: linear-gradient(90deg, rgba(229,9,20,.18), rgba(229,9,20,.05)); box-shadow: inset 3px 0 var(--red); }
.admin-sidebar nav a.is-active span { color: var(--red-bright); }
.nav-divider { height: 1px; margin: 9px 6px; background: #222328; }
.admin-sidebar__footer { margin-top: auto; padding: 13px 4px 0; display: flex; align-items: center; gap: 8px; border-top: 1px solid #222328; }
.admin-sidebar__footer .account-avatar { width: 31px; height: 31px; font-size: 9px; }
.admin-sidebar__footer > div:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }.admin-sidebar__footer strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.admin-sidebar__footer small { overflow: hidden; color: #61646a; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.admin-sidebar__footer button { border: 0; color: #777; background: transparent; cursor: pointer; }
.admin-main { grid-column: 2; min-width: 0; }
.admin-topbar { height: 74px; padding: 0 28px; display: flex; align-items: center; border-bottom: 1px solid #e4e5e8; background: rgba(255,255,255,.93); backdrop-filter: blur(15px); }
.admin-topbar > div:first-of-type { display: flex; flex-direction: column; }.admin-topbar p { margin: 0; color: #a1a4a9; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.admin-topbar h1 { margin: 3px 0 0; font: 800 17px var(--display); }
.admin-menu { display: none; margin-right: 12px; border: 0; background: transparent; }
.admin-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sync-status { padding: 7px 9px; border: 1px solid #e1e4e7; border-radius: 5px; color: #777b80; font-size: 8px; }.sync-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(46,212,122,.13); }
.sync-status.is-demo i { background: #f2a31a; box-shadow: 0 0 0 3px rgba(242,163,26,.13); }
.admin-top-actions .icon-button { width: 34px; height: 34px; border: 1px solid #e1e3e6; border-radius: 6px; }
.admin-top-actions .button { min-height: 34px; color: #3a3c40; font-size: 8px; }
.admin-view { display: none; padding: 28px; }.admin-view.is-active { display: block; }
.welcome-strip { min-height: 112px; padding: 23px 25px; display: flex; align-items: center; justify-content: space-between; border-radius: 9px; color: #fff; background: linear-gradient(110deg, #121315 30%, #211315 100%); box-shadow: 0 8px 25px rgba(20,20,22,.1); }
.welcome-strip span { color: #787b80; font-size: 8px; text-transform: uppercase; }.welcome-strip h2 { margin: 5px 0 2px; font: 800 22px var(--display); }.welcome-strip h2 em { color: var(--red-bright); font-style: normal; }.welcome-strip p { margin: 0; color: #82858a; font-size: 9px; }.welcome-strip .button { min-height: 39px; }
.metrics-grid { margin-top: 15px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.metrics-grid article { min-width: 0; padding: 17px; display: flex; align-items: center; gap: 11px; border: 1px solid #e3e4e7; border-radius: 8px; background: #fff; box-shadow: 0 5px 17px rgba(27,29,33,.035); }
.metric-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; font-weight: 800; }.metric-icon--red { color: #e50914; background: #fff0f1; }.metric-icon--orange { color: #f77a20; background: #fff3e9; }.metric-icon--yellow { color: #d69a00; background: #fff8df; }.metric-icon--green { color: #169453; background: #e9fbf1; font-size: 9px; }
.metrics-grid article > div { display: flex; min-width: 0; flex-direction: column; }.metrics-grid small { color: #96999e; font-size: 8px; }.metrics-grid strong { margin: 3px 0; font: 800 19px var(--display); }.metrics-grid em { color: #2ca86a; font: normal 7px var(--body); }.metrics-grid article:nth-child(2) em { color: #989ba0; }
.sparkline { margin-left: auto; align-self: flex-end; color: #e50914; font: normal 11px/1 var(--body); letter-spacing: -3px; opacity: .65; }
.admin-grid { margin-top: 15px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .65fr); gap: 15px; }
.admin-card { border: 1px solid #e3e4e7; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(27,29,33,.035); }
.admin-card__heading { padding: 17px 19px 12px; display: flex; align-items: center; justify-content: space-between; }.admin-card__heading small { color: #9a9da2; font-size: 7px; text-transform: uppercase; }.admin-card__heading h2 { margin: 3px 0 0; font: 800 13px var(--display); }.admin-card__heading button { border: 0; color: var(--red); background: transparent; font-size: 8px; cursor: pointer; }.admin-card__heading select { padding: 5px 8px; border: 1px solid #e2e3e6; border-radius: 4px; color: #777; background: #fff; font-size: 8px; }
.chart { position: relative; height: 205px; padding: 5px 18px 25px 46px; }.chart-labels { position: absolute; left: 15px; top: 7px; bottom: 28px; display: flex; flex-direction: column; justify-content: space-between; color: #a5a8ad; font-size: 7px; }.chart svg { width: 100%; height: 160px; overflow: visible; }.chart-grid { stroke: #eceef0; stroke-width: 1; }.chart-area { fill: url(#chartFill); }.chart-line { fill: none; stroke: #e50914; stroke-width: 2.5; }.chart-days { display: flex; justify-content: space-between; color: #a5a8ad; font-size: 7px; }
.activity-card ul { margin: 0; padding: 0 18px 10px; list-style: none; }.activity-card li { padding: 12px 0; display: flex; gap: 9px; border-top: 1px solid #f0f1f2; }.activity-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #d5202a, #761016); font-size: 7px; font-weight: 800; }.activity-avatar--orange { background: linear-gradient(135deg, #ff9d3d, #c34800); }.activity-avatar--yellow { background: linear-gradient(135deg, #ecc73d, #ac7400); }.activity-card li div { display: flex; flex-direction: column; }.activity-card strong { font-size: 8px; }.activity-card p { margin: 2px 0; color: #8d9095; font-size: 7px; }.activity-card p b { color: #4c4f54; }.activity-card small { color: #b4b6ba; font-size: 6px; }
.popular-courses { margin-top: 15px; }.admin-table { overflow-x: auto; }.admin-table__row { min-width: 700px; padding: 10px 18px; display: grid; grid-template-columns: 2.2fr .6fr 1fr .7fr .7fr; align-items: center; gap: 12px; border-top: 1px solid #eef0f1; color: #65686d; font-size: 8px; }.admin-table__head { padding-top: 7px; padding-bottom: 7px; color: #a3a5aa; background: #fafafa; font-size: 7px; text-transform: uppercase; }.table-course { display: flex; align-items: center; gap: 9px; color: #34363a; }.table-course i { width: 48px; height: 29px; flex: 0 0 auto; border-radius: 4px; background-size: cover; }.mini-progress { display: inline-block; width: 60px; height: 4px; margin-right: 6px; overflow: hidden; border-radius: 4px; background: #eceef0; }.mini-progress b { display: block; height: 100%; background: var(--red); }.status-pill { padding: 4px 6px; border-radius: 10px; color: #16894f; background: #e9f9f0; font: normal 7px var(--body); }
.view-heading { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; }.view-heading p { margin: 0; color: var(--red); font-size: 8px; font-weight: 800; text-transform: uppercase; }.view-heading h2 { margin: 4px 0; font: 800 24px var(--display); }.view-heading span { color: #8b8e93; font-size: 9px; }
.management-toolbar { margin-bottom: 10px; display: flex; gap: 8px; }.management-toolbar .search-box { width: 310px; border-color: #e0e2e5; background: #fff; }.management-toolbar .search-box input { color: #222; }.management-toolbar select { padding: 0 12px; border: 1px solid #e0e2e5; border-radius: 6px; color: #6f7277; background: #fff; font-size: 9px; }
.course-management-row { padding: 12px 15px; display: grid; grid-template-columns: minmax(260px, 2fr) 1fr .7fr .8fr 80px; align-items: center; gap: 15px; border-bottom: 1px solid #eef0f1; font-size: 9px; }.course-management-row:last-child { border: 0; }.course-management-row > span { color: #75787d; }.course-management-row .table-course i { width: 70px; height: 42px; }.course-management-row button { width: 28px; height: 28px; border: 1px solid #e1e3e6; border-radius: 5px; color: #555; background: #fff; cursor: pointer; }.course-management-row button:hover { color: var(--red); border-color: #ffc8cb; }
.placeholder-view { min-height: calc(100vh - 140px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.placeholder-view > span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 14px; color: var(--red); background: #fff0f1; font-size: 25px; }.placeholder-view h2 { margin: 16px 0 5px; font: 800 23px var(--display); }.placeholder-view p { max-width: 430px; margin: 0; color: #8a8d92; font-size: 10px; }
.integration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.integration-grid article { padding: 20px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; border: 1px solid #e2e4e6; border-radius: 8px; background: #fff; }.integration-logo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #17181a; font-weight: 900; }.integration-logo--firebase { color: #ffb300; background: #fff6dc; }.integration-logo--hotmart { background: linear-gradient(135deg, #152d6b, #28a6dc); }.integration-grid article div { flex: 1; min-width: 120px; }.integration-grid h3 { margin: 2px 0 5px; font-size: 12px; }.integration-grid p { margin: 0 0 8px; color: #84878c; font-size: 8px; line-height: 1.5; }.integration-grid em { color: #2a9d61; font: normal 7px var(--body); }.integration-grid button { width: 100%; height: 31px; border: 1px solid #e3e4e7; border-radius: 5px; color: #55585d; background: #fafafa; font-size: 8px; cursor: pointer; }
.admin-form-modal { position: relative; width: min(720px, 100%); overflow: hidden; border-radius: 10px; color: #25272a; background: #fff; box-shadow: var(--shadow); animation: modalIn .25s ease; }.admin-form-modal > header { padding: 19px 21px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: #111214; }.admin-form-modal header small { color: var(--red-bright); font-size: 7px; text-transform: uppercase; }.admin-form-modal header h2 { margin: 4px 0 0; font: 800 18px var(--display); }.admin-form-modal header button { border: 0; color: #aaa; background: transparent; font-size: 22px; cursor: pointer; }.admin-form-modal form { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.admin-form-modal label { display: grid; gap: 5px; color: #66696e; font-size: 8px; font-weight: 700; }.admin-form-modal input, .admin-form-modal select, .admin-form-modal textarea { width: 100%; padding: 10px 11px; border: 1px solid #dfe1e4; border-radius: 5px; outline: 0; color: #292b2e; background: #fff; font-size: 9px; }.admin-form-modal input:focus, .admin-form-modal textarea:focus { border-color: var(--red); }.form-span-2 { grid-column: span 2; }.admin-form-modal footer { grid-column: span 2; display: flex; justify-content: flex-end; gap: 8px; padding-top: 5px; }.admin-form-modal .button--outline { color: #555; border-color: #dfe1e4; }
.attachment-field > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.attachment-field > span:first-child small { color: #a2a5aa; font-size: 7px; font-weight: 500; }
.attachment-field > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attachment-drop { min-height: 106px; padding: 10px; display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; overflow: hidden; border: 1px dashed #cfd2d7; border-radius: 7px; color: #5e6166; background: #fafbfb; cursor: pointer; }
.attachment-drop:hover { border-color: var(--red); background: #fff7f7; }
.attachment-drop i { width: 58px; height: 58px; grid-row: span 2; display: grid; place-items: center; border-radius: 6px; color: var(--red); background: #f1f2f4 center/cover no-repeat; font-style: normal; }
.attachment-drop i.has-image .icon { display: none; }
.attachment-drop b { align-self: end; overflow: hidden; color: #33363a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.attachment-drop small { align-self: start; color: #999da2; font-size: 7px; font-weight: 500; }
.form-check { display: flex !important; grid-template-columns: 16px 1fr; align-items: center; gap: 7px !important; }
.admin-form-modal .form-check input { width: 15px; height: 15px; accent-color: var(--red); }
.admin-form-modal { max-height: 92vh; overflow-y: auto; }
.content-manager-modal { position: relative; width: min(1040px, 100%); max-height: 92vh; overflow: hidden; border-radius: 10px; color: #292b2e; background: #f6f7f8; box-shadow: var(--shadow); }
.content-manager-modal > header { min-height: 78px; padding: 17px 21px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: #111214; }
.content-manager-modal > header small { color: var(--red-bright); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.content-manager-modal > header h2 { margin: 3px 0 0; font: 800 18px var(--display); }.content-manager-modal > header p { margin: 3px 0 0; color: #898b8e; font-size: 8px; }.content-manager-modal > header > button { border: 0; color: #aaa; background: transparent; cursor: pointer; }.content-manager-modal > header > button .icon { width: 18px; height: 18px; }
.content-manager-layout { min-height: 600px; display: grid; grid-template-columns: 300px 1fr; }
.content-manager-layout > aside { padding: 16px; overflow-y: auto; border-right: 1px solid #e1e3e6; background: #fff; }.content-manager-layout > aside > div:first-child { display: flex; align-items: center; justify-content: space-between; }.content-manager-layout > aside strong { font-size: 10px; }.content-manager-layout > aside button { border: 0; color: var(--red); background: transparent; font-size: 8px; font-weight: 800; cursor: pointer; }.content-manager-layout > aside button .icon { width: 10px; height: 10px; }
.content-tree { margin-top: 14px; display: grid; gap: 8px; }.content-tree > p { color: #96999e; font-size: 9px; line-height: 1.5; }.content-tree-module { overflow: hidden; border: 1px solid #e2e4e7; border-radius: 7px; }.content-tree-module > header { padding: 10px; display: flex; align-items: center; gap: 7px; background: #fafafa; }.content-tree-module > header > button:first-child { flex: 1; color: #32353a; text-align: left; }.content-tree-module > header > button:last-child { color: #9a9da2; }.content-tree-module > header em { padding: 3px 5px; border-radius: 8px; color: #777; background: #eceef0; font: normal 6px var(--body); }.content-tree-lessons { border-top: 1px solid #eceef0; }.content-tree-lesson { padding: 8px 10px; display: flex; align-items: center; gap: 7px; border-top: 1px solid #f0f1f2; }.content-tree-lesson:first-child { border-top: 0; }.content-tree-lesson > button:first-child { flex: 1; overflow: hidden; color: #686b70; text-align: left; text-overflow: ellipsis; white-space: nowrap; }.content-tree-lesson > button:last-child { color: #aaa; }.content-tree-add { width: 100%; padding: 8px !important; border-top: 1px solid #eceef0 !important; text-align: left; }
.content-editors { padding: 18px; overflow-y: auto; }.content-editors form { padding: 18px; display: grid; gap: 12px; border: 1px solid #e1e3e5; border-radius: 8px; background: #fff; }.content-editors form + form { margin-top: 14px; }.content-editor-heading { display: flex; align-items: center; justify-content: space-between; }.content-editor-heading small { color: var(--red); font-size: 7px; font-weight: 800; text-transform: uppercase; }.content-editor-heading h3 { margin: 3px 0 0; font: 800 15px var(--display); }.danger-link { border: 0; color: #c92c35; background: transparent; font-size: 8px; cursor: pointer; }.content-editors label { display: grid; gap: 5px; color: #686b70; font-size: 8px; font-weight: 700; }.content-editors input, .content-editors select, .content-editors textarea { width: 100%; padding: 9px 10px; border: 1px solid #dfe1e4; border-radius: 5px; outline: 0; background: #fff; font-size: 9px; }.content-editors input:focus, .content-editors textarea:focus { border-color: var(--red); }.content-editors footer { display: flex; justify-content: flex-end; }.form-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.form-inline--3 { grid-template-columns: repeat(3, 1fr); }
.admin-material-list { display: grid; gap: 6px; }.admin-material-item { padding: 8px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #eceef0; border-radius: 5px; }.admin-material-item span { width: 34px; height: 28px; display: grid; place-items: center; border-radius: 4px; color: var(--red); background: #fff0f1; font-size: 7px; font-weight: 800; }.admin-material-item div { flex: 1; min-width: 0; }.admin-material-item strong { display: block; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.admin-material-item small { color: #999ca1; font-size: 7px; }.admin-material-item button { border: 0; color: #aaa; background: transparent; cursor: pointer; }.admin-material-item button .icon { width: 12px; height: 12px; }.material-upload-row { display: grid; grid-template-columns: 1fr 1.3fr auto; align-items: end; gap: 10px; }.material-upload-row .button { min-height: 34px; color: #555; border-color: #dfe1e4; }
.content-tree-module.is-current { border-color: #efb9bc; box-shadow: 0 0 0 1px #ffe7e8; }
.content-tree-module > div { padding: 9px 10px; display: flex; align-items: center; gap: 6px; background: #fafafa; }
.content-tree-module > div > button:first-child { flex: 1; min-width: 0; display: grid; gap: 2px; color: #303338; text-align: left; }
.content-tree-module > div > button:first-child b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-tree-module > div > button:first-child small { color: #95989d; font-size: 6px; font-weight: 600; }
.content-tree-module ul { margin: 0; padding: 0; border-top: 1px solid #eceef0; list-style: none; }
.content-tree-module li { border-top: 1px solid #f0f1f2; }.content-tree-module li:first-child { border-top: 0; }.content-tree-module li.is-current { background: #fff3f4; }
.content-tree-module li button { width: 100%; padding: 8px 10px !important; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px; color: #686b70 !important; text-align: left; }
.content-tree-module li button span, .content-tree-module li button .icon { width: 12px; height: 12px; }.content-tree-module li button b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.content-tree-module li button small { color: #a1a3a7; font-size: 6px; }
.content-empty { margin: 0; padding: 12px; color: #94979c; font-size: 9px; line-height: 1.5; }
.admin-material-row { padding: 8px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #eceef0; border-radius: 5px; }
.admin-material-row > span { flex: 1; min-width: 0; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 7px; }.admin-material-row .icon { width: 14px; height: 14px; color: var(--red); }.admin-material-row b { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.admin-material-row small { color: #999ca1; font-size: 7px; }.admin-material-row > button { border: 0; color: #aaa; background: transparent; cursor: pointer; }
.embedded-video { position: absolute; z-index: 2; inset: 0; background: #000; }.embedded-video iframe, .embedded-video video { width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.module-toggle-status { display: flex !important; align-items: center; flex-direction: row !important; gap: 8px; }
.module-toggle-status > .icon { width: 15px; height: 15px; color: #48cf89; }
.module.is-complete .module-toggle small, .module.is-complete .module-toggle em { color: #55c98c; }
.lesson-actions button.is-complete { color: #16894f; border-color: #bfe8d0; background: #eefaf3; }
.not-found-view { min-height: calc(100vh - 72px); padding: 80px 24px; display: grid; place-items: center; align-content: center; gap: 14px; color: #fff; text-align: center; background: #090a0c; }.not-found-view > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: var(--red); background: #1a1b1e; }.not-found-view > span .icon { width: 28px; height: 28px; }.not-found-view h1, .not-found-view p { margin: 0; }.not-found-view p { color: #92959a; }.not-found-view .button { margin-top: 8px; }
.legal-page { min-height: calc(100vh - 72px); padding: 54px 20px 90px; color: #d8d9dc; background: #090a0c; }.legal-page article { max-width: 820px; margin: auto; }.legal-page article > a { color: #a8aaae; font-size: 10px; }.legal-page article > span { margin-top: 38px; display: block; color: var(--red-bright); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.legal-page h1 { margin: 8px 0 4px; color: #fff; font: 900 clamp(30px, 5vw, 48px) var(--display); }.legal-page h2 { margin: 32px 0 8px; color: #fff; font: 800 18px var(--display); }.legal-page p { margin: 0; color: #b2b4b9; font-size: 12px; line-height: 1.75; }.legal-page .legal-updated { margin-bottom: 30px; color: #707378; font-size: 10px; }.legal-page aside { margin-top: 38px; padding: 16px 18px; border: 1px solid #3b2a1d; border-radius: 7px; color: #d7aa71; background: #18120d; font-size: 10px; line-height: 1.6; }.legal-page a { color: #fff; }
.data-table { min-width: 720px; overflow-x: auto; }.admin-card:has(.data-table) { overflow-x: auto; }
.data-table-row { padding: 11px 15px; display: grid; align-items: center; gap: 14px; border-bottom: 1px solid #eef0f1; color: #6f7277; font-size: 8px; }.data-table-row:last-child { border-bottom: 0; }.data-table-row--head { padding-top: 8px; padding-bottom: 8px; color: #9a9da2; background: #fafafa; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.student-row { grid-template-columns: 1.6fr 1.7fr .65fr .7fr; }.sales-row { grid-template-columns: 1.35fr 1.3fr .75fr .9fr .7fr .7fr; }
.data-person { min-width: 0; display: flex; align-items: center; gap: 9px; color: #303338; }.data-person > i { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #d71b25; font: normal 800 8px var(--body); }.data-person span { min-width: 0; }.data-person b, .data-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.data-person small { margin-top: 2px; color: #999ca1; font-size: 7px; }
.data-status { width: max-content; padding: 4px 7px; border-radius: 10px; color: #16894f; background: #e9f9f0; font-weight: 800; }.data-status.is-inactive { color: #a13c43; background: #fff0f1; }
.integration-grid em.is-ready { color: #16894f; }.integration-grid em.is-warning { color: #bd6d0d; }

.toast-stack { position: fixed; z-index: 500; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { min-width: 260px; max-width: 360px; padding: 12px 15px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: #ececee; background: #18191c; box-shadow: var(--shadow); font-size: 10px; animation: toastIn .25s ease both; }.toast::before { content: "✓"; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--red); font-size: 8px; }.toast.is-leaving { opacity: 0; transform: translateY(10px); transition: .2s; } @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* Turbo.IA icon system */
.nav-icon .icon { width: 17px; height: 17px; }
.search-box > span .icon { width: 17px; height: 17px; }
.notification-button .icon { width: 20px; height: 20px; }
.hero-meta span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.hero-meta span:first-child .icon { width: 11px; height: 11px; }
.play-triangle .icon, .track-arrow .icon { width: 12px; height: 12px; }
.round-play .icon { width: 13px; height: 13px; }
.catalog-play .icon { width: 15px; height: 15px; }
.favorite-button .icon { width: 16px; height: 16px; }
.modal-close .icon { width: 17px; height: 17px; }
.input-shell i .icon, .input-shell button .icon { width: 16px; height: 16px; }
.demo-access span .icon { width: 11px; height: 11px; }
.register-promise li b .icon { width: 14px; height: 14px; }
.big-play .icon { width: 25px; height: 25px; }
.fake-video-ui button .icon { width: 22px; height: 22px; }
.player-controls button .icon { width: 11px; height: 11px; }
.lesson-actions button .icon { width: 13px; height: 13px; margin-right: 3px; }
.material-item > i .icon { width: 15px; height: 15px; }
.curriculum-title button .icon { width: 16px; height: 16px; }
.module-toggle i .icon { width: 13px; height: 13px; }
.lesson-status .icon { width: 10px; height: 10px; }
.admin-sidebar nav a span .icon { width: 14px; height: 14px; }
.admin-sidebar__footer button .icon { width: 14px; height: 14px; }
.admin-top-actions .icon-button .icon { width: 15px; height: 15px; }
.admin-top-actions .button .icon { width: 11px; height: 11px; }
.metric-icon .icon { width: 18px; height: 18px; }
.rating-value { display: inline-flex; align-items: center; gap: 4px; }
.rating-value .icon { width: 10px; height: 10px; color: #f3b515; }
.placeholder-view > span .icon { width: 26px; height: 26px; }
.integration-logo .icon { width: 23px; height: 23px; }
.admin-form-modal header button .icon { width: 17px; height: 17px; }
.course-management-row button .icon { width: 13px; height: 13px; }
.check-label input:checked + span::after { content: ""; width: 4px; height: 7px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateY(-1px) rotate(45deg); }
.lesson-notes li::before { content: ""; display: inline-block; width: 4px; height: 7px; margin: 0 11px 1px 3px; border-right: 1.5px solid var(--red-bright); border-bottom: 1.5px solid var(--red-bright); transform: rotate(45deg); }
.toast::before { content: none; }
.toast > .icon { width: 20px; height: 20px; padding: 4px; overflow: visible; border-radius: 50%; color: #fff; background: var(--red); stroke-width: 2.2; }

@media (max-width: 1180px) {
  .app-header { gap: 18px; }.brand { width: 170px; }.app-nav a { padding: 0 7px; }.app-nav a:nth-child(4) { display: none; }.header-actions { gap: 5px; }.course-row { grid-template-columns: repeat(4, minmax(190px, 1fr)); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }.course-row .course-card { min-width: 220px; }.tracks-grid { grid-template-columns: repeat(2, 1fr); }.catalog-grid { grid-template-columns: repeat(3, 1fr); }
  .learning-layout { grid-template-columns: minmax(0, 1fr) 330px; }.admin-grid { grid-template-columns: 1fr; }.metrics-grid { grid-template-columns: repeat(2, 1fr); }.integration-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .app-header { height: 66px; padding: 0 18px; }.brand { width: 165px; }.nav-toggle { display: block; }.app-nav { position: fixed; top: 66px; left: 0; right: 0; height: auto; padding: 10px 18px 18px; display: none; flex-direction: column; background: rgba(8,8,9,.98); border-bottom: 1px solid #25262a; }.app-nav.is-open { display: flex; }.app-nav a { min-height: 42px; }.app-nav a:nth-child(4) { display: flex; }.header-actions .search-box, .notification-button { display: none; }.account-link > span:not(.account-avatar) { display: none; }
  .member-hero { min-height: 560px; align-items: flex-end; }.hero-backdrop { background-position: 62% center; }.hero-backdrop::before { background: linear-gradient(0deg, #090a0b 4%, rgba(5,5,5,.8) 42%, rgba(5,5,5,.15) 75%), linear-gradient(90deg, rgba(0,0,0,.65), transparent); }.hero-content { width: 100%; padding: 180px 22px 55px; }.hero-content h1 { font-size: clamp(34px, 9vw, 56px); }.hero-description { max-width: 580px; }.hero-mascot-tag { display: none; }.hero-dots { bottom: 23px; }
  .content-shell { padding-left: 18px; padding-right: 18px; }.catalog-grid { grid-template-columns: repeat(2, 1fr); }.community-banner { padding: 35px; }.community-orbit { opacity: .4; right: -25px; }
  .auth-layout { grid-template-columns: 1fr; }.auth-panel { min-height: 100vh; padding: 85px 25px 45px; }.auth-card { max-width: 500px; }.auth-visual { display: none; }.app-header--minimal { display: none; }.mobile-auth-logo { display: block; }
  .learning-layout { height: calc(100vh - 66px); grid-template-columns: 1fr; }.curriculum-panel { position: fixed; z-index: 110; top: 66px; right: 0; bottom: 0; width: min(390px, 92vw); transform: translateX(105%); transition: .25s ease; box-shadow: -20px 0 60px rgba(0,0,0,.6); }.curriculum-panel.is-open { transform: translateX(0); }.curriculum-fab { display: block !important; }.player-column { padding: 15px 18px 80px; }.video-player { aspect-ratio: 16/9; }
  .admin-app { grid-template-columns: 1fr; }.admin-sidebar { transform: translateX(-105%); transition: .25s ease; box-shadow: 20px 0 50px rgba(0,0,0,.25); }.admin-sidebar.is-open { transform: translateX(0); }.admin-main { grid-column: 1; }.admin-menu { display: block; }.sync-status, .admin-top-actions .icon-button { display: none; }.admin-view { padding: 20px; }.integration-grid { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .account-avatar { width: 32px; height: 32px; }.member-hero { min-height: 545px; }.hero-content { padding-top: 210px; }.hero-description { font-size: 12px; }.hero-meta span:nth-child(3), .hero-meta span:nth-child(4) { display: none; }.hero-actions { align-items: stretch; }.hero-actions .button { padding: 0 13px; font-size: 10px; }
  .section-heading--filters { align-items: flex-start; flex-direction: column; }.filter-pills { width: 100%; overflow-x: auto; scrollbar-width: none; }.filter-pills button { white-space: nowrap; }.course-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; }.tracks-grid { grid-template-columns: 1fr; }.track-card { height: 135px; }.catalog-grid { grid-template-columns: 1fr 1fr; gap: 17px 8px; }.catalog-cover { height: 105px; }.catalog-card__body h3 { font-size: 11px; }.catalog-card__body p { display: none; }.favorite-button { opacity: 1; }.community-banner { min-height: 340px; padding: 30px 24px; }.community-banner h2 { font-size: 25px; }.community-orbit { right: -75px; bottom: -55px; }
  .auth-panel { padding-top: 42px; }.mobile-auth-logo { margin-bottom: 35px; }.auth-card h1 { font-size: 36px; }.auth-card--register .auth-form { gap: 10px; }
  .lesson-header { flex-direction: column; }.lesson-actions { align-self: stretch; }.lesson-actions button { flex: 1; }.lesson-tabs { gap: 14px; }.lesson-tabs button { font-size: 9px; }.player-column { padding-left: 12px; padding-right: 12px; }.breadcrumbs { padding-left: 4px; }.big-play { width: 54px; height: 54px; }.video-placeholder > div { display: none; }
  .admin-topbar { padding: 0 15px; }.admin-top-actions .button { padding: 0 10px; }.admin-view { padding: 14px; }.welcome-strip { padding: 20px; align-items: flex-start; flex-direction: column; gap: 15px; }.metrics-grid { grid-template-columns: 1fr; }.view-heading { align-items: flex-start; flex-direction: column; gap: 15px; }.management-toolbar { flex-direction: column; }.management-toolbar .search-box { width: 100%; }.management-toolbar select { height: 39px; }.course-management-row { min-width: 680px; }.admin-card:has(.course-management) { overflow-x: auto; }.admin-form-modal form { grid-template-columns: 1fr; }.form-span-2, .admin-form-modal footer { grid-column: span 1; }.modal { padding: 12px; }.admin-form-modal { max-height: 92vh; overflow-y: auto; }
}

@media (max-width: 760px) {
  .content-manager-modal { max-height: 94vh; overflow-y: auto; }
  .content-manager-layout { grid-template-columns: 1fr; }
  .content-manager-layout > aside { max-height: 260px; border-right: 0; border-bottom: 1px solid #e1e3e6; }
  .content-editors { padding: 12px; overflow: visible; }
  .form-inline, .form-inline--3, .material-upload-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Admin command center — dark theme */
body[data-page="admin"] {
  --admin-bg: #08090b;
  --admin-panel: #101216;
  --admin-panel-raised: #15181d;
  --admin-panel-soft: #0d0f12;
  --admin-border: rgba(255,255,255,.085);
  --admin-border-strong: rgba(255,255,255,.14);
  --admin-text: #f4f5f7;
  --admin-muted: #8a8f98;
  --admin-subtle: #5d626b;
  min-width: 320px;
  color: var(--admin-text);
  background: var(--admin-bg);
}
body[data-page="admin"] .page-noise { display: block; opacity: .2; pointer-events: none; }
body[data-page="admin"] button,
body[data-page="admin"] input,
body[data-page="admin"] select,
body[data-page="admin"] textarea { font-family: var(--body); }
body[data-page="admin"] ::selection { color: #fff; background: #d71925; }
body[data-page="admin"] * { scrollbar-color: #353941 #0d0f12; scrollbar-width: thin; }

.admin-app { min-height: 100vh; grid-template-columns: 268px minmax(0, 1fr); background: radial-gradient(circle at 82% 5%, rgba(229,9,20,.07), transparent 24%), var(--admin-bg); }
.admin-sidebar {
  width: 268px;
  padding: 25px 18px 18px;
  color: var(--admin-text);
  background: linear-gradient(180deg, #0e1013 0%, #090a0c 70%);
  border-right-color: var(--admin-border);
  box-shadow: 16px 0 45px rgba(0,0,0,.22);
}
.admin-sidebar::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, #ff2636, transparent 75%); }
.admin-sidebar .brand { width: 178px; margin: 0 0 24px 5px; }
.admin-workspace { margin: 0 0 24px; padding: 12px; gap: 11px; border-color: var(--admin-border); border-radius: 10px; background: linear-gradient(145deg, #181b20, #111317); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.admin-workspace > span { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(145deg, #ff2937, #ad0710); box-shadow: 0 7px 20px rgba(229,9,20,.2); font-size: 17px; }
.admin-workspace div { gap: 3px; }
.admin-workspace small { color: #696e77; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.admin-workspace strong { margin: 0; font-size: 13px; letter-spacing: -.02em; }
.admin-workspace > i { padding: 4px 7px; border: 1px solid rgba(255,38,54,.25); border-radius: 20px; color: #ff5d68; background: rgba(229,9,20,.08); font: normal 700 9px var(--body); text-transform: uppercase; }
.admin-sidebar nav { gap: 5px; }
.admin-sidebar nav a { min-height: 44px; padding: 0 13px; gap: 12px; border: 1px solid transparent; border-radius: 8px; color: #858a93; font-size: 13px; font-weight: 600; letter-spacing: -.01em; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.admin-sidebar nav a span { width: 20px; color: #686d76; }
.admin-sidebar nav a span .icon { width: 18px; height: 18px; }
.admin-sidebar nav a:hover { color: #e5e7eb; border-color: rgba(255,255,255,.05); background: rgba(255,255,255,.035); transform: translateX(2px); }
.admin-sidebar nav a.is-active { color: #fff; border-color: rgba(255,38,54,.15); background: linear-gradient(90deg, rgba(229,9,20,.18), rgba(229,9,20,.035)); box-shadow: inset 3px 0 #ff2636, 0 8px 22px rgba(0,0,0,.12); }
.admin-sidebar nav a.is-active span { color: #ff3744; }
.nav-divider { margin: 13px 8px; background: var(--admin-border); }
.admin-sidebar__footer { padding: 17px 4px 0; gap: 10px; border-top-color: var(--admin-border); }
.admin-sidebar__footer .account-avatar { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(145deg, #2b2f36, #17191d); font-size: 11px; }
.admin-sidebar__footer strong { color: #e6e8eb; font-size: 12px; }
.admin-sidebar__footer small { margin-top: 2px; color: #666b74; font-size: 10px; }
.admin-sidebar__footer button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: #737881; transition: .18s ease; }
.admin-sidebar__footer button:hover { color: #fff; background: rgba(255,255,255,.055); }

.admin-main { grid-column: 2; min-width: 0; }
.admin-topbar { position: sticky; z-index: 40; top: 0; height: 82px; padding: 0 32px; border-bottom-color: var(--admin-border); background: rgba(8,9,11,.82); backdrop-filter: blur(24px) saturate(125%); }
.admin-topbar__title { display: flex; flex-direction: column; }
.admin-topbar p { color: #666b74; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.admin-topbar h1 { margin-top: 5px; color: #f5f6f7; font-size: 20px; letter-spacing: -.025em; }
.admin-menu { color: #fff; }
.admin-top-actions { gap: 9px; }
.sync-status { padding: 8px 11px; border-color: var(--admin-border); border-radius: 7px; color: #9297a0; background: rgba(255,255,255,.025); font-size: 11px; font-weight: 600; }
.sync-status i { width: 7px; height: 7px; margin-right: 6px; }
.admin-top-actions .button,
.welcome-actions .button,
.view-heading .button { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.admin-top-actions .button { color: #c9ccd1; border-color: var(--admin-border-strong); background: rgba(255,255,255,.025); }
.admin-top-actions .button:hover { color: #fff; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.05); }
.button--ghost { color: #d8dae0; border: 1px solid var(--admin-border-strong); background: rgba(255,255,255,.035); }
.button--ghost:hover { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.065); }
.button--ghost .icon, .view-heading .button .icon, .welcome-actions .button .icon { width: 15px; height: 15px; }

.export-menu { position: relative; }
.export-menu summary { min-height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--admin-border-strong); border-radius: 7px; color: #d7d9dd; background: rgba(255,255,255,.035); font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-menu summary .icon { width: 15px; height: 15px; color: #ff4a56; }
.export-menu[open] summary { color: #fff; border-color: rgba(255,38,54,.35); background: rgba(229,9,20,.1); }
.export-menu > div { position: absolute; top: calc(100% + 9px); right: 0; width: 210px; padding: 8px; display: grid; border: 1px solid var(--admin-border-strong); border-radius: 10px; background: #15171b; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.export-menu > div::before { content: ""; position: absolute; right: 22px; top: -5px; width: 9px; height: 9px; border-left: 1px solid var(--admin-border-strong); border-top: 1px solid var(--admin-border-strong); background: #15171b; transform: rotate(45deg); }
.export-menu small { padding: 7px 9px; color: #61666e; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.export-menu button { padding: 9px; border: 0; border-radius: 6px; color: #b6bac1; background: transparent; text-align: left; font-size: 12px; cursor: pointer; }
.export-menu button:hover { color: #fff; background: rgba(255,255,255,.055); }
.export-menu button:disabled, [data-export-report]:disabled { opacity: .5; cursor: wait; }
.community-banner .button:disabled { opacity: .68; cursor: not-allowed; filter: saturate(.55); }

.admin-view { max-width: 1660px; margin: 0 auto; padding: 30px 32px 54px; }
.welcome-strip { position: relative; min-height: 156px; padding: 29px 31px; overflow: hidden; border: 1px solid var(--admin-border); border-radius: 14px; background: radial-gradient(circle at 82% 20%, rgba(229,9,20,.2), transparent 28%), linear-gradient(115deg, #16191e 0%, #101216 52%, #1a0d10 100%); box-shadow: 0 18px 45px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035); }
.welcome-strip::before { content: ""; position: absolute; width: 320px; height: 320px; right: -130px; top: -170px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,255,255,.018), 0 0 0 68px rgba(255,38,54,.018); }
.welcome-strip::after { content: "T."; position: absolute; right: 54px; bottom: -35px; color: rgba(255,255,255,.035); font: 900 150px/1 var(--display); transform: skew(-7deg); }
.welcome-strip > * { position: relative; z-index: 1; }
.welcome-strip > div:first-child > span { display: flex; align-items: center; gap: 6px; color: #858a93; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.welcome-strip > div:first-child > span i { width: 7px; height: 7px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 4px rgba(53,208,127,.09); }
.welcome-strip > div:first-child > span b { color: #a9adb4; font-weight: 700; }
.welcome-strip h2 { margin: 10px 0 6px; font-size: clamp(25px, 2.2vw, 34px); letter-spacing: -.045em; }
.welcome-strip h2 em { color: #ff3543; }
.welcome-strip p { color: #92969f; font-size: 13px; }
.welcome-actions { display: flex; gap: 9px; }
.welcome-strip .button { min-height: 42px; }

.metrics-grid { margin-top: 17px; gap: 14px; }
.metrics-grid .metric-card { position: relative; min-height: 154px; padding: 19px 20px; display: block; overflow: hidden; border-color: var(--admin-border); border-radius: 12px; background: linear-gradient(145deg, #15181d, #101216); box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.025); }
.metrics-grid .metric-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; opacity: .85; background: linear-gradient(90deg, var(--metric-color), transparent 75%); }
.metric-card--red { --metric-color: #ff2636; --metric-soft: rgba(255,38,54,.12); }
.metric-card--orange { --metric-color: #ff8737; --metric-soft: rgba(255,135,55,.12); }
.metric-card--yellow { --metric-color: #f5c84b; --metric-soft: rgba(245,200,75,.11); }
.metric-card--green { --metric-color: #35d07f; --metric-soft: rgba(53,208,127,.11); }
.metric-card header { display: flex; align-items: center; justify-content: space-between; }
.metrics-grid .metric-card header small { color: #8c9199; font-size: 11px; font-weight: 650; }
.metrics-grid .metric-icon { width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--metric-color) 30%, transparent); border-radius: 9px; color: var(--metric-color); background: var(--metric-soft); }
.metrics-grid .metric-icon .icon { width: 17px; height: 17px; }
.metrics-grid .metric-card > strong { display: block; margin: 14px 0 13px; color: #f6f7f8; font: 800 30px/1 var(--display); letter-spacing: -.045em; }
.metric-card footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.metrics-grid .metric-card footer em { color: #686d76; font: normal 10px var(--body); }
.metric-bars { height: 19px; display: flex; align-items: end; gap: 3px; }
.metric-bars i { width: 3px; border-radius: 3px; background: var(--metric-color); opacity: .38; }
.metric-bars i:nth-child(1) { height: 6px; }.metric-bars i:nth-child(2) { height: 10px; }.metric-bars i:nth-child(3) { height: 8px; }.metric-bars i:nth-child(4) { height: 14px; }.metric-bars i:nth-child(5) { height: 12px; }.metric-bars i:nth-child(6) { height: 19px; opacity: .9; }

.operation-strip { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--admin-border); border-radius: 12px; background: #0d0f12; }
.operation-strip article { min-height: 72px; padding: 15px 18px; display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--admin-border); }
.operation-strip article:first-child { border-left: 0; }
.operation-strip article > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--admin-border); border-radius: 9px; color: #777d86; background: rgba(255,255,255,.025); }
.operation-strip .icon { width: 16px; height: 16px; }
.operation-strip div { display: grid; gap: 4px; }
.operation-strip small { color: #6f747d; font-size: 10px; }
.operation-strip strong { color: #e6e8eb; font: 800 16px var(--display); }

.admin-grid { gap: 15px; }
.admin-grid--analytics { grid-template-columns: minmax(0, 1.75fr) minmax(300px, .72fr); }
.admin-grid--secondary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.admin-card { border-color: var(--admin-border); border-radius: 12px; color: var(--admin-text); background: linear-gradient(145deg, #121419, #0f1114); box-shadow: 0 12px 32px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.022); }
.admin-card__heading { min-height: 71px; padding: 18px 20px 13px; border-bottom: 1px solid rgba(255,255,255,.045); }
.admin-card__heading small { color: #666b74; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.admin-card__heading h2 { margin-top: 5px; color: #f0f1f3; font-size: 16px; letter-spacing: -.025em; }
.admin-card__heading > span:not(.system-live) { padding: 6px 9px; border: 1px solid rgba(255,38,54,.15); border-radius: 20px; color: #ff5964; background: rgba(229,9,20,.07); font-size: 10px; font-weight: 700; }
.admin-card__heading button { color: #ff4a56; font-size: 11px; font-weight: 700; }
.chart { height: 260px; padding: 22px 22px 30px 50px; }
.chart-labels { left: 20px; top: 22px; bottom: 35px; color: #5e636c; font-size: 10px; }
.chart svg { height: 195px; }
.chart-grid { stroke: rgba(255,255,255,.065); }
.chart-line { stroke: #ff2636; stroke-width: 3; filter: drop-shadow(0 3px 6px rgba(255,38,54,.25)); }
.chart-days { color: #656a73; font-size: 10px; }

.access-card { display: flex; flex-direction: column; }
.access-visual { padding: 22px 22px 19px; display: flex; align-items: center; gap: 24px; }
.access-donut { --access-rate: 0deg; position: relative; width: 126px; height: 126px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: conic-gradient(#ff2636 0 var(--access-rate), #262a30 var(--access-rate) 360deg); box-shadow: 0 14px 30px rgba(0,0,0,.2); }
.access-donut::before { content: ""; position: absolute; inset: 13px; border: 1px solid var(--admin-border); border-radius: 50%; background: #111318; }
.access-donut span { position: relative; display: grid; gap: 2px; text-align: center; }
.access-donut strong { font: 800 23px var(--display); letter-spacing: -.04em; }
.access-donut small { color: #747983; font-size: 10px; }
.access-legend { flex: 1; min-width: 0; display: grid; gap: 12px; }
.access-legend p { margin: 0; display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; color: #868b94; font-size: 10px; }
.access-legend p i { width: 7px; height: 7px; border-radius: 50%; background: #343840; }
.access-legend p i.is-active { background: #ff2636; box-shadow: 0 0 0 3px rgba(255,38,54,.1); }
.access-legend p b { color: #e7e8ea; font-size: 12px; }
.access-card > footer { margin-top: auto; padding: 14px 20px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.05); color: #61666e; font-size: 9px; }
.access-card > footer b { color: #878c95; font-weight: 600; }

.activity-card ul { padding: 0 20px 13px; }
.activity-card li { min-height: 68px; padding: 14px 0; gap: 12px; border-top-color: rgba(255,255,255,.055); }
.activity-card li:first-child { border-top: 0; }
.activity-avatar { width: 38px; height: 38px; font-size: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.activity-card strong { color: #e6e8eb; font-size: 11px; }
.activity-card p { margin: 4px 0; color: #777c85; font-size: 10px; }
.activity-card p b { color: #b7bbc1; }
.activity-card small { color: #555a62; font-size: 9px; }
.system-live { display: inline-flex; align-items: center; gap: 6px; color: #74dba2; font-size: 10px; font-weight: 700; }
.system-live i { width: 7px; height: 7px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 4px rgba(53,208,127,.08); }
.system-list { padding: 7px 20px; }
.system-list p { min-height: 46px; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid rgba(255,255,255,.05); }
.system-list p:last-child { border-bottom: 0; }
.system-list p > span { display: inline-flex; align-items: center; gap: 9px; color: #8d929a; font-size: 11px; }
.system-list p > span .icon { width: 16px; height: 16px; color: #666b74; }
.system-list p > b { padding: 5px 8px; border: 1px solid var(--admin-border); border-radius: 20px; color: #9a9fa7; background: rgba(255,255,255,.025); font-size: 9px; font-weight: 700; }
.system-list p > b.is-ready { color: #60d997; border-color: rgba(53,208,127,.18); background: rgba(53,208,127,.07); }
.system-list p > b.is-warning { color: #e8a74f; border-color: rgba(232,167,79,.2); background: rgba(232,167,79,.07); }
.system-list p > b i { font-style: normal; }
.system-card > button { width: calc(100% - 40px); min-height: 41px; margin: 12px 20px 20px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--admin-border); border-radius: 8px; color: #aeb2b9; background: rgba(255,255,255,.025); font-size: 10px; font-weight: 700; cursor: pointer; }
.system-card > button:hover { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.system-card > button .icon { width: 13px; height: 13px; }

.popular-courses { margin-top: 15px; overflow: hidden; }
.admin-table__row { padding: 13px 20px; border-top-color: rgba(255,255,255,.055); color: #868b94; font-size: 11px; }
.admin-table__head { color: #5f646c; background: rgba(255,255,255,.018); font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.table-course { color: #e5e7ea; }
.table-course i { width: 58px; height: 34px; border: 1px solid var(--admin-border); border-radius: 6px; background-color: #1b1e23; }
.table-course b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { padding: 5px 8px; border: 1px solid rgba(53,208,127,.16); color: #64d99a; background: rgba(53,208,127,.07); font-size: 9px; font-weight: 700; }

.view-heading { min-height: 72px; margin-bottom: 24px; align-items: flex-end; }
.view-heading > div:last-child:not(:first-child) { display: flex; align-items: center; gap: 8px; }
.view-heading p { color: #ff4652; font-size: 10px; letter-spacing: .1em; }
.view-heading h2 { margin: 7px 0 5px; color: #f4f5f7; font-size: clamp(25px, 2vw, 31px); letter-spacing: -.04em; }
.view-heading span { color: #858a93; font-size: 12px; }
.section-kpis { margin: 0 0 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.section-kpis article { min-height: 92px; padding: 18px 20px; display: grid; gap: 9px; border: 1px solid var(--admin-border); border-radius: 11px; background: linear-gradient(145deg, #13161a, #0e1013); }
.section-kpis small { color: #71767f; font-size: 10px; }
.section-kpis strong { color: #f1f2f4; font: 800 23px/1 var(--display); }
.management-toolbar { margin-bottom: 12px; gap: 9px; }
.management-toolbar .search-box { width: min(390px, 100%); height: 42px; border-color: var(--admin-border); border-radius: 8px; background: #101216; }
.management-toolbar .search-box:focus-within { border-color: rgba(255,38,54,.55); box-shadow: 0 0 0 3px rgba(229,9,20,.08); }
.management-toolbar .search-box input { color: #e4e6e9; font-size: 11px; }
.management-toolbar .search-box input::placeholder { color: #555a62; }
.management-toolbar select { min-height: 42px; padding: 0 34px 0 13px; border-color: var(--admin-border); border-radius: 8px; color: #aeb2b8; background: #101216; font-size: 11px; }
.toolbar-export { min-height: 42px; margin-left: auto; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--admin-border); border-radius: 8px; color: #aeb2b9; background: #101216; font-size: 10px; font-weight: 700; cursor: pointer; }
.toolbar-export:hover { color: #fff; border-color: rgba(255,255,255,.17); }
.toolbar-export .icon { width: 14px; height: 14px; color: #ff4652; }

.course-management { min-width: 820px; }
.course-management-row { min-height: 72px; padding: 12px 18px; border-bottom-color: rgba(255,255,255,.055); color: #8a8f98; font-size: 11px; }
.course-management-head { min-height: 40px; padding-top: 9px; padding-bottom: 9px; color: #60656d; background: rgba(255,255,255,.018); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.course-management-row > span { color: inherit; }
.course-management-row .table-course i { width: 76px; height: 44px; }
.course-management-row button { width: 32px; height: 32px; border-color: var(--admin-border); border-radius: 7px; color: #888d95; background: rgba(255,255,255,.025); }
.course-management-row button:hover { color: #ff4b57; border-color: rgba(255,38,54,.28); background: rgba(229,9,20,.07); }
.course-management-row button .icon { width: 14px; height: 14px; }

.data-table { min-width: 800px; }
.data-table-row { min-height: 62px; padding: 12px 18px; border-bottom-color: rgba(255,255,255,.055); color: #858a93; font-size: 11px; }
.data-table-row--head { min-height: 39px; padding-top: 9px; padding-bottom: 9px; color: #5e636c; background: rgba(255,255,255,.018); font-size: 9px; letter-spacing: .07em; }
.data-person { color: #e2e4e7; }
.data-person > i { width: 38px; height: 38px; background: linear-gradient(145deg, #e62430, #721016); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size: 9px; }
.data-person small { margin-top: 3px; color: #666b74; font-size: 9px; }
.data-status { padding: 5px 8px; border: 1px solid rgba(53,208,127,.16); color: #62d898; background: rgba(53,208,127,.07); font-size: 9px; }
.data-status.is-inactive { color: #ff7b84; border-color: rgba(255,38,54,.18); background: rgba(229,9,20,.07); }
.content-empty { padding: 20px; color: #777c85; font-size: 11px; }

.report-summary { min-height: 155px; margin-bottom: 16px; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; border: 1px solid rgba(255,38,54,.14); border-radius: 14px; background: radial-gradient(circle at 88% 40%, rgba(229,9,20,.16), transparent 28%), linear-gradient(130deg, #17191e, #100e12); }
.report-summary small { color: #ff4a56; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.report-summary h3 { margin: 8px 0 6px; color: #f4f5f7; font: 800 23px var(--display); letter-spacing: -.035em; }
.report-summary p { max-width: 620px; margin: 0; color: #858a93; font-size: 12px; line-height: 1.6; }
.report-summary > span { width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid rgba(255,38,54,.2); border-radius: 19px; color: #ff3e4b; background: rgba(229,9,20,.08); box-shadow: 0 15px 40px rgba(229,9,20,.12); transform: rotate(-4deg); }
.report-summary > span .icon { width: 34px; height: 34px; }
.report-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.report-grid article { min-height: 250px; padding: 21px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--admin-border); border-radius: 12px; background: linear-gradient(145deg, #15181d, #0f1114); transition: transform .2s ease, border-color .2s ease; }
.report-grid article:hover { border-color: rgba(255,255,255,.15); transform: translateY(-2px); }
.report-grid article > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,38,54,.16); border-radius: 10px; color: #ff4855; background: rgba(229,9,20,.07); }
.report-grid article > span .icon { width: 20px; height: 20px; }
.report-grid article > div { margin: 19px 0 18px; }
.report-grid small { color: #60656d; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.report-grid h3 { margin: 6px 0; color: #edeef0; font: 800 17px var(--display); }
.report-grid p { min-height: 39px; margin: 0 0 13px; color: #7e838c; font-size: 11px; line-height: 1.55; }
.report-grid strong { color: #aaafb6; font-size: 10px; }
.report-grid button { width: 100%; min-height: 39px; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--admin-border); border-radius: 8px; color: #b7bbc1; background: rgba(255,255,255,.025); font-size: 10px; font-weight: 700; cursor: pointer; }
.report-grid button:hover { color: #fff; border-color: rgba(255,38,54,.25); background: rgba(229,9,20,.07); }
.report-grid button .icon { width: 14px; height: 14px; color: #ff4a56; }

.integration-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.integration-grid article { min-height: 265px; padding: 21px; border-color: var(--admin-border); border-radius: 12px; background: linear-gradient(145deg, #15181d, #0f1114); }
.integration-logo { width: 48px; height: 48px; border: 1px solid var(--admin-border); border-radius: 12px; background: #1a1d22; }
.integration-logo--firebase { color: #ffbd2f; border-color: rgba(255,189,47,.15); background: rgba(255,189,47,.07); }
.integration-logo--drive { color: #5da9ff; border-color: rgba(71,147,255,.18); background: linear-gradient(145deg, rgba(66,133,244,.12), rgba(52,168,83,.06)); }
.integration-grid article div { min-width: 150px; }
.integration-grid article div > small { color: #60656d; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.integration-grid h3 { margin: 6px 0; color: #eceef0; font-size: 15px; }
.integration-grid p { min-height: 48px; margin-bottom: 9px; color: #7e838c; font-size: 11px; line-height: 1.55; }
.integration-grid em { font-size: 10px; font-weight: 650; }
.integration-grid em.is-ready { color: #5bd593; }
.integration-grid em.is-warning { color: #e5a248; }
.integration-grid button { height: 38px; margin-top: auto; border-color: var(--admin-border); border-radius: 8px; color: #aeb2b9; background: rgba(255,255,255,.025); font-size: 10px; font-weight: 700; }
.integration-grid button:hover { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.05); }
.integration-checklist { margin-top: 15px; }

/* Dark admin modals and content manager */
body[data-page="admin"] .modal-backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(7px); }
.admin-form-modal,
.content-manager-modal { color: #e9eaed; border: 1px solid var(--admin-border-strong); border-radius: 14px; background: #101216; box-shadow: 0 28px 90px rgba(0,0,0,.65); }
.admin-form-modal > header,
.content-manager-modal > header { color: #fff; border-bottom: 1px solid var(--admin-border); background: linear-gradient(110deg, #17191e, #110d10); }
.admin-form-modal header small,
.content-manager-modal > header small { color: #ff4652; font-size: 9px; letter-spacing: .1em; }
.admin-form-modal header h2,
.content-manager-modal > header h2 { font-size: 21px; }
.content-manager-modal > header p { color: #777c85; font-size: 10px; }
.admin-form-modal form { gap: 15px; background: #101216; }
.admin-form-modal label,
.content-editors label { color: #989da5; font-size: 10px; }
.admin-form-modal input,
.admin-form-modal select,
.admin-form-modal textarea,
.content-editors input,
.content-editors select,
.content-editors textarea { min-height: 41px; padding: 10px 12px; color: #e9eaed; border-color: var(--admin-border); border-radius: 7px; background: #0b0d10; font-size: 11px; }
.admin-form-modal textarea,
.content-editors textarea { min-height: auto; }
.admin-form-modal input:focus,
.admin-form-modal select:focus,
.admin-form-modal textarea:focus,
.content-editors input:focus,
.content-editors select:focus,
.content-editors textarea:focus { border-color: rgba(255,38,54,.65); box-shadow: 0 0 0 3px rgba(229,9,20,.08); }
.admin-form-modal .button--outline { color: #b1b5bc; border-color: var(--admin-border-strong); }
.attachment-field > span:first-child small { color: #656a73; font-size: 9px; }
.attachment-drop { border-color: var(--admin-border-strong); color: #8a8f98; background: #0c0e11; }
.attachment-drop:hover { border-color: rgba(255,38,54,.55); background: rgba(229,9,20,.035); }
.attachment-drop i { color: #ff4652; background-color: #17191e; }
.attachment-drop b { color: #c9ccd1; font-size: 10px; }
.attachment-drop small { color: #666b74; font-size: 9px; }
.content-manager-layout > aside { border-right-color: var(--admin-border); background: #0c0e11; }
.content-manager-layout > aside strong { color: #e1e3e6; font-size: 12px; }
.content-manager-layout > aside button { color: #ff4652; font-size: 10px; }
.content-tree-actions { display: flex; align-items: center; gap: 9px; }
.content-tree-actions button { display: inline-flex; align-items: center; gap: 4px; }
.content-tree-actions button .icon { width: 12px !important; height: 12px !important; }
.content-tree-actions [data-open-youtube-import] { color: #ff5964; }
.content-tree-actions [data-open-drive-import] { color: #61a8ff; }
.content-tree { gap: 9px; }
.content-tree-module { border-color: var(--admin-border); border-radius: 8px; background: #111318; }
.content-tree-module.is-current { border-color: rgba(255,38,54,.35); box-shadow: 0 0 0 1px rgba(229,9,20,.08); }
.content-tree-module > div { background: #13161a; }
.content-tree-module > div > button:first-child { color: #d8dae0; }
.content-tree-module > div > button:first-child small { color: #696e77; font-size: 8px; }
.content-tree-module ul { border-top-color: var(--admin-border); }
.content-tree-module li { border-top-color: rgba(255,255,255,.045); }
.content-tree-module li.is-current { background: rgba(229,9,20,.08); }
.content-tree-module li button { color: #8e939c !important; }
.content-tree-module li button small { color: #5e636c; font-size: 8px; }
.content-editors { background: #0e1013; }
.content-editors form { border-color: var(--admin-border); border-radius: 10px; background: #13151a; }
.content-editor-heading small { color: #ff4652; font-size: 9px; }
.content-editor-heading h3 { color: #eef0f2; font-size: 17px; }
.danger-link { color: #ff6c76; font-size: 10px; }
.admin-material-row { border-color: var(--admin-border); background: #101216; }
.admin-material-row b { color: #d9dbe0; font-size: 10px; }
.admin-material-row small { color: #696e77; font-size: 9px; }
.material-upload-row .button { color: #c2c5ca; border-color: var(--admin-border-strong); }
.youtube-import-panel { padding: 19px; border: 1px solid rgba(255,38,54,.18); border-radius: 11px; background: radial-gradient(circle at 95% 5%, rgba(229,9,20,.09), transparent 27%), #13151a; }
.drive-import-panel { border-color: rgba(66,133,244,.22); background: radial-gradient(circle at 95% 5%, rgba(66,133,244,.11), transparent 29%), #13151a; }
.drive-import-panel > header small { color: #6daeff; }
.drive-import-notice { color: #81b7d9; border-color: rgba(66,133,244,.16); background: rgba(66,133,244,.05); }
.drive-import-panel .youtube-preview-item > i { color: #6daeff; background: rgba(66,133,244,.08); }
.youtube-import-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.youtube-import-panel > header small { color: #ff4652; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.youtube-import-panel > header h3 { margin: 5px 0 4px; color: #f1f2f4; font: 800 19px var(--display); }
.youtube-import-panel > header p { margin: 0; color: #777c85; font-size: 10px; }
.youtube-import-panel > header button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--admin-border); border-radius: 7px; color: #8c9199; background: rgba(255,255,255,.025); cursor: pointer; }
.youtube-import-panel > header button .icon { width: 15px; height: 15px; }
.content-editors .youtube-import-panel form { margin-top: 17px; padding: 13px; grid-template-columns: minmax(220px, 1.65fr) minmax(150px, .8fr) minmax(120px, .65fr) auto; align-items: end; gap: 10px; background: #0e1013; }
.youtube-import-panel form label { gap: 6px; }
.youtube-import-panel form .button { min-height: 41px; color: #c5c8cd; border-color: var(--admin-border-strong); white-space: nowrap; }
.youtube-import-panel form .button .icon { width: 14px; height: 14px; }
.youtube-import-notice { margin-top: 11px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid rgba(255,189,47,.13); border-radius: 8px; color: #b29b6c; background: rgba(255,189,47,.045); }
.youtube-import-notice > span { flex: 0 0 auto; }
.youtube-import-notice .icon { width: 15px; height: 15px; }
.youtube-import-notice p { margin: 0; font-size: 10px; line-height: 1.5; }
.youtube-preview-list { max-height: 340px; margin-top: 12px; overflow-y: auto; border: 1px solid var(--admin-border); border-radius: 9px; background: #0c0e11; }
.youtube-preview-toolbar { position: sticky; z-index: 2; top: 0; min-height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--admin-border); background: rgba(15,17,20,.96); backdrop-filter: blur(12px); }
.youtube-preview-toolbar label { display: flex; align-items: center; gap: 8px; color: #b6bac1; font-size: 10px; cursor: pointer; }
.youtube-preview-toolbar input, .youtube-preview-item > input { width: 15px; height: 15px; accent-color: #e50914; }
.youtube-preview-toolbar b { color: #696e77; font-size: 9px; font-weight: 650; }
.youtube-preview-items { display: grid; }
.youtube-preview-item { min-height: 58px; padding: 9px 12px; display: grid !important; grid-template-columns: 17px 28px minmax(0, 1fr) 24px; align-items: center; gap: 9px !important; border-top: 1px solid rgba(255,255,255,.045); cursor: pointer; }
.youtube-preview-item:first-child { border-top: 0; }
.youtube-preview-item:hover { background: rgba(255,255,255,.025); }
.youtube-preview-item.is-unavailable { opacity: .48; cursor: not-allowed; }
.youtube-preview-item.is-imported { background: rgba(229,9,20,.025); }
.youtube-video-index { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--admin-border); border-radius: 7px; color: #747983; background: #15171b; font-size: 9px; }
.youtube-preview-item > span:nth-child(3) { min-width: 0; display: grid; gap: 4px; }
.youtube-preview-item b { overflow: hidden; color: #d9dbe0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.youtube-preview-item small { color: #686d76; font-size: 8px; }
.youtube-preview-item > i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: #ff4652; background: rgba(229,9,20,.07); font-style: normal; }
.youtube-preview-item > i .icon { width: 13px; height: 13px; }
.youtube-import-panel > footer { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.youtube-import-panel > footer > span { color: #777c85; font-size: 10px; }
.youtube-import-panel > footer .button { min-height: 40px; }
.youtube-import-panel > footer .button:disabled { opacity: .42; cursor: not-allowed; }

.period-control { min-width: 132px; display: grid; gap: 5px; }
.welcome-strip .period-control > span { color: #777c85; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.period-control select { width: 100%; min-height: 42px; padding: 0 32px 0 11px; border: 1px solid var(--admin-border-strong); border-radius: 7px; outline: 0; color: #d9dbe0; background: #111318; font-size: 11px; font-weight: 650; }
.period-control select:focus { border-color: rgba(255,38,54,.55); box-shadow: 0 0 0 3px rgba(229,9,20,.08); }
.period-control select:disabled { opacity: .55; cursor: wait; }
.financial-grid { margin-top: 14px; display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 12px; }
.financial-card { position: relative; min-height: 126px; padding: 18px 19px; overflow: hidden; border: 1px solid var(--admin-border); border-radius: 11px; background: linear-gradient(145deg, #13161a, #0e1013); box-shadow: 0 10px 27px rgba(0,0,0,.14); }
.financial-card--primary { border-color: rgba(255,38,54,.18); background: radial-gradient(circle at 90% 12%, rgba(229,9,20,.16), transparent 38%), linear-gradient(145deg, #17191e, #100e11); }
.financial-card header { display: flex; align-items: center; gap: 9px; }
.financial-card header > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--admin-border); border-radius: 7px; color: #838892; background: rgba(255,255,255,.025); }
.financial-card--primary header > span { color: #ff4652; border-color: rgba(255,38,54,.18); background: rgba(229,9,20,.07); }
.financial-card header .icon { width: 14px; height: 14px; }
.financial-card small { color: #7b8089; font-size: 10px; font-weight: 650; }
.financial-card > strong { margin: 14px 0 7px; display: block; overflow: hidden; color: #f1f2f4; font: 800 22px/1 var(--display); letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.financial-card--primary > strong { color: #fff; font-size: 25px; }
.financial-card p { margin: 0; color: #5f646c; font-size: 9px; line-height: 1.45; }
.financial-card p b { color: #7b8089; font-weight: 650; }
.admin-alerts { min-height: 56px; margin-top: 12px; padding: 10px 13px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--admin-border); border-radius: 10px; background: #0d0f12; }
.admin-alerts > span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--admin-border); border-radius: 8px; color: #81868f; background: rgba(255,255,255,.025); }
.admin-alerts > span .icon { width: 16px; height: 16px; }
.admin-alerts p { min-width: 0; margin: 0; display: grid; gap: 3px; }
.admin-alerts strong { color: #dfe1e4; font-size: 11px; }
.admin-alerts small { color: #71767f; font-size: 10px; }
.admin-alerts button { min-height: 32px; margin-left: auto; padding: 0 11px; border: 1px solid var(--admin-border); border-radius: 7px; color: #aeb2b9; background: rgba(255,255,255,.025); font-size: 9px; font-weight: 700; cursor: pointer; }
.admin-alerts button:hover { color: #fff; background: rgba(255,255,255,.05); }
.admin-alerts.is-warning { border-color: rgba(232,167,79,.18); background: rgba(232,167,79,.04); }
.admin-alerts.is-warning > span { color: #e8a74f; border-color: rgba(232,167,79,.2); background: rgba(232,167,79,.07); }
.admin-alerts.is-healthy { border-color: rgba(53,208,127,.15); background: rgba(53,208,127,.035); }
.admin-alerts.is-healthy > span { color: #55d38f; border-color: rgba(53,208,127,.18); background: rgba(53,208,127,.065); }

@media (max-width: 1280px) {
  .admin-app { grid-template-columns: 246px minmax(0, 1fr); }
  .admin-sidebar { width: 246px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .report-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid--analytics { grid-template-columns: minmax(0, 1.45fr) minmax(285px, .75fr); }
  .financial-grid { grid-template-columns: repeat(2, 1fr); }
  .content-editors .youtube-import-panel form { grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr) auto; }
  .content-editors .youtube-import-panel form .youtube-playlist-field { grid-column: 1 / -1; }
  .youtube-import-panel form label, .youtube-import-panel form input, .youtube-import-panel form select { min-width: 0; }
}

@media (max-width: 980px) {
  .admin-app { grid-template-columns: 1fr; }
  .admin-sidebar { width: 268px; }
  .admin-main { grid-column: 1; }
  .admin-topbar { padding: 0 22px; }
  .admin-menu { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--admin-border); border-radius: 8px; background: #121419; }
  .admin-menu .icon { width: 18px; height: 18px; }
  .admin-view { padding: 24px 22px 45px; }
  .admin-grid--analytics, .admin-grid--secondary { grid-template-columns: 1fr; }
  .integration-grid { grid-template-columns: 1fr; }
  .integration-grid article { min-height: 210px; }
  .sync-status { display: none; }
}

@media (max-width: 720px) {
  .admin-topbar { height: 72px; padding: 0 14px; }
  .admin-topbar p { display: none; }
  .admin-topbar h1 { margin: 0; font-size: 17px; }
  .admin-top-actions { gap: 6px; }
  .admin-top-actions > .button { width: 38px; padding: 0; justify-content: center; font-size: 0; }
  .admin-top-actions > .button .icon { width: 16px; height: 16px; }
  .export-menu summary { width: 38px; padding: 0; justify-content: center; font-size: 0; }
  .export-menu > div { right: -48px; }
  .admin-view { padding: 17px 14px 38px; }
  .welcome-strip { min-height: 210px; padding: 24px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 21px; }
  .welcome-strip h2 { max-width: 390px; }
  .welcome-strip p { max-width: 390px; line-height: 1.55; }
  .welcome-actions { width: 100%; }
  .welcome-actions .button { flex: 1; justify-content: center; }
  .period-control { flex: 1; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metrics-grid .metric-card { min-height: 142px; }
  .operation-strip { grid-template-columns: 1fr 1fr; }
  .operation-strip article:nth-child(3) { border-left: 0; }
  .operation-strip article:nth-child(n+3) { border-top: 1px solid var(--admin-border); }
  .access-visual { align-items: flex-start; flex-direction: column; }
  .access-legend { width: 100%; }
  .view-heading { align-items: flex-start; flex-direction: column; gap: 17px; }
  .view-heading > div:last-child:not(:first-child), .view-heading > button { width: 100%; }
  .view-heading > div:last-child:not(:first-child) .button { flex: 1; justify-content: center; }
  .view-heading > button { justify-content: center; }
  .section-kpis { grid-template-columns: 1fr; }
  .section-kpis article { min-height: 78px; }
  .management-toolbar { align-items: stretch; flex-direction: column; }
  .management-toolbar .search-box { width: 100%; }
  .management-toolbar select, .toolbar-export { width: 100%; margin-left: 0; justify-content: center; }
  .report-summary { padding: 24px; }
  .report-summary > span { display: none; }
  .report-grid { grid-template-columns: 1fr; }
  .report-grid article { min-height: 230px; }
  .chart { padding-left: 42px; padding-right: 14px; }
  .chart-labels { left: 14px; }
  .content-editors .youtube-import-panel form { grid-template-columns: 1fr; }
  .youtube-import-panel > footer { align-items: stretch; flex-direction: column; }
  .youtube-import-panel > footer .button { width: 100%; justify-content: center; }
}

@media (max-width: 470px) {
  .admin-topbar__title { max-width: 105px; }
  .admin-topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .welcome-actions { flex-direction: column; }
  .financial-grid { grid-template-columns: 1fr; }
  .admin-alerts { align-items: flex-start; flex-wrap: wrap; }
  .admin-alerts button { width: 100%; margin-left: 43px; }
  .operation-strip { grid-template-columns: 1fr; }
  .operation-strip article { border-left: 0; border-top: 1px solid var(--admin-border); }
  .operation-strip article:first-child { border-top: 0; }
  .admin-card__heading { align-items: flex-start; gap: 10px; }
  .access-donut { width: 112px; height: 112px; }
  .report-summary h3 { font-size: 20px; }
}

/* Student account, purchase handoff and learning utilities */
.lesson-navigation { min-height: 52px; padding: 9px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
.lesson-navigation button { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 6px; color: #b8bbc1; background: rgba(255,255,255,.035); font-size: 9px; font-weight: 700; cursor: pointer; }
.lesson-navigation button:last-child { justify-self: end; }
.lesson-navigation button:hover:not(:disabled) { color: #fff; border-color: rgba(229,9,20,.45); background: rgba(229,9,20,.09); }
.lesson-navigation button:disabled { opacity: .38; cursor: not-allowed; }
.lesson-navigation button .icon { width: 12px; height: 12px; }
.lesson-navigation > span { color: #6f737a; font-size: 9px; font-weight: 700; }
.notes-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.notes-heading h2, .notes-heading p { margin: 0; }
.notes-heading p { margin-top: 5px; color: #73767d; font-size: 9px; }
.notes-heading > span { padding: 5px 8px; border: 1px solid rgba(46,212,122,.14); border-radius: 20px; color: #73d9a4; background: rgba(46,212,122,.05); font-size: 8px; }
.lesson-note-editor { width: 100%; margin-top: 15px; padding: 14px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: #e9eaed; background: #111317; font-size: 11px; line-height: 1.65; }
.lesson-note-editor:focus { border-color: rgba(229,9,20,.55); box-shadow: 0 0 0 3px rgba(229,9,20,.08); }
.note-actions { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.note-actions small { color: #686c73; font-size: 8px; }
.note-actions .button { min-height: 37px; font-size: 9px; }
.lesson-actions button.is-complete { color: #69d99e; border-color: rgba(46,212,122,.22); background: rgba(46,212,122,.07); }

.account-page { min-height: calc(100vh - 76px); padding: 38px clamp(20px,4vw,64px) 70px; background: radial-gradient(circle at 84% 0, rgba(229,9,20,.1), transparent 28%), #090a0c; }
.account-hero { max-width: 1460px; min-height: 150px; margin: 0 auto; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: radial-gradient(circle at 92% 12%, rgba(229,9,20,.18), transparent 30%), linear-gradient(135deg,#17191e,#0e1013); box-shadow: 0 22px 70px rgba(0,0,0,.25); }
.account-identity { display: flex; align-items: center; gap: 19px; }
.account-avatar--large { width: 68px; height: 68px; font-size: 23px; box-shadow: 0 12px 32px rgba(229,9,20,.2); }
.account-identity small { color: #ff4b57; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.account-identity h1 { margin: 5px 0 4px; font: 800 clamp(25px,3vw,39px) var(--display); letter-spacing: -.035em; }
.account-identity p { margin: 0; color: #858991; font-size: 11px; }
.account-hero-actions { display: flex; gap: 9px; }
.account-hero .button--ghost { border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.035); }
.account-notice { max-width: 1460px; min-height: 64px; margin: 14px auto 0; padding: 12px 15px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: #111317; }
.account-notice > span { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #ff4652; background: rgba(229,9,20,.08); }
.account-notice > span .icon { width: 17px; height: 17px; }
.account-notice div { display: grid; gap: 3px; }
.account-notice strong { font-size: 11px; }
.account-notice p { margin: 0; color: #747880; font-size: 9px; }
.account-notice button { margin-left: auto; min-height: 33px; padding: 0 11px; border: 1px solid rgba(255,255,255,.11); border-radius: 6px; color: #dddfe3; background: rgba(255,255,255,.04); font-size: 9px; cursor: pointer; }
.account-notice.is-success { border-color: rgba(46,212,122,.16); background: rgba(46,212,122,.035); }
.account-notice.is-success > span { color: #65d99c; background: rgba(46,212,122,.08); }
.account-notice.is-warning { border-color: rgba(255,176,0,.17); background: rgba(255,176,0,.035); }
.account-notice.is-warning > span { color: #f0b84b; background: rgba(255,176,0,.08); }
.account-layout { max-width: 1460px; margin: 16px auto 0; display: grid; grid-template-columns: minmax(0,1fr) 315px; gap: 16px; align-items: start; }
.account-main-card, .account-sidebar section { border: 1px solid rgba(255,255,255,.085); border-radius: 13px; background: linear-gradient(145deg,#13161a,#0e1013); }
.account-main-card > header { min-height: 90px; padding: 19px 21px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.075); }
.account-main-card header small, .account-sidebar header small { color: #ff4652; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.account-main-card h2, .account-sidebar h2 { margin: 4px 0; font: 800 18px var(--display); }
.account-main-card header p { margin: 0; color: #70747c; font-size: 9px; }
.account-main-card > header > span { min-width: 38px; height: 38px; padding: 0 12px; display: grid; place-items: center; border-radius: 20px; color: #fff; background: #e50914; font: 800 12px var(--display); }
.account-library { padding: 14px; display: grid; gap: 11px; }
.account-course-card { min-height: 138px; display: grid; grid-template-columns: 225px minmax(0,1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: #0e1013; transition: .2s ease; }
.account-course-card:hover { border-color: rgba(255,255,255,.16); transform: translateY(-2px); }
.account-course-art { --account-course-image:none; --account-course-position:center; position: relative; min-height: 138px; display: grid; place-items: center; background-image: linear-gradient(0deg,rgba(0,0,0,.45),transparent),var(--account-course-image); background-size: cover; background-position: var(--account-course-position); }
.account-course-art span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(0,0,0,.52); }
.account-course-card > div { min-width: 0; padding: 17px 19px; }
.account-course-card small { color: #ff4652; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.account-course-card h3 { margin: 5px 0; font: 800 17px var(--display); }
.account-course-card p { margin: 0 0 13px; color: #767a82; font-size: 9px; }
.account-course-progress { height: 4px; overflow: hidden; border-radius: 5px; background: #282b30; }
.account-course-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#e50914,#ff4a55); }
.account-course-card footer { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; color: #777b82; font-size: 8px; }
.account-course-card footer a { display: inline-flex; align-items: center; gap: 5px; color: #e9eaed; font-weight: 700; }
.account-course-card footer a .icon { width: 11px; height: 11px; color: #ff4652; }
.account-sidebar { display: grid; gap: 12px; }
.account-sidebar section { padding: 18px; }
.account-sidebar header { display: flex; align-items: center; gap: 10px; }
.account-sidebar header > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 8px; color: #ff4652; background: rgba(229,9,20,.075); }
.account-sidebar header .icon { width: 17px; height: 17px; }
.account-sidebar p { margin: 14px 0; color: #777b82; font-size: 9px; line-height: 1.6; }
.account-sidebar button, .account-sidebar a { width: 100%; min-height: 37px; padding: 0 10px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #cfd1d5; background: rgba(255,255,255,.025); font-size: 8px; font-weight: 700; cursor: pointer; }
.account-loading { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 12px; color: #757981; font-size: 9px; }
.account-loading i { width: 28px; height: 28px; border: 2px solid #292c31; border-top-color: #e50914; border-radius: 50%; animation: accountSpin .8s linear infinite; }
@keyframes accountSpin { to { transform: rotate(360deg); } }
.account-empty { min-height: 250px; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; }
.account-empty > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 10px; color: #ff4652; background: rgba(229,9,20,.08); }
.account-empty h3, .account-empty p { margin: 0; }
.account-empty p { max-width: 430px; color: #777b82; font-size: 9px; line-height: 1.55; }
.account-empty .button { margin-top: 7px; min-height: 38px; }

.purchase-page { min-height: calc(100vh - 76px); padding: 42px 22px 75px; display: grid; place-items: center; background: radial-gradient(circle at 72% 20%,rgba(229,9,20,.12),transparent 30%),#090a0c; }
.purchase-card { width: min(1050px,100%); min-height: 570px; display: grid; grid-template-columns: minmax(320px,.85fr) minmax(440px,1.15fr); overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 17px; background: #111317; box-shadow: 0 35px 100px rgba(0,0,0,.5); }
.purchase-art { --purchase-image:none;--purchase-position:center; position: relative; min-height: 100%; background-image: linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.05) 60%),var(--purchase-image); background-size: cover; background-position: var(--purchase-position); }
.purchase-art span { position: absolute; left: 22px; bottom: 22px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; color: #d9dbdf; background: rgba(0,0,0,.62); font-size: 8px; font-weight: 700; backdrop-filter: blur(10px); }
.purchase-content { padding: clamp(35px,5vw,64px); display: flex; flex-direction: column; justify-content: center; }
.purchase-content h1 { margin: 18px 0 10px; font: 900 clamp(30px,4vw,48px)/1 var(--display); letter-spacing: -.04em; }
.purchase-content > p { margin: 0; color: #989ba2; font-size: 11px; line-height: 1.7; }
.purchase-steps { margin: 28px 0; display: grid; gap: 10px; }
.purchase-steps > div { position: relative; min-height: 48px; display: flex; align-items: center; gap: 11px; color: #696d75; }
.purchase-steps > div:not(:last-child)::after { content:""; position:absolute; left:16px; top:40px; width:1px; height:18px; background:#30333a; }
.purchase-steps > div > span { width: 33px; height: 33px; display: grid; place-items: center; flex:0 0 auto; border: 1px solid #35383e; border-radius: 50%; background: #16191d; font-size: 9px; font-weight: 800; }
.purchase-steps p { margin:0; display:grid; gap:3px; }
.purchase-steps strong { color:#a5a8ae; font-size:10px; }
.purchase-steps small { font-size:8px; }
.purchase-steps > div.is-current > span { color:#fff; border-color:#e50914; background:#e50914; box-shadow:0 0 0 5px rgba(229,9,20,.1); }
.purchase-steps > div.is-current strong { color:#fff; }
.purchase-steps > div.is-complete > span { color:#fff; border-color:#2ed47a; background:#1e9e5b; }
.purchase-steps > div.is-complete strong { color:#dfe2e5; }
.purchase-actions { display:flex; flex-wrap:wrap; gap:9px; }
.purchase-help { margin-top:19px; color:#686c73; font-size:8px; line-height:1.55; }
.purchase-help a { color:#d7d9dc; text-decoration:underline; }

@media (max-width: 860px) {
  .account-page, .purchase-page { min-height: calc(100vh - 66px); }
  .account-hero { align-items:flex-start; flex-direction:column; }
  .account-layout { grid-template-columns:1fr; }
  .account-sidebar { grid-template-columns:1fr 1fr; }
  .purchase-card { grid-template-columns:1fr; }
  .purchase-art { min-height:250px; }
}
@media (max-width: 580px) {
  .lesson-navigation { grid-template-columns:1fr 1fr; }
  .lesson-navigation > span { display:none; }
  .lesson-navigation button { justify-content:center; }
  .account-page { padding:18px 13px 45px; }
  .account-hero { padding:21px; }
  .account-hero-actions { width:100%; }
  .account-hero-actions .button { flex:1; padding:0 10px; font-size:9px; }
  .account-notice { align-items:flex-start; flex-wrap:wrap; }
  .account-notice button { width:100%; margin-left:48px; }
  .account-course-card { grid-template-columns:1fr; }
  .account-course-art { min-height:145px; }
  .account-sidebar { grid-template-columns:1fr; }
  .purchase-page { padding:16px 12px 45px; }
  .purchase-card { min-height:0; }
  .purchase-art { min-height:190px; }
  .purchase-content { padding:27px 21px 32px; }
  .purchase-content h1 { font-size:31px; }
  .purchase-actions .button { width:100%; }
}