:root {
  --paper: #f8f5ee;
  --paper-deep: #eee9df;
  --ink: #292a25;
  --muted: #787970;
  --line: #e3dfd4;
  --coral: #f57d59;
  --coral-deep: #df6242;
  --coral-wash: #fae2d8;
  --sage: #748a67;
  --sage-wash: #e3eadc;
  --yellow: #f4c969;
  --navy: #354c56;
  --white: #fffdf9;
  --shadow: 0 16px 38px rgba(54, 45, 32, .07);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(53,76,86,.35); outline-offset: 3px; }
.topbar { height: 78px; padding: 0 46px 0 42px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(227,223,212,.8); background: rgba(248,245,238,.92); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; color: var(--white); background: var(--coral); border-radius: 10px 10px 10px 3px; font-family: 'Noto Sans Telugu', sans-serif; font-size: 22px; font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 24px; }
.top-streak { color: var(--muted); font-size: 13px; }
.top-streak strong { color: var(--ink); font-size: 15px; }
.avatar, .tiny-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--navy); background: var(--yellow); font-size: 11px; font-weight: 700; }
.mobile-menu { display: none; background: transparent; font-size: 22px; }
.shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); max-width: 1480px; margin: auto; }
.sidebar { min-height: calc(100vh - 78px); border-right: 1px solid var(--line); padding: 38px 18px 24px 24px; display: flex; flex-direction: column; }
.sidebar-label, .eyebrow { color: #9a9b91; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.sidebar-label { margin: 0 0 15px 14px; }
.sidebar nav { display: grid; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; border-radius: 9px; color: var(--muted); background: transparent; text-align: left; font-size: 13px; font-weight: 500; transition: all .2s ease; }
.nav-item:hover { color: var(--ink); background: var(--paper-deep); }
.nav-item.active { color: var(--coral-deep); background: var(--coral-wash); font-weight: 700; }
.nav-icon { width: 17px; text-align: center; font-size: 17px; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 15px; }
.mini-card { display: flex; gap: 10px; align-items: center; padding: 12px 9px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mini-sun { color: var(--coral); font-size: 20px; }
.mini-card div { display: grid; gap: 2px; flex: 1; }
.mini-card strong { font-size: 12px; }
.mini-card span { color: var(--muted); font-size: 11px; }
.mini-card button, .language-note button { color: var(--muted); background: transparent; font-size: 17px; }
.language-note { display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.tiny-avatar { width: 27px; height: 27px; background: var(--sage-wash); color: var(--sage); font-size: 9px; }
.language-note strong { color: var(--ink); font-size: 11px; }
.main { min-width: 0; max-width: 1020px; width: 100%; padding: 50px 62px 100px; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 34px; }
.page-heading h1, .welcome-card h1 { margin: 6px 0 0; font-family: Fraunces, Georgia, serif; font-size: clamp(29px, 3vw, 43px); font-weight: 500; letter-spacing: -.04em; line-height: 1.07; }
.page-heading h1 em { color: var(--coral-deep); font-style: normal; }
.page-sub { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.home-heading { margin-bottom: 31px; }
.home-heading h1 { font-size: 31px; }
.wave { color: var(--coral); font-family: sans-serif; font-size: .64em; vertical-align: top; }
.xp-chip, .practice-xp, .path-summary, .progress-heart { color: var(--coral-deep); background: var(--coral-wash); padding: 9px 13px; border-radius: 20px; font-size: 12px; white-space: nowrap; }
.xp-chip span, .practice-xp span { margin-right: 4px; }
.xp-chip strong { color: var(--ink); }
.welcome-card { display: flex; justify-content: space-between; align-items: center; min-height: 240px; padding: 35px 43px; overflow: hidden; border: 1px solid #f3ddd2; border-radius: 15px; background: #fcece4; position: relative; }
.welcome-copy { position: relative; z-index: 1; }
.welcome-card .eyebrow { color: #ca8b75; }
.welcome-card h1 { font-size: 33px; }
.welcome-sub { color: #756e68; margin: 11px 0 24px; font-size: 14px; }
.welcome-actions { display: flex; gap: 23px; align-items: center; }
.primary { display: inline-flex; align-items: center; gap: 21px; padding: 12px 16px 12px 18px; color: white; background: var(--coral); border-radius: 7px; font-size: 12px; font-weight: 700; box-shadow: 0 6px 14px rgba(223,98,66,.16); transition: background .2s, transform .2s; }
.primary:hover { background: var(--coral-deep); transform: translateY(-1px); }
.primary span, .text-button span, .link-button span, .subtle-button span { font-size: 17px; font-weight: 400; }
.text-button, .link-button { padding: 3px 0; color: var(--coral-deep); background: transparent; font-size: 12px; font-weight: 700; }
.welcome-art { width: 220px; height: 200px; position: relative; }
.art-circle { display: grid; place-items: center; position: absolute; right: 15px; top: 28px; width: 153px; height: 153px; border-radius: 51% 49% 48% 52%; color: #fbecdf; background: var(--coral); font-family: 'Noto Sans Telugu'; font-size: 104px; opacity: .92; transform: rotate(8deg); }
.art-sun { position: absolute; right: 1px; top: 2px; color: #f6c064; font-size: 31px; z-index: 2; }
.art-leaf { color: #9eae8e; font-family: Georgia, serif; font-size: 76px; position: absolute; z-index: 3; transform: rotate(-30deg); }
.leaf-one { left: 6px; bottom: 9px; }
.leaf-two { left: 55px; bottom: -10px; transform: rotate(12deg) scale(.68); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 45px; }
.stat-card { min-height: 77px; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,253,249,.55); }
.stat-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 15px; }
.stat-icon.fire { background: #fff0d1; }.stat-icon.bolt { background: #eae6f4; color: #755d9b; }
.stat-card div { display: grid; gap: 3px; flex: 1; }.stat-card strong { font-size: 14px; }.stat-card small { color: var(--muted); font-size: 10px; }.trend { color: var(--sage); font-size: 11px; }
.goal-stat { gap: 9px; }.goal-stat .ring-wrap { display: flex; align-items: center; gap: 9px; }.ring-wrap { position: relative; }.ring { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--sage) var(--p), #e4e8dd 0); }.ring:after { content: ''; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); }.ring div { z-index: 1; display: flex; align-items: baseline; }.ring strong { font-size: 10px; }.ring span { font-size: 7px; }.ring-label { display: none; }
.section-block { margin-top: 44px; }.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 15px; }.section-heading h2 { margin: 4px 0 0; font-family: Fraunces, Georgia, serif; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }.link-button { color: var(--muted); font-weight: 500; }.link-button:hover { color: var(--coral-deep); }
.lesson-card { display: flex; align-items: center; gap: 20px; min-height: 153px; padding: 24px 24px 24px 20px; border-radius: 12px; background: var(--navy); color: #f7f3eb; overflow: hidden; position: relative; }.lesson-number { width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #f5c975; font-family: Fraunces, Georgia, serif; font-size: 22px; }.lesson-details { z-index: 1; }.lesson-kicker { color: #b7c9c7; font-size: 9px; letter-spacing: .1em; font-weight: 700; }.lesson-kicker .status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #f3c771; }.lesson-card h3 { margin: 7px 0 3px; font-family: Fraunces, Georgia, serif; font-size: 23px; font-weight: 500; }.lesson-card p { margin: 0; color: #bbc9c5; font-size: 12px; }.lesson-progress { display: flex; align-items: center; gap: 9px; margin-top: 14px; }.lesson-progress > span { width: 127px; height: 4px; background: rgba(255,255,255,.17); border-radius: 4px; }.lesson-progress i { display: block; height: 100%; background: #f3c771; border-radius: inherit; }.lesson-progress small { color: #b7c9c7; font-size: 9px; }.circle-arrow { width: 35px; height: 35px; z-index: 1; margin-left: auto; border-radius: 50%; color: var(--navy); background: #f3c771; font-size: 18px; }.lesson-illustration { position: absolute; right: 65px; bottom: -26px; color: rgba(255,255,255,.08); font-family: 'Noto Sans Telugu'; font-size: 142px; transform: rotate(-8deg); }
.phrase-section { margin-top: 43px; }.icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 50%; color: var(--coral-deep); background: transparent; font-size: 14px; }.icon-button:hover { border-color: var(--coral); background: var(--coral-wash); }.speech-control { transition: color .2s, background .2s, border-color .2s; }.speech-control .speech-label { white-space: nowrap; font-size: 10px; }.speech-control.compact .speech-label { display: none; }.speech-control.compact.speech-loading .speech-label, .speech-control.compact.speech-playing .speech-label, .speech-control.compact.speech-success .speech-label, .speech-control.compact.speech-error .speech-label { display: inline; }.speech-control.speech-loading { color: #a87629; background: #fff2d3; border-color: #efd28f; }.speech-control.speech-playing { color: var(--navy); background: #dfe9ec; border-color: #9eb4bd; }.speech-control.speech-success { color: var(--sage); background: var(--sage-wash); border-color: #b7c9ab; }.speech-control.speech-error { color: var(--coral-deep); background: var(--coral-wash); border-color: #e9ae9b; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }.phrase-card { display: flex; min-height: 152px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,253,249,.72); overflow: hidden; }.phrase-main { flex: 1; padding: 27px 28px; }.script { color: var(--coral-deep); font-family: 'Noto Sans Telugu', sans-serif; font-size: 34px; line-height: 1.3; }.roman { margin-top: 6px; color: var(--muted); font-size: 13px; }.roman span { color: var(--sage); font-size: 10px; }.meaning { margin-top: 13px; font-size: 14px; font-weight: 600; }.phrase-side { width: 34%; display: flex; flex-direction: column; justify-content: space-between; padding: 23px 23px 20px; border-left: 1px solid var(--line); background: #f4f1e9; }.bridge-meanings { color: var(--muted); font-size: 11px; line-height: 2; }.bridge-meanings span { display: inline-block; width: 39px; color: var(--sage); font-size: 9px; font-weight: 700; }.subtle-button { align-self: flex-start; color: var(--coral-deep); background: transparent; font-size: 11px; font-weight: 700; }
.scenario-card { margin-top: 44px; padding: 24px 26px 26px; border-radius: 13px; background: var(--sage-wash); }.scenario-heading { display: flex; align-items: center; gap: 13px; }.scenario-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.55); font-size: 18px; }.scenario-heading h2 { margin: 4px 0 0; font-family: Fraunces, Georgia, serif; font-size: 22px; font-weight: 500; }.scenario-pill { margin-left: auto; padding: 6px 9px; color: var(--sage); background: rgba(255,255,255,.6); border-radius: 13px; font-size: 10px; }.scenario-context { margin: 17px 0 13px; color: #60705b; font-size: 12px; }.scenario-line { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-radius: 8px; background: rgba(255,255,255,.55); }.scenario-line .script { color: var(--ink); }.script.small { font-size: 23px; }.scenario-line .roman { margin-top: 3px; font-size: 11px; }.icon-button.light { border: 0; color: var(--sage); background: #f7faef; }.scenario-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 9px; }.reply-option { display: grid; grid-template-columns: 1fr 18px; gap: 4px; padding: 12px; border: 1px solid transparent; border-radius: 8px; background: rgba(255,255,255,.4); text-align: left; }.reply-option:hover, .reply-option.selected { border-color: var(--sage); background: rgba(255,255,255,.78); }.reply-option span { font-family: 'Noto Sans Telugu'; font-size: 17px; }.reply-option small { color: #6e7a6a; font-size: 10px; grid-column: 1 / 2; }.reply-option b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--sage); font-size: 16px; }.scenario-feedback { margin: 13px 0 0; color: #53694c; font-size: 12px; font-weight: 600; }
.activity-block { margin-bottom: 0; }.activity-list { border-top: 1px solid var(--line); }.activity-row { display: flex; gap: 12px; align-items: center; min-height: 66px; border-bottom: 1px solid var(--line); }.activity-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: var(--coral-deep); background: var(--coral-wash); font-size: 13px; }.activity-row div { display: grid; gap: 3px; flex: 1; }.activity-row strong { font-size: 12px; }.activity-row small { color: var(--muted); font-size: 10px; }.activity-row b { color: var(--sage); font-size: 11px; }.activity-empty { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 0 3px; border-bottom: 1px solid var(--line); }.activity-empty > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: var(--coral-deep); background: var(--coral-wash); }.activity-empty div { display: grid; gap: 3px; }.activity-empty strong { font-size: 12px; }.activity-empty small { color: var(--muted); font-size: 10px; }.completed-badge { padding: 8px 11px; color: var(--sage); background: var(--sage-wash); border-radius: 7px; font-size: 10px; font-weight: 700; }
.path-summary { display: grid; gap: 2px; text-align: right; }.path-summary strong { color: var(--ink); font-size: 20px; font-family: Fraunces, Georgia, serif; }.path-summary small { color: var(--muted); font-size: 10px; }.path-progress { max-width: 600px; margin: -4px 0 39px; }.path-progress > div { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: 11px; }.path-progress b { color: var(--sage); }.wide-progress { display: block; height: 7px; border-radius: 6px; background: var(--paper-deep); }.wide-progress i { display: block; height: 100%; border-radius: inherit; background: var(--sage); }.lesson-list { display: grid; gap: 13px; }.path-lesson { display: flex; gap: 20px; align-items: center; min-height: 130px; padding: 22px 23px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,253,249,.7); }.path-lesson.locked { opacity: .68; }.path-index { width: 45px; height: 45px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--coral-deep); background: var(--coral-wash); font-family: Fraunces, Georgia, serif; font-size: 17px; }.path-lesson.locked .path-index { color: var(--muted); background: var(--paper-deep); font-family: sans-serif; }.path-copy { flex: 1; }.path-copy h2 { margin: 6px 0 3px; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: 21px; }.path-copy p { margin: 0; color: var(--muted); font-size: 12px; }.path-meta { display: flex; gap: 8px; margin-top: 10px; color: var(--sage); font-size: 10px; }.path-action .lock-button { width: 35px; height: 35px; border-radius: 50%; color: var(--muted); background: var(--paper-deep); }.path-tip { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 17px 20px; border-radius: 10px; background: #f7efd9; }.path-tip > span { color: #dc9e37; font-size: 21px; }.path-tip strong { font-size: 12px; }.path-tip p { margin: 5px 0 0; color: #786f5a; font-size: 11px; line-height: 1.5; }
.practice-tabs { display: flex; gap: 7px; margin: -8px 0 23px; }.practice-tab { padding: 9px 13px; border-radius: 7px; color: var(--muted); background: transparent; font-size: 11px; }.practice-tab.active { color: var(--coral-deep); background: var(--coral-wash); font-weight: 700; }.practice-tab span { margin-left: 8px; opacity: .7; }.practice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.quiz-card, .mic-card, .mastery-card, .week-card { padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,253,249,.7); }.quiz-top, .mic-card-heading { display: flex; justify-content: space-between; align-items: start; color: var(--muted); font-size: 10px; }.mode-label { color: var(--coral-deep); font-size: 9px; letter-spacing: .1em; font-weight: 700; }.quiz-card h2, .mic-card h2 { margin: 17px 0 6px; font-family: Fraunces, Georgia, serif; font-size: 22px; font-weight: 500; }.quiz-help, .mic-card-heading p { min-height: 34px; margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.45; }.quiz-card .practice-phrase { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 14px; border-radius: 8px; background: var(--paper); }.quiz-card .practice-phrase .script { font-size: 22px; }.quiz-card .practice-phrase .roman { margin: 0; }.quiz-card .practice-phrase .meaning { margin: 0 0 0 auto; font-size: 10px; }.quiz-card .practice-phrase .icon-button { font-size: 12px; border: 0; }.quiz-script { margin: 23px 0 17px; color: var(--coral-deep); font-family: 'Noto Sans Telugu'; font-size: 29px; }.quiz-choices { display: grid; gap: 7px; }.quiz-choice { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: transparent; text-align: left; font-size: 12px; }.quiz-choice:hover { border-color: var(--coral); background: var(--coral-wash); }.quiz-choice span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: var(--paper-deep); font-size: 9px; }.quiz-choice b[lang="te"] { font-family: 'Noto Sans Telugu'; font-size: 17px; }.quiz-choice.correct { border-color: var(--sage); background: var(--sage-wash); }.quiz-choice.wrong { border-color: var(--coral); background: var(--coral-wash); }.quiz-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; color: var(--sage); font-size: 10px; }.quiz-foot .text-button { color: var(--muted); font-size: 10px; }.mic-badge { padding: 5px 8px; color: var(--sage); background: var(--sage-wash); border-radius: 5px; font-size: 9px; font-weight: 700; }.mic-card-heading { gap: 14px; }.mic-card-heading > div { flex: 1; }.mic-card-heading p { min-height: auto; margin: 8px 0 0; }.practice-phrase { text-align: center; padding: 17px 12px; margin: 14px 0; border-radius: 9px; background: var(--coral-wash); }.practice-phrase .script { font-size: 32px; }.practice-phrase .icon-button { margin-top: 11px; border: 0; background: rgba(255,255,255,.5); border-radius: 6px; font-size: 11px; }.articulation { display: flex; gap: 10px; align-items: start; padding: 12px 13px; border-radius: 8px; background: var(--paper); }.articulation > span { color: var(--coral); font-size: 19px; }.articulation strong { font-size: 11px; }.articulation p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }.mic-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; padding: 11px; border: 1px solid var(--coral); border-radius: 7px; color: var(--coral-deep); background: transparent; font-size: 12px; font-weight: 700; }.mic-button:hover, .mic-button.recording { color: white; background: var(--coral); }.mic-button:disabled { border-color: var(--line); color: var(--muted); cursor: not-allowed; }.mic-symbol { font-size: 10px; }.mic-result { min-height: 31px; margin: 11px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }.mic-result strong { color: var(--ink); }.honest-note { margin: 14px 0 0; color: #999990; font-size: 9px; line-height: 1.4; text-align: center; }
.progress-heart { color: var(--coral); background: transparent; }.progress-heart span { margin-left: 4px; color: var(--muted); font-size: 10px; }.progress-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 15px; }.mastery-card .section-heading { margin-bottom: 25px; }.mastery-total { color: var(--sage); font-family: Fraunces, Georgia, serif; font-size: 20px; }.mastery-bars { display: grid; gap: 19px; }.mastery-bars > div > span { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 11px; }.mastery-bars small { color: var(--muted); font-size: 10px; }.mastery-bars i { display: block; height: 7px; border-radius: 5px; background: var(--paper-deep); }.mastery-bars em { display: block; height: 100%; border-radius: inherit; background: var(--sage); }.mastery-bars > div:nth-child(2) em { background: var(--coral); }.mastery-bars > div:nth-child(3) em { background: var(--yellow); }.mastery-foot { margin: 22px 0 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.5; }.week-card { background: var(--navy); color: #f5f1e9; }.week-card .eyebrow { color: #b7c9c7; }.week-big { display: flex; align-items: center; gap: 10px; margin: 21px 0; }.week-big strong { color: #f2c972; font-family: Fraunces, Georgia, serif; font-size: 46px; font-weight: 500; }.week-big span { color: #b7c9c7; font-size: 11px; line-height: 1.25; }.week-days { display: flex; justify-content: space-between; }.day { display: grid; justify-items: center; gap: 6px; }.day span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--navy); font-size: 10px; }.day.done span { background: #94ad85; }.day.today span { border: 1px solid #f2c972; background: transparent; }.day small { color: #b7c9c7; font-size: 9px; }.week-note { margin: 19px 0 0; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.14); color: #b7c9c7; font-size: 10px; }.achievements { margin-top: 44px; }.achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.achievement { display: flex; align-items: center; gap: 11px; min-height: 90px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,253,249,.55); }.achievement-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 50%; color: #ae9153; background: #f8ecca; font-size: 14px; }.achievement.done .achievement-icon { color: var(--coral-deep); background: var(--coral-wash); }.achievement h3 { margin: 0 0 3px; font-family: Fraunces, Georgia, serif; font-size: 15px; font-weight: 500; }.achievement p { margin: 0 0 8px; color: var(--muted); font-size: 10px; }.achievement > div { flex: 1; }.achievement > b { color: var(--sage); font-size: 10px; }.achievement-progress { display: block; height: 4px; border-radius: 4px; background: var(--paper-deep); }.achievement-progress i { display: block; height: 100%; border-radius: inherit; background: var(--yellow); }.achievement.done .achievement-progress i { background: var(--sage); }
.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(41,42,37,.36); backdrop-filter: blur(5px); }.onboarding-modal { width: min(450px, 100%); padding: 34px 35px 30px; border: 1px solid rgba(255,255,255,.5); border-radius: 16px; background: var(--paper); box-shadow: 0 30px 80px rgba(32,30,24,.2); position: relative; }.modal-close { position: absolute; top: 17px; right: 19px; color: var(--muted); background: transparent; font-size: 24px; }.onboard-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 13px 13px 13px 3px; color: white; background: var(--coral); font-family: 'Noto Sans Telugu'; font-size: 27px; }.onboarding-modal h2 { margin: 7px 0 11px; font-family: Fraunces, Georgia, serif; font-size: 28px; font-weight: 500; line-height: 1.1; }.onboarding-modal > p:not(.eyebrow) { margin: 0 0 21px; color: var(--muted); font-size: 12px; line-height: 1.5; }.bridge-options { display: grid; gap: 7px; }.bridge-choice { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,253,249,.5); text-align: left; font-size: 12px; }.bridge-choice:hover, .bridge-choice.selected { border-color: var(--coral); background: var(--coral-wash); }.bridge-choice span { width: 29px; height: 25px; display: grid; place-items: center; border-radius: 5px; color: var(--sage); background: var(--sage-wash); font-size: 10px; font-weight: 700; }.goal-picker { display: flex; justify-content: space-between; align-items: center; margin: 23px 0; color: var(--muted); font-size: 11px; }.goal-picker > div { display: flex; gap: 4px; }.goal-choice { padding: 7px 8px; border-radius: 5px; color: var(--muted); background: var(--paper-deep); font-size: 10px; }.goal-choice.selected { color: var(--coral-deep); background: var(--coral-wash); font-weight: 700; }.primary.full { justify-content: space-between; width: 100%; padding: 13px 16px; }.privacy-line { display: block; margin-top: 15px; color: #a0a197; font-size: 9px; text-align: center; }.toast { position: fixed; left: 50%; bottom: 25px; z-index: 50; max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 8px; color: white; background: var(--navy); box-shadow: var(--shadow); font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 920px) { .topbar { padding: 0 25px; }.shell { display: block; }.sidebar { position: fixed; z-index: 20; top: 78px; bottom: 0; left: 0; width: 230px; background: var(--paper); transform: translateX(-102%); transition: transform .25s; box-shadow: var(--shadow); }.sidebar.open { transform: translateX(0); }.mobile-menu { display: block; position: absolute; left: 22px; }.brand { margin: auto; }.main { padding: 40px 35px 80px; } }
@media (max-width: 680px) { .topbar { height: 64px; }.sidebar { top: 64px; }.top-streak { display: none; }.main { padding: 31px 17px 70px; }.page-heading { align-items: flex-start; margin-bottom: 25px; }.page-heading h1, .home-heading h1 { font-size: 29px; }.page-heading .path-summary, .practice-xp, .progress-heart { display: none; }.welcome-card { min-height: 270px; padding: 28px 25px; align-items: flex-start; }.welcome-card h1 { font-size: 29px; max-width: 220px; }.welcome-art { position: absolute; right: -24px; bottom: -18px; transform: scale(.72); transform-origin: right bottom; }.welcome-actions { gap: 14px; flex-wrap: wrap; }.stat-row { grid-template-columns: 1fr 1fr; margin-bottom: 35px; }.stat-card { padding: 11px; }.stat-card.goal-stat { grid-column: 1 / -1; min-height: 64px; }.goal-stat .ring-label { display: none; }.section-block { margin-top: 35px; }.section-heading h2 { font-size: 20px; }.lesson-card { padding: 19px 17px; gap: 12px; }.lesson-number { width: 37px; height: 37px; font-size: 17px; }.lesson-card h3 { font-size: 20px; }.lesson-progress > span { width: 80px; }.circle-arrow { margin-left: 0; }.lesson-illustration { right: 28px; }.phrase-card { display: block; }.phrase-main { padding: 22px; }.phrase-side { width: 100%; display: flex; flex-direction: row; gap: 14px; align-items: end; padding: 14px 22px; border-top: 1px solid var(--line); border-left: 0; }.bridge-meanings { line-height: 1.7; }.scenario-card { padding: 20px 17px; }.scenario-options { grid-template-columns: 1fr; }.scenario-pill { display: none; }.practice-grid, .progress-grid { grid-template-columns: 1fr; }.practice-tabs { margin-bottom: 17px; }.quiz-card, .mic-card, .mastery-card, .week-card { padding: 20px; }.achievement-grid { grid-template-columns: 1fr; }.path-lesson { padding: 17px; gap: 12px; }.path-index { width: 36px; height: 36px; font-size: 14px; }.path-copy h2 { font-size: 19px; }.path-action .primary { padding: 10px 11px; gap: 7px; font-size: 10px; }.path-action .primary span { font-size: 14px; }.onboarding-modal { padding: 28px 23px 24px; }.onboarding-modal h2 { font-size: 25px; }.goal-picker { display: grid; gap: 10px; } }