/* ==========================================================================
   Langufy UI 2.0 — one design system for the whole learner workspace.
   Loaded last (after clarity.css). Route CSS is inserted before #clarity-theme,
   so these rules win ties. Sizes stay with the modules; this layer owns
   colour, type, depth, shape and motion.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&display=swap');

:root,:root:not([data-theme=dark]){
  --brand:#00bf8b;--green:#00bf8b;--brand-strong:#00a879;--brand-press:#008f66;
  --deep:#00684d;--brand-ink:#00553f;--soft:#e4f7ee;--mint:#e4f7ee;--brand-tint:#f1fbf6;
  --ink:#0f2a20;--ink-2:#2f453b;--muted:#5f7369;--faint:#8a9b92;
  --bg:#f2f6f3;--surface:#fff;--surface-2:#f7faf8;--surface-3:#eef3f0;--line:#e1eae4;--line-strong:#cddad2;
  --amber:#f5a524;--amber-soft:#fff3d9;--amber-ink:#8a5a00;
  --violet:#7b61ff;--violet-soft:#efecff;--violet-ink:#4b33c9;
  --sky:#2f8cff;--sky-soft:#e6f1ff;--sky-ink:#1559b8;
  --coral:#ff6b57;--coral-soft:#ffece8;--coral-ink:#b8321f;
  --peach:#fff3e6;--lavender:#efecff;--blue:#e6f1ff;--pink:#ffecf1;--yellow:#fff6dc;
  --radius:16px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;
  --sh-1:0 1px 2px rgba(15,42,32,.05),0 1px 1px rgba(15,42,32,.03);
  --sh-2:0 1px 2px rgba(15,42,32,.05),0 10px 28px -12px rgba(15,42,32,.16);
  --sh-3:0 2px 6px rgba(15,42,32,.06),0 28px 60px -24px rgba(15,42,32,.28);
  --shadow:var(--sh-1);
  --ring:0 0 0 4px rgba(0,191,139,.22);
  --font:'DM Sans',system-ui,sans-serif;--heading:'Manrope',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --eng-green:var(--deep);--eng-ink:var(--ink);--eng-muted:var(--muted);--eng-line:var(--line);--eng-soft:var(--soft);
}
:root[data-theme=dark]{
  --brand:#1fd39f;--green:#1fd39f;--brand-strong:#14b888;--brand-press:#0b8f68;
  --deep:#5fe3b8;--brand-ink:#8af0cd;--soft:#13342a;--mint:#13342a;--brand-tint:#0f2a21;
  --ink:#e8f3ee;--ink-2:#c5d6ce;--muted:#91a69c;--faint:#6d8278;
  --bg:#0a1511;--surface:#111e19;--surface-2:#15241e;--surface-3:#1a2b24;--line:#22362d;--line-strong:#2d463b;
  --amber:#ffbd4a;--amber-soft:#3a2d12;--amber-ink:#ffd58a;
  --violet:#9d8bff;--violet-soft:#241f45;--violet-ink:#c4b8ff;
  --sky:#5aa6ff;--sky-soft:#13283f;--sky-ink:#a9cfff;
  --coral:#ff8a78;--coral-soft:#3a1f1b;--coral-ink:#ffb4a8;
  --peach:#3a2d12;--lavender:#241f45;--blue:#13283f;--pink:#3a1f28;--yellow:#3a2d12;
  --sh-1:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 0 rgba(255,255,255,.03) inset,0 12px 30px -12px rgba(0,0,0,.6);
  --sh-3:0 1px 0 rgba(255,255,255,.04) inset,0 30px 70px -24px rgba(0,0,0,.75);
  --ring:0 0 0 4px rgba(31,211,159,.25);
  color-scheme:dark;
}

/* ---------- base ---------- */
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--heading);color:var(--ink)}
::selection{background:rgba(0,191,139,.25)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.icon{stroke-width:1.8}

/* ---------- app shell: sidebar ---------- */
.sidebar{width:248px;padding:22px 14px 18px;background:var(--surface);border-right:1px solid var(--line);scrollbar-width:thin}
.workspace{margin-left:248px}
.brand{margin:0 10px 26px;font:800 27px/1 var(--heading);letter-spacing:-1.2px;color:var(--ink)}
.brand img{border-radius:10px;box-shadow:0 6px 16px -6px rgba(0,191,139,.6)}
.workspace-label,.nav-section-label{margin:18px 12px 8px;font:800 10.5px/1 var(--heading);letter-spacing:1.4px;color:var(--faint);text-transform:uppercase}
#navigation>a,.sidebar-setting,.nav-extra a,.nav-extra>summary{gap:12px;padding:10px 12px;border-radius:12px;font:600 14px/1.3 var(--font);color:var(--ink-2);transition:background .18s var(--ease),color .18s,transform .18s var(--ease)}
#navigation>a .icon,.sidebar-setting .icon,.nav-extra .icon{width:20px;height:20px;color:var(--muted);transition:color .18s}
#navigation>a:hover,.nav-extra a:hover,.nav-extra>summary:hover,.sidebar-setting:hover{background:var(--surface-3);color:var(--ink)}
#navigation>a:hover .icon,.nav-extra a:hover .icon,.sidebar-setting:hover .icon{color:var(--ink)}
#navigation>a.active,.nav-extra a.active,.sidebar-setting.active{background:var(--soft);color:var(--brand-ink);box-shadow:none;font-weight:750}
#navigation>a.active .icon,.nav-extra a.active .icon,.sidebar-setting.active .icon{color:var(--brand-strong)}
:root[data-theme=dark] #navigation>a.active,:root[data-theme=dark] .nav-extra a.active{color:var(--brand-ink)}
/* the two primary destinations get a coloured icon tile */
#navigation>a[data-nav=library],#navigation>a[data-nav=battle]{padding:8px 10px;font-size:15px;font-weight:750;color:var(--ink)}
#navigation>a[data-nav=library] .icon,#navigation>a[data-nav=battle] .icon{box-sizing:content-box;width:18px;height:18px;padding:8px;border-radius:11px;color:#fff;background:var(--brand);box-shadow:0 3px 0 var(--brand-press)}
#navigation>a[data-nav=battle] .icon{background:var(--coral);box-shadow:0 3px 0 #d94a37}
#navigation>a[data-nav=library].active,#navigation>a[data-nav=battle].active{background:var(--surface-3);color:var(--ink)}
#navigation>a[data-nav=library].active .icon,#navigation>a[data-nav=battle].active .icon{color:#fff}
#navigation>a>small,.nav-extra a>small{margin-left:auto;min-width:24px;height:22px;padding:0 7px;display:inline-grid;place-items:center;border:0;border-radius:999px;background:var(--surface-3);color:var(--ink-2);font:750 11.5px/1 var(--heading)}
#navigation>a.active>small{background:var(--brand);color:#fff}
.nav-extra{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.nav-extra>div{gap:2px;padding:4px 0 2px 10px;margin-left:10px;border-left:2px solid var(--line)}
.nav-extra a{font-size:13.5px;padding:8px 12px}
.sidebar-bottom{padding-top:16px;margin-top:12px;border-top:1px solid var(--line)}
.local-badge{margin:10px 12px 4px;color:var(--faint);font-size:11.5px}
.local-badge>span{background:var(--brand);box-shadow:0 0 0 3px var(--soft)}
#app-logout,#demo-login{margin:2px 12px;padding:0;min-height:32px;font-size:13px;font-weight:700;color:var(--muted)}
#app-logout:hover{color:var(--coral-ink)}

/* ---------- app shell: topbar ---------- */
.topbar{height:68px;padding:0 32px;gap:14px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.breadcrumb,.breadcrumb strong{font-size:13px;color:var(--muted)}
.breadcrumb strong{color:var(--ink);font-weight:750}
.breadcrumb>span{color:var(--faint);margin:0 4px}
.header-search{height:44px;border-radius:14px;background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--sh-1);transition:border-color .18s,box-shadow .18s}
.header-search:focus-within{outline:0;border-color:var(--brand);box-shadow:var(--ring)}
.header-search input{font-size:14px;color:var(--ink)}
.header-search kbd{border-radius:7px;background:var(--surface-3);border:1px solid var(--line);color:var(--muted);font:700 11px var(--heading);box-shadow:0 1px 0 var(--line)}
.workspace-add{height:44px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 2px 0 var(--line);transition:transform .15s var(--ease),box-shadow .15s,border-color .15s}
.workspace-add:hover{border-color:var(--brand);color:var(--brand-ink)}
.workspace-add:active{transform:translateY(2px);box-shadow:none}
.streak-pill{height:40px;border-radius:999px;border:1.5px solid #ffd79a;background:var(--amber-soft);color:var(--amber-ink);font:800 13px var(--heading)}
.streak-pill .icon{color:var(--amber)}
:root[data-theme=dark] .streak-pill{border-color:#6b4f1b}
.network-bell,.topbar .icon-btn,.motion-toggle{width:44px;height:44px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);box-shadow:0 2px 0 var(--line);transition:transform .15s var(--ease),box-shadow .15s,color .15s}
.network-bell:hover,.topbar .icon-btn:hover{color:var(--brand-ink);border-color:var(--line-strong)}
.network-bell:active,.topbar .icon-btn:active{transform:translateY(2px);box-shadow:none}
.network-bell>small{background:var(--coral);color:#fff;border:2px solid var(--surface);font-weight:800}
.profile-avatar{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--brand),#00a37a);color:#fff;font:800 14px var(--heading);border:0;box-shadow:0 3px 0 var(--brand-press)}

#content{padding:32px 36px 40px;max-width:1340px}
.connection-notice{background:var(--amber-soft);color:var(--amber-ink);border-color:#ffd79a}
.platform-announcement{border-radius:var(--r-md);background:var(--sky-soft);color:var(--sky-ink);border:1px solid color-mix(in srgb,var(--sky) 25%,transparent)}

/* ---------- typography: page headings across modules ---------- */
.page-heading h1,.catalog-heading h1,.account-heading h1,.network-hero h1,.social-hero h1,.rankings-hero h1,.rankings-heading h1,.eng-heading h1,.cr-heading h1,.study-hub-heading h1,.reader-heading h1,.practice-hero h1,
#content>div>header h1,#content>section>header h1{font:800 clamp(28px,2.6vw,38px)/1.12 var(--heading);letter-spacing:-.035em;color:var(--ink)}
.kicker,.page-heading .kicker,.eyebrow,.catalog-kicker,.network-kicker,.social-kicker,.rankings-kicker,.eng-kicker,.cr-kicker{font:800 11.5px/1.4 var(--heading);letter-spacing:1.3px;text-transform:uppercase;color:var(--brand-strong)}
.page-subtitle,.catalog-heading>div>p{color:var(--muted);font-size:15.5px}
h2{letter-spacing:-.02em}

/* ---------- buttons: one system for every module ---------- */
.btn,.catalog-button,.cr-button,.eng-button,.network-button,.social-button,.rankings-button,.discussion-button{
  font-family:var(--font);font-weight:700;letter-spacing:-.005em;border-radius:14px;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);box-shadow:0 2px 0 var(--line);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s,border-color .15s,color .15s}
.btn:hover,.catalog-button:hover,.cr-button:hover,.eng-button:hover,.network-button:hover,.social-button:hover,.rankings-button:hover,.discussion-button:hover{border-color:var(--line-strong);background:var(--surface-2)}
.btn:active,.catalog-button:active,.cr-button:active,.eng-button:active,.network-button:active,.social-button:active,.rankings-button:active,.discussion-button:active{transform:translateY(2px);box-shadow:0 0 0 var(--line)}
.btn.primary,.btn.hero-button,.catalog-button.catalog-primary,.cr-button.primary,.eng-button.eng-primary,.network-button.primary,.social-button.primary,.rankings-button.primary,.discussion-button.primary,.btn.dark{
  background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand-press);text-shadow:0 1px 0 rgba(0,80,58,.25)}
.btn.primary:hover,.btn.hero-button:hover,.catalog-button.catalog-primary:hover,.cr-button.primary:hover,.eng-button.eng-primary:hover,.network-button.primary:hover,.social-button.primary:hover,.rankings-button.primary:hover,.discussion-button.primary:hover,.btn.dark:hover{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff}
.btn.primary:active,.btn.hero-button:active,.catalog-button.catalog-primary:active,.cr-button.primary:active,.eng-button.eng-primary:active,.network-button.primary:active,.social-button.primary:active,.rankings-button.primary:active,.discussion-button.primary:active{box-shadow:0 0 0 var(--brand-press)}
:root[data-theme=dark] .btn.primary,:root[data-theme=dark] .catalog-button.catalog-primary,:root[data-theme=dark] .cr-button.primary,:root[data-theme=dark] .eng-button.eng-primary,:root[data-theme=dark] .network-button.primary,:root[data-theme=dark] .social-button.primary,:root[data-theme=dark] .rankings-button.primary,:root[data-theme=dark] .discussion-button.primary{background:var(--brand);border-color:var(--brand);color:#04241a;text-shadow:none}
:root[data-theme=dark] .btn,:root[data-theme=dark] .eng-button{background:var(--surface-2)}
.btn.light{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.text-btn{background:transparent;border-color:transparent;box-shadow:none;color:var(--brand-ink)}
.btn.text-btn:hover{background:var(--soft)}
.cr-button.danger,.network-button.danger,.account-danger-btn{color:var(--coral-ink);border-color:color-mix(in srgb,var(--coral) 35%,var(--line));background:var(--surface);box-shadow:0 2px 0 color-mix(in srgb,var(--coral) 30%,var(--line))}
.cr-button.danger:hover,.network-button.danger:hover,.account-danger-btn:hover{background:var(--coral-soft)}
.btn:disabled,.catalog-button:disabled,.cr-button:disabled,.eng-button:disabled,.network-button:disabled,.social-button:disabled,.rankings-button:disabled,.discussion-button:disabled,.btn[aria-disabled=true]{opacity:.5;transform:none;box-shadow:none;cursor:not-allowed}
.network-button.quiet,.social-button.quiet{background:transparent;border-color:transparent;box-shadow:none}
.icon-btn{border-radius:12px}

/* ---------- surfaces ---------- */
.panel,.stat-card,.collection-card,.favorite-card,.settings-card,.table-panel,.today-focus,.today-progress,.today-shortcut,
.practice-mode-card,.study-mode-card,.reader-lesson-card,.cr-card,.network-person-card,.rankings-card,.eng-card,.kpi-card,.account-panel,
.catalog-controls,.catalog-sense,.catalog-results,.social-card,.network-card{
  border-color:var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1)}
.practice-mode-card,.study-mode-card,.reader-lesson-card,.today-shortcut,.collection-card,.favorite-card,.cr-card,.network-person-card,.social-card{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.practice-mode-card:hover,.study-mode-card:hover,.reader-lesson-card:hover,.today-shortcut:hover,.collection-card:hover,.favorite-card:hover,.cr-card:hover,.network-person-card:hover,.social-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-strong)}

/* ---------- inputs ---------- */
input[type=text],input[type=search],input[type=email],input[type=number],input[type=url],input:not([type]),select,textarea,label>input,label>select,label>textarea,.select-control{
  border-radius:var(--r-md);border:1.5px solid var(--line);background-color:var(--surface);color:var(--ink);font-family:var(--font);transition:border-color .16s,box-shadow .16s}
input[type=text]:hover,input[type=search]:hover,input:not([type]):hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input[type=text]:focus,input[type=search]:focus,input[type=email]:focus,input[type=number]:focus,input:not([type]):focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:var(--ring)}
.header-search input,.catalog-search input,#global-search{border:0!important;box-shadow:none!important;background:transparent}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand)}

/* the big library search becomes the hero control */
.catalog-app .catalog-search{min-height:60px;padding:6px 6px 6px 18px;border-radius:18px;border:1.5px solid var(--line);background:var(--surface);box-shadow:var(--sh-2);transition:border-color .18s,box-shadow .18s}
.catalog-app .catalog-search:focus-within{border-color:var(--brand);box-shadow:var(--ring),var(--sh-2)}
.catalog-app .catalog-search input{font-size:16.5px}
.catalog-app .catalog-search>.icon,.catalog-app .catalog-search>svg{color:var(--brand-strong)}
.catalog-app .catalog-search .catalog-button{min-height:48px;padding-inline:22px;border-radius:13px}
.catalog-controls{padding:18px;background:var(--surface)}

/* ---------- segmented controls & tabs ---------- */
.catalog-view-switch,.filter-tabs,.collection-tabs,.library-tabs,.account-personal-tabs,.network-tabs,.eng-tabs,.cr-tabs,.rankings-segmented,.study-review-tabs,.exercise-tabs,.battle-mode-switch{
  background:var(--surface-3);border:1px solid var(--line);border-radius:14px;padding:4px;gap:4px}
.catalog-view-switch .catalog-button,.battle-mode-switch .social-button{border:0;background:transparent;box-shadow:none;border-radius:10px;color:var(--muted)}
.catalog-view-switch .catalog-button[aria-pressed=true],.battle-mode-switch .social-button[aria-pressed=true],.battle-mode-switch .social-button.active,
.rankings-segmented [aria-pressed=true],.rankings-segmented .active,.network-tab.active,.eng-tabs a[aria-current=page],.cr-tabs [aria-current=page],.cr-tabs .active,.study-review-tabs>button[aria-pressed=true],.filter-tabs .active,.collection-tabs .active,.account-personal-tabs [aria-current=page],.account-personal-tabs .active{
  background:var(--surface);color:var(--ink);border-color:transparent;box-shadow:0 1px 2px rgba(15,42,32,.08),0 2px 8px -2px rgba(15,42,32,.12);font-weight:750}
:root[data-theme=dark] .catalog-view-switch .catalog-button[aria-pressed=true],:root[data-theme=dark] .network-tab.active,:root[data-theme=dark] .rankings-segmented [aria-pressed=true]{background:var(--surface-2)}

/* ---------- chips & badges ---------- */
.chip,.word-type,.catalog-tag,.catalog-level,.social-pill,.network-pill,.cr-pill,.eng-badge-tag,.practice-mode-badge,.result-badge,.battle-level-badge{border-radius:999px;font-family:var(--heading);font-weight:750;letter-spacing:.01em}

/* ---------- dialogs & toasts ---------- */
dialog,#app-dialog,.account-dialog,.social-dialog,.network-dialog,.eng-share-dialog,.reader-catalog-dialog{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:var(--sh-3)}
dialog::backdrop{background:rgba(6,20,15,.45);backdrop-filter:blur(4px)}
.toast,.social-toast,.network-toast{border-radius:16px;background:var(--ink);color:var(--surface);box-shadow:var(--sh-3);font-weight:650}
:root[data-theme=dark] .toast,:root[data-theme=dark] .social-toast,:root[data-theme=dark] .network-toast{background:#e8f3ee;color:#0a1511}

/* ---------- tables ---------- */
.account-words-table th,.rankings-table th,.verbs-table th,.account-activity-table th{font:800 11px/1.4 var(--heading);letter-spacing:1px;text-transform:uppercase;color:var(--faint);background:var(--surface-2)}
.account-words-table tr,.rankings-table tr{transition:background .15s}
.account-words-table tbody tr:hover,.rankings-table tbody tr:hover{background:var(--brand-tint)}

/* ---------- empty states ---------- */
.account-empty,.catalog-empty,.cr-empty,.eng-empty,.network-empty,.social-empty,.rankings-empty,.reader-empty,.discussion-empty{border-radius:var(--r-lg)}
.account-empty h2,.catalog-empty h2,.cr-empty h2,.eng-empty h2,.network-empty h2,.social-empty h2,.rankings-empty h2,.reader-empty h2,.rankings-empty h3{font:800 22px/1.25 var(--heading);letter-spacing:-.02em}
.rankings-empty-icon,.network-empty-icon{border-radius:18px;background:var(--soft);color:var(--brand-strong);border:0;box-shadow:0 4px 0 color-mix(in srgb,var(--brand) 25%,transparent)}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .workspace{margin-left:0}
  .sidebar{width:min(300px,86vw);box-shadow:var(--sh-3);border-right:0}
  .topbar{height:62px;padding:0 16px}
  #content{padding:22px 16px calc(110px + env(safe-area-inset-bottom))}
  .mobile-navigation{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));height:68px;padding:6px;border-radius:22px;border:1px solid var(--line);
    background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.5) blur(18px);-webkit-backdrop-filter:saturate(1.5) blur(18px);box-shadow:var(--sh-3)}
  .mobile-navigation a{border-radius:16px;color:var(--muted);font:700 11.5px var(--heading);gap:3px;background:transparent;box-shadow:none}
  .mobile-navigation a .icon{width:22px;height:22px}
  .mobile-navigation a.active,.mobile-navigation a[aria-current=page]{background:var(--soft);color:var(--brand-ink)}
  .mobile-navigation a.active .icon{color:var(--brand-strong)}
  .page-heading h1,.catalog-heading h1{font-size:30px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
html[data-motion=paused] *,html[data-motion=reduced] *{transition-duration:.01ms!important}

/* ==========================================================================
   Signature moments — bolder, more colourful focal points per page
   ========================================================================== */
.topbar .profile-avatar,.topbar a.profile-avatar{background:linear-gradient(135deg,#19d39f,#00a37a);color:#fff;border:0;box-shadow:0 3px 0 var(--brand-press)}
.app-footer{color:var(--faint);font-size:12.5px}
.app-footer a{color:var(--brand-strong);font-weight:700}

/* page heading: bigger, with a serif accent if a <em> is present */
.page-heading{margin-bottom:28px}
.page-heading h1 em,.catalog-heading h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--brand-strong);letter-spacing:-.01em}
.page-subtitle{margin-top:6px}

/* ----- library (catalog) ----- */
.catalog-heading{margin-bottom:22px;align-items:flex-end}
.catalog-heading h1{font-size:clamp(34px,3.2vw,46px)}
.catalog-count{display:inline-flex;align-items:center;margin-left:12px;padding:3px 11px;border-radius:999px;background:var(--soft);color:var(--brand-ink);font:800 12.5px/1.6 var(--heading);border:0}
.catalog-count::before{display:none}
.catalog-battle-link{background:var(--coral);border-color:var(--coral);color:#fff;box-shadow:0 4px 0 #d94a37}
.catalog-battle-link:hover{background:#ff5a44;border-color:#ff5a44;color:#fff}
.catalog-battle-link .icon{color:#fff}
.catalog-results-heading h2{font:800 22px/1.2 var(--heading);letter-spacing:-.02em}
.catalog-list-labels{font:800 11px/1 var(--heading);letter-spacing:1px;text-transform:uppercase;color:var(--faint)}
.catalog-senses{gap:10px;display:grid;border:0;background:transparent;box-shadow:none}
.catalog-sense{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);transition:transform .18s var(--ease),box-shadow .18s,border-color .18s}
.catalog-sense:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-strong)}
.catalog-sense.is-selected,.catalog-sense.selected{border-color:var(--brand);box-shadow:var(--ring),var(--sh-2)}
.catalog-word-column h3 a{font:800 23px/1.15 var(--heading);letter-spacing:-.025em;color:var(--ink)}
.catalog-word-column h3 a:hover{color:var(--brand-strong)}
.catalog-phonetic{color:var(--faint);font-size:13.5px}
.catalog-tags span{border-radius:999px;border:0;background:var(--surface-3);color:var(--ink-2);font:750 11.5px/1 var(--heading);padding:5px 9px}
.catalog-tags span[title]{background:var(--violet-soft);color:var(--violet-ink)}
.catalog-translation{font:750 16.5px/1.4 var(--heading);color:var(--ink)}
.catalog-detail-link{color:var(--brand-strong);font-weight:750}
.catalog-sense-action .catalog-button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand-press)}
.catalog-selection-dock{border-radius:20px;background:var(--ink);color:#fff;border:0;box-shadow:var(--sh-3)}
.catalog-selection-dock .catalog-button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.catalog-selection-dock .catalog-button.catalog-primary{background:var(--brand);border-color:var(--brand);box-shadow:0 4px 0 var(--brand-press)}

/* ----- practice hub: colour-coded modes ----- */
.study-hub-note{border-radius:var(--r-lg);background:var(--brand-tint);border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line));color:var(--ink-2)}
.study-hub-note .icon{color:var(--brand-strong)}
.study-hub-note a{color:var(--brand-strong);font-weight:750}
.study-challenge-entry.panel{position:relative;overflow:hidden;border:0;border-radius:var(--r-xl);color:#fff;background:linear-gradient(120deg,#ff9d2e 0%,#ff6b57 60%,#ff4f7a 100%);box-shadow:0 18px 40px -18px rgba(255,107,87,.7);padding:22px 26px}
.study-challenge-entry.panel::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.14)}
.study-challenge-entry.panel>.icon:first-child{box-sizing:content-box;width:24px;height:24px;padding:12px;border-radius:16px;background:rgba(255,255,255,.22);color:#fff}
.study-challenge-entry.panel strong{font:800 19px/1.25 var(--heading);color:#fff}
.study-challenge-entry.panel small{color:rgba(255,255,255,.88);font-size:13.5px}
.study-challenge-entry.panel>.icon:last-child{color:#fff}
.study-challenge-entry.panel:hover{transform:translateY(-2px);box-shadow:0 24px 50px -18px rgba(255,107,87,.8)}
.study-hub-icon,.study-mode-card .study-hub-icon{border-radius:16px;border:0;color:#fff;background:var(--brand);box-shadow:0 4px 0 var(--brand-press)}
.study-hub-icon .icon{color:#fff}
.practice-mode-grid>.study-mode-card:nth-child(2) .study-hub-icon{background:var(--violet);box-shadow:0 4px 0 #5b43dc}
.practice-mode-grid>.study-mode-card:nth-child(3) .study-hub-icon{background:var(--amber);box-shadow:0 4px 0 #cf8509}
.practice-mode-grid>.study-mode-card:nth-child(4) .study-hub-icon{background:var(--sky);box-shadow:0 4px 0 #1c6ed6}
.study-more-modes .practice-mode-grid>.study-mode-card:nth-child(1) .study-hub-icon{background:var(--sky);box-shadow:0 4px 0 #1c6ed6}
.study-more-modes .practice-mode-grid>.study-mode-card:nth-child(2) .study-hub-icon{background:var(--coral);box-shadow:0 4px 0 #d94a37}
.study-more-modes .practice-mode-grid>.study-mode-card:nth-child(3) .study-hub-icon{background:var(--violet);box-shadow:0 4px 0 #5b43dc}
.study-more-modes .practice-mode-grid>.study-mode-card:nth-child(4) .study-hub-icon{background:var(--amber);box-shadow:0 4px 0 #cf8509}
:root[data-theme=dark] .study-mode-card .study-hub-icon{color:#fff}
:root[data-theme=dark] .study-mode-card:not(:nth-child(n+2)) .study-hub-icon{background:var(--brand);box-shadow:0 4px 0 var(--brand-press)}
.study-mode-card h3{font:800 23px/1.2 var(--heading);letter-spacing:-.025em}
.study-mode-note{font:800 11px/1.4 var(--heading);letter-spacing:.9px;text-transform:uppercase;color:var(--faint)}
.study-mode-card.recommended{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent),var(--sh-2)}
.practice-card-footer{border-top-color:var(--line)}
.practice-card-footer b{display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border-radius:999px;background:var(--soft);color:var(--brand-ink);font:800 13px var(--heading);transition:background .18s,color .18s}
.study-mode-card:hover .practice-card-footer b{background:var(--brand);color:#fff}
.study-more-modes{border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-1)}
.study-reader-link.panel{border:0;background:linear-gradient(120deg,var(--violet-soft),var(--sky-soft));color:var(--ink)}
.study-reader-link.panel>.icon:first-child{color:var(--violet)}

/* ----- battle hub ----- */
.battle-hub .page-heading h1{font-size:clamp(36px,3.4vw,48px)}
.battle-match-panel.panel{position:relative;overflow:hidden;border:0;border-radius:var(--r-xl);color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,#ff8a5c 0%,transparent 55%),linear-gradient(140deg,#ff6b57 0%,#f0436a 55%,#7b61ff 120%);box-shadow:0 30px 60px -28px rgba(240,67,106,.65)}
.battle-match-panel.panel::before{content:"VS";position:absolute;right:28px;top:14px;font:900 140px/1 var(--heading);letter-spacing:-8px;color:rgba(255,255,255,.12);pointer-events:none}
.battle-match-panel.panel h2{color:#fff;font:800 clamp(28px,2.4vw,36px)/1.1 var(--heading);letter-spacing:-.03em}
.battle-match-panel.panel p,.battle-match-panel.panel .battle-rules span,.battle-match-panel.panel label,.battle-match-panel.panel summary,.battle-match-panel.panel .social-field-help{color:rgba(255,255,255,.9)}
.battle-match-panel.panel .battle-rules span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.16)}
.battle-match-panel.panel .battle-rules .icon{color:#fff}
.battle-match-panel.panel .social-pill{background:rgba(255,255,255,.2);border:0;color:#fff}
.battle-match-panel.panel select{background-color:rgba(255,255,255,.95);border-color:transparent;color:var(--ink)}
.battle-match-panel.panel .social-button.primary{background:#fff;border-color:#fff;color:#e2385a;box-shadow:0 5px 0 rgba(120,20,50,.35);text-shadow:none;font-size:16px;min-height:54px;padding-inline:26px}
.battle-match-panel.panel .social-button.primary:hover{background:#fff4f6}
.battle-match-panel.panel .battle-ranking-rules{border-top-color:rgba(255,255,255,.25)}
.battle-match-panel.panel .battle-ranking-rules summary .icon{color:#fff}
.battle-option-icon{border-radius:14px;background:var(--violet-soft);color:var(--violet)}
.battle-friend-choice.panel,.battle-code-entry.panel{border-radius:var(--r-lg)}
.battle-friend-choice.panel:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.battle-hub-links a{padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-weight:700}
.battle-hub-links a:hover{border-color:var(--brand);color:var(--brand-ink)}

/* ----- stat strips ----- */
.account-stats,.account-summary{gap:12px}
.account-stat,.stat-card{border-radius:var(--r-lg)}
.account-stat strong,.stat-card strong{font:800 30px/1.1 var(--heading);letter-spacing:-.03em}

@media (max-width:900px){
  .workspace{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .app-footer{padding-bottom:8px}
  .battle-match-panel.panel::before{font-size:96px;right:16px}
  .catalog-word-column h3 a{font-size:21px}
}

/* ----- account: home / collections / settings ----- */
.account-page-heading h1{font:800 clamp(32px,3vw,44px)/1.1 var(--heading);letter-spacing:-.035em}
.account-page-heading p{color:var(--muted);font-size:15.5px}
.account-date{padding:7px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:700 12.5px var(--heading);color:var(--ink-2)}
.account-workspace-search.panel{border-radius:var(--r-xl);padding:22px 24px;box-shadow:var(--sh-2)}
.account-workspace-search label{font:800 15px var(--heading);color:var(--ink)}
.account-battle-shortcut{border:0;border-radius:var(--r-lg);color:#fff;background:linear-gradient(120deg,#ff6b57,#f0436a 70%,#c443d6);box-shadow:0 16px 36px -18px rgba(240,67,106,.7);transition:transform .2s var(--ease),box-shadow .2s}
.account-battle-shortcut:hover{transform:translateY(-2px);box-shadow:0 22px 44px -18px rgba(240,67,106,.8)}
.account-battle-shortcut strong{color:#fff;font:800 17px var(--heading)}
.account-battle-shortcut small{color:rgba(255,255,255,.88)}
.account-battle-shortcut .icon{color:#fff}
.account-battle-shortcut>.icon:first-child{box-sizing:content-box;padding:10px;border-radius:14px;background:rgba(255,255,255,.2)}
.account-vocabulary-summary{gap:12px;border:0;background:transparent;box-shadow:none;overflow:visible}
.account-vocabulary-summary>a{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-1);padding:18px 20px;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s}
.account-vocabulary-summary>a:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.account-vocabulary-summary>a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--brand)}
.account-vocabulary-summary>a:nth-child(2)::before{background:var(--amber)}
.account-vocabulary-summary>a:nth-child(3)::before{background:var(--coral)}
.account-vocabulary-summary>a:nth-child(4)::before{background:var(--violet)}
.account-vocabulary-summary span{font:700 12.5px var(--heading);color:var(--muted)}
.account-vocabulary-summary strong{font:800 34px/1.1 var(--heading);letter-spacing:-.04em;color:var(--ink)}
.account-section-heading h2{font:800 18px var(--heading);letter-spacing:-.02em}
.account-section-heading a{color:var(--brand-strong);font-weight:750}
.account-recent-list strong{font:800 17px var(--heading);letter-spacing:-.015em}
.account-recent-list button:hover{background:var(--brand-tint)}

.account-collection-grid{gap:16px}
.account-collection-tile{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-1);padding:22px;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s}
.account-collection-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.account-collection-tile h2{font:800 19px/1.25 var(--heading);letter-spacing:-.02em}
.account-collection-tile span:not(.account-folder-mark){display:inline-block;margin-top:6px;padding:4px 10px;border-radius:999px;background:var(--surface-3);font:750 12px var(--heading);color:var(--ink-2)}
.account-folder-mark{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;background:var(--brand);box-shadow:0 4px 0 var(--brand-press)}
.account-folder-mark .icon{color:#fff}
.account-folder-mark.peach{background:var(--amber);box-shadow:0 4px 0 #cf8509}
.account-folder-mark.lavender{background:var(--violet);box-shadow:0 4px 0 #5b43dc}
.account-folder-mark.blue{background:var(--sky);box-shadow:0 4px 0 #1c6ed6}
.account-folder-mark.pink{background:#ff5d8f;box-shadow:0 4px 0 #d63c6c}
.account-folder-mark.yellow{background:#f2c200;box-shadow:0 4px 0 #c49c00}

.settings-card.panel,.account-settings-form .panel{border-radius:var(--r-xl);padding:28px}
.settings-card h2{font:800 20px var(--heading);letter-spacing:-.02em}
.large-avatar{background:linear-gradient(135deg,#19d39f,#00a37a);color:#fff;font:800 28px var(--heading);box-shadow:0 5px 0 var(--brand-press)}
.account-goal-link{display:inline-flex;align-items:center;gap:4px;margin-right:8px;padding:6px 12px;border-radius:999px;background:var(--soft);color:var(--brand-ink);font:750 12.5px var(--heading)}
.theme-option{border-radius:var(--r-md);border:1.5px solid var(--line)}
.theme-option.selected{border-color:var(--brand);box-shadow:var(--ring)}

/* ----- rankings ----- */
.rankings-metric-nav{gap:8px}
.rankings-metric{border-radius:14px;border:1.5px solid var(--line);background:var(--surface);box-shadow:0 2px 0 var(--line);font-weight:750}
.rankings-metric.active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 3px 0 #000}
:root[data-theme=dark] .rankings-metric.active{background:var(--brand);border-color:var(--brand);color:#04241a}
.rankings-metric.active .icon{color:#fff}
.rankings-own{position:relative;overflow:hidden;border:0;border-radius:var(--r-xl);color:#fff;background:radial-gradient(90% 120% at 100% 0%,#3ff0bd 0%,transparent 50%),linear-gradient(135deg,#00bf8b,#00876a);box-shadow:0 26px 54px -26px rgba(0,135,106,.7)}
.rankings-own::after{content:"";position:absolute;right:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.1)}
.rankings-own *{color:#fff!important;border-color:rgba(255,255,255,.25)!important}
.rankings-own .rankings-own-score strong{font:800 64px/1 var(--heading);letter-spacing:-.05em}
.rankings-own .icon{color:#fff}
.rankings-refresh{border-radius:999px;font-weight:700;color:var(--muted)}
.rankings-podium{gap:14px}
.rankings-leader{border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.rankings-leader.place-1{border-color:#f5c24a;background:linear-gradient(180deg,#fff8e1,var(--surface) 55%)}
.rankings-leader.place-2{border-color:#c7d3dd;background:linear-gradient(180deg,#eef4f9,var(--surface) 55%)}
.rankings-leader.place-3{border-color:#e7c3a3;background:linear-gradient(180deg,#fdf0e5,var(--surface) 55%)}
:root[data-theme=dark] .rankings-leader.place-1,:root[data-theme=dark] .rankings-leader.place-2,:root[data-theme=dark] .rankings-leader.place-3{background:var(--surface)}
.rankings-avatar{border-radius:16px;background:var(--soft);color:var(--brand-ink);font:800 18px var(--heading);border:0}
.rankings-place,.rankings-leader-rank{font:800 var(--heading)}

/* ----- exercises: game-feel controls ----- */
.study-simple-nav .back-link{display:inline-flex;align-items:center;gap:4px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-weight:700}
.study-simple-nav .back-link:hover{border-color:var(--brand);color:var(--brand-ink)}
.practice-board.panel{border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:26px 30px}
.practice-mode-icon{border-radius:14px;background:var(--brand);color:#fff;box-shadow:0 3px 0 var(--brand-press);border:0}
.practice-mode-icon .icon{color:#fff}
.practice-mode-title strong{font:800 17px var(--heading)}
.practice-count{padding:6px 12px;border-radius:999px;background:var(--surface-3);font:800 14px var(--heading);color:var(--muted)}
.practice-count strong{color:var(--ink)}
.study-progress,.progress.study-progress{height:14px;border-radius:999px;background:var(--surface-3);overflow:hidden;box-shadow:inset 0 2px 0 rgba(15,42,32,.06)}
.study-progress>span{border-radius:999px;background:linear-gradient(90deg,#19d39f,var(--brand));box-shadow:inset 0 -3px 0 rgba(0,0,0,.08),inset 0 3px 0 rgba(255,255,255,.35)}
.build-prompt small,.study-flashcard small,.study-meaning-hint small{font:800 11.5px/1 var(--heading);letter-spacing:1.6px;color:var(--faint)}
.build-prompt h2{font:800 clamp(30px,3vw,44px)/1.15 var(--heading);letter-spacing:-.035em;color:var(--ink)}

/* answer options */
.context-option{min-height:64px;border-radius:18px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);box-shadow:none;font:700 17px var(--heading);color:var(--ink);transition:transform .12s var(--ease),border-color .15s,background .15s}
.context-option>span{border-radius:10px;border:2px solid var(--line);background:var(--surface);color:var(--muted);font:800 13px var(--heading)}
.context-option:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-1px)}
.context-option:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}
.context-option.is-selected{border-color:var(--sky);background:var(--sky-soft);color:var(--sky-ink)}
.context-option.is-selected>span{border-color:var(--sky);background:var(--sky);color:#fff}
.context-option.is-correct,.context-option.is-correct:disabled{border-color:var(--brand);background:var(--soft);color:var(--brand-ink);opacity:1}
.context-option.is-correct>span{border-color:var(--brand);background:var(--brand);color:#fff}
.context-option.is-wrong,.context-option.is-wrong:disabled{border-color:var(--coral);background:var(--coral-soft);color:var(--coral-ink);opacity:1}
.context-option.is-wrong>span{border-color:var(--coral);background:var(--coral);color:#fff}

/* letters */
.letter-tile{min-width:52px;height:56px;border-radius:14px;border:2px solid var(--line);border-bottom-width:5px;background:var(--surface);font:800 24px var(--heading);color:var(--ink);box-shadow:none;transition:transform .12s var(--ease),border-color .15s}
.letter-tile:hover:not(:disabled){border-color:var(--sky);transform:translateY(-2px)}
.letter-tile:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.letter-tile.used,.letter-tile.used:disabled{opacity:.3;border-bottom-width:2px;transform:translateY(3px)}
.letter-slot{border-radius:14px;border:2px dashed var(--line-strong);background:var(--surface-2);font:800 24px var(--heading);color:var(--ink)}
.letter-slot.filled{border-style:solid;border-color:var(--sky);border-bottom-width:4px;background:var(--surface)}
.letter-slot.correct{border-color:var(--brand);background:var(--soft);color:var(--brand-ink)}
.letter-bank{border-radius:20px;background:var(--surface-3);border:0}
.build-tools button{border-radius:999px;font-weight:700}

/* match */
.match-tile{border-radius:16px;border:2px solid var(--line);border-bottom-width:4px;background:var(--surface);font:700 16px var(--heading);transition:transform .12s var(--ease),border-color .15s,background .15s}
.match-tile:hover:not(:disabled){border-color:var(--line-strong);transform:translateY(-1px)}
.match-tile.is-selected{border-color:var(--sky);background:var(--sky-soft);color:var(--sky-ink)}
.match-tile.is-matched{border-color:var(--brand);background:var(--soft);color:var(--brand-ink)}
.match-tile.is-wrong{border-color:var(--coral);background:var(--coral-soft);color:var(--coral-ink)}

/* flashcard */
.study-flashcard{border-radius:28px;border:0;color:#fff;background:radial-gradient(120% 120% at 0% 0%,#3ff0bd 0%,transparent 45%),linear-gradient(140deg,#00bf8b,#00876a);box-shadow:0 8px 0 #006f53,0 30px 60px -24px rgba(0,111,83,.55);transition:transform .2s var(--ease),box-shadow .2s}
.study-flashcard small{color:rgba(255,255,255,.75)}
.study-flashcard strong{color:#fff;font:800 clamp(40px,4vw,60px)/1.05 var(--heading);letter-spacing:-.04em;text-shadow:0 2px 0 rgba(0,80,58,.25)}
.study-flashcard>span{color:rgba(255,255,255,.9);padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16)}
.study-flashcard>span .icon{color:#fff}
.study-flashcard:hover{transform:translateY(-2px)}
.study-flashcard:active{transform:translateY(4px);box-shadow:0 3px 0 #006f53,0 20px 40px -24px rgba(0,111,83,.55)}
.study-flashcard.is-flipped{background:radial-gradient(120% 120% at 100% 0%,#b6a8ff 0%,transparent 45%),linear-gradient(140deg,#7b61ff,#5a3fe0);box-shadow:0 8px 0 #4128b8,0 30px 60px -24px rgba(65,40,184,.55)}
.study-card-ratings .btn{min-height:54px;font-size:15px}
.study-card-ratings .btn.light{color:var(--coral-ink)}
.study-meaning-hint{border-radius:var(--r-lg);border:1px dashed color-mix(in srgb,var(--brand) 40%,var(--line));background:var(--brand-tint)}

/* feedback */
.practice-feedback{border-radius:18px;border:0;font-weight:650}
.practice-feedback.correct{background:var(--soft);color:var(--brand-ink);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--brand) 40%,transparent)}
.practice-feedback.wrong{background:var(--coral-soft);color:var(--coral-ink);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--coral) 40%,transparent)}
.practice-feedback.hint{background:var(--amber-soft);color:var(--amber-ink);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--amber) 40%,transparent)}
.practice-feedback .icon{color:currentColor}
.practice-footer .btn{min-height:52px;padding-inline:22px;font-size:15px}
.study-keyboard-help summary{color:var(--faint);font-weight:600}
.study-keyboard-help kbd{border-radius:7px;background:var(--surface-3);border:1px solid var(--line);box-shadow:0 1px 0 var(--line);font:700 11px var(--heading)}

/* side summary */
.practice-summary.panel{border-radius:var(--r-xl)}
.practice-summary h2{font:800 20px/1.25 var(--heading);letter-spacing:-.02em}
.practice-summary-stats b{font:800 18px var(--heading)}
.practice-step-dots>span{border-radius:10px;border:2px solid var(--line);background:var(--surface);font:800 12px var(--heading);color:var(--faint)}
.practice-step-dots>span.done{border-color:var(--brand);background:var(--brand);color:#fff}
.study-resume.panel{border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.study-resume-icon{border-radius:16px;background:var(--amber);color:#fff;box-shadow:0 4px 0 #cf8509;border:0}
.study-resume-icon .icon{color:#fff}
.study-setup.panel,.study-setup-form{border-radius:var(--r-xl)}
.study-setup h2{font:800 24px var(--heading);letter-spacing:-.025em}
.study-count-options label,.study-size-option{border-radius:16px}
.study-setup input[type=radio]:checked+span,.study-setup label:has(input:checked){border-color:var(--brand)!important;background:var(--soft)!important;color:var(--brand-ink)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}

/* network niceties */
.network-tab{border-color:transparent;background:transparent;box-shadow:none;color:var(--muted);border-radius:10px;font-weight:700}
.network-avatar,.social-avatar,.cr-avatar{background:linear-gradient(135deg,#e4f7ee,#c9f0de);color:var(--brand-ink);font-weight:800;border:0}
:root[data-theme=dark] .network-avatar,:root[data-theme=dark] .social-avatar{background:var(--soft)}
.build-prompt{margin:26px 0 20px}
@media (max-width:900px){
  .mobile-navigation>a,.mobile-navigation>a.active,.mobile-navigation>a[aria-current=page]{border:0;box-shadow:none;outline-offset:-2px}
  .mobile-navigation>a.active::before,.mobile-navigation>a.active::after{display:none}
}
@media (max-width:600px){
  .study-hub .study-mode-card .practice-card-footer b{width:44px!important;height:44px!important;min-height:0!important;padding:0!important;justify-content:center;border-radius:14px;font-size:0!important;line-height:0;gap:0;overflow:hidden;background:var(--brand);color:#fff;box-shadow:0 3px 0 var(--brand-press)}
  .study-hub .practice-card-footer b .icon{width:20px;height:20px;color:#fff}
  .study-mode-card h3{font-size:19px}
  .battle-hub-links a{padding:6px 12px;font-size:13px}
  .battle-match-panel.panel::before{display:none}
}

/* Phone density: compact surfaces, readable copy, full-size touch targets. */
@media (max-width:600px){
  :root{--mobile-nav-clearance:calc(68px + max(env(safe-area-inset-bottom),var(--langufy-tg-bottom,0px)))}
  body{font-size:14px}
  .workspace{padding-bottom:var(--mobile-nav-clearance)}
  #content{padding:14px 10px 18px}
  .topbar{height:calc(52px + env(safe-area-inset-top,0px));padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px));gap:10px}
  .topbar .icon-btn,.network-bell,.topbar .profile-avatar{border-radius:11px;box-shadow:none}
  .topbar .icon{width:19px;height:19px}
  .breadcrumb,.breadcrumb strong{font-size:12px}
  .mobile-navigation{left:0;right:0;bottom:0;height:calc(56px + env(safe-area-inset-bottom));min-height:56px;padding:4px 8px calc(4px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:0 -2px 12px #0f2a2005;background:var(--surface)}
  .mobile-navigation a{min-height:44px;border-radius:12px;font-size:11px;gap:2px}
  .mobile-navigation a .icon{width:20px;height:20px}
  .sidebar{padding:calc(16px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .sidebar .brand{font-size:24px;margin-bottom:20px}
  #navigation>a,.sidebar-setting,.nav-extra a,.nav-extra>summary{min-height:44px;padding:8px 10px;font-size:13px}
  .sidebar-bottom{padding-top:10px;margin-top:8px}
  #app-logout,#demo-login{min-height:44px}
  .page-heading{margin-bottom:12px;gap:8px}
  .page-heading h1,.catalog-app .catalog-heading h1,.account-app .account-page-heading h1,
  .study-hub-heading h1,.practice-hero h1,body:has(.study-setup) .page-heading h1,
  #content>div>header h1,#content>section>header h1{font-size:22px;line-height:1.25;letter-spacing:-.4px}
  .page-subtitle,.account-page-heading p{font-size:13px;line-height:1.55;margin-top:5px}
  .btn,.catalog-button{min-height:44px;border-radius:11px;box-shadow:none;font-size:13px;padding:9px 12px;line-height:1.45}
  .btn.primary,.catalog-button.catalog-primary{background:#007a55;border-color:#007a55;color:#fff}
  :where(:root:not([data-theme=dark])) :is(.btn.primary,.btn.hero-button,.btn.dark,.catalog-button.catalog-primary,.cr-button.primary,.network-button.primary,.social-button.primary,.eng-button.eng-primary,.rankings-button.primary,.discussion-button.primary){background:#007a55;border-color:#007a55;color:#fff}
  :where(:root:not([data-theme=dark])) :is(.btn.primary,.btn.hero-button,.btn.dark,.catalog-button.catalog-primary,.cr-button.primary,.network-button.primary,.social-button.primary,.eng-button.eng-primary,.rankings-button.primary,.discussion-button.primary):hover{background:#00684d;border-color:#00684d;color:#fff}
  .catalog-app .catalog-heading{margin-bottom:12px}
  .catalog-app .catalog-heading p{font-size:12px}
  .catalog-app .catalog-count{font-size:11px;padding:2px 7px;border:0;margin-left:3px}
  .catalog-app .catalog-search{min-height:50px;border-radius:13px;padding:3px 3px 3px 11px;box-shadow:var(--sh-1)}
  .catalog-app .catalog-search input{font-size:16px;height:44px}
  .catalog-app .catalog-search .catalog-button{min-height:44px;height:44px;padding:8px 12px}
  .catalog-app .catalog-filter-row{margin-top:6px;gap:6px}
  .catalog-app .catalog-controls{margin-bottom:10px}
  .catalog-app .catalog-senses{display:grid;gap:0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .catalog-app .catalog-sense{padding:4px 10px;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent}
  .catalog-app .catalog-word-column h3 a{font-size:16px;line-height:1.25;min-height:40px}
  .catalog-app .catalog-sense-action .catalog-button{border-radius:10px;box-shadow:none}
  .catalog-app .catalog-translation{font-size:13px;line-height:1.5}
  .catalog-app .catalog-detail-link{color:var(--deep);font-size:11px;min-height:32px;gap:4px}
  .catalog-app .catalog-topic{border-radius:13px}
  .catalog-app .catalog-topic>a{padding:10px;gap:9px}
  .catalog-app .catalog-topic summary{padding:10px 12px;min-height:44px}
  .catalog-app .catalog-topic ul{padding-inline:12px}
  .catalog-app .catalog-detail{border-radius:14px}
  .catalog-app .catalog-detail-top,.catalog-app .catalog-examples{padding:16px 14px}
  .catalog-app .catalog-detail-word h2{font-size:27px}
  .catalog-app .catalog-detail-translation{font-size:19px;margin-top:14px!important}
  .catalog-app .catalog-detail-actions{margin-top:14px;gap:10px}
  .catalog-app .catalog-examples li{padding-block:12px;gap:10px}
  .catalog-app .catalog-examples p{font-size:15px;line-height:1.6}
  .catalog-app .catalog-examples p[lang=uz]{font-size:14px}
  .catalog-app .catalog-save-panel{padding:14px;margin-top:16px}
  .catalog-app .catalog-selection-dock{border-radius:13px;margin-top:16px}
  .account-app .account-workspace-search.panel{padding:14px;border-radius:14px}
  .account-app .account-battle-shortcut{padding:11px 12px;border-radius:14px;min-height:64px;box-shadow:none;margin-block:10px 14px}
  .account-app .account-battle-shortcut strong{font-size:15px}
  .account-app .account-vocabulary-summary{gap:8px;margin-bottom:14px}
  .account-app .account-vocabulary-summary>a{padding:12px;border-radius:13px}
  .account-app .account-vocabulary-summary strong{font-size:25px}
  .account-app .account-vocabulary-summary.is-compact>a{padding:8px 4px;min-height:58px;border-radius:10px}
  .account-app .account-vocabulary-summary.is-compact strong{font-size:21px}
  .account-app .account-collection-tile{border-radius:13px;box-shadow:none}
  .account-app .account-collection-tile span:not(.account-folder-mark){padding:2px 7px;margin-top:3px}
  .account-app .settings-card.panel,.account-app .account-settings-form .panel{padding:16px 14px;border-radius:14px}
  .account-app .settings-card h2{font-size:17px}
  .account-app .account-library-selects .account-type-filter>select{font-size:16px}
  .account-app input:not([type=checkbox]):not([type=radio]),.account-app select,.account-app textarea{font-size:16px}
  .study-hub .study-challenge-entry.panel{padding:12px 14px;border-radius:14px;box-shadow:none}
  .study-hub .study-challenge-entry.panel>.icon:first-child{width:20px;height:20px;padding:8px;border-radius:11px}
  .study-hub .study-challenge-entry.panel strong{font-size:15px}
  .study-hub .study-challenge-entry.panel small{font-size:12px}
  .study-hub .study-due-link{padding:12px;gap:10px;margin-bottom:12px;border-radius:14px}
  .study-hub .study-due-link strong{font-size:14px;line-height:1.45}
  .study-hub .study-due-link small{font-size:12px;line-height:1.5;margin-top:3px}
  .study-hub .practice-mode-grid .study-mode-card{border-radius:13px;box-shadow:none;grid-template-columns:30px minmax(0,1fr) 44px;gap:3px 9px;padding:11px;min-height:76px}
  .study-hub .study-mode-card h3{font-size:16px}
  .study-hub .study-mode-card .study-hub-icon{width:30px;height:30px;border-radius:9px;box-shadow:none}
  .study-hub .study-mode-card .practice-card-footer b{border-radius:11px;box-shadow:none;background:#007a55}
  .study-hub .study-more-modes,.study-hub .study-reader-link.panel{border-radius:14px}
  [data-study-root] .study-setup{padding:14px 12px;margin:10px auto;border-radius:14px}
  [data-study-root] .study-setup>h2{font-size:20px}
  [data-study-root] .study-setup>p{margin-bottom:14px}
  [data-study-root] .study-setup form{gap:10px}
  [data-study-root] .study-limit label>span{min-height:48px;padding:6px;border-radius:10px;font-size:18px;gap:2px}
  [data-study-root] .study-library-source{padding:12px;gap:10px;border-radius:11px}
  [data-study-root] .study-setup .btn,[data-study-root] .study-card-ratings .btn{min-height:44px;padding-block:9px}
  [data-study-root] .practice-board.panel{padding:16px 14px;border-radius:16px}
  [data-study-root] .practice-mode-title strong{font-size:15px}
  [data-study-root] .practice-count{font-size:12px;padding:5px 9px}
  [data-study-root] .study-progress{height:9px}
  [data-study-root] .build-prompt{margin:18px 0 14px}
  [data-study-root] .build-prompt h2{font-size:28px}
  [data-study-root] .context-option{min-height:52px;border-radius:12px;font-size:15px;padding:10px}
  [data-study-root] .letter-tile{min-width:44px;height:48px;border-radius:10px;font-size:21px}
  [data-study-root] .letter-slot{border-radius:10px;font-size:21px}
  [data-study-root] .match-tile{min-height:48px;border-radius:11px;font-size:14px}
  [data-study-root] .study-flashcard{min-height:185px;gap:20px;margin-block:18px;border-radius:18px}
  [data-study-root] .study-flashcard strong{font-size:30px}
  [data-study-root] .practice-footer .btn{min-height:44px;font-size:14px;padding-inline:14px}
  [data-study-root] .study-resume,[data-study-root] .study-recovery{padding:22px 16px;margin:14px auto;border-radius:16px}
  [data-study-root] .study-resume h2,[data-study-root] .study-recovery h2{font-size:22px}
  .app-footer{padding:12px;font-size:12px}

  /* Intrinsic sizes must be allowed to shrink before text wraps on phones. */
  #content>*,.page-heading>div,.panel,.account-app,.catalog-app,[data-study-root],
  .account-app form,.account-app label,.account-app fieldset,.study-setup form>*,.study-setup label{min-width:0;max-width:100%}
  #content :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){max-width:100%;min-width:0;box-sizing:border-box}
  #content :is(h1,h2,h3,p,strong),dialog :is(h2,h3,p){overflow-wrap:anywhere}
  .btn,.catalog-button{white-space:normal;overflow-wrap:anywhere;max-width:100%}
  .topbar .breadcrumb{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-navigation>a{min-width:0;max-width:100%;font-size:10px;gap:1px;padding:3px 4px}
  .mobile-navigation>a.active{background:var(--soft);color:var(--deep)}
  .mobile-navigation a .icon{width:19px;height:19px}
  .catalog-app .catalog-sense:last-child{border-bottom:0}
  .catalog-app .catalog-sense.is-selected{background:var(--soft);box-shadow:inset 3px 0 var(--deep)}
  .catalog-app .catalog-sense h3{min-width:0}
  .catalog-app .catalog-sense-action{grid-row:1 / 3;align-self:center}
  .catalog-app .catalog-sense-body{grid-column:1;grid-template-columns:minmax(0,1fr) auto;gap:4px}
  .catalog-app .catalog-search .catalog-button{min-width:0;padding-inline:10px;font-size:12px}
  .catalog-app .catalog-results-heading{align-items:center}
  .catalog-app .catalog-results-heading h2{font-size:14px}
  .catalog-app .catalog-results-heading p{font-size:11px}
  .catalog-app .catalog-results-heading>.catalog-button{font-size:11px;padding:6px 8px;max-width:100px}
  .catalog-app .catalog-sense .catalog-tags{gap:3px}
  .catalog-app .catalog-sense .catalog-tags>span{font-size:10px;padding:1px 3px}
  .catalog-app .catalog-detail-link .catalog-icon{width:13px;height:13px}
  .catalog-app .catalog-topic-grid{grid-template-columns:minmax(0,1fr)}
  .catalog-app .catalog-topic>a>div,.catalog-app .catalog-save-heading>div{min-width:0}
  .catalog-app .catalog-detail-top,.catalog-app .catalog-examples{padding:14px 12px}
  .catalog-app .catalog-detail-actions,.catalog-app .catalog-save-heading{flex-wrap:wrap}
  .catalog-app .catalog-save-panel select{width:100%;min-width:0}
  .catalog-app .catalog-selection-dock{max-width:100%;padding:8px;gap:6px;background:var(--surface);color:var(--ink);border:1px solid var(--deep);box-shadow:var(--sh-2)}
  .catalog-app .catalog-selection-dock strong{color:var(--ink)}
  .catalog-app .catalog-selection-dock .catalog-button{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:none}
  .catalog-app .catalog-selection-dock .catalog-button.catalog-primary{background:#007a55;border-color:#007a55;color:#fff}
  .account-app .account-personal-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-bottom:12px}
  .account-app .account-personal-tabs>a{min-width:0;min-height:44px;justify-content:center;padding:6px 4px;font-size:12px;white-space:normal}
  .account-app .account-heading-actions{flex-wrap:wrap}
  .account-app .account-heading-actions>.btn{min-width:0;flex:1 1 120px}
  .account-app .account-collection-actions{flex-wrap:wrap;gap:8px}
  .account-app .account-collection-actions>.btn{min-width:0;flex:1 1 110px}
  .account-app .account-collection-grid{gap:6px}
  .account-app .account-collection-tile{padding:10px;border-radius:12px}
  .account-app .account-collection-tile h3{font-size:15px}
  .account-app .account-row-actions{flex-wrap:wrap}
  .account-app .account-words-table tr{padding:10px;gap:3px 6px}
  .account-app .account-settings-form>.settings-card{margin-bottom:12px}
  .account-app .account-settings-form .account-goal-link{min-height:44px;margin-top:6px;padding:8px 10px}
  .account-app .account-settings-form .profile-edit{gap:12px;margin:16px 0}
  .account-app .account-settings-form .large-avatar{width:44px;height:44px;flex-shrink:0;font-size:20px;box-shadow:none}
  .account-app .account-settings-form .profile-edit p{font-size:12px;margin-top:3px}
  .account-app .account-settings-form .settings-card>.form-grid{margin-top:14px;gap:12px}
  .account-app .account-settings-form .setting-row{gap:10px;flex-wrap:wrap}
  .account-app .account-settings-form .setting-row>div{min-width:0;flex:1 1 140px}
  .account-app .account-settings-form .theme-options{gap:6px}
  .account-app .account-settings-form .theme-option{min-width:0}
  .account-app .account-settings-form .theme-option>span{font-size:12px}
  [data-study-root] .study-setup-art{height:44px;margin-bottom:8px}
  [data-study-root] .study-setup-art>.icon{width:30px;height:30px}
  [data-study-root] .study-setup>h2{font-size:18px}
  [data-study-root] .study-setup>p{font-size:12px;margin:6px 0 12px;line-height:1.5}
  [data-study-root] .study-setup label{font-size:13px;gap:6px}
  [data-study-root] .study-setup select{padding:10px;font-size:16px;min-width:0}
  [data-study-root] .study-navigation{display:flex;flex-wrap:wrap;gap:4px;overflow:visible;padding:0;margin-bottom:8px}
  [data-study-root] .study-navigation a{flex:1 1 100px;min-width:0;white-space:normal;text-align:center;justify-content:center;min-height:44px;font-size:12px;padding:7px}
  [data-study-root] .study-answer-label{margin:16px 0;gap:8px}
  [data-study-root] .practice-topline{flex-wrap:wrap;gap:8px;margin-bottom:12px}
  [data-study-root] .practice-mode-title{min-width:0}
  [data-study-root] .practice-footer{flex-wrap:wrap;margin-top:14px;padding-top:12px}
  [data-study-root] .practice-footer .btn{min-width:0;white-space:normal}
  [data-study-root] .study-flashcard{min-height:160px;margin-block:12px}
  [data-study-root] .study-flashcard strong{font-size:26px}
  [data-study-root] .study-card-ratings{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  [data-study-root] .study-card-ratings .btn{min-width:0;font-size:12px;padding:8px 6px}
  [data-study-root] .study-speed{width:100%;justify-content:center;flex-wrap:wrap;gap:8px}
  body dialog{width:calc(100% - 16px);max-width:calc(100% - 16px);max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:20px 14px;border-radius:16px;overflow:auto}
  body dialog :is(form,fieldset,label,.form-actions){min-width:0;max-width:100%}
  body dialog .form-actions{display:flex;flex-wrap:wrap;gap:8px}
  body dialog .form-actions>.btn{min-width:0;flex:1 1 110px}
}