/* Shared geometry: main cards/actions and secondary controls/dividers.
 * Raised controls derive their lower edge from the corresponding outline + 1px.
 * Zero, inherited corners and decorative shapes are structural exceptions. */
:root {
    --border-primary: 3px;
    --border-secondary: 2px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-control: 14px;
    --radius-lg: 18px;
    --radius-xl: 20px;
    --radius-pill: 999px;
}
@media (max-width: 620px) {
    :root {
        --border-primary: 2px;
        --border-secondary: 1px;
        --radius-control: 12px;
    }
}

:root {
    --app-header-height: 50px;
    /* One project palette. UI consumes roles below; content palettes are separate. */
    --palette-white: #fff;
    --palette-black: #000;
    --palette-secondary: #78848D;
    --palette-tertiary: #9EAAB3;
    --palette-surface-subtle: #F3F5F7;
    --palette-active: #E4E8EC;
    --palette-blue: #007BFF;
    --palette-blue-soft: #EDF6FF;
    --palette-purple: #5856D6;
    --palette-green: #008F00;
    --palette-green-soft: #E5F5E5;
    --palette-red: #FF0A5F;
    --palette-red-soft: #FEF1F2;
    --palette-orange: #FF6A00;
    --palette-orange-soft: #FFF3EA;
    --palette-pink: #FFA0BF;

    --color-canvas: var(--palette-white);
    --color-surface: var(--palette-white);
    --color-on-action: var(--palette-white);
    --color-surface-subtle: var(--palette-surface-subtle);
    --color-text-primary: var(--palette-black);
    --color-text-secondary: var(--palette-secondary);
    --color-text-tertiary: var(--palette-tertiary);
    --color-text-disabled: var(--palette-tertiary);
    --color-border-default: var(--palette-active);
    --color-control-fill: var(--palette-active);
    --color-brand: var(--palette-blue);
    --color-action: var(--palette-blue);
    --color-action-soft: var(--palette-blue-soft);
    --color-focus-ring: var(--palette-blue);
    --color-success-text: var(--palette-green);
    --color-success-action: var(--palette-green);
    --color-success-soft: var(--palette-green-soft);
    --color-danger-text: var(--palette-red);
    --color-danger-action: var(--palette-red);
    --color-danger-soft: var(--palette-red-soft);
    --color-favorite: var(--palette-red);
    --color-warning: var(--palette-orange);
    --color-warning-soft: var(--palette-orange-soft);
    --color-accent: var(--palette-purple);
    --color-accent-soft: rgba(88, 86, 214, 0.2);
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-7: 14px;
    --space-8: 16px;
    --space-10: 20px;
    --space-12: 24px;

    --control-touch: 44px;
    --control-large: 52px;
    --control-xlarge: 56px;
    --control-tile: 64px;

    --app-range-track-height: 16px;
    --app-range-thumb-size: 34px;
    --app-switch-width: 44px;
    --app-switch-height: 30px;
    --app-switch-track-width: 40px;
    --app-switch-track-height: 18px;
    --app-switch-thumb-size: 30px;
    --app-switch-thumb-travel: 14px;

    --duration-fast: 120ms;
    --duration-standard: 160ms;
    --duration-emphasized: 200ms;
    --ease-standard: ease;
    --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.2);
    --layer-raised: 10;
    --layer-dock: 1000;

    --app-page-content-width: 960px;
    --app-dock-content-width: 640px;
}
/* Shared text roles: one token owns weight, size, leading and family.
 * This foundation has no global element reset, so isolated admin pages can load it.
 * Use font: var(--text-body), or a type-* class. Do not add per-route aliases.
 * Icon dimensions and measured Japanese glyphs are not interface text roles. */
:root {
    --text-micro: 400 11px/14px system-ui, -apple-system, sans-serif;
    --text-caption: 400 13px/18px system-ui, -apple-system, sans-serif;
    --text-small: 400 15px/20px system-ui, -apple-system, sans-serif;
    --text-body: 400 17px/24px system-ui, -apple-system, sans-serif;
    --text-reading: 400 20px/32px system-ui, -apple-system, sans-serif;
    --text-subtitle: 400 20px/26px system-ui, -apple-system, sans-serif;
    --text-heading-sm: 700 24px/30px system-ui, -apple-system, sans-serif;
    --text-heading: 700 28px/34px system-ui, -apple-system, sans-serif;
    --text-display: 700 36px/42px system-ui, -apple-system, sans-serif;
}

.type-micro { font: var(--text-micro); }
.type-caption { font: var(--text-caption); }
.type-small { font: var(--text-small); }
.type-body { font: var(--text-body); }
.type-reading { font: var(--text-reading); }
.type-subtitle { font: var(--text-subtitle); }
.type-heading-sm { font: var(--text-heading-sm); }
.type-heading { font: var(--text-heading); }
.type-display { font: var(--text-display); }

@media (max-width: 620px) {
    :root {
        --text-heading: 700 24px/30px system-ui, -apple-system, sans-serif;
        --text-display: 700 28px/34px system-ui, -apple-system, sans-serif;
    }
}
/* Only a stale direct-entry page receives this class. The normal path does
   not make a request and remains visible. */
html.client-time-zone-syncing body {
    visibility: hidden;
    pointer-events: none;
}

* {
      padding: 0;
      margin: 0;
      color: var(--color-text-primary);
      text-decoration: none;
      box-sizing: border-box;
  }
  html, body {
    height: fit-content;
    width: 100vw;
    margin: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: var(--color-text-primary);
    font: var(--text-body);
    gap: 8px;
    overflow-x: hidden;
    background: var(--color-canvas);
    padding: 0 0 60px 0;
  }
   body::selection {
   background-color: var(--color-brand);
   color: var(--color-on-action);
   }

 .wrapper {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      padding: 0 12px;
      gap: 12px;
      max-width: var(--app-page-content-width);
      height: fit-content;
  }
    /************** FONTS FADES **************/
.secondary { opacity: 0.8; }
.thirdly { opacity: 0.6; }
.fourthly { opacity: 0.4; }
     /************** TEXT ALIGN **************/
.text-centered { text-align: center; }
  /************** FONTS **************/
    .text-regular {
        font: var(--text-body);
        color: inherit;
    }
    .text-bold {
        font: var(--text-body);
        color: inherit;
    }
    .text-main {
        font: var(--text-subtitle);
        color: inherit;
    }
    .text-main-center {
        font: var(--text-subtitle);
        color: inherit;
        width: 100%;
        text-align: center;
    }

    .text-head {
        font: var(--text-display);
        text-align: center;
        color: inherit;
    }

    .text-title {
        font: var(--text-heading);
        color: inherit;
    }
    .text-caption {
        font: var(--text-caption);
        color: inherit;
    }


/* Default semantic elements share the same roles as explicit utilities. */
:where(h1) { font: var(--text-heading-sm); }
:where(h2) { font: var(--text-heading-sm); }
:where(h3, h4, h5, h6) { font: var(--text-subtitle); }
:where(strong, b) { font-weight: 400; }
:where(button, input, select, textarea) { font: inherit; }
:where(h1, h2, h3, h4, h5, h6) :where(strong, b) { font-weight: inherit; }
  /************** LOBBY HEADER **************/
  .character {
  display: flex;
  width: 100%;
  height: auto;
  object-fit: contain;
  }
    /************** CONTAINERS **************/
   .pie {
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      width: inherit;
      height: fit-content;
      border-radius: var(--radius-xl, 20px);
  }
   @media (max-width: 604px) {
    .pie {  background: none; padding: 0px;  }
   }

  .pie-container {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
      align-items: flex-start;
      width: inherit;
      height: fit-content;
      padding: 20px;
      gap: 12px;
      background: var(--color-surface-subtle, #F3F5F7);
      border-radius: var(--radius-xl, 20px);
  }
  .pie-container-additional {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
      align-items: flex-start;
      width: inherit;
      height: fit-content;
      padding: 20px;
      gap: 12px;
      background: var(--color-surface-subtle, #F3F5F7);
      border-radius: var(--radius-xl, 20px);
  }
   @media (max-width: 604px) {
    .pie-container-additional,
    .pie-container {   padding: 16px;  }
   }
   .settings-step-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
      align-items: flex-start;
      width: inherit;
      height: fit-content;
      padding: 16px 0;
      gap: 16px;
  }

  .settings-menu {
      gap: 8px;
      width: 100%;
  }

  .settings-menu[hidden] {
      display: none !important;
  }

  .settings-menu:not([hidden]) {
      animation: settings-panel-in 280ms ease-out both;
  }

  @keyframes settings-panel-in {
      from {
          opacity: 0;
          transform: translateY(-12px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @media (prefers-reduced-motion: reduce) {
      .settings-menu:not([hidden]) {
          animation: none;
      }
  }

  .settings-menu > .text-main-center {
      padding: 8px 8px 20px 8px;
  }

  .settings-menu .settings-step-wrapper {
      width: 100%;
      padding: 16px 2px;
  }

  .settings-menu .settings-step-wrapper .column-wrapper {
      align-items: flex-start;
      gap: 0px;
  }

  .settings-menu > .settings-step-wrapper > output {
      color: var(--color-action, #007BFF);
  }

  .settings-menu output {
      display: block;
  }

  .settings-menu-actions {
      gap: 6px;
  }

  .settings-menu .btn[hidden],
  .settings-status[hidden] {
      display: none;
  }

  .settings-menu .btn:disabled,
  .settings-menu input:disabled {
      cursor: wait;
      opacity: 0.6;
  }

  .settings-status {
      width: 100%;
      padding: 4px 12px;
      color: var(--color-text-secondary, #78848D);
      text-align: center;
  }

  .settings-status.is-error {
      color: var(--color-danger-text, #FF0A5F);
  }
  .row-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 6px;
  }
  .column-wrapper {
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6px;
  }

  .empty-state {
      padding: 24px 12px;
      text-align: center;
  }

  .empty-state-cover {
      display: block;
      width: 100%;
      max-width: 180px;
      aspect-ratio: 2 / 3;
      object-fit: contain;
  }
  /************** ITEMS **************/

   .word {
      cursor: pointer;
      width: inherit;
      height: fit-content;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      min-height: 100px;
      gap: 16px;
      padding: 12px;
      border-radius: var(--radius-control, 14px);
      border: var(--border-secondary, 2px) solid var(--color-border-default, #E4E8EC);
      transition: all .2s ease;
  }

  .lesson {
      cursor: pointer;
      width: inherit;
      height: 78px;
      min-height: 78px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 16px;
      padding: 12px 0;
      transition: all .2s ease;
  }
  .task {
      cursor: pointer;
      width: inherit;
      height: 64px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 16px;
      transition: all .2s ease;
  }
  .lesson:hover,
  .task:hover { padding: 0 0 0 16px; }
  .line-about {
      display: flex;
      width: inherit;
      height: 100%;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: var(--border-secondary, 2px) solid var(--color-border-default, #E4E8EC);
  }
  .lesson > .line-about {
      min-height: 78px;
  }
  .task:last-child .line-about { border-bottom: none; }
  .lesson:last-child .line-about { border-bottom: none; }
  .line-info {
      display: flex;
      flex-direction: column;
  }
  .line-info-word {
      display: flex;
      flex-direction: column;
      gap: 4px;
  }
  .line-info-word > .chip {
      padding: 10px 0 0 0;
  }
  /************** CHIP **************/
  .chip {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 4px;
      font: var(--text-caption);
  }
  .chip-bold {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 4px;
      font: var(--text-body);
  }
  .chip-regular {
    color: var(--color-text-secondary, #78848D);
  }
  .chip-primary {
    color: var(--color-action, #007BFF);
  }
  .chip-streak-active {
    color: var(--color-warning, #FF6A00);
  }
  .chip-streak-active > span {
    color: var(--color-warning, #FF6A00);
  }
  .chip-streak-paused {
      color: var(--color-text-secondary, #78848D)
  }
  .chip-streak-paused > span {
      color: var(--color-text-secondary, #78848D)
  }
  .chip-mistake{
    color: var(--color-danger-text, #FF0A5F);
  }

/* Native focus rings are disabled in the normal theme. Authored state/error
   styles and the high-contrast keyboard indicator remain independent. */
@media (forced-colors: none) {
    :where(:focus, :focus-visible) { outline: none; }
}

@media (forced-colors: active) {
    :where(:focus-visible) {
        outline: var(--border-primary, 3px) solid Highlight;
        outline-offset: 2px;
    }
    :where(
        .find-search-form.saved-search-form:focus-within,
        .arena-hints-dock:focus-within,
        .app-range:has(.app-range__input:focus-visible),
        .range-control:has(.daily-minutes-range:focus-visible),
        .profile-kana-option input:focus-visible + span,
        .kanji-vision-mode-grid label:has(input:focus-visible),
        .kana-vision-choice:has(input:focus-visible),
        .kana-vision-mode-choice:has(input:focus-visible),
        .arena-page .arena-filter-track > label:has(input:focus-visible)
    ) {
        outline: var(--border-primary, 3px) solid Highlight;
        outline-offset: 2px;
    }
    .app-switch-input:focus-visible + .app-switch::after {
        outline: var(--border-primary, 3px) solid Highlight;
        outline-offset: 3px;
    }
}

/* Tile/local-popover close control: shared with the Home tile panels.
   Legacy aliases share the component; new markup may use .app-tile-close.
   Important declarations protect its geometry from older page-specific rules.
   Position/margins, destructive trash actions and page-header controls stay local. */
:is(
    .app-tile-close,
    .app-popover__close,
    .home-today-details__close,
    .dates-panel-close,
    .practice-session-tile__details-close,
    .find-magazine-info__close,
    .arena-mode-details__close,
    .saved-memory-tile__remove,
    .find-kanji-dock-close,
    [data-read-help-close],
    .tutorial-read-chapter-info-close,
    .tutorial-local-hint__close,
    .jp-unit-popover-close,
    .stats-record-popover__close
):not([hidden]) {
    display: grid !important;
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 32px !important;
    place-items: center !important;
    padding: 6px !important;
    border: 0 !important;
    border-radius: var(--radius-sm, 10px) !important;
    background: transparent !important;
    color: var(--color-text-primary, #000) !important;
    box-shadow: none !important;
    cursor: pointer;
    touch-action: manipulation;
}
:is(
    .app-tile-close,
    .app-popover__close,
    .home-today-details__close,
    .dates-panel-close,
    .practice-session-tile__details-close,
    .find-magazine-info__close,
    .arena-mode-details__close,
    .saved-memory-tile__remove,
    .find-kanji-dock-close,
    [data-read-help-close],
    .tutorial-read-chapter-info-close,
    .tutorial-local-hint__close,
    .jp-unit-popover-close,
    .stats-record-popover__close
) > .icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 20px !important;
    font-size: 20px !important;
    color: inherit !important;
    opacity: 1 !important;
}
@media (hover: hover) {
    :is(
    .app-tile-close,
    .app-popover__close,
    .home-today-details__close,
    .dates-panel-close,
    .practice-session-tile__details-close,
    .find-magazine-info__close,
    .arena-mode-details__close,
    .saved-memory-tile__remove,
    .find-kanji-dock-close,
    [data-read-help-close],
    .tutorial-read-chapter-info-close,
    .tutorial-local-hint__close,
    .jp-unit-popover-close,
    .stats-record-popover__close
):hover {
        background: var(--color-surface-subtle, #F3F5F7) !important;
    }
}
@media (forced-colors: active) {
    :is(
    .app-tile-close,
    .app-popover__close,
    .home-today-details__close,
    .dates-panel-close,
    .practice-session-tile__details-close,
    .find-magazine-info__close,
    .arena-mode-details__close,
    .saved-memory-tile__remove,
    .find-kanji-dock-close,
    [data-read-help-close],
    .tutorial-read-chapter-info-close,
    .tutorial-local-hint__close,
    .jp-unit-popover-close,
    .stats-record-popover__close
):not([hidden]) {
        color: ButtonText !important;
        background: Canvas !important;
    }
}
/* Surface contracts use the Home streak/tile panels as the visual reference.
 * Adapters own placement, content width, focus and modal behavior. */
.app-popover,
.app-surface--floating,
.app-surface--modal,
.learning-tile__action::after,
.learning-tile__footer-action[data-tooltip]::after {
    box-sizing: border-box;
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: var(--space-8);
    overflow: auto;
    overscroll-behavior: contain;
    border: var(--border-secondary, 2px) solid var(--color-border-default, #E4E8EC);
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #000);
    box-shadow: var(--shadow-popover);
    font: var(--text-caption);
    overflow-wrap: anywhere;
}

.app-popover {
    position: fixed;
    width: min(280px, calc(100vw - 24px));
}

/* Tile panels keep their owner's geometry and scroll inside their own bounds. */
.app-surface--inset {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    padding: var(--space-4);
    overflow: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: inherit;
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #000);
    box-shadow: none;
    font: var(--text-caption);
    overflow-wrap: anywhere;
}

:is(.app-popover, .app-surface--floating, .app-surface--inset, .app-surface--modal)[hidden] {
    display: none !important;
}

/* Shared close geometry and interaction live in components/close.css. */
.app-popover__close {
    position: absolute;
    top: 6px;
    right: 6px;
}

@media (forced-colors: active) {
    .app-popover,
    .app-surface--floating,
    .app-surface--modal {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }
    .app-surface--inset { background: Canvas; color: CanvasText; }
}

.app-popover__title {
    min-height: 28px;
    margin: 0 42px 2px 0;
    color: var(--color-text-primary, #000);
    font: var(--text-body);
    overflow-wrap: anywhere;
}

.app-popover__detail {
    margin: 0;
    color: var(--color-text-secondary, #78848D);
    font: var(--text-caption);
    overflow-wrap: anywhere;
}

.app-popover__detail[hidden] {
    display: none;
}

.app-popover__actions {
    display: grid;
    gap: 6px;
}

.app-popover__action {
    appearance: none;
    display: grid;
    width: 100%;
    min-height: var(--control-touch);
    place-items: center;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface-subtle);
    color: var(--color-text-primary, #000);
    cursor: pointer;
    font: var(--text-caption);
    text-align: center;
    text-decoration: none;
}

.app-popover__action.is-primary {
    background: var(--color-brand);
    color: var(--color-on-action, #fff);
}

.app-popover__action[aria-disabled="true"],
.app-popover__action:disabled,
.app-popover__close:disabled {
    cursor: default;
    opacity: 0.6;
}

  /************** HEADER **************/

/* Page-header search/close controls. Card and list delete actions are separate. */
:is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-close, .icon-search)) {
    box-sizing: border-box;
    appearance: none;
    display: inline-flex;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 0;
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface, #fff);
    color: var(--color-text-primary, #000);
    box-shadow: none;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    transform: var(--header-action-transform, none);
    transition: background-color 120ms ease;
    touch-action: manipulation;
}

.home-route-header > .home-route-header-action:has(> .icon-close) {
    --header-action-transform: translateY(-50%);
}

:is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-close, .icon-search)) > .icon {
    display: block;
    flex: 0 0 24px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    color: inherit;
    font-size: 24px;
    pointer-events: none;
}

/* Match the Home header icons without resizing buttons, tiles or the dock. */
.head-lesson .card-audio-autoplay-toggle > .icon-audio {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.head-lesson .card-audio-autoplay-toggle > .card-audio-autoplay-toggle__slash {
    width: calc(24px * 25 / 22);
}

@media (min-width: 769px) {
    :is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-close, .icon-search)) {
        padding: 7.6px;
    }

    :is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-close, .icon-search)) > .icon {
        flex: 0 0 28.8px;
        width: 28.8px;
        min-width: 28.8px;
        height: 28.8px;
        min-height: 28.8px;
        font-size: 28.8px;
    }

    .head-lesson .card-audio-autoplay-toggle > .icon-audio {
        width: 28.8px;
        height: 28.8px;
        font-size: 28.8px;
    }

    .head-lesson .card-audio-autoplay-toggle > .card-audio-autoplay-toggle__slash {
        width: calc(28.8px * 25 / 22);
    }
}

@media (hover: hover) {
    :is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-close, .icon-search)):not(:disabled):hover {
        background: var(--color-surface-subtle, #F3F5F7);
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-close, .icon-search)) {
        transition: none;
    }
}

@media (forced-colors: active) {
    :is(.library-page-header, .home-route-header, .arena-heading, .arena-hud, .dates-wizard-page-header, .head-lesson) > .home-route-header-action:has(> :is(.icon-close, .icon-search)) {
        background: Canvas;
        color: ButtonText;
    }
}
 .head {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: var(--app-page-content-width);
      padding: 0 20px;
      border-bottom: 0 solid var(--color-border-default, #E4E8EC);
      height: 70px;
  }
  .logo {
      height: 40px;
      width: auto;
  }
   @media (max-width: 604px) {
   .head { justify-content: center; height: 60px; }
    .logo {  height: 36px; }
   }
   @media (max-width: 351px) {
   .head { justify-content: center; height: 50px; }
    .logo {  height: 32px; }
   }
  .menu {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: fit-content;
      gap: 28px;
  }
  @media (max-width: 604px) {

   .menu {
    position: fixed;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    z-index: 999;
    width: 100%;
    bottom: 0;
    left: 0;
    background: var(--color-surface, #fff);
    height: fit-content;
    padding: 12px 20px 20px 20px;
    gap: 6px;
    border-top: var(--border-secondary, 2px) solid var(--color-border-default, #E4E8EC);
    }

}

  /************** BUTTONS **************/

.btn{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-control, 14px);
    font-weight: 400;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-10);
    cursor: pointer;
    width: 100%;
    transition: opacity var(--duration-fast) ease-in;
    user-select: none;
}

/* When both legacy size classes occur, .btn retains its established priority. */
.btn {
    font: var(--text-body);
    min-height: var(--control-xlarge);
    outline: none;
    border: none;
}

.btn:hover{ opacity: 0.8; }

@media (max-width: 351px) {
     .btn {    min-height: 50px;  gap: 4px; }

}

.btn-secondary {
    color: var(--color-text-primary, #000);
    background: var(--color-surface-subtle);
}

.btn-special {
    color: var(--color-on-action);
    background-color: var(--color-favorite);
}

.btn-primary {
    color: var(--color-on-action);
    background: var(--color-brand);
}

/* Blue actions are filled without an outline; neutral/success variants retain theirs. */
.app-dock-cta {
    --app-dock-cta-background: var(--color-brand);
    --app-dock-cta-border: var(--color-focus-ring);
    --app-dock-cta-hover: var(--color-action, #007BFF);
    box-sizing: border-box;
    min-height: var(--control-xlarge);
    border: 0;
    border-radius: var(--radius-xl, 20px);
    background: var(--app-dock-cta-background);
    color: var(--color-on-action);
    font: var(--text-body);
}

.app-dock-cta:is(.is-success, .is-neutral) {
    border: var(--border-primary, 3px) solid var(--app-dock-cta-border);
}

.app-dock-cta.is-success {
    --app-dock-cta-background: var(--color-success-action);
    --app-dock-cta-border: var(--color-success-action, #008F00);
    --app-dock-cta-hover: var(--color-success-action, #008F00);
}

.app-dock-cta.is-neutral {
    --app-dock-cta-background: var(--color-surface);
    --app-dock-cta-border: var(--color-border-default, #E4E8EC);
    --app-dock-cta-hover: var(--color-surface-subtle, #F3F5F7);
    color: var(--color-text-primary);
}

.app-dock-cta:is(:disabled, [aria-disabled="true"], .is-disabled) {
    border: var(--border-primary, 3px) solid var(--color-border-default, #E4E8EC);
    background: var(--color-border-default);
    color: var(--color-text-disabled);
    cursor: default;
    opacity: 1;
}

@media (forced-colors: active) {
    .btn-primary,
    .app-dock-cta { border: var(--border-primary, 3px) solid ButtonText; }
}
.app-dock-attachments {
    display: flex;
    width: min(100%, var(--app-dock-content-width));
    max-width: var(--app-dock-content-width);
    min-width: 0;
    margin-inline: auto;
    padding: var(--space-6) var(--space-8) var(--space-1);
    align-items: center;
    gap: var(--space-5);
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.app-dock-attachments::-webkit-scrollbar {
    display: none;
}

.app-dock-attachment {
    position: relative;
    display: grid;
    width: 58px;
    min-width: 58px;
    height: 58px;
    place-items: center;
}

.app-dock-attachment-visual {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-md, 12px);
    color: var(--color-action, #007BFF);
    background: var(--color-surface-subtle, #F3F5F7);
}

.app-dock-attachment-slot.is-empty {
    pointer-events: none;
}

.app-dock-attachment-empty {
    border: var(--border-secondary, 2px) dashed var(--color-action-soft, #EDF6FF);
    background: var(--color-surface, #fff);
}

.app-dock-attachment-visual > .icon:not(.favorite-list-heart) {
    color: currentColor;
    font-size: 22px;
}

.app-dock-attachment-cover {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-dock-attachment-remove {
    appearance: none;
    position: absolute;
    z-index: 3;
    top: -3px;
    right: -3px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    padding: 0;
    border: var(--border-secondary, 2px) solid var(--color-border-default, #E4E8EC);
    border-radius: var(--radius-pill, 999px);
    color: var(--color-text-secondary, #78848D);
    background: var(--color-surface, #fff);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font: inherit;
}

.app-dock-attachment-remove .icon {
    color: currentColor;
    font-size: 8px;
}

@media (hover: hover) and (pointer: fine) {
    .app-dock-cta:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):hover {
        border-color: var(--app-dock-cta-border);
        background: var(--app-dock-cta-hover);
        opacity: 1;
    }
}

.btn-super-select {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      border-radius: var(--radius-pill, 999px);
      cursor: pointer;
      transition: all .2s ease;
      display: flex;
      justify-content: center;
      align-items: center;
  }

.btn-select {
      width: 28px;
      height: 28px;
      min-width: 28px;
      min-height: 28px;
      border-radius: var(--radius-pill, 999px);
      cursor: pointer;
      transition: all .2s ease;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .btn-select-empty {
      color: var(--color-text-primary, #000);
      background: var(--color-surface, #fff);
      border: var(--border-secondary, 2px) solid var(--color-border-default, #E4E8EC);
  }
  .btn-select-selected {
      color: var(--color-on-action, #fff);
      background: var(--color-action, #007BFF);
  }

  .btn-learned {
      color: var(--color-action, #007BFF);
      background: var(--color-surface-subtle, #F3F5F7);
  }

  .btn-learned.is-active {
      color: var(--color-on-action, #fff);
      background: var(--color-action, #007BFF);
  }

  .label {
      width: 28px;
      height: 28px;
      min-width: 28px;
      min-height: 28px;
      border-radius: var(--radius-pill, 999px);
      cursor: pointer;
      transition: all .2s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 99;
      border: var(--border-secondary, 2px) solid var(--color-on-action, #fff);
      position: absolute;
      right: -4px;
      bottom: -4px;
  }

/* Retired title/tutorial slider CSS. Removed after static production-reference audit; see docs/DESIGN_SYSTEM.md. */

/************** MINIATURES **************/

.lesson-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.avatar-image {
      width: 100%;
      height: 100%;
      aspect-ratio: 1/1;
      position: absolute;
      border-radius: var(--radius-pill, 999px);
      left: 0px;
      top: 0px;
      background-color: var(--color-surface-subtle, #F3F5F7);
  }
  .avatar-image-miniature {
      width: 16px;
      height: 16px;
      min-width: 16px;
      min-height: 16px;
      aspect-ratio: 1/1;
      background-size: cover;
      background-position: center;
      border-radius: var(--radius-pill, 999px);
      background-color: var(--color-surface-subtle, #F3F5F7);
  }

 /************** ISLAND **************/
   .dynamic-island {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 12px;
      padding: 0 0 28px 0;
      width: 100%;
  }
    @media (max-width: 604px) {
      .dynamic-island { padding: 20px 0; }
    }

 .dynamic-island-point {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-control, 14px);
    font: var(--text-body);
    gap: 8px;
    cursor: pointer;
    background: none;
    width: 100%;
    transition: all ease-in .12s;
    user-select: none;
  }

  /************** SEARCH **************/

.search {
    background-color: var(--color-surface-subtle, #F3F5F7);
    padding: 12px 20px;
    border-radius: var(--radius-control, 14px);
    height: 64px;
    width: inherit;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font: var(--text-body); font-family: system-ui, -apple-system, sans-serif;
    cursor: pointer;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.search::placeholder { color: var(--color-text-secondary, #78848D); }

.search:focus { background-color: var(--color-surface-subtle, #F3F5F7); }

  /************** RANGE **************/
 .range-control {
    --range-progress: 0%;

    position: relative;

    width: 100%;
    height: 20px;
    padding: 2px;

    background: linear-gradient(
        to right,
        var(--color-action, #007BFF) 0%,
        var(--color-action, #007BFF) var(--range-progress),
        var(--color-surface, #fff) var(--range-progress),
        var(--color-surface, #fff) 100%
    );
    border-radius: var(--radius-pill, 999px);

    box-sizing: border-box;
}

/* Сам input занимает внутреннюю область 16px высотой */
.daily-minutes-range {
    position: relative;
    z-index: 2;

    display: block;
    width: 100%;
    height: 16px;
    margin: 0;
    padding: 0;

    appearance: none;
    -webkit-appearance: none;

    background: transparent;
    cursor: pointer;
}

/* Прозрачная дорожка — фон уже находится на контейнере */
.daily-minutes-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 16px;

    background: transparent;
    border-radius: var(--radius-pill, 999px);
}

.daily-minutes-range::-webkit-slider-thumb {
    width: var(--app-range-thumb-size, 34px);
    height: var(--app-range-thumb-size, 34px);
    margin-top: -9px;

    appearance: none;
    -webkit-appearance: none;

    background: var(--color-surface, #fff);
    box-sizing: border-box;
    border: 3px solid var(--color-action, #007BFF);
    border-radius: var(--radius-pill, 999px);
    box-shadow: none;
}

/* Firefox */
.daily-minutes-range::-moz-range-track {
    width: 100%;
    height: 28px;

    background: transparent;
    border: 0;
    border-radius: var(--radius-pill, 999px);
}

.daily-minutes-range::-moz-range-thumb {
    width: var(--app-range-thumb-size, 34px);
    height: var(--app-range-thumb-size, 34px);

    background: var(--color-surface, #fff);
    box-sizing: border-box;
    border: 3px solid var(--color-action, #007BFF);
    border-radius: var(--radius-pill, 999px);
    box-shadow: none;
}

/* Маркеры располагаются по центрам возможных положений бегунка */
.range-markers {
    position: absolute;
    z-index: 1;

    top: 2px;
    right: 10px;
    bottom: 2px;
    left: 10px;

    pointer-events: none;
}

.range-markers span {
    position: absolute;
    top: 50%;
    left: var(--position);

    width: 6px;
    height: 6px;

    background: rgba(120, 132, 141, 0.2);
    border-radius: var(--radius-pill, 999px);

    transform: translate(-50%, -50%);
}

.range-markers span.is-filled {
    background: rgba(255, 255, 255, 0.4);
}

.daily-minutes-range:focus-visible {
    outline: none;
}

.range-control:has(.daily-minutes-range:focus-visible) {
    outline: var(--border-primary, 3px) solid var(--color-on-action, #fff);
    outline-offset: 3px;
}

  /************** SHARED RANGE + SWITCH **************/

.app-range {
    --range-progress: 0%;

    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    min-height: var(--control-touch);
    align-items: center;
    padding: 0 2px;
    box-sizing: border-box;
    border-radius: 0;
    background: transparent;
}

.app-range::before {
    position: absolute;
    top: 50%;
    right: 17px;
    left: 17px;
    height: var(--app-range-track-height);
    border-radius: var(--radius-pill, 999px);
    background: linear-gradient(
        to right,
        var(--color-brand) 0%,
        var(--color-brand) var(--range-progress),
        var(--color-surface-subtle) var(--range-progress),
        var(--color-surface-subtle) 100%
    );
    content: "";
    transform: translateY(-50%);
}

.app-range__input {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: var(--control-touch);
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.app-range__input::-webkit-slider-runnable-track {
    width: 100%;
    height: 20px;
    border: 0;
    background: transparent;
}

.app-range__input::-webkit-slider-thumb {
    width: var(--app-range-thumb-size);
    height: var(--app-range-thumb-size);
    margin-top: -7px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    border: 3px solid var(--color-brand);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface);
    box-shadow: none;
}

.app-range__input::-moz-range-track {
    width: 100%;
    height: 20px;
    border: 0;
    background: transparent;
}

.app-range__input::-moz-range-thumb {
    width: var(--app-range-thumb-size);
    height: var(--app-range-thumb-size);
    box-sizing: border-box;
    border: 3px solid var(--color-brand);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface);
    box-shadow: none;
}

.app-range__markers {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 17px;
    bottom: auto;
    left: 17px;
    height: var(--app-range-track-height);
    transform: translateY(-50%);
    pointer-events: none;
}

.app-range__markers span {
    position: absolute;
    top: 50%;
    left: var(--position);
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(120, 132, 141, 0.2);
    transform: translate(-50%, -50%);
}

.app-range__markers span.is-filled {
    background: rgba(255, 255, 255, 0.8);
}

.app-range__input:focus-visible {
    outline: none;
}

.app-range:has(.app-range__input:focus-visible) {
    border-radius: var(--radius-control, 14px);
}

.app-range__input:disabled {
    cursor: wait;
    opacity: 0.6;
}

.app-switch-label {
    display: inline-flex;
    min-height: var(--control-touch);
    align-items: center;
    cursor: pointer;
}

.app-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.app-switch {
    position: relative;
    display: inline-block;
    width: var(--app-switch-width);
    height: var(--app-switch-height);
    flex: 0 0 var(--app-switch-width);
    border: 0;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
}

.app-switch::before {
    position: absolute;
    top: 50%;
    left: 2px;
    width: var(--app-switch-track-width);
    height: var(--app-switch-track-height);
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-control-fill);
    content: "";
    transform: translateY(-50%);
    transition: background-color var(--duration-standard) var(--ease-standard);
}

.app-switch::after {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--app-switch-thumb-size);
    height: var(--app-switch-thumb-size);
    box-sizing: border-box;
    border: 3px solid var(--color-brand);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-surface);
    content: "";
    box-shadow: none;
    transition: transform var(--duration-standard) var(--ease-standard);
}

.app-switch-input:checked + .app-switch::before {
    background: var(--color-brand);
}

.app-switch-input:checked + .app-switch::after {
    transform: translateX(var(--app-switch-thumb-travel));
}

.app-switch-input:disabled + .app-switch {
    cursor: wait;
    opacity: 0.6;
}

.app-switch-label:has(.app-switch-input:disabled) {
    cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
    .app-switch::before,
    .app-switch::after {
        transition: none;
    }
}

@media (forced-colors: active) {
    .app-range::before,
    .app-switch::before {
        border: var(--border-secondary, 2px) solid CanvasText;
        background: Canvas;
    }

    .app-range__input::-webkit-slider-thumb,
    .app-switch::after {
        border-color: Highlight;
        background: Canvas;
    }

    .app-range__input::-moz-range-thumb {
        border-color: Highlight;
        background: Canvas;
    }

    .app-switch-input:checked + .app-switch::before {
        background: Highlight;
    }
}
/* Shared upgrade affordance; access is enforced on the server. */
.premium-upgrade-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 16px;
    background: #edf6ff;
    color: #0070ff;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}
.premium-upgrade-link .icon { width: 22px; height: 22px; flex: 0 0 22px; }
.premium-upgrade-link:hover { background: #e2f0ff; }