:root {
  color-scheme: dark;
  --board: #17191b;
  --board-deep: #0d0f10;
  --panel: rgba(34, 37, 39, .92);
  --panel-soft: rgba(19, 21, 23, .72);
  --chalk: #f4f1e8;
  --muted: #aaaeb2;
  --line: #8c9094;
  --orange: #ffa044;
  --cyan: #70c9de;
  --green: #62cf8b;
  --red: #ff666f;
  --radius: 18px;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--board-deep); color: var(--chalk); }
body {
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.055), transparent 26%),
    radial-gradient(circle at 88% 74%, rgba(255,160,68,.045), transparent 30%),
    repeating-linear-gradient(104deg, rgba(255,255,255,.015) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #202326, #111315 68%);
  min-height: 100dvh;
}
button, input, select { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.app-shell { min-height: 100dvh; }
.center-screen { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 20px; }
.pifagor-logo { position: relative; width: 190px; aspect-ratio: 1.38 / .9; display: grid; place-items: center; filter: drop-shadow(0 18px 26px #0009); }
.pifagor-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pifagor-logo span { position: relative; z-index: 1; width: 80%; margin-top: -14%; color: var(--chalk); text-align: center; font-size: 26px; font-weight: 800; white-space: nowrap; }
.pifagor-logo.large { width: clamp(180px,22vw,290px); }
.pifagor-logo.large span { font-size: clamp(25px,3vw,40px); }
.pifagor-logo.compact { width: 180px; }
.public-landing { min-height: 100dvh; overflow: hidden; }
.marketing-nav { position: relative; z-index: 10; width: min(1180px,calc(100% - 40px)); min-height: 82px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px dashed #65696c; }
.marketing-brand { display: flex; align-items: center; gap: 10px; color: var(--chalk); text-decoration: none; font-size: 25px; }
.marketing-brand .mini-logo { width: 61px; height: 48px; }
.marketing-nav nav { display: flex; align-items: center; gap: 26px; font: 15px system-ui,sans-serif; }
.marketing-nav nav a { color: #cfccc4; text-decoration: none; }
.marketing-nav nav a:hover { color: var(--orange); }
.compact-button { min-height: 42px; padding: 9px 17px; display: inline-grid; place-items: center; }
.landing-hero, .landing-section { width: min(1180px,calc(100% - 40px)); margin-inline: auto; }
.landing-hero { position: relative; min-height: calc(100dvh - 82px); display: grid; grid-template-columns: minmax(0,1fr) minmax(390px,.78fr); align-items: center; gap: clamp(42px,7vw,100px); padding: 58px 0 80px; }
.landing-hero::before { content: "×"; position: absolute; z-index: -1; left: -8vw; top: 9%; color: #ffa0440c; font-size: 440px; transform: rotate(-12deg); }
.landing-hero-copy h1 { margin: 8px 0 24px; font-size: clamp(61px,7.8vw,108px); line-height: .84; letter-spacing: -.045em; }
.landing-hero-copy h1 span { color: var(--orange); }
.landing-lead { max-width: 690px; margin: 0; color: #d0d1d0; font: clamp(18px,1.7vw,22px)/1.5 system-ui,sans-serif; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.landing-actions .chalk-button { display: inline-grid; place-items: center; text-decoration: none; }
.landing-note { margin: 16px 0 0; color: #8d9194; font: 13px/1.5 system-ui,sans-serif; }
.product-preview { position: relative; min-height: 610px; padding: 27px; display: grid; align-content: space-between; gap: 20px; border-color: var(--orange); background: linear-gradient(160deg,rgba(40,43,45,.97),rgba(14,16,17,.96)); box-shadow: 0 32px 80px #000b,0 0 70px #ffa04410; transform: rotate(2deg); }
.product-preview::before, .product-preview::after { content: ""; position: absolute; border: 2px dashed; border-radius: 50%; }
.product-preview::before { width: 170px; height: 170px; right: -95px; top: -75px; border-color: #70c9de55; }
.product-preview::after { width: 100px; height: 100px; left: -68px; bottom: 35px; border-color: #62cf8b55; }
.preview-top { display: flex; align-items: center; justify-content: space-between; font-size: 27px; }
.preview-top strong { color: var(--orange); }
.preview-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #45484a; }
.preview-progress i { display: block; width: 64%; height: 100%; background: var(--orange); }
.preview-task { text-align: center; font-size: clamp(58px,6vw,86px); }
.preview-answers { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.preview-answers span { min-height: 84px; display: grid; place-items: center; border: 2px dashed #aeb1b2; border-radius: 15px; font-size: 38px; }
.preview-answers span:nth-child(3) { color: white; border-color: var(--green); background: #287b48; }
.preview-tables { display: grid; grid-template-columns: repeat(9,1fr); gap: 5px; }
.preview-tables b { min-height: 35px; display: grid; place-items: center; border-radius: 8px; background: #303335; font-size: 16px; }
.preview-tables .active { color: var(--orange); border: 1px dashed var(--orange); }
.landing-section { padding: clamp(74px,10vw,130px) 0; }
.landing-heading { max-width: 850px; margin: 0 auto 42px; text-align: center; }
.landing-heading h2, .progress-copy h2, .start-copy h2 { margin: 7px 0 13px; font-size: clamp(40px,5vw,68px); line-height: 1; }
.landing-heading > p:last-child, .progress-copy > p, .start-copy > p { color: var(--muted); font: 18px/1.55 system-ui,sans-serif; }
.product-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.product-feature { --feature:var(--cyan); min-height: 245px; padding: 25px; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: 1fr auto; gap: 13px 18px; border: 2px dashed var(--feature); border-radius: var(--radius); background: rgba(15,17,18,.74); }
.product-feature > span { width: 54px; height: 54px; display: grid; place-items: center; color: var(--feature); border: 2px dashed var(--feature); border-radius: 14px; font: 29px system-ui,sans-serif; }
.product-feature h3 { margin: 0 0 7px; font-size: 30px; }
.product-feature p { margin: 0; color: var(--muted); font: 16px/1.5 system-ui,sans-serif; }
.product-feature > strong { grid-column: 1/-1; color: var(--feature); font-size: 25px; text-align: right; }
.product-feature.training { --feature:var(--orange); }
.product-feature.game { --feature:var(--green); }
.product-feature.duel { --feature:#72aeea; }
.progress-promo { display: grid; grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); align-items: center; gap: clamp(45px,8vw,110px); }
.progress-copy ul { margin: 25px 0 0; padding: 0; display: grid; gap: 12px; list-style: none; font: 17px system-ui,sans-serif; }
.progress-copy li::before { content: "✓"; margin-right: 12px; color: var(--green); font-weight: 900; }
.report-preview { padding: 27px; border-color: var(--green); transform: rotate(-1.5deg); }
.report-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.report-heading small { display: block; color: var(--muted); font: 14px system-ui,sans-serif; }
.report-heading strong { display: block; margin-top: 5px; font-size: 28px; }
.report-heading > b { color: var(--green); font-size: 49px; }
.report-goal { height: 10px; margin: 19px 0 24px; overflow: hidden; border-radius: 999px; background: #45484a; }
.report-goal i { display: block; height: 100%; background: var(--green); }
.report-stats { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 25px; }
.report-stats span { padding: 4px 12px; text-align: center; border-right: 1px solid #626568; }
.report-stats span:last-child { border: 0; }
.report-stats small { display: block; color: var(--muted); font: 13px system-ui,sans-serif; }
.report-stats strong { display: block; margin-top: 5px; font-size: 26px; }
.report-tables { display: grid; gap: 13px; }
.report-tables span { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 12px; }
.report-tables span::after { content: ""; grid-column: 2; grid-row: 1; height: 9px; border-radius: 999px; background: #474a4d; }
.report-tables i { z-index: 1; grid-column: 2; grid-row: 1; height: 9px; border-radius: 999px; background: var(--orange); }
.motivation-promo { border-top: 1px dashed #55595c; }
.motivation-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.motivation-grid article { min-height: 280px; padding: 25px; text-align: center; }
.motivation-grid img { width: 88px; height: 88px; object-fit: contain; }
.motivation-grid h3 { margin: 14px 0 8px; font-size: 27px; }
.motivation-grid p { margin: 0; color: var(--muted); font: 15px/1.5 system-ui,sans-serif; }
.start-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,480px); align-items: center; gap: clamp(40px,8vw,120px); }
.start-copy > p { max-width: 650px; }
.chalk-card { background: var(--panel); border: 2px dashed var(--line); border-radius: var(--radius); box-shadow: 0 16px 34px #0007; }
.auth-card { padding: clamp(24px, 4vw, 42px); }
.auth-card h2 { font-size: 34px; margin: 8px 0; }
.auth-card .chalk-button { width: 100%; }
.auth-trust { margin: 18px 0 0; color: var(--muted); text-align: center; font: 12px/1.5 system-ui,sans-serif; }
.landing-footer { width: min(1180px,calc(100% - 40px)); min-height: 120px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; border-top: 1px dashed #55595c; color: var(--muted); font: 13px system-ui,sans-serif; }
.landing-footer > span { color: var(--orange); font: 25px "Comic Sans MS","Chalkboard SE",sans-serif; }
.landing-footer p { text-align: center; }
.landing-footer div { display: flex; justify-content: flex-end; gap: 16px; }
.landing-footer a { color: var(--muted); }
.eyebrow { color: var(--orange); font-family: system-ui, sans-serif; font-weight: 900; letter-spacing: .13em; font-size: 13px; }
.muted { color: var(--muted); font-family: system-ui, sans-serif; line-height: 1.45; }
label { display: grid; gap: 8px; margin: 22px 0; color: #d6d5d0; font-family: system-ui, sans-serif; }
input, select { width: 100%; border: 1px solid #6d7073; border-radius: 13px; padding: 15px 16px; background: #141617; color: var(--chalk); outline: none; }
input:focus, select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px #ffa04428; }
.chalk-button, .round-button, .tab, .module-card, .answer, .number-pill, .segment button, .text-button { border: 0; cursor: pointer; }
.chalk-button { min-height: 52px; padding: 12px 22px; border: 2px dashed var(--line); border-radius: 14px; background: #191b1d; font-weight: 800; }
.chalk-button.primary { border-color: var(--orange); color: var(--orange); background: #3d2b1f; }
.chalk-button:disabled { opacity: .5; cursor: default; }
.text-button { background: transparent; color: var(--muted); margin: 14px auto 0; display: block; text-decoration: underline; }
.message { min-height: 22px; color: var(--red); font-family: system-ui, sans-serif; }
.workspace { min-height: 100dvh; padding-bottom: 104px; }
.topbar { position: sticky; top: 0; z-index: 30; min-height: 74px; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); background: rgba(15,17,18,.94); backdrop-filter: blur(16px); border-bottom: 1px dashed #74777a; }
.round-button { width: 46px; height: 46px; border: 2px dashed var(--line); border-radius: 13px; background: #1a1c1e; font-size: 40px; line-height: 30px; }
.top-brand { display: flex; align-items: center; gap: 13px; font-size: clamp(23px, 3vw, 34px); }
.mini-logo { position: relative; width: 54px; height: 40px; overflow: hidden; }
.mini-logo img { width: 100%; height: 100%; object-fit: contain; }
.top-status { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 13px system-ui, sans-serif; text-align: right; }
.premium { padding: 7px 10px; color: var(--orange); border: 1px dashed var(--orange); border-radius: 999px; font-weight: 800; }
.screen { width: min(1180px, calc(100% - 32px)); margin: 24px auto; }
.tabbar { position: fixed; z-index: 40; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(900px, calc(100% - 20px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 7px; background: rgba(5,6,7,.92); border: 2px dashed #84878a; border-radius: 20px; backdrop-filter: blur(18px); box-shadow: 0 10px 32px #000b; }
.tab { min-height: 68px; display: grid; place-items: center; align-content: center; gap: 2px; background: transparent; border: 2px dashed transparent; border-radius: 14px; }
.tab span { font-size: 24px; }
.tab.active { color: var(--orange); border-color: var(--orange); background: #3b2b20; }
.hero { display: grid; grid-template-columns: minmax(220px, 330px) 1fr; gap: 18px; margin-bottom: 18px; }
.logo-panel { min-height: 260px; display: grid; place-content: center; justify-items: center; }
.goal-card { padding: 24px; }
.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.card-heading h2 { margin: 0; font-size: 29px; }
.goal-percent { color: var(--orange); font-size: 34px; font-weight: 900; }
.goal-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 20px; }
.goal-item { padding: 10px 18px; text-align: center; border-right: 1px solid #686b6e; }
.goal-item:last-child { border: 0; }
.goal-item strong { display: block; margin-top: 5px; font-size: 26px; }
.progress-track { height: 9px; border-radius: 999px; background: #474a4d; overflow: hidden; margin-top: 18px; }
.progress-fill { height: 100%; background: linear-gradient(90deg,var(--orange),#ffc278); }
.module-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.module-card { min-height: 150px; padding: 22px; text-align: left; background: rgba(10,12,13,.72); border: 2px dashed var(--accent,var(--line)); border-radius: 17px; transition: transform .16s, background .16s; }
.module-card:hover { transform: translateY(-3px); background: rgba(34,37,39,.92); }
.module-card .icon { color: var(--accent); font-size: 30px; }
.module-card h3 { font-size: 28px; margin: 12px 0 4px; }
.module-card p { margin: 0; color: var(--muted); font-family: system-ui, sans-serif; }
.progress-map { margin-top: 14px; padding: 22px; }
.number-row { display: grid; grid-template-columns: repeat(9,1fr); gap: 8px; }
.number-pill { min-height: 54px; border-radius: 12px; background: #303336; color: var(--chalk); font-size: 24px; border: 2px dashed transparent; }
.number-pill.active { border-color: var(--orange); color: var(--orange); background: #3c2a1d; }
.number-pill.progress-zero { background: rgba(255,255,255,.12); }
.number-pill.progress-low { background: rgba(205,58,67,.62); }
.number-pill.progress-medium { background: rgba(255,160,68,.72); }
.number-pill.progress-high { background: rgba(54,171,98,.72); }
.lesson-layout, .game-layout { display: grid; gap: 18px; max-width: 900px; margin: 0 auto; }
.segment { display: grid; grid-template-columns: repeat(2,1fr); padding: 6px; border: 2px dashed var(--line); background: #101213; border-radius: 16px; }
.segment button { min-height: 52px; border-radius: 12px; background: transparent; font-size: 22px; }
.segment button.active { color: var(--orange); background: #36302b; border: 2px dashed var(--orange); }
.duel-setup-card { min-height: 185px; display: grid; place-content: center; padding: 24px; text-align: center; }
.duel-setup-card h2 { margin: 8px 0; }
.duration-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.duration-picker .active { color: var(--orange); border-color: var(--orange); background: #3d2b1f; }
.limit-badge { margin: 0; color: var(--muted); font: 14px system-ui,sans-serif; text-align: center; }
.task-card { min-height: 210px; display: grid; place-content: center; text-align: center; padding: 24px; }
.task { font-size: clamp(56px, 9vw, 104px); white-space: nowrap; }
.answer-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.answer { min-height: 100px; border-radius: 17px; border: 2px dashed #dadada; background: rgba(20,22,24,.7); color: var(--chalk); font-size: clamp(38px,6vw,62px); }
.answer.correct { background: #247b43; color: white; }
.answer.wrong { background: #a7353b; color: white; }
.feedback { min-height: 44px; text-align: center; font-size: 28px; color: var(--green); }
.lesson-actions { min-height: 54px; display: grid; place-items: center; }
.lesson-action { min-width: min(280px,100%); }
.lesson-summary { padding: clamp(24px,5vw,42px); text-align: center; }
.lesson-summary h2 { margin: 0 0 12px; font-size: clamp(32px,6vw,48px); }
.hint-card { padding: 17px 20px; text-align: center; }
.hint-card h3 { margin: 0 0 12px; font-size: 24px; }
.hint-items { display: grid; gap: 14px; text-align: left; }
.hint-items strong { display: block; color: var(--orange); font-size: 19px; }
.hint-items p { margin: 5px 0 0; color: var(--chalk); font: 17px/1.45 system-ui,sans-serif; }
.table-board { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 22px; }
.table-row { padding: 10px 16px; border-bottom: 1px dashed #6f7274; font-size: 25px; text-align: center; }
.stats-line { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 10px; }
.stat { padding: 14px; text-align: center; }
.stat strong { display: block; font-size: 28px; color: var(--orange); }
.keyboard { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.key { min-height: 70px; font-size: 30px; }
.key.ok { color: var(--green); border-color: var(--green); }
.key.clear { color: var(--red); border-color: var(--red); }
.local-duel-page { width: min(1100px,100%); margin: 0 auto; display: grid; gap: 12px; }
.local-duel-timer { width: fit-content; min-width: 130px; margin: 0 auto; padding: 10px 18px; color: var(--cyan); text-align: center; }
.local-duel-players { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.duel-player { padding: 16px; border-color: var(--cyan); }
.duel-player.bottom { border-color: var(--orange); }
.duel-player-title { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.duel-player-title strong { color: var(--chalk); font-size: 28px; }
.duel-player .task { min-height: 115px; display: grid; place-items: center; font-size: clamp(38px,5vw,64px); }
.duel-player .key { min-height: 54px; }
.game-result-page, .mistake-review-page { width: min(700px,100%); margin: 0 auto; display: grid; gap: 14px; }
.game-result-main { padding: 24px; display: grid; justify-items: center; text-align: center; }
.game-result-main small, .best-result small { color: var(--muted); font: 15px system-ui,sans-serif; }
.game-result-main > strong { color: var(--orange); font-size: 48px; }
.result-symbol { margin: 4px 0 12px; color: var(--cyan); font-size: 52px; }
.result-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.result-metrics article { min-height: 86px; padding: 14px; display: grid; place-content: center; text-align: center; }
.result-metrics strong { font-size: 27px; }
.result-metrics span { color: var(--muted); font: 13px system-ui,sans-serif; }
.result-metrics .correct { border-color: var(--green); }
.result-metrics .correct strong { color: var(--green); }
.result-metrics .wrong { border-color: var(--red); }
.result-metrics .wrong strong { color: var(--red); }
.best-result { padding: 16px 20px; display: flex; align-items: center; gap: 14px; border-color: var(--cyan); }
.best-result > span { color: var(--cyan); font-size: 30px; }
.best-result strong { display: block; font-size: 25px; }
.mistake-review-card { padding: 20px; border-color: var(--cyan); }
.mistake-review-card .task { min-height: 120px; display: grid; place-items: center; }
.mistake-review-card .answer { min-height: 72px; font-size: 38px; }
.own-answer { text-align: right; }
.achievements-page { display: grid; gap: 20px; }
.achievements-hub { display: grid; gap: 18px; }
.achievements-summary { width: fit-content; min-width: 150px; padding: 14px 20px; text-align: center; }
.achievements-summary strong { display: block; color: var(--orange); font-size: 28px; }
.achievements-summary span { color: var(--muted); font: 14px system-ui,sans-serif; }
.achievement-category h2 { margin: 0 0 10px; color: var(--muted); font-size: 22px; }
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 10px; }
.achievement { position: relative; min-height: 170px; padding: 14px; display: grid; justify-items: center; align-content: start; gap: 8px; color: var(--chalk); opacity: .55; text-align: center; }
.achievement.unlocked { opacity: 1; border-color: var(--orange); }
.achievement-icon { position: relative; width: 66px; height: 66px; display: grid; place-items: center; }
.achievement-icon img { width: 66px; height: 66px; object-fit: contain; filter: grayscale(1); opacity: .55; }
.achievement.unlocked .achievement-icon img { filter: none; opacity: 1; }
.achievement-icon i { position: absolute; right: -2px; bottom: -1px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #090a0b; font: 12px system-ui,sans-serif; }
.achievement > strong { min-height: 39px; display: grid; place-items: center; font-size: 15px; }
.achievement-progress { width: 100%; height: 6px; border-radius: 999px; background: #494c4f; overflow: hidden; }
.achievement-progress i { display: block; height: 100%; background: var(--orange); }
.achievement.unlocked .achievement-progress i { background: var(--green); }
.achievement-state { color: var(--muted); font: 12px system-ui,sans-serif; }
.achievement-hint { position: fixed; z-index: 160; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(7,8,9,.75); backdrop-filter: blur(8px); }
.achievement-hint-card { width: min(440px,100%); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 28px; text-align: center; }
.achievement-hint-card > img { width: 82px; height: 82px; object-fit: contain; }
.achievement-hint-card h2 { margin: 10px 0 14px; font-size: 30px; }
.achievement-hint-card h3 { margin: 0; color: var(--orange); font-size: 20px; }
.achievement-hint-card p { color: var(--chalk); font: 17px/1.45 system-ui,sans-serif; }
.achievement-hint-card .chalk-button { width: 100%; margin-top: 20px; }
.achievement-hint-progress { margin-top: 18px; text-align: right; color: var(--muted); font: 14px system-ui,sans-serif; }
.achievement-hint-progress .progress-track { margin-top: 6px; }
.leaderboard-page { width: min(900px,100%); margin: 0 auto; }
.leader-list { display: grid; gap: 9px; }
.leader-section-title { margin: 18px 0 2px; color: var(--muted); font-size: 20px; }
.leader-row { display: grid; grid-template-columns: 46px 46px 1fr auto; align-items: center; gap: 12px; padding: 11px 15px; }
.leader-row.me { border-color: var(--orange); }
.leader-rank { color: var(--orange); font-size: 22px; font-weight: 900; }
.leader-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px dashed var(--orange); }
.leader-avatar.fallback { display: grid; place-items: center; color: var(--orange); }
.account-grid { display: grid; grid-template-columns: minmax(260px,360px) 1fr; gap: 18px; }
.profile-card, .details-card { padding: 24px; }
.avatar { width: 120px; height: 120px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 50%; border: 3px dashed var(--orange); object-fit: cover; font-size: 44px; }
.profile-card h2 { text-align: center; }
.profile-actions { display: grid; gap: 10px; }
.profile-id { margin: 6px 0 16px; color: #85898c; font: 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; text-align: center; overflow-wrap: anywhere; }
.avatar-actions { display: grid; grid-template-columns: 1fr 54px; gap: 8px; }
.avatar-actions label { margin: 0; display: grid; place-items: center; }
.avatar-delete { padding: 8px; color: var(--red); border-color: var(--red); }
.account-details { display: grid; align-content: start; gap: 12px; }
.account-sync { padding: 15px 18px; display: grid; gap: 4px; }
.account-sync span, .account-sync small { color: var(--muted); font: 13px/1.4 system-ui,sans-serif; }
.settings-page { width: min(760px,100%); margin: 0 auto; display: grid; gap: 12px; }
.settings-section { padding: 18px; }
.settings-section h2 { margin: 0 0 8px; color: var(--orange); font-size: 21px; }
.settings-row { width: 100%; min-height: 66px; padding: 11px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--chalk); background: transparent; border: 0; border-bottom: 1px dashed #55595c; text-align: left; text-decoration: none; cursor: pointer; }
.settings-row:last-child { border-bottom: 0; }
.settings-row span { display: grid; gap: 3px; }
.settings-row small { color: var(--muted); font: 13px/1.4 system-ui,sans-serif; }
.settings-row > i { color: var(--orange); font-style: normal; font-size: 25px; }
.settings-row.static { cursor: default; }
.settings-switch { min-width: 57px; padding: 7px 9px; border: 1px dashed var(--line); border-radius: 999px; color: var(--muted) !important; font: 12px system-ui,sans-serif !important; text-align: center; }
.settings-switch.on { color: var(--green) !important; border-color: var(--green); }
.settings-version { color: #75797c; font: 12px system-ui,sans-serif; text-align: center; }
.summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.summary-card { padding: 16px; text-align: center; }
.summary-card strong { display: block; color: var(--orange); font-size: 27px; }
.progress-details { width: min(900px,100%); margin: 0 auto; display: grid; gap: 14px; }
.progress-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.progress-metric { min-height: 82px; padding: 15px 18px; display: flex; align-items: center; gap: 13px; border-color: color-mix(in srgb,var(--metric) 78%,transparent); }
.progress-metric > span { width: 34px; color: var(--metric); font: 29px/1 system-ui,sans-serif; text-align: center; }
.progress-metric small, .daily-progress-grid small, .table-stats-grid small { display: block; color: var(--muted); font: 14px/1.25 system-ui,sans-serif; }
.progress-metric strong { display: block; margin-top: 3px; color: var(--chalk); font-size: 28px; }
.daily-progress-card, .table-progress-card { padding: 20px; }
.daily-progress-card { border-color: color-mix(in srgb,var(--orange) 75%,transparent); }
.daily-progress-card .card-heading h2 span { color: var(--orange); }
.daily-progress-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 16px; }
.daily-progress-grid > div { padding: 3px 14px; text-align: center; border-right: 1px solid #686b6e; }
.daily-progress-grid > div:last-child { border-right: 0; }
.daily-progress-grid strong { display: block; margin-top: 4px; font-size: 23px; }
.table-progress-list { display: grid; gap: 12px; }
.table-progress-card { --mastery: var(--red); border-color: color-mix(in srgb,var(--mastery) 75%,transparent); }
.table-progress-card.mastery-zero { --mastery: var(--line); }
.table-progress-card.mastery-medium { --mastery: var(--orange); }
.table-progress-card.mastery-high { --mastery: var(--green); }
.table-progress-card .progress-fill { background: var(--mastery); }
.table-mastery { color: var(--mastery); font-size: 26px; font-weight: 900; }
.table-stats-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; margin-top: 17px; }
.table-stats-grid strong { display: block; margin-top: 3px; color: var(--chalk); font-size: 20px; }
.progress-note { margin: 15px 0 0; color: color-mix(in srgb,var(--chalk) 62%,transparent); font: 16px/1.4 system-ui,sans-serif; }
.toast { position: fixed; z-index: 100; top: 92px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 14px 20px; border-radius: 13px; background: #111; border: 2px dashed var(--orange); box-shadow: 0 10px 30px #000a; }
.celebration { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(7,8,9,.78); backdrop-filter: blur(8px); overflow: hidden; }
.celebration-card { position: relative; z-index: 2; width: min(520px,100%); max-height: min(720px,calc(100dvh - 36px)); overflow-y: auto; padding: clamp(24px,5vw,42px); text-align: center; border-color: var(--orange); background: linear-gradient(150deg,#292a2b,#181a1b); }
.celebration-card h2 { margin: 8px 0 20px; font-size: clamp(34px,7vw,52px); }
.celebration-star { width: 82px; height: 82px; display: grid; place-items: center; margin: 0 auto 14px; border: 3px dashed var(--orange); border-radius: 50%; color: var(--orange); font-size: 46px; box-shadow: 0 0 34px #ffa04466; }
.celebration-list { display: grid; gap: 10px; text-align: left; }
.celebration-achievement { padding: 14px 16px; border: 1px dashed var(--line); border-radius: 13px; background: #121415; }
.celebration-achievement strong { display: block; color: var(--orange); font-size: 22px; }
.celebration-achievement p { margin: 5px 0 0; color: #d3d1ca; font: 15px/1.4 system-ui,sans-serif; }
.celebration-button { width: 100%; margin-top: 22px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti-piece { position: absolute; top: -12%; left: var(--x); width: 10px; height: 18px; border-radius: 2px; background: var(--color); transform: rotate(var(--rotation)); animation: confetti-fall var(--duration) var(--delay) ease-in forwards; }
@keyframes confetti-fall { to { transform: translate3d(var(--drift),115vh,0) rotate(760deg); } }
@media (max-width: 760px) {
  .marketing-nav { width: min(100% - 24px,1180px); min-height: 70px; }
  .marketing-nav nav > a:not(.compact-button) { display: none; }
  .marketing-brand { font-size: 21px; }
  .landing-hero, .landing-section { width: min(100% - 24px,1180px); }
  .landing-hero { min-height: auto; grid-template-columns: 1fr; gap: 50px; padding: 56px 0 76px; }
  .landing-hero-copy { text-align: center; }
  .landing-hero-copy h1 { font-size: clamp(56px,17vw,82px); }
  .landing-lead { margin-inline: auto; font-size: 17px; }
  .landing-actions { justify-content: center; }
  .product-preview { width: min(500px,100%); min-height: 540px; margin: 0 auto; padding: 21px; transform: none; }
  .product-feature-grid, .progress-promo, .start-section { grid-template-columns: 1fr; }
  .product-feature { min-height: 215px; padding: 20px; }
  .progress-promo { gap: 44px; }
  .progress-copy { text-align: center; }
  .progress-copy ul { width: fit-content; margin-inline: auto; text-align: left; }
  .report-preview { width: min(520px,100%); margin: 0 auto; transform: none; }
  .motivation-grid { grid-template-columns: 1fr; }
  .motivation-grid article { min-height: 0; }
  .start-copy { text-align: center; }
  .auth-card { width: min(500px,100%); margin: 0 auto; }
  .landing-footer { width: min(100% - 24px,1180px); grid-template-columns: 1fr; justify-items: center; padding: 28px 0; text-align: center; }
  .landing-footer p { margin: 0; }
  .landing-footer div { justify-content: center; }
  .progress-metric { min-height: 74px; padding: 12px; }
  .progress-metric strong { font-size: 23px; }
  .local-duel-players { grid-template-columns: 1fr; }
  .duel-player.top { transform: rotate(180deg); }
  .topbar { grid-template-columns: 46px 1fr; }
  .top-status { grid-column: 2; margin-top: -8px; }
  .hero, .account-grid { grid-template-columns: 1fr; }
  .logo-panel { min-height: 190px; }
  .module-card { min-height: 128px; padding: 17px; }
  .module-card h3 { font-size: 23px; }
  .goal-card { padding: 18px 12px; }
  .goal-item { padding: 7px; }
  .goal-item strong { font-size: 20px; }
  .number-row { overflow-x: auto; grid-template-columns: repeat(9,54px); padding-bottom: 4px; }
  .table-board { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: repeat(2,1fr); }
  .tab { min-height: 58px; font-size: 11px; }
  .tab span { font-size: 21px; }
  .screen { width: min(100% - 20px,1180px); margin-top: 14px; }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .landing-hero { grid-template-columns: minmax(0,1fr) minmax(360px,.8fr); gap: 45px; }
  .product-preview { min-height: 550px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .landing-hero { grid-template-columns: 1fr; min-height: auto; }
  .product-preview { width: min(540px,100%); margin: 0 auto; transform: none; }
  .progress-promo { grid-template-columns: 1fr; }
  .report-preview { width: min(600px,100%); margin: 0 auto; transform: none; }
  .start-section { grid-template-columns: 1fr minmax(340px,420px); }
}
@media (max-width: 430px) {
  .marketing-brand .mini-logo { width: 47px; height: 38px; }
  .compact-button { padding-inline: 12px; }
  .landing-hero-copy h1 { font-size: clamp(49px,16vw,68px); }
  .landing-actions { display: grid; }
  .landing-actions .chalk-button { width: 100%; }
  .product-preview { min-height: 470px; padding: 17px; }
  .preview-top { font-size: 22px; }
  .preview-task { font-size: 55px; }
  .preview-answers span { min-height: 66px; font-size: 31px; }
  .preview-tables { overflow: hidden; }
  .preview-tables b { min-height: 29px; font-size: 13px; }
  .landing-section { padding: 68px 0; }
  .landing-heading h2, .progress-copy h2, .start-copy h2 { font-size: 38px; }
  .product-feature { grid-template-columns: 48px 1fr; gap: 12px; }
  .product-feature > span { width: 46px; height: 46px; }
  .product-feature h3 { font-size: 25px; }
  .product-feature > strong { font-size: 21px; }
  .report-preview { padding: 18px; }
  .report-stats strong { font-size: 21px; }
  .report-heading > b { font-size: 40px; }
  .module-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .module-card { min-height: 116px; }
  .module-card p { font-size: 12px; }
  .answer { min-height: 82px; }
  .stats-line { font-size: 13px; }
  .leader-row { grid-template-columns: 38px 34px minmax(0,1fr) auto; gap: 7px; padding: 9px 10px; }
  .leader-avatar { width: 36px; height: 36px; }
  .leader-rank { font-size: 18px; }
  .leader-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } .confetti-piece { display: none; } }