.grid { display: grid; gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.btn { min-height: 46px; border: 0; border-radius: 13px; padding: 12px 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 850; transition: transform .15s, filter .15s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.02); }.btn:active { transform: translateY(1px); }.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--yellow); color: var(--ink); box-shadow: inset 0 -4px 0 rgba(0,0,0,.16); padding-bottom: 15px; }
.btn-mint { background: var(--mint); color: #07241a; box-shadow: inset 0 -4px 0 rgba(0,0,0,.13); padding-bottom: 15px; }
.btn-secondary { background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--line); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn-danger { background: var(--red-soft); color: var(--red); }.btn-wide { width: 100%; }
.progress-track { width: 100%; height: 10px; overflow: hidden; appearance: none; -webkit-appearance: none; border: 0; border-radius: 99px; background: var(--surface-3); }.progress-track::-webkit-progress-bar { background: var(--surface-3); border-radius: 99px; }.progress-track::-webkit-progress-value { background: var(--mint); border-radius: 99px; }.progress-track::-moz-progress-bar { background: var(--mint); border-radius: 99px; }
.tag { display: inline-flex; align-items: center; border-radius: 99px; padding: 7px 10px; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .7px; text-transform: uppercase; }

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, .85fr) minmax(400px, 1.15fr); background: var(--surface); }
.login-panel { display: grid; place-items: center; padding: 40px; }
.login-box { width: min(430px, 100%); }
.login-brand { padding: 0 0 42px; }.login-box h1 { font-size: 38px; }.login-box .subtitle { margin-bottom: 28px; }
.field { display: grid; gap: 7px; margin-bottom: 17px; }.field label { font-size: 13px; font-weight: 800; }.field input, .field select { width: 100%; height: 50px; border: 2px solid var(--line); background: var(--surface); color: var(--text); border-radius: 13px; padding: 0 14px; outline: none; }.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); }
.password-wrap { position: relative; }.password-wrap input { padding-right: 54px; }.password-toggle { position: absolute; right: 7px; top: 7px; width: 38px; height: 36px; border: 0; border-radius: 9px; background: var(--surface-2); cursor: pointer; }
.form-error { color: var(--red); background: var(--red-soft); padding: 11px 13px; border-radius: 11px; margin-bottom: 15px; font-size: 13px; line-height: 1.4; }
.login-note { margin: 20px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.login-visual { position: relative; overflow: hidden; display: grid; place-items: center; padding: 60px; background: linear-gradient(145deg, #101827, #15283a 58%, #15523f); color: white; }
.login-visual::before, .login-visual::after { content: ''; position: absolute; border-radius: 50%; border: 70px solid rgba(56,207,145,.1); }.login-visual::before { width: 380px; height: 380px; right: -180px; top: -140px; }.login-visual::after { width: 270px; height: 270px; left: -140px; bottom: -150px; border-color: rgba(245,223,77,.1); }
.code-window { width: min(610px, 100%); position: relative; z-index: 1; border: 1px solid #30445c; border-radius: 22px; overflow: hidden; background: #0a111b; box-shadow: 0 34px 70px rgba(0,0,0,.35); transform: rotate(1.5deg); }
.code-bar { height: 45px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: #182536; }.code-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff6259; }.code-dot:nth-child(2) { background: #ffbd2f; }.code-dot:nth-child(3) { background: #29c941; }
.code-content { padding: 28px; font: 600 clamp(13px, 1.5vw, 17px)/1.8 var(--mono); color: #d7e5ef; }.code-key { color: #c895ff; }.code-name { color: #67dbaa; }.code-string { color: #f7d75c; }.code-muted { color: #668097; }
.visual-caption { max-width: 520px; margin-top: 40px; position: relative; z-index: 1; }.visual-caption h2 { font-size: 30px; margin-bottom: 10px; }.visual-caption p { color: #adc0d0; line-height: 1.6; }

.dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(260px, .72fr); align-items: start; }
.hero-card { min-height: 270px; padding: clamp(25px, 4vw, 39px); overflow: hidden; position: relative; border: 0; color: white; background: linear-gradient(130deg, #111c2d, #173858 62%, #17634e); }
.hero-card::before { content: 'JS'; position: absolute; right: 35px; top: 12px; color: rgba(245,223,77,.08); font-size: 145px; font-weight: 950; }.hero-card::after { content: ''; position: absolute; width: 260px; height: 260px; border: 45px solid rgba(56,207,145,.12); border-radius: 50%; right: -90px; bottom: -130px; }
.hero-card > * { position: relative; z-index: 1; }.hero-kicker { display: flex; gap: 8px; color: #8beac2; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; font-weight: 900; }.hero-card h2 { margin: 16px 0 9px; font-size: clamp(27px, 3vw, 37px); }.hero-card p { color: #c6d7e4; max-width: 560px; line-height: 1.55; }.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; margin-top: 24px; }.hero-meta { color: #d2dfe8; font-size: 12px; font-weight: 750; }
.section-head { display: flex; align-items: end; justify-content: space-between; margin: 29px 0 14px; }.section-head h2 { margin: 0; font-size: 20px; }.link-button { border: 0; background: none; color: var(--mint-dark); font-weight: 800; cursor: pointer; }
.metrics { grid-template-columns: repeat(3, 1fr); }.metric { padding: 18px; }.metric-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 13px; background: var(--amber-soft); font-size: 20px; }.metric:nth-child(2) .metric-icon { background: var(--violet-soft); }.metric:nth-child(3) .metric-icon { background: var(--mint-soft); }.metric strong { display: block; font-size: 24px; }.metric span { color: var(--muted); font-size: 11px; font-weight: 750; }
.side-stack { display: grid; gap: 20px; }.goal-card { padding: 22px; }.goal-ring { width: 115px; height: 115px; display: grid; place-items: center; margin: 4px auto 18px; position: relative; }.goal-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }.goal-ring circle { fill: none; stroke-width: 16; }.goal-ring-track { stroke: var(--surface-3); }.goal-ring-value { stroke: var(--yellow); stroke-linecap: round; }.goal-ring strong { position: relative; z-index: 1; font-size: 22px; }.goal-card h3, .goal-card p { text-align: center; }.goal-card p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.feature-card { overflow: hidden; }.feature-card-head { padding: 22px 20px 5px; }.feature-card-head h2 { margin: 0; font-size: 20px; }
.mini-list { padding: 8px 20px; }.mini-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }.mini-item:last-child { border: 0; }.mini-badge { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); }.mini-item strong { display: block; font-size: 13px; }.mini-item span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

.path-layout { display: grid; grid-template-columns: minmax(0, 740px) 280px; align-items: start; gap: 28px; }.chapter { overflow: hidden; margin-bottom: 22px; }.chapter-head { padding: 20px 22px; color: #08251a; background: linear-gradient(115deg, #39cf91, #79e3b5); display: flex; justify-content: space-between; align-items: center; }.chapter.blue .chapter-head { color: white; background: linear-gradient(115deg, #3176c4, #5ba5f3); }.chapter.violet .chapter-head { color: white; background: linear-gradient(115deg, #705dcc, #a092f0); }.chapter.amber .chapter-head { color: #2b1b02; background: linear-gradient(115deg, #efa53b, #f6cd70); }.chapter-kicker { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; opacity: .75; }.chapter-head h2 { margin: 4px 0 0; font-size: 20px; }.chapter-progress { font-weight: 900; }
.lesson-list { padding: 8px 22px 14px; }.lesson-row { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }.lesson-row:last-child { border: 0; }.lesson-node { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--line); color: var(--muted); font-weight: 900; }.lesson-row.completed .lesson-node { color: #06291b; background: var(--mint); border-color: var(--mint); }.lesson-row.current .lesson-node { color: var(--mint-dark); background: var(--mint-soft); border-color: var(--mint); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mint) 15%, transparent); }.lesson-row.locked { opacity: .52; }.lesson-title { font-weight: 850; font-size: 14px; }.lesson-meta { margin-top: 4px; color: var(--muted); font-size: 11px; }.lesson-action { border: 0; background: none; color: var(--mint-dark); font-weight: 850; cursor: pointer; }.lesson-action:disabled { color: var(--muted); cursor: not-allowed; }.path-summary { position: sticky; top: 96px; padding: 22px; }.path-summary h3, .path-summary p { text-align: center; }.path-summary p { color: var(--muted); font-size: 12px; line-height: 1.55; }

.lesson-shell { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 30px; align-items: start; }.lesson-back { border: 0; background: none; color: var(--muted); cursor: pointer; font-weight: 800; margin-bottom: 18px; }.lesson-hero { padding: clamp(24px, 4vw, 38px); border: 0; background: linear-gradient(135deg, #152238, #1a3b5c); color: white; overflow: hidden; position: relative; }.lesson-hero::after { content: '{ }'; position: absolute; right: 25px; bottom: -15px; font: 900 80px/1 var(--mono); color: rgba(255,255,255,.06); }.lesson-hero h1 { font-size: clamp(28px, 4vw, 40px); }.lesson-hero p { max-width: 620px; color: #c5d7e6; line-height: 1.6; }.lesson-content { display: grid; gap: 18px; margin-top: 22px; }.content-section { padding: clamp(22px, 4vw, 32px); }.content-section h2 { font-size: 21px; }.content-section p { color: var(--muted); line-height: 1.75; }.code-block { margin: 20px 0 0; border-radius: 15px; overflow-x: auto; background: #0d1621; color: #d9e8ee; padding: 20px; font: 600 13px/1.65 var(--mono); white-space: pre; }.tip-box { margin-top: 18px; padding: 15px 17px; border-left: 4px solid var(--yellow-dark); border-radius: 10px; background: color-mix(in srgb, var(--yellow) 19%, var(--surface)); line-height: 1.6; font-size: 13px; }.objectives { padding: 20px; position: sticky; top: 96px; }.objectives h3 { font-size: 14px; }.objectives ul { list-style: none; padding: 0; margin: 0 0 20px; }.objectives li { padding: 9px 0 9px 25px; position: relative; color: var(--muted); font-size: 12px; line-height: 1.45; }.objectives li::before { content: '✓'; position: absolute; left: 0; color: var(--mint-dark); font-weight: 900; }.lesson-cta { margin-top: 22px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.lesson-cta p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.practice-card { padding: clamp(22px, 4vw, 32px); border-color: color-mix(in srgb, var(--mint) 55%, var(--line)); }.practice-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }.practice-head h2 { margin: 6px 0 0; }.practice-card > p { color: var(--muted); line-height: 1.7; }.practice-hints { margin: 16px 0; padding: 13px 15px; border-radius: 12px; background: var(--surface-2); }.practice-hints summary { cursor: pointer; font-weight: 800; }.practice-hints li { color: var(--muted); margin-top: 8px; }.practice-editor { width: 100%; min-height: 230px; resize: vertical; margin-top: 12px; border: 2px solid #26394c; border-radius: 15px; outline: 0; background: #0d1621; color: #d9e8ee; padding: 19px; font: 600 13px/1.65 var(--mono); tab-size: 2; }.practice-editor:focus { border-color: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 16%, transparent); }.practice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }.practice-result { margin-top: 16px; padding: 14px 16px; border-radius: 12px; line-height: 1.55; font-size: 13px; }.practice-result.neutral { background: var(--surface-2); color: var(--muted); }.practice-result.success { background: var(--mint-soft); color: var(--mint-dark); }.practice-result.error { background: var(--red-soft); color: var(--red); }.practice-result pre { max-height: 180px; overflow: auto; margin: 10px 0 0; white-space: pre-wrap; color: inherit; font: 600 12px/1.5 var(--mono); }.practice-solution { margin-top: 19px; }.practice-solution .code-block { margin-top: 10px; }
.practice-checks { margin: 16px 0; padding: 15px 17px; border-radius: 12px; background: var(--mint-soft); }.practice-checks ul { margin: 9px 0 0; padding-left: 20px; }.practice-checks li { margin-top: 5px; color: var(--muted); }.practice-card .practice-note { margin: 15px 0 0; font-size: 12px; }.practice-solution { margin-top: 19px; }.practice-solution .code-block { margin-top: 10px; }

.quiz-top { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; }.quiz-close { border: 0; background: none; color: var(--muted); font-size: 25px; cursor: pointer; }.quiz-progress { flex: 1; height: 13px; appearance: none; -webkit-appearance: none; border: 0; background: var(--surface-3); border-radius: 99px; overflow: hidden; }.quiz-progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 99px; }.quiz-progress::-webkit-progress-value { background: var(--mint); border-radius: 99px; }.quiz-progress::-moz-progress-bar { background: var(--mint); border-radius: 99px; }.quiz-count { color: var(--muted); font-size: 12px; font-weight: 800; }.question-kicker { color: var(--mint-dark); text-transform: uppercase; letter-spacing: 1px; font-size: 11px; font-weight: 900; }.question-card h1 { font-size: clamp(25px, 4vw, 34px); margin: 14px 0 27px; }.answers { display: grid; gap: 12px; }.answer { width: 100%; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; padding: 14px; text-align: left; cursor: pointer; background: var(--surface); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 15px; font-weight: 730; }.answer:hover, .answer.selected { background: var(--blue-soft); border-color: var(--blue); }.answer-key { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; font-size: 11px; }.quiz-footer { margin-top: 28px; display: flex; justify-content: flex-end; }.result-card { text-align: center; padding: 38px 25px; }.result-icon { font-size: 68px; }.result-subtitle { margin-inline: auto; }.result-grid { grid-template-columns: repeat(3, 1fr); margin: 28px 0; }.result-stat { background: var(--surface-2); border-radius: 14px; padding: 18px; }.result-stat strong { display: block; font-size: 24px; }.result-stat span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .8px; }.result-explanations { text-align: left; }.result-actions { justify-content: center; }

.flash-layout { display: grid; grid-template-columns: minmax(0, 720px) 250px; gap: 28px; align-items: start; }.flashcard { min-height: 410px; perspective: 1000px; cursor: pointer; }.flash-inner { min-height: inherit; position: relative; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.75,.25,1); }.flashcard.flipped .flash-inner { transform: rotateY(180deg); }.flash-face { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.flash-back { transform: rotateY(180deg); background: linear-gradient(145deg, var(--surface), var(--mint-soft)); }.flash-face h2 { font-size: clamp(24px, 4vw, 35px); }.flash-face p { max-width: 580px; color: var(--muted); line-height: 1.7; }.flash-tag { position: absolute; top: 24px; left: 24px; }.flash-hint { position: absolute; bottom: 24px; color: var(--muted); font-size: 11px; }.flash-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }.filter-card { padding: 20px; }.filter-card h3 { font-size: 14px; }.chips { display: flex; flex-wrap: wrap; gap: 8px; }.chip { border: 1px solid var(--line); background: var(--surface-2); border-radius: 99px; padding: 8px 11px; cursor: pointer; font-size: 11px; font-weight: 750; }.chip.active { color: var(--mint-dark); border-color: var(--mint); background: var(--mint-soft); }.filter-meta { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.settings-grid { display: grid; gap: 14px; }.setting-row { padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.setting-row h3 { margin: 0 0 4px; font-size: 14px; }.setting-row p { margin: 0; color: var(--muted); font-size: 12px; }.toggle { width: 50px; height: 29px; flex: 0 0 auto; border: 0; border-radius: 99px; padding: 3px; background: var(--surface-3); cursor: pointer; }.toggle::after { content: ''; display: block; width: 23px; height: 23px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .2s; }.toggle.on { background: var(--mint); }.toggle.on::after { transform: translateX(21px); }.form-card { padding: 24px; margin-top: 20px; }.form-card h2 { font-size: 19px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-grid .wide { grid-column: 1 / -1; }.forced-banner { padding: 16px 18px; margin-bottom: 20px; border-radius: 14px; background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--line)); line-height: 1.5; }
.danger-zone { margin-top: 20px; padding: 24px; border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }.danger-zone h2 { margin: 0 0 7px; font-size: 19px; }.danger-zone p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }.danger-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.admin-users { display: grid; gap: 13px; }.admin-user { padding: 17px 19px; display: grid; grid-template-columns: 1fr auto; gap: 15px; align-items: center; }.admin-user strong { display: block; }.admin-meta { color: var(--muted); font-size: 11px; margin-top: 4px; }.admin-actions { display: flex; gap: 8px; }.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--mint); }.status-dot.off { background: var(--red); }.modal-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(5,10,18,.66); backdrop-filter: blur(6px); }.modal { width: min(470px, 100%); padding: 26px; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-md); }.modal-head { display: flex; justify-content: space-between; gap: 15px; }.modal-close { border: 0; background: none; font-size: 23px; cursor: pointer; color: var(--muted); }
.empty { padding: 38px 24px; text-align: center; color: var(--muted); }.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: 420px; background: #142237; color: white; border-radius: 14px; padding: 14px 18px; box-shadow: var(--shadow-md); font-size: 13px; font-weight: 750; animation: toast-in .2s ease; }.toast.error { background: #8f2930; }@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.lesson-key-points,
.lesson-takeaway {
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.lesson-key-points ul,
.lesson-takeaway ul {
  margin: 0.65rem 0 0;
  padding-left: 1.25rem;
}

.lesson-key-points li + li,
.lesson-takeaway li + li {
  margin-top: 0.45rem;
}

.lesson-takeaway {
  border-left: 4px solid var(--mint);
}