/* LVL V2 component contract.
   This file owns structure + safe fallback styling for every data-ui component.
   Design presets may override colors, shadows, radii and typography, but the UI
   must stay usable even if a design selector is missing. */

:root{
  --component-gap:12px;
  --component-radius:16px;
  --component-surface:var(--surface,#fff);
  --component-border:var(--border,#e5e1e7);
  --component-text:var(--text,#1a1826);
  --component-muted:var(--muted,#6d6878);
  --component-accent:var(--accent,#7438f4);
}

[data-ui="topbar"]{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
[data-ui="brand"],[data-ui="icon-button"],[data-ui="avatar-button"],[data-ui="dock-button"]{appearance:none;border:0;background:transparent}
[data-ui="brand"]{display:grid;justify-items:start;gap:2px;color:var(--component-accent)}
[data-ui="brand"] span{font-weight:900;font-size:24px;line-height:1}
[data-ui="brand"] small{font-size:9px;color:var(--component-muted)}
[data-ui="top-actions"]{display:flex;align-items:center;gap:8px}
[data-ui="icon-button"],[data-ui="avatar-button"]{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--component-surface);border:1px solid var(--component-border);position:relative}
[data-ui="avatar-button"]{border-radius:50%;font-weight:800}
[data-ui="icon"]{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-ui="alert-dot"]{position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:#ff476f}

[data-ui="dock"]{background:var(--component-surface);border-top:1px solid var(--component-border)}
[data-ui="dock-inner"]{min-height:68px}
[data-ui="dock-button"]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--component-muted);font-size:10px;font-weight:700}
[data-ui="dock-button"][aria-current="page"]{color:var(--component-accent)}

[data-ui="page-heading"],[data-ui="welcome"],[data-ui="profile-head"]{padding:12px 0 16px}
[data-ui="page-heading"] h1,[data-ui="welcome"] h1,[data-ui="profile-head"] h1{margin:4px 0 6px;font-size:30px;line-height:1.05}
[data-ui="page-heading"] p,[data-ui="welcome"] p,[data-ui="profile-head"] p{margin:0;color:var(--component-muted);font-size:13px;line-height:1.45}
[data-ui="eyebrow"]{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--component-accent)}
[data-ui="welcome"]{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
[data-ui="focus-chip"]{min-width:72px;padding:10px;border-radius:var(--component-radius);background:var(--component-surface);border:1px solid var(--component-border);display:grid;justify-items:center;gap:2px}
[data-ui="focus-chip"] span{font-size:20px}[data-ui="focus-chip"] strong{font-size:12px}[data-ui="focus-chip"] small{font-size:9px;color:var(--component-muted)}

[data-ui="translator-card"],[data-ui="continue-card"],[data-ui="support-panel"],[data-ui="profile-summary"]{background:var(--component-surface);border:1px solid var(--component-border);border-radius:var(--component-radius);padding:14px}
[data-ui="translator-head"]{display:flex;align-items:center;justify-content:space-between;gap:12px}
[data-ui="translator-head"]>div{display:flex;align-items:center;gap:9px;min-width:0}
[data-ui="translator-head"]>div>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft,#eee7ff);color:var(--component-accent);flex:0 0 auto}
[data-ui="translator-head"] strong{display:block;font-size:14px}[data-ui="translator-head"] small{display:block;margin-top:2px;font-size:10px;color:var(--component-muted)}
[data-ui="translator-head"]>button{appearance:none;border:1px solid var(--component-border);background:var(--component-surface);width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
[data-ui="translator-languages"]{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:12px 0 8px;font-size:10px;font-weight:700;color:var(--component-muted)}
[data-ui="translator-languages"] span:last-child{text-align:right}
[data-ui="translator-input"]{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:8px;align-items:start;border:1px solid var(--component-border);border-radius:12px;padding:10px;background:var(--component-surface)}
[data-ui="translator-input"] textarea{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--component-text);line-height:1.4;resize:none}
[data-ui="translator-input"] button,[data-ui="translation-output"] button{appearance:none;border:0;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft,#eee7ff);color:var(--component-accent)}
[data-ui="translation-output"]{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:8px;align-items:center;margin-top:8px;padding:10px;border-radius:12px;background:var(--accent-soft,#eee7ff)}
[data-ui="translation-output"] small{display:block;font-size:9px;color:var(--component-muted)}
[data-ui="translation-output"] strong{display:block;margin-top:2px;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
[data-ui="translator-actions"]{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
[data-ui="translator-actions"] button{appearance:none;border:1px solid var(--component-border);background:var(--component-surface);border-radius:10px;min-height:40px;padding:0 10px;font-size:10px;font-weight:800}

[data-ui="continue-card"]{margin-top:12px}
[data-ui="continue-top"]{display:grid;grid-template-columns:44px minmax(0,1fr) 40px;gap:10px;align-items:center}
[data-ui="course-flag"]{font-size:28px;line-height:1}
[data-ui="continue-top"] small{display:block;font-size:9px;color:var(--component-accent);font-weight:800;text-transform:uppercase}
[data-ui="continue-top"] strong{display:block;margin-top:2px;font-size:13px;overflow-wrap:anywhere}
[data-ui="continue-top"] p{margin:3px 0 0;font-size:10px;color:var(--component-muted)}
[data-ui="continue-top"]>button{appearance:none;border:0;width:40px;height:40px;border-radius:11px;background:var(--component-accent);color:#fff}
[data-ui="continue-progress"]{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:10px}
[data-ui="continue-progress"] span{font-size:9px;color:var(--component-muted)}
[data-ui="progress"]{height:6px;border-radius:999px;background:#ece9f2;overflow:hidden}
[data-ui="progress"]>i{height:100%;display:block;border-radius:inherit;background:var(--component-accent)}

[data-ui="section-block"]{padding-top:18px}
[data-ui="section-title"]{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
[data-ui="section-title"] h2{margin:0;font-size:18px;line-height:1.15}
[data-ui="section-title"] p{margin:3px 0 0;font-size:10px;color:var(--component-muted);line-height:1.4}
[data-ui="section-title"] button{appearance:none;border:0;background:transparent;color:var(--component-accent);font-size:10px;font-weight:800}

[data-ui="tool-grid"]{display:grid;grid-template-columns:1fr 1fr;gap:8px}
[data-ui="tool-card"]{appearance:none;border:1px solid var(--component-border);background:var(--component-surface);border-radius:var(--component-radius);min-height:82px;padding:11px;display:grid;grid-template-columns:40px minmax(0,1fr) 16px;gap:9px;align-items:center;text-align:left}
[data-ui="tool-icon"]{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft,#eee7ff);color:var(--component-accent)}
[data-ui="tool-card"] strong{display:block;font-size:11px}[data-ui="tool-card"] small{display:block;margin-top:3px;font-size:9px;color:var(--component-muted);line-height:1.35}[data-ui="tool-card"]>b{font-size:18px;color:var(--component-muted)}
[data-ui="daily-card"]{appearance:none;border:0;width:100%;border-radius:var(--component-radius);padding:13px;background:#1b1824;color:#fff;display:grid;grid-template-columns:48px minmax(0,1fr) 18px;gap:10px;align-items:center;text-align:left}
[data-ui="daily-ring"]{width:46px;height:46px;border:4px solid var(--component-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:2px}
[data-ui="daily-ring"] span{font-size:14px;font-weight:900}[data-ui="daily-ring"] small{font-size:8px;color:#c9c3d2}
[data-ui="daily-card"] strong{font-size:12px}[data-ui="daily-card"] p{margin:3px 0 0;font-size:9px;color:#c9c3d2;line-height:1.35}

[data-ui="search"]{min-height:44px;padding:0 12px;border:1px solid var(--component-border);border-radius:12px;background:var(--component-surface);display:flex;align-items:center;gap:8px}
[data-ui="search"] input{width:100%;min-width:0;border:0;outline:0;background:transparent}
[data-ui="chips"]{display:flex;gap:7px;overflow:auto;padding:10px 0 2px;scrollbar-width:none}
[data-ui="chip"]{appearance:none;border:1px solid var(--component-border);background:var(--component-surface);border-radius:10px;padding:8px 12px;white-space:nowrap;font-size:10px;font-weight:800}
[data-ui="chip"][data-active="true"]{background:var(--component-accent);border-color:var(--component-accent);color:#fff}
[data-ui="course-list"],[data-ui="practice-list"],[data-ui="room-list"],[data-ui="profile-list"]{display:grid;gap:8px}
[data-ui="course-card"]{appearance:none;border:1px solid var(--component-border);background:var(--component-surface);border-radius:var(--component-radius);min-height:72px;padding:10px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left}
[data-ui="course-card"] strong{display:block;font-size:11px}[data-ui="course-card"] small{display:block;margin:3px 0 7px;font-size:9px;color:var(--component-muted)}[data-ui="course-card"] em{font-style:normal;font-size:9px;color:var(--component-muted)}
[data-ui="category-grid"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
[data-ui="category-grid"] button{appearance:none;border:1px solid var(--component-border);background:var(--component-surface);border-radius:var(--component-radius);min-height:116px;padding:11px 8px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
[data-ui="category-grid"] span{font-size:22px}[data-ui="category-grid"] strong{margin-top:10px;font-size:10px}[data-ui="category-grid"] small{margin-top:4px;font-size:8px;color:var(--component-muted);line-height:1.3}

[data-ui="practice-hero"]{border-radius:var(--component-radius);padding:16px;background:#231c34;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
[data-ui="practice-hero"] span{font-size:9px;color:#d2cadf;text-transform:uppercase}[data-ui="practice-hero"] h2{margin:4px 0 6px;font-size:20px}[data-ui="practice-hero"] p{margin:0;font-size:10px;color:#d8d1e4;line-height:1.4}
[data-ui="practice-hero"] button{appearance:none;border:0;margin-top:12px;min-height:38px;border-radius:10px;padding:0 12px;background:#fff;color:#2d2045;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800}
[data-ui="practice-score"]{width:78px;height:78px;border-radius:18px;background:rgba(255,255,255,.1);display:grid;place-items:center;align-content:center}
[data-ui="practice-score"] strong{font-size:16px}[data-ui="practice-score"] small{font-size:8px;color:#d8d1e4}
[data-ui="practice-card"]{appearance:none;border:1px solid var(--component-border);background:var(--component-surface);border-radius:var(--component-radius);min-height:78px;padding:11px;display:grid;grid-template-columns:42px minmax(0,1fr) 16px;gap:10px;align-items:center;text-align:left}
[data-ui="practice-card"]>span{width:42px;height:42px;border-radius:12px;background:var(--accent-soft,#eee7ff);color:var(--component-accent);display:grid;place-items:center}
[data-ui="practice-card"] em{display:block;font-size:8px;color:var(--component-accent);font-style:normal;font-weight:800}[data-ui="practice-card"] strong{display:block;margin-top:2px;font-size:11px}[data-ui="practice-card"] small{display:block;margin-top:3px;font-size:9px;color:var(--component-muted);line-height:1.3}
[data-ui="challenge-grid"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
[data-ui="challenge-grid"] button{appearance:none;border:1px solid var(--component-border);background:var(--component-surface);border-radius:var(--component-radius);padding:12px 8px;min-height:100px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
[data-ui="challenge-grid"] span{font-size:24px}[data-ui="challenge-grid"] strong{margin-top:10px;font-size:10px}[data-ui="challenge-grid"] small{margin-top:4px;font-size:8px;color:var(--component-muted)}

[data-ui="community-tabs"],[data-ui="support-tabs"]{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;border-radius:12px;background:#f1eef7}
[data-ui="community-tabs"] button,[data-ui="support-tabs"] button{appearance:none;border:0;background:transparent;border-radius:9px;min-height:36px;font-size:10px;font-weight:800;color:var(--component-muted)}
[data-ui="community-tabs"] button[data-active="true"],[data-ui="support-tabs"] button[data-active="true"]{background:var(--component-surface);color:var(--component-accent)}
[data-ui="room-row"]{appearance:none;border:1px solid var(--component-border);background:var(--component-surface);border-radius:var(--component-radius);padding:11px;display:grid;grid-template-columns:40px minmax(0,1fr) 16px;gap:10px;align-items:center;text-align:left}
[data-ui="room-row"]>span{font-size:24px}[data-ui="room-row"] strong{display:block;font-size:11px}[data-ui="room-row"] small{display:block;margin-top:2px;font-size:9px;color:var(--component-muted)}[data-ui="room-row"] em{display:block;margin-top:4px;font-size:8px;color:var(--success,#1fa761);font-style:normal}
[data-ui="primary-wide"],[data-ui="logout"]{appearance:none;width:100%;border:0;border-radius:12px;min-height:44px;padding:0 14px;margin-top:12px;font-weight:800}
[data-ui="primary-wide"]{background:var(--component-accent);color:#fff}[data-ui="logout"]{background:#fff;border:1px solid var(--component-border);color:var(--danger,#b43d4a)}

[data-ui="support-panel"]{margin-top:10px}
[data-ui="assistant-head"]{display:flex;align-items:center;gap:9px}
[data-ui="assistant-head"]>span{width:36px;height:36px;border-radius:10px;background:var(--accent-soft,#eee7ff);color:var(--component-accent);display:grid;place-items:center}
[data-ui="assistant-head"] strong{display:block;font-size:12px}[data-ui="assistant-head"] small{display:block;margin-top:2px;font-size:9px;color:var(--success,#1fa761)}
[data-ui="support-panel"]>p{font-size:11px;line-height:1.45;color:var(--component-muted)}
[data-ui="quick-pills"]{display:flex;gap:6px;flex-wrap:wrap}
[data-ui="quick-pills"] button{appearance:none;border:1px solid var(--component-border);background:#fff;border-radius:999px;padding:7px 9px;font-size:9px}
[data-ui="support-composer"]{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:8px;margin-top:10px}
[data-ui="support-composer"] input{min-width:0;border:1px solid var(--component-border);border-radius:10px;padding:0 10px;outline:0;background:#fff}
[data-ui="support-composer"] button{appearance:none;border:0;border-radius:10px;background:var(--component-accent);color:#fff}

[data-ui="profile-head"]{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center}
[data-ui="profile-avatar"]{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft,#eee7ff);color:var(--component-accent);font-size:24px;font-weight:900}
[data-ui="profile-summary"]{display:grid;grid-template-columns:1fr 1fr;gap:8px}
[data-ui="profile-summary"]>div{min-width:0;padding:4px}
[data-ui="profile-summary"] small{display:block;font-size:9px;color:var(--component-muted)}[data-ui="profile-summary"] strong{display:block;margin-top:3px;font-size:14px;overflow-wrap:anywhere}[data-ui="profile-summary"] span{display:block;margin-top:3px;font-size:9px;color:var(--component-muted)}
[data-ui="profile-link"]{appearance:none;border:1px solid var(--component-border);background:var(--component-surface);border-radius:var(--component-radius);padding:11px;display:grid;grid-template-columns:38px minmax(0,1fr) 16px;gap:9px;align-items:center;text-align:left}
[data-ui="profile-link"]>span{width:38px;height:38px;border-radius:11px;background:var(--accent-soft,#eee7ff);color:var(--component-accent);display:grid;place-items:center}
[data-ui="profile-link"] strong{display:block;font-size:11px}[data-ui="profile-link"] small{display:block;margin-top:3px;font-size:9px;color:var(--component-muted)}

[data-ui="course-row"]{appearance:none;width:100%;border:1px solid var(--component-border);background:var(--component-surface);border-radius:var(--component-radius);padding:10px;display:grid;grid-template-columns:40px minmax(0,1fr) 16px;gap:10px;align-items:center;text-align:left}
[data-ui="course-symbol"]{font-size:23px}[data-ui="course-row"] strong{display:block;font-size:11px}[data-ui="course-row"] small{display:block;margin-top:3px;font-size:9px;color:var(--component-muted)}[data-ui="row-arrow"]{color:var(--component-muted)}

[data-ui="auth-card"]{background:var(--component-surface);border:1px solid var(--component-border);border-radius:20px;padding:20px}
[data-ui="auth-brand"]{display:flex;align-items:center;gap:10px;margin-bottom:18px}
[data-ui="brand-mark"]{width:14px;height:14px;border-radius:4px;background:var(--component-accent)}
[data-ui="brand-name"]{font-size:18px;color:var(--component-accent)}
[data-ui="auth-form"],[data-ui="auth-2fa"]{gap:10px}
[data-ui="field"]{display:grid;gap:5px}[data-ui="field"] label{font-size:10px;color:var(--component-muted)}[data-ui="field"] input{min-height:44px;border:1px solid var(--component-border);border-radius:10px;padding:0 11px;outline:0;background:#fff}
[data-ui="primary-button"]{appearance:none;border:0;min-height:44px;border-radius:10px;background:var(--component-accent);color:#fff;font-weight:800}
[data-ui="text-button"]{appearance:none;border:0;background:transparent;color:var(--component-accent);min-height:40px}
[data-ui="auth-feedback"]{min-height:18px;font-size:10px;color:var(--component-muted)}

@media(max-width:360px){
  [data-ui="tool-grid"]{grid-template-columns:1fr}
  [data-ui="category-grid"],[data-ui="challenge-grid"]{grid-template-columns:1fr 1fr}
  [data-ui="practice-hero"]{grid-template-columns:1fr}
  [data-ui="practice-score"]{width:100%;height:auto;min-height:58px}
}