:root {
  --primary: #147a69;
  --primary-dark: #0d5f52;
  --primary-soft: #e7f4f1;
  --secondary: #f7a928;
  --text: #14211f;
  --muted: #687572;
  --line: #dfe8e5;
  --surface: #ffffff;
  --surface-soft: #f6faf9;
  --dark: #0c2d29;
  --shadow: 0 24px 60px rgba(16, 80, 70, .12);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; width: 100%; max-width: 100%; overflow-x: hidden; }
body { margin: 0; width: 100%; max-width: 100%; font-family: 'Manrope', sans-serif; color: var(--text); background: #fff; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.home-page { position: relative; width: 100%; max-width: 100%; }
@supports (overflow: clip) {
  .home-page { overflow-x: clip; }
}
.home-page .container { width: min(1360px, calc(100% - 64px)); }
.section { padding: 96px 0; position: relative; }
.section-soft { background: var(--surface-soft); }
.page-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: -1; }
.page-glow-one { width: 520px; height: 520px; right: -220px; top: 100px; background: radial-gradient(circle, rgba(31, 171, 148, .15), transparent 70%); }
.page-glow-two { width: 420px; height: 420px; left: -200px; top: 650px; background: radial-gradient(circle, rgba(247,169,40,.12), transparent 70%); }

.site-header { height: 82px; display: flex; align-items: center; border-bottom: 1px solid rgba(223,232,229,.7); background: rgba(255,255,255,.88); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 100; }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.logo { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 22px; }
.logo-mark { width: 43px; height: 43px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 25px; background: linear-gradient(145deg, var(--primary), #24a98f); box-shadow: 0 10px 25px rgba(20,122,105,.22); }
.logo-text span { color: var(--primary); }
.main-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.main-nav a, .text-link { font-size: 14px; font-weight: 700; color: #43514e; transition: .2s; }
.main-nav a:hover, .text-link:hover { color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.mobile-nav-actions { display: none; }
.mobile-menu-button { display: none; border: 0; background: transparent; font-size: 30px; color: var(--text); cursor: pointer; }

.button { border: 0; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--primary); color: #fff; font-weight: 800; padding: 14px 22px; box-shadow: 0 12px 26px rgba(20,122,105,.18); transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); background: var(--primary-dark); box-shadow: 0 16px 32px rgba(20,122,105,.24); }
.button-small { padding: 11px 18px; border-radius: 11px; font-size: 13px; }
.button-large { padding: 17px 24px; }
.button-secondary { background: #fff; color: var(--text); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(17,42,37,.07); }
.button-secondary:hover { background: var(--surface-soft); color: var(--primary); }
.button-light { background: #fff; color: var(--primary-dark); box-shadow: 0 14px 30px rgba(0,0,0,.16); }
.button-light:hover { background: #f1fffc; color: var(--primary-dark); }

.hero { padding-top: 76px; padding-bottom: 88px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; }
.home-page .hero-grid { grid-template-columns:minmax(460px, 610px) minmax(440px, 540px); justify-content:center; gap:88px; }
.home-page .hero-preview { justify-self:center; width:100%; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.hero h1 { font-size: clamp(42px, 5.4vw, 68px); line-height: 1.04; margin: 24px 0; letter-spacing: -.045em; }
.hero h1 span { color: var(--primary); }
.hero-text { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0; }
.hero-actions { display: flex; gap: 14px; margin: 34px 0 36px; flex-wrap: wrap; }
.trust-row { display: flex; align-items: center; gap: 22px; }
.trust-item { display: flex; flex-direction: column; }
.trust-item strong { font-size: 17px; }
.trust-item span { color: var(--muted); font-size: 12px; }
.trust-divider { width: 1px; height: 34px; background: var(--line); }

.hero-preview { background: #fff; border-radius: 26px; box-shadow: var(--shadow); border: 1px solid rgba(222,233,229,.8); overflow: hidden; transform: rotate(1deg); }
.preview-topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 17px; }
.preview-topbar > div:first-child { display: flex; flex-direction: column; }
.preview-label { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }
.preview-topbar strong { font-size: 15px; }
.question-count { background: var(--surface-soft); border-radius: 10px; padding: 8px 10px; color: var(--primary); font-weight: 800; font-size: 12px; }
.progress-track { height: 5px; background: #edf2f1; }
.progress-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #45baa6); }
.question-visual { padding: 20px 20px 0; }
.road-scene { height: 220px; overflow: hidden; position: relative; border-radius: 18px; background: #b9e1ee; }
.sky { position: absolute; inset: 0; background: linear-gradient(#acdbe9 0 47%, #91c779 47%); }
.road { position: absolute; background: #566163; }
.road-main { width: 150%; height: 135px; left: -25%; bottom: -48px; transform: rotate(-5deg); }
.road-side { width: 170px; height: 140%; right: 13%; top: 14%; transform: rotate(45deg); }
.grass { position: absolute; bottom: 0; width: 50%; height: 36%; background: #79b565; }
.grass-left { left: 0; clip-path: polygon(0 0, 85% 30%, 100% 100%, 0 100%); }
.grass-right { right: 0; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.road-line { position: absolute; width: 7px; height: 44px; background: #f4e7b0; transform: rotate(85deg); bottom: 32px; border-radius: 2px; }
.line-one { left: 26%; }.line-two { left: 47%; bottom: 21px; }.line-three { left: 69%; bottom: 10px; }
.sign-post { position: absolute; right: 22%; top: 32px; width: 45px; height: 45px; border-radius: 50%; background: #fff; border: 6px solid #df4040; display:flex; align-items:center; justify-content:center; font-weight: 800; box-shadow: 0 4px 8px rgba(0,0,0,.15); }
.sign-post:after { content:""; width: 5px; height: 56px; background: #686f70; position: absolute; top: 39px; z-index: -1; }
.car { position: absolute; color: #fff; font-size: 52px; line-height: 1; text-shadow: 0 4px 7px rgba(0,0,0,.2); }
.car-blue { left: 23%; bottom: 42px; color: #2b6eb8; transform: rotate(6deg); }
.car-orange { right: 17%; bottom: 68px; color: #e58a2f; transform: rotate(-38deg) scale(.8); }
.question-body { padding: 21px 24px 25px; }
.question-body h3 { font-size: 17px; line-height: 1.4; margin: 0 0 17px; }
.answer-list { display: grid; gap: 10px; }
.answer-button { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-align: left; color: #3d4a47; cursor: pointer; transition: .18s; }
.answer-button span { width: 29px; height: 29px; border-radius: 9px; display:inline-flex; align-items:center; justify-content:center; background: #eef4f2; font-weight: 800; color: var(--primary); }
.answer-button:hover, .answer-button.selected { border-color: var(--primary); background: #f2fbf8; color: var(--primary-dark); }
.answer-button.selected span { background: var(--primary); color: #fff; }
.answer-button.is-correct { border-color:#1b947e; background:#ecfaf6; color:#0f6f5f; }
.answer-button.is-wrong { border-color:#dc6f6f; background:#fff1f1; color:#9d3434; }
.demo-question-image { width:100%; height:230px; object-fit:contain; object-position:center; border-radius:14px; border:1px solid var(--line); display:block; padding:10px; background:linear-gradient(135deg,#fbfdfc,#f4faf8); }
.next-button { margin-top: 15px; width: 100%; border: 0; border-radius: 12px; padding: 13px; background: var(--primary); color: #fff; font-weight: 800; cursor: pointer; }
.next-button:disabled { opacity: .38; cursor: not-allowed; }

.logo-strip { background: #fbfdfc; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-strip-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; color: #4d5a57; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.logo-strip-inner > span { color: var(--muted); font-weight: 600; }
.logo-strip-inner div { display: flex; align-items: center; gap: 7px; }
.logo-strip-inner i { color: var(--primary); font-size: 19px; }

.section-heading { margin-bottom: 44px; }
.section-heading.centered { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-heading h2, .dashboard-copy h2, .cta-inner h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.12; letter-spacing: -.035em; margin: 17px 0 14px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 17px; }
.split-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.split-heading h2 { margin-bottom: 0; }
.text-button { color: var(--primary); font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; min-height: 325px; transition: transform .22s, box-shadow .22s, border-color .22s; }
.feature-card:hover { transform: translateY(-6px); border-color: #bad8d1; box-shadow: 0 18px 40px rgba(32,93,81,.1); }
.feature-card-primary { background: linear-gradient(145deg, #0f7c69, #0b6457); color: #fff; border-color: transparent; box-shadow: 0 20px 45px rgba(15,124,105,.2); }
.feature-icon { width: 58px; height: 58px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); display:flex; align-items:center; justify-content:center; font-size: 30px; margin-bottom: 42px; }
.feature-card-primary .feature-icon { background: rgba(255,255,255,.16); color: #fff; }
.feature-tag { display: inline-block; background: rgba(255,255,255,.16); border-radius: 999px; padding: 5px 9px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.feature-tag.light { background: var(--primary-soft); color: var(--primary); }
.feature-card h3 { font-size: 22px; margin: 12px 0 9px; }
.feature-card p { margin: 0 0 23px; color: var(--muted); font-size: 14px; }
.feature-card-primary p { color: rgba(255,255,255,.75); }
.feature-card a { margin-top: auto; font-weight: 800; color: var(--primary); display: inline-flex; align-items:center; gap:4px; }
.feature-card-primary a { color: #fff; }

.category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.category-card { display: grid; grid-template-columns: auto 1fr 110px 46px; align-items: center; gap: 18px; border: 1px solid var(--line); border-radius: 17px; padding: 18px; background: #fff; transition: .2s; }
.category-card:hover { border-color: #b7d8d1; box-shadow: 0 12px 28px rgba(32,93,81,.08); transform: translateY(-2px); }
.category-icon { width: 49px; height: 49px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size: 25px; }
.category-icon.has-image { overflow: hidden; padding: 0; background: #eef8f5; color: inherit; }
.category-icon.has-image img { width: 100%; height: 100%; display: block; object-fit: contain; padding: 5px; }
.orange { color: #c97910; background: #fff3df; }.blue { color:#3373bf; background:#eaf3ff; }.purple { color:#7b58bd; background:#f1ebff; }.green { color:#24835c; background:#e6f7ef; }.red { color:#c65454; background:#ffebeb; }.cyan { color:#21828e; background:#e6f7f9; }
.category-card h3 { margin: 0 0 2px; font-size: 15px; }
.category-card p { margin: 0; color: var(--muted); font-size: 11px; }
.category-progress { width: 100%; height: 7px; border-radius: 99px; background: #edf2f0; overflow: hidden; }
.category-progress b { display:block; height:100%; background: var(--primary); border-radius:inherit; }
.category-card > strong { color: var(--primary); font-size: 12px; text-align:right; }

.dashboard-section { background: linear-gradient(140deg, #0c3c35, #0b685a); color: #fff; overflow: hidden; }
.dashboard-section:after { content:""; position:absolute; width:560px; height:560px; border:1px solid rgba(255,255,255,.08); border-radius:50%; right:-160px; top:-170px; box-shadow: 0 0 0 70px rgba(255,255,255,.02), 0 0 0 140px rgba(255,255,255,.015); }
.dashboard-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 85px; align-items: center; position:relative; z-index:1; }
.light-eyebrow { background: rgba(255,255,255,.12); color: #bff1e7; }
.dashboard-copy p { color: rgba(255,255,255,.7); font-size: 16px; max-width: 560px; }
.benefit-list { display: grid; gap: 18px; margin: 31px 0 34px; }
.benefit-list > div { display:flex; gap:13px; align-items:flex-start; }
.benefit-list i { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; color:#c9fff5; font-size:18px; flex:0 0 auto; }
.benefit-list span { display:flex; flex-direction:column; }
.benefit-list strong { font-size:14px; }
.benefit-list small { color:rgba(255,255,255,.6); }
.dashboard-card { background:#fff; color:var(--text); border-radius:24px; padding:27px; box-shadow:0 26px 65px rgba(0,0,0,.24); transform:rotate(-1deg); }
.dashboard-card-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:18px; }
.dashboard-card-header span { color:var(--muted); font-size:11px; }
.dashboard-card-header h3 { margin:2px 0 0; font-size:18px; }
.avatar { width:43px; height:43px; border-radius:14px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:800; }
.score-box { display:flex; align-items:center; gap:22px; padding:25px 0; }
.score-ring { width:104px; height:104px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:conic-gradient(var(--primary) 0 74%, #e7efed 74%); position:relative; }
.score-ring:after { content:""; position:absolute; inset:10px; background:#fff; border-radius:50%; }
.score-ring span { position:relative; z-index:1; font-size:28px; font-weight:800; }
.score-ring small { font-size:13px; }
.score-box > div:last-child { display:flex; flex-direction:column; }
.score-box span { color:var(--muted); font-size:11px; }
.score-box h4 { margin:2px 0; font-size:17px; }
.score-box p { margin:0; color:var(--primary); font-size:12px; font-weight:700; }
.mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mini-stats > div { border:1px solid var(--line); border-radius:13px; padding:14px; display:flex; gap:11px; align-items:center; }
.mini-stats i { font-size:24px; color:var(--primary); }
.mini-stats > div:last-child i { color:#d05b5b; }
.mini-stats span { display:flex; flex-direction:column; }
.mini-stats strong { font-size:16px; }
.mini-stats small { color:var(--muted); font-size:9px; }
.weak-topics { margin-top:22px; }
.weak-title { display:flex; align-items:center; justify-content:space-between; font-size:12px; margin-bottom:12px; }
.weak-title a { color:var(--primary); font-size:10px; font-weight:800; }
.weak-row { display:grid; grid-template-columns:135px 1fr 32px; gap:10px; align-items:center; font-size:10px; margin-top:11px; }
.weak-row div { height:6px; background:#edf2f1; border-radius:10px; overflow:hidden; }
.weak-row div b { display:block; height:100%; background:var(--secondary); border-radius:inherit; }
.weak-row strong { color:#ad7519; text-align:right; }

.pricing-wrap { max-width:900px; }
.pricing-card { position:relative; border:1px solid #bdddd6; border-radius:26px; padding:39px; background:linear-gradient(180deg,#fff,#f8fcfb); box-shadow:var(--shadow); }
.pricing-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--secondary); color:#513304; border-radius:99px; padding:7px 14px; font-size:11px; font-weight:800; text-transform:uppercase; }
.pricing-main { display:flex; justify-content:space-between; gap:30px; align-items:center; padding-bottom:28px; border-bottom:1px solid var(--line); }
.pricing-label { color:var(--primary); font-weight:800; font-size:12px; text-transform:uppercase; }
.pricing-main h3 { margin:8px 0; font-size:27px; }
.pricing-main p { color:var(--muted); margin:0; max-width:580px; font-size:14px; }
.price { display:grid; grid-template-columns:auto auto auto; align-items:start; font-size:54px; line-height:1; font-weight:800; color:var(--primary); white-space:nowrap; }
.price > span { font-size:24px; padding-top:7px; }.price small { font-size:21px; padding-top:6px; }.price em { grid-column:1/4; text-align:right; color:var(--muted); font-size:10px; font-style:normal; margin-top:5px; }
.pricing-features { display:grid; grid-template-columns:1fr 1fr; gap:15px 30px; margin:27px 0; font-size:13px; font-weight:700; }
.pricing-features div { display:flex; gap:9px; align-items:center; }
.pricing-features i { width:22px; height:22px; border-radius:50%; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; }
.pricing-button { width:100%; }
.pricing-note { display:block; text-align:center; color:var(--muted); margin-top:12px; font-size:10px; }

.cta-section { padding:72px 0; background:var(--primary); color:#fff; }
.cta-inner { display:flex; justify-content:space-between; align-items:center; gap:50px; }
.cta-inner h2 { margin-bottom:10px; }
.cta-inner p { margin:0; color:rgba(255,255,255,.72); max-width:650px; }

.site-footer { background:#071f1c; color:#fff; padding-top:70px; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:55px; padding-bottom:55px; }
.footer-logo { margin-bottom:18px; }
.footer-brand p { color:rgba(255,255,255,.56); max-width:320px; font-size:13px; }
.footer-grid h4 { margin:6px 0 18px; font-size:14px; }
.footer-grid > div:not(:first-child) { display:flex; flex-direction:column; align-items:flex-start; }
.footer-grid > div:not(:first-child) a { color:rgba(255,255,255,.57); font-size:12px; margin-bottom:10px; transition:.2s; }
.footer-grid > div:not(:first-child) a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.09); min-height:72px; display:flex; align-items:center; justify-content:space-between; color:rgba(255,255,255,.42); font-size:11px; }
.footer-bottom div { display:flex; gap:22px; }
.content-hero { padding-top:72px; }
.content-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:42px; align-items:center; }
.content-hero h1 { max-width:780px; margin:16px 0 14px; font-size:clamp(38px,6vw,66px); line-height:1; letter-spacing:-1.4px; }
.content-hero p { max-width:720px; margin:0; color:var(--muted); font-size:18px; line-height:1.65; }
.content-hero-card { min-height:300px; padding:28px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--line); border-radius:26px; background:linear-gradient(145deg,#fff,#f4fbf9); box-shadow:var(--shadow); }
.content-hero-card > span { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:var(--primary); color:#fff; font-size:34px; margin-bottom:auto; }
.content-hero-card strong { display:block; margin-top:34px; font-size:24px; }
.content-hero-card p { margin-top:8px; font-size:13px; line-height:1.55; }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:24px; align-items:start; }
.content-main { display:grid; gap:16px; }
.content-block { padding:24px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 16px 40px rgba(12,50,44,.06); }
.content-block h2 { margin:0 0 10px; font-size:24px; letter-spacing:-.3px; }
.content-block p { margin:0; color:var(--muted); line-height:1.75; }
.related-link-grid { margin-top:18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.related-link-card { min-height:118px; padding:16px; display:grid; gap:7px; align-content:start; border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); color:var(--text); transition:.18s ease; }
.related-link-card:hover { transform:translateY(-2px); border-color:rgba(20,122,105,.28); background:#fff; box-shadow:0 14px 30px rgba(12,50,44,.08); }
.related-link-card span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--primary-soft); color:var(--primary); font-size:21px; }
.related-link-card strong { font-size:15px; line-height:1.3; }
.related-link-card small { color:var(--muted); line-height:1.55; }
.seo-faq-list { display:grid; gap:10px; margin-top:14px; }
.seo-faq-list details { border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); overflow:hidden; }
.seo-faq-list summary { min-height:52px; padding:15px 46px 15px 16px; display:flex; align-items:center; position:relative; cursor:pointer; color:var(--text); font-weight:900; list-style:none; }
.seo-faq-list summary::-webkit-details-marker { display:none; }
.seo-faq-list summary::after { content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:#fff; color:var(--primary); border:1px solid var(--line); }
.seo-faq-list details[open] summary::after { content:"-"; }
.seo-faq-list details p { padding:0 16px 16px; }
.faq-list { counter-reset:faq; }
.faq-item { position:relative; padding-left:76px; }
.faq-item::before { counter-increment:faq; content:counter(faq); position:absolute; left:24px; top:24px; width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background:var(--primary-soft); color:var(--primary); font-size:13px; font-weight:900; }
.content-message { display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:#fff; font-size:13px; font-weight:800; box-shadow:0 12px 30px rgba(12,50,44,.05); }
.content-message.success { color:var(--primary); background:#eef8f5; }
.content-side { position:sticky; top:104px; padding:20px; display:grid; gap:9px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 16px 40px rgba(12,50,44,.06); }
.content-side h3 { margin:0 0 8px; font-size:18px; }
.content-side a { min-height:42px; padding:0 12px; display:flex; align-items:center; gap:9px; border-radius:12px; color:#40504c; font-weight:800; }
.content-side a:hover { background:var(--primary-soft); color:var(--primary); }
.contact-form-card { padding:28px; }
.contact-form-heading { display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; }
.contact-form-heading > span { width:52px; height:52px; flex:0 0 auto; display:grid; place-items:center; border-radius:16px; background:var(--primary); color:#fff; font-size:25px; box-shadow:0 14px 28px rgba(20,122,105,.18); }
.contact-form-heading h2 { margin:0 0 6px; }
.contact-form-heading p { margin:0; color:var(--muted); line-height:1.6; }
.contact-form { display:grid; gap:15px; }
.contact-form label { display:grid; gap:8px; color:var(--text); font-size:11px; font-weight:900; }
.contact-form input, .contact-form textarea { width:100%; border:1px solid var(--line); border-radius:15px; padding:14px 15px; background:#fbfdfc; color:var(--text); font:inherit; font-size:14px; outline:0; transition:.18s; }
.contact-form textarea { min-height:160px; resize:vertical; line-height:1.6; }
.contact-form input:focus, .contact-form textarea:focus { border-color:rgba(20,122,105,.55); background:#fff; box-shadow:0 0 0 4px rgba(20,122,105,.08); }
.contact-form small { color:#c85f3d; font-size:11px; }
.hidden-field { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; }
.content-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.content-info-card { min-height:210px; padding:22px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 16px 40px rgba(12,50,44,.06); }
.content-info-card span { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--primary-soft); color:var(--primary); font-size:25px; }
.content-info-card h3 { margin:18px 0 8px; font-size:20px; }
.content-info-card p { margin:0; color:var(--muted); line-height:1.6; }
.legal-download-card { padding:28px; display:flex; justify-content:space-between; gap:24px; align-items:center; border:1px solid var(--line); border-radius:24px; background:#fff; box-shadow:0 18px 48px rgba(12,50,44,.07); }
.legal-download-card h2 { margin:8px 0; }
.legal-download-card p { margin:0; color:var(--muted); }
.terms a { color:var(--primary); font-weight:900; text-decoration:underline; text-underline-offset:3px; }

/* Public practice entry polish */
.category-card { grid-template-columns:auto minmax(0,1fr) 42px!important; width:100%; color:var(--text); text-align:left; cursor:pointer; font:inherit; }
button.category-card { appearance:none; }
.category-card p { margin-top:4px; font-size:12px; line-height:1.4; }
.category-arrow { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--primary-soft); color:var(--primary); font-size:19px; transition:.18s ease; }
.category-card:hover .category-arrow { background:var(--primary); color:#fff; }
.traffic-demo-public-section { padding-top:0; }
.traffic-demo-public-shell { display:grid; grid-template-columns:minmax(360px,.64fr) minmax(0,1fr); gap:24px; align-items:stretch; }
.traffic-demo-public-copy { padding:30px; border:1px solid var(--line); border-radius:26px; background:linear-gradient(145deg,#fff,#f4fbf9); box-shadow:0 18px 48px rgba(12,50,44,.06); }
.traffic-demo-public-copy h2 { max-width:520px; margin:14px 0 10px; font-size:clamp(28px,2.65vw,40px); line-height:1.12; overflow-wrap:break-word; }
.traffic-demo-public-copy p { margin:0; color:var(--muted); font-size:15px; line-height:1.7; }
.traffic-demo-public-card { padding:22px; border:1px solid #cfe4df; border-radius:26px; background:#fff; box-shadow:0 22px 60px rgba(12,50,44,.08); }
.traffic-demo-public-top { display:grid; grid-template-columns:auto minmax(120px,1fr); gap:14px; align-items:center; margin-bottom:18px; }
.traffic-demo-public-top span { color:var(--primary); font-size:12px; font-weight:900; text-transform:uppercase; }
.traffic-demo-public-top div { height:8px; border-radius:999px; background:#edf3f1; overflow:hidden; }
.traffic-demo-public-top b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#5ac8b8); transition:width .2s ease; }
.traffic-demo-public-question { display:grid; grid-template-columns:190px minmax(0,1fr); gap:20px; align-items:start; }
.traffic-demo-public-visual { min-height:170px; display:grid; place-items:center; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#f8fcfb,#eef8f5); overflow:hidden; }
.traffic-demo-public-visual img { width:100%; height:170px; object-fit:contain; padding:14px; }
.traffic-demo-public-visual i { width:68px; height:68px; display:grid; place-items:center; border-radius:22px; background:var(--primary-soft); color:var(--primary); font-size:34px; }
.traffic-demo-public-question h3 { margin:0 0 14px; font-size:22px; line-height:1.35; }
.traffic-demo-public-options { display:grid; gap:10px; }
.traffic-demo-option { min-height:54px; padding:12px 14px; display:grid; grid-template-columns:32px minmax(0,1fr); gap:11px; align-items:center; border:1px solid var(--line); border-radius:15px; background:#fff; color:var(--text); text-align:left; cursor:pointer; font:inherit; font-size:13px; font-weight:800; transition:.16s ease; }
.traffic-demo-option:hover:not(:disabled) { border-color:rgba(20,122,105,.34); background:#f4fbf9; }
.traffic-demo-option span { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; background:#eef5f3; color:var(--primary); font-weight:900; }
.traffic-demo-option.is-correct { border-color:#9ed8cb; background:#edf9f5; }
.traffic-demo-option.is-correct span { background:var(--primary); color:#fff; }
.traffic-demo-option.selected-wrong { border-color:#e2a0a0; background:#fff3f3; }
.traffic-demo-option.selected-wrong span { background:#c65454; color:#fff; }
.traffic-demo-public-feedback { margin-top:12px; padding:13px 14px; border-radius:15px; font-size:13px; line-height:1.55; }
.traffic-demo-public-feedback strong { display:block; margin-bottom:3px; }
.traffic-demo-public-feedback.is-correct { color:#166f61; background:#edf9f5; }
.traffic-demo-public-feedback.is-wrong { color:#8c3f3f; background:#fff3f3; }
.traffic-demo-public-actions { display:flex; justify-content:space-between; gap:12px; margin-top:20px; }
.traffic-demo-public-actions .button:disabled { cursor:not-allowed; opacity:.55; box-shadow:none; }

@media (max-width: 980px) {
  .main-nav { position:absolute; top:82px; left:20px; right:20px; margin:0; padding:18px; border:1px solid var(--line); background:#fff; border-radius:16px; box-shadow:var(--shadow); display:none; flex-direction:column; align-items:flex-start; gap:17px; }
  .main-nav.open { display:flex; }
  .mobile-nav-actions { width:100%; margin-top:4px; padding-top:15px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .mobile-nav-actions .text-link, .mobile-nav-actions .button { width:100%; min-height:44px; border-radius:12px; }
  .mobile-nav-actions .text-link { border:1px solid var(--line); background:#fff; color:var(--text); display:inline-flex; align-items:center; justify-content:center; }
  .mobile-menu-button { display:block; margin-left:auto; }
  .nav-actions .text-link { display:none; }
  .hero-grid, .dashboard-grid, .home-page .hero-grid { grid-template-columns:1fr; }
  .home-page .hero-grid { gap:42px; }
  .hero-copy { text-align:center; }
  .hero-text { margin-left:auto; margin-right:auto; }
  .hero-actions, .trust-row { justify-content:center; }
  .hero-preview { max-width:650px; margin:0 auto; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:auto; }
  .feature-icon { margin-bottom:25px; }
  .dashboard-copy { text-align:center; }
  .dashboard-copy p { margin-left:auto; margin-right:auto; }
  .benefit-list { max-width:520px; margin-left:auto; margin-right:auto; text-align:left; }
  .dashboard-card { max-width:650px; margin:auto; }
  .content-hero-grid, .content-grid { grid-template-columns:1fr; }
  .traffic-demo-public-shell { grid-template-columns:1fr; }
  .traffic-demo-public-question { grid-template-columns:160px minmax(0,1fr); }
  .content-side { position:static; }
  .content-card-grid { grid-template-columns:1fr; }
  .related-link-grid { grid-template-columns:1fr; }
  .legal-download-card { align-items:flex-start; flex-direction:column; }
  .footer-grid { grid-template-columns:1.35fr repeat(3,1fr); gap:32px; }
}

@media (max-width: 720px) {
  .container { width:min(100% - 28px, 1160px); }
  .home-page .container { width:min(100% - 28px, 1160px); }
  .section { padding:72px 0; }
  .site-header { height:72px; }
  .nav-wrap { gap:12px; }
  .site-logo-image { min-width:0; }
  .site-logo-image img { max-width:178px; object-fit:contain; }
  .main-nav { top:72px; }
  .nav-actions .button { display:none; }
  .mobile-nav-actions { grid-template-columns:1fr; }
  .hero { padding-top:52px; }
  .hero h1 { font-size:43px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .button { width:100%; }
  .trust-row { gap:13px; }
  .trust-divider { display:none; }
  .trust-item { flex:1; }
  .question-visual { padding:13px 13px 0; }
  .road-scene { height:185px; }
  .hero-preview { width:100%; max-width:100%; transform:none; border-radius:22px; }
  .demo-question-image { height:clamp(165px, 48vw, 220px); max-height:none; object-fit:contain; background:#f6faf9; }
  .logo-strip-inner { justify-content:center; padding:19px 0; }
  .logo-strip-inner > span { width:100%; text-align:center; }
  .split-heading { align-items:flex-start; flex-direction:column; }
  .category-grid { grid-template-columns:1fr; }
  .category-card { grid-template-columns:auto minmax(0,1fr) 42px!important; gap:11px; }
  .traffic-demo-public-card, .traffic-demo-public-copy { padding:18px; border-radius:22px; }
  .traffic-demo-public-actions { flex-direction:column; }
  .traffic-demo-public-actions .button { width:100%; }
  .dashboard-card { padding:20px; }
  .pricing-main { flex-direction:column; align-items:flex-start; }
  .price { align-self:center; }
  .pricing-features { grid-template-columns:1fr; }
  .pricing-card { padding:31px 21px 24px; }
  .cta-inner { flex-direction:column; text-align:center; }
  .cta-inner .button { width:100%; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px 28px; }
  .footer-brand { grid-column:1/3; }
  .footer-bottom { flex-direction:column; justify-content:center; gap:10px; padding:20px 0; }
}

@media (max-width: 460px) {
  .logo-text { font-size:19px; }
  .logo-mark { width:39px; height:39px; border-radius:12px; }
  .hero h1 { font-size:36px; }
  .hero-text { font-size:16px; }
  .hero-preview { border-radius:20px; box-shadow:0 16px 42px rgba(16,80,70,.1); }
  .preview-topbar { padding:17px 16px 13px; }
  .question-body { padding:17px 16px 19px; }
  .question-body h3 { font-size:16px; }
  .answer-button { padding:11px 12px; font-size:14px; }
  .demo-question-image { max-height:190px; border-radius:13px; }
  .trust-row { display:grid; grid-template-columns:repeat(3,1fr); }
  .trust-item strong { font-size:14px; }
  .trust-item span { font-size:9px; }
  .question-body, .preview-topbar { padding-left:17px; padding-right:17px; }
  .road-scene { height:155px; }
  .category-card { grid-template-columns:auto minmax(0,1fr) 38px!important; }
  .category-progress { display:none; }
  .traffic-demo-public-question { grid-template-columns:1fr; }
  .traffic-demo-public-visual { min-height:150px; }
  .traffic-demo-public-visual img { height:150px; }
  .mini-stats { grid-template-columns:1fr; }
  .score-box { align-items:flex-start; }
  .score-ring { width:88px; height:88px; flex:0 0 auto; }
  .weak-row { grid-template-columns:110px 1fr 30px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:auto; }
}

/* TheorieKompas logo */
.logo-symbol { width:47px; height:47px; display:flex; flex:0 0 auto; filter:drop-shadow(0 7px 12px rgba(7,117,102,.18)); }
.logo-symbol svg { width:100%; height:100%; overflow:visible; }
.logo-shield { fill:url(#tkLogoGradient); }
.logo-wordmark { display:flex; align-items:baseline; letter-spacing:-.8px; font-size:22px; color:#163a35; }
.logo-wordmark strong { font-weight:800; }
.logo-wordmark b { color:var(--primary); font-weight:800; }
.logo-wordmark small { color:var(--secondary); font-size:10px; margin-left:2px; letter-spacing:0; }
.footer-logo .logo-wordmark { color:#fff; }
.footer-logo .logo-wordmark b { color:#7be0cf; }
.text-link, .footer-modal-link { border:0; background:none; cursor:pointer; font:inherit; }
.text-link { color:var(--text); font-weight:700; }

/* Pricing */
.pricing-wrap { max-width:1100px; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch; }
.pricing-card { display:flex; flex-direction:column; height:100%; }
.pricing-card-featured { border:2px solid var(--primary); transform:translateY(-8px); box-shadow:0 25px 70px rgba(8,117,102,.17); }
.pricing-card-basic { box-shadow:0 18px 50px rgba(23,55,49,.08); }
.pricing-card .pricing-main { display:block; }
.pricing-card .price { margin-top:24px; justify-content:start; }
.pricing-card .pricing-features { grid-template-columns:1fr; flex:1; }
.pricing-card .pricing-button { margin-top:auto; }
.saving-badge { position:absolute; right:20px; top:18px; border-radius:99px; background:#e7f7f3; color:var(--primary); padding:7px 11px; font-size:10px; font-weight:800; }
.pricing-grid + .pricing-note { margin-top:19px; }

/* Authentication modals */
body.modal-open { overflow:hidden; }
.modal-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(4,28,25,.66); backdrop-filter:blur(9px); opacity:0; visibility:hidden; transition:.22s ease; }
.modal-overlay.open { opacity:1; visibility:visible; }
.auth-modal { position:relative; width:min(100%,470px); max-height:calc(100vh - 44px); overflow:auto; border:1px solid rgba(255,255,255,.65); border-radius:27px; padding:34px; background:linear-gradient(180deg,#fff,#fbfefd); box-shadow:0 30px 90px rgba(0,22,19,.3); transform:translateY(16px) scale(.98); transition:.22s ease; }
.modal-overlay.open .auth-modal { transform:none; }
.auth-modal-wide { width:min(100%,570px); }
.modal-close { position:absolute; top:17px; right:17px; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--text); font-size:24px; cursor:pointer; }
.modal-close:hover { background:var(--primary-soft); color:var(--primary); }
.modal-brand { display:flex; align-items:center; gap:9px; color:var(--primary); font-weight:800; font-size:13px; }
.mini-compass { width:31px; height:31px; display:grid; place-items:center; border-radius:10px; background:var(--primary); color:#fff; font-size:19px; }
.modal-heading { margin:23px 0 24px; }
.modal-heading h2 { margin:5px 0 8px; font-size:29px; letter-spacing:-1px; }
.modal-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.modal-kicker { color:var(--primary); font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.auth-form { display:flex; flex-direction:column; gap:15px; }
.auth-form > label, .form-grid label { color:var(--text); font-size:11px; font-weight:800; }
.input-wrap { display:flex; align-items:center; height:50px; margin-top:7px; border:1px solid #d9e5e2; border-radius:13px; background:#fff; transition:.2s; }
.input-wrap:focus-within { border-color:var(--primary); box-shadow:0 0 0 4px rgba(8,117,102,.09); }
.input-wrap > i { margin-left:15px; color:#83a19b; font-size:19px; }
.input-wrap input { width:100%; height:100%; border:0; outline:0; padding:0 14px; background:transparent; color:var(--text); font:inherit; font-size:13px; }
.password-toggle { height:100%; padding:0 15px; border:0; background:none; color:#77918c; font-size:19px; cursor:pointer; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.form-options { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.checkbox-label { display:flex; align-items:flex-start; gap:8px; color:var(--muted)!important; font-size:10px!important; font-weight:600!important; cursor:pointer; }
.checkbox-label input { margin-top:1px; accent-color:var(--primary); }
.link-button { padding:0; border:0; background:none; color:var(--primary); font:inherit; font-size:10px; font-weight:800; cursor:pointer; }
.auth-submit { width:100%; margin-top:4px; }
.modal-footer-text { margin-top:22px; padding-top:19px; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:11px; }
.register-vehicle-field { display:grid; gap:10px; }
.register-vehicle-field > span { color:var(--text); font-size:11px; font-weight:800; }
.register-vehicle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.register-vehicle-grid label { min-height:72px; padding:11px; display:grid; place-items:center; gap:5px; border:1px solid var(--line); border-radius:13px; background:#fff; cursor:pointer; transition:.18s; text-align:center; }
.register-vehicle-grid input { display:none; }
.register-vehicle-grid i { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; background:#edf5f3; color:var(--primary); font-size:18px; }
.register-vehicle-grid strong { font-size:11px; }
.register-vehicle-grid small { color:#889793; font-size:9px; font-weight:850; text-transform:uppercase; }
.register-vehicle-grid label:has(input:checked) { border-color:var(--primary); background:#f1fbf8; box-shadow:0 0 0 3px rgba(20,122,105,.08); }
.register-vehicle-grid label:has(input:checked) i { background:var(--primary); color:#fff; }
.register-vehicle-grid label.is-disabled { position:relative; cursor:not-allowed; background:#f8fbfa; color:#7d8986; opacity:.76; }
.register-vehicle-grid label.is-disabled i { background:#eef3f1; color:#9aaaa5; }
.register-vehicle-grid label.is-disabled:has(input:checked) { border-color:var(--line); background:#f8fbfa; box-shadow:none; }
.register-vehicle-grid label.is-disabled:has(input:checked) i { background:#eef3f1; color:#9aaaa5; }
.register-vehicle-grid label.is-disabled:hover::after {
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  z-index:4;
  width:max-content;
  max-width:190px;
  padding:8px 10px;
  border:1px solid rgba(20,122,105,.16);
  border-radius:12px;
  background:#102521;
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1.3;
  transform:translateX(-50%);
  box-shadow:0 16px 34px rgba(16,37,33,.18);
}
.terms { line-height:1.5; }
.modal-icon { width:62px; height:62px; display:grid; place-items:center; margin:3px auto 18px; border-radius:20px; background:var(--primary-soft); color:var(--primary); font-size:30px; }
.centered-modal { text-align:center; margin-top:0; }
.entry-modal-card { width:min(100%,520px); padding:32px; text-align:center; overflow:hidden; }
.entry-modal-card:before { content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,var(--primary),#5dc6b5,#f0b04d); }
.entry-modal-icon { width:68px; height:68px; display:grid; place-items:center; margin:2px auto 18px; border-radius:24px; background:var(--primary); color:#fff; font-size:34px; box-shadow:0 18px 40px rgba(20,122,105,.18); }
.entry-modal-card .modal-heading { margin:0 0 18px; padding-right:0; }
.entry-modal-card .modal-heading h2 { margin-top:8px; font-size:31px; line-height:1.08; letter-spacing:0; }
.entry-modal-card .modal-heading p { max-width:410px; margin:0 auto; }
.entry-modal-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:20px 0 22px; }
.entry-modal-benefits span { min-height:46px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:14px; padding:8px 10px; background:#f8fcfb; color:#42514d; font-size:11px; font-weight:900; }
.entry-modal-benefits i { color:var(--primary); font-size:17px; }
.entry-modal-actions { display:grid; justify-items:center; gap:12px; }
.entry-modal-actions .button { width:min(100%,280px); justify-content:center; }
.demo-notice { display:flex; align-items:center; gap:8px; margin-top:14px; padding:11px 13px; border-radius:11px; background:#eef8f5; color:var(--primary); font-size:11px; font-weight:700; }
.footer-modal-link { color:rgba(255,255,255,.57); font-size:12px; margin-bottom:10px; padding:0; transition:.2s; }
.footer-modal-link:hover { color:#fff; }

@media (max-width:720px) {
  .pricing-grid { grid-template-columns:1fr; }
  .pricing-card-featured { transform:none; }
  .modal-overlay { align-items:flex-end; padding:12px; }
  .auth-modal { width:100%; max-height:min(92dvh, calc(100dvh - 24px)); padding:27px 20px 22px; border-radius:24px 24px 16px 16px; }
  .auth-modal-wide { width:100%; }
  .modal-close { top:13px; right:13px; }
  .modal-heading { margin:19px 0 18px; padding-right:38px; }
  .centered-modal { padding-right:0; }
  .modal-heading h2 { font-size:25px; letter-spacing:-.4px; }
  .entry-modal-card { padding:28px 20px 22px; }
  .entry-modal-card .modal-heading h2 { font-size:26px; }
  .entry-modal-benefits { grid-template-columns:1fr; gap:7px; margin:17px 0 19px; }
  .entry-modal-benefits span { min-height:40px; }
  .form-grid { grid-template-columns:1fr; }
}
@media (max-width:460px) {
  .logo-symbol { width:41px; height:41px; }
  .logo-wordmark { font-size:18px; }
  .modal-overlay { padding:8px 8px 0; }
  .auth-modal { max-height:calc(100dvh - 8px); border-radius:22px 22px 0 0; }
  .register-vehicle-grid { grid-template-columns:1fr; }
  .register-vehicle-grid label { min-height:58px; grid-template-columns:auto 1fr; justify-items:start; text-align:left; }
  .register-vehicle-grid label small { grid-column:2; }
  .form-options { align-items:flex-start; flex-direction:column; }
}
.footer-logo-shield { fill:#0b8f7c; }

/* Fresh public-site refresh */
:root {
  --primary:#008a7a;
  --primary-dark:#00675f;
  --primary-soft:#e5fbf5;
  --secondary:#ffb000;
  --accent-coral:#ff6b5f;
  --accent-sky:#58c7f3;
  --accent-lime:#b8ed55;
  --text:#10201d;
  --muted:#64736f;
  --line:#d9e7e2;
  --surface-soft:#f5fbf8;
  --shadow:0 28px 70px rgba(4,82,74,.14);
}

body {
  background:#f8fffb;
}

.home-page {
  background:
    linear-gradient(135deg,#fbfff7 0%,#effcff 45%,#fff6ec 100%);
}

.page-glow {
  display:none;
}

.site-header {
  height:76px;
  border-bottom:0;
  background:rgba(248,255,251,.78);
  box-shadow:0 12px 36px rgba(11,59,54,.06);
}

.site-logo-image img,
.dashboard-logo-image img {
  height:52px;
}

.main-nav {
  gap:8px;
  padding:6px;
  border:1px solid rgba(0,138,122,.11);
  border-radius:999px;
  background:rgba(255,255,255,.68);
}

.main-nav a,
.text-link {
  min-height:36px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  color:#2f4540;
  font-weight:900;
}

.main-nav a:hover,
.text-link:hover {
  background:#fff;
  color:var(--primary);
}

.button {
  border-radius:17px;
  background:linear-gradient(135deg,var(--primary),#00a38e);
  box-shadow:0 16px 34px rgba(0,138,122,.22);
}

.button:hover {
  background:linear-gradient(135deg,var(--primary-dark),#008a7a);
}

.button-secondary {
  background:#fff;
  border:2px solid rgba(16,32,29,.09);
  color:#10201d;
  box-shadow:0 16px 34px rgba(8,44,40,.08);
}

.button-secondary:hover {
  background:#fff7e3;
  border-color:rgba(255,176,0,.28);
  color:#5d3f00;
}

.home-page .hero {
  min-height:calc(100svh - 76px);
  padding-top:54px;
  padding-bottom:64px;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.home-page .hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.2) 0 44%,rgba(255,176,0,.12) 44% 57%,rgba(255,255,255,0) 57%),
    repeating-linear-gradient(135deg,rgba(0,138,122,.045) 0 1px,transparent 1px 24px);
  pointer-events:none;
}

.home-page .hero-grid {
  position:relative;
  z-index:1;
  grid-template-columns:minmax(460px, 640px) minmax(440px, 560px);
  gap:78px;
}

.hero h1,
.section-heading h2,
.dashboard-copy h2,
.cta-inner h2,
.content-hero h1 {
  letter-spacing:0;
}

.home-page .hero h1 {
  max-width:680px;
  margin:20px 0 18px;
  font-size:clamp(54px,6.4vw,86px);
  line-height:.96;
  font-weight:900;
}

.home-page .hero h1 span {
  color:var(--primary);
  text-decoration:underline;
  text-decoration-color:var(--accent-lime);
  text-decoration-thickness:.16em;
  text-underline-offset:.08em;
}

.hero-text {
  max-width:610px;
  color:#4d625d;
  font-size:20px;
  line-height:1.65;
}

.eyebrow {
  border:1px solid rgba(0,138,122,.13);
  background:#e9fff6;
  color:#00786f;
  box-shadow:0 10px 22px rgba(0,138,122,.08);
}

.hero-route-pills {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.hero-route-pills span {
  min-height:40px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(16,32,29,.09);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#24423d;
  font-size:13px;
  font-weight:900;
  box-shadow:0 12px 28px rgba(8,44,40,.07);
}

.hero-route-pills i {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#fff0d1;
  color:#a66800;
  font-size:15px;
}

.hero-actions {
  margin:30px 0 26px;
}

.trust-row {
  width:max-content;
  max-width:100%;
  padding:12px;
  border:1px solid rgba(0,138,122,.12);
  border-radius:22px;
  background:rgba(255,255,255,.66);
  box-shadow:0 18px 46px rgba(8,44,40,.08);
}

.trust-item {
  min-width:116px;
}

.trust-item strong {
  color:var(--primary-dark);
  font-size:21px;
  line-height:1;
}

.trust-item span {
  max-width:124px;
  color:#61736e;
  line-height:1.35;
}

.home-page .hero-preview {
  position:relative;
  padding:9px;
  border:0;
  border-radius:34px;
  background:linear-gradient(145deg,var(--accent-lime),#fff,var(--accent-sky));
  box-shadow:0 34px 90px rgba(0,85,78,.2);
  transform:rotate(-1.3deg);
  overflow:visible;
}

.home-page .hero-preview > * {
  background:#fff;
}

.preview-topbar {
  border-radius:25px 25px 0 0;
}

.question-body {
  border-radius:0 0 25px 25px;
}

.preview-label {
  color:#7b8d88;
}

.question-count {
  background:#fff2cf;
  color:#855900;
}

.progress-track {
  background:#e8f3ef;
}

.progress-track span {
  background:linear-gradient(90deg,var(--accent-coral),var(--secondary),var(--primary));
}

.question-visual {
  background:#fff;
}

.demo-question-image,
.road-scene {
  border-radius:22px;
  background:linear-gradient(135deg,#f2fffb,#fff8e8);
}

.answer-button {
  border-width:2px;
  border-color:#e4ede9;
  border-radius:16px;
  background:#fbfffd;
  font-weight:700;
}

.answer-button span {
  background:#e8fff5;
}

.next-button {
  border-radius:16px;
  background:linear-gradient(135deg,var(--primary),#00a990);
}

.logo-strip {
  margin-top:-1px;
  border:0;
  background:#10201d;
  color:#fff;
}

.logo-strip-inner {
  min-height:72px;
  color:rgba(255,255,255,.82);
}

.logo-strip-inner > span {
  color:#fff0c6;
  font-weight:900;
}

.logo-strip-inner div {
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  color:#fff;
}

.logo-strip-inner i {
  color:var(--accent-lime);
}

.section-soft {
  background:#f0fbf6;
}

.section-heading h2 {
  color:#10201d;
  font-weight:900;
}

.section-heading p {
  color:#5c706a;
}

.feature-grid {
  gap:18px;
}

.feature-card {
  border:0;
  border-radius:28px;
  background:#fff;
  box-shadow:0 20px 50px rgba(8,44,40,.08);
}

.feature-card-primary {
  background:linear-gradient(145deg,#10201d 0%,#00796f 62%,#00a38e 100%);
  box-shadow:0 24px 58px rgba(0,99,90,.22);
}

.feature-card:nth-child(2) .feature-icon {
  background:#fff0d4;
  color:#a66800;
}

.feature-card:nth-child(3) .feature-icon {
  background:#eef1ff;
  color:#5264d8;
}

.feature-tag.light {
  background:#f2f7ff;
  color:#4159c8;
}

.feature-card h3 {
  font-size:24px;
  line-height:1.15;
}

.category-card {
  border:0;
  border-radius:22px;
  background:#fff;
  box-shadow:0 16px 38px rgba(8,44,40,.07);
}

.category-card:hover {
  box-shadow:0 24px 52px rgba(0,99,90,.13);
}

.category-arrow {
  background:#fff0d4;
  color:#a66800;
}

.dashboard-section {
  background:linear-gradient(135deg,#10201d 0%,#006c63 46%,#00a38e 100%);
}

.dashboard-section::after {
  display:none;
}

.dashboard-card {
  border:8px solid rgba(255,255,255,.18);
  border-radius:30px;
  transform:rotate(1deg);
}

.score-ring {
  background:conic-gradient(var(--accent-lime) 0 74%,#e7efed 74%);
}

.weak-row div b {
  background:linear-gradient(90deg,var(--secondary),var(--accent-coral));
}

.cta-section {
  background:linear-gradient(135deg,#10201d 0%,#006c63 58%,#ffb000 170%);
}

.cta-inner h2 {
  font-weight:900;
}

.content-hero,
.pages-public .content-hero {
  background:linear-gradient(135deg,#fbfff7,#effcff 55%,#fff6ec);
}

.content-hero-card,
.content-block,
.content-info-card,
.content-side,
.related-link-card,
.seo-faq-list details,
.legal-download-card {
  border-color:rgba(0,138,122,.12);
  box-shadow:0 18px 46px rgba(8,44,40,.07);
}

.content-hero-card > span,
.content-info-card span,
.related-link-card span,
.contact-form-heading > span,
.mini-compass,
.entry-modal-icon {
  background:linear-gradient(135deg,var(--primary),#00a38e);
}

.homepage-mascot {
  bottom:18px;
  right:18px;
}

.homepage-mascot .mascot-avatar,
.homepage-mascot .mascot-avatar img {
  width:76px;
  height:76px;
}

.homepage-mascot .mascot-bubble {
  max-width:280px;
  border-radius:22px 22px 8px 22px;
  box-shadow:0 18px 44px rgba(8,44,40,.14);
}

@media (max-width:980px) {
  .main-nav {
    border-radius:20px;
    background:#fff;
  }

  .home-page .hero {
    min-height:auto;
  }

  .home-page .hero h1 {
    margin-left:auto;
    margin-right:auto;
  }

  .hero-route-pills {
    justify-content:center;
  }

  .trust-row {
    width:100%;
    justify-content:center;
  }

  .home-page .hero-preview {
    transform:none;
  }
}

@media (max-width:720px) {
  .home-page .hero {
    padding-top:44px;
  }

  .home-page .hero h1 {
    font-size:clamp(40px,12vw,58px);
  }

  .hero-text {
    font-size:17px;
  }

  .hero-route-pills {
    gap:8px;
  }

  .trust-row {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    text-align:left;
  }

  .trust-item {
    min-width:0;
    padding:2px 6px;
  }

  .trust-item span {
    max-width:none;
  }

  .homepage-mascot .mascot-avatar,
  .homepage-mascot .mascot-avatar img {
    width:62px;
    height:62px;
  }
}

/* Logged-in dashboard */
.dashboard-page { background:#f4f8f7; min-height:100vh; }
.dashboard-sidebar { position:fixed; inset:0 auto 0 0; width:268px; padding:24px 18px; background:#fff; border-right:1px solid var(--line); z-index:220; display:flex; flex-direction:column; overflow-y:auto; transition:transform .25s ease; }
.dashboard-logo { padding:0 10px 26px; }
.dashboard-menu { display:flex; flex-direction:column; gap:5px; }
.dashboard-menu .menu-label { margin:18px 12px 7px; color:#9aa5a2; font-size:10px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; }
.dashboard-menu a { min-height:47px; padding:0 13px; border-radius:12px; display:flex; align-items:center; gap:12px; color:#5a6764; font-size:13px; font-weight:700; transition:.18s; }
.dashboard-menu a i { font-size:21px; }
.dashboard-menu a em { margin-left:auto; min-width:24px; padding:3px 7px; border-radius:99px; background:#fff0e8; color:#dc713d; font-size:10px; font-style:normal; text-align:center; }
.dashboard-menu a:hover, .dashboard-menu a.active { color:var(--primary); background:var(--primary-soft); }
.sidebar-upgrade { margin-top:auto; padding:18px; border-radius:17px; background:linear-gradient(145deg,#0f7868,#0b5c50); color:#fff; }
.sidebar-upgrade > span { width:37px; height:37px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.15); color:#ffd06d; font-size:20px; }
.sidebar-upgrade strong { display:block; margin-top:11px; font-size:13px; }
.sidebar-upgrade p { margin:4px 0 10px; color:rgba(255,255,255,.72); font-size:10px; line-height:1.5; }
.sidebar-upgrade a { color:#fff; font-size:10px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.sidebar-logout { width:calc(100% - 20px); margin:14px 10px 0; padding:12px 13px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #e7d7d7; border-radius:13px; background:#fff8f8; color:#bc4545; font-size:12px; font-weight:800; cursor:pointer; transition:.18s; }
.sidebar-logout:hover { transform:translateY(-1px); border-color:#efb9b9; background:#fff0f0; color:#a83232; box-shadow:0 10px 24px rgba(188,69,69,.1); }
.dashboard-shell { margin-left:268px; min-height:100vh; }
.dashboard-topbar { height:78px; padding:0 34px; background:rgba(255,255,255,.9); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:150; }
.sidebar-toggle { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:24px; cursor:pointer; }
.dashboard-search { width:min(420px,42vw); height:44px; padding:0 8px 0 14px; border:1px solid var(--line); border-radius:12px; background:#f8fbfa; display:flex; align-items:center; gap:10px; color:#899491; }
.dashboard-search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:12px; }
.dashboard-search-submit { width:32px; height:32px; border:0; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; background:var(--primary); color:#fff; cursor:pointer; box-shadow:0 10px 22px rgba(13,128,109,.18); }
.dashboard-search-submit:hover { background:#0b6f61; }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.icon-button { width:43px; height:43px; position:relative; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:#fff; color:#596662; font-size:20px; cursor:pointer; }
.icon-button span { position:absolute; right:8px; top:8px; width:7px; height:7px; border-radius:50%; background:#f09a2b; border:2px solid #fff; }
.profile-button { border:0; background:transparent; display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer; }
.profile-avatar { width:41px; height:41px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(145deg,var(--primary),#34aa96); color:#fff; font-weight:800; }
.profile-button > span:nth-child(2) { display:flex; flex-direction:column; }
.profile-button strong { font-size:11px; }
.profile-button small { color:var(--muted); font-size:9px; }
.dashboard-content { width:min(1380px,100%); padding:38px 38px 60px; margin:auto; }
.dashboard-welcome { margin-bottom:29px; display:flex; justify-content:space-between; align-items:flex-end; gap:30px; }
.dashboard-date { color:var(--primary); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; }
.dashboard-welcome h1 { margin:5px 0 5px; font-size:31px; letter-spacing:-1.2px; }
.dashboard-welcome p { margin:0; color:var(--muted); font-size:13px; }
.dashboard-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; margin-bottom:18px; }
.summary-card, .dashboard-panel { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 11px 30px rgba(21,69,61,.04); }
.summary-card { padding:20px; }
.summary-card-top { display:flex; align-items:center; justify-content:space-between; }
.summary-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; font-size:22px; }
.summary-icon.green { color:#13806d; background:#e5f5f1; }.summary-icon.orange { color:#df8422; background:#fff2df; }.summary-icon.blue { color:#3979be; background:#eaf2fc; }.summary-icon.purple { color:#8261bc; background:#f0eafd; }
.trend { padding:5px 8px; border-radius:99px; font-size:9px; font-weight:800; }.trend.positive { color:#19836f; background:#e9f7f3; }.trend.neutral { color:#66736f; background:#f0f4f3; }
.summary-card p { margin:17px 0 1px; color:var(--muted); font-size:11px; }.summary-card h2 { margin:0; font-size:27px; letter-spacing:-1px; }.summary-card small { color:#899491; font-size:9px; }
.mini-progress { height:5px; margin:12px 0 8px; border-radius:99px; background:#edf3f1; overflow:hidden; }.mini-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#43b9a5); }
.dashboard-main-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.72fr); gap:18px; margin-bottom:18px; }
.dashboard-panel { padding:23px; }
.panel-heading { margin-bottom:18px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.panel-heading h2 { margin:2px 0 0; font-size:18px; letter-spacing:-.5px; }.panel-heading a { color:var(--primary); font-size:10px; font-weight:800; }.panel-kicker { color:#95a19e; font-size:9px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; }
.continue-card { padding:18px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg,#fbfefd,#f1f8f6); display:grid; grid-template-columns:100px 1fr 46px; align-items:center; gap:18px; }
.continue-illustration { height:91px; position:relative; display:grid; place-items:center; border-radius:14px; background:linear-gradient(145deg,#0f7a68,#1d9a84); color:#fff; font-size:42px; }.continue-illustration span { position:absolute; right:7px; bottom:7px; padding:3px 6px; border-radius:6px; background:rgba(0,0,0,.22); font-size:8px; font-weight:800; }
.lesson-type { color:var(--primary); font-size:9px; font-weight:800; text-transform:uppercase; }.continue-copy h3 { margin:2px 0 4px; font-size:15px; }.continue-copy p { margin:0; color:var(--muted); font-size:10px; }.lesson-progress { height:5px; margin:13px 0 8px; background:#e2ebe8; border-radius:99px; overflow:hidden; }.lesson-progress span { display:block; height:100%; background:var(--primary); }.lesson-meta { display:flex; gap:16px; color:#7b8884; font-size:8px; }.lesson-meta span { display:flex; gap:4px; align-items:center; }
.round-play { width:43px; height:43px; border:0; border-radius:50%; background:var(--primary); color:#fff; font-size:22px; cursor:pointer; box-shadow:0 9px 20px rgba(20,122,105,.22); }
.quick-practice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:13px; }.quick-practice-grid a { min-height:74px; padding:12px; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:13px; }.quick-practice-grid strong { display:block; font-size:10px; }.quick-practice-grid small { display:block; margin-top:2px; color:var(--muted); font-size:8px; }.quick-icon { width:37px; height:37px; display:grid; place-items:center; border-radius:11px; font-size:19px; }.quick-icon.danger { color:#d47036; background:#fff0e4; }.quick-icon.signs { color:#4e79bd; background:#eaf1fc; }.quick-icon.mistakes { color:#8b63bb; background:#f2ebfc; }
.readiness-panel { text-align:center; }.readiness-panel .panel-heading { text-align:left; }.readiness-circle { width:142px; height:142px; margin:3px auto 17px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--primary) 0 78%,#e6eeec 78%); position:relative; }.readiness-circle:before { content:""; position:absolute; inset:12px; border-radius:50%; background:#fff; }.readiness-circle span { position:relative; display:flex; flex-direction:column; }.readiness-circle strong { font-size:27px; }.readiness-circle small { color:var(--muted); font-size:9px; }.readiness-panel > p { color:var(--muted); font-size:10px; line-height:1.6; }
.readiness-checks { margin:17px 0; display:grid; gap:8px; text-align:left; }.readiness-checks > div { padding:9px 10px; border-radius:11px; display:flex; align-items:center; gap:9px; background:#f7faf9; }.readiness-checks i { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; }.readiness-checks .done i { color:#16816e; background:#e1f3ef; }.readiness-checks .attention i { color:#df7d28; background:#fff0df; }.readiness-checks span { display:flex; flex-direction:column; }.readiness-checks strong { font-size:9px; }.readiness-checks small { color:var(--muted); font-size:8px; }.dashboard-full-button { width:100%; padding:11px; font-size:10px; }
.dashboard-lower-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.72fr); gap:18px; }.result-table-wrap { overflow:auto; }.result-table { width:100%; border-collapse:collapse; white-space:nowrap; }.result-table th { padding:0 10px 9px; text-align:left; color:#98a39f; font-size:8px; text-transform:uppercase; letter-spacing:.7px; }.result-table td { padding:12px 10px; border-top:1px solid #edf2f1; font-size:9px; }.result-table td strong { font-size:10px; }.result-table button { border:0; background:transparent; font-size:18px; cursor:pointer; }.status-pill { padding:5px 8px; border-radius:99px; font-size:8px; font-weight:800; }.status-pill.success { color:#16816e; background:#e5f5f1; }.status-pill.failed { color:#ce6941; background:#fff0ea; }
.streak-fire { font-size:25px; }.streak-panel > p { color:var(--muted); font-size:10px; }.week-streak { margin:18px 0; display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }.week-streak div { text-align:center; }.week-streak span { display:block; margin-bottom:6px; color:#8c9894; font-size:8px; }.week-streak i { width:27px; height:27px; margin:auto; display:grid; place-items:center; border-radius:9px; background:#edf2f1; color:#aab3b0; font-size:14px; }.week-streak .complete i { background:var(--primary); color:#fff; }.weekly-goal { padding:13px; border-radius:12px; background:#f6faf9; }.weekly-goal > span { font-size:9px; font-weight:800; }.weekly-goal > strong { float:right; font-size:8px; }.weekly-goal > div { clear:both; height:5px; margin-top:9px; border-radius:99px; background:#e3ebe9; overflow:hidden; }.weekly-goal b { display:block; height:100%; background:var(--secondary); }
@media(max-width:1150px){.dashboard-summary-grid{grid-template-columns:repeat(2,1fr)}.dashboard-main-grid,.dashboard-lower-grid{grid-template-columns:1fr}.readiness-panel{max-width:none}.quick-practice-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:860px){.dashboard-sidebar{transform:translateX(-100%);box-shadow:20px 0 60px rgba(11,55,48,.18)}.dashboard-sidebar.open{transform:none}.dashboard-shell{margin-left:0}.sidebar-toggle{display:grid;place-items:center}.dashboard-topbar{padding:0 18px}.dashboard-search{width:min(360px,52vw)}.dashboard-content{padding:28px 20px 50px}}
@media(max-width:650px){.dashboard-search{display:none}.profile-button>span:nth-child(2),.profile-button>i{display:none}.dashboard-welcome{align-items:flex-start;flex-direction:column}.dashboard-welcome .button{width:100%}.dashboard-summary-grid{grid-template-columns:1fr}.continue-card{grid-template-columns:70px 1fr}.continue-illustration{height:70px}.round-play{grid-column:1/3;width:100%;border-radius:11px}.quick-practice-grid{grid-template-columns:1fr}.dashboard-content{padding-left:14px;padding-right:14px}.dashboard-panel{padding:18px}.result-table{min-width:520px}.dashboard-welcome h1{font-size:26px}}
.demo-dashboard-link { margin-bottom:2px; padding:11px 13px; border-radius:11px; background:var(--primary-soft); color:var(--primary); font-size:11px; font-weight:800; text-align:center; }

/* Dashboard usability improvements */
.dashboard-logo-image { display:flex; align-items:center; min-height:72px; padding:4px 10px 22px; }
.dashboard-logo-image img { display:block; width:100%; max-width:220px; height:auto; object-fit:contain; object-position:left center; }
.sidebar-close { display:none; position:absolute; top:16px; right:14px; width:40px; height:40px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--text); font-size:25px; cursor:pointer; z-index:2; }
.sidebar-overlay { position:fixed; inset:0; background:rgba(7,37,32,.42); opacity:0; visibility:hidden; transition:.25s ease; z-index:210; backdrop-filter:blur(2px); }
.sidebar-overlay.open { opacity:1; visibility:visible; }

.dashboard-menu a { font-size:15px; }
.dashboard-menu .menu-label { font-size:11px; }
.sidebar-upgrade strong { font-size:15px; }
.sidebar-upgrade p, .sidebar-upgrade a { font-size:12px; }
.sidebar-logout { font-size:14px; }
.dashboard-search input { font-size:14px; }
.profile-button strong { font-size:13px; }
.profile-button small { font-size:11px; }
.dashboard-date { font-size:12px; }
.dashboard-welcome p { font-size:15px; }
.summary-card p { font-size:13px; }
.summary-card small { font-size:11px; line-height:1.5; }
.panel-kicker { font-size:11px; }
.panel-heading h2 { font-size:20px; }
.panel-heading a { font-size:12px; }
.lesson-type { font-size:11px; }
.continue-copy p, .lesson-meta, .quick-practice-grid small, .readiness-panel > p, .streak-panel > p { font-size:12px; }
.quick-practice-grid strong { font-size:13px; }
.readiness-checks strong { font-size:12px; }
.readiness-checks small { font-size:10px; }
.dashboard-full-button { font-size:12px; }
.result-table th { font-size:10px; }
.result-table td { font-size:11px; }
.result-table td strong { font-size:12px; }
.status-pill { font-size:10px; }

.topbar-dropdown-wrap { position:relative; }
.topbar-dropdown { position:absolute; top:calc(100% + 12px); right:0; width:260px; padding:8px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 20px 55px rgba(19,54,48,.18); opacity:0; visibility:hidden; transform:translateY(-8px); transition:.18s ease; z-index:500; }
.topbar-dropdown.open { opacity:1; visibility:visible; transform:none; }
.profile-dropdown a { min-height:43px; padding:0 11px; display:flex; align-items:center; gap:11px; border-radius:10px; color:#263431; font-size:14px; font-weight:600; }
.profile-dropdown a:hover { background:#f1f7f5; color:var(--primary); }
.profile-dropdown a i { font-size:20px; color:#687572; }
.profile-dropdown .dropdown-logout, .profile-dropdown .dropdown-logout i { color:#e33434; }
.dropdown-divider { height:1px; margin:7px -8px; background:var(--line); }
.profile-button[aria-expanded="true"] > i { transform:rotate(180deg); }
.profile-button > i { transition:.18s ease; }

.notification-dropdown { width:360px; padding:0; overflow:hidden; }
.dropdown-header { padding:16px 17px 13px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.dropdown-header > div { display:flex; flex-direction:column; }
.dropdown-header strong { font-size:15px; }
.dropdown-header small { margin-top:2px; color:var(--muted); font-size:11px; }
.dropdown-header form { margin:0; }
.dropdown-header button { border:0; background:transparent; color:var(--primary); font-size:11px; font-weight:800; cursor:pointer; }
.notification-list { max-height:min(430px,calc(100vh - 190px)); overflow:auto; overscroll-behavior:contain; }
.notification-list > a { min-height:86px; padding:13px 16px; display:flex; gap:12px; color:var(--text); border-bottom:1px solid #edf2f1; }
.notification-list > a:hover { background:#f8fbfa; }
.notification-list > a.notification-unread { background:linear-gradient(90deg,#f4fbf9 0%,#fff 70%); }
.notification-list > a.notification-unread strong:after { content:""; width:7px; height:7px; margin-left:7px; display:inline-block; border-radius:50%; background:#f09a2b; vertical-align:middle; box-shadow:0 0 0 3px #fff2df; }
.dropdown-icon { flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; font-size:19px; }
.dropdown-icon.green { color:#12806e; background:#e4f5f1; }
.dropdown-icon.orange { color:#dc7a25; background:#fff0dc; }
.dropdown-icon.red { color:#cc4f4f; background:#ffe8e8; }
.dropdown-icon.blue { color:#3674c7; background:#eaf2ff; }
.dropdown-icon.purple { color:#7a54c9; background:#f0eaff; }
.notification-list a div { min-width:0; display:flex; flex-direction:column; }
.notification-list a strong { font-size:12px; line-height:1.25; }
.notification-list a small { margin-top:3px; color:var(--muted); font-size:11px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.notification-list a em { margin-top:6px; color:#9aa5a2; font-size:9px; font-style:normal; }
.notification-empty { padding:18px 16px; display:flex; gap:12px; border-bottom:1px solid #edf2f1; }
.notification-empty div { display:flex; flex-direction:column; }
.notification-empty strong { font-size:12px; }
.notification-empty small { margin-top:3px; color:var(--muted); font-size:11px; line-height:1.45; }
.dropdown-footer { padding:12px; display:block; color:var(--primary); font-size:12px; font-weight:800; text-align:center; }
.notification-dot { position:absolute; right:7px!important; top:6px!important; width:9px!important; height:9px!important; }
.dropdown-logout-button { width:100%; min-height:44px; padding:0 11px; display:flex; align-items:center; gap:11px; border:1px solid #f1d5d5; border-radius:11px; background:#fff8f8; color:#c43e3e; font-size:14px; font-weight:800; cursor:pointer; transition:.18s; }
.dropdown-logout-button:hover { background:#fff0f0; transform:translateY(-1px); }
.dropdown-logout-button i { font-size:20px; }
.table-action { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:11px; background:var(--primary-soft)!important; color:var(--primary); cursor:pointer; }

/* App polish */
.app-hero { position:relative; overflow:hidden; padding:28px; border:1px solid #d5e8e3; border-radius:22px; background:linear-gradient(135deg,#ffffff 0%,#f2faf7 62%,#fff7e8 100%); box-shadow:0 20px 55px rgba(17,74,65,.08); }
.app-hero:after { content:""; position:absolute; width:240px; height:240px; right:-90px; top:-110px; border-radius:50%; background:rgba(20,122,105,.09); }
.app-hero > * { position:relative; z-index:1; }
.app-hero h1 { font-size:34px; }
.hero-action-stack { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dashboard-hero-modern { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; }
.dashboard-hero-metrics { margin-top:18px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:680px; }
.dashboard-hero-metrics span { min-height:70px; padding:13px; display:grid; align-content:center; gap:4px; border:1px solid rgba(20,122,105,.13); border-radius:16px; background:rgba(255,255,255,.72); box-shadow:0 10px 24px rgba(21,69,61,.04); }
.dashboard-hero-metrics strong { color:var(--primary); font-size:22px; line-height:1; }
.dashboard-hero-metrics small { color:#667671; font-size:11px; font-weight:850; text-transform:uppercase; }
.dashboard-command-grid { margin:18px 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.dashboard-command-card { min-height:86px; padding:14px; display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 11px 30px rgba(21,69,61,.04); transition:.18s ease; }
.dashboard-command-card:hover { transform:translateY(-2px); border-color:#bddbd4; box-shadow:0 18px 38px rgba(21,69,61,.08); }
.dashboard-command-card > i { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:15px; background:var(--primary-soft); color:var(--primary); font-size:24px; }
.dashboard-command-card strong { display:block; color:var(--text); font-size:14px; line-height:1.2; }
.dashboard-command-card small { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.35; }
.dashboard-command-card.is-primary { background:linear-gradient(135deg,var(--primary),#169680); border-color:transparent; box-shadow:0 18px 38px rgba(20,122,105,.18); }
.dashboard-command-card.is-primary > i { background:rgba(255,255,255,.16); color:#fff; }
.dashboard-command-card.is-primary strong, .dashboard-command-card.is-primary small { color:#fff; }
.dashboard-section-label { margin:20px 0 10px; display:flex; align-items:end; justify-content:space-between; gap:18px; }
.dashboard-section-label span { color:var(--text); font-size:18px; font-weight:900; }
.dashboard-section-label p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.dashboard-hero { background:linear-gradient(135deg,#ffffff 0%,#eef9f6 58%,#fff4dc 100%); }
.practice-hero { background:linear-gradient(135deg,#ffffff 0%,#f2faf7 54%,#eef4ff 100%); }
.practice-hero-modern { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; }
.practice-hero-metrics { margin-top:16px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; max-width:620px; }
.practice-hero-metrics span { min-height:66px; padding:12px; display:grid; align-content:center; gap:3px; border:1px solid rgba(20,122,105,.13); border-radius:15px; background:rgba(255,255,255,.72); box-shadow:0 10px 24px rgba(21,69,61,.04); }
.practice-hero-metrics strong { color:var(--primary); font-size:21px; line-height:1; }
.practice-hero-metrics small { color:#667671; font-size:10px; font-weight:900; text-transform:uppercase; }
.exams-hero { background:linear-gradient(135deg,#ffffff 0%,#f7fbff 50%,#fff1dc 100%); }
.exams-hero-modern { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; }
.exams-hero-copy p { max-width:760px; }
.exam-hero-pills { margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.exam-hero-pills span { min-height:32px; padding:0 11px; display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(20,122,105,.13); border-radius:999px; background:rgba(255,255,255,.72); color:#40504c; font-size:11px; font-weight:850; }
.exam-hero-pills i { color:var(--primary); font-size:16px; }
.exam-prep-panel { margin:0 0 18px; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr); gap:22px; align-items:center; padding:24px; background:linear-gradient(135deg,#fff 0%,#f8fcfb 55%,#fff7e8 100%); overflow:hidden; position:relative; }
.exam-prep-panel:after { content:""; position:absolute; right:-80px; top:-100px; width:220px; height:220px; border-radius:50%; background:rgba(20,122,105,.07); pointer-events:none; }
.exam-prep-panel > * { position:relative; z-index:1; }
.exam-prep-copy h2 { margin:6px 0 8px; font-size:24px; letter-spacing:-.4px; }
.exam-prep-copy p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.exam-prep-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.exam-prep-list div { min-height:128px; padding:15px; border:1px solid rgba(203,222,217,.9); border-radius:18px; background:rgba(255,255,255,.78); box-shadow:0 14px 36px rgba(16,80,70,.05); }
.exam-prep-list i { width:38px; height:38px; display:grid; place-items:center; margin-bottom:11px; border-radius:13px; background:var(--primary-soft); color:var(--primary); font-size:21px; }
.exam-prep-list strong { display:block; color:var(--text); font-size:13px; line-height:1.25; }
.exam-prep-list small { display:block; margin-top:5px; color:var(--muted); font-size:11px; line-height:1.45; }
.subscription-hero { background:linear-gradient(135deg,#ffffff 0%,#f6fbfa 48%,#fff6e5 100%); }
.result-hero.is-passed { background:linear-gradient(135deg,#ffffff 0%,#eefaf5 58%,#eaf8ff 100%); }
.result-hero.is-failed { background:linear-gradient(135deg,#ffffff 0%,#fff7ee 58%,#f1f7ff 100%); }
.result-hero-modern { position:relative; overflow:hidden; align-items:center; min-height:190px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:26px; }
.result-hero-modern:before { content:""; position:absolute; width:320px; height:320px; right:-90px; top:-170px; border-radius:50%; background:rgba(20,122,105,.09); pointer-events:none; }
.result-hero-modern:after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,var(--primary),#44bda8,#f2b24a); opacity:.85; }
.result-hero-modern > * { position:relative; z-index:1; }
.result-hero-copy h1 { font-size:38px; line-height:1.05; }
.result-hero-copy p { max-width:720px; font-size:15px; line-height:1.6; }
.result-hero-score { position:relative; width:138px; height:138px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--primary) 0 var(--score-angle),#e5efec var(--score-angle) 360deg); box-shadow:0 20px 44px rgba(20,122,105,.13); }
.result-hero-score:before { content:""; position:absolute; width:106px; height:106px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px rgba(213,232,227,.85); }
.result-hero-score span { position:relative; display:flex; flex-direction:column; align-items:center; }
.result-hero-score strong { font-size:28px; letter-spacing:-1px; }
.result-hero-score small { color:var(--muted); font-size:11px; font-weight:900; }
.result-summary-grid .summary-card { min-height:158px; }
.result-mini-pill { padding:6px 9px; border-radius:99px; background:#eef8f5; color:var(--primary); font-size:11px; font-weight:900; }
.result-mini-pill.is-passed { background:#e7f6f1; color:#147a69; }
.result-mini-pill.is-failed { background:#fff0ea; color:#c65b3c; }
.result-outcome-card.is-passed { border-color:#b8ded5; background:linear-gradient(180deg,#fff,#f3fbf8); }
.result-outcome-card.is-failed { border-color:#f3d2c1; background:linear-gradient(180deg,#fff,#fff8f3); }
.dashboard-summary-upgraded .summary-card { min-height:170px; position:relative; overflow:hidden; background:linear-gradient(180deg,#fff,#fbfefd); transition:.18s ease; }
.dashboard-summary-upgraded .summary-card:after { content:""; position:absolute; width:120px; height:120px; right:-48px; top:-58px; border-radius:50%; background:rgba(20,122,105,.06); pointer-events:none; }
.dashboard-summary-upgraded .summary-card:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(21,69,61,.08); border-color:#c5ded8; }
.dashboard-summary-upgraded .summary-card > * { position:relative; z-index:1; }
.dashboard-summary-upgraded .summary-card h2 { letter-spacing:-.9px; }
.result-confetti { position:fixed; inset:0; z-index:140; pointer-events:none; overflow:hidden; }
.result-confetti span { position:absolute; top:-22px; left:calc(var(--x) * 1%); width:9px; height:16px; border-radius:3px; background:var(--confetti-color); opacity:.95; animation:resultConfettiFall var(--duration) cubic-bezier(.2,.75,.24,1) var(--delay) forwards; transform:translate3d(0,0,0) rotate(0deg); }
.result-confetti span:nth-child(3n) { width:12px; height:12px; border-radius:50%; }
.result-confetti span:nth-child(4n) { width:16px; height:7px; }
@keyframes resultConfettiFall {
  0% { transform:translate3d(0,-20px,0) rotate(0deg); opacity:0; }
  12% { opacity:1; }
  100% { transform:translate3d(34px,105vh,0) rotate(620deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .result-confetti { display:none; }
}
.pace-summary small strong { color:var(--text); }
.pace-summary { cursor:pointer; }
.pace-summary:focus-visible { outline:3px solid rgba(20,122,105,.22); outline-offset:3px; }
.pace-meter { height:6px; margin:12px 0 9px; border-radius:99px; background:#edf3f1; overflow:hidden; }
.pace-meter span { display:block; height:100%; max-width:100%; border-radius:inherit; background:linear-gradient(90deg,#37c4ad,var(--primary),#f0a43a); }
.pace-click-hint { margin-top:10px; display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-size:11px; font-style:normal; font-weight:900; }
.dashboard-focus-grid { align-items:stretch; }
.continue-panel { background:linear-gradient(180deg,#fff,#fbfefd); }
.quick-practice-grid-large { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:13px; }
.quick-practice-grid-large a { min-height:108px; padding:18px; grid-template-columns:56px minmax(0,1fr) 34px; gap:16px; border-radius:18px; background:linear-gradient(180deg,#fff,#fbfefd); transition:.18s ease; }
.quick-practice-grid-large a:hover { transform:translateY(-2px); border-color:#bddbd4; box-shadow:0 16px 34px rgba(21,69,61,.07); }
.quick-practice-grid-large .quick-icon { width:56px; height:56px; border-radius:17px; font-size:26px; }
.quick-practice-grid-large strong { font-size:15px; }
.quick-practice-grid-large small { margin-top:5px; font-size:12px; }
.quick-practice-grid-large a > i:last-child { width:34px; height:34px; display:grid; place-items:center; border-radius:12px; background:#f5faf8; color:var(--primary); font-size:20px; }
.route-summary-strip { margin-top:18px; padding:13px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; border:1px solid var(--line); border-radius:17px; background:#f7fbfa; }
.route-summary-strip div { min-height:62px; padding:10px; display:flex; align-items:center; gap:10px; border-radius:13px; background:#fff; }
.route-summary-strip i { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; background:var(--primary-soft); color:var(--primary); font-size:19px; }
.route-summary-strip strong { display:block; font-size:17px; line-height:1; }
.route-summary-strip small { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:800; line-height:1.25; }
.account-card { background:linear-gradient(180deg,#fff,#fbfefd); }
.access-status-card { padding:18px; display:grid; gap:7px; place-items:center; border-radius:18px; border:1px solid var(--line); background:linear-gradient(180deg,#fff,#f4faf8); text-align:center; }
.access-status-card span { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:var(--primary-soft); color:var(--primary); font-size:29px; }
.access-status-card strong { font-size:19px; letter-spacing:-.3px; }
.access-status-card small { color:var(--muted); font-size:12px; line-height:1.45; }
.access-status-card.is-inactive { background:linear-gradient(180deg,#fff,#fff5f2); }
.access-status-card.is-inactive span { background:#fff0ea; color:#c85f3d; }
.access-mini-list { margin:14px 0; display:grid; gap:8px; text-align:left; }
.access-mini-list div { padding:10px 12px; display:flex; align-items:center; gap:9px; border-radius:12px; background:#f7faf9; color:#40504c; font-size:12px; font-weight:700; }
.access-mini-list i { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:var(--primary-soft); color:var(--primary); }
.dashboard-table-panel { overflow:hidden; }
.modern-table td { vertical-align:middle; }
.modern-table td small { color:var(--muted); font-size:11px; white-space:normal; }

/* Learning pages */
.learning-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; }
.learning-main { display:grid; gap:18px; }
.learning-side { position:sticky; top:96px; display:grid; gap:18px; }
.learning-vehicle-modern { position:relative; overflow:hidden; padding:26px; background:linear-gradient(180deg,#fff,#fbfefd); }
.learning-vehicle-modern:before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--primary),#6fc7b7,#f3b44a); }
.learning-vehicle .panel-heading h2 { display:flex; align-items:center; gap:10px; }
.learning-vehicle .panel-heading h2 i { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--primary-soft); color:var(--primary); }
.learning-block-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.learning-block-meta span { min-height:30px; padding:0 10px; display:inline-flex; align-items:center; gap:7px; border:1px solid #d8ebe6; border-radius:999px; background:#f8fcfb; color:#42544f; font-size:11px; font-weight:850; }
.learning-block-meta i { color:var(--primary); font-size:15px; }
.topic-picker-head { margin:18px 0 10px; display:flex; align-items:end; justify-content:space-between; gap:14px; }
.topic-picker-head h3 { margin:2px 0 0; font-size:20px; letter-spacing:-.3px; }
.topic-picker-head small { min-height:30px; padding:0 10px; display:inline-flex; align-items:center; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:11px; font-weight:900; white-space:nowrap; }
.topic-list { display:grid; gap:9px; margin-bottom:18px; }
.topic-row { min-height:62px; padding:13px 14px; display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; border:1px solid var(--line); border-radius:13px; background:#fbfdfc; }
.topic-row strong { display:block; font-size:13px; }
.topic-row small { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.45; }
.topic-row > span { padding:6px 9px; border-radius:99px; background:var(--primary-soft); color:var(--primary); font-size:10px; font-weight:800; }
.topic-tab-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:2px 0 18px; padding:12px; overflow:visible; border:1px solid var(--line); border-radius:20px; background:linear-gradient(135deg,#f7fbfa,#fff); }
.topic-tab-button { min-width:0; min-height:74px; padding:12px 14px; display:grid; align-content:center; gap:5px; border:1px solid #dce9e6; border-radius:15px; background:#fff; color:#53635f; text-align:left; cursor:pointer; transition:.18s; box-shadow:0 8px 18px rgba(21,69,61,.03); }
.topic-visual { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#eef8f5; color:var(--primary); font-size:21px; overflow:hidden; }
.topic-visual.has-image { border:1px solid rgba(20,122,105,.16); background:#fff; box-shadow:0 8px 18px rgba(21,69,61,.05); }
.topic-visual img { width:100%; height:100%; display:block; object-fit:contain; padding:5px; }
.topic-tab-button span { font-size:13px; font-weight:900; color:var(--text); }
.topic-tab-button small { color:var(--muted); font-size:10px; font-weight:800; line-height:1.35; }
.topic-tab-button:hover { transform:translateY(-1px); border-color:#bddbd4; box-shadow:0 14px 28px rgba(21,69,61,.06); }
.topic-tab-button.active { background:linear-gradient(180deg,#fff,#f0faf7); border-color:rgba(20,122,105,.38); box-shadow:0 14px 30px rgba(21,69,61,.08); }
.topic-tab-button.active span, .topic-tab-button.active small { color:var(--primary); }
.topic-tab-button.active .topic-visual:not(.has-image) { background:var(--primary); color:#fff; }
.topic-panel-stack { display:grid; }
.topic-panel { display:none; }
.topic-panel.active { display:block; animation:topicPanelIn .18s ease both; }
@keyframes topicPanelIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.topic-panel-head { margin-bottom:14px; padding:20px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg,#fff 0%,#fbfefd 62%,#f6fbf7 100%); display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; }
.topic-panel-head { position:relative; overflow:hidden; }
.topic-panel-head:after { content:""; position:absolute; width:170px; height:170px; right:-76px; top:-92px; border-radius:50%; background:rgba(20,122,105,.06); pointer-events:none; }
.topic-panel-head > * { position:relative; z-index:1; }
.topic-panel-head > div:only-child { grid-column:1 / -1; }
.topic-panel-head h3 { margin:4px 0 9px; font-size:24px; letter-spacing:-.3px; }
.topic-panel-head p { max-width:780px; margin:0; color:#5f6f6b; font-size:13px; line-height:1.8; }
.topic-panel-image { width:72px!important; height:72px!important; max-width:72px!important; max-height:72px!important; aspect-ratio:1 / 1; display:block; flex:0 0 72px; border-radius:18px; object-fit:contain; padding:8px; border:1px solid rgba(203,222,217,.9); background:#eef8f5; box-shadow:0 14px 30px rgba(21,69,61,.07); }
.topic-panel-image.placeholder { display:grid; place-items:center; color:var(--primary); font-size:30px; }
.topic-panel-meta { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.topic-panel-meta span { min-height:32px; padding:0 11px; display:inline-flex; align-items:center; gap:7px; border-radius:999px; background:#eef8f5; color:var(--primary); font-size:11px; font-weight:900; white-space:nowrap; }
.topic-panel-meta i { font-size:15px; }
.topic-tips-trigger {
  min-height:32px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid rgba(224,143,31,.18);
  border-radius:999px;
  background:#fff6e7;
  color:#b46a09;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
  transition:.18s ease;
}
.topic-tips-trigger:hover {
  transform:translateY(-1px);
  border-color:rgba(224,143,31,.34);
  box-shadow:0 10px 22px rgba(190,126,30,.1);
}
.topic-tips-modal[hidden] { display:none; }
.topic-tips-modal {
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:22px;
}
.topic-tips-backdrop {
  position:absolute;
  inset:0;
  border:0;
  background:rgba(12,35,31,.58);
  backdrop-filter:blur(9px);
  cursor:pointer;
}
.topic-tips-card {
  position:relative;
  width:min(620px, 100%);
  max-height:min(760px, calc(100vh - 44px));
  overflow:auto;
  padding:34px;
  border:1px solid rgba(203,222,217,.95);
  border-radius:28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(244,180,74,.15), transparent 190px),
    linear-gradient(180deg,#fff,#fbfefd);
  box-shadow:0 34px 90px rgba(11,48,42,.3);
  transform:translateY(12px) scale(.98);
  opacity:0;
  transition:.18s ease;
}
.topic-tips-modal.open .topic-tips-card {
  transform:none;
  opacity:1;
}
.topic-tips-close {
  position:absolute;
  right:18px;
  top:18px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--text);
  font-size:22px;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(20,80,70,.06);
}
.topic-tips-icon {
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:22px;
  background:#fff2db;
  color:#d98422;
  font-size:31px;
  box-shadow:0 16px 36px rgba(190,126,30,.12);
}
.topic-tips-card > small {
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:#fff6e7;
  color:#b46a09;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.topic-tips-card h2 {
  margin:14px 48px 6px 0;
  font-size:clamp(26px, 4vw, 38px);
  line-height:1.08;
  letter-spacing:0;
}
.topic-tips-subtitle {
  margin:0 0 18px;
  color:var(--muted);
  font-size:14px;
}
.topic-tips-content {
  padding:18px;
  border:1px solid rgba(244,180,74,.22);
  border-radius:20px;
  background:linear-gradient(180deg,#fffaf1,#fff);
  color:#40504c;
  font-size:14px;
  line-height:1.75;
}
.topic-tips-actions {
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
}
.exercise-card-grid-modern { align-items:stretch; }
.exercise-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.exercise-card { min-height:96px; padding:15px; display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#fff,#fbfefd); transition:.18s ease; }
.exercise-card:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(21,69,61,.07); border-color:#bddbd4; }
.exercise-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:#eaf2fc; color:#3979be; font-size:23px; }
.exercise-card strong { display:block; font-size:13px; }
.exercise-card small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.topic-empty-card { grid-column:1 / -1; min-height:138px; padding:20px; display:grid; justify-items:start; gap:7px; border:1px dashed #c9ddd8; border-radius:18px; background:#fbfdfc; }
.topic-empty-card i { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:#fff4df; color:#d98422; font-size:23px; }
.topic-empty-card strong { color:var(--text); font-size:15px; }
.topic-empty-card p { max-width:620px; margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.empty-copy { margin:0; color:var(--muted); font-size:13px; }
.side-exercise-list { display:grid; gap:10px; }
.side-exercise-list button { width:100%; min-height:82px; padding:13px; display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; border:1px solid var(--line); border-radius:15px; background:linear-gradient(180deg,#fff,#fbfefd); text-align:left; cursor:pointer; transition:.18s; }
.side-exercise-list button:hover { border-color:#bddbd4; background:#fbfdfc; }
.side-exercise-list button span { width:42px; height:42px; grid-row:span 2; display:grid; place-items:center; border-radius:13px; background:var(--primary-soft); color:var(--primary); font-size:21px; }
.side-exercise-list strong { font-size:12px; line-height:1.25; }
.side-exercise-list small { color:var(--muted); font-size:10px; }
.learning-side-card { overflow:hidden; background:linear-gradient(180deg,#fff,#fbfefd); }
.muted-card { background:linear-gradient(180deg,#fff,#fffaf0); }
.muted-card h2 { margin:12px 0 6px; font-size:18px; }
.muted-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }

.route-focus-card { margin:14px 0 16px; padding:16px; display:grid; grid-template-columns:48px minmax(0,1fr); gap:13px; align-items:center; border:1px solid #dcebe7; border-radius:18px; background:linear-gradient(135deg,#f7fbfa,#fff); }
.route-focus-card span { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--primary); color:#fff; font-size:24px; box-shadow:0 14px 28px rgba(20,122,105,.16); }
.route-focus-card strong { display:block; color:var(--text); font-size:15px; }
.route-focus-card small { display:block; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.45; }
.exam-overview-grid { margin:18px 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.exam-overview-card { min-height:124px; display:flex; align-items:flex-start; gap:13px; }
.exam-overview-card .summary-icon { flex:0 0 auto; }
.exam-overview-card small { color:#8b9995; font-size:10px; font-weight:900; text-transform:uppercase; }
.exam-overview-card strong { display:block; margin:6px 0 3px; color:var(--text); font-size:28px; line-height:1; }
.exam-overview-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.exam-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.exam-card-grid-modern { align-items:stretch; }
.exam-card { display:flex; flex-direction:column; gap:14px; min-height:370px; position:relative; overflow:hidden; background:linear-gradient(180deg,#fff,#fbfefd); }
.exam-card:before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,#3979be,var(--primary),#f0b04d); }
.exam-card:after { content:""; position:absolute; width:150px; height:150px; right:-75px; top:-80px; border-radius:50%; background:rgba(20,122,105,.06); pointer-events:none; }
.exam-card > * { position:relative; z-index:1; }
.exam-card-top { display:flex; align-items:center; justify-content:space-between; }
.exam-card-badges { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.exam-card-kicker { width:max-content; display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-size:10px; font-weight:900; text-transform:uppercase; }
.exam-card h2 { margin:0; font-size:22px; line-height:1.2; letter-spacing:-.5px; }
.exam-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.exam-card-readiness { margin-top:4px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#53635f; font-size:11px; font-weight:850; }
.exam-card-readiness strong { color:var(--primary); font-size:13px; }
.exam-meta-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:auto; }
.exam-meta-grid span { padding:12px; border:1px solid var(--line); border-radius:14px; background:#fbfdfc; }
.exam-meta-grid strong { display:block; font-size:15px; }
.exam-meta-grid small { color:var(--muted); font-size:10px; }
.exam-progress-preview { height:7px; border-radius:99px; background:#edf3f1; overflow:hidden; }
.exam-progress-preview span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#43b9a5); }
.exam-card-fill { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:11px 12px; border:1px solid rgba(20,122,105,.12); border-radius:15px; background:#f4fbf9; color:#53635f; font-size:11px; font-weight:850; }
.exam-card-fill span { display:inline-flex; align-items:center; gap:7px; }
.exam-card-fill i { color:var(--primary); font-size:16px; }
.exam-card-fill b { color:var(--primary); white-space:nowrap; }
.exam-empty-state { grid-column:1 / -1; min-height:360px; padding:34px; display:grid; grid-template-columns:90px minmax(0,1fr); gap:22px; align-items:start; background:linear-gradient(135deg,#fff,#f8fcfb 62%,#fff7e8); overflow:hidden; position:relative; }
.exam-empty-state:after { content:""; position:absolute; width:260px; height:260px; right:-120px; top:-120px; border-radius:50%; background:rgba(20,122,105,.07); pointer-events:none; }
.exam-empty-state > * { position:relative; z-index:1; }
.exam-empty-icon { width:90px; height:90px; display:grid; place-items:center; border-radius:28px; background:var(--primary-soft); color:var(--primary); font-size:44px; box-shadow:0 20px 44px rgba(20,122,105,.12); }
.exam-empty-state h2 { margin:5px 0 8px; font-size:28px; line-height:1.15; }
.exam-empty-state p { max-width:760px; margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
.exam-empty-steps { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.exam-empty-steps div { min-height:112px; padding:16px; display:grid; align-content:start; gap:6px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.78); }
.exam-empty-steps i { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#fff4df; color:#d98422; font-size:21px; }
.exam-empty-steps strong { color:var(--text); font-size:13px; }
.exam-empty-steps small { color:var(--muted); font-size:11px; line-height:1.45; }
.exam-empty-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px; }
.subscription-card-grid .exam-card { min-height:285px; }
.subscription-featured { border-color:#f2cf93; background:linear-gradient(180deg,#fff,#fffbf2); box-shadow:0 22px 50px rgba(190,126,30,.12); }
.subscription-plan-card:before { background:linear-gradient(90deg,var(--secondary),var(--primary)); }
.subscription-price { margin-top:auto; color:var(--primary); font-size:38px; line-height:1; font-weight:800; letter-spacing:-1px; }
.subscription-price span { margin-right:5px; color:var(--muted); font-size:15px; letter-spacing:0; }
.referral-box { margin-top:auto; padding:12px; border:1px dashed #b8d7d0; border-radius:12px; background:#f7fbfa; color:var(--primary); font-size:11px; font-weight:800; overflow-wrap:anywhere; }
.subscription-active-banner { margin-bottom:18px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center; padding:22px; border-radius:22px; background:linear-gradient(135deg,#ffffff 0%,#eefaf5 58%,#fff7e6 100%); box-shadow:0 18px 45px rgba(21,69,61,.07); }
.subscription-active-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:var(--primary); color:#fff; font-size:30px; box-shadow:0 16px 34px rgba(20,122,105,.18); }
.subscription-active-copy span { color:var(--primary); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.8px; }
.subscription-active-copy h2 { margin:4px 0 4px; font-size:24px; letter-spacing:-.6px; }
.subscription-active-copy p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.subscription-active-copy strong { color:var(--text); }
.subscription-active-meta { min-width:116px; min-height:88px; display:grid; place-items:center; align-content:center; border:1px solid rgba(20,122,105,.14); border-radius:18px; background:rgba(255,255,255,.74); text-align:center; }
.subscription-active-meta strong { color:var(--primary); font-size:32px; line-height:1; }
.subscription-active-meta small { margin-top:5px; color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; }
.subscription-plan-disabled { opacity:.74; background:linear-gradient(180deg,#fff,#f8fbfa); }
.subscription-plan-disabled:before { opacity:.45; }
.subscription-disabled-button { cursor:not-allowed; opacity:.82; background:#ddebe8!important; color:#66827c!important; box-shadow:none!important; }
.subscription-disabled-note { display:block; margin-top:9px; color:var(--muted); font-size:11px; text-align:center; }
.subscription-referral-card { border-color:#d8c8f2; background:linear-gradient(180deg,#fff,#fbf8ff); }
.subscription-promo-panel { margin-bottom:18px; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,460px); gap:18px; align-items:end; background:linear-gradient(135deg,#fff,#f3fbf8 62%,#fff8e8); }
.subscription-promo-panel h2 { margin:4px 0 6px; font-size:24px; letter-spacing:-.5px; }
.subscription-promo-panel p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.subscription-promo-panel form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; }
.subscription-promo-panel label { display:grid; gap:6px; color:var(--text); font-size:12px; font-weight:900; }
.subscription-promo-panel input { min-height:46px; border:1px solid var(--line); border-radius:14px; padding:0 14px; background:#fff; color:var(--text); font-weight:900; text-transform:uppercase; outline:0; }
.subscription-promo-panel input:focus { border-color:rgba(20,122,105,.42); box-shadow:0 0 0 4px rgba(20,122,105,.08); }
.subscription-promo-used { min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(20,122,105,.14); border-radius:14px; background:rgba(255,255,255,.76); color:var(--primary); font-size:13px; font-weight:900; }

.dashboard-grid.two-columns { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:18px; align-items:start; }
.ticket-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 16px; padding:7px; border:1px solid var(--line); border-radius:17px; background:#f7fbfa; }
.ticket-tabs a { min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:13px; color:#52615e; text-decoration:none; font-size:12px; font-weight:900; transition:.16s ease; }
.ticket-tabs a:hover { background:#fff; color:var(--primary); }
.ticket-tabs a i { font-size:18px; }
.ticket-tabs a strong { min-width:24px; height:24px; display:grid; place-items:center; border-radius:999px; background:#fff; color:var(--primary); font-size:11px; }
.ticket-tabs a.active { background:var(--primary); color:#fff; box-shadow:0 12px 26px rgba(20,122,105,.18); }
.ticket-tabs a.active strong { color:var(--primary); }
.support-ticket-list { display:grid; gap:10px; }
.support-ticket-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:16px; background:#fbfdfc; color:var(--text); text-decoration:none; transition:.16s ease; }
.support-ticket-card:hover { transform:translateY(-1px); border-color:rgba(20,122,105,.28); background:#f6fbfa; }
.support-ticket-card strong { display:block; font-size:13px; }
.support-ticket-card small { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.45; }
.support-ticket-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--primary-soft); color:var(--primary); font-size:22px; }
.ticket-thread { display:grid; gap:12px; margin-bottom:18px; }
.ticket-message { max-width:82%; padding:14px; border:1px solid var(--line); border-radius:18px; background:#fbfdfc; }
.ticket-message.admin { justify-self:end; border-color:rgba(20,122,105,.18); background:#effaf6; }
.ticket-message div { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.ticket-message strong { font-size:13px; }
.ticket-message small { color:var(--muted); font-size:11px; }
.ticket-message p { margin:9px 0 0; color:#42514d; font-size:13px; line-height:1.6; white-space:pre-wrap; }
.ticket-detail-panel { display:grid; gap:18px; }
.ticket-reply-form { border-top:1px solid var(--line); padding-top:18px; }

.study-shell { display:grid; gap:16px; max-width:920px; margin:0 auto; }
.study-header { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.study-header-modern, .study-progress-modern, .question-player-modern { border-radius:22px; box-shadow:0 18px 45px rgba(21,69,61,.07); }
.study-header-modern { background:linear-gradient(135deg,#fff,#f2faf7); }
.study-header h1 { margin:3px 0; font-size:28px; line-height:1.18; letter-spacing:-.7px; }
.study-header p { margin:0; color:var(--muted); font-size:13px; }
.study-header-tools { display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap; }
.study-read-toggle { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:14px; padding:0 13px; background:#fff; color:var(--text); font-size:12px; font-weight:900; cursor:pointer; }
.study-read-toggle i { color:var(--primary); font-size:21px; }
.study-read-toggle.active { border-color:rgba(20,122,105,.42); background:var(--primary-soft); color:var(--primary); }
.study-read-toggle.compact { width:44px; padding:0; }
.study-timer { min-width:128px; padding:12px 14px; display:grid; grid-template-columns:auto 1fr; gap:2px 9px; align-items:center; border:1px solid var(--line); border-radius:14px; background:#fbfdfc; }
.study-timer i { grid-row:span 2; color:var(--primary); font-size:25px; }
.study-timer strong { font-size:18px; line-height:1; }
.study-timer small { color:var(--muted); font-size:10px; }
.study-progress { display:grid; gap:10px; }
.study-progress > div:first-child { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; font-weight:800; }
.study-progress > div:first-child strong { color:var(--primary); }
.study-progress-track, .study-time-track { height:8px; border-radius:99px; background:#edf3f1; overflow:hidden; }
.study-progress-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#43b9a5); }
.study-time-track { height:5px; }
.study-time-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f1a42d,#e06d2f); transition:width .25s; }
.question-player { padding:30px; }
.question-player-modern { border-color:#cfe5df; }
.study-question-image-frame { min-height:220px; max-height:390px; margin-bottom:22px; padding:16px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:17px; background:linear-gradient(135deg,#fbfdfc,#f3f8f6); overflow:hidden; }
.study-question-image { display:block; width:auto; height:auto; max-width:100%; max-height:355px; object-fit:contain; border-radius:13px; }
.question-topic { display:inline-flex; align-items:center; gap:6px; margin-bottom:11px; padding:6px 10px; border-radius:99px; background:var(--primary-soft); color:var(--primary); font-size:11px; font-weight:800; }
.question-player h2 { margin:0 0 22px; font-size:25px; line-height:1.35; letter-spacing:-.4px; }
.study-answer-list { display:grid; gap:11px; }
.study-answer-option { min-height:72px; padding:14px; display:grid; grid-template-columns:auto 36px 1fr; gap:13px; align-items:center; border:1px solid var(--line); border-radius:16px; background:#fff; cursor:pointer; transition:.18s; }
.study-answer-option:hover, .study-answer-option:has(input:checked) { border-color:var(--primary); background:#f3fbf9; }
.study-answer-option input { accent-color:var(--primary); }
.study-answer-option span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#eef5f3; color:var(--primary); font-weight:800; }
.study-answer-option strong { font-size:14px; line-height:1.35; }
.study-answer-option.feedback-option { grid-template-columns:auto 36px 1fr auto; cursor:default; }
.study-answer-option.feedback-option:hover { border-color:var(--line); background:#fff; }
.study-answer-option.feedback-option > i { color:#a5b2ae; font-size:22px; }
.study-answer-option.feedback-option em { color:var(--muted); font-size:10px; font-style:normal; font-weight:900; text-align:right; }
.study-answer-option.feedback-option.is-correct { border-color:#9ed8cb; background:#edf9f5; }
.study-answer-option.feedback-option.is-correct > i { color:#16816e; }
.study-answer-option.feedback-option.is-correct span { background:#16816e; color:#fff; }
.study-answer-option.feedback-option.is-wrong { border-color:#e4a1a1; background:#fff3f3; }
.study-answer-option.feedback-option.is-wrong > i { color:#c65454; }
.study-answer-option.feedback-option.is-wrong span { background:#c65454; color:#fff; }
.study-answer-option.feedback-option.is-chosen { box-shadow:0 0 0 3px rgba(20,122,105,.08); }
.question-hint { display:flex; align-items:center; gap:8px; margin:10px 0 0; color:var(--muted); font-size:12px; font-weight:800; }
.open-answer-field { padding:18px; border:1px solid var(--line); border-radius:18px; background:#fbfdfc; }
.open-answer-field label { display:grid; gap:9px; color:var(--text); font-size:12px; font-weight:900; }
.open-answer-input-wrap { min-height:58px; display:flex; align-items:center; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#fff; transition:.18s; }
.open-answer-input-wrap:focus-within { border-color:var(--primary); box-shadow:0 0 0 4px rgba(20,122,105,.08); }
.open-answer-input-wrap input { width:100%; height:58px; border:0; outline:0; padding:0 16px; background:transparent; color:var(--text); font:inherit; font-size:18px; font-weight:800; }
.open-answer-input-wrap em { min-width:72px; align-self:stretch; display:grid; place-items:center; padding:0 14px; background:var(--primary-soft); color:var(--primary); font-style:normal; font-size:13px; font-weight:900; }
.open-answer-feedback-card, .review-open-answer { margin-bottom:14px; padding:15px; display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:center; border:1px solid var(--line); border-radius:17px; background:#fbfdfc; }
.open-answer-feedback-card > span, .review-open-answer > span { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; font-size:24px; }
.open-answer-feedback-card small, .review-open-answer small { display:block; color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; }
.open-answer-feedback-card strong, .review-open-answer strong { display:block; margin-top:3px; font-size:18px; }
.open-answer-feedback-card.is-correct, .review-open-answer.is-correct { border-color:#9ed8cb; background:#edf9f5; }
.open-answer-feedback-card.is-correct > span, .review-open-answer.is-correct > span { color:#16816e; background:#dff3ee; }
.open-answer-feedback-card.is-wrong, .review-open-answer.is-wrong { border-color:#e4a1a1; background:#fff3f3; }
.open-answer-feedback-card.is-wrong > span, .review-open-answer.is-wrong > span { color:#c65454; background:#ffebeb; }
.instant-feedback { margin-top:18px; padding:17px; display:grid; grid-template-columns:auto 1fr; gap:13px; border:1px solid var(--line); border-radius:18px; background:#fbfdfc; }
.instant-feedback-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; font-size:27px; }
.instant-feedback.is-correct { border-color:#9ed8cb; background:linear-gradient(135deg,#f2fbf8,#fff); }
.instant-feedback.is-correct .instant-feedback-icon { color:#16816e; background:#e1f4ef; }
.instant-feedback.is-wrong { border-color:#e4a1a1; background:linear-gradient(135deg,#fff4f4,#fff); }
.instant-feedback.is-wrong .instant-feedback-icon { color:#c65454; background:#ffebeb; }
.instant-feedback span { display:block; color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; }
.instant-feedback h3 { margin:3px 0 8px; font-size:19px; }
.instant-feedback p { margin:4px 0; color:var(--muted); font-size:13px; }
.instant-feedback p strong { color:var(--text); }
.instant-explanation { margin-top:11px; padding:12px; display:grid; grid-template-columns:auto 1fr; gap:9px; border-radius:13px; background:#f3faf8; }
.instant-explanation i { color:var(--primary); font-size:20px; }
.instant-explanation p { margin:0; line-height:1.55; }
.instant-explanation.muted { background:#f8faf9; }
.instant-feedback-summary { margin-top:18px; padding:13px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:17px; background:#fbfdfc; }
.instant-feedback-summary-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; font-size:24px; }
.instant-feedback-summary.is-correct { border-color:#9ed8cb; background:linear-gradient(135deg,#f0faf7,#fff); }
.instant-feedback-summary.is-correct .instant-feedback-summary-icon { color:#16816e; background:#dff3ee; animation:thumbPop .55s ease both; }
.instant-feedback-summary.is-wrong { border-color:#e4a1a1; background:linear-gradient(135deg,#fff4f4,#fff); }
.instant-feedback-summary.is-wrong .instant-feedback-summary-icon { color:#c65454; background:#ffebeb; }
.instant-feedback-summary span { display:block; color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; }
.instant-feedback-summary strong { display:block; margin-top:2px; font-size:14px; }
.answer-feedback-overlay { position:fixed; inset:0; z-index:5000; display:none; place-items:center; padding:24px; background:radial-gradient(circle at 52% 45%,rgba(20,122,105,.22),transparent 34%),rgba(7,26,23,.68); backdrop-filter:blur(16px); }
.answer-feedback-overlay.is-open { display:grid; animation:feedbackFade .16s ease both; }
.answer-feedback-modal { position:relative; width:min(640px,100%); padding:30px; border:1px solid rgba(255,255,255,.72); border-radius:30px; background:linear-gradient(180deg,#fff 0%,#fbfefd 100%); box-shadow:0 34px 110px rgba(2,20,17,.38); animation:feedbackRise .24s cubic-bezier(.2,.9,.2,1) both; overflow:hidden; }
.answer-feedback-modal:before { content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,var(--primary),#62c8b8,#f0b04d); }
.answer-feedback-modal:after { content:""; position:absolute; width:230px; height:230px; right:-95px; top:-110px; border-radius:50%; background:rgba(20,122,105,.08); pointer-events:none; }
.answer-feedback-modal.is-wrong:before { background:linear-gradient(90deg,#d45b5b,#f4b37a); }
.answer-feedback-close { position:absolute; top:18px; right:18px; z-index:2; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.86); color:var(--text); font-size:25px; cursor:pointer; transition:.18s; }
.answer-feedback-close:hover { transform:translateY(-1px); border-color:#bddbd4; box-shadow:0 12px 24px rgba(16,80,70,.08); }
.answer-feedback-hero { position:relative; z-index:1; padding:0 52px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.answer-feedback-burst { width:78px; height:78px; display:grid; place-items:center; border-radius:26px; color:#16816e; background:linear-gradient(145deg,#dff3ee,#f5fffc); font-size:42px; box-shadow:0 20px 38px rgba(20,122,105,.18); animation:thumbPop .62s cubic-bezier(.22,1.4,.36,1) both; }
.answer-feedback-modal.is-wrong .answer-feedback-burst { color:#c65454; background:#ffebeb; box-shadow:0 18px 35px rgba(198,84,84,.12); }
.answer-feedback-hero small { display:inline-flex; align-items:center; min-height:28px; margin-top:18px; padding:0 10px; border-radius:999px; color:var(--primary); background:var(--primary-soft); font-size:11px; font-weight:900; text-transform:uppercase; }
.answer-feedback-modal.is-wrong .answer-feedback-hero small { color:#c65454; }
.answer-feedback-modal.is-wrong .answer-feedback-hero small { background:#fff0f0; }
.answer-feedback-hero h2 { margin:8px 0 9px; font-size:34px; line-height:1.06; letter-spacing:-.7px; }
.answer-feedback-hero p { max-width:500px; margin:0 auto; color:#5f6f6b; font-size:15px; line-height:1.65; }
.answer-feedback-compare { position:relative; z-index:1; margin-top:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.answer-feedback-compare div { padding:15px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 12px 30px rgba(16,80,70,.05); }
.answer-feedback-compare div:last-child { border-color:rgba(20,122,105,.24); background:linear-gradient(180deg,#fff,#f2fbf8); }
.answer-feedback-compare span, .answer-feedback-explanation span { display:block; color:var(--muted); font-size:10px; font-weight:900; text-transform:uppercase; }
.answer-feedback-compare strong { display:block; margin-top:6px; font-size:16px; line-height:1.35; }
.answer-feedback-explanation { position:relative; z-index:1; margin-top:13px; padding:16px; display:grid; grid-template-columns:auto 1fr; gap:12px; border-radius:19px; background:#f3faf8; }
.answer-feedback-modal.is-wrong .answer-feedback-explanation { background:#fff8f2; }
.answer-feedback-explanation i { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#fff; color:var(--primary); font-size:23px; }
.answer-feedback-explanation p { margin:5px 0 0; color:#4d5f5a; font-size:14px; line-height:1.65; }
.answer-feedback-actions { position:relative; z-index:1; margin-top:20px; display:flex; justify-content:space-between; gap:12px; }
@keyframes feedbackFade { from { opacity:0; } to { opacity:1; } }
@keyframes feedbackRise { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes thumbPop { 0% { transform:scale(.5) rotate(-10deg); opacity:0; } 60% { transform:scale(1.12) rotate(4deg); opacity:1; } 100% { transform:scale(1) rotate(0); opacity:1; } }
.study-actions { display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
.review-panel-modern { position:relative; overflow:hidden; padding:26px; border-radius:24px; background:linear-gradient(180deg,#fff,#fbfefd); }
.review-panel-modern:before { content:""; position:absolute; width:220px; height:220px; right:-96px; top:-120px; border-radius:50%; background:rgba(20,122,105,.045); pointer-events:none; }
.review-panel-modern > * { position:relative; z-index:1; }
.review-panel-intro { margin:6px 0 0; max-width:640px; color:var(--muted); font-size:13px; line-height:1.55; }
.review-overview-pills { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.review-overview-pills span { min-height:34px; padding:0 11px; display:inline-flex; align-items:center; gap:6px; border-radius:99px; font-size:12px; font-weight:900; }
.review-overview-pills .is-correct { color:#16816e; background:#e5f5f1; }
.review-overview-pills .is-wrong { color:#c65454; background:#ffebeb; }
.review-list { display:grid; gap:20px; }
.review-card { position:relative; overflow:hidden; padding:22px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg,#fff,#fcfffe); box-shadow:0 18px 42px rgba(21,69,61,.06); }
.review-card:before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:#9ed8cb; }
.review-card.is-wrong:before { background:#e4a1a1; }
.review-card-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; }
.review-card-head > span { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:99px; font-size:11px; font-weight:900; }
.review-card-head small { color:var(--muted); font-size:11px; font-weight:800; }
.review-card.is-correct .review-card-head > span { color:#16816e; background:#e5f5f1; }
.review-card.is-wrong .review-card-head > span { color:#c65454; background:#ffebeb; }
.review-topic { margin-bottom:9px; }
.review-card h3 { margin:0 0 15px; font-size:22px; line-height:1.3; letter-spacing:-.45px; }
.review-card p { margin:5px 0; color:var(--muted); font-size:13px; }
.review-card p strong { color:var(--text); }
.review-question-image-frame { min-height:210px; max-height:360px; margin-bottom:18px; padding:14px; display:flex; align-items:center; justify-content:center; border:1px solid #d7e7e3; border-radius:20px; background:linear-gradient(135deg,#fafdfe,#f1f8f6); overflow:hidden; }
.review-question-image { display:block; width:auto; height:auto; max-width:100%; max-height:330px; object-fit:contain; border-radius:15px; box-shadow:0 14px 32px rgba(20,55,49,.12); }
.review-answer-grid { display:grid; gap:10px; margin:15px 0; }
.review-option { min-height:58px; padding:12px 13px; display:grid; grid-template-columns:36px 1fr auto; gap:11px; align-items:center; border:1px solid var(--line); border-radius:15px; background:#fbfdfc; }
.review-option span { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#edf5f3; color:var(--primary); font-weight:900; }
.review-option strong { font-size:14px; line-height:1.35; }
.review-option em { color:var(--muted); font-size:10px; font-style:normal; font-weight:900; text-align:right; }
.review-option.is-correct { border-color:#9ed8cb; background:#edf9f5; }
.review-option.is-correct span { background:#16816e; color:#fff; }
.review-option.is-wrong { border-color:#e4a1a1; background:#fff3f3; }
.review-option.is-wrong span { background:#c65454; color:#fff; }
.review-option.is-chosen { box-shadow:0 0 0 3px rgba(20,122,105,.08); }
.review-answer-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.review-answer-summary p { padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:#fbfdfc; }
.review-explanation { margin-top:14px; padding:16px; display:grid; grid-template-columns:auto 1fr; gap:12px; border-radius:17px; background:#f4faf8; color:#33413e; }
.review-explanation i { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:var(--primary-soft); color:var(--primary); font-size:20px; }
.review-explanation strong { display:block; margin-bottom:3px; }
.review-explanation p { margin:0; color:#52615e; line-height:1.55; }
.review-explanation.muted { background:#f8faf9; }
.review-panel { border-radius:22px; }
.results-hero { background:linear-gradient(135deg,#fff 0%,#f2faf7 58%,#fff7e8 100%); }
.results-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.results-history-panel { border-radius:22px; }
.result-count-pill { display:inline-flex; align-items:center; min-height:32px; padding:0 11px; border-radius:99px; background:var(--primary-soft); color:var(--primary); font-size:11px; font-weight:900; }
.results-filter-form { display:grid; grid-template-columns:minmax(240px,1fr) 190px 170px auto auto; gap:10px; align-items:center; margin:18px 0; padding:12px; border:1px solid var(--line); border-radius:16px; background:#fbfdfc; }
.results-search { min-height:44px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid var(--line); border-radius:13px; background:#fff; color:#8a9995; }
.results-search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); font-weight:700; }
.results-filter-form select { min-height:44px; border:1px solid var(--line); border-radius:13px; padding:0 11px; background:#fff; color:var(--text); font-weight:800; }
.results-filter-form .button { min-height:44px; padding:0 14px; white-space:nowrap; }
.results-history-list { display:grid; gap:12px; }
.result-history-card { padding:14px; display:grid; grid-template-columns:92px 1fr auto; gap:14px; align-items:center; border:1px solid var(--line); border-radius:18px; background:#fff; transition:.18s; }
.result-history-card:hover { transform:translateY(-1px); box-shadow:0 16px 34px rgba(21,69,61,.07); }
.result-history-score { width:76px; height:76px; display:grid; place-items:center; align-content:center; border-radius:22px; background:#eef8f5; color:var(--primary); border:1px solid rgba(20,122,105,.08); }
.result-history-card.is-failed .result-history-score { background:#fff3ed; color:#ce6941; }
.result-history-score strong { font-size:22px; line-height:1; }
.result-history-score span { color:#60706c; font-size:11px; font-weight:900; }
.result-history-card h3 { margin:8px 0 4px; font-size:17px; }
.result-history-card p { margin:0; color:var(--muted); font-size:12px; }
.result-history-card small { display:block; margin-top:5px; color:#7d8a87; font-size:11px; }
.result-history-actions { display:grid; justify-items:end; gap:9px; }
.tiny-link-button { min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); border-radius:11px; padding:0 11px; background:#fff; color:var(--text); font-size:11px; font-weight:900; }
.results-empty-state { padding:34px 18px; display:grid; justify-items:center; gap:8px; border:1px dashed #cbdcd7; border-radius:16px; background:#fbfdfc; text-align:center; }
.results-empty-state i { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:var(--primary-soft); color:var(--primary); font-size:25px; }
.results-empty-state strong { font-size:18px; }
.results-empty-state p { max-width:520px; margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.results-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.results-pagination a { min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); border-radius:12px; padding:0 13px; background:#fff; color:var(--text); font-size:12px; font-weight:900; }
.results-pagination a.disabled { opacity:.45; pointer-events:none; }
.results-pagination span { color:var(--muted); font-size:12px; font-weight:900; }
.settings-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; }
.settings-layout-wide { grid-template-columns:minmax(0,1fr) 360px; }
.settings-stack { display:grid; gap:18px; }
.settings-panel { border-radius:22px; }
.settings-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.settings-choice { min-height:190px; padding:18px; display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,#fff,#fbfefd); cursor:pointer; transition:.18s; }
.settings-choice input { position:absolute; opacity:0; pointer-events:none; }
.settings-choice span { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--primary-soft); color:var(--primary); font-size:25px; }
.settings-choice strong { font-size:17px; }
.settings-choice small { color:var(--muted); font-size:12px; line-height:1.5; }
.settings-choice:has(input:checked) { border-color:var(--primary); box-shadow:0 0 0 4px rgba(20,122,105,.08), 0 18px 34px rgba(21,69,61,.08); transform:translateY(-2px); }
.settings-choice:has(input:checked) span { background:var(--primary); color:#fff; }
.settings-actions { margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; }
.settings-actions form { margin:0; }
.settings-side { position:sticky; top:96px; border-radius:22px; background:linear-gradient(180deg,#fff,#f3faf8); }
.settings-side h2 { margin:14px 0 8px; font-size:20px; }
.settings-side p { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.6; }
.settings-note-list { display:grid; gap:8px; }
.settings-note-list.compact { margin-top:2px; }
.settings-note-list span { display:flex; align-items:center; gap:8px; color:#40504c; font-size:12px; font-weight:700; }
.settings-note-list i { width:22px; height:22px; display:grid; place-items:center; border-radius:8px; background:var(--primary-soft); color:var(--primary); }
.settings-side-button { width:100%; margin-top:20px; }
.account-form-panel { background:linear-gradient(180deg,#fff,#fbfefd); }
.settings-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.settings-form-grid label { display:grid; gap:8px; color:var(--text); font-size:11px; font-weight:900; }
.settings-form-grid input { width:100%; height:50px; border:1px solid var(--line); border-radius:14px; padding:0 14px; background:#fff; color:var(--text); font:inherit; font-size:13px; outline:0; transition:.18s; }
.settings-form-grid input:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(20,122,105,.08); }
.settings-form-grid small, .delete-code-form small { color:#c85f3d; font-size:11px; font-weight:800; }
.danger-zone-panel { border-color:rgba(211,91,91,.32); background:linear-gradient(180deg,#fff,#fff9f8); }
.danger-zone-panel .panel-kicker, .danger-zone-panel h2 { color:#9f3030; }
.danger-zone-panel p { max-width:850px; margin:0; color:#72514d; font-size:13px; line-height:1.7; }
.danger-zone-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:18px; }
.danger-zone-list span { min-height:54px; padding:11px 12px; display:flex; align-items:center; gap:9px; border:1px solid #f1d9d5; border-radius:14px; background:#fff; color:#624846; font-size:12px; font-weight:800; }
.danger-zone-list i { color:#c65345; font-size:20px; }
.danger-button { background:#c65345; color:#fff; box-shadow:0 18px 36px rgba(198,83,69,.18); }
.danger-button:hover { background:#a93f34; }
.danger-modal-icon { background:#fff0ed; color:#c65345; }
.account-delete-modal { width:min(100%,500px); }
.code-input-wrap input { text-align:center; font-size:22px; font-weight:900; letter-spacing:8px; }

@media(max-width:1150px){
  .learning-grid { grid-template-columns:1fr; }
  .learning-side { position:static; }
  .exam-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .results-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .results-filter-form { grid-template-columns:1fr 1fr; }
  .settings-layout { grid-template-columns:1fr; }
  .settings-side { position:static; }
}
@media(max-width:760px){
  .exercise-card-grid, .exam-card-grid, .settings-choice-grid, .register-vehicle-grid { grid-template-columns:1fr; }
  .topic-tab-button { min-width:0; }
  .settings-form-grid, .danger-zone-list { grid-template-columns:1fr; }
  .results-stat-grid, .results-filter-form { grid-template-columns:1fr; }
  .study-header, .study-actions { flex-direction:column; align-items:stretch; }
  .study-header-tools { justify-content:stretch; }
  .study-read-toggle:not(.compact), .study-timer { flex:1 1 auto; }
  .study-actions .button { width:100%; }
  .question-player { padding:20px; }
  .study-question-image-frame { min-height:160px; padding:10px; }
  .question-player h2 { font-size:21px; }
  .study-answer-option { grid-template-columns:auto 30px 1fr; }
  .study-answer-option.feedback-option { grid-template-columns:auto 30px 1fr; }
  .study-answer-option.feedback-option em { grid-column:3; text-align:left; }
  .instant-feedback { grid-template-columns:1fr; }
  .instant-feedback-summary { grid-template-columns:auto 1fr; }
  .instant-feedback-summary .tiny-link-button { grid-column:1 / -1; justify-content:center; }
  .answer-feedback-overlay { padding:14px; align-items:end; }
  .answer-feedback-modal { padding:22px; border-radius:22px 22px 0 0; }
  .answer-feedback-compare { grid-template-columns:1fr; }
  .answer-feedback-actions { flex-direction:column; }
  .answer-feedback-actions .button { width:100%; }
  .review-answer-summary { grid-template-columns:1fr; }
  .review-option { grid-template-columns:32px 1fr; }
  .review-option em { grid-column:2; text-align:left; }
  .result-history-card { grid-template-columns:1fr; }
  .result-history-score { width:100%; height:auto; min-height:66px; }
  .result-history-actions { justify-items:stretch; }
  .results-pagination { flex-direction:column; align-items:stretch; }
  .app-hero { padding:22px; }
  .app-hero h1 { font-size:28px; }
  .hero-action-stack, .hero-action-stack .button, .settings-actions .button { width:100%; }
}

@media(max-width:860px){
  .sidebar-close { display:grid; place-items:center; }
  .dashboard-logo-image { padding-right:48px; }
  body.sidebar-is-open { overflow:hidden; }
}

@media(max-width:760px){
  .result-hero-modern { grid-template-columns:1fr; justify-items:start; gap:18px; }
  .result-hero-score { width:118px; height:118px; }
  .result-hero-score:before { width:90px; height:90px; }
  .result-hero-score strong { font-size:24px; }
  .subscription-active-banner { grid-template-columns:1fr; justify-items:start; }
  .subscription-active-meta { width:100%; }
  .subscription-promo-panel, .subscription-promo-panel form, .dashboard-grid.two-columns { grid-template-columns:1fr; }
  .ticket-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ticket-message { max-width:100%; }
  .support-ticket-card { grid-template-columns:auto minmax(0,1fr); }
  .support-ticket-card .status-pill { grid-column:2; justify-self:start; }
  .review-panel-modern .panel-heading { flex-direction:column; align-items:flex-start; }
  .review-overview-pills { margin-left:0; }
  .review-question-image-frame { min-height:170px; }
  .review-card { padding:17px; border-radius:19px; }
  .review-card h3 { font-size:19px; }
}
@media(max-width:650px){
  .notification-dropdown { position:fixed; top:70px; left:12px; right:12px; width:auto; }
  .profile-dropdown { position:fixed; top:70px; left:12px; right:12px; width:auto; }
}

/* Learning coach */
.coach-grid { display:grid; grid-template-columns:minmax(0,1.35fr) 260px minmax(300px,.9fr); gap:18px; margin-bottom:18px; }
.coach-card { min-height:190px; }
.coach-recommendation { position:relative; overflow:hidden; display:grid; grid-template-columns:62px 1fr; gap:18px; align-items:start; background:linear-gradient(135deg,#fff,#f3faf7 58%,#fff6e5); }
.coach-recommendation:after { content:""; position:absolute; width:240px; height:240px; right:-110px; bottom:-130px; border-radius:50%; background:rgba(240,176,77,.14); pointer-events:none; }
.coach-icon { width:62px; height:62px; display:grid; place-items:center; border-radius:18px; background:var(--primary); color:#fff; font-size:32px; box-shadow:0 16px 35px rgba(20,122,105,.22); }
.coach-recommendation h2 { margin:5px 0 8px; font-size:24px; line-height:1.2; }
.coach-recommendation p, .daily-goal-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.inline-action { margin-top:16px; display:inline-flex; align-items:center; gap:7px; color:var(--primary); font-size:13px; font-weight:800; }
.compact-heading { margin-bottom:12px; align-items:center; }
.compact-heading strong { padding:6px 10px; border-radius:99px; background:var(--primary-soft); color:var(--primary); font-size:11px; }
.daily-goal-card { display:flex; flex-direction:column; align-items:stretch; }
.daily-goal-ring { --goal:0%; width:112px; height:112px; margin:2px auto 14px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--primary) 0 var(--goal),#e8f0ee var(--goal) 100%); position:relative; }
.daily-goal-ring:before { content:""; position:absolute; inset:11px; border-radius:50%; background:#fff; }
.daily-goal-ring span { position:relative; color:var(--text); font-size:22px; font-weight:800; }
.activity-card { display:flex; flex-direction:column; }
.activity-chart { min-height:118px; margin-top:auto; display:grid; grid-template-columns:repeat(7,1fr); gap:9px; align-items:end; }
.activity-chart div { height:110px; display:flex; flex-direction:column; justify-content:flex-end; gap:7px; align-items:center; }
.activity-chart span { width:100%; min-height:8px; border-radius:9px 9px 3px 3px; background:linear-gradient(180deg,#37c4ad,var(--primary)); box-shadow:inset 0 -8px 16px rgba(0,0,0,.08),0 10px 20px rgba(20,122,105,.08); }
.activity-chart small { color:var(--muted); font-size:10px; font-weight:800; text-transform:capitalize; }
.improvement-panel { margin-bottom:18px; }
.panel-subcopy { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.panel-action-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.panel-action-row form { margin:0; }
.reset-weak-button { border-color:#d9e9e5; background:#fff; color:#50605c; cursor:pointer; }
.reset-weak-button:hover { border-color:#bddbd4; color:var(--primary); background:#f7fbfa; }
.improvement-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:18px; align-items:start; }
.weak-topic-list { display:grid; gap:11px; }
.weak-topic-row { padding:15px; display:grid; grid-template-columns:1fr auto; gap:11px 16px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,#fff,#fbfefd); box-shadow:0 12px 30px rgba(21,69,61,.04); }
.weak-topic-main { min-width:0; display:flex; align-items:center; gap:12px; }
.weak-topic-icon { width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; background:#fff3df; color:#d98323; font-size:22px; }
.weak-topic-row strong { display:block; font-size:15px; }
.weak-topic-row small { display:block; margin-top:3px; color:var(--muted); font-size:11px; line-height:1.45; }
.weak-topic-score { min-width:74px; padding:8px 10px; border-radius:14px; background:var(--primary-soft); color:var(--primary); text-align:center; }
.weak-topic-score strong { font-size:18px; line-height:1; }
.weak-topic-score small { color:var(--primary); font-size:9px; font-weight:900; text-transform:uppercase; }
.weak-topic-bar { grid-column:1 / -1; height:7px; border-radius:99px; background:#e7efed; overflow:hidden; }
.weak-topic-bar b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f0a43a,var(--primary)); }
.weak-topic-action { grid-column:1 / -1; min-height:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid #dcebe7; border-radius:13px; background:#fff; color:var(--primary); font-size:12px; font-weight:900; }
.weak-topic-action:hover { background:var(--primary-soft); border-color:#bddbd4; }
.weak-topic-empty { min-height:150px; padding:20px; display:flex; align-items:center; gap:14px; border:1px dashed #c9ddd8; border-radius:18px; background:#fbfdfc; }
.weak-topic-empty span { width:52px; height:52px; display:grid; place-items:center; flex:0 0 auto; border-radius:17px; background:var(--primary-soft); color:var(--primary); font-size:27px; }
.weak-topic-empty strong { display:block; font-size:16px; }
.weak-topic-empty p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }
.badge-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.badge-card { min-height:126px; padding:14px; display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:17px; background:#f8fbfa; opacity:.62; transition:.18s; }
.badge-card i { width:39px; height:39px; display:grid; place-items:center; border-radius:12px; background:#e8efed; color:#7a8783; font-size:21px; }
.badge-card strong { font-size:13px; }
.badge-card small { color:var(--muted); font-size:11px; line-height:1.45; }
.badge-card.is-active { opacity:1; border-color:#bfe0d8; background:linear-gradient(180deg,#fff,#f1faf7); box-shadow:0 12px 28px rgba(21,69,61,.06); transform:translateY(-1px); }
.badge-card.is-active i { background:var(--primary); color:#fff; }

.dashboard-confirm-overlay { position:fixed; inset:0; z-index:5000; display:none; place-items:center; padding:22px; background:radial-gradient(circle at 50% 35%,rgba(20,122,105,.2),transparent 34%),rgba(7,28,25,.66); backdrop-filter:blur(14px); }
.dashboard-confirm-overlay.is-open { display:grid; animation:feedbackFade .16s ease both; }
.dashboard-confirm-modal { position:relative; width:min(500px,100%); padding:30px; border:1px solid rgba(255,255,255,.7); border-radius:28px; background:linear-gradient(180deg,#fff,#fbfefd); box-shadow:0 34px 100px rgba(2,20,17,.34); text-align:center; overflow:hidden; animation:feedbackRise .22s ease both; }
.dashboard-confirm-modal:before { content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,var(--primary),#62c8b8,#f0b04d); }
.dashboard-confirm-modal:after { content:""; position:absolute; width:220px; height:220px; right:-100px; top:-120px; border-radius:50%; background:rgba(20,122,105,.08); pointer-events:none; }
.dashboard-confirm-close { position:absolute; top:16px; right:16px; z-index:2; width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--text); font-size:24px; cursor:pointer; }
.dashboard-confirm-icon { position:relative; z-index:1; width:72px; height:72px; margin:0 auto 16px; display:grid; place-items:center; border-radius:24px; background:var(--primary-soft); color:var(--primary); font-size:36px; box-shadow:0 18px 38px rgba(20,122,105,.12); }
.dashboard-confirm-modal small { position:relative; z-index:1; display:inline-flex; min-height:28px; align-items:center; padding:0 10px; border-radius:999px; background:#fff4dc; color:#9a6718; font-size:10px; font-weight:900; text-transform:uppercase; }
.dashboard-confirm-modal h2 { position:relative; z-index:1; margin:10px 0 8px; font-size:30px; letter-spacing:-.7px; }
.dashboard-confirm-modal p { position:relative; z-index:1; max-width:390px; margin:0 auto; color:#5f6f6b; font-size:14px; line-height:1.65; }
.dashboard-confirm-actions { position:relative; z-index:1; margin-top:22px; display:flex; gap:10px; justify-content:center; }
.dashboard-info-overlay { position:fixed; inset:0; z-index:5000; display:none; place-items:center; padding:22px; background:radial-gradient(circle at 50% 35%,rgba(20,122,105,.2),transparent 34%),rgba(7,28,25,.66); backdrop-filter:blur(14px); }
.dashboard-info-overlay.is-open { display:grid; animation:feedbackFade .16s ease both; }
.dashboard-info-modal { position:relative; width:min(560px,100%); padding:30px; border:1px solid rgba(255,255,255,.7); border-radius:28px; background:linear-gradient(180deg,#fff,#fbfefd); box-shadow:0 34px 100px rgba(2,20,17,.34); text-align:center; overflow:hidden; animation:feedbackRise .22s ease both; }
.dashboard-info-modal:before { content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,#f0a43a,var(--primary),#62c8b8); }
.dashboard-info-modal:after { content:""; position:absolute; width:220px; height:220px; right:-100px; top:-120px; border-radius:50%; background:rgba(240,164,58,.11); pointer-events:none; }
.dashboard-info-modal > * { position:relative; z-index:1; }
.pace-info-icon { background:#fff2df; color:#df8422; }
.dashboard-info-modal small { display:inline-flex; min-height:28px; align-items:center; padding:0 10px; border-radius:999px; background:#fff4dc; color:#9a6718; font-size:10px; font-weight:900; text-transform:uppercase; }
.dashboard-info-modal h2 { margin:10px 0 8px; font-size:30px; letter-spacing:-.7px; }
.dashboard-info-modal > p { max-width:420px; margin:0 auto; color:#5f6f6b; font-size:14px; line-height:1.65; }
.pace-info-grid { margin-top:20px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.pace-info-grid div { padding:13px 9px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 10px 24px rgba(16,80,70,.05); }
.pace-info-grid strong { display:block; color:var(--text); font-size:17px; line-height:1.1; }
.pace-info-grid small { margin-top:7px; min-height:0; padding:0; background:transparent; color:var(--muted); font-size:9px; line-height:1.25; }
.pace-info-note { margin-top:12px; padding:14px; display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; border-radius:17px; background:#fff8ed; text-align:left; }
.pace-info-note i { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:#fff; color:#df8422; font-size:22px; }
.pace-info-note p { margin:0; color:#5f6f6b; font-size:13px; line-height:1.6; }

.dashboard-tab-shell {
  margin:22px 0 20px;
  padding:16px;
  display:grid;
  grid-template-columns:minmax(230px,.75fr) minmax(0,1.55fr);
  gap:16px;
  align-items:stretch;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(135deg,#fff,#f7fcfa 58%,#fff8ed);
  box-shadow:0 18px 50px rgba(21,69,61,.06);
}
.dashboard-tab-intro {
  padding:8px 8px 8px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.dashboard-tab-intro h2 {
  margin:4px 0 7px;
  font-size:22px;
  letter-spacing:-.3px;
}
.dashboard-tab-intro p {
  margin:0;
  max-width:440px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.dashboard-tab-nav {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.dashboard-tab-button {
  min-height:78px;
  padding:13px 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(16,80,70,.04);
  transition:.18s ease;
}
.dashboard-tab-button:hover {
  transform:translateY(-1px);
  border-color:rgba(20,122,105,.28);
  box-shadow:0 16px 34px rgba(16,80,70,.08);
}
.dashboard-tab-button span {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:900;
}
.dashboard-tab-button i {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:18px;
}
.dashboard-tab-button small {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.dashboard-tab-button.is-active {
  border-color:rgba(20,122,105,.44);
  background:linear-gradient(180deg,#fff,#f0faf7);
  box-shadow:inset 0 3px 0 var(--primary),0 18px 38px rgba(20,122,105,.08);
}
.dashboard-tab-button.is-active i {
  background:var(--primary);
  color:#fff;
}
[data-dashboard-tab-section].is-hidden {
  display:none !important;
}
.daily-plan-panel,
.coach-insight-panel,
.readiness-breakdown-panel,
.week-plan-panel,
.dashboard-main-grid,
.topic-status-panel,
.improvement-panel,
.dashboard-table-panel {
  margin-top:0;
}

.coach-insight-panel,
.readiness-breakdown-panel,
.week-plan-panel {
  margin-bottom:24px;
  border-radius:24px;
  background:linear-gradient(180deg,#fff,#fbfefd);
}
.learning-signal-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.learning-signal-card {
  min-height:132px;
  padding:15px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.learning-signal-card > span {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:24px;
}
.learning-signal-card strong {
  display:block;
  margin-bottom:5px;
  font-size:15px;
}
.learning-signal-card small {
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.learning-signal-card.is-warning > span { background:#fff2dc; color:#d98323; }
.learning-signal-card.is-danger > span { background:#ffe5e6; color:#d54d54; }
.learning-signal-card.is-good {
  border-color:#cbe5de;
  background:linear-gradient(180deg,#fff,#f3faf7);
}
.readiness-breakdown-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:11px;
}
.readiness-part-card {
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.readiness-part-head {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:9px;
  align-items:center;
}
.readiness-part-head span {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:20px;
}
.readiness-part-head strong {
  min-width:0;
  font-size:13px;
}
.readiness-part-head em {
  padding:5px 7px;
  border-radius:999px;
  background:#eef7f4;
  color:var(--primary);
  font-size:10px;
  font-style:normal;
  font-weight:900;
}
.readiness-part-bar {
  height:7px;
  margin:12px 0 9px;
  overflow:hidden;
  border-radius:999px;
  background:#e8f0ee;
}
.readiness-part-bar b {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#f0a52b,var(--primary),#43b9a5);
}
.readiness-part-card p {
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.week-plan-list {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.week-plan-step {
  position:relative;
  min-height:150px;
  padding:15px;
  display:grid;
  align-content:start;
  gap:13px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}
.week-plan-step:after {
  content:"";
  position:absolute;
  width:96px;
  height:96px;
  right:-42px;
  top:-42px;
  border-radius:50%;
  background:#eef7f4;
}
.week-plan-step > span {
  position:relative;
  z-index:1;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:900;
}
.week-plan-step div {
  position:relative;
  z-index:1;
}
.week-plan-step small {
  display:block;
  margin-bottom:4px;
  color:#8d9a97;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.week-plan-step strong {
  display:block;
  font-size:15px;
}
.week-plan-step p {
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.week-plan-step.is-focus {
  border-color:#efd7a8;
  background:linear-gradient(180deg,#fff,#fff8ed);
}
.week-plan-step.is-ready,
.week-plan-step.is-done {
  border-color:#c7e4dc;
  background:linear-gradient(180deg,#fff,#f3faf7);
}
.week-plan-step.is-ready > span,
.week-plan-step.is-done > span {
  background:var(--primary);
  color:#fff;
}

/* Practice mode cards */
.practice-mode-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.practice-mode-card { min-height:228px; padding:19px; display:flex; flex-direction:column; gap:9px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,#fff,#fbfefd); box-shadow:0 11px 30px rgba(21,69,61,.04); }
.practice-mode-card > span { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:var(--primary-soft); color:var(--primary); font-size:25px; }
.practice-mode-card small { color:#8f9a97; font-size:11px; font-weight:800; text-transform:uppercase; }
.practice-mode-card h2 { margin:0; font-size:21px; line-height:1.18; }
.practice-mode-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.mode-daily { background:linear-gradient(180deg,#fff,#f2faf7); }
.mode-exam { background:linear-gradient(180deg,#fff,#fff8ed); }
.mode-progress { height:7px; margin-top:auto; border-radius:99px; background:#e6efec; overflow:hidden; }
.mode-progress b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#43b9a5); }
.mode-action { margin-top:auto; min-height:42px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:12px; background:var(--primary); color:#fff; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 12px 24px rgba(20,122,105,.16); }
.mode-action:hover { color:#fff; transform:translateY(-1px); }
.mode-action.muted { background:#eef5f3; color:var(--primary); box-shadow:none; }

@media(max-width:1150px){
  .dashboard-hero-modern, .exams-hero-modern, .practice-hero-modern { grid-template-columns:1fr; }
  .dashboard-command-grid, .exam-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-tab-shell { grid-template-columns:1fr; }
  .dashboard-tab-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .exam-prep-panel { grid-template-columns:1fr; }
  .coach-grid { grid-template-columns:1fr 1fr; }
  .coach-recommendation { grid-column:1 / -1; }
  .practice-mode-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .route-summary-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .learning-signal-grid,
  .readiness-breakdown-grid,
  .week-plan-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px){
  .dashboard-hero-metrics, .practice-hero-metrics, .dashboard-command-grid, .exam-overview-grid, .exam-empty-steps { grid-template-columns:1fr; }
  .dashboard-tab-shell { padding:12px; border-radius:20px; }
  .dashboard-tab-intro { padding:4px; }
  .dashboard-tab-nav { grid-template-columns:1fr; }
  .dashboard-tab-button { min-height:64px; }
  .exam-prep-list { grid-template-columns:1fr; }
  .exam-prep-panel { padding:20px; }
  .exam-card-fill { align-items:flex-start; flex-direction:column; }
  .dashboard-section-label { display:block; }
  .dashboard-section-label p { margin-top:4px; }
  .exam-empty-state { grid-template-columns:1fr; padding:22px; }
  .exam-empty-icon { width:68px; height:68px; border-radius:21px; font-size:34px; }
  .exam-empty-state h2 { font-size:23px; }
  .coach-grid, .improvement-layout, .practice-mode-grid { grid-template-columns:1fr; }
  .coach-recommendation { grid-template-columns:1fr; }
  .badge-board { grid-template-columns:1fr; }
  .activity-chart { gap:6px; }
  .route-summary-strip { grid-template-columns:1fr; }
  .dashboard-confirm-actions { flex-direction:column; }
  .dashboard-confirm-actions .button { width:100%; }
  .pace-info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel-action-row { justify-content:flex-start; }
  .learning-signal-grid,
  .readiness-breakdown-grid,
  .week-plan-list { grid-template-columns:1fr; }
  .learning-signal-card { min-height:auto; }
  .topic-picker-head { display:block; }
  .topic-picker-head small { margin-top:8px; }
  .topic-tab-strip { grid-template-columns:1fr; padding:9px; }
}

/* Password reset pages */
.password-page { min-height:100vh; padding:80px 20px; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(135deg,#f5fbf9 0%,#ffffff 48%,#fff8ea 100%); }
.password-page:before { content:""; position:absolute; width:520px; height:520px; right:-210px; top:-210px; border-radius:50%; background:rgba(20,122,105,.11); }
.password-page:after { content:""; position:absolute; width:420px; height:420px; left:-190px; bottom:-210px; border-radius:50%; background:rgba(247,169,40,.12); }
.password-shell { width:min(980px,100%); display:grid; grid-template-columns:minmax(0,1.15fr) 330px; gap:18px; align-items:stretch; position:relative; z-index:1; }
.password-shell-small { width:min(620px,100%); grid-template-columns:1fr; }
.password-card, .password-side { border:1px solid rgba(214,232,226,.95); border-radius:24px; background:rgba(255,255,255,.88); box-shadow:0 26px 70px rgba(17,74,65,.11); backdrop-filter:blur(18px); }
.password-card { padding:30px; }
.password-logo { display:inline-flex; align-items:center; margin-bottom:30px; }
.password-logo img { height:62px; width:auto; object-fit:contain; }
.password-heading { margin-bottom:24px; }
.password-kicker { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:99px; background:var(--primary-soft); color:var(--primary); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.password-heading h1 { margin:14px 0 8px; font-size:clamp(30px,4vw,42px); line-height:1.08; letter-spacing:-1.2px; }
.password-heading p { max-width:560px; margin:0; color:var(--muted); font-size:15px; line-height:1.65; }
.password-form { display:grid; gap:16px; }
.password-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.password-form label { display:grid; gap:8px; }
.password-form label > span { color:var(--text); font-size:12px; font-weight:800; }
.password-input { min-height:56px; display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:10px; padding:0 14px; border:1px solid var(--line); border-radius:15px; background:#fff; transition:.18s; }
.password-input:focus-within { border-color:var(--primary); box-shadow:0 0 0 4px rgba(20,122,105,.08); }
.password-input > i { color:var(--primary); font-size:21px; }
.password-input input { width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:15px; }
.password-eye { width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:11px; background:#f3f8f6; color:#6f7d79; font-size:19px; cursor:pointer; transition:.18s; }
.password-eye:hover { background:var(--primary-soft); color:var(--primary); }
.password-hint { padding:12px 13px; display:flex; gap:9px; align-items:flex-start; border:1px solid #dbece7; border-radius:14px; background:#f6fbfa; color:#52625e; font-size:12px; line-height:1.55; }
.password-hint i { margin-top:2px; color:var(--primary); font-size:18px; }
.password-submit { width:100%; min-height:58px; margin-top:2px; border-radius:15px; font-size:15px; }
.password-back-link { margin-top:18px; display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-size:13px; font-weight:800; }
.password-side { padding:26px; display:flex; flex-direction:column; justify-content:flex-end; min-height:100%; background:linear-gradient(160deg,#0f7a68,#0d5f52); color:#fff; overflow:hidden; position:relative; }
.password-side:before { content:""; position:absolute; width:220px; height:220px; right:-100px; top:-90px; border-radius:50%; background:rgba(255,255,255,.12); }
.password-side > * { position:relative; z-index:1; }
.password-side > span { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; background:rgba(255,255,255,.16); font-size:31px; }
.password-side h2 { margin:24px 0 9px; font-size:27px; line-height:1.15; letter-spacing:-.7px; }
.password-side p { margin:0 0 22px; color:rgba(255,255,255,.78); font-size:14px; line-height:1.65; }
.password-side div { display:grid; gap:9px; }
.password-side strong { display:flex; align-items:center; gap:8px; padding:10px 11px; border-radius:12px; background:rgba(255,255,255,.10); font-size:12px; }
.password-side i { font-size:18px; }

@media(max-width:860px){
  .password-page { padding:34px 14px; align-items:start; }
  .password-shell { grid-template-columns:1fr; }
  .password-side { min-height:auto; }
}
@media(max-width:620px){
  .password-card { padding:22px; border-radius:20px; }
  .password-logo img { height:52px; }
  .password-form-grid { grid-template-columns:1fr; }
  .password-heading h1 { font-size:30px; }
}

/* Practice page final polish */
.practice-hero-modern {
  min-height:172px;
  border-radius:26px;
  background:
    radial-gradient(circle at 94% 0%, rgba(69,151,220,.14), transparent 24%),
    linear-gradient(135deg,#ffffff 0%,#f3fbf8 58%,#eef5ff 100%);
}
.practice-hero-modern h1 { font-size:clamp(32px,3.4vw,44px); letter-spacing:-1.2px; }
.practice-hero-modern p { max-width:780px; font-size:15px; line-height:1.65; }
.practice-mode-grid { margin-top:18px; }
.practice-mode-card {
  position:relative;
  overflow:hidden;
  min-height:238px;
  border-radius:24px;
  background:linear-gradient(180deg,#fff,#fbfefd);
}
.practice-mode-card:after {
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  right:-70px;
  top:-74px;
  border-radius:50%;
  background:rgba(20,122,105,.06);
  pointer-events:none;
}
.practice-mode-card > * { position:relative; z-index:1; }
.practice-mode-card h2 { font-size:24px; letter-spacing:-.5px; }
.practice-guide-panel {
  margin:0 0 18px;
  display:grid;
  grid-template-columns:minmax(260px,.55fr) minmax(0,1fr);
  gap:18px;
  align-items:center;
  border-radius:24px;
  background:linear-gradient(135deg,#ffffff 0%,#f7fcfa 62%,#fff8eb 100%);
}
.practice-guide-copy h2 { margin:4px 0 6px; font-size:24px; letter-spacing:-.6px; }
.practice-guide-copy p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.practice-guide-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.practice-guide-steps span {
  min-height:92px;
  padding:13px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:4px 10px;
  align-items:center;
  border:1px solid #dcebe7;
  border-radius:17px;
  background:rgba(255,255,255,.78);
}
.practice-guide-steps i {
  grid-row:span 2;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:21px;
}
.practice-guide-steps strong { color:var(--text); font-size:12px; }
.practice-guide-steps small { color:var(--muted); font-size:10px; line-height:1.4; }
.learning-vehicle-modern { border-radius:26px; }
.topic-tab-grid,
.learning-vehicle-modern .topic-tab-strip {
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
  overflow:visible!important;
  overflow-x:visible!important;
  scrollbar-width:none;
}
.topic-tab-grid::-webkit-scrollbar,
.learning-vehicle-modern .topic-tab-strip::-webkit-scrollbar { display:none; }
.learning-vehicle-modern .topic-tab-button {
  width:100%;
  min-width:0!important;
  min-height:86px;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  align-content:center;
  gap:4px 12px;
  padding:14px;
}
.learning-vehicle-modern .topic-tab-button > i,
.learning-vehicle-modern .topic-tab-button > .topic-visual {
  grid-row:span 2;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#eef8f5;
  color:var(--primary);
  font-size:21px;
}
.learning-vehicle-modern .topic-tab-button.active > i,
.learning-vehicle-modern .topic-tab-button.active > .topic-visual:not(.has-image) { background:var(--primary); color:#fff; }
.learning-vehicle-modern .topic-tab-button span,
.learning-vehicle-modern .topic-tab-button small {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.learning-vehicle-modern .topic-panel-head { padding:24px; border-radius:22px; }
.learning-vehicle-modern .topic-panel-head h3 { font-size:28px; }
.exercise-card-grid-modern { grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }
.exercise-card {
  min-height:108px;
  border-radius:19px;
  box-shadow:0 10px 24px rgba(21,69,61,.035);
}
.exercise-card strong { font-size:14px; }
.exercise-card small { font-size:11px; }

@media(max-width:1150px){
  .practice-guide-panel { grid-template-columns:1fr; }
}
@media(max-width:760px){
  .practice-guide-steps { grid-template-columns:1fr; }
  .topic-tab-grid,
  .learning-vehicle-modern .topic-tab-strip { grid-template-columns:1fr!important; }
  .exercise-card-grid-modern { grid-template-columns:1fr; }
}

/* Practice page calm layout */
.practice-hero-modern {
  min-height:150px;
  padding:24px;
  border-radius:22px;
  background:linear-gradient(135deg,#fff 0%,#f8fcfb 100%);
  box-shadow:0 12px 34px rgba(21,69,61,.045);
}
.practice-hero-modern:after {
  opacity:.45;
}
.practice-hero-modern h1 {
  font-size:clamp(28px,2.7vw,36px);
  letter-spacing:-.8px;
}
.practice-hero-modern p {
  max-width:760px;
  font-size:14px;
}
.practice-hero-metrics {
  max-width:560px;
  gap:8px;
}
.practice-hero-metrics span {
  min-height:54px;
  padding:10px 11px;
  border-radius:13px;
  background:#fff;
  box-shadow:none;
}
.practice-hero-metrics strong {
  font-size:19px;
}
.practice-mode-calm {
  gap:10px;
  margin:14px 0 16px;
}
.practice-mode-calm .practice-mode-card {
  min-height:168px;
  padding:16px;
  gap:7px;
  border-radius:18px;
  box-shadow:none;
  background:#fff;
}
.practice-mode-calm .practice-mode-card:after {
  display:none;
}
.practice-mode-calm .practice-mode-card > span {
  width:40px;
  height:40px;
  border-radius:13px;
  font-size:22px;
}
.practice-mode-calm .practice-mode-card small {
  font-size:10px;
}
.practice-mode-calm .practice-mode-card h2 {
  font-size:19px;
  line-height:1.2;
  letter-spacing:-.25px;
}
.practice-mode-calm .practice-mode-card p {
  font-size:12px;
  line-height:1.5;
}
.practice-mode-calm .mode-action {
  min-height:38px;
  border-radius:11px;
  box-shadow:none;
}
.practice-mode-calm .mode-progress {
  height:6px;
}
.practice-learning-grid {
  grid-template-columns:1fr;
  gap:0;
}
.practice-learning-grid .learning-main {
  gap:16px;
}
.practice-learning-grid .learning-vehicle-modern {
  padding:22px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 26px rgba(21,69,61,.035);
}
.practice-learning-grid .learning-vehicle-modern:before {
  height:1px;
  background:#dbece7;
}
.practice-learning-grid .panel-heading {
  margin-bottom:14px;
}
.practice-learning-grid .learning-vehicle .panel-heading h2 i {
  width:36px;
  height:36px;
  border-radius:11px;
}
.practice-learning-grid .learning-block-meta {
  margin-top:10px;
}
.practice-learning-grid .topic-picker-head {
  margin:16px 0 10px;
}
.practice-learning-grid .topic-picker-head h3 {
  font-size:19px;
}
.practice-learning-grid .topic-tab-strip {
  margin:0 0 16px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.practice-learning-grid .learning-vehicle-modern .topic-tab-button {
  min-height:76px;
  padding:12px;
  border-radius:14px;
  box-shadow:none;
}
.practice-learning-grid .topic-tab-button:hover,
.practice-learning-grid .topic-tab-button.active {
  box-shadow:none;
}
.practice-learning-grid .learning-vehicle-modern .topic-panel-head {
  padding:18px;
  border-radius:16px;
  background:#fbfdfc;
}
.practice-learning-grid .topic-panel-head:after {
  display:none;
}
.practice-learning-grid .learning-vehicle-modern .topic-panel-head h3 {
  font-size:23px;
}
.practice-learning-grid .topic-panel-head p {
  line-height:1.6;
}
.practice-learning-grid .exercise-card {
  min-height:92px;
  border-radius:15px;
  box-shadow:none;
}
.practice-learning-grid .topic-modal-stack[hidden] {
  display:none!important;
}
.practice-learning-grid .topic-modal-stack {
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  align-items:start;
  justify-items:center;
  padding:30px 22px;
  overflow:auto;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.practice-learning-grid .topic-modal-stack.open {
  opacity:1;
  pointer-events:auto;
}
.topic-modal-backdrop {
  position:fixed;
  inset:0;
  border:0;
  background:rgba(17,42,38,.46);
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.practice-learning-grid .topic-modal-stack .topic-panel {
  position:relative;
  z-index:1;
  width:min(1160px,100%);
  margin:auto 0;
  padding:18px;
  border:1px solid #d7e9e4;
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 90px rgba(12,45,41,.22);
  transform:translateY(10px) scale(.985);
  transition:transform .18s ease;
}
.practice-learning-grid .topic-modal-stack.open .topic-panel.active {
  transform:none;
}
.practice-learning-grid .topic-modal-stack .topic-panel:not(.active) {
  display:none;
}
.topic-modal-close {
  position:absolute;
  right:16px;
  top:16px;
  z-index:3;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  color:#40504c;
  font-size:24px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(21,69,61,.08);
  transition:.18s ease;
}
.topic-modal-close:hover {
  border-color:#bddbd4;
  color:var(--primary);
  transform:translateY(-1px);
}
.practice-learning-grid .topic-modal-stack .topic-panel-head {
  margin-bottom:14px;
  padding:24px 70px 24px 24px;
  border-radius:18px;
  background:#fbfdfc;
}
.practice-learning-grid .topic-modal-stack .topic-panel-head h3 {
  font-size:25px;
}
.practice-learning-grid .topic-modal-stack .exercise-card-grid-modern {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.practice-learning-grid .topic-modal-stack .exercise-card {
  min-height:92px;
  border-radius:15px;
}
.practice-learning-grid .topic-modal-stack .topic-tips-modal {
  z-index:1400;
}

@media(max-width:1150px){
  .practice-mode-calm { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .practice-learning-grid .topic-modal-stack .exercise-card-grid-modern { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px){
  .practice-mode-calm { grid-template-columns:1fr; }
  .practice-hero-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .practice-learning-grid .learning-vehicle-modern { padding:18px; }
  .practice-learning-grid .topic-modal-stack { padding:18px 12px; }
  .practice-learning-grid .topic-modal-stack .topic-panel { padding:14px; border-radius:18px; }
  .practice-learning-grid .topic-modal-stack .topic-panel-head {
    grid-template-columns:1fr;
    padding:18px;
  }
  .topic-modal-close { right:12px; top:12px; }
  .practice-learning-grid .topic-modal-stack .exercise-card-grid-modern { grid-template-columns:1fr; }
}
@media(max-width:460px){
  .practice-hero-metrics { grid-template-columns:1fr; }
}

/* Mascot coach */
.mascot-coach {
  position:fixed;
  inset-inline-end:24px;
  bottom:22px;
  z-index:3000;
  display:grid;
  grid-template-columns:minmax(220px, 320px) auto;
  align-items:end;
  gap:12px;
  width:max-content;
  max-width:calc(100vw - 32px);
  max-width:calc(100dvw - 32px);
  pointer-events:none;
  contain:layout paint;
}
.mascot-coach.is-hidden { display:none; }
.mascot-bubble {
  position:relative;
  padding:18px 20px 18px;
  border:1px solid rgba(16,128,108,.18);
  border-radius:24px 24px 8px 24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 60px rgba(19,52,46,.18);
  backdrop-filter:blur(14px);
  pointer-events:auto;
  animation:mascot-pop .28s ease-out;
}
.mascot-bubble::after {
  content:"";
  position:absolute;
  right:-9px;
  bottom:24px;
  width:18px;
  height:18px;
  border-right:1px solid rgba(16,128,108,.18);
  border-bottom:1px solid rgba(16,128,108,.18);
  background:rgba(255,255,255,.96);
  transform:rotate(-45deg);
}
.mascot-bubble span {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:#e8f6f2;
  color:var(--primary);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.mascot-bubble p {
  margin:10px 0 0;
  color:#4f615d;
  font-size:14px;
  line-height:1.55;
}
.mascot-bubble a,
.mascot-bubble .mascot-action-button {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  border:0;
  background:transparent;
  color:var(--primary);
  font:inherit;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
}
.homepage-mascot .mascot-bubble { background:linear-gradient(180deg,rgba(255,255,255,.98),#f7fffc); }
.homepage-mascot .mascot-action-button {
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  background:var(--primary);
  color:#fff;
  box-shadow:0 14px 26px rgba(20,122,105,.18);
}
.mascot-close {
  position:absolute;
  top:-12px;
  right:-10px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(16,128,108,.18);
  border-radius:14px;
  background:#fff;
  color:#102521;
  box-shadow:0 12px 30px rgba(19,52,46,.12);
  cursor:pointer;
}
.mascot-close i { font-size:22px; }
.mascot-avatar {
  width:104px;
  height:104px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  transform-origin:center bottom;
  transition:transform .2s ease;
}
.mascot-avatar:hover { transform:translateY(-3px) rotate(-2deg); }
.mascot-avatar img {
  width:104px;
  height:104px;
  object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(9,64,55,.2));
}
.mascot-coach.is-collapsed {
  grid-template-columns:auto;
}
.mascot-coach.is-collapsed .mascot-bubble {
  display:none;
}
.mascot-restore {
  position:fixed;
  inset-inline-end:24px;
  bottom:22px;
  z-index:2999;
  display:none;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:10px 14px 10px 12px;
  border:1px solid rgba(16,128,108,.2);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:var(--primary);
  font-weight:900;
  box-shadow:0 18px 44px rgba(19,52,46,.14);
  cursor:pointer;
  backdrop-filter:blur(12px);
  animation:mascot-pop .22s ease-out;
  max-width:calc(100vw - 32px);
  max-width:calc(100dvw - 32px);
  contain:layout paint;
}
.mascot-restore.is-visible {
  display:inline-flex;
}
.mascot-restore i {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#e8f6f2;
  font-size:18px;
}
.mascot-restore:hover {
  transform:translateY(-2px);
  box-shadow:0 22px 52px rgba(19,52,46,.18);
}

/* Next-level learning coach */
.exam-ready-card .mini-progress span {
  background:linear-gradient(90deg,#f0a52b,var(--primary),#43b9a5);
}
.daily-plan-panel,
.topic-status-panel,
.mistakes-panel {
  border-radius:24px;
  background:linear-gradient(180deg,#fff,#fbfefd);
}
.daily-plan-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.daily-plan-step {
  min-height:142px;
  padding:16px;
  display:grid;
  align-content:start;
  gap:9px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  color:var(--text);
  text-decoration:none;
  transition:.18s;
}
.daily-plan-step:hover,
.topic-status-card:hover,
.mistake-book-card:hover {
  transform:translateY(-2px);
  border-color:rgba(20,122,105,.32);
  box-shadow:0 18px 42px rgba(21,69,61,.08);
}
.daily-plan-step span {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:23px;
}
.daily-plan-step strong {
  font-size:15px;
}
.daily-plan-step small {
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.coach-action-row {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.inline-action.muted {
  color:#60706c;
}
.topic-status-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.topic-status-card {
  min-height:154px;
  padding:16px;
  display:grid;
  gap:12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  color:var(--text);
  text-decoration:none;
  transition:.18s;
}
.topic-status-card > div:first-child span {
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.topic-status-card strong {
  display:block;
  margin-top:4px;
  font-size:16px;
}
.topic-status-card small {
  color:var(--muted);
  font-size:11px;
}
.topic-status-card em {
  justify-self:start;
  border-radius:999px;
  padding:6px 10px;
  background:#eef8f5;
  color:var(--primary);
  font-style:normal;
  font-size:11px;
  font-weight:900;
}
.topic-status-card.needs-work em { background:#fff1df; color:#bd6c19; }
.topic-status-card.is-new em { background:#eef2f1; color:#60706c; }
.topic-status-bars span {
  display:block;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#e9f1ef;
}
.topic-status-bars b {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#f0a52b,var(--primary));
}
.mistakes-hero {
  background:linear-gradient(135deg,#fff 0%,#f1faf7 58%,#fff3e1 100%);
}
.mistake-book-grid {
  display:grid;
  gap:12px;
}
.mistake-book-card {
  padding:14px;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:16px;
  align-items:start;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  transition:.18s;
}
.mistake-book-card > img,
.mistake-book-placeholder {
  width:112px;
  height:86px;
  border-radius:16px;
  border:1px solid var(--line);
  object-fit:cover;
  background:#f4faf8;
}
.mistake-book-placeholder {
  display:grid;
  place-items:center;
  color:#8ba09b;
  font-size:26px;
}
.mistake-book-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.mistake-book-meta span,
.mistake-book-meta em {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:6px 9px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:11px;
  font-weight:900;
  font-style:normal;
}
.mistake-book-meta em {
  background:#fff0ed;
  color:#c65345;
}
.mistake-book-card h2 {
  margin:10px 0 8px;
  font-size:18px;
  line-height:1.3;
}
.mistake-book-card p {
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.mistake-book-actions {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-top:12px;
  flex-wrap:wrap;
}
.mistake-book-actions small {
  color:var(--muted);
  font-size:11px;
}
.answer-personal-tip {
  position:relative;
  z-index:1;
  margin-top:13px;
  padding:15px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  border:1px solid rgba(20,122,105,.16);
  border-radius:18px;
  background:linear-gradient(135deg,#eef9f6,#fff);
}
.answer-personal-tip i {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--primary);
  color:#fff;
  font-size:21px;
}
.answer-personal-tip span {
  display:block;
  color:var(--primary);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.answer-personal-tip p {
  margin:5px 0 0;
  color:#4f615d;
  font-size:13px;
  line-height:1.6;
}

.traffic-signs-hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.traffic-signs-hero-meta {
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.traffic-signs-hero-meta span {
  min-width:118px;
  padding:12px 14px;
  border:1px solid rgba(20,122,105,.13);
  border-radius:15px;
  background:rgba(255,255,255,.78);
}
.traffic-signs-hero-meta strong {
  display:block;
  color:var(--primary);
  font-size:22px;
  line-height:1;
}
.traffic-signs-hero-meta small {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:850;
}
.traffic-signs-filter-panel {
  margin-top:18px;
}
.traffic-signs-filter {
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(200px,280px) auto auto;
  gap:12px;
  align-items:end;
}
.traffic-signs-filter label {
  display:grid;
  gap:7px;
  color:#22332f;
  font-size:11px;
  font-weight:900;
}
.filter-input-wrap {
  min-height:48px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.filter-input-wrap i {
  color:#8ca09b;
  font-size:20px;
}
.traffic-signs-filter input,
.traffic-signs-filter select {
  width:100%;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--text);
  outline:0;
}
.traffic-signs-filter input {
  min-height:auto;
  border:0;
}
.traffic-signs-filter select {
  padding:0 14px;
}
.traffic-signs-grid {
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.traffic-sign-card {
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.traffic-sign-image {
  min-height:210px;
  padding:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#f8fcfb,#eef7f4);
  border-bottom:1px solid var(--line);
}
.traffic-sign-image img {
  width:100%;
  height:190px;
  display:block;
  object-fit:contain;
  border-radius:14px;
}
.traffic-sign-image span {
  width:78px;
  height:78px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:34px;
}
.traffic-sign-body {
  padding:18px;
  display:flex;
  flex:1;
  flex-direction:column;
  gap:13px;
}
.traffic-sign-tags {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.traffic-sign-tags span {
  padding:6px 9px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:10px;
  font-weight:900;
}
.traffic-sign-card h2 {
  margin:0;
  font-size:18px;
  line-height:1.25;
  letter-spacing:-.35px;
}
.traffic-sign-answer {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:11px;
  align-items:start;
  padding:12px;
  border:1px solid rgba(20,122,105,.14);
  border-radius:15px;
  background:#f4fbf9;
}
.traffic-sign-answer i {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  font-size:20px;
}
.traffic-sign-answer small {
  display:block;
  color:#7d8c88;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
}
.traffic-sign-answer strong {
  display:block;
  margin-top:4px;
  color:#172622;
  font-size:13px;
  line-height:1.45;
}
.traffic-sign-explanation-button {
  margin-top:auto;
  width:100%;
  min-height:48px;
  padding:0 15px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  transition:.18s ease;
}
.traffic-sign-explanation-button:hover,
.traffic-sign-explanation-button:focus-visible {
  border-color:rgba(20,122,105,.32);
  background:#f2faf8;
  box-shadow:0 12px 26px rgba(20,122,105,.08);
  outline:0;
}
.traffic-sign-explanation-button i {
  font-size:17px;
}
.traffic-explanation-open {
  overflow:hidden;
}
.traffic-explanation-overlay {
  position:fixed;
  inset:0;
  z-index:6200;
  display:none;
  place-items:center;
  padding:24px;
  background:radial-gradient(circle at 50% 35%, rgba(20,122,105,.22), transparent 35%), rgba(7,28,25,.68);
  backdrop-filter:blur(14px);
}
.traffic-explanation-overlay.is-open {
  display:grid;
  animation:feedbackFade .16s ease both;
}
.traffic-explanation-modal {
  position:relative;
  width:min(760px,100%);
  max-height:calc(100dvh - 48px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.75);
  border-radius:28px;
  background:linear-gradient(180deg,#fff,#fbfefd);
  box-shadow:0 34px 100px rgba(2,20,17,.35);
  animation:feedbackRise .22s ease both;
}
.traffic-explanation-modal:before {
  content:"";
  position:sticky;
  top:0;
  display:block;
  height:5px;
  background:linear-gradient(90deg,var(--primary),#5ac8b8,#f0b04d);
  z-index:2;
}
.traffic-explanation-close {
  position:absolute;
  top:18px;
  right:18px;
  z-index:4;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fff;
  color:#172622;
  display:grid;
  place-items:center;
  font-size:24px;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(21,69,61,.08);
}
.traffic-explanation-visual {
  min-height:230px;
  padding:30px 70px 22px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,#f5fbf9,#eef8f5);
  border-bottom:1px solid var(--line);
}
.traffic-explanation-visual img {
  max-width:100%;
  max-height:280px;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 18px 42px rgba(21,69,61,.08);
}
.traffic-explanation-visual > i {
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:34px;
}
.traffic-explanation-content {
  padding:26px 30px 30px;
}
.traffic-explanation-content > span {
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.traffic-explanation-content h2 {
  margin:12px 0 15px;
  font-size:28px;
  line-height:1.18;
  letter-spacing:-.7px;
}
.traffic-explanation-answer {
  margin-bottom:16px;
  padding:14px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  border:1px solid rgba(20,122,105,.15);
  border-radius:18px;
  background:#f4fbf9;
}
.traffic-explanation-answer i {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--primary);
  color:#fff;
  font-size:22px;
}
.traffic-explanation-answer small {
  display:block;
  color:#7d8c88;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}
.traffic-explanation-answer strong {
  display:block;
  margin-top:4px;
  color:#172622;
  font-size:14px;
  line-height:1.45;
}
.traffic-explanation-text {
  margin:0;
  padding:18px;
  border-radius:18px;
  background:#fff8ef;
  color:#455651;
  font-size:15px;
  line-height:1.75;
}
.traffic-signs-empty {
  grid-column:1 / -1;
  min-height:280px;
  display:grid;
  place-items:center;
  text-align:center;
}
.traffic-signs-empty > span {
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:30px;
}
.traffic-signs-pagination {
  margin-top:18px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

@keyframes mascot-pop {
  from { opacity:0; transform:translateY(12px) scale(.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

@media(max-width:980px){
  .mascot-coach {
    inset-inline-end:16px;
    bottom:16px;
    grid-template-columns:minmax(0, 1fr) auto;
  }
  .mascot-bubble {
    max-width:280px;
  }
  .mascot-avatar,
  .mascot-avatar img {
    width:84px;
    height:84px;
  }
  .mascot-restore {
    inset-inline-end:16px;
    bottom:16px;
  }
  .daily-plan-grid,
  .topic-status-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .traffic-signs-hero {
    align-items:flex-start;
    flex-direction:column;
  }
  .traffic-signs-filter {
    grid-template-columns:1fr 1fr;
  }
  .traffic-signs-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .mascot-coach {
    inset-inline-start:14px;
    inset-inline-end:14px;
    width:auto;
    max-width:none;
    grid-template-columns:1fr 70px;
    align-items:end;
  }
  .mascot-bubble {
    max-width:none;
    padding:16px;
    border-radius:20px 20px 8px 20px;
  }
  .mascot-bubble p {
    font-size:13px;
  }
  .mascot-avatar,
  .mascot-avatar img {
    width:70px;
    height:70px;
  }
  .mascot-close {
    right:8px;
    top:8px;
    width:34px;
    height:34px;
  }
  .mascot-restore {
    inset-inline-end:max(14px, env(safe-area-inset-right));
    bottom:14px;
    width:46px;
    min-height:46px;
    padding:0;
    justify-content:center;
  }
  .mascot-restore span { display:none; }
  .mascot-restore i { width:32px; height:32px; }
  .daily-plan-grid,
  .topic-status-grid,
  .mistake-book-card {
    grid-template-columns:1fr;
  }
  .mistake-book-card > img,
  .mistake-book-placeholder {
    width:100%;
    height:160px;
  }
  .traffic-signs-filter {
    grid-template-columns:1fr;
  }
  .traffic-signs-filter .button {
    width:100%;
  }
  .traffic-signs-grid {
    grid-template-columns:1fr;
  }
  .traffic-explanation-overlay {
    padding:12px;
    place-items:end center;
  }
  .traffic-explanation-modal {
    width:100%;
    max-height:calc(100dvh - 24px);
    border-radius:24px 24px 20px 20px;
  }
  .traffic-explanation-close {
    top:14px;
    right:14px;
  }
  .traffic-explanation-visual {
    min-height:170px;
    padding:24px 64px 18px 18px;
  }
  .traffic-explanation-visual img {
    max-height:210px;
  }
  .traffic-explanation-content {
    padding:20px 18px 22px;
  }
  .traffic-explanation-content h2 {
    font-size:22px;
  }
  .traffic-explanation-text {
    padding:15px;
    font-size:14px;
  }
  .topic-tips-modal {
    padding:14px;
    align-items:end;
  }
  .topic-tips-card {
    max-height:calc(100vh - 28px);
    padding:24px 18px 18px;
    border-radius:24px;
  }
  .topic-tips-icon {
    width:52px;
    height:52px;
    margin-bottom:12px;
    border-radius:18px;
    font-size:26px;
  }
  .topic-tips-card h2 {
    margin-right:44px;
  }
  .topic-tips-content {
    padding:15px;
    font-size:13px;
  }
  .topic-tips-actions .button {
    width:100%;
  }
  .traffic-sign-image {
    min-height:170px;
  }
  .traffic-sign-image img {
    height:150px;
  }
  .traffic-signs-hero-meta span {
    min-width:calc(50% - 5px);
  }
}

/* Calm dashboard pass */
.dashboard-page {
  background:#f7faf9;
}
.dashboard-page .dashboard-content {
  width:min(1220px,100%);
  padding:28px 34px 56px;
}
.dashboard-page .dashboard-sidebar {
  box-shadow:none;
}
.dashboard-page .dashboard-topbar {
  height:72px;
  background:rgba(255,255,255,.94);
}
.dashboard-page .app-hero,
.dashboard-page .dashboard-tab-shell,
.dashboard-page .summary-card,
.dashboard-page .dashboard-panel,
.dashboard-page .dashboard-command-card,
.dashboard-page .daily-plan-step,
.dashboard-page .learning-signal-card,
.dashboard-page .readiness-part-card,
.dashboard-page .week-plan-step,
.dashboard-page .topic-status-card,
.dashboard-page .weak-topic-row,
.dashboard-page .badge-card,
.dashboard-page .quick-practice-grid a,
.dashboard-page .route-focus-card,
.dashboard-page .access-status-card {
  box-shadow:none;
}
.dashboard-page .app-hero,
.dashboard-page .dashboard-panel,
.dashboard-page .summary-card {
  border-color:#dde8e5;
  border-radius:16px;
  background:#fff;
}
.dashboard-page .app-hero {
  margin-bottom:18px;
  padding:22px;
}
.dashboard-page .app-hero:after,
.dashboard-page .coach-recommendation:after,
.dashboard-page .week-plan-step:after {
  display:none;
}
.dashboard-page .app-hero h1 {
  margin:4px 0;
  font-size:28px;
  letter-spacing:0;
  line-height:1.16;
}
.dashboard-page .dashboard-welcome p {
  max-width:680px;
  font-size:14px;
  line-height:1.55;
}
.dashboard-page .dashboard-date,
.dashboard-page .panel-kicker {
  color:#7b8985;
  letter-spacing:.4px;
}
.dashboard-page .hero-action-stack .button {
  min-height:42px;
  padding:0 14px;
  border-radius:11px;
  box-shadow:none;
}
.dashboard-page .dashboard-hero-modern {
  grid-template-columns:minmax(0,1fr) auto;
}
.dashboard-page .dashboard-hero-metrics {
  margin-top:16px;
  gap:8px;
}
.dashboard-page .dashboard-hero-metrics span {
  min-height:62px;
  padding:10px 12px;
  border:1px solid #e3ece9;
  border-radius:12px;
  background:#f9fbfa;
}
.dashboard-page .dashboard-hero-metrics strong {
  display:block;
  color:#172522;
  font-size:18px;
  line-height:1.1;
}
.dashboard-page .dashboard-hero-metrics small {
  color:#72807c;
  font-size:11px;
}
.dashboard-page .dashboard-command-grid {
  gap:10px;
  margin-bottom:18px;
}
.dashboard-page .dashboard-command-card {
  min-height:64px;
  padding:12px;
  border:1px solid #dde8e5;
  border-radius:14px;
  background:#fff;
}
.dashboard-page .dashboard-command-card:hover,
.dashboard-page .daily-plan-step:hover,
.dashboard-page .topic-status-card:hover,
.dashboard-page .mistake-book-card:hover,
.dashboard-page .weak-topic-action:hover {
  transform:none;
  box-shadow:none;
}
.dashboard-page .dashboard-command-card.is-primary {
  border-color:#bfd9d3;
  background:#f4faf8;
}
.dashboard-page .dashboard-command-card > i {
  width:36px;
  height:36px;
  border-radius:10px;
  background:#edf5f3;
  color:var(--primary);
  box-shadow:none;
}
.dashboard-page .dashboard-command-card strong {
  font-size:14px;
}
.dashboard-page .dashboard-command-card small {
  color:#74827e;
  font-size:11px;
}
.dashboard-page .dashboard-promo-banner {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  margin:0 0 18px;
  border-color:rgba(228,174,70,.36);
  background:linear-gradient(135deg,#fff,#f7fcfa 58%,#fff5dd);
  box-shadow:0 18px 44px rgba(122,82,18,.08);
}
.dashboard-page .dashboard-promo-icon {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#fff0cf;
  color:#a86a08;
  font-size:30px;
}
.dashboard-page .dashboard-promo-copy > span {
  display:block;
  margin-bottom:4px;
  color:var(--primary);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.dashboard-page .dashboard-promo-copy h2 {
  margin:0;
  color:#172522;
  font-size:22px;
  letter-spacing:0;
}
.dashboard-page .dashboard-promo-copy p {
  max-width:760px;
  margin:6px 0 0;
  color:#5f6f6b;
  font-size:13px;
  line-height:1.55;
}
.dashboard-page .dashboard-promo-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.dashboard-page .dashboard-promo-meta span {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(20,122,105,.12);
  border-radius:999px;
  padding:7px 10px;
  background:rgba(255,255,255,.72);
  color:#53615e;
  font-size:11px;
  font-weight:900;
}
.dashboard-page .dashboard-section-label {
  margin:8px 0 10px;
}
.dashboard-page .dashboard-section-label span {
  color:#263431;
  font-size:14px;
}
.dashboard-page .dashboard-section-label p {
  margin-top:2px;
  font-size:12px;
}
.dashboard-page .dashboard-summary-grid {
  gap:10px;
  margin-bottom:14px;
}
.dashboard-page .summary-card {
  padding:15px;
}
.dashboard-page .summary-icon,
.dashboard-page .dashboard-tab-button i,
.dashboard-page .daily-plan-step span,
.dashboard-page .learning-signal-card > span,
.dashboard-page .readiness-part-head span,
.dashboard-page .weak-topic-icon,
.dashboard-page .quick-icon,
.dashboard-page .route-focus-card span {
  box-shadow:none;
}
.dashboard-page .summary-icon {
  width:36px;
  height:36px;
  border-radius:10px;
  font-size:19px;
}
.dashboard-page .summary-card p {
  margin:13px 0 1px;
  font-size:12px;
}
.dashboard-page .summary-card h2 {
  font-size:24px;
  letter-spacing:0;
}
.dashboard-page .trend,
.dashboard-page .result-count-pill,
.dashboard-page .compact-heading strong,
.dashboard-page .topic-status-card em,
.dashboard-page .readiness-part-head em,
.dashboard-page .dashboard-info-modal small,
.dashboard-page .dashboard-confirm-modal small {
  border-radius:8px;
}
.dashboard-page .pace-click-hint {
  color:#6d7b77;
  font-size:11px;
}
.dashboard-page .dashboard-tab-shell {
  margin:16px 0;
  padding:10px;
  grid-template-columns:1fr;
  gap:10px;
  background:#fff;
}
.dashboard-page .dashboard-tab-intro {
  padding:6px 8px;
  display:block;
}
.dashboard-page .dashboard-tab-intro h2 {
  margin:2px 0 3px;
  font-size:18px;
  letter-spacing:0;
}
.dashboard-page .dashboard-tab-intro p {
  max-width:none;
  font-size:12px;
}
.dashboard-page .dashboard-tab-nav {
  gap:8px;
}
.dashboard-page .dashboard-tab-button {
  min-height:58px;
  padding:10px;
  border-radius:12px;
  box-shadow:none;
}
.dashboard-page .dashboard-tab-button:hover {
  transform:none;
  box-shadow:none;
}
.dashboard-page .dashboard-tab-button span {
  gap:7px;
  font-size:13px;
}
.dashboard-page .dashboard-tab-button i {
  width:26px;
  height:26px;
  border-radius:8px;
  font-size:16px;
}
.dashboard-page .dashboard-tab-button small {
  font-size:10px;
}
.dashboard-page .dashboard-tab-button.is-active {
  border-color:#aacfc7;
  background:#f5faf8;
  box-shadow:inset 3px 0 0 var(--primary);
}
.dashboard-page .daily-plan-panel,
.dashboard-page .coach-insight-panel,
.dashboard-page .readiness-breakdown-panel,
.dashboard-page .week-plan-panel,
.dashboard-page .topic-status-panel,
.dashboard-page .improvement-panel,
.dashboard-page .dashboard-table-panel {
  border-radius:16px;
  background:#fff;
}
.dashboard-page .dashboard-panel {
  padding:18px;
}
.dashboard-page .panel-heading {
  margin-bottom:14px;
}
.dashboard-page .panel-heading h2 {
  font-size:18px;
  letter-spacing:0;
}
.dashboard-page .panel-subcopy {
  font-size:12px;
}
.dashboard-page .daily-plan-grid,
.dashboard-page .learning-signal-grid,
.dashboard-page .readiness-breakdown-grid,
.dashboard-page .week-plan-list,
.dashboard-page .topic-status-grid {
  gap:10px;
}
.dashboard-page .daily-plan-step,
.dashboard-page .learning-signal-card,
.dashboard-page .readiness-part-card,
.dashboard-page .week-plan-step,
.dashboard-page .topic-status-card {
  border-radius:13px;
  background:#fff;
}
.dashboard-page .daily-plan-step {
  min-height:118px;
  padding:13px;
}
.dashboard-page .daily-plan-step span,
.dashboard-page .learning-signal-card > span {
  width:36px;
  height:36px;
  border-radius:10px;
  font-size:20px;
}
.dashboard-page .coach-grid {
  gap:12px;
}
.dashboard-page .coach-card {
  min-height:164px;
}
.dashboard-page .coach-recommendation {
  background:#fff;
}
.dashboard-page .coach-icon {
  width:48px;
  height:48px;
  border-radius:13px;
  font-size:25px;
  box-shadow:none;
}
.dashboard-page .coach-recommendation h2 {
  font-size:20px;
  letter-spacing:0;
}
.dashboard-page .daily-goal-ring {
  width:92px;
  height:92px;
}
.dashboard-page .daily-goal-ring span {
  font-size:18px;
}
.dashboard-page .activity-chart {
  min-height:92px;
}
.dashboard-page .activity-chart div {
  height:86px;
}
.dashboard-page .activity-chart span {
  background:#7abdaf;
  box-shadow:none;
}
.dashboard-page .dashboard-focus-grid {
  gap:14px;
}
.dashboard-page .route-focus-card,
.dashboard-page .access-status-card {
  border-radius:13px;
  background:#f9fbfa;
}
.dashboard-page .route-focus-card span {
  background:#e7f4f1;
  color:var(--primary);
}
.dashboard-page .quick-practice-grid-large {
  gap:8px;
}
.dashboard-page .quick-practice-grid a {
  border-radius:12px;
  background:#fff;
}
.dashboard-page .route-summary-strip {
  gap:8px;
}
.dashboard-page .route-summary-strip div {
  border-radius:12px;
  background:#f9fbfa;
}
.dashboard-page .access-status-card.is-active,
.dashboard-page .access-status-card.is-inactive {
  background:#f9fbfa;
}
.dashboard-page .weak-topic-row {
  border-radius:13px;
  background:#fff;
}
.dashboard-page .weak-topic-score {
  border-radius:10px;
}
.dashboard-page .weak-topic-action {
  border-radius:10px;
}
.dashboard-page .badge-card {
  min-height:112px;
  border-radius:13px;
  background:#f9fbfa;
}
.dashboard-page .badge-card.is-active {
  transform:none;
  background:#fff;
}
.dashboard-page .dashboard-confirm-overlay,
.dashboard-page .dashboard-info-overlay {
  background:rgba(12,35,31,.48);
}
.dashboard-page .dashboard-confirm-modal,
.dashboard-page .dashboard-info-modal {
  border-radius:20px;
  box-shadow:0 24px 70px rgba(2,20,17,.26);
}
.dashboard-page .mascot-bubble {
  box-shadow:0 16px 42px rgba(17,74,65,.12);
}

@media(max-width:860px){
  .dashboard-page .dashboard-content {
    padding:22px 18px 48px;
  }
}

@media(max-width:760px){
  .dashboard-page .dashboard-hero-modern {
    grid-template-columns:1fr;
  }
  .dashboard-page .dashboard-promo-banner {
    grid-template-columns:1fr;
    align-items:start;
  }
  .dashboard-page .dashboard-hero-metrics,
  .dashboard-page .dashboard-tab-nav {
    grid-template-columns:1fr 1fr;
  }
  .dashboard-page .dashboard-tab-intro p {
    display:none;
  }
}

@media(max-width:520px){
  .dashboard-page .dashboard-content {
    padding-left:14px;
    padding-right:14px;
  }
  .dashboard-page .dashboard-hero-metrics,
  .dashboard-page .dashboard-tab-nav {
    grid-template-columns:1fr;
  }
}

/* Calm premium refresh */
:root {
  --primary:#07877a;
  --primary-dark:#075f57;
  --primary-soft:#e9f8f3;
  --secondary:#f4b63f;
  --accent-coral:#ef7668;
  --accent-sky:#7bc8ee;
  --accent-lime:#b7e85b;
  --ink:#10201d;
  --muted:#657670;
  --line:#dce9e5;
  --canvas:#f7fbf8;
  --canvas-warm:#fff8ec;
  --surface-soft:#f4faf7;
  --shadow:0 18px 46px rgba(17,73,66,.09);
}

body {
  background:var(--canvas);
}

.home-page {
  background:
    linear-gradient(180deg,#fbfffc 0%,#f3fbf8 52%,#fff8ec 100%);
}

.site-header {
  height:74px;
  background:rgba(251,255,252,.88);
  border-bottom:1px solid rgba(7,135,122,.09);
  box-shadow:none;
}

.home-page .container {
  width:min(1240px, calc(100% - 64px));
}

.main-nav {
  background:transparent;
  border:0;
  padding:0;
  gap:24px;
}

.main-nav a,
.text-link {
  min-height:auto;
  padding:0;
  border-radius:0;
  color:#42514d;
  font-size:14px;
  font-weight:850;
}

.main-nav a:hover,
.text-link:hover {
  background:transparent;
  color:var(--primary);
}

.button {
  border-radius:14px;
  background:#087f73;
  color:#fff;
  box-shadow:0 14px 30px rgba(7,127,115,.18);
}

.button:hover {
  background:#066a61;
  box-shadow:0 18px 34px rgba(7,127,115,.22);
}

.button-secondary {
  background:#fff;
  border:1px solid var(--line);
  color:#1c2d29;
  box-shadow:0 12px 26px rgba(17,73,66,.06);
}

.button-secondary:hover {
  background:#fff8e8;
  color:#5b3b04;
}

.button-light {
  background:#fff;
  color:var(--primary-dark);
  box-shadow:0 14px 30px rgba(17,73,66,.1);
}

.home-page .hero {
  min-height:auto;
  padding-top:82px;
  padding-bottom:92px;
  background:
    linear-gradient(135deg,#fbfffc 0%,#effaf6 62%,#fff7e9 100%);
}

.home-page .hero::before {
  content:none;
}

.home-page .hero-grid {
  grid-template-columns:minmax(430px, 610px) minmax(420px, 520px);
  gap:72px;
}

.home-page .hero h1 {
  max-width:620px;
  font-size:clamp(48px,5.4vw,72px);
  line-height:1.02;
  color:var(--ink);
}

.home-page .hero h1 span {
  color:var(--primary);
  text-decoration:none;
}

.hero-text {
  max-width:580px;
  color:#536761;
  font-size:18px;
}

.eyebrow {
  background:#ecf8f4;
  border:1px solid rgba(7,135,122,.11);
  color:#08766d;
  box-shadow:none;
}

.hero-route-pills span,
.trust-row,
.logo-strip-inner div,
.content-block,
.content-side,
.content-info-card,
.related-link-card,
.seo-faq-list details,
.feature-card,
.category-card,
.dashboard-card,
.summary-card,
.dashboard-panel,
.app-hero,
.dashboard-command-card,
.daily-plan-step,
.learning-signal-card,
.readiness-part-card,
.week-plan-step,
.topic-status-card,
.weak-topic-row,
.badge-card,
.quick-practice-grid a,
.route-focus-card,
.access-status-card,
.practice-mode-card,
.exercise-card,
.topic-tab-button,
.topic-panel-head,
.settings-card,
.settings-choice,
.pricing-card {
  border:1px solid rgba(7,135,122,.1);
  box-shadow:0 14px 36px rgba(17,73,66,.07);
}

.hero-route-pills {
  margin-top:22px;
}

.hero-route-pills span {
  background:rgba(255,255,255,.82);
  color:#263a36;
  box-shadow:none;
}

.hero-route-pills i {
  background:#fff3d8;
  color:#936000;
}

.trust-row {
  width:min(100%, 560px);
  padding:15px 18px;
  background:#fff;
  box-shadow:0 16px 38px rgba(17,73,66,.06);
}

.trust-item strong {
  color:var(--primary-dark);
}

.trust-item span {
  color:#677973;
}

.home-page .hero-preview {
  padding:0;
  border:1px solid rgba(7,135,122,.12);
  border-radius:26px;
  background:#fff;
  box-shadow:0 24px 58px rgba(17,73,66,.12);
  transform:none;
  overflow:hidden;
}

.preview-topbar,
.question-body {
  border-radius:0;
}

.question-count {
  background:#eef9f5;
  color:var(--primary);
}

.progress-track span {
  background:#07877a;
}

.demo-question-image,
.road-scene {
  border-radius:18px;
  background:#f7fbf9;
}

.answer-button {
  border-width:1px;
  background:#fff;
}

.next-button {
  background:#8fcfc3;
  color:#064d45;
}

.next-button:not(:disabled) {
  background:#087f73;
  color:#fff;
}

.logo-strip {
  background:#fff;
  color:var(--ink);
  border-top:1px solid rgba(7,135,122,.08);
  border-bottom:1px solid rgba(7,135,122,.08);
}

.logo-strip-inner {
  min-height:76px;
  color:#42524e;
}

.logo-strip-inner > span {
  color:#697a75;
}

.logo-strip-inner div {
  background:#f2f9f6;
  color:#2a3f3a;
  box-shadow:none;
}

.logo-strip-inner i {
  color:var(--primary);
}

.section {
  padding:88px 0;
}

.section-soft {
  background:#f4faf7;
}

.feature-card {
  min-height:285px;
  border-radius:20px;
  background:#fff;
}

.feature-card-primary {
  background:linear-gradient(180deg,#087f73,#0a6f66);
  box-shadow:0 18px 42px rgba(7,127,115,.14);
}

.feature-card h3 {
  font-size:22px;
}

.feature-icon,
.category-icon,
.content-info-card span,
.related-link-card span,
.summary-icon,
.dashboard-command-card > i,
.daily-plan-step span,
.learning-signal-card > span,
.readiness-part-head span,
.topic-visual,
.route-focus-card span,
.quick-icon {
  border-radius:12px;
}

.category-card {
  border-radius:16px;
  background:#fff;
}

.dashboard-section {
  background:#f0faf6;
  color:var(--ink);
}

.dashboard-copy p {
  color:#536761;
}

.dashboard-section .light-eyebrow,
.cta-section .light-eyebrow {
  background:#e9f8f3;
  color:var(--primary);
}

.benefit-list i {
  background:#fff;
  color:var(--primary);
  box-shadow:0 8px 18px rgba(17,73,66,.07);
}

.dashboard-card {
  border:1px solid rgba(7,135,122,.1);
  border-radius:24px;
  transform:none;
  box-shadow:0 20px 48px rgba(17,73,66,.1);
}

.score-ring,
.daily-goal-ring,
.readiness-circle,
.result-hero-score {
  background:conic-gradient(var(--primary) 0 74%,#e6efec 74%);
}

.cta-section {
  padding:70px 0;
  background:#fff8ec;
  color:var(--ink);
}

.cta-inner p {
  color:#5f706b;
}

.cta-section .button-light {
  background:#087f73;
  color:#fff;
}

.site-footer {
  background:#092b27;
  padding-top:64px;
}

.footer-brand p,
.footer-grid > div:not(:first-child) a,
.footer-modal-link,
.footer-bottom {
  color:rgba(255,255,255,.68);
}

.footer-grid h4 {
  color:#fff;
}

.content-hero {
  background:linear-gradient(135deg,#fbfffc 0%,#effaf6 70%,#fff8ec 100%);
}

.content-hero-card {
  border-radius:20px;
  background:#fff;
}

.related-link-card,
.seo-faq-list details {
  background:#fbfefd;
}

.homepage-mascot .mascot-avatar,
.homepage-mascot .mascot-avatar img,
.dashboard-page .mascot-avatar,
.dashboard-page .mascot-avatar img {
  width:64px;
  height:64px;
}

.homepage-mascot .mascot-bubble,
.dashboard-page .mascot-bubble {
  max-width:260px;
  border-radius:18px;
  box-shadow:0 16px 36px rgba(17,73,66,.12);
}

.dashboard-page {
  background:
    linear-gradient(180deg,#f7fbf8 0%,#f2f8f5 100%);
}

.dashboard-page .dashboard-sidebar {
  width:254px;
  padding:22px 14px;
  background:rgba(255,255,255,.92);
  border-right:1px solid rgba(7,135,122,.1);
  box-shadow:12px 0 34px rgba(17,73,66,.04);
}

.dashboard-page .dashboard-shell {
  margin-left:254px;
}

.dashboard-page .dashboard-logo-image {
  min-height:66px;
  padding:0 10px 18px;
}

.dashboard-page .dashboard-logo-image img {
  max-width:196px;
}

.dashboard-page .dashboard-menu {
  gap:4px;
}

.dashboard-page .dashboard-menu .menu-label {
  margin:18px 12px 8px;
  color:#81908b;
  letter-spacing:.06em;
}

.dashboard-page .dashboard-menu a {
  min-height:46px;
  border-radius:12px;
  color:#42524e;
  font-weight:800;
}

.dashboard-page .dashboard-menu a:hover,
.dashboard-page .dashboard-menu a.active {
  background:#eaf8f4;
  color:var(--primary-dark);
}

.dashboard-page .dashboard-menu a.active {
  box-shadow:inset 3px 0 0 var(--primary);
}

.dashboard-page .sidebar-upgrade {
  border:1px solid rgba(7,135,122,.13);
  background:#f1faf6;
  color:var(--ink);
  box-shadow:none;
}

.dashboard-page .sidebar-upgrade > span {
  background:#fff7df;
  color:#9b6500;
}

.dashboard-page .sidebar-upgrade p {
  color:#64756f;
}

.dashboard-page .sidebar-upgrade a {
  color:var(--primary);
}

.dashboard-page .dashboard-topbar {
  height:72px;
  background:rgba(247,251,248,.86);
  border-bottom:1px solid rgba(7,135,122,.08);
  box-shadow:none;
}

.dashboard-page .dashboard-content {
  width:min(1280px,100%);
  padding:30px 34px 56px;
}

.dashboard-page .app-hero,
.dashboard-page .dashboard-tab-shell,
.dashboard-page .summary-card,
.dashboard-page .dashboard-panel,
.dashboard-page .dashboard-command-card,
.dashboard-page .daily-plan-step,
.dashboard-page .learning-signal-card,
.dashboard-page .readiness-part-card,
.dashboard-page .week-plan-step,
.dashboard-page .topic-status-card,
.dashboard-page .weak-topic-row,
.dashboard-page .badge-card,
.dashboard-page .quick-practice-grid a,
.dashboard-page .route-focus-card,
.dashboard-page .access-status-card,
.dashboard-page .practice-mode-card,
.dashboard-page .exercise-card,
.dashboard-page .topic-tab-button,
.dashboard-page .topic-panel-head,
.dashboard-page .settings-card,
.dashboard-page .settings-choice,
.dashboard-page .subscription-card,
.dashboard-page .ticket-card {
  border:1px solid rgba(7,135,122,.1);
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 30px rgba(17,73,66,.055);
}

.dashboard-page .app-hero,
.dashboard-page .dashboard-hero,
.dashboard-page .practice-hero,
.dashboard-page .exams-hero,
.dashboard-page .subscription-hero,
.dashboard-page .result-hero {
  background:linear-gradient(135deg,#ffffff 0%,#f1faf6 72%,#fff8ec 100%);
}

.dashboard-page .app-hero:after,
.dashboard-page .dashboard-summary-upgraded .summary-card:after,
.dashboard-page .result-hero-modern:before,
.dashboard-page .result-hero-modern:after,
.dashboard-page .coach-recommendation:after,
.dashboard-page .week-plan-step:after,
.practice-learning-grid .learning-vehicle-modern:before,
.topic-panel-head:after,
.exam-prep-panel:after {
  content:none;
  display:none;
}

.dashboard-page .app-hero h1,
.dashboard-page .practice-hero-modern h1,
.dashboard-page .result-hero-copy h1 {
  color:var(--ink);
  font-size:clamp(30px,3.1vw,42px);
  line-height:1.08;
  letter-spacing:0;
}

.dashboard-page .dashboard-welcome p,
.dashboard-page .practice-hero-modern p,
.dashboard-page .exam-prep-copy p,
.dashboard-page .panel-subcopy,
.dashboard-page .settings-side p {
  color:#5d706a;
}

.dashboard-page .dashboard-date,
.dashboard-page .panel-kicker {
  color:var(--primary);
}

.dashboard-page .dashboard-hero-metrics,
.dashboard-page .practice-hero-metrics {
  gap:12px;
}

.dashboard-page .dashboard-hero-metrics span,
.dashboard-page .practice-hero-metrics span {
  min-height:64px;
  background:#fbfefd;
  border-radius:14px;
  box-shadow:none;
}

.dashboard-page .dashboard-command-grid {
  gap:14px;
}

.dashboard-page .dashboard-command-card {
  min-height:88px;
}

.dashboard-page .dashboard-command-card.is-primary {
  background:#087f73;
  box-shadow:0 14px 30px rgba(7,127,115,.14);
}

.dashboard-page .dashboard-tab-shell {
  padding:14px;
  background:#fff;
}

.dashboard-page .dashboard-tab-button {
  min-height:66px;
  border-radius:12px;
  box-shadow:none;
}

.dashboard-page .dashboard-tab-button.is-active {
  background:#eaf8f4;
  border-color:rgba(7,135,122,.22);
  box-shadow:inset 0 -3px 0 var(--primary);
}

.dashboard-page .summary-card {
  min-height:156px;
}

.dashboard-page .summary-icon,
.dashboard-page .dashboard-tab-button i,
.dashboard-page .daily-plan-step span,
.dashboard-page .learning-signal-card > span,
.dashboard-page .readiness-part-head span,
.dashboard-page .weak-topic-icon,
.dashboard-page .quick-icon,
.dashboard-page .route-focus-card span,
.dashboard-page .topic-visual {
  background:#eaf8f4;
  color:var(--primary);
}

.dashboard-page .summary-icon.orange,
.dashboard-page .quick-icon.danger {
  background:#fff4dd;
  color:#9b6500;
}

.dashboard-page .summary-icon.blue,
.dashboard-page .quick-icon.signs {
  background:#edf7ff;
  color:#2e75a8;
}

.dashboard-page .summary-icon.purple,
.dashboard-page .quick-icon.mistakes {
  background:#f3f0ff;
  color:#6750b5;
}

.dashboard-page .daily-plan-step,
.dashboard-page .topic-status-card,
.dashboard-page .learning-signal-card,
.dashboard-page .readiness-part-card,
.dashboard-page .week-plan-step {
  background:#fbfefd;
}

.dashboard-page .daily-plan-step:hover,
.dashboard-page .topic-status-card:hover,
.dashboard-page .mistake-book-card:hover,
.dashboard-page .dashboard-command-card:hover,
.dashboard-page .quick-practice-grid a:hover {
  transform:translateY(-2px);
  border-color:rgba(7,135,122,.22);
  box-shadow:0 18px 38px rgba(17,73,66,.08);
}

.dashboard-page .practice-mode-card {
  min-height:198px;
}

.dashboard-page .practice-mode-calm .practice-mode-card:after,
.practice-mode-card:after {
  display:none;
}

.dashboard-page .practice-learning-grid,
.learning-grid {
  gap:20px;
}

.dashboard-page .topic-tab-strip {
  border-radius:16px;
  background:#f7fbf8;
}

.dashboard-page .topic-tab-button.active {
  background:#eaf8f4;
  border-color:rgba(7,135,122,.22);
}

.dashboard-page .exercise-card {
  background:#fff;
}

.dashboard-page .settings-side,
.dashboard-page .account-card,
.dashboard-page .continue-panel,
.dashboard-page .coach-recommendation {
  background:#fff;
}

.dashboard-page .topbar-dropdown {
  border-color:rgba(7,135,122,.11);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(17,73,66,.12);
}

.dashboard-page .sidebar-logout {
  border-radius:12px;
  background:#fff7f4;
}

@media(max-width:980px) {
  .home-page .hero-grid {
    grid-template-columns:1fr;
    gap:42px;
  }

  .home-page .hero {
    padding-top:56px;
  }

  .main-nav {
    gap:16px;
  }
}

@media(max-width:860px) {
  .dashboard-page .dashboard-shell {
    margin-left:0;
  }

  .dashboard-page .dashboard-sidebar {
    width:268px;
  }

  .dashboard-page .dashboard-content {
    padding:22px 18px 48px;
  }
}

@media(max-width:720px) {
  .home-page .container {
    width:min(100% - 28px, 1160px);
  }

  .site-header {
    height:70px;
  }

  .home-page .hero {
    padding-top:42px;
    padding-bottom:66px;
  }

  .home-page .hero h1 {
    font-size:clamp(38px,11vw,54px);
  }

  .hero-route-pills span {
    min-height:36px;
  }

  .section {
    padding:68px 0;
  }

  .cta-section {
    padding:58px 0;
  }
}

/* Calm dashboard quick menu refresh */
.dashboard-page {
  background:
    linear-gradient(180deg, #f8fcfa 0%, #f5fbf8 48%, #fbfaf5 100%);
  color:#112c28;
}

.dashboard-drawer-is-open {
  overflow:hidden;
}

.dashboard-page .dashboard-sidebar {
  background:#ffffff;
  border-right:1px solid rgba(18, 95, 84, .08);
  box-shadow:8px 0 28px rgba(20, 70, 61, .045);
}

.dashboard-page .dashboard-menu a {
  border-radius:10px;
  color:#4f6761;
}

.dashboard-page .dashboard-menu a:hover,
.dashboard-page .dashboard-menu a.active {
  background:#edf8f3;
  color:#087f73;
  box-shadow:none;
}

.dashboard-page .sidebar-upgrade {
  background:#f8fbf2;
  border:1px solid rgba(149, 181, 78, .2);
  border-radius:12px;
  box-shadow:none;
}

.dashboard-page .dashboard-topbar {
  background:rgba(255, 255, 255, .92);
  border-bottom:1px solid rgba(18, 95, 84, .08);
  box-shadow:0 10px 30px rgba(19, 75, 67, .045);
  backdrop-filter:blur(16px);
}

.dashboard-page .dashboard-search {
  background:#f7fbf8;
  border:1px solid rgba(18, 95, 84, .1);
  border-radius:14px;
  box-shadow:none;
}

.dashboard-page .dashboard-search:focus-within {
  border-color:rgba(7, 135, 122, .32);
  box-shadow:0 0 0 4px rgba(7, 135, 122, .08);
}

.dashboard-drawer-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(7, 135, 122, .16);
  border-radius:12px;
  background:#eef9f5;
  color:#087f73;
  font-weight:800;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.dashboard-drawer-button i {
  font-size:20px;
}

.dashboard-drawer-button:hover,
.dashboard-drawer-button[aria-expanded="true"] {
  transform:translateY(-1px);
  background:#ffffff;
  border-color:rgba(7, 135, 122, .28);
  box-shadow:0 12px 24px rgba(19, 75, 67, .08);
}

.dashboard-drawer-overlay {
  position:fixed;
  inset:0;
  z-index:3400;
  background:rgba(14, 39, 35, .18);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.dashboard-drawer-overlay.open {
  opacity:1;
  pointer-events:auto;
}

.dashboard-quick-drawer {
  position:fixed;
  top:0;
  right:0;
  z-index:3450;
  display:flex;
  flex-direction:column;
  gap:18px;
  width:min(420px, calc(100vw - 24px));
  height:100dvh;
  padding:24px;
  background:rgba(255, 255, 255, .98);
  border-left:1px solid rgba(18, 95, 84, .1);
  box-shadow:-28px 0 60px rgba(12, 48, 42, .16);
  transform:translateX(104%);
  transition:transform .28s ease;
  overflow:auto;
}

.dashboard-quick-drawer.open {
  transform:translateX(0);
}

.dashboard-drawer-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(18, 95, 84, .1);
}

.dashboard-drawer-header span {
  display:inline-flex;
  margin-bottom:8px;
  color:#087f73;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.dashboard-drawer-header h2 {
  margin:0;
  color:#122b27;
  font-size:25px;
  line-height:1.12;
  letter-spacing:0;
}

.dashboard-drawer-close {
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(18, 95, 84, .1);
  border-radius:12px;
  background:#f7fbf8;
  color:#31534d;
  cursor:pointer;
}

.dashboard-drawer-close:hover {
  background:#eef9f5;
  color:#087f73;
}

.dashboard-drawer-close i {
  font-size:24px;
}

.dashboard-drawer-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.dashboard-drawer-action {
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:142px;
  padding:18px;
  border-radius:14px;
  color:#ffffff;
  text-decoration:none;
  box-shadow:0 18px 34px rgba(15, 83, 74, .16);
  transition:transform .2s ease, box-shadow .2s ease;
}

.dashboard-drawer-action i {
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255, 255, 255, .2);
  font-size:24px;
}

.dashboard-drawer-action strong,
.dashboard-drawer-action small {
  display:block;
}

.dashboard-drawer-action strong {
  font-size:18px;
  line-height:1.15;
}

.dashboard-drawer-action small {
  margin-top:6px;
  color:rgba(255, 255, 255, .82);
  line-height:1.35;
}

.dashboard-drawer-action.is-primary {
  background:#087f73;
}

.dashboard-drawer-action.is-exam {
  background:#e98235;
}

.dashboard-drawer-action:hover {
  transform:translateY(-2px);
  box-shadow:0 22px 40px rgba(15, 83, 74, .2);
}

.dashboard-drawer-status {
  display:flex;
  gap:12px;
  padding:14px;
  border:1px solid rgba(149, 181, 78, .18);
  border-radius:12px;
  background:#fbfcf3;
}

.dashboard-drawer-status > span {
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#eef8d8;
  color:#5f8526;
  font-size:21px;
}

.dashboard-drawer-status strong {
  display:block;
  color:#142d28;
}

.dashboard-drawer-status p {
  margin:4px 0 0;
  color:#60736e;
  font-size:13px;
  line-height:1.45;
}

.dashboard-drawer-nav {
  display:grid;
  gap:8px;
}

.dashboard-drawer-nav a {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:62px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:12px;
  color:#445f59;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.dashboard-drawer-nav a:hover,
.dashboard-drawer-nav a.active {
  transform:translateX(-2px);
  background:#f2faf7;
  border-color:rgba(7, 135, 122, .14);
  color:#087f73;
}

.dashboard-drawer-nav i {
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:10px;
  background:#edf8f3;
  color:#087f73;
  font-size:20px;
}

.dashboard-drawer-nav strong,
.dashboard-drawer-nav small {
  display:block;
}

.dashboard-drawer-nav strong {
  color:#142d28;
  line-height:1.1;
}

.dashboard-drawer-nav small {
  margin-top:5px;
  color:#6b7f7a;
  font-size:12px;
  line-height:1.25;
}

.dashboard-page .dashboard-content {
  padding-top:34px;
}

.dashboard-page .app-hero,
.dashboard-page .dashboard-hero,
.dashboard-page .practice-hero,
.dashboard-page .exams-hero,
.dashboard-page .subscription-hero,
.dashboard-page .result-hero {
  background:#ffffff;
  border:1px solid rgba(18, 95, 84, .08);
  border-radius:18px;
  box-shadow:0 18px 44px rgba(19, 75, 67, .055);
}

.dashboard-page .dashboard-hero-modern {
  align-items:center;
  overflow:hidden;
}

.dashboard-page .dashboard-date {
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:#edf8f3;
  color:#087f73;
  font-size:12px;
  font-weight:900;
}

.dashboard-page .dashboard-welcome p {
  max-width:690px;
  font-size:17px;
  line-height:1.65;
}

.dashboard-page .hero-action-stack {
  min-width:210px;
  gap:12px;
}

.dashboard-page .hero-action-stack .button {
  width:100%;
  min-height:54px;
  justify-content:center;
  border-radius:14px;
  font-size:16px;
  box-shadow:0 14px 28px rgba(7, 127, 115, .16);
}

.dashboard-page .hero-action-stack .button-secondary,
.dashboard-page .button-exam {
  background:#fff4e8;
  border-color:rgba(233, 130, 53, .24);
  color:#a85515;
  box-shadow:none;
}

.dashboard-page .hero-action-stack .button-secondary:hover,
.dashboard-page .button-exam:hover {
  background:#ffe8d3;
  color:#8a430e;
}

.dashboard-page .dashboard-hero-metrics span {
  border:1px solid rgba(18, 95, 84, .08);
}

.dashboard-page .dashboard-command-grid {
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.dashboard-page .dashboard-command-card {
  min-height:104px;
  border:1px solid rgba(18, 95, 84, .08);
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 12px 26px rgba(19, 75, 67, .045);
}

.dashboard-page .dashboard-command-card > i {
  width:46px;
  height:46px;
  border-radius:12px;
}

.dashboard-page .dashboard-command-card.is-primary {
  background:#087f73;
}

.dashboard-page .dashboard-command-card.is-exam {
  border-color:rgba(233, 130, 53, .22);
  background:#fff8f1;
}

.dashboard-page .dashboard-command-card.is-exam > i {
  background:#ffead6;
  color:#b75b18;
}

.dashboard-page .dashboard-panel,
.dashboard-page .summary-card,
.dashboard-page .dashboard-tab-shell,
.dashboard-page .practice-mode-card,
.dashboard-page .exercise-card,
.dashboard-page .settings-card,
.dashboard-page .subscription-card,
.dashboard-page .ticket-card {
  border-color:rgba(18, 95, 84, .08);
  box-shadow:0 14px 34px rgba(19, 75, 67, .045);
}

.dashboard-page .summary-card,
.dashboard-page .daily-plan-step,
.dashboard-page .learning-signal-card,
.dashboard-page .readiness-part-card,
.dashboard-page .week-plan-step {
  border-radius:14px;
}

.dashboard-page .dashboard-tab-shell {
  gap:14px;
}

.dashboard-page .dashboard-tab-intro {
  padding:4px 4px 0;
}

.dashboard-page .dashboard-tab-button {
  background:#f8fbf9;
  border-color:rgba(18, 95, 84, .08);
}

.dashboard-page .dashboard-tab-button.is-active {
  background:#eef9f5;
  box-shadow:none;
}

@media(max-width:1180px) {
  .dashboard-page .dashboard-command-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:760px) {
  .dashboard-drawer-button {
    min-width:42px;
    width:42px;
    padding:0;
  }

  .dashboard-drawer-button span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }

  .dashboard-quick-drawer {
    width:min(100vw, 390px);
    padding:20px;
  }

  .dashboard-drawer-actions {
    grid-template-columns:1fr;
  }

  .dashboard-drawer-action {
    min-height:112px;
  }

  .dashboard-page .dashboard-command-grid {
    grid-template-columns:1fr;
  }

  .dashboard-page .dashboard-hero-modern {
    gap:24px;
  }

  .dashboard-page .hero-action-stack {
    width:100%;
  }
}

/* Dashboard drawer insights and compact modals */
.dashboard-modal-is-open {
  overflow:hidden;
}

.dashboard-drawer-widget-list {
  display:grid;
  gap:14px;
}

.drawer-overview-card {
  padding:16px;
  border:1px solid rgba(7, 135, 122, .12);
  border-radius:14px;
  background:linear-gradient(135deg, #f3fbf8, #fffaf1);
}

.drawer-overview-card span,
.drawer-overview-card small,
.drawer-overview-card strong {
  display:block;
}

.drawer-overview-card span {
  color:#087f73;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.drawer-overview-card strong {
  margin-top:6px;
  color:#122b27;
  font-size:24px;
  line-height:1.1;
}

.drawer-overview-card small {
  margin-top:9px;
  color:#657975;
  font-size:12px;
  line-height:1.4;
}

.drawer-overview-bar {
  height:8px;
  margin-top:14px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(18, 95, 84, .1);
}

.drawer-overview-bar b {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #087f73, #9fd95b);
}

.drawer-widget-grid {
  display:grid;
  gap:9px;
}

.drawer-widget-button {
  width:100%;
  min-height:66px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border:1px solid rgba(18, 95, 84, .08);
  border-radius:13px;
  background:#ffffff;
  color:#445f59;
  text-align:left;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.drawer-widget-button:hover {
  transform:translateX(-2px);
  border-color:rgba(7, 135, 122, .16);
  background:#f4fbf8;
  box-shadow:0 12px 24px rgba(19, 75, 67, .06);
}

.drawer-widget-button i {
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:11px;
  background:#edf8f3;
  color:#087f73;
  font-size:20px;
}

.drawer-widget-button strong,
.drawer-widget-button small {
  display:block;
}

.drawer-widget-button strong {
  color:#142d28;
  font-size:15px;
  line-height:1.1;
}

.drawer-widget-button small {
  margin-top:5px;
  color:#72847f;
  font-size:12px;
  line-height:1.25;
}

.dashboard-drawer-empty {
  display:grid;
  justify-items:start;
  gap:8px;
  padding:16px;
  border-radius:14px;
  background:#f7fbf8;
  color:#60736e;
}

.dashboard-drawer-empty span {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#edf8f3;
  color:#087f73;
  font-size:22px;
}

.dashboard-drawer-empty strong {
  color:#142d28;
}

.dashboard-drawer-empty p {
  margin:0;
  font-size:13px;
  line-height:1.45;
}

.dashboard-detail-overlay {
  position:fixed;
  inset:0;
  z-index:5200;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(8, 30, 27, .52);
  backdrop-filter:blur(12px);
}

.dashboard-detail-overlay.is-open {
  display:grid;
  animation:feedbackFade .16s ease both;
}

.dashboard-detail-modal {
  position:relative;
  width:min(680px, 100%);
  max-height:min(86dvh, 760px);
  overflow:auto;
  padding:30px;
  border:1px solid rgba(255, 255, 255, .74);
  border-radius:24px;
  background:#ffffff;
  box-shadow:0 34px 100px rgba(2, 20, 17, .3);
  animation:feedbackRise .22s ease both;
}

.dashboard-detail-close {
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(18, 95, 84, .1);
  border-radius:13px;
  background:#f7fbf8;
  color:#17342f;
  font-size:24px;
  cursor:pointer;
}

.dashboard-detail-close:hover {
  background:#edf8f3;
  color:#087f73;
}

.dashboard-detail-icon {
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:#edf8f3;
  color:#087f73;
  font-size:34px;
}

.dashboard-detail-icon.is-warm {
  background:#fff4dd;
  color:#b16a12;
}

.dashboard-detail-icon.is-blue {
  background:#edf7ff;
  color:#2e75a8;
}

.dashboard-detail-icon.is-purple {
  background:#f3f0ff;
  color:#6750b5;
}

.dashboard-detail-icon.is-green {
  background:#eef8d8;
  color:#5f8526;
}

.dashboard-detail-modal > small {
  display:inline-flex;
  min-height:28px;
  align-items:center;
  margin-top:18px;
  padding:0 10px;
  border-radius:999px;
  background:#edf8f3;
  color:#087f73;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.dashboard-detail-modal h2 {
  max-width:520px;
  margin:10px 0 8px;
  color:#122b27;
  font-size:31px;
  line-height:1.1;
  letter-spacing:0;
}

.dashboard-detail-modal > p {
  max-width:560px;
  margin:0;
  color:#5f736e;
  font-size:15px;
  line-height:1.65;
}

.dashboard-modal-stat-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:22px;
}

.dashboard-modal-stat-grid div {
  min-height:86px;
  padding:14px;
  border:1px solid rgba(18, 95, 84, .08);
  border-radius:14px;
  background:#f8fbf9;
}

.dashboard-modal-stat-grid strong,
.dashboard-modal-stat-grid small {
  display:block;
}

.dashboard-modal-stat-grid strong {
  color:#122b27;
  font-size:22px;
  line-height:1.1;
}

.dashboard-modal-stat-grid small {
  margin-top:8px;
  color:#6b7f7a;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.dashboard-modal-list {
  display:grid;
  gap:10px;
  margin-top:22px;
}

.dashboard-modal-list > div,
.dashboard-modal-list > a {
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-height:64px;
  padding:12px;
  border:1px solid rgba(18, 95, 84, .08);
  border-radius:14px;
  background:#f8fbf9;
  color:#445f59;
  text-decoration:none;
}

.dashboard-modal-list.compact {
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.dashboard-modal-list i {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:11px;
  background:#edf8f3;
  color:#087f73;
  font-size:20px;
}

.dashboard-modal-list strong,
.dashboard-modal-list small {
  display:block;
}

.dashboard-modal-list strong {
  color:#142d28;
  line-height:1.25;
}

.dashboard-modal-list small {
  margin-top:5px;
  color:#6b7f7a;
  font-size:12px;
  line-height:1.45;
}

.dashboard-detail-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.dashboard-detail-actions .button {
  min-height:46px;
  justify-content:center;
}

@media(max-width:720px) {
  .dashboard-detail-overlay {
    align-items:end;
    padding:12px;
  }

  .dashboard-detail-modal {
    max-height:calc(100dvh - 24px);
    padding:24px 18px;
    border-radius:22px 22px 14px 14px;
  }

  .dashboard-detail-modal h2 {
    font-size:26px;
  }

  .dashboard-modal-stat-grid,
  .dashboard-modal-list.compact {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .dashboard-detail-actions {
    display:grid;
  }
}

/* Warmer playful palette refresh */
:root {
  --primary:#ff6b4a;
  --primary-dark:#e94e32;
  --primary-soft:#fff0ea;
  --secondary:#15b8c5;
  --accent-coral:#ff6b4a;
  --accent-sky:#59bfff;
  --accent-lime:#d7f35f;
  --accent-violet:#7868ff;
  --ink:#17212b;
  --text:#17212b;
  --muted:#667580;
  --line:#e4e9ef;
  --canvas:#f7f9ff;
  --canvas-warm:#fff7f1;
  --surface-soft:#f7f9ff;
  --dark:#111827;
  --shadow:0 24px 60px rgba(64, 55, 91, .11);
}

body,
.dashboard-page {
  color:var(--text);
}

.home-page {
  background:
    linear-gradient(180deg, #fffdfb 0%, #f7fbff 42%, #fff7f1 100%);
}

.section-soft,
.dashboard-page {
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 107, 74, .08), transparent 32%),
    radial-gradient(circle at 92% 18%, rgba(89, 191, 255, .1), transparent 30%),
    linear-gradient(180deg, #fffdfb 0%, #f7fbff 54%, #fff8f2 100%);
}

.site-header,
.dashboard-page .dashboard-topbar {
  border-color:rgba(58, 74, 93, .08);
  background:rgba(255, 255, 255, .9);
  box-shadow:0 12px 34px rgba(64, 55, 91, .055);
}

.logo-mark,
.mini-compass,
.entry-modal-icon,
.contact-form-heading > span,
.content-hero-card > span,
.subscription-active-icon,
.coach-icon {
  background:linear-gradient(135deg, #ff6b4a, #ff9f43);
  box-shadow:0 16px 34px rgba(255, 107, 74, .2);
}

.logo-text span,
.logo-wordmark b,
.main-nav a:hover,
.text-link:hover,
.hero h1 span,
.eyebrow,
.dashboard-page .dashboard-date,
.dashboard-page .panel-kicker,
.modal-brand,
.modal-kicker,
.content-side a:hover,
.text-button,
.feature-card a,
.price,
.pricing-label,
.subscription-price,
.subscription-active-copy span,
.result-mini-pill,
.dashboard-page .dashboard-hero-metrics strong,
.dashboard-page .practice-hero-metrics strong,
.drawer-overview-card span,
.dashboard-drawer-header span,
.dashboard-drawer-button,
.drawer-widget-button:hover strong,
.dashboard-detail-modal > small,
.dashboard-detail-close:hover {
  color:var(--primary);
}

.button,
.next-button,
.mode-action,
.round-play,
.dashboard-search-submit,
.dashboard-page .dashboard-command-card.is-primary,
.dashboard-drawer-action.is-primary,
.ticket-tabs a.active,
.badge-card.is-active i,
.settings-choice:has(input:checked) span,
.category-card:hover .category-arrow,
.register-vehicle-grid label:has(input:checked) i,
.answer-button.selected span,
.study-answer-option.feedback-option.is-correct span {
  background:linear-gradient(135deg, #ff6b4a, #ff8e45);
  color:#fff;
  box-shadow:0 16px 32px rgba(255, 107, 74, .2);
}

.button:hover,
.next-button:hover,
.mode-action:hover {
  background:linear-gradient(135deg, #f25438, #ff7f37);
  box-shadow:0 18px 36px rgba(255, 107, 74, .26);
}

.button-secondary,
.dashboard-page .button-exam,
.mode-action.muted {
  background:#ffffff;
  border-color:rgba(255, 107, 74, .2);
  color:#e94e32;
  box-shadow:0 12px 26px rgba(64, 55, 91, .065);
}

.button-secondary:hover,
.dashboard-page .button-exam:hover {
  background:#fff0ea;
  color:#d94024;
}

.eyebrow,
.feature-icon,
.feature-tag.light,
.pricing-features i,
.related-link-card span,
.faq-item::before,
.seo-faq-list summary::after,
.modal-icon,
.demo-notice,
.question-count,
.answer-button span,
.content-info-card span,
.category-arrow,
.traffic-demo-public-visual i,
.traffic-demo-option span,
.register-vehicle-grid i,
.dashboard-page .summary-icon,
.dashboard-page .dashboard-tab-button i,
.dashboard-page .daily-plan-step span,
.dashboard-page .learning-signal-card > span,
.dashboard-page .readiness-part-head span,
.dashboard-page .weak-topic-icon,
.dashboard-page .quick-icon,
.dashboard-page .topic-visual,
.drawer-widget-button i,
.dashboard-drawer-close:hover,
.dashboard-detail-icon,
.dashboard-modal-list i {
  background:#fff0ea;
  color:var(--primary);
}

.dashboard-page .summary-icon.blue,
.dashboard-detail-icon.is-blue,
.dashboard-modal-list.compact i,
.quick-icon.signs {
  background:#eaf6ff;
  color:#2679c8;
}

.dashboard-page .summary-icon.orange,
.dashboard-detail-icon.is-warm,
.quick-icon.danger {
  background:#fff3dc;
  color:#c77916;
}

.dashboard-page .summary-icon.purple,
.dashboard-detail-icon.is-purple,
.quick-icon.mistakes {
  background:#f0eeff;
  color:#6857df;
}

.dashboard-detail-icon.is-green,
.dashboard-drawer-status > span,
.summary-icon.green,
.review-overview-pills .is-correct,
.review-card.is-correct .review-card-head > span,
.status-pill.success {
  background:#eaf9fb;
  color:#0f91a1;
}

.progress-track span,
.category-progress b,
.mini-progress span,
.lesson-progress span,
.mode-progress b,
.study-progress-track span,
.exam-progress-preview span,
.traffic-demo-public-top b,
.drawer-overview-bar b,
.weak-topic-bar b,
.pace-meter span,
.activity-chart span,
.result-hero-modern:after,
.entry-modal-card:before,
.dashboard-confirm-modal:before,
.dashboard-info-modal:before,
.answer-feedback-modal:before,
.exam-card:before {
  background:linear-gradient(90deg, #ff6b4a, #ffb84d, #59bfff);
}

.score-ring,
.daily-goal-ring,
.readiness-circle,
.result-hero-score {
  background:conic-gradient(#ff6b4a 0 var(--score-angle, var(--goal, 74%)), #edf1f5 var(--score-angle, var(--goal, 74%)) 100%);
}

.dashboard-page .dashboard-sidebar {
  border-right-color:rgba(58, 74, 93, .08);
  box-shadow:8px 0 28px rgba(64, 55, 91, .045);
}

.dashboard-page .dashboard-menu a:hover,
.dashboard-page .dashboard-menu a.active,
.profile-dropdown a:hover,
.content-side a:hover,
.topic-tab-button.active {
  background:#fff0ea;
  color:var(--primary);
}

.dashboard-page .sidebar-upgrade,
.dashboard-drawer-status {
  background:#fff8ed;
  border-color:rgba(255, 184, 77, .28);
}

.dashboard-page .dashboard-search:focus-within,
.contact-form input:focus,
.contact-form textarea:focus,
.input-wrap:focus-within,
.password-input:focus-within,
.settings-form-grid input:focus,
.subscription-promo-panel input:focus,
.open-answer-input-wrap:focus-within {
  border-color:rgba(255, 107, 74, .42);
  box-shadow:0 0 0 4px rgba(255, 107, 74, .1);
}

.dashboard-drawer-button {
  background:#fff0ea;
  border-color:rgba(255, 107, 74, .22);
}

.dashboard-drawer-button:hover,
.dashboard-drawer-button[aria-expanded="true"] {
  background:#ffffff;
  border-color:rgba(255, 107, 74, .36);
  box-shadow:0 14px 28px rgba(255, 107, 74, .11);
}

.dashboard-quick-drawer {
  background:rgba(255, 253, 251, .98);
  border-left-color:rgba(58, 74, 93, .08);
  box-shadow:-28px 0 60px rgba(64, 55, 91, .18);
}

.dashboard-drawer-overlay {
  background:rgba(35, 30, 48, .22);
}

.dashboard-drawer-action.is-exam {
  background:linear-gradient(135deg, #6678ff, #59bfff);
  box-shadow:0 18px 34px rgba(102, 120, 255, .2);
}

.drawer-overview-card {
  border-color:rgba(255, 107, 74, .14);
  background:linear-gradient(135deg, #fff4ef, #eef8ff);
}

.drawer-widget-button {
  border-color:rgba(58, 74, 93, .08);
}

.drawer-widget-button:hover {
  background:#fff7f3;
  border-color:rgba(255, 107, 74, .18);
}

.dashboard-page .app-hero,
.dashboard-page .dashboard-hero,
.dashboard-page .practice-hero,
.dashboard-page .exams-hero,
.dashboard-page .subscription-hero,
.dashboard-page .result-hero,
.dashboard-page .dashboard-panel,
.dashboard-page .summary-card,
.dashboard-page .dashboard-tab-shell,
.dashboard-page .practice-mode-card,
.dashboard-page .exercise-card,
.dashboard-page .settings-card,
.dashboard-page .subscription-card,
.dashboard-page .ticket-card,
.dashboard-page .access-status-card,
.dashboard-page .topic-status-card,
.dashboard-page .daily-plan-step,
.dashboard-page .learning-signal-card,
.dashboard-page .readiness-part-card,
.dashboard-page .week-plan-step,
.dashboard-detail-modal,
.dashboard-info-modal,
.dashboard-confirm-modal,
.auth-modal {
  border-color:rgba(58, 74, 93, .08);
  background:rgba(255, 255, 255, .96);
  box-shadow:0 18px 44px rgba(64, 55, 91, .08);
}

.dashboard-detail-overlay,
.dashboard-info-overlay,
.dashboard-confirm-overlay,
.answer-feedback-overlay {
  background:
    radial-gradient(circle at 42% 28%, rgba(255, 107, 74, .2), transparent 34%),
    radial-gradient(circle at 62% 58%, rgba(89, 191, 255, .18), transparent 34%),
    rgba(23, 28, 43, .62);
}

.dashboard-detail-modal > small,
.dashboard-info-modal small,
.dashboard-confirm-modal small,
.result-count-pill,
.compact-heading strong,
.exam-card-kicker,
.password-kicker {
  background:#fff0ea;
  color:#e94e32;
}

.dashboard-page .dashboard-command-card.is-exam,
.dashboard-page .hero-action-stack .button-secondary,
.dashboard-page .button-exam {
  background:#eef5ff;
  border-color:rgba(102, 120, 255, .18);
  color:#4e5ed6;
}

.dashboard-page .dashboard-command-card.is-exam > i {
  background:#e8ecff;
  color:#5b68de;
}

.dashboard-page .dashboard-tab-button.is-active {
  background:#fff0ea;
  border-color:rgba(255, 107, 74, .2);
  box-shadow:inset 0 -3px 0 #ff6b4a;
}

.summary-icon.green,
.content-message.success,
.result-mini-pill.is-passed,
.study-answer-option.feedback-option.is-correct > i,
.instant-feedback.is-correct .instant-feedback-icon,
.instant-feedback-summary.is-correct .instant-feedback-summary-icon,
.open-answer-feedback-card.is-correct > span,
.review-open-answer.is-correct > span {
  color:#0f91a1;
  background:#eaf9fb;
}

.study-answer-option.feedback-option.is-chosen,
.review-option.is-chosen,
.settings-choice:has(input:checked),
.register-vehicle-grid label:has(input:checked) {
  box-shadow:0 0 0 4px rgba(255, 107, 74, .1), 0 18px 34px rgba(64, 55, 91, .08);
  border-color:rgba(255, 107, 74, .38);
}

.cta-section,
.password-side {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 184, 77, .28), transparent 28%),
    linear-gradient(135deg, #ff6b4a, #6678ff);
}

.footer {
  background:#121827;
}

/* Home footer and green block cleanup */
.home-page .logo-strip {
  background:#ffffff;
  border-color:rgba(58, 74, 93, .08);
  box-shadow:0 10px 30px rgba(64, 55, 91, .04);
}

.home-page .logo-strip-inner {
  min-height:78px;
  color:#263545;
}

.home-page .logo-strip-inner > span {
  color:#5c6a76;
  font-weight:900;
}

.home-page .logo-strip-inner div {
  min-height:40px;
  padding:0 16px;
  border:1px solid rgba(255, 107, 74, .16);
  border-radius:999px;
  background:#fff8f4;
  color:#263545;
  box-shadow:none;
}

.home-page .logo-strip-inner i {
  color:#ff6b4a;
}

.home-page #oefenen.section-soft {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 56%, #fff8f3 100%);
}

.home-page .feature-grid {
  align-items:stretch;
}

.home-page .feature-card {
  border-color:rgba(58, 74, 93, .08);
  background:rgba(255, 255, 255, .96);
  box-shadow:0 18px 42px rgba(64, 55, 91, .07);
}

.home-page .feature-card:hover {
  border-color:rgba(255, 107, 74, .18);
  box-shadow:0 24px 52px rgba(64, 55, 91, .1);
}

.home-page .feature-card-primary {
  background:linear-gradient(145deg, #ff6b4a 0%, #ff8f45 54%, #ffb84d 100%);
  color:#fff;
  box-shadow:0 24px 52px rgba(255, 107, 74, .22);
}

.home-page .feature-card-primary .feature-icon {
  background:rgba(255, 255, 255, .18);
  color:#fff;
}

.home-page .feature-card-primary .feature-tag {
  background:rgba(255, 255, 255, .18);
  color:#fff;
}

.home-page .feature-card-primary p {
  color:rgba(255, 255, 255, .82);
}

.home-page .feature-card-primary a {
  color:#fff;
}

.home-page .feature-card:nth-child(2) .feature-icon {
  background:#fff3dc;
  color:#c77916;
}

.home-page .feature-card:nth-child(3) .feature-icon {
  background:#eef1ff;
  color:#5b68de;
}

.home-page .feature-card .feature-tag.light {
  background:#fff0ea;
  color:#e94e32;
}

.home-page .feature-card:nth-child(3) .feature-tag.light {
  background:#eef1ff;
  color:#4e5ed6;
}

.home-page .dashboard-section {
  background:#121827;
  color:#fff;
  overflow:hidden;
}

.home-page .dashboard-section::after {
  content:none;
}

.home-page .dashboard-section .eyebrow,
.home-page .dashboard-section .light-eyebrow {
  background:rgba(255, 255, 255, .1);
  color:#ffb84d;
}

.home-page .dashboard-copy p {
  color:rgba(255, 255, 255, .72);
}

.home-page .benefit-list > div {
  padding:12px;
  border:1px solid rgba(255, 255, 255, .08);
  border-radius:14px;
  background:rgba(255, 255, 255, .045);
}

.home-page .benefit-list i {
  background:rgba(255, 107, 74, .16);
  color:#ffb84d;
}

.home-page .benefit-list small {
  color:rgba(255, 255, 255, .62);
}

.home-page .dashboard-section .button-light {
  background:#ffffff;
  color:#17212b;
  box-shadow:0 18px 38px rgba(0, 0, 0, .2);
}

.home-page .dashboard-section .button-light:hover {
  background:#fff0ea;
  color:#e94e32;
}

.home-page .dashboard-section .dashboard-card {
  background:#ffffff;
  color:#17212b;
  border:1px solid rgba(255, 255, 255, .18);
  box-shadow:0 34px 80px rgba(0, 0, 0, .26);
}

.home-page .dashboard-section .avatar {
  background:#eef1ff;
  color:#5b68de;
}

.home-page .dashboard-section .score-ring {
  background:conic-gradient(#ff6b4a 0 74%, #edf1f5 74%);
}

.home-page .dashboard-section .score-box p,
.home-page .dashboard-section .mini-stats i,
.home-page .dashboard-section .weak-title a,
.home-page .dashboard-section .weak-row strong {
  color:#ff6b4a;
}

.home-page .dashboard-section .weak-row b {
  background:linear-gradient(90deg, #ff6b4a, #ffb84d, #59bfff);
}

.home-page .cta-section {
  position:relative;
  padding:86px 0;
  overflow:hidden;
  background:
    linear-gradient(115deg, #fff7f1 0%, #f7fbff 54%, #eef1ff 100%);
  color:#17212b;
  border-top:1px solid rgba(58, 74, 93, .08);
}

.home-page .cta-section::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:8px;
  background:linear-gradient(90deg, #ff6b4a, #ffb84d, #6678ff);
}

.home-page .cta-inner {
  position:relative;
  z-index:1;
  align-items:center;
}

.home-page .cta-section .light-eyebrow {
  background:#ffffff;
  color:#ff6b4a;
  border:1px solid rgba(255, 107, 74, .16);
  box-shadow:0 10px 24px rgba(64, 55, 91, .06);
}

.home-page .cta-inner h2 {
  color:#17212b;
  letter-spacing:0;
}

.home-page .cta-inner p {
  color:#64727f;
}

.home-page .cta-section .button-light {
  background:linear-gradient(135deg, #ff6b4a, #ff8f45);
  color:#fff;
  box-shadow:0 18px 36px rgba(255, 107, 74, .24);
}

.home-page .cta-section .button-light:hover {
  background:linear-gradient(135deg, #f25438, #ff7f37);
  color:#fff;
}

@media(max-width:720px) {
  .home-page .logo-strip-inner div {
    width:100%;
    justify-content:center;
  }

  .home-page .cta-section {
    padding:68px 0;
  }
}

/* Practice topic panel: remove green/orange clash */
.dashboard-page .practice-learning-grid .learning-vehicle-modern,
.dashboard-page .learning-vehicle-modern {
  background:linear-gradient(180deg, #ffffff 0%, #fbfcff 58%, #fff8f3 100%);
  border-color:rgba(58, 74, 93, .08);
  box-shadow:0 24px 56px rgba(64, 55, 91, .08);
}

.dashboard-page .practice-learning-grid .learning-vehicle-modern:before,
.dashboard-page .learning-vehicle-modern:before {
  background:linear-gradient(90deg, #ff6b4a, #ffb84d, #6678ff);
}

.dashboard-page .learning-block-meta span {
  background:#fff8f4;
  border-color:rgba(255, 107, 74, .16);
  color:#263545;
}

.dashboard-page .learning-block-meta i {
  color:#ff6b4a;
}

.dashboard-page .topic-picker-head small {
  background:#fff0ea;
  color:#e94e32;
}

.dashboard-page .topic-tab-strip,
.practice-learning-grid .topic-tab-strip {
  background:linear-gradient(135deg, #f8fbff 0%, #fff8f3 100%);
  border-color:rgba(58, 74, 93, .08);
}

.dashboard-page .learning-vehicle-modern .topic-tab-button,
.practice-learning-grid .learning-vehicle-modern .topic-tab-button {
  background:#ffffff;
  border-color:rgba(58, 74, 93, .08);
  color:#263545;
  box-shadow:0 10px 22px rgba(64, 55, 91, .045);
}

.dashboard-page .topic-tab-button:hover,
.practice-learning-grid .topic-tab-button:hover {
  border-color:rgba(255, 107, 74, .18);
  background:#fff8f4;
  box-shadow:0 16px 30px rgba(255, 107, 74, .08);
}

.dashboard-page .topic-tab-button.active,
.practice-learning-grid .topic-tab-button.active {
  background:linear-gradient(135deg, #fff3ec 0%, #fffaf5 100%);
  border-color:rgba(255, 107, 74, .28);
  box-shadow:inset 3px 0 0 #ff6b4a, 0 16px 30px rgba(255, 107, 74, .09);
}

.dashboard-page .topic-tab-button.active span,
.dashboard-page .topic-tab-button.active small,
.practice-learning-grid .topic-tab-button.active span,
.practice-learning-grid .topic-tab-button.active small {
  color:#ff5f42;
}

.dashboard-page .learning-vehicle-modern .topic-tab-button > i,
.dashboard-page .learning-vehicle-modern .topic-tab-button > .topic-visual,
.practice-learning-grid .learning-vehicle-modern .topic-tab-button > i,
.practice-learning-grid .learning-vehicle-modern .topic-tab-button > .topic-visual,
.dashboard-page .topic-visual,
.dashboard-page .topic-panel-image,
.dashboard-page .topic-panel-image.placeholder {
  background:#f1f5ff;
  border-color:rgba(102, 120, 255, .14);
  color:#5b68de;
}

.dashboard-page .learning-vehicle-modern .topic-tab-button.active > i,
.dashboard-page .learning-vehicle-modern .topic-tab-button.active > .topic-visual:not(.has-image),
.practice-learning-grid .learning-vehicle-modern .topic-tab-button.active > i,
.practice-learning-grid .learning-vehicle-modern .topic-tab-button.active > .topic-visual:not(.has-image) {
  background:#fff0ea;
  color:#ff5f42;
}

.dashboard-page .topic-panel-head,
.practice-learning-grid .learning-vehicle-modern .topic-panel-head {
  background:linear-gradient(135deg, #ffffff 0%, #f8fbff 62%, #fff8f3 100%);
  border-color:rgba(58, 74, 93, .08);
}

.dashboard-page .topic-panel-head:after,
.practice-learning-grid .topic-panel-head:after {
  background:rgba(255, 184, 77, .12);
}

.dashboard-page .topic-panel-meta span {
  background:#fff8f4;
  color:#e94e32;
}