:root {
  --ink: #070806;
  --panel: #0f100d;
  --panel-2: #151611;
  --line: rgba(255, 255, 255, 0.09);
  --gold: #e3b735;
  --gold-bright: #ffe477;
  --muted: #8d8b81;
  --soft: #c8c4b8;
  --green: #4bd58a;
  --red: #ff746c;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: #f5f1e7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.shell { width: min(1220px, calc(100% - 48px)); margin-inline: auto; }
.shell-wide { width: min(1440px, calc(100% - 48px)); margin-inline: auto; }

.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(227,183,53,.72); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  color: var(--gold-bright); font: 700 25px Georgia, serif;
}
.brand > span:last-child { display: grid; gap: 2px; }
.brand strong { font: 700 23px Georgia, serif; letter-spacing: .15em; }
.brand small { color: #858277; font-size: 7px; letter-spacing: .28em; }
.brand .brand-mark { font-family: Georgia, serif; }

.topbar, .dashboard-topbar {
  height: 92px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.secure-chip, .device-pill, .admin-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 999px; color: #a9a69b;
  background: rgba(255,255,255,.02); font-size: 8px; font-weight: 800; letter-spacing: .14em;
}
.secure-chip span, .device-pill i, .access-status > span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px rgba(75,213,138,.65);
}

/* Login */
.login-page {
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 75% 42%, rgba(227,183,53,.12), transparent 28%),
    #070806;
  background-size: 70px 70px, 70px 70px, auto, auto;
}
.login-page::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,8,6,.96), transparent 52%, rgba(7,8,6,.42));
}
.login-page > * { position: relative; }
.login-shell {
  min-height: calc(100vh - 174px); display: grid; grid-template-columns: 1.15fr .72fr;
  align-items: center; gap: clamp(60px, 10vw, 150px); padding-block: 70px;
}
.eyebrow, .admin-heading small, .course-welcome small, .sidebar-label {
  color: var(--gold); font-size: 9px; font-weight: 850; letter-spacing: .23em;
}
.eyebrow::before { content: ""; display: inline-block; width: 32px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--gold); }
.login-intro h1 { margin: 25px 0 22px; font: 500 clamp(52px, 6vw, 82px)/.98 Georgia, serif; letter-spacing: -.045em; }
.login-intro h1 em { color: var(--gold-bright); font-weight: 500; }
.login-intro > p { max-width: 650px; margin: 0; color: #99968c; font-size: 15px; line-height: 1.8; }
.security-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; border: 1px solid var(--line); }
.security-grid article { min-height: 118px; display: grid; align-content: center; gap: 7px; padding: 20px; border-right: 1px solid var(--line); background: rgba(255,255,255,.015); }
.security-grid article:last-child { border-right: 0; }
.security-grid article > span { color: var(--gold); font-size: 8px; font-weight: 800; }
.security-grid strong { font-size: 12px; }
.security-grid small { color: #6f6d65; font-size: 9px; }

.login-card {
  position: relative; overflow: hidden; padding: 43px; border: 1px solid rgba(227,183,53,.34);
  border-radius: var(--radius); background: linear-gradient(145deg, rgba(25,24,17,.97), rgba(11,12,9,.98));
  box-shadow: 0 35px 100px rgba(0,0,0,.55);
}
.card-glow { position: absolute; width: 240px; height: 240px; top: -130px; right: -80px; border-radius: 50%; background: rgba(227,183,53,.12); filter: blur(40px); }
.login-card > * { position: relative; }
.login-card-head { display: flex; align-items: center; gap: 16px; }
.lock-badge { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(227,183,53,.5); border-radius: 12px; color: var(--gold-bright); }
.login-card-head small, .panel-heading small, .table-toolbar small { color: var(--gold); font-size: 8px; font-weight: 850; letter-spacing: .2em; }
.login-card h2, .panel-heading h2, .table-toolbar h2 { margin: 5px 0 0; font: 500 29px Georgia, serif; }
.login-card > p { margin: 24px 0 28px; color: #8b887f; font-size: 11px; line-height: 1.7; }
.auth-form, .student-form { display: grid; gap: 18px; }
.auth-form label, .student-form label { display: grid; gap: 9px; color: #c7c3b8; font-size: 9px; font-weight: 750; letter-spacing: .04em; }
input, select {
  width: 100%; min-height: 49px; padding: 0 14px; border: 1px solid #2b2c27; border-radius: 8px;
  outline: none; background: #090a08; color: #f1eee6; transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus { border-color: rgba(227,183,53,.75); box-shadow: 0 0 0 3px rgba(227,183,53,.08); }
input::placeholder { color: #55564f; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 72px; }
.text-button { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); border: 0; background: transparent; color: var(--gold); cursor: pointer; font-size: 8px; font-weight: 850; }
.primary-button {
  min-height: 55px; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 20px; border: 0; border-radius: 8px; cursor: pointer;
  background: linear-gradient(135deg, #ae7c15, #edc641 52%, #ffe781); color: #111108;
  font-size: 9px; font-weight: 900; letter-spacing: .08em; box-shadow: 0 13px 32px rgba(227,183,53,.14);
}
.primary-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary-button:disabled { cursor: wait; filter: grayscale(.6); opacity: .7; transform: none; }
.primary-button.compact { min-height: 45px; padding-inline: 18px; }
.form-message { min-height: 15px; color: var(--red); font-size: 9px; line-height: 1.5; }
.form-message.success { color: var(--green); }
.access-help { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.access-help span { color: var(--gold); font-size: 9px; font-weight: 850; }
.access-help p { margin: 0; color: #6f6d66; font-size: 9px; line-height: 1.55; }
.support-link {
  min-height: 44px; display: flex; align-items: center; justify-content: center; margin-top: 16px; padding: 10px 14px;
  border: 1px solid rgba(75,213,138,.34); border-radius: 8px; background: rgba(75,213,138,.06);
  color: #a9e9c5; text-align: center; font-size: 11px; font-weight: 800; line-height: 1.45;
}
[hidden] { display: none !important; }
.support-link:hover { border-color: rgba(75,213,138,.7); background: rgba(75,213,138,.1); }
.spam-note { margin: 10px 0 0 !important; color: #77766f !important; text-align: center; font-size: 10px !important; }
.login-footer { min-height: 82px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: #53534e; font-size: 8px; }
.activation-shell { min-height: calc(100vh - 174px); display: grid; place-items: center; padding-block: 64px; }
.activation-card { width: min(560px, 100%); }
.activation-card h1 { margin: 5px 0 0; font: 500 29px Georgia, serif; }
.activation-success { display: grid; gap: 13px; }
.activation-success[hidden] { display: none; }
.activation-success strong { color: var(--green); font: 500 25px Georgia, serif; }
.activation-success p { margin: 0 0 5px; color: #8b887f; font-size: 11px; line-height: 1.7; }

/* Shared dashboards */
.dashboard-page, .admin-page { background: #080907; }
.dashboard-topbar { height: 78px; padding-inline: 26px; background: rgba(8,9,7,.96); }
.dashboard-topbar .brand-mark { width: 35px; height: 35px; font-size: 20px; }
.dashboard-topbar .brand strong { font-size: 17px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.avatar-menu { display: flex; align-items: center; gap: 10px; padding: 5px 13px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: #10110e; cursor: pointer; }
.avatar-menu span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #292619; color: var(--gold-bright); font-size: 8px; font-weight: 850; }
.avatar-menu b { color: #8f8c84; font-size: 7px; letter-spacing: .13em; }

/* Course */
.course-layout { min-height: calc(100vh - 78px); display: grid; grid-template-columns: 320px 1fr; }
.course-sidebar { display: flex; flex-direction: column; padding: 30px 22px; border-right: 1px solid var(--line); background: #0a0b09; }
.sidebar-label { margin: 4px 8px 18px; color: #6b6b64; }
.roadmap-card { padding: 20px; border: 1px solid rgba(227,183,53,.27); border-radius: 13px; background: linear-gradient(145deg, #1d1b12, #10110d); }
.roadmap-card small { color: var(--gold); font-size: 7px; font-weight: 850; letter-spacing: .16em; }
.roadmap-card strong { display: block; margin: 7px 0 15px; font: 500 21px Georgia, serif; }
.roadmap-card > span { height: 4px; display: block; overflow: hidden; border-radius: 99px; background: #292a25; }
.roadmap-card > span i { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--gold); transition: width .3s; }
.roadmap-card p { margin: 9px 0 0; color: #716f67; font-size: 8px; }
.lesson-list { display: grid; gap: 7px; margin-top: 22px; }
.lesson {
  width: 100%; display: grid; grid-template-columns: 34px 1fr 24px; gap: 12px; align-items: center;
  padding: 15px 12px; border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: left; cursor: pointer;
}
.lesson:hover, .lesson.active { border-color: var(--line); background: #12130f; }
.lesson.active { border-color: rgba(227,183,53,.26); }
.lesson > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #1b1c17; color: #7f7d75; font-size: 8px; font-weight: 850; }
.lesson.active > span { background: rgba(227,183,53,.14); color: var(--gold-bright); }
.lesson p { display: grid; gap: 4px; margin: 0; }
.lesson small { color: #65645d; font-size: 7px; letter-spacing: .13em; }
.lesson strong { color: #d1cdc2; font-size: 10px; }
.lesson em { color: #55564f; font-size: 7px; font-style: normal; }
.lesson > b { color: #585951; font-size: 9px; }
.lesson.active > b { color: var(--gold); }
.sidebar-security { display: flex; gap: 10px; margin-top: auto; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }
.sidebar-security > span { color: var(--gold); font-size: 12px; }
.sidebar-security p { display: grid; gap: 4px; margin: 0; }
.sidebar-security strong { font-size: 9px; }
.sidebar-security small { color: #66665f; font-size: 8px; line-height: 1.5; }
.course-main { min-width: 0; padding: 36px clamp(28px, 5vw, 72px) 70px; }
.course-welcome { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 26px; }
.course-welcome h1 { margin: 8px 0 0; font: 500 clamp(30px, 4vw, 43px) Georgia, serif; }
.access-status { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: #0f100d; }
.access-status p { display: grid; gap: 3px; margin: 0; }
.access-status small { color: var(--green); font-size: 7px; letter-spacing: .14em; }
.access-status strong { color: #a9a69e; font-size: 8px; }
.player-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #0d0e0b; box-shadow: 0 28px 80px rgba(0,0,0,.3); }
.player-stage { aspect-ratio: 16/8.8; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, rgba(24,61,114,.34), transparent 35%), linear-gradient(135deg, #0b1426, #060708 68%); }
.player-stage iframe { width: 100%; height: 100%; border: 0; }
.player-placeholder { display: grid; justify-items: center; width: min(560px, 88%); text-align: center; }
.play-orbit { width: 66px; height: 66px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid rgba(227,183,53,.55); border-radius: 50%; color: var(--gold-bright); background: rgba(227,183,53,.08); box-shadow: 0 0 45px rgba(227,183,53,.12); }
.player-placeholder small { color: var(--gold); font-size: 8px; font-weight: 850; letter-spacing: .16em; }
.player-placeholder h2 { margin: 10px 0 7px; font: 500 clamp(28px, 4vw, 43px) Georgia, serif; }
.player-placeholder p { margin: 0 0 23px; color: #777a79; font-size: 10px; }
.player-meta { display: flex; justify-content: space-between; gap: 30px; padding: 23px 26px; border-top: 1px solid var(--line); }
.player-meta > div { max-width: 760px; }
.player-meta small { color: var(--gold); font-size: 7px; font-weight: 850; letter-spacing: .17em; }
.player-meta h2 { margin: 6px 0; font: 500 24px Georgia, serif; }
.player-meta p { margin: 0; color: #73736d; font-size: 9px; line-height: 1.6; }
.lesson-duration { align-self: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; color: #8c8b84; font-size: 8px; }
.course-notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.course-notes-grid article { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #0d0e0b; }
.course-notes-grid article > span { color: var(--gold); font: 500 24px Georgia, serif; }
.course-notes-grid div { display: grid; gap: 5px; }
.course-notes-grid small { color: #62635d; font-size: 7px; letter-spacing: .12em; }
.course-notes-grid h3 { margin: 0; font-size: 10px; }
.course-notes-grid p { margin: 0; color: #73736d; font-size: 8px; line-height: 1.5; }

/* Admin */
.admin-page { background: radial-gradient(circle at 100% 0%, rgba(227,183,53,.06), transparent 28%), #080907; }
.admin-login-shell { min-height: calc(100vh - 110px); display: grid; place-items: center; padding: 42px 20px 70px; }
.admin-login-card { width: min(520px, 100%); }
.admin-login-card h1 { margin: 5px 0 0; font: 500 29px Georgia, serif; }
.admin-pill { color: var(--gold); border-color: rgba(227,183,53,.22); }
.admin-shell { padding-block: 45px 80px; }
.admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 35px; }
.admin-heading h1 { margin: 8px 0 7px; font: 500 clamp(34px, 4.5vw, 53px) Georgia, serif; }
.admin-heading p { margin: 0; color: #7d7c75; font-size: 11px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 30px 0; }
.stat-grid article { min-height: 140px; display: grid; align-content: center; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 13px; background: #0e0f0c; }
.stat-grid small { color: #74736c; font-size: 7px; font-weight: 850; letter-spacing: .15em; }
.stat-grid strong { font: 500 42px Georgia, serif; }
.stat-grid span { color: #5f605a; font-size: 8px; }
.stat-grid .gold-stat { border-color: rgba(227,183,53,.32); background: linear-gradient(135deg, #1b180d, #10110d); }
.stat-grid .gold-stat strong { color: var(--gold-bright); }
.student-form-panel, .student-table-card { margin-bottom: 20px; border: 1px solid var(--line); border-radius: 15px; background: #0e0f0c; }
.student-form-panel { padding: 25px; border-color: rgba(227,183,53,.26); }
.panel-heading, .table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: #8a8982; cursor: pointer; font-size: 20px; }
.student-form { grid-template-columns: repeat(5, 1fr); align-items: end; margin-top: 24px; }
.student-form select { appearance: none; }
.lifetime-field { min-height: 49px; display: grid; align-content: center; gap: 5px; padding: 8px 14px; border: 1px solid rgba(75,213,138,.26); border-radius: 8px; background: rgba(75,213,138,.05); }
.lifetime-field small { color: #6f9f82; font-size: 7px; font-weight: 850; letter-spacing: .13em; }
.lifetime-field strong { color: #b9eecf; font-size: 10px; }
.form-action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 5px; }
.form-action p { margin: 0; color: #6e6e68; font-size: 9px; }
.credential-result { margin-top: 20px; padding: 16px; border: 1px solid rgba(75,213,138,.3); border-radius: 10px; background: rgba(75,213,138,.05); color: #b9eecf; font-size: 10px; line-height: 1.7; }
.student-table-card { overflow: hidden; }
.table-toolbar { padding: 24px; border-bottom: 1px solid var(--line); }
.search-box { min-width: 280px; display: flex; align-items: center; gap: 8px; padding-left: 13px; border: 1px solid var(--line); border-radius: 8px; background: #090a08; color: #6d6e67; }
.search-box input { min-height: 42px; padding-left: 0; border: 0; background: transparent; box-shadow: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 17px 20px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: #686861; font-size: 7px; letter-spacing: .14em; }
td { color: #aaa89f; font-size: 9px; }
tbody tr:last-child td { border-bottom: 0; }
.student-cell { display: flex; align-items: center; gap: 11px; }
.student-cell > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #292619; color: var(--gold-bright); font-size: 8px; font-weight: 850; }
.student-cell p { display: grid; gap: 3px; margin: 0; }
.student-cell strong { color: #e3dfd4; font-size: 9px; }
.student-cell small { color: #66665f; font-size: 8px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 999px; background: rgba(75,213,138,.08); color: var(--green); font-size: 7px; font-weight: 850; }
.status-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-badge.inactive { background: rgba(255,116,108,.08); color: var(--red); }
.status-badge.expired { background: rgba(255,255,255,.05); color: #74746d; }
.action-row { display: flex; gap: 6px; }
.action-button { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: #131410; color: #97958d; cursor: pointer; font-size: 7px; font-weight: 750; }
.action-button:hover { border-color: rgba(227,183,53,.35); color: var(--gold-bright); }
.empty-row { height: 120px; text-align: center; color: #62625d; }
.toast { position: fixed; z-index: 20; right: 18px; bottom: 18px; max-width: min(390px, calc(100% - 36px)); padding: 14px 17px; border: 1px solid transparent; border-radius: 9px; background: #1a1b17; color: #c7c4bb; box-shadow: 0 18px 55px rgba(0,0,0,.4); font-size: 9px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: none; }
.toast.error { border-color: rgba(255,116,108,.35); color: #ffb0ab; }
.toast.success { border-color: rgba(75,213,138,.35); color: #a9e9c5; }

@media (max-width: 1060px) {
  .login-shell { grid-template-columns: 1fr; gap: 42px; }
  .login-intro { max-width: 780px; }
  .login-card { width: min(560px, 100%); order: -1; }
  .course-layout { grid-template-columns: 260px 1fr; }
  .student-form { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .shell, .shell-wide { width: min(100% - 28px, 1220px); }
  .topbar { height: 76px; }
  .topbar .secure-chip, .device-pill, .admin-pill { display: none; }
  .brand strong { font-size: 17px; }
  .brand-mark { width: 36px; height: 36px; font-size: 20px; }
  .login-shell { padding-block: 28px 48px; }
  .login-intro h1 { font-size: clamp(43px, 13vw, 64px); }
  .security-grid { grid-template-columns: 1fr; }
  .security-grid article { min-height: 92px; border-right: 0; border-bottom: 1px solid var(--line); }
  .security-grid article:last-child { border-bottom: 0; }
  .login-card { padding: 30px 22px; }
  .login-card > p { margin: 18px 0 22px; font-size: 14px; line-height: 1.65; }
  .auth-form label { font-size: 13px; }
  .form-message { font-size: 12px; }
  .access-help { grid-template-columns: 1fr; gap: 7px; }
  .access-help span { font-size: 12px; }
  .access-help p { font-size: 13px; line-height: 1.6; }
  .login-intro { padding-top: 8px; }
  .activation-shell { padding-block: 42px; }
  .login-footer { flex-direction: column; justify-content: center; gap: 7px; text-align: center; }
  .dashboard-topbar { padding-inline: 14px; }
  .avatar-menu b { display: none; }
  .course-layout { display: block; }
  .course-sidebar { padding: 18px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .roadmap-card, .sidebar-label, .sidebar-security { display: none; }
  .lesson-list { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .lesson { grid-template-columns: 28px 1fr; padding: 12px 9px; }
  .lesson > span { width: 27px; height: 27px; }
  .lesson > b, .lesson em { display: none; }
  .course-main { padding: 28px 14px 55px; }
  .course-welcome { align-items: start; }
  .course-welcome h1 { font-size: 29px; }
  .access-status { display: none; }
  .player-stage { aspect-ratio: 16/10; }
  .player-placeholder p { display: none; }
  .player-placeholder h2 { font-size: 28px; }
  .player-meta { padding: 18px; }
  .course-notes-grid { grid-template-columns: 1fr; }
  .admin-shell { padding-top: 28px; }
  .admin-heading { align-items: start; flex-direction: column; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid article { min-height: 118px; padding: 18px; }
  .student-form { grid-template-columns: 1fr; }
  .form-action { align-items: stretch; flex-direction: column; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .search-box { min-width: 0; }
}

@media (max-width: 450px) {
  .stat-grid { grid-template-columns: 1fr; }
  .course-welcome h1 { font-size: 25px; }
  .player-placeholder .primary-button { width: 100%; }
}

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