/* Page-specific styles. Shared tokens live in site.css. */

/* ---------- Landing ---------- */
.hero { padding: 72px 0 64px; background: radial-gradient(900px 420px at 85% 10%, rgba(91, 226, 52, .12), transparent 60%), linear-gradient(180deg, var(--paper), var(--mist)) }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center }
.hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 900; letter-spacing: -.035em; margin: 14px 0 20px }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }
.hero-lead { font-size: 17px; color: var(--steel); max-width: 580px }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }
.hero-facts { display: flex; flex-wrap: wrap; gap: 28px; list-style: none; padding: 0; margin: 32px 0 0; color: var(--steel); font-size: 14px }
.hero-facts b { display: block; color: var(--ink); font-size: 26px; font-weight: 800; letter-spacing: -.02em }
.hero-visual { display: grid; gap: 18px; justify-items: end }
.hv-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 22px }
.hv-stat { width: 320px }
.hv-label { font-size: 11px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .1em }
.hv-big { font-size: 64px; font-weight: 900; letter-spacing: -.05em; line-height: 1.05; margin-top: 6px; color: var(--bear) }
.hv-stat p { color: var(--steel); font-size: 13px }
.hv-bars { display: flex; align-items: flex-end; gap: 10px; height: 90px; margin-top: 16px }
.hv-bars i { flex: 1; background: var(--bear); border-radius: 6px 6px 0 0; opacity: .85 }
.hv-bars i.win { background: var(--green) }
.hv-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 11px; color: var(--steel) }
.hv-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--bear); margin-right: 5px }
.hv-legend i.win { background: var(--green) }
.hv-lesson { width: 300px; justify-self: start; margin-left: 8%; display: grid; gap: 10px }
.hv-row { display: flex; justify-content: space-between; align-items: center }
.hv-credit { font-weight: 800; color: var(--emerald); font-size: 13px }
.hv-lesson small { color: var(--mute); font-size: 11px }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr } .hero-visual { justify-items: stretch } .hv-card, .hv-stat, .hv-lesson { width: auto; margin-left: 0 } }

.problem { background: var(--band-2); color: #fff }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
.problem-item b { display: block; font-size: clamp(30px, 4vw, 44px); font-weight: 900; letter-spacing: -.03em; color: var(--lime) }
.problem-item p { color: #c9cccf; font-size: 14px }
.problem-src { margin-top: 22px; color: #82858a }
@media (max-width: 700px) { .problem-grid { grid-template-columns: 1fr } }

.step .step-n { font-size: 12px; font-weight: 800; color: var(--green) }
.step h3 { font-size: 20px; margin: 10px 0 8px }
.step p { color: var(--steel); font-size: 14px }

.track { display: grid; gap: 8px; align-content: start }
.track h3 { font-size: 22px; margin-top: 6px }
.track-tag { font-weight: 700; color: var(--emerald); font-size: 14px }
.track-meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--steel); margin-top: 6px }
.atlas-card { display: grid; gap: 8px; align-content: start }
.atlas-top { display: flex; justify-content: space-between; align-items: center }
.atlas-card h3 { font-size: 19px; margin-top: 6px }

.rewind-band { background: var(--band); color: #fff }
.rewind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center }
.rewind-band h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; margin: 12px 0 18px }
.rewind-band p { color: #c9cccf; margin-bottom: 12px }
.rewind-visual { background: #1b1c1e; border: 1px solid #2b2d30; border-radius: 18px; padding: 18px }
@media (max-width: 860px) { .rewind-grid { grid-template-columns: 1fr } }

.nevers .card b { display: block; font-size: 16px; margin-bottom: 8px }
.nevers .card b::before { content: '✕'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--tint-red); color: var(--bear); font-size: 11px }
.nevers .card p { color: var(--steel); font-size: 14px }
.practice { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 36px; background: linear-gradient(135deg, var(--tint-green-2), var(--panel)) }
.practice h2 { font-size: 26px; font-weight: 800; margin: 10px 0 10px }
@media (max-width: 760px) { .practice { grid-template-columns: 1fr; padding: 24px } }
.final-cta { text-align: center }
.final-cta h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; max-width: 760px; margin: 0 auto }

/* ---------- Curriculum ---------- */
.course-card { display: flex; flex-direction: column; gap: 8px }
.course-card h3 { font-size: 20px; margin-top: 4px }
.course-card > .muted { flex: 1 }
.course-top { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.course-tag { font-weight: 700; color: var(--emerald); font-size: 14px }
.course-prog { display: grid; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--steel) }
.atlas-no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 36px; padding-top: 32px; align-items: start }
.other-courses { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 6px }
.other-courses > span { margin-bottom: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px }
.chip-link { font-size: 13px; font-weight: 600; color: var(--steel); text-decoration: none; padding: 6px 10px; border-radius: 8px }
.chip-link:hover { background: var(--mist); color: var(--ink) }
@media (max-width: 900px) {
  .detail { grid-template-columns: minmax(0, 1fr) }
  .other-courses { position: static; flex-direction: row; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px }
  .other-courses > span { width: 100% }
  .chip-link { border: 1px solid var(--line) }
}
.block-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px }
.block-head h2 { font-size: 28px; font-weight: 800; margin-top: 6px }
.block-head p { color: var(--steel); max-width: 640px; margin-top: 6px }
.block { margin-bottom: 56px; scroll-margin-top: 90px }
.chapter-list { display: grid; gap: 10px }
.chapter-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) 170px; gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-decoration: none; transition: border-color .15s, box-shadow .15s }
.chapter-row:hover { border-color: var(--green); box-shadow: var(--shadow) }
.chapter-row .cn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--mist); font-weight: 800; font-size: 14px; color: var(--steel) }
.chapter-row.complete .cn { background: var(--grad); color: #fff }
.chapter-row h3 { font-size: 16px; font-weight: 700 }
.chapter-row .sub { font-size: 12px; color: var(--mute); margin-top: 2px }
.chapter-row .prog { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: var(--steel); text-align: right }
@media (max-width: 640px) { .chapter-row { grid-template-columns: 44px minmax(0, 1fr) } .chapter-row .prog { grid-column: 1 / -1; text-align: left } }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px }
.path-group { margin: 14px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald) }
.path-group:first-child { margin-top: 0 }

/* ---------- Chapter page ---------- */
.lesson-list { display: grid; gap: 6px; margin-top: 8px }
.lesson-row { display: grid; grid-template-columns: 24px 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; background: var(--panel) }
.lesson-row:hover { border-color: var(--green) }
.lesson-row .lid { font-size: 12px; font-weight: 700; color: var(--mute); font-variant-numeric: tabular-nums }
.lesson-row b { font-size: 14px; font-weight: 700 }
.lesson-row p { font-size: 12px; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lesson-row .go { font-size: 12px; font-weight: 700; color: var(--emerald) }
@media (max-width: 640px) { .lesson-row { grid-template-columns: 24px minmax(0, 1fr) } .lesson-row .lid, .lesson-row .go { display: none } }
.test-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 28px 0; background: var(--band-2); color: #fff; border: 0 }
.test-card p { color: #c9cccf; font-size: 14px }
.test-card h3 { font-size: 20px; margin-bottom: 6px }
@media (max-width: 640px) { .test-card { grid-template-columns: 1fr } }

/* ---------- Lesson player ---------- */
.lesson-top { padding: 28px 0 18px; border-bottom: 1px solid var(--line) }
.lesson-top h1 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800 }
.lesson-top .lead { color: var(--steel); font-size: 16px; margin-top: 8px; max-width: 820px }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.atlas-frame { width: 100%; height: 900px; border: 0; display: block; background: var(--panel) }
.frame-shell { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 24px; position: relative }
.frame-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-size: 14px; background: var(--panel) }
.lesson-check { margin-top: 28px; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, var(--tint-green-3), var(--panel)) }
.lesson-check h2 { font-size: 22px; font-weight: 800; margin: 6px 0 4px }
.lesson-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px }
.lesson-pager a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none }
.lesson-pager a:hover { border-color: var(--green) }
.lesson-pager small { display: block; font-size: 11px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .08em }
.lesson-pager b { font-size: 14px }
.lesson-pager .nx { text-align: right; grid-column: 2 }

/* ---------- Quiz ---------- */
.quiz { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 22px; counter-reset: q }
.q { counter-increment: q }
.q-prompt { font-weight: 600; margin-bottom: 10px }
.q-prompt::before { content: counter(q) '. '; color: var(--green); font-weight: 800 }
.q-prompt blockquote { margin: 8px 0 0; padding: 10px 14px; border-left: 3px solid var(--green); background: var(--panel); border-radius: 0 8px 8px 0; font-weight: 500; color: var(--ink-2) }
.opts { display: grid; gap: 8px }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; font-size: 14px; transition: border-color .15s }
.opt:hover { border-color: var(--silver) }
.opt input { margin-top: 4px; accent-color: var(--green) }
.opt:has(input:checked) { border-color: var(--ink) }
.opt.right { border-color: var(--green); background: var(--tint-green) }
.opt.wrong { border-color: var(--bear); background: var(--tint-red) }
.quiz-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 20px }
.result { margin-top: 18px; padding: 16px 18px; border-radius: 12px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between }
.result.pass { background: var(--tint-green); color: var(--emerald) }
.result.fail { background: var(--tint-red); color: var(--red-text) }

/* ---------- Rewind ---------- */
.case-list { display: grid; gap: 16px }
.case-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center }
.case-card h3 { font-size: 20px; margin: 8px 0 6px }
.rw-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 28px; margin-top: 28px; align-items: start }
@media (max-width: 980px) { .rw-layout { grid-template-columns: 1fr } }
.chart-card { padding: 16px; position: sticky; top: 88px }
@media (max-width: 980px) { .chart-card { position: static } }
.chart-card canvas { width: 100%; height: 420px; display: block }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--steel); margin-top: 10px }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px }
.rw-setup { padding: 16px 18px; background: var(--mist); border-radius: 12px; font-size: 14px; color: var(--ink-2) }
.explain { margin-top: 8px; font-size: 13px; color: var(--steel); padding-left: 12px; border-left: 3px solid var(--line) }
.reveal { display: grid; gap: 16px; margin-top: 8px }
.reveal h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: var(--emerald); margin-bottom: 6px }
.reveal p, .reveal li { font-size: 14px; color: var(--ink-2) }
.reveal-head { font-size: 17px; font-weight: 700; padding: 16px 18px; border-radius: 12px; background: var(--band-2); color: #fff }
.link-list { display: flex; flex-wrap: wrap; gap: 8px }
.link-list a { font-size: 13px; font-weight: 600; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px; text-decoration: none }
.link-list a:hover { border-color: var(--green); color: var(--emerald) }

/* ---------- Progress & certificates ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.kpi b { display: block; font-size: 32px; font-weight: 900; letter-spacing: -.03em }
.kpi span { font-size: 12px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .08em }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.cert-list { display: grid; gap: 10px }
.cert-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px }
.cert-h { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin: 26px 0 10px }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px }
.cert-tile { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px }
.cert-tile span { font-size: 12px; color: var(--mute); font-weight: 600 }
/* The certificate is a printable document: it keeps the light palette in night mode. */
.certificate { --ink: #1b1c1e; --line: #e7e8e5; --steel: #5f6368; --emerald: #008833; color: var(--ink); max-width: 960px; margin: 32px auto; aspect-ratio: 1.414; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; padding: 6% 7%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden }
.certificate::before { content: ''; position: absolute; inset: 14px; border: 2px solid var(--ink); pointer-events: none }
.certificate::after { content: ''; position: absolute; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: var(--grad); opacity: .14 }
.certificate .c-logo { width: 240px; line-height: 0 }
.certificate .c-logo img { width: 100%; height: auto }
.certificate h1 { font-size: clamp(22px, 4vw, 44px); font-weight: 900; letter-spacing: -.03em }
.certificate .c-name { font-size: clamp(22px, 4vw, 40px); font-weight: 800; color: var(--emerald); border-bottom: 2px solid var(--line); padding-bottom: 8px; margin: 10px 0 }
.certificate .c-foot { display: flex; justify-content: space-between; align-items: end; gap: 16px; font-size: 12px; color: var(--steel) }
.cert-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center }
.cert-tools input { padding: 11px 14px; border: 1px solid var(--silver); border-radius: 10px; min-width: 260px }
@media print {
  .site-head, .site-foot, .cert-tools, .page-hero, .no-print { display: none !important }
  body { background: #fff }
  .certificate { box-shadow: none; border: 0; margin: 0; max-width: none; width: 100% }
  @page { size: A4 landscape; margin: 0 }
}

/* Sign-in, account and certificate verification */
.auth-wrap { padding-top: 48px; padding-bottom: 64px; max-width: 620px }
.auth-card h1 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; margin: 8px 0 10px }
.auth-form { display: grid; gap: 8px; margin-top: 16px }
.auth-form input, .verify-form input { padding: 12px 14px; border: 1px solid var(--silver); border-radius: 10px; font: inherit; width: 100%; min-width: 0 }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--steel); font-size: 12px; font-weight: 700; text-transform: uppercase }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line) }
.auth-google { width: 100% }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 13px; color: var(--steel) }
.consent input { margin-top: 3px; flex: none; width: 16px; height: 16px }
.auth-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px }
.btn.danger { color: var(--red-text); border-color: var(--tint-red) }
.btn.danger:hover { border-color: var(--red-text) }
.acct-certs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.acct-certs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line) }
.acct-certs li b { color: var(--ink) }
.acct-certs li span { grid-column: 1; font-size: 12px }
.acct-certs li a { grid-column: 2; grid-row: 1 / 3; align-self: center; font-weight: 700 }
.verify-form { display: flex; gap: 10px; margin-top: 16px }
.verify-form input { text-transform: uppercase; letter-spacing: .04em }
.verify-result { margin-top: 20px }
.verify-result dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 14px 0 0; font-size: 14px }
.verify-result dt { color: var(--steel); font-weight: 600 }
.verify-result dd { margin: 0; font-weight: 700; color: var(--ink) }
@media (max-width: 520px) { .verify-form { flex-direction: column } .verify-result dl { grid-template-columns: 1fr; gap: 2px } .verify-result dd { margin-bottom: 8px } }
[hidden] { display: none !important }

/* ---------- Skylar Coins ---------- */
.chapter-row.locked .prog span { color: var(--steel) }
.chapter-row.locked .cn { background: var(--panel); border: 1px dashed var(--silver) }
.sub .free { color: var(--emerald) }
.lock-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 24px 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, var(--tint-green-2), var(--panel)) }
.lock-card .lock-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--band-2); color: var(--lime); font-size: 22px }
.lock-card h3 { font-size: 19px; margin-bottom: 4px }
.lock-card p { color: var(--steel); font-size: 14px }
.lock-card .lock-act { display: grid; gap: 6px; justify-items: end; text-align: right }
@media (max-width: 700px) { .lock-card { grid-template-columns: minmax(0, 1fr) } .lock-card .lock-act { justify-items: start; text-align: left } }
.no-cash { font-size: 12px; color: var(--mute) }
.no-cash a { color: inherit }
.coin-balance { display: flex; align-items: baseline; gap: 10px }
.coin-balance b { font-size: 44px; font-weight: 900; letter-spacing: -.03em }
.earn-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-size: 14px }
.earn-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line) }
.earn-list b { color: var(--emerald); white-space: nowrap }
.invite-box { display: flex; gap: 8px; margin-top: 12px }
.invite-box input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--silver); border-radius: 10px; font-size: 13px; background: var(--mist) }
.activity { list-style: none; padding: 0; margin: 10px 0 0; display: grid; font-size: 13px }
.activity li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line) }
.activity .plus { color: var(--emerald); font-weight: 700 }
.activity .minus { color: var(--bear); font-weight: 700 }
.lesson-row.is-locked { color: var(--steel); background: var(--mist) }
.lesson-row.is-locked .check { border-color: transparent; font-size: 12px }
.coins-band { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding: 36px; background: linear-gradient(135deg, var(--tint-green-2), var(--panel)) }
.coins-band h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin: 10px 0 10px }
.coins-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.coins-facts li { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px }
.coins-facts b { font-size: 26px; font-weight: 900; color: var(--emerald); letter-spacing: -.02em }
.coins-facts span { font-size: 13px; color: var(--steel) }
@media (max-width: 800px) { .coins-band { grid-template-columns: 1fr; padding: 24px } }

/* ---------- Refer & earn ---------- */
.refer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start }
.refer-link .invite-box { margin-top: 10px }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.refer-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.refer-stats .refer-wide { grid-column: 1 / -1 }
.refer-h { font-size: 22px; font-weight: 800; margin-bottom: 14px }
.refer-steps h3 { font-size: 18px; margin: 8px 0 6px }
.refer-rules { padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); font-size: 14px }
.refer-signin { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 36px }
.refer-signin h2 { font-size: 22px; margin-bottom: 6px }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .06em }
.plus { color: var(--emerald) }
@media (max-width: 860px) { .refer-top { grid-template-columns: 1fr } }

/* ---------- Tables (referrals, admin) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel) }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px }
.data-table th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top }
.data-table tr:last-child td { border-bottom: 0 }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.data-table.clickable tbody tr { cursor: pointer }
.data-table.clickable tbody tr:hover { background: var(--mist) }

/* ---------- Admin dashboard ---------- */
.admin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.admin-kpis small { display: block; margin-top: 6px; font-size: 12px; color: var(--steel) }
@media (max-width: 900px) { .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.admin-grid { margin-top: 18px; align-items: start }
.admin-h { font-size: 17px; font-weight: 800; margin-bottom: 12px }
.admin-sub { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 18px 0 8px }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 6px }
.bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end }
.bar-col i { display: block; width: 100%; background: var(--grad); border-radius: 3px 3px 0 0; min-height: 2px }
.bars-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); margin-top: 6px }
.mini-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.mini-kpis b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em }
.mini-kpis span { font-size: 11px; color: var(--mute); font-weight: 700 }
@media (max-width: 520px) { .mini-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.rank { list-style: none; padding: 0; margin: 0; display: grid; font-size: 13px }
.rank li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0 }
.rank li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.admin-tools { display: flex; gap: 8px; align-items: center }
.admin-tools input { padding: 9px 12px; border: 1px solid var(--silver); border-radius: 10px; min-width: 240px }
.adjust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.adjust input, .adjust select { padding: 9px 12px; border: 1px solid var(--silver); border-radius: 10px; min-width: 0 }
.adjust input[type=number] { width: 140px }
.adjust input:not([type=number]) { flex: 1; min-width: 200px }
.pager-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px }

/* ---------- Profiles, badges, community ---------- */
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; color: #fff; font-weight: 800; background: hsl(var(--h) 55% 40%); letter-spacing: .02em }
.author { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0 }
.author-name { font-size: 13px; font-weight: 700; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px }
.author-name .handle { font-weight: 500; color: var(--mute) }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; background: var(--mist); color: var(--steel) }
.author-name .badge { padding: 0 6px; font-size: 10px }
.badge-skylar { background: var(--inv-bg); color: var(--inv-fg) }
.badge-learner { background: var(--tint-green); color: var(--emerald) }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 }
.profile-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start }
@media (max-width: 900px) { .profile-layout { grid-template-columns: 1fr } }
.profile-side { display: grid; gap: 18px }
.profile-form { display: grid; gap: 14px }
.profile-form label, .composer label { display: grid; gap: 6px; font-size: 13px; font-weight: 700 }
.profile-form input:not([type=checkbox]):not([type=range]), .profile-form textarea, .profile-form select,
.composer input, .composer textarea, .composer select, .answer-box textarea, .edit-title, .edit-body, .create-group input, .create-group textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--silver); border-radius: 10px; font: inherit; font-weight: 500 }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media (max-width: 560px) { .pf-row { grid-template-columns: 1fr } }
.pf-preview { display: flex; align-items: center; gap: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line) }
.input-prefix { display: flex; align-items: center; border: 1px solid var(--silver); border-radius: 10px; overflow: hidden; background: var(--panel) }
.input-prefix span { padding: 0 4px 0 12px; color: var(--mute); font-weight: 700 }
.profile-form .input-prefix input { border: 0; padding-left: 2px }
fieldset { border: 0; padding: 0; margin: 0 }
legend { font-size: 13px; font-weight: 700; margin-bottom: 8px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { display: inline-flex; text-decoration: none; cursor: pointer; position: relative }
.chip input { position: absolute; opacity: 0; pointer-events: none }
.chip span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--steel); background: var(--panel) }
.chip input:checked + span { border-color: var(--green); background: var(--tint-green); color: var(--emerald) }
.chip input:focus-visible + span { outline: 2px solid var(--green) }
.chips.static .chip { cursor: default }
a.chip span:hover { border-color: var(--green) }
.verify-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px }
.verify-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line) }
.verify-list .b-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--mist); font-size: 16px }
.verify-list li.on .b-ico { background: var(--tint-green) }
.member-head { display: flex; gap: 22px; align-items: flex-start; position: relative }
.member-head h1 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800 }
.member-bio { margin: 10px 0; color: var(--ink-2); max-width: 640px }
.member-id { flex: 1; min-width: 0 }
.member-edit { position: absolute; top: 20px; right: 20px }
@media (max-width: 600px) { .member-head { flex-direction: column } .member-edit { position: static } }

.community-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start }
#side { display: grid; gap: 16px; position: sticky; top: 88px }
@media (max-width: 960px) { .community-layout { grid-template-columns: 1fr } #side { position: static } }
.community-note { margin-bottom: 14px }
.composer { padding: 0; overflow: hidden; margin-bottom: 14px }
.composer summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none }
.composer summary::-webkit-details-marker { display: none }
.composer-prompt { flex: 1; padding: 10px 14px; border: 1px solid var(--line); border-radius: 99px; color: var(--mute); font-size: 14px }
.composer form { display: grid; gap: 12px; padding: 0 18px 18px }
.feed-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin: 4px 0 12px }
.feed-bar input { padding: 9px 12px; border: 1px solid var(--silver); border-radius: 10px; min-width: 200px; flex: 1; max-width: 320px }
.tabs { display: flex; flex-wrap: wrap; gap: 4px }
.tab { border: 0; background: none; padding: 8px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--steel); cursor: pointer }
.tab:hover { background: var(--mist) }
.tab.on { background: var(--inv-bg); color: var(--inv-fg) }
.post-card { display: grid; grid-template-columns: 54px 60px minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin-bottom: 10px }
.post-card:hover { border-color: var(--silver) }
.pc-votes, .pc-answers { display: grid; justify-items: center; align-content: start; padding-top: 4px; color: var(--steel) }
.pc-votes b, .pc-answers b { font-size: 18px; color: var(--ink) }
.pc-votes span, .pc-answers span { font-size: 11px }
.pc-answers.has { border: 1px solid var(--line); border-radius: 10px; padding: 4px }
.pc-answers.solved { background: var(--tint-green); border-radius: 10px; padding: 4px }
.pc-answers.solved b, .pc-answers.solved span { color: var(--emerald) }
.pc-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px }
.pc-meta a { text-decoration: none; color: var(--steel); font-weight: 600 }
.post-card h3 { font-size: 16px; margin: 6px 0 4px; line-height: 1.35 }
.post-card h3 a { text-decoration: none }
.post-card h3 a:hover { color: var(--emerald) }
.pc-snippet { font-size: 13px; color: var(--steel); overflow-wrap: anywhere }
.pc-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px }
@media (max-width: 560px) { .post-card { grid-template-columns: 1fr } .pc-votes, .pc-answers { display: none } }
.group-list { list-style: none; padding: 0; margin: 0; display: grid }
.group-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line) }
.group-list a { display: grid; text-decoration: none; min-width: 0; font-size: 14px }
.group-list a.on b { color: var(--emerald) }
.create-group { margin-top: 12px }
.create-group summary { list-style: none; display: inline-flex }
.create-group summary::-webkit-details-marker { display: none }
.create-group form { display: grid; gap: 8px; margin-top: 10px }
.me-card .author-name { font-size: 15px }
.post-wrap { max-width: 900px }
.post-main, .reply { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px }
.post-main h1 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin: 8px 0 10px; overflow-wrap: anywhere }
.reply { padding: 18px 0; border-bottom: 1px solid var(--line) }
.reply.accepted { background: linear-gradient(90deg, var(--tint-green-3), transparent); border-radius: 12px; padding: 18px 12px }
.rich p { margin: 0 0 10px; color: var(--ink-2); overflow-wrap: anywhere }
.vote { display: grid; justify-items: center; gap: 2px; align-self: start; width: 44px; padding: 8px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--steel); cursor: pointer; font-size: 12px }
.vote b { font-size: 15px; color: var(--ink) }
.vote.on { border-color: var(--green); background: var(--tint-green); color: var(--emerald) }
.vote[disabled] { cursor: default; opacity: .8 }
.item-actions { display: inline-flex; gap: 10px; margin-left: auto }
.link-btn { border: 0; background: none; padding: 0; color: var(--steel); font-size: 12px; font-weight: 700; cursor: pointer }
.link-btn:hover { color: var(--ink); text-decoration: underline }
.disclaimer-line { margin-top: 8px }
.answer-box form { display: grid; gap: 10px }
.answer-box label { display: grid; gap: 8px }
.empty { text-align: center; padding: 32px }
.mod-item { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px }
.mod-item blockquote { margin: 0; padding: 10px 12px; background: var(--mist); border-radius: 10px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere }