@font-face {font-family: Manrope; src: local("Avenir Next");}
@font-face {font-family: "DM Sans"; src: local("Avenir Next");}
:root {color-scheme: dark; --bg: #101213; --card: #191c1e; --line: #2b2e30; --muted: #a1a5a6; --gold: #d8b568; --text: #f1f0eb; --green: #8bbb9c;}
* {box-sizing: border-box;}
body {margin: 0; background: var(--bg); color: var(--text); font: 16px 'DM Sans',sans-serif;}
:is(button,a:where([data-view])),a,select {-webkit-tap-highlight-color: transparent;}
:is(button,a:where([data-view])),select {font: inherit;}
:is(button,a:where([data-view])) {cursor: pointer; border: 1px solid var(--line); background: #232729; color: var(--text); border-radius: 8px; padding: 12px 18px; font-weight: 600;}
:is(button,a:where([data-view])):hover {border-color: var(--gold); background: #2d2c25;}
:is(button,a:where([data-view])):disabled {opacity: .45; cursor: default;}
a:not(:where([data-view])) {color: var(--gold);}
:is(button,a:where([data-view])):focus-visible,a:focus-visible,select:focus-visible {outline: 3px solid var(--gold); outline-offset: 4px;}
h1,h2,h3,p {margin-top: 0;}
h1,h2,h3 {font-family: Manrope,sans-serif;}
h1 {font-size: 34px; letter-spacing: -1.2px; margin-bottom: 8px;}
h2 {font-size: 21px; letter-spacing: -.5px;}
h3 {font-size: 18px;}
p {color: var(--muted); line-height: 1.6;}
small {font-size: 12px;}
.gold {color: var(--gold);}
.muted {color: var(--muted);}
.sidebar {position: fixed; inset: 0 auto 0 0; width: 244px; background: #141617; border-right: 1px solid var(--line); padding: 35px 23px; display: flex; flex-direction: column;}
.brand {display: flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none; font: 800 26px Manrope; letter-spacing: 3px;}
.brand small {display: block; font: 500 10px 'DM Sans'; letter-spacing: 4px; margin-top: 2px;}
.brandmark {display: grid; place-items: center; width: 41px; height: 47px; background: var(--gold); color: #131515; clip-path: polygon(50% 0,100% 15%,100% 67%,50% 100%,0 67%,0 15%); font: 800 28px Manrope; letter-spacing: 0;}
.nav-label {font-size: 11px; letter-spacing: 1.7px; color: #787f80; margin: 52px 12px 15px;}
nav :is(button,a:where([data-view])) {width: 100%; background: none; border-color: transparent; text-align: left; display: flex; align-items: center; gap: 13px; margin: 5px 0; color: var(--muted); padding: 14px 12px; font-size: 14px;}
nav :is(button,a:where([data-view])).active {background: #d8b56815; color: var(--gold); border-color: #d8b56824;}
nav :is(button,a:where([data-view])) .icon {width: 22px; font-size: 20px;}
nav .count {margin-left: auto; background: #33312b; border-radius: 5px; padding: 2px 6px; font-size: 12px;}
.sidebar-bottom {margin-top: auto; padding-top: 24px;}
.premium-mini {border: 1px solid #d8b56835; border-radius: 10px; background: linear-gradient(120deg,#30291b,#1b1e1f); padding: 18px 15px;}
.premium-mini>span {font-size: 11px; letter-spacing: 1px;}
.premium-mini p {margin: 12px 0; color: #e4dfd0; font-size: 15px;}
.premium-mini :is(button,a:where([data-view])) {padding: 9px; width: 100%; background: var(--gold); color: #191711; font-size: 12px;}
.profile {display: flex; align-items: center; gap: 10px; padding: 25px 0 0; font-size: 14px;}
.profile small {display: block; color: var(--muted); margin-top: 5px;}
.avatar {background: #303333; border: 1px solid #484b48; color: var(--gold); border-radius: 50%; display: grid; place-items: center; width: 37px; height: 37px;}
.avatar.small {width: 31px; height: 31px; font-size: 12px;}
.shell {margin-left: 244px;}
header {height: 78px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 40px; font-size: 13px; color: var(--muted);}
header>div {display: flex; align-items: center; gap: 25px;}
.top-streak {color: var(--gold);}
main {padding: 34px 40px; max-width: 1490px; margin: auto;}
.heading {display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 26px;}
.eyebrow {font-size: 11px; letter-spacing: 2px; color: var(--gold); margin-bottom: 10px;}
.heading p {margin: 0; font-size: 14px;}
select {border: 1px solid var(--line); background: var(--card); color: var(--text); padding: 11px 36px 11px 15px; border-radius: 8px;}
.stats {display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 28px;}
.stat {padding: 20px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); display: flex; align-items: center; gap: 16px;}
.stat-icon {font-size: 22px; color: var(--gold); background: #d8b56812; border: 1px solid #d8b56820; border-radius: 10px; padding: 11px;}
.stat strong {font: 800 24px Manrope; display: block;}
.stat small {display: block; color: var(--muted); margin-top: 4px;}
.layout {display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 25px;}
.hero {position: relative; overflow: hidden; min-height: 222px; padding: 30px; border: 1px solid #d8b56852; border-radius: 13px; background: linear-gradient(115deg,#2b291f,#1c201f 65%); display: flex; align-items: center; justify-content: space-between;}
.hero h2 {font-size: 27px; max-width: 380px; margin: 12px 0;}
.hero p {font-size: 14px; max-width: 400px; margin-bottom: 22px;}
.tag {display: inline-flex; gap: 7px; align-items: center; border: 1px solid #d8b56840; background: #d8b56810; color: var(--gold); font-size: 11px; letter-spacing: 1px; padding: 6px 9px; border-radius: 5px;}
.btn-gold {background: var(--gold); color: #1b1913; border-color: var(--gold);}
.hero .orbit {flex: none; width: 154px; height: 154px; border: 1px solid #d8b56838; border-radius: 50%; display: grid; place-items: center; outline: 1px solid #d8b56815; outline-offset: 16px; margin: 0 22px;}
.orbit-inner {width: 117px; height: 117px; border-radius: 50%; border: 7px solid #d8b56825; border-top-color: var(--gold); display: flex; flex-direction: column; justify-content: center; align-items: center; font: 800 32px Manrope;}
.orbit-inner small {font: 500 10px 'DM Sans'; color: var(--muted); letter-spacing: 1px; margin-top: 4px;}
.section-head {display: flex; align-items: center; justify-content: space-between; margin: 28px 0 17px;}
.section-head h2 {margin: 0;}
.text-btn {background: none; border: 0; padding: 5px 0; font-size: 13px; color: var(--gold);}
.modes {display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;}
.mode {padding: 20px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 11px;}
.mode .glyph {display: block; font-size: 24px; margin-bottom: 23px; color: var(--gold);}
.mode strong {display: block; font: 700 16px Manrope;}
.mode small {display: block; color: var(--muted); margin: 9px 0 18px; line-height: 1.6;}
.mode .meta {color: var(--gold); font-size: 12px;}
.panel {background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 23px;}
.panel h3 {font-size: 16px; margin-bottom: 18px;}
.week {display: flex; justify-content: space-between; margin: 22px 0;}
.day {font-size: 12px; color: var(--muted); text-align: center;}
.day span {width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #25292a; border: 1px solid #333839; margin-top: 9px;}
.day.done span {background: var(--gold); color: #121414; border: 0;}
.goal {display: flex; justify-content: space-between; font-size: 13px; margin: 15px 0 10px;}
.bar {height: 6px; background: #303436; border-radius: 8px; overflow: hidden;}
.bar i {display: block; height: 100%; background: var(--gold); border-radius: 8px;}
.challenge {margin-top: 19px; background: linear-gradient(135deg,#232921,#191d1c); border-color: #8bbb9c30;}
.challenge .tag {color: var(--green); border-color: #8bbb9c40; background: #8bbb9c12;}
.challenge h3 {font-size: 19px; margin-top: 18px; line-height: 1.4;}
.challenge p {font-size: 13px;}
.challenge :is(button,a:where([data-view])) {width: 100%; background: #8bbb9c17; border-color: #8bbb9c45; color: var(--green);}
.hint {font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px;}
.topic {display: flex; align-items: center; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line);}
.topic:last-child {border: 0;}
.topic .topic-icon {width: 37px; height: 37px; border-radius: 8px; background: #25292a; display: grid; place-items: center; color: var(--gold);}
.topic-info {flex: 1;}
.topic-info strong {font-size: 14px;}
.topic-info .bar {margin-top: 10px; height: 4px;}
.topic-info small {color: var(--muted); font-size: 12px;}
.topic-num {font: 600 14px Manrope; color: var(--gold);}
.step {display: flex; gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 10px; margin: 14px 0; background: var(--card);}
.step-number {width: 50px; height: 50px; flex: none; border: 1px solid #d8b56855; border-radius: 50%; display: grid; place-items: center; color: var(--gold); font: 700 18px Manrope;}
.step>div:nth-child(2) {flex: 1;}
.step h3 {margin: 0 0 5px;}
.step p {margin: 0; font-size: 14px;}
.step.locked {opacity: .65;}
.cards {display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;}
.cards .panel h3 {margin-top: 18px;}
.cards .panel :is(button,a:where([data-view])) {margin-top: 15px;}
.empty {text-align: center; padding: 50px 20px;}
.empty .glyph {font-size: 45px; color: var(--gold);}
.empty h2 {margin-top: 20px;}
.premium-layout {display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
.premium-card {padding: 32px;}
.premium-card.featured {border-color: var(--gold); background: linear-gradient(135deg,#2a291f,#191c1e);}
.price {font: 800 43px Manrope; margin: 22px 0;}
.price small {font: 400 14px 'DM Sans'; color: var(--muted);}
ul {padding: 0; list-style: none;}
li {padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px;}
li::before {content: '✓'; color: var(--gold); margin-right: 12px;}
.note {padding: 15px 18px; margin-top: 22px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--muted); line-height: 1.6;}
footer {border-top: 1px solid var(--line); padding: 22px 40px; font-size: 12px; color: #7f8788; display: flex; justify-content: space-between; gap: 20px;}
dialog {width: min(740px,calc(100% - 28px)); border: 1px solid #4c4939; border-radius: 18px; background: #181c1e; color: var(--text); padding: 32px; max-height: 90dvh;}
dialog::backdrop {background: #050708d9; backdrop-filter: blur(5px);}
.quiz-top {display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--gold); margin-bottom: 20px;}
.quiz-top :is(button,a:where([data-view])) {padding: 5px 10px;}
.quiz-title {font-size: 25px; margin: 28px 0;}
.answers {display: grid; gap: 11px;}
.answer {text-align: left; display: flex; gap: 14px; align-items: center; font-weight: 400; padding: 16px;}
.answer span {font-size: 12px; border: 1px solid #4b4f50; border-radius: 5px; padding: 5px 8px;}
.answer.selected {border-color: var(--gold); background: #d8b56816;}
.answer.correct {border-color: var(--green); background: #8bbb9c18;}
.answer.wrong {border-color: #d4827a; background: #d4827a18;}
.correction {padding: 18px; background: #242a25; border: 1px solid #8bbb9c40; border-radius: 10px; margin: 20px 0;}
.correction p {margin: 8px 0 12px; font-size: 14px;}
.correction a {font-size: 13px;}
.quiz-actions {display: flex; justify-content: flex-end; margin-top: 22px;}
.result {text-align: center; padding: 15px;}
.result-score {font: 800 65px Manrope; color: var(--gold); margin: 22px;}
.result-review {text-align: left;}
.result-review details {padding: 15px 0; border-bottom: 1px solid var(--line);}
.result-review p {font-size: 14px; margin: 12px 0;}
.result-review a {font-size: 13px;}
#toast {position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #d8b568; color: #161915; border-radius: 9px; padding: 13px 20px; z-index: 20; display: none; font-size: 14px;}
#toast.visible {display: block;}
.history-row {display: flex; justify-content: space-between; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 14px;}
@media (min-width:1450px) {main {padding-top: 42px;}.hero {min-height: 250px;}}
@media (max-width:1150px) {.sidebar {width: 210px; padding: 30px 16px;}.shell {margin-left: 210px;}main {padding: 28px 25px;}.layout {grid-template-columns: 1fr 270px;}.hero .orbit {width: 110px; height: 110px; margin: 0 5px;}.orbit-inner {width: 90px; height: 90px; font-size: 24px;}.stat {padding: 15px; gap: 10px;}.stat-icon {padding: 8px;}.hero {padding: 23px;}.modes {gap: 10px;}.mode {padding: 16px;}}
@media (max-width:950px) {.layout {grid-template-columns: 1fr;}.right {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}.challenge {margin: 0;}.stats {grid-template-columns: 1fr 1fr;}.cards {grid-template-columns: 1fr 1fr;}.sidebar .brand {font-size: 21px;}.heading h1 {font-size: 28px;}header {padding: 0 25px;}header>span {max-width: 260px;}}
@media (max-width:650px) {.sidebar {position: static; width: auto; padding: 18px; border-right: 0; border-bottom: 1px solid var(--line);}.brand {font-size: 20px;}.brandmark {width: 31px; height: 37px; font-size: 21px;}.brand small {font-size: 8px;}.nav-label,.sidebar-bottom {display: none;}nav {display: flex; overflow: auto; gap: 6px; margin-top: 16px;}nav :is(button,a:where([data-view])) {white-space: nowrap; width: auto; padding: 9px; font-size: 12px; margin: 0; gap: 6px;}nav :is(button,a:where([data-view])) .icon {font-size: 16px; width: auto;}nav .count {display: none;}.shell {margin: 0;}header {height: 53px; padding: 0 20px;}header>span {font-size: 11px; max-width: 230px;}header>div {gap: 10px;}.top-streak {font-size: 12px;}main {padding: 25px 18px;}.heading {align-items: flex-start;}.heading h1 {font-size: 26px;}.heading p {font-size: 13px;}.heading select {font-size: 12px; padding: 9px; max-width: 115px;}.stat strong {font-size: 22px;}.stat small {font-size: 11px;}.stats {gap: 10px;}.stat {padding: 13px;}.stat-icon {font-size: 17px;}.hero .orbit {display: none;}.hero h2 {font-size: 25px;}.modes,.right,.cards,.premium-layout {grid-template-columns: 1fr;}.mode {display: grid; grid-template-columns: 36px 1fr; column-gap: 10px;}.mode .glyph {grid-row: 1/4; margin: 5px 0;}.mode small {margin: 7px 0;}.mode .meta {grid-column: 2;}.hero {min-height: 220px;}.step {padding: 16px; gap: 12px; flex-wrap: wrap;}.step h3 {font-size: 16px;}.step :is(button,a:where([data-view])) {margin-left: 62px;}.section-head h2 {font-size: 18px;}footer {padding: 20px; flex-direction: column; gap: 8px;}.quiz-title {font-size: 21px;}dialog {padding: 22px;}.premium-card {padding: 24px;}}
@media (prefers-reduced-motion:no-preference) {.bar i {transition: width .4s;}.mode:hover {transform: translateY(-3px); transition: transform .2s;}dialog[open] {animation: appear .2s ease-out;}@keyframes appear { 
  from {opacity: 0; transform: translateY(12px);} 
  to {opacity: 1; transform: translateY(0);} 
}}
.sidebar {background: #080909;}
.brand {display: block; height: 150px; overflow: hidden; text-align: center;}
.brand img {display: block; width: 230px; height: 230px; max-width: none; margin: -49px auto -31px; object-fit: contain;}
.nav-label {margin: 24px 12px 14px;}
.brandmark {display: none;}
.clean-hero {min-height: 275px; padding: 38px; background: linear-gradient(110deg,#292719,#1a1d1b); border-color: #d8b56835;}
.clean-hero h2 {font-size: 32px; line-height: 1.35; max-width: 650px;}
.quiet-progress {margin-top: 24px; width: min(340px,100%); color: var(--muted); font-size: 12px;}
.quiet-progress .bar {margin-top: 10px; height: 4px;}
.daily-row {display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 25px 0; margin-top: 30px;}
.daily-row h3 {margin: 10px 0 4px;}
.daily-row p {font-size: 14px; margin: 0;}
.home-foot {display: flex; justify-content: space-between; align-items: center; gap: 15px; color: var(--muted); font-size: 13px; margin: 22px 0;}
.account-menu {position: relative; color: var(--text);}
.account-menu summary {list-style: none; cursor: pointer; border: 1px solid var(--line); background: #202426; padding: 10px 15px; border-radius: 8px; font-size: 14px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.account-menu summary::-webkit-details-marker {display: none;}
.account-menu summary:focus-visible {outline: 2px solid var(--gold);}
.account-dropdown {position: absolute; right: 0; top: 48px; z-index: 10; width: 275px; background: #1c2022; border: 1px solid #494738; border-radius: 12px; padding: 12px; box-shadow: 0 15px 45px #0007;}
.account-dropdown :is(button,a:where([data-view])),.account-dropdown a {display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 6px; padding: 12px; color: var(--text); text-decoration: none; font-size: 14px;}
.account-dropdown :is(button,a:where([data-view])):hover,.account-dropdown a:hover {background: #d8b56814;}
.account-dropdown small {display: block; color: var(--muted); line-height: 1.5; padding: 12px;}
.account-identity {word-break: break-word; padding: 12px; font-size: 13px; color: var(--gold); border-bottom: 1px solid var(--line);}
.account-identity small {padding: 8px 0 0;}
.sync-error {font-size: 13px; color: #e4a6a0; margin: 10px;}
.exam-intro {padding: 32px;}
.exam-intro h2 {font-size: 38px; margin: 24px 0;}
.exam-rules {display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; padding-bottom: 28px; margin-bottom: 25px; border-bottom: 1px solid var(--line);}
.exam-rules strong {display: block; font: 700 18px Manrope; color: var(--gold);}
.exam-rules span {display: block; font-size: 13px; color: var(--muted); margin-top: 8px;}
.exam-source {margin-top: 20px; font-size: 13px;}
.answer-instruction {font-size: 14px; color: var(--muted);}
.question-clock {font: 700 22px Manrope; color: var(--gold); background: #d8b56815; border: 1px solid #d8b56835; border-radius: 8px; padding: 9px 14px; min-width: 80px; text-align: center;}
.question-clock.urgent {color: #ed958e; background: #a8433517; border-color: #ad5c4a;}
.exam-bottom {font-size: 12px; text-align: center; color: var(--muted); margin: 18px 0 0;}
.auth-top {display: flex; align-items: flex-start; justify-content: space-between; height: 145px; overflow: hidden;}
.auth-top img {width: 210px; height: 210px; margin: -50px 0 -15px -15px; object-fit: contain;}
.auth-top :is(button,a:where([data-view])) {border: 0; background: none; padding: 5px 10px;}
.auth-tabs {display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin: 0 0 28px; padding-bottom: 12px;}
.auth-tabs :is(button,a:where([data-view])) {flex: 1; background: none; border-color: transparent;}
.auth-tabs :is(button,a:where([data-view])).active {color: var(--gold); background: #d8b56814; border-color: #d8b56835;}
#account-dialog {max-width: 480px; background: #121515; padding: 30px;}
#account-title {font-size: 26px; line-height: 1.4;}
#account-dialog p {font-size: 14px;}
.auth-continue {display: block; text-decoration: none; text-align: center; border-radius: 8px; padding: 15px; font-weight: 700; margin-top: 28px;}
.auth-caption {font-size: 12px !important; line-height: 1.6; margin: 18px 0 0;}
.auth-email {color: var(--gold); word-break: break-word;}
#signup-form {display: grid; gap: 12px; margin-top: 25px;}
#signup-form label {font-size: 14px;}
#signup-form input {font: inherit; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #202425; color: var(--text);}
#signup-form input:focus {outline: 2px solid var(--gold);}
#auth-error {color: #ed958e; margin: 0;}
.profile {padding-top: 18px;}
header>span {font-size: 12px;}
header .top-streak {display: none;}
@media (max-width:650px) {.brand {height: 90px; width: 170px; margin: auto;}.brand img {width: 160px; height: 160px; margin: -35px auto -30px;}.nav-label {display: none;}header>span {max-width: 160px;}.clean-hero {padding: 25px; min-height: 250px;}.clean-hero h2 {font-size: 26px;}.daily-row {flex-direction: column; align-items: flex-start;}.daily-row :is(button,a:where([data-view])) {width: 100%;}.account-menu summary {padding: 9px 11px; font-size: 12px; max-width: 165px;}.account-dropdown {width: 260px; right: 0;}.exam-intro {padding: 22px;}.exam-intro h2 {font-size: 31px;}.exam-rules {grid-template-columns: 1fr; gap: 16px;}.exam-rules>div {display: flex; align-items: center; gap: 12px;}.exam-rules span {margin: 0;}.question-clock {padding: 7px 10px; font-size: 18px; min-width: 70px;}.quiz-top {gap: 10px;}.quiz-top>span:first-child {font-size: 11px;}.home-foot {font-size: 12px;}#account-dialog {padding: 22px;}}
.sidebar {overflow-y: auto;}
.brand {flex: none; height: 150px;}
.brand img {margin-top: -43px;}
.sidebar-bottom {padding-top: 16px;}
.premium-link {width: 100%; border-color: #d8b56835; color: var(--gold); font-size: 14px; background: #d8b5680c;}
.sidebar-bottom>small {display: block; text-align: center; color: var(--muted); margin-top: 10px;}
nav :is(button,a:where([data-view])) {margin: 2px 0; padding: 12px;}
.nav-label {flex: none;}
@media (max-width:650px) {.brand {height: 90px;}.brand img {margin-top: -35px;}.sidebar {overflow: visible;}.sidebar-bottom {display: none;}}
.brand {height: 100px; position: relative; flex: none;}
.brand img {width: 160px; height: 160px; position: relative; left: 50%; transform: translateX(-50%); margin: -30px 0 0;}
.auth-top {height: 100px;}
.auth-top img {width: 150px; height: 150px; margin: -35px 0 0 -10px;}
.correction.is-correct strong {color: #a7d7b6;}
.correction.is-wrong {background: #321d20; border-color: #d86b754d;}
.correction.is-wrong strong {color: #f09aa3;}
.allowance {display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #d8b56840; border-radius: 12px; background: #201e18; padding: 20px 24px; margin-bottom: 24px;}
.allowance strong {display: block; font-size: 18px;}
.allowance p {font-size: 12px; margin: 9px 0 0;}
.allowance :is(button,a:where([data-view])) {flex-shrink: 0; font-size: 13px;}
.allowance-slots {display: flex; gap: 6px; margin-top: 12px; max-width: 220px;}
.allowance-slots span {height: 7px; flex: 1; background: #3b3830; border-radius: 4px;}
.allowance-slots .available {background: var(--gold);}
.premium-preview {margin-top: 24px;}
.premium-preview h3 {margin-top: 18px;}
.preview-sheet {display: grid; gap: 10px; filter: blur(4px); opacity: .3; max-width: 400px; margin: 20px 0; pointer-events: none;}
.preview-sheet i {height: 12px; background: var(--gold); border-radius: 6px;}
.preview-sheet i:nth-child(2) {width: 80%;}
.preview-sheet i:nth-child(3) {width: 60%;}
@media (max-width:800px) {.allowance {align-items: stretch; flex-direction: column; gap: 16px;}.allowance :is(button,a:where([data-view])) {width: 100%;}}
@media (max-width:650px) {.brand {height: 65px;}.brand img {width: 115px; height: 115px; margin-top: -23px;}}
.sidebar {padding-top: 18px; overflow-y: auto;}
.brand {height: 66px;}
.brand img {width: 120px; height: 120px; margin-top: -26px;}
.nav-label {margin-top: 14px;}
.auth-top {height: 72px;}
.auth-top img {width: 120px; height: 120px; margin-top: -28px;}
.mc-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px;}
.mc-toolbar label {display: flex; align-items: center; gap: 12px;}
.mc-layout {display: grid; grid-template-columns: minmax(240px,.85fr) minmax(320px,1.3fr); gap: 24px; align-items: start;}
.mc-brief h2 {margin-top: 14px;}
.mc-brief li {color: var(--muted); line-height: 1.65; margin-bottom: 14px;}
.mc-brief ul {padding-left: 20px;}
.mc-brief summary,.mc-model summary {cursor: pointer; color: var(--gold); padding: 12px 0;}
.mc-paper {background: #f5f1e6; color: #292a2b; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px #0002;}
.mc-paper-head {padding: 22px 24px; border-bottom: 2px solid #c9b879; display: flex; justify-content: space-between; gap: 12px;}
.mc-paper-head span {font-size: 10px; letter-spacing: 1px;}
.mc-paper form {padding: 24px;}
.mc-fields {display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px;}
.mc-paper label {display: block; font-size: 12px; font-weight: 700;}
.mc-paper input {display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1px solid #cfc8b9; border-radius: 5px; background: #fff9; color: #292a2b; font: inherit; color-scheme: light;}
.mc-paper textarea {display: block; width: 100%; min-height: 330px; margin-top: 12px; padding: 12px; font: 14px/28px monospace; color: #292a2b; border: 1px solid #ccc2ae; border-radius: 5px; background: repeating-linear-gradient(#fff8 0px,#fff8 27px,#cfc8b950 28px); resize: vertical; color-scheme: light;}
.mc-paper textarea:focus,.mc-paper input:focus {outline: 2px solid #b18b32; outline-offset: 2px;}
.mc-draft {color: #666 !important; font-size: 11px; margin-top: 12px;}
.mc-buttons {display: flex; gap: 10px; flex-wrap: wrap;}
.mc-feedback {margin-top: 24px; scroll-margin-top: 24px;}
.mc-feedback h2 {font-size: 40px; margin-top: 18px; color: var(--gold);}
.mc-rubric {display: grid; gap: 12px;}
.mc-rubric>div {border-bottom: 1px solid var(--line); padding-bottom: 12px;}
.mc-rubric strong {display: flex; justify-content: space-between; gap: 15px;}
.mc-rubric strong span {color: var(--gold); white-space: nowrap;}
.mc-rubric p {font-size: 13px; margin: 6px 0 0;}
.mc-model pre {white-space: pre-wrap; font: 14px/1.8 inherit; color: var(--text); background: #ffffff05; padding: 18px; border-radius: 8px;}
.mc-disclaimer {font-size: 12px; margin-top: 18px;}
.mc-home {margin-top: 24px;}
@media (max-width:1050px) {.mc-layout {grid-template-columns: 1fr;}.mc-toolbar {align-items: flex-start; flex-direction: column;}}
@media (max-width:650px) {.brand {height: 55px;}.brand img {width: 100px; height: 100px; margin-top: -22px;}.mc-toolbar label {flex-direction: column; align-items: flex-start; width: 100%;}.mc-toolbar select {max-width: 100%; width: 100%;}.mc-fields {grid-template-columns: 1fr;}.mc-paper-head {flex-direction: column;}.mc-paper form {padding: 18px;}.mc-buttons :is(button,a:where([data-view])) {width: 100%;}}
.home-grid {display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px;}
.home-feature {position: relative; overflow: hidden; border: 1px solid #d8b56840; border-radius: 14px; padding: 32px; background: radial-gradient(ellipse at 100% 100%,#6d562c50,transparent 65%),#1d1d19;}
.home-feature h2 {font-size: 38px; line-height: 1.18; margin: 24px 0 16px; letter-spacing: -1.5px;}
.home-feature p {max-width: 420px;}
.home-feature .quiet-progress {max-width: 310px;}
.feature-mark {position: absolute; right: -10px; bottom: -70px; font: 700 280px Manrope,sans-serif; color: #d8b56809; pointer-events: none;}
.routine-card h2 {margin-top: 20px; line-height: 1.4;}
.routine-card>:is(button,a:where([data-view])) {display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px 10px; text-align: left; margin-top: 10px; background: #ffffff03; font-size: 13px;}
.routine-card>:is(button,a:where([data-view]))>span {border: 1px solid #d8b56850; border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; color: var(--gold); flex-shrink: 0;}
.routine-card small {margin-left: auto; color: var(--muted); white-space: nowrap;}
.activity-grid {display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;}
.activity-tile {text-align: left; padding: 24px; border-radius: 12px; background: var(--card); display: flex; flex-direction: column; align-items: flex-start; min-height: 220px; transition: transform .15s,border-color .15s;}
.activity-tile:hover {transform: translateY(-3px);}
.activity-icon {font-size: 28px; color: var(--gold); margin-bottom: 20px;}
.activity-tile strong {font-size: 18px;}
.activity-tile p {font-weight: 400; font-size: 13px; margin: 10px 0 22px;}
.activity-meta {font-size: 11px; font-weight: 400; color: var(--gold); margin-top: auto; display: flex; justify-content: space-between; width: 100%; gap: 8px;}
.home-lower {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0;}
.home-lower h3 {margin-top: 16px;}
.activity-toolbar {display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;}
.activity-toolbar>span {font-size: 13px; color: var(--muted);}
.activity-tabs {display: flex; gap: 8px;}
.activity-tabs .active {color: var(--gold); border-color: var(--gold);}
.memo-card {max-width: 780px; margin: 0 auto; padding: 40px; text-align: center; border: 1px solid #d8b56860; border-radius: 18px; background: linear-gradient(140deg,#28251b,#181b1c); min-height: 400px;}
.memo-card h2 {font-size: 24px; line-height: 1.5; margin: 25px 0;}
.memo-hidden {padding: 15px;}
.memo-hidden>span {font-size: 60px; color: #d8b56855;}
.memo-hidden p {font-size: 14px;}
.memo-answer {text-align: left; background: #ffffff04; padding: 24px; border-radius: 10px; margin: 24px 0;}
.memo-answer strong {color: var(--gold); line-height: 1.5;}
.memo-answer p {font-size: 14px; margin: 14px 0;}
.memo-answer a {font-size: 12px;}
.memo-actions {display: flex; justify-content: center; gap: 12px;}
.activity-note {font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 22px;}
.case-layout {display: grid; grid-template-columns: .8fr 1.3fr; gap: 22px; align-items: start;}
.case-brief h2 {margin-top: 18px;}
.case-events {list-style: none; padding: 0; display: grid; gap: 12px;}
.case-events li {display: flex; align-items: center; gap: 12px; background: #ffffff03; border: 1px solid var(--line); border-radius: 8px; padding: 15px;}
.case-events p {margin: 0; font-size: 13px; flex: 1;}
.case-number {color: var(--gold); font-weight: 700;}
.case-events li>div {display: flex; flex-direction: column; gap: 4px;}
.case-events :is(button,a:where([data-view])) {padding: 4px 9px;}
.case-events .case-right {border-color: #8bbb9c80;}
.case-events .case-wrong {border-color: #d86b7580;}
.case-feedback {margin-top: 20px;}
.case-feedback>strong {color: var(--gold); font-size: 20px;}
.case-feedback pre {white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.8; background: #ffffff04; padding: 16px;}
.case-feedback :is(button,a:where([data-view])) {margin: 5px 5px 0 0;}
.sidebar nav :is(button,a:where([data-view])) {padding: 10px 12px; font-size: 13px;}
@media (max-width:1100px) {.home-grid {grid-template-columns: 1fr;}.activity-grid {grid-template-columns: repeat(2,1fr);}.case-layout {grid-template-columns: 1fr;}}
@media (max-width:650px) {.home-feature {padding: 24px;}.home-feature h2 {font-size: 30px;}.activity-grid,.home-lower {grid-template-columns: 1fr;}.activity-tile {min-height: 185px;}.memo-card {padding: 24px;}.memo-card h2 {font-size: 20px;}.activity-tabs {width: 100%;}.activity-tabs :is(button,a:where([data-view])) {flex: 1; font-size: 12px;}.case-events li {padding: 10px;}.activity-toolbar label {display: flex; flex-direction: column; gap: 10px; width: 100%;}.activity-toolbar select {max-width: 100%;}.routine-card small {display: none;}}
.programme-source {font-size: 12px; margin: 0 0 24px; line-height: 1.8;}
.programme-part {margin: 28px 0 38px;}
.programme-part .section-head {align-items: flex-start; gap: 16px;}
.programme-part .section-head h2 {font-size: 20px; line-height: 1.4; margin: 0;}
.part-number {display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d8b56850; border-radius: 6px; color: var(--gold); font-size: 13px; margin-right: 8px;}
.programme-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px;}
.programme-topic {display: flex; flex-direction: column; align-items: flex-start; min-height: 205px; padding: 22px;}
.programme-topic h3 {font-size: 16px; line-height: 1.5; margin-top: 12px;}
.programme-topic p {font-size: 12px;}
.programme-topic :is(button,a:where([data-view])) {margin-top: auto; font-size: 12px;}
.programme-topic .quiet-progress {width: 100%; margin: 0 0 20px; font-size: 11px;}
.programme-search {display: block; margin: 24px 0; font-size: 12px; color: var(--muted);}
.programme-search input {display: block; width: 100%; margin-top: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit;}
.programme-search input:focus {outline: 2px solid var(--gold); outline-offset: 2px;}
.exam-outline {border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px;}
.exam-outline ul {display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; padding-left: 20px; color: var(--muted); font-size: 13px; line-height: 1.6;}
.exam-other {margin: 20px 0;}
.exam-other summary {cursor: pointer; color: var(--gold);}
.exam-other p {font-size: 13px; margin-top: 16px;}
@media (max-width:1100px) {.programme-grid {grid-template-columns: repeat(2,minmax(0,1fr));}}
@media (max-width:650px) {.programme-grid {grid-template-columns: 1fr;}.programme-topic {min-height: 175px;}.exam-outline ul {grid-template-columns: 1fr;}.programme-part .section-head {flex-direction: column;}.programme-part .section-head h2 {font-size: 18px;}}
.question-source-scope {font-size: .78rem; line-height: 1.65; opacity: .8; overflow-wrap: anywhere;}
.correction a,.result-review a {overflow-wrap: anywhere;}
#online-auth-form,#online-reset-form,#online-delete-form {display: grid; gap: 12px;}
#online-auth-form input:not([type=checkbox]),#online-reset-form input,#online-delete-form input,#online-reply {width: 100%; min-height: 46px; padding: 12px; border: 1px solid #39404a; background: #12171d; color: #fff; border-radius: 10px;}
.online-consent {display: flex; gap: 10px; align-items: flex-start; margin: 14px 0;}
.online-consent input {width: 20px; min-width: 20px; margin-top: 2px;}
.online-honeypot {position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;}
#online-auth-error {color: #ff9f9f;}
.online-checkout-actions {display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 16px;}
.online-checkout-actions .online-sale-terms {font-size: 14px; font-weight: 400; line-height: 1.5; padding: 6px 0; min-height: 36px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;}
.online-checkout-actions .online-sale-terms:hover {color: var(--gold); background: transparent;}
.account-menu summary {display: flex; align-items: center; gap: 9px; min-height: 44px;}
.account-label-text {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.account-chevron {display: block; flex: none; width: 14px; height: 14px;}
.account-menu[open] .account-chevron {transform: rotate(180deg);}
.quiz-top {justify-content: flex-start; gap: 10px; flex-wrap: wrap;}
.quiz-top>span:first-child {margin-right: auto;}
.quiz-top #close-quiz {width: 44px; min-width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 0;}
.quiz-top .report-inline {min-height: 44px;}
.skip-link {position: fixed; left: 16px; top: 12px; z-index: 200; padding: 12px 18px; background: var(--gold); color: #10151d; border-radius: 8px; transform: translateY(-160%);}
.skip-link:focus {transform: none;}
#app:focus {outline: none;}
body:focus-within:has(main textarea:focus) .report-fab,body:focus-within:has(main input:focus) .report-fab {visibility: hidden;}
@media (max-width:800px) {main {padding-bottom: 78px;}}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important;}}
html.modal-scroll-locked {overflow: hidden; overscroll-behavior: none;}
dialog {overflow-y: auto; overscroll-behavior: contain;}
@media print {html.modal-scroll-locked {overflow: visible;}html.modal-scroll-locked body {position: static !important; top: auto !important; left: auto !important; right: auto !important; overflow: visible !important; padding-right: 0 !important;}}
#account-content #online-auth-form .online-consent {display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 10px; margin: 8px 0 12px; line-height: 1.5; cursor: pointer;}
#account-content #online-auth-form .online-consent input[type=checkbox] {width: 20px; min-width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0; align-self: center; accent-color: var(--gold);}
#account-content #online-auth-form .online-consent span {min-width: 0;}
#account-content #online-auth-form #auth-privacy-link {justify-self: center; min-height: 44px; margin: 4px 0 0; padding: 8px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px;}
#account-content #online-auth-form #auth-privacy-link:hover {color: var(--gold);}
#account-content #online-auth-form #auth-privacy-link:focus-visible {outline: 2px solid var(--gold); outline-offset: 3px;}
#account-content #online-auth-form #online-auth-error:empty {display: none;}