/* LVL family system v2 — extends the approved Home language across the product. */
:root{
  --lvl-family-accent:#5d63d8;
  --lvl-family-accent-strong:#444bb7;
  --lvl-family-accent-bright:#777df0;
  --lvl-family-accent-soft:#e9eafe;
  --lvl-family-canvas:#f7f7fc;
  --lvl-family-panel:#ffffff;
  --lvl-family-panel-soft:#f0f1fb;
  --lvl-family-ink:#20213b;
  --lvl-family-muted:#6e7089;
  --lvl-family-line:rgba(62,67,128,.12);
  --lvl-family-mint:#dff6ef;
  --lvl-family-coral:#ffe8e3;
  --lvl-family-blue:#e4efff;
  --lvl-family-shadow:0 18px 48px rgba(45,49,105,.10);

  --accent:var(--lvl-family-accent);
  --accent-hover:var(--lvl-family-accent-strong);
  --accent-active:#363c9d;
  --accent-soft:var(--lvl-family-accent-soft);
  --button-primary-bg:var(--lvl-family-accent);
  --button-primary-hover:var(--lvl-family-accent-strong);
  --focus-ring:rgba(93,99,216,.27);
  --purple:var(--lvl-family-accent);
  --purple-2:var(--lvl-family-accent-bright);
  --purple-soft:var(--lvl-family-accent-soft);
  --family-purple:var(--lvl-family-accent);
  --family-purple-deep:var(--lvl-family-accent-strong);
  --family-lilac:var(--lvl-family-accent-soft);
  --lvl-v3-purple:var(--lvl-family-accent);
  --lvl-v3-purple-strong:var(--lvl-family-accent-strong);
  --lvl-v3-purple-soft:var(--lvl-family-accent-soft);
}

html[data-theme="dark"]{
  --lvl-family-accent:#969bff;
  --lvl-family-accent-strong:#747bf0;
  --lvl-family-accent-bright:#aeb2ff;
  --lvl-family-accent-soft:#292e55;
  --lvl-family-canvas:#111321;
  --lvl-family-panel:#1a1e30;
  --lvl-family-panel-soft:#22273c;
  --lvl-family-ink:#f8f8ff;
  --lvl-family-muted:#b8bbcf;
  --lvl-family-line:rgba(201,204,255,.13);
  --lvl-family-mint:#193a35;
  --lvl-family-coral:#41282c;
  --lvl-family-blue:#202f4a;
  --lvl-family-shadow:0 20px 52px rgba(3,5,15,.34);

  --canvas:var(--lvl-family-canvas);
  --surface:var(--lvl-family-panel);
  --surface-soft:var(--lvl-family-panel-soft);
  --surface-raised:#252a40;
  --surface-hover:#2d324b;
  --surface-active:#353b58;
  --border-soft:#343a55;
  --border-strong:#4b5275;
  --family-canvas:var(--lvl-family-canvas);
  --family-ink:var(--lvl-family-ink);
  --family-muted:var(--lvl-family-muted);
  --family-mint:var(--lvl-family-mint);
  --family-coral:var(--lvl-family-coral);
  --lvl-v3-canvas:var(--lvl-family-canvas);
  --lvl-v3-panel:var(--lvl-family-panel);
  --lvl-v3-panel-soft:var(--lvl-family-panel-soft);
  --lvl-v3-panel-strong:#2b3048;
  --lvl-v3-ink:var(--lvl-family-ink);
  --lvl-v3-muted:var(--lvl-family-muted);
  --lvl-v3-line:#343a55;
}

[data-ui="primary-wide"],[data-ui="session-start"]{
  background:linear-gradient(110deg,var(--lvl-family-accent-strong),var(--lvl-family-accent-bright))!important;
  box-shadow:0 16px 34px rgba(68,75,183,.24)!important;
}

[data-ui="session-start"]{background:linear-gradient(110deg,var(--lvl-family-accent-strong),var(--lvl-family-accent-bright))!important}
[data-ui="home-greeting"] h1 b,[data-ui="home-greeting"] [data-ui="eyebrow"]{color:var(--lvl-family-accent)!important}
[data-ui="session-week"] span[data-active="true"] i{background:var(--lvl-family-accent)!important;box-shadow:0 5px 12px rgba(93,99,216,.24)!important}

@media (min-width:1024px){
  html[data-theme="light"] body{
    background:radial-gradient(circle at 66% 1%,rgba(107,114,225,.12),transparent 35%),var(--lvl-family-canvas)!important;
  }
  html[data-theme="dark"] body{
    background:radial-gradient(circle at 66% 1%,rgba(116,123,240,.13),transparent 37%),var(--lvl-family-canvas)!important;
  }

  [data-ui="dock"]{
    border-color:var(--lvl-family-line)!important;
    background:color-mix(in srgb,var(--lvl-family-panel) 92%,transparent)!important;
    box-shadow:var(--lvl-family-shadow)!important;
  }
  [data-ui="dock-button"]{border-radius:17px!important;color:var(--lvl-family-muted)!important}
  [data-ui="dock-button"][data-active="true"]{
    border-color:color-mix(in srgb,var(--lvl-family-accent) 45%,transparent)!important;
    background:var(--lvl-family-accent-soft)!important;
    color:var(--lvl-family-accent-strong)!important;
    box-shadow:none!important;
  }

  [data-ui="view"][data-active="true"]{max-width:1120px!important;padding:26px 0 84px!important}
  [data-view="home"][data-active="true"]{padding-top:0!important}
  [data-ui="page-heading"]{padding:34px 0 30px!important}
  [data-ui="page-heading"]::after{display:none!important}
  [data-ui="page-heading"] [data-ui="eyebrow"]{color:var(--lvl-family-accent)!important}
  [data-ui="page-heading"] h1{margin:12px 0 8px!important;color:var(--lvl-family-ink)!important;font-size:clamp(48px,4.4vw,64px)!important;line-height:.96!important;letter-spacing:-.06em!important}
  [data-ui="page-heading"] p{max-width:660px!important;color:var(--lvl-family-muted)!important;font-size:16px!important;line-height:1.55!important}
  [data-ui="section-title"] h2{color:var(--lvl-family-ink)!important;font-size:28px!important;letter-spacing:-.045em!important}

  /* Courses: a clear learning path, not a collection of boxes. */
  [data-view="courses"][data-active="true"]{display:grid!important;grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr)!important;gap:22px 24px!important;align-items:start!important}
  [data-view="courses"]>[data-ui="page-heading"]{grid-column:1/-1!important}
  [data-view="courses"]>[data-ui="current-course"]{
    grid-column:1!important;min-height:190px!important;padding:30px!important;border:0!important;border-radius:34px!important;
    background:linear-gradient(125deg,#30376f 0%,var(--lvl-family-accent-strong) 58%,var(--lvl-family-accent-bright) 100%)!important;
    box-shadow:0 22px 44px rgba(54,61,145,.20)!important;
  }
  [data-ui="current-course"] strong{font-size:24px!important;letter-spacing:-.025em!important}
  [data-ui="current-course"] small,[data-ui="current-course"] p{color:rgba(255,255,255,.74)!important;font-size:11px!important}
  [data-ui="current-course-action"] button{min-height:44px!important;padding:0 18px!important;border-radius:14px!important;color:var(--lvl-family-accent-strong)!important;font-size:11px!important}
  [data-view="courses"]>[data-ui="course-tools"]{
    grid-column:2!important;min-height:190px!important;margin:0!important;padding:20px!important;border:1px solid var(--lvl-family-line)!important;border-radius:30px!important;
    background:color-mix(in srgb,var(--lvl-family-panel) 88%,transparent)!important;box-shadow:var(--lvl-family-shadow)!important;
  }
  [data-ui="search"]{min-height:52px!important;border-radius:17px!important;background:var(--lvl-family-panel)!important}
  [data-ui="chips"]{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:11px!important}
  [data-ui="chip"]{min-height:39px!important;border:1px solid var(--lvl-family-line)!important;border-radius:999px!important;background:transparent!important;color:var(--lvl-family-muted)!important}
  [data-ui="chip"][data-active="true"]{border-color:transparent!important;background:var(--lvl-family-accent)!important;color:#fff!important}
  [data-view="courses"]>[data-ui="course-section"]{grid-column:1/-1!important;padding-top:10px!important}
  [data-ui="language-programs"],[data-ui="course-stack"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  [data-ui="language-program-card"],[data-ui="course-list-card"]{
    min-height:128px!important;padding:22px!important;border:1px solid var(--lvl-family-line)!important;border-radius:26px!important;
    background:color-mix(in srgb,var(--lvl-family-panel) 92%,transparent)!important;box-shadow:none!important;
  }
  [data-ui="language-program-card"]::before,[data-ui="course-list-card"]::before{display:none!important}
  [data-ui="language-program-card"]:hover,[data-ui="course-list-card"]:hover{transform:translateY(-3px)!important;border-color:color-mix(in srgb,var(--lvl-family-accent) 44%,transparent)!important;box-shadow:var(--lvl-family-shadow)!important}

  /* Arena: the same soft three-part language used by Home. */
  [data-view="arena"]>[data-ui="arena-hero"]{
    min-height:240px!important;margin:0!important;padding:38px!important;border:1px solid var(--lvl-family-line)!important;border-radius:38px!important;
    background:linear-gradient(135deg,var(--lvl-family-accent-soft),color-mix(in srgb,var(--lvl-family-blue) 72%,var(--lvl-family-panel)))!important;
    color:var(--lvl-family-ink)!important;box-shadow:none!important;
  }
  [data-ui="arena-hero"]::before{background:radial-gradient(circle,rgba(119,125,240,.18),transparent 68%)!important}
  [data-ui="arena-hero"] [data-ui="eyebrow"]{color:var(--lvl-family-accent)!important}
  [data-ui="arena-hero"] h1{max-width:720px!important;color:var(--lvl-family-ink)!important;font-size:50px!important;line-height:.98!important;letter-spacing:-.055em!important}
  [data-ui="arena-hero"] p{max-width:640px!important;color:var(--lvl-family-muted)!important;font-size:16px!important}
  [data-ui="arena-mark"]{background:var(--lvl-family-accent)!important;box-shadow:0 18px 32px rgba(68,75,183,.22)!important}
  [data-ui="arena-stats"]{gap:12px!important;margin-top:16px!important}
  [data-ui="arena-stats"]>div{min-height:104px!important;padding:20px!important;border:1px solid var(--lvl-family-line)!important;border-radius:24px!important;background:var(--lvl-family-panel)!important;box-shadow:none!important}
  [data-ui="training-focus"]{margin-top:16px!important;padding:22px 24px!important;border:1px solid var(--lvl-family-line)!important;border-radius:26px!important;background:var(--lvl-family-panel-soft)!important;box-shadow:none!important}
  [data-ui="training-focus"] button{border-radius:999px!important;background:var(--lvl-family-panel)!important;color:var(--lvl-family-accent-strong)!important}
  [data-ui="arena-cards"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;margin-top:20px!important;border-radius:34px!important;overflow:hidden!important;box-shadow:var(--lvl-family-shadow)!important}
  [data-ui="arena-cards"] button{min-height:245px!important;padding:28px!important;border:0!important;border-radius:34px!important;grid-template-columns:58px minmax(0,1fr) 18px!important;grid-template-rows:1fr!important;align-content:center!important;box-shadow:none!important}
  [data-ui="arena-cards"] button:nth-child(1){background:var(--lvl-family-blue)!important}
  [data-ui="arena-cards"] button:nth-child(2){background:var(--lvl-family-mint)!important}
  [data-ui="arena-cards"] button:nth-child(3){background:var(--lvl-family-coral)!important}
  [data-ui="arena-cards"] button::after{display:none!important}
  [data-ui="arena-cards"] button>span{width:58px!important;height:58px!important;border-radius:20px!important;background:color-mix(in srgb,var(--lvl-family-panel) 64%,transparent)!important;color:var(--lvl-family-accent)!important}
  [data-ui="arena-cards"] button>span{grid-column:1!important;grid-row:1!important;align-self:center!important}
  [data-ui="arena-cards"] button>div{grid-column:2!important;grid-row:1!important;align-self:center!important;min-width:0!important}
  [data-ui="arena-cards"] button>b{grid-column:3!important;grid-row:1!important;align-self:center!important}
  [data-ui="arena-cards"] strong{font-size:18px!important;color:var(--lvl-family-ink)!important}
  [data-ui="arena-cards"] p,[data-ui="arena-cards"] em,[data-ui="arena-cards"] small{color:var(--lvl-family-muted)!important}
  [data-ui="life-situations"]{margin-top:20px!important;padding:26px!important;border:1px solid var(--lvl-family-line)!important;border-radius:32px!important;background:color-mix(in srgb,var(--lvl-family-panel) 86%,transparent)!important;box-shadow:none!important}
  [data-ui="life-situations"]>div{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  [data-ui="life-situations"] button{min-height:94px!important;padding:14px!important;border-color:var(--lvl-family-line)!important;border-radius:20px!important;background:var(--lvl-family-panel-soft)!important}

  /* Community: welcoming and social without looking like an admin panel. */
  [data-view="community"]>[data-ui="community-feature"]{
    min-height:190px!important;padding:32px!important;border:0!important;border-radius:34px!important;
    background:linear-gradient(125deg,#31386f,var(--lvl-family-accent-strong) 62%,var(--lvl-family-accent-bright))!important;
    box-shadow:0 22px 44px rgba(54,61,145,.18)!important;
  }
  [data-ui="community-feature"] strong{font-size:28px!important;letter-spacing:-.035em!important}
  [data-ui="community-feature"] p{max-width:620px!important;color:rgba(255,255,255,.76)!important;font-size:14px!important}
  [data-ui="community-feature"] button{min-height:46px!important;padding:0 20px!important;border-radius:999px!important;color:var(--lvl-family-accent-strong)!important}
  [data-ui="community-tabs"]{margin-top:18px!important;padding:6px!important;border:1px solid var(--lvl-family-line)!important;border-radius:20px!important;background:var(--lvl-family-panel-soft)!important;box-shadow:none!important}
  [data-ui="community-tabs"] button{min-height:44px!important;border-radius:15px!important;color:var(--lvl-family-muted)!important;font-size:11px!important}
  [data-ui="community-tabs"] button[data-active="true"]{background:var(--lvl-family-panel)!important;color:var(--lvl-family-accent-strong)!important;box-shadow:0 6px 16px rgba(45,49,105,.08)!important}
  [data-ui="room-list"],[data-ui="friend-list"],[data-ui="request-list"]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin:18px 0!important}
  [data-ui="room-row"],[data-ui="friend-row"],[data-ui="request-row"],[data-ui="discovery-card"]{min-height:104px!important;padding:18px!important;border:1px solid var(--lvl-family-line)!important;border-radius:24px!important;background:var(--lvl-family-panel)!important;box-shadow:none!important}

  /* Profile: human, clear and consistent with the learning experience. */
  [data-view="profile"]>[data-ui="profile-hero"]{
    min-height:210px!important;padding:34px!important;border:0!important;border-radius:38px!important;
    background:linear-gradient(125deg,#30376f,var(--lvl-family-accent-strong) 62%,var(--lvl-family-accent-bright))!important;
    box-shadow:0 22px 44px rgba(54,61,145,.18)!important;
  }
  [data-ui="profile-hero"] h1{font-size:42px!important}
  [data-ui="profile-hero"]::after{color:rgba(255,255,255,.045)!important}
  [data-ui="profile-metrics"]{gap:12px!important;margin-top:16px!important}
  [data-ui="profile-metrics"]>div{min-height:112px!important;padding:20px!important;border:1px solid var(--lvl-family-line)!important;border-radius:24px!important;background:var(--lvl-family-panel)!important;box-shadow:none!important}
  [data-ui="profile-metrics"]>div::before{display:none!important}
  [data-view="profile"]>[data-ui="section-block"]{margin-top:28px!important}
  [data-ui="profile-list"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  [data-ui="profile-link"]{min-height:112px!important;padding:18px!important;border:1px solid var(--lvl-family-line)!important;border-radius:24px!important;background:var(--lvl-family-panel)!important;box-shadow:none!important}
  [data-ui="profile-link"]>span{width:46px!important;height:46px!important;border-radius:16px!important;background:var(--lvl-family-accent-soft)!important;color:var(--lvl-family-accent)!important}
  [data-ui="profile-link"]:hover{transform:translateY(-3px)!important;border-color:color-mix(in srgb,var(--lvl-family-accent) 42%,transparent)!important;box-shadow:var(--lvl-family-shadow)!important}
  [data-ui="logout"]{margin-top:14px!important;border-color:rgba(196,74,89,.16)!important;border-radius:20px!important;background:color-mix(in srgb,var(--lvl-family-coral) 55%,var(--lvl-family-panel))!important}

  /* Translator and utility pages inherit the same friendly editorial surfaces. */
  [data-view="translator"]>[data-ui="coming-soon-panel"]{
    min-height:360px!important;margin-top:0!important;padding:48px!important;border:1px solid var(--lvl-family-line)!important;border-radius:38px!important;
    background:linear-gradient(145deg,var(--lvl-family-accent-soft),var(--lvl-family-blue))!important;box-shadow:none!important;display:grid!important;place-content:center!important;
  }
  [data-ui="coming-soon-panel"]>span{width:82px!important;height:82px!important;border-radius:28px!important;background:var(--lvl-family-panel)!important;color:var(--lvl-family-accent)!important}
  [data-ui="coming-soon-panel"] strong{font-size:28px!important;color:var(--lvl-family-ink)!important}
  [data-ui="coming-soon-panel"] small{font-size:13px!important;color:var(--lvl-family-muted)!important}
  [data-ui="subpage-head"],[data-ui="settings-card"],[data-ui="security-overview"],[data-ui="security-list"],[data-ui="support-chat"],[data-ui="billing-card"]{border-color:var(--lvl-family-line)!important}
  [data-ui="settings-card"],[data-ui="security-overview"],[data-ui="security-list"],[data-ui="support-chat"],[data-ui="billing-card"]{border-radius:28px!important;background:var(--lvl-family-panel)!important;box-shadow:none!important}

  /* Win over legacy theme-specific fills without changing their behavior. */
  html:root body #app[data-ui="app"] [data-view="courses"]>[data-ui="current-course"]{
    background:linear-gradient(125deg,#30376f 0%,var(--lvl-family-accent-strong) 58%,var(--lvl-family-accent-bright) 100%)!important;
  }
  html:root body #app[data-ui="app"] [data-ui="language-program-card"],
  html:root body #app[data-ui="app"] [data-ui="course-list-card"],
  html:root body #app[data-ui="app"] [data-ui="room-row"],
  html:root body #app[data-ui="app"] [data-ui="friend-row"],
  html:root body #app[data-ui="app"] [data-ui="request-row"],
  html:root body #app[data-ui="app"] [data-ui="profile-metrics"]>div,
  html:root body #app[data-ui="app"] [data-ui="profile-link"]{background:var(--lvl-family-panel)!important;border-color:var(--lvl-family-line)!important}
  html:root body #app[data-ui="app"] [data-ui="arena-stats"]>div{background:var(--lvl-family-panel)!important;border-color:var(--lvl-family-line)!important}
  html:root body #app[data-ui="app"] [data-ui="empty-panel"]{background:var(--lvl-family-panel)!important;border-color:var(--lvl-family-line)!important;box-shadow:none!important}
  html:root body #app[data-ui="app"] [data-ui="chip"][data-active="true"]{background:var(--lvl-family-accent)!important;color:#fff!important}
  html:root body #app[data-ui="app"] [data-view="arena"]>[data-ui="arena-hero"]{
    background:linear-gradient(135deg,var(--lvl-family-accent-soft),color-mix(in srgb,var(--lvl-family-blue) 72%,var(--lvl-family-panel)))!important;
    color:var(--lvl-family-ink)!important;
  }
  html:root body #app[data-ui="app"] [data-ui="arena-cards"] button:nth-child(1){background:var(--lvl-family-blue)!important}
  html:root body #app[data-ui="app"] [data-ui="arena-cards"] button:nth-child(2){background:var(--lvl-family-mint)!important}
  html:root body #app[data-ui="app"] [data-ui="arena-cards"] button:nth-child(3){background:var(--lvl-family-coral)!important}
  html:root body #app[data-ui="app"] [data-view="community"]>[data-ui="community-feature"],
  html:root body #app[data-ui="app"] [data-view="profile"]>[data-ui="profile-hero"]{
    background:linear-gradient(125deg,#30376f,var(--lvl-family-accent-strong) 62%,var(--lvl-family-accent-bright))!important;
  }
  html:root body #app[data-ui="app"] [data-ui="community-tabs"]{background:var(--lvl-family-panel-soft)!important;border-color:var(--lvl-family-line)!important}
  html:root body #app[data-ui="app"] [data-ui="community-tabs"] button{background:transparent!important;color:var(--lvl-family-muted)!important}
  html:root body #app[data-ui="app"] [data-ui="community-tabs"] button[data-active="true"]{background:var(--lvl-family-panel)!important;color:var(--lvl-family-accent-strong)!important}
  html:root body #app[data-ui="app"] [data-view="translator"]>[data-ui="coming-soon-panel"]{background:linear-gradient(145deg,var(--lvl-family-accent-soft),var(--lvl-family-blue))!important}
}

@media (max-width:1023px){
  /* Keep the approved mobile structure; only the calmer accent palette changes. */
  [data-ui="dock-button"][data-active="true"]{color:var(--lvl-family-accent)!important}
}

@media (prefers-reduced-motion:reduce){
  [data-ui="language-program-card"],[data-ui="course-list-card"],[data-ui="profile-link"]{transition:none!important}
}