/* Self-hosted DM Serif Display (Google Fonts is unreachable in some
       regions); files live in assets/fonts/, latin + latin-ext subsets. */
    @font-face {
      font-family: "DM Serif Display";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("assets/fonts/dm-serif-display-regular-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: "DM Serif Display";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("assets/fonts/dm-serif-display-regular-latin-ext.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
      font-family: "DM Serif Display";
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url("assets/fonts/dm-serif-display-italic-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: "DM Serif Display";
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url("assets/fonts/dm-serif-display-italic-latin-ext.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    :root {
      --bg: #0b0d0e;
      --bg-elevated: #111415;
      --ink: #f0f2f1;
      --muted: #9aa3a0;
      --line: rgba(255, 255, 255, .10);
      --line-strong: rgba(255, 255, 255, .22);
      --paper: #f7f5ef;
      --paper-soft: #ebe8dd;
      --accent: #9ee7cd;
      --accent-2: #e8b486;
      --accent-rgb: 158, 231, 205;
      --accent-2-rgb: 232, 180, 134;
      --white: rgba(255, 255, 255, .86);
      --shadow: 0 24px 80px rgba(0, 0, 0, .40);
      --glass: rgba(255, 255, 255, .045);
      --glass-strong: rgba(255, 255, 255, .075);
      --glass-dark: rgba(10, 12, 12, .45);
      --glass-line: rgba(255, 255, 255, .09);
      --glass-shadow: 0 24px 80px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .06);
      --radius: 20px;
      --radius-sm: 14px;
      --radius-lg: 24px;
      --ease-premium: cubic-bezier(.16, 1, .3, 1);
      --ease-soft: cubic-bezier(.4, 0, .2, 1);
      --display-font: "DM Serif Display", "Songti SC", "STSong", Georgia, serif;
      --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;

      /* theme-aware derived colors */
      --heading: #ffffff;
      --text-primary: rgba(255, 255, 255, .86);
      --text-secondary: rgba(255, 255, 255, .66);
      --text-tertiary: rgba(255, 255, 255, .62);
      --surface: rgba(255, 255, 255, .05);
      --surface-hover: rgba(255, 255, 255, .08);
      --input-bg: rgba(255, 255, 255, .06);
      --input-bg-focus: rgba(255, 255, 255, .10);
      --inverse: rgba(255, 255, 255, .92);
      --inverse-hover: #ffffff;
      --inverse-text: #0a0c0c;
      --placeholder: rgba(255, 255, 255, .35);
      --overlay: rgba(6, 8, 8, .58);
      --scene-overlay: rgba(6, 10, 10, .62);
      --brand-mark: rgba(255, 255, 255, .86);
      --ring-bg: rgba(255, 255, 255, .08);
      --view-overlay-1: rgba(9, 12, 12, .58);
      --view-overlay-2: rgba(9, 12, 12, .78);
      --view-overlay-3: rgba(9, 12, 12, .52);
      --view-overlay-4: rgba(9, 12, 12, .22);

      font-family: var(--body-font);
      color-scheme: dark;
    }

    [data-theme="light"] {
      --bg: #e8e3d6;
      --bg-elevated: #f3efe5;
      --ink: #1a1d1c;
      --muted: rgba(0, 0, 0, .70);
      --line: rgba(0, 0, 0, .20);
      --line-strong: rgba(0, 0, 0, .32);
      --white: rgba(0, 0, 0, .86);
      --shadow: 0 24px 80px rgba(0, 0, 0, .12);
      --glass: rgba(0, 0, 0, .04);
      --glass-strong: rgba(0, 0, 0, .06);
      --glass-dark: rgba(255, 255, 255, .45);
      --glass-line: rgba(0, 0, 0, .14);
      --glass-shadow: 0 24px 80px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .55);

      --heading: #000000;
      --text-primary: #000000;
      --text-secondary: #000000;
      --text-tertiary: #000000;
      --muted: #000000;
      --surface: rgba(0, 0, 0, .055);
      --surface-hover: rgba(0, 0, 0, .10);
      --input-bg: rgba(0, 0, 0, .06);
      --input-bg-focus: rgba(0, 0, 0, .12);
      --inverse: #1a1d1c;
      --inverse-hover: #0f1212;
      --inverse-text: #ffffff;
      --placeholder: rgba(0, 0, 0, .45);
      --overlay: rgba(232, 227, 214, .58);
      --scene-overlay: rgba(10, 12, 12, .70);
      --brand-mark: rgba(0, 0, 0, .86);
      --ring-bg: rgba(0, 0, 0, .14);
      --view-overlay-1: rgba(232, 227, 214, .55);
      --view-overlay-2: rgba(232, 227, 214, .78);
      --view-overlay-3: rgba(232, 227, 214, .50);
      --view-overlay-4: rgba(232, 227, 214, .28);
      --accent-2: #b56d2e;
      --accent-2-rgb: 181, 109, 46;

      color-scheme: light;
    }

    [data-theme="light"] body,
    [data-theme="light"] .quiet-link,
    [data-theme="light"] .timetable-time,
    [data-theme="light"] .timetable-info,
    [data-theme="light"] .timetable-minutes,
    [data-theme="light"] .planner-summary .planner-row,
    [data-theme="light"] .planner-summary .planner-row b,
    [data-theme="light"] .mistake-remove,
    [data-theme="light"] .vocab-hint,
    [data-theme="light"] .lang-pill,
    [data-theme="light"] input,
    [data-theme="light"] textarea,
    [data-theme="light"] select {
      color: #000;
    }

    [data-theme="light"] .primary,
    [data-theme="light"] .primary *,
    [data-theme="light"] .scene-card,
    [data-theme="light"] .scene-card * {
      color: #fff;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100svh;
      color: var(--ink);
      background:
        radial-gradient(circle at 20% 30%, rgba(var(--accent-rgb), .10), transparent 34%),
        radial-gradient(circle at 85% 15%, rgba(var(--accent-2-rgb), .08), transparent 30%),
        radial-gradient(circle at 75% 85%, rgba(var(--accent-rgb), .06), transparent 28%),
        linear-gradient(180deg, var(--bg), var(--bg-elevated));
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    button, input, select {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
      color: inherit;
    }

    .app {
      min-height: 100svh;
      position: relative;
    }

    .view {
      display: none;
      min-height: 100svh;
      padding: clamp(22px, 4vw, 56px);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .55s var(--ease-premium), transform .55s var(--ease-premium);
    }

    .view.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    .shell {
      width: min(1180px, 100%);
      margin: 0 auto;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 52px;
      margin-bottom: clamp(42px, 8vh, 96px);
      padding: 10px 18px;
      border: 1px solid var(--glass-line);
      border-radius: 999px;
      background: var(--glass-strong);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(20px) saturate(120%);
    }

    :lang(en) .topbar {
      gap: 10px;
      padding: 10px 14px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text-primary);
    }

    .brand-mark {
      width: 26px;
      height: 26px;
      border: 1.5px solid var(--brand-mark);
      border-radius: 50%;
      position: relative;
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      inset: 7px 4px 5px 10px;
      border-left: 1.5px solid var(--brand-mark);
      border-bottom: 1.5px solid var(--brand-mark);
      transform: rotate(-16deg);
    }

    .quiet-link {
      background: transparent;
      color: var(--text-secondary);
      padding: 8px 2px;
      border-bottom: 1px solid transparent;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .01em;
      transition: color .2s var(--ease-soft), border-color .2s var(--ease-soft);
    }

    .quiet-link:hover {
      color: var(--heading);
      border-color: var(--line-strong);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }

    .nav-links .quiet-link,
    .nav-links .theme-toggle,
    .nav-links .lang-switch {
      flex-shrink: 0;
    }

    :lang(en) .nav-links {
      gap: 10px;
    }

    :lang(en) .nav-links .quiet-link {
      font-size: 12px;
    }

    .intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
      align-items: center;
      gap: clamp(28px, 5vw, 72px);
      margin-bottom: clamp(40px, 7vh, 80px);
      min-height: clamp(220px, 30vh, 360px);
    }

    .intro-copy {
      display: flex;
      flex-direction: column;
      gap: clamp(18px, 3vh, 28px);
    }

    h1, h2, p {
      margin: 0;
    }

    h1 {
      max-width: 620px;
      font-size: clamp(44px, 7.5vw, 96px);
      line-height: 1.02;
      font-weight: 400;
      letter-spacing: -.02em;
      font-family: var(--display-font);
      color: var(--heading);
    }

    .lead {
      max-width: 480px;
      color: var(--text-tertiary);
      font-size: clamp(16px, 1.9vw, 19px);
      line-height: 1.85;
      font-weight: 400;
    }

    .user-status {
      margin: 0 0 8px;
      font-size: 13px;
      color: var(--muted);
      letter-spacing: .02em;
    }

    [data-theme="light"] .user-status {
      color: rgba(0, 0, 0, .60);
    }

    .profile-user-id {
      margin: 0 0 6px;
      font-size: 13px;
      color: var(--muted);
      letter-spacing: .02em;
    }

    [data-theme="light"] .profile-user-id {
      color: rgba(0, 0, 0, .60);
    }

    .scene-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
    }

    .daily-goal-card {
      display: flex;
      align-items: center;
      gap: 26px;
      margin-bottom: clamp(32px, 6vh, 64px);
      padding: 22px 28px;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      background: var(--glass-strong);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(20px) saturate(120%);
    }

    .intro .daily-goal-card {
      margin-bottom: 0;
      padding: 20px 24px;
    }

    .goal-ring-wrap {
      position: relative;
      width: 92px;
      height: 92px;
      flex-shrink: 0;
    }

    .goal-ring {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }

    .goal-ring circle {
      fill: none;
      stroke-width: 8;
    }

    .goal-ring-bg {
      stroke: var(--ring-bg);
    }

    .goal-ring-progress {
      stroke: var(--accent);
      stroke-linecap: round;
      stroke-dasharray: 264;
      stroke-dashoffset: 264;
      transition: stroke-dashoffset .8s var(--ease-premium);
    }

    .goal-ring-text {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--heading);
      line-height: 1.1;
    }

    .goal-ring-text span {
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -.02em;
    }

    .goal-ring-text small {
      font-size: 11px;
      opacity: .64;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .goal-info {
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: var(--muted);
      font-size: 15px;
    }

    .streak-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(var(--accent-2-rgb), .14);
      border: 1px solid rgba(var(--accent-2-rgb), .25);
      color: var(--accent-2);
      font-size: 13px;
      font-weight: 500;
    }

    button.small {
      padding: 9px 16px;
      font-size: 13px;
      width: fit-content;
      border-radius: 999px;
    }

    .scene-card {
      min-height: 220px;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      padding: 18px;
      overflow: hidden;
      position: relative;
      background:
        linear-gradient(180deg, rgba(6, 10, 10, .18), rgba(6, 10, 10, .62)),
        var(--scene-image);
      background-size: cover;
      background-position: center;
      box-shadow: var(--glass-shadow);
      text-align: left;
      isolation: isolate;
      transition: transform .45s var(--ease-premium), border-color .45s var(--ease-premium), box-shadow .45s var(--ease-premium);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: #fff;
    }

    .scene-card::before,
    .scene-card::after {
      display: none;
    }

    .scene-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, .22);
      box-shadow: 0 28px 80px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .10);
    }

    .scene-card b {
      display: block;
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 6px;
      font-family: var(--display-font);
      text-shadow: 0 12px 32px rgba(0, 0, 0, .36);
    }

    .scene-card span {
      display: block;
      color: rgba(255, 255, 255, .72);
      line-height: 1.6;
      max-width: 14em;
      font-size: 13px;
      text-shadow: 0 8px 24px rgba(0, 0, 0, .42);
    }

    .setup-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
      gap: clamp(36px, 6vw, 88px);
      align-items: center;
      min-height: calc(100svh - 148px);
    }

    .scene-preview {
      min-height: 580px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--glass-line);
      overflow: hidden;
      position: relative;
      background: var(--bg-elevated);
      box-shadow: var(--glass-shadow);
    }

    .scene-preview .ambient,
    .focus-screen .ambient {
      position: absolute;
      inset: 0;
    }

    .ambient-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .ambient-status {
      position: absolute;
      left: 22px;
      top: 22px;
      z-index: 2;
      display: none;
      border-radius: 999px;
      padding: 8px 14px;
      background: rgba(10, 12, 12, .50);
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
      backdrop-filter: blur(16px) saturate(118%);
    }

    .ambient.loading .ambient-status {
      display: inline-flex;
    }

    .ambient.photo-bg {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .ambient.photo-bg .ambient-canvas {
      display: none;
    }

    .ambient.photo-bg::before {
      background: linear-gradient(90deg, rgba(0, 0, 0, .38), transparent 48%);
      opacity: .7;
      animation: none;
    }

    .ambient.photo-bg::after {
      background:
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, .18), transparent 0 14%, transparent 15%),
        linear-gradient(0deg, rgba(0, 0, 0, .28), transparent 45%);
      filter: none;
      opacity: 1;
      animation: none;
    }

    .preview-label {
      position: absolute;
      left: 24px;
      bottom: 24px;
      right: 24px;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      color: var(--heading);
      text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .02em;
    }

    .panel h2 {
      font-size: clamp(34px, 4.6vw, 58px);
      line-height: 1.08;
      font-weight: 400;
      margin-bottom: 20px;
      font-family: var(--display-font);
      color: var(--heading);
    }

    .panel-copy {
      color: var(--text-tertiary);
      line-height: 1.85;
      margin-bottom: 34px;
      max-width: 520px;
      font-size: 15px;
    }

    .segmented {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 4px;
      border: 1px solid var(--glass-line);
      border-radius: 999px;
      background: var(--input-bg);
      margin-bottom: 22px;
    }

    .segmented button {
      height: 46px;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font-weight: 500;
      text-shadow: none;
      transition: background .25s var(--ease-premium), color .25s var(--ease-premium);
    }

    .segmented button.active {
      background: var(--inverse);
      color: var(--inverse-text);
      font-weight: 600;
    }

    .style-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0 4px;
    }

    .style-option,
    .sound-option {
      min-height: 54px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--glass-line);
      background: var(--surface);
      color: var(--muted);
      padding: 0 12px;
      font-size: 14px;
      font-weight: 500;
      transition: background .25s var(--ease-premium), color .25s var(--ease-premium), border-color .25s var(--ease-premium);
    }

    .style-option:hover,
    .sound-option:hover {
      background: var(--surface-hover);
    }

    .style-option.active,
    .sound-option.active {
      background: var(--inverse);
      border-color: var(--inverse);
      color: var(--inverse-text);
    }

    .field-grid {
      display: grid;
      gap: 18px;
      margin: 22px 0 30px;
    }

    label,
    .field-label {
      display: grid;
      gap: 10px;
      color: var(--text-tertiary);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .02em;
    }

    input {
      width: 100%;
      min-height: 52px;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-sm);
      background: var(--input-bg);
      padding: 0 16px;
      color: var(--heading);
      outline: 0;
      transition: background .25s var(--ease-premium), border-color .25s var(--ease-premium), box-shadow .25s var(--ease-premium);
    }

    input::placeholder {
      color: var(--placeholder);
    }

    input:focus {
      border-color: rgba(var(--accent-rgb), .55);
      background: var(--surface-hover);
      box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .10);
    }

    .time-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .primary {
      width: 100%;
      min-height: 58px;
      border-radius: var(--radius-sm);
      background: var(--inverse);
      color: var(--inverse-text);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: .01em;
      transition: transform .25s var(--ease-premium), background .25s var(--ease-premium), box-shadow .25s var(--ease-premium);
    }

    .primary:hover {
      transform: translateY(-1px);
      background: var(--inverse-hover);
      box-shadow: 0 14px 38px rgba(0, 0, 0, .22);
    }

    .auth-layout {
      min-height: calc(100svh - 92px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
      align-items: center;
      gap: clamp(36px, 7vw, 110px);
    }

    .auth-card {
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      background: var(--glass-strong);
      padding: clamp(28px, 4vw, 44px);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(118%);
    }

    .auth-card h2 {
      font-size: clamp(32px, 4.4vw, 52px);
      line-height: 1.1;
      font-weight: 400;
      margin-bottom: 18px;
      font-family: var(--display-font);
      color: var(--heading);
    }

    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 24px;
    }

    .auth-tabs button {
      min-height: 46px;
      border-radius: 999px;
      background: var(--input-bg);
      border: 1px solid var(--glass-line);
      color: var(--text-tertiary);
      font-weight: 500;
      transition: background .2s ease, color .2s ease, border-color .2s ease;
    }

    .auth-tabs button.active {
      background: var(--inverse);
      color: var(--inverse-text);
      border-color: var(--inverse);
    }

    .auth-form {
      display: none;
    }

    .auth-form.active {
      display: block;
    }

    select {
      width: 100%;
      min-height: 52px;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-sm);
      background: var(--input-bg);
      padding: 0 16px;
      color: var(--heading);
      outline: 0;
      transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    select:focus {
      border-color: rgba(var(--accent-rgb), .55);
      background: var(--surface-hover);
      box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .10);
    }

    .auth-note,
    .pet-lock-note {
      color: var(--accent-2);
      min-height: 20px;
      line-height: 1.6;
      margin-top: 14px;
      font-size: 15px;
      font-weight: 500;
    }

    .center-layout {
      min-height: calc(100svh - 148px);
      display: grid;
      align-items: center;
      gap: clamp(32px, 5vw, 72px);
    }

    .pet-layout,
    .result-layout,
    .review-layout,
    .profile-layout {
      display: grid;
      grid-template-columns: minmax(300px, .82fr) minmax(380px, 1.18fr);
      align-items: center;
      gap: clamp(32px, 5vw, 72px);
      min-height: calc(100svh - 148px);
    }

    .pet-stage {
      min-height: 460px;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 30% 20%, rgba(var(--accent-rgb), .12), transparent 28%),
        radial-gradient(circle at 80% 80%, rgba(var(--accent-2-rgb), .10), transparent 26%),
        linear-gradient(180deg, rgba(16, 19, 19, .85) 0 48%, rgba(30, 32, 30, .92) 49% 100%),
        #0f1212;
      display: grid;
      place-items: end center;
      position: relative;
      overflow: hidden;
      box-shadow: var(--glass-shadow);
    }

    .pet-stage::before {
      content: "";
      position: absolute;
      left: clamp(24px, 6vw, 78px);
      top: 38px;
      width: min(320px, 58%);
      height: 132px;
      border-radius: 16px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 58px),
        linear-gradient(180deg, #37463f, #1d2825);
      border: 8px solid rgba(126, 92, 55, .72);
      box-shadow: 0 18px 42px rgba(63, 55, 44, .2);
    }

    .pet-center-alert {
      display: none;
      margin-bottom: 16px;
      border: 1px solid rgba(var(--accent-2-rgb), .45);
      border-radius: var(--radius-sm);
      background: rgba(var(--accent-2-rgb), .12);
      color: var(--accent-2);
      padding: 16px 18px;
      line-height: 1.7;
      font-size: 15px;
      font-weight: 500;
      box-shadow: var(--glass-shadow);
    }

    .pet-center-alert.active {
      display: block;
    }

    .pet-stage::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: 34px;
      height: 52px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(63, 91, 55, .26), transparent 70%);
      filter: blur(1px);
    }

    .pet {
      width: min(300px, 58vw);
      aspect-ratio: 1;
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      animation: petFloat 3.8s ease-in-out infinite;
    }

    .pet-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 24px 34px rgba(38, 58, 44, .28));
      transform: translateY(10px);
    }

    .pet-body {
      width: 62%;
      aspect-ratio: .88;
      border-radius: 48% 48% 38% 38%;
      background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.86), transparent 0 15%, transparent 16%),
        radial-gradient(circle at 68% 78%, rgba(30,37,36,.13), transparent 0 28%, transparent 29%),
        linear-gradient(145deg, rgba(255,255,255,.58), transparent 38%),
        var(--pet-color, #e8d6bd);
      border: 1px solid rgba(30, 37, 36, .18);
      box-shadow:
        inset -18px -24px 36px rgba(30,37,36,.14),
        inset 18px 18px 32px rgba(255,255,255,.46),
        0 30px 70px rgba(40, 47, 43, .24);
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      transform: translate(-50%, -50%);
    }

    .pet-face {
      position: absolute;
      inset: 0;
      z-index: 8;
      pointer-events: none;
    }

    .pet-face::before,
    .pet-face::after {
      content: "";
      position: absolute;
      top: 38%;
      width: 9px;
      height: 9px;
      box-sizing: border-box;
      border-radius: 50%;
      background: var(--ink);
      box-shadow: 0 0 0 3px rgba(255,255,255,.2);
    }

    .pet-face::before { left: 42%; }
    .pet-face::after { right: 42%; }

    .pet-cheek {
      position: absolute;
      top: 49%;
      width: 22px;
      height: 12px;
      border-radius: 50%;
      background: rgba(184, 115, 79, .18);
      filter: blur(.2px);
    }

    .pet-cheek-left { left: 35%; }
    .pet-cheek-right { right: 35%; }

    .pet-mouth {
      position: absolute;
      left: 50%;
      top: 52%;
      width: 28px;
      height: 14px;
      border-bottom: 2px solid rgba(30, 37, 36, .72);
      border-radius: 0 0 999px 999px;
      transform: translateX(-50%);
    }

    .pet-shadow {
      position: absolute;
      z-index: 0;
      left: 22%;
      right: 22%;
      bottom: 32px;
      height: 34px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(30,37,36,.22), transparent 68%);
      filter: blur(4px);
      transform: rotateX(70deg);
    }

    .pet-item {
      position: absolute;
      z-index: 3;
      display: none;
    }

    .pet[data-accessory="cap"] .pet-item.cap,
    .pet[data-accessory="book"] .pet-item.book,
    .pet[data-accessory="scarf"] .pet-item.scarf,
    .pet[data-accessory="glasses"] .pet-item.glasses,
    .pet[data-accessory="headphones"] .pet-item.headphones,
    .pet[data-accessory="necklace"] .pet-item.necklace,
    .pet[data-accessory="guitar"] .pet-item.guitar,
    .pet[data-outfit="hoodie"] .pet-item.hoodie,
    .pet[data-outfit="pants"] .pet-item.pants,
    .pet[data-outfit="skirt"] .pet-item.skirt {
      display: block;
    }

    .pet-item.cap {
      width: 96px;
      height: 40px;
      top: 34px;
      border-radius: 999px 999px 12px 12px;
      background: #3d8a7a;
      border: 1px solid rgba(30, 37, 36, .22);
      box-shadow: inset -10px -12px 18px rgba(0,0,0,.14), 0 12px 24px rgba(30,37,36,.18);
      transform: rotate(-4deg);
      z-index: 6;
    }

    .pet-item.book {
      width: 76px;
      height: 56px;
      right: 24px;
      bottom: 54px;
      border-radius: 4px;
      background: #f0ede4;
      border: 1px solid rgba(30, 37, 36, .22);
      box-shadow: inset 36px 0 0 rgba(184, 115, 79, .18);
      transform: rotate(7deg);
      z-index: 6;
    }

    .pet-item.scarf {
      width: 132px;
      height: 28px;
      left: 50%;
      top: 158px;
      border-radius: 10px 18px 18px 10px;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 12px, transparent 13px 25px),
        linear-gradient(145deg, rgba(255,255,255,.35), transparent 42%),
        #c4825c;
      box-shadow: inset -12px -8px 16px rgba(0,0,0,.12), 0 8px 16px rgba(30,37,36,.1);
      transform: translateX(-50%);
      z-index: 7;
    }

    .pet-item.scarf::before {
      content: "";
      position: absolute;
      right: 22px;
      top: 20px;
      width: 32px;
      height: 72px;
      border-radius: 0 0 14px 14px;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 8px, transparent 9px 18px),
        linear-gradient(145deg, rgba(255,255,255,.2), transparent 48%),
        #c4825c;
      box-shadow: inset -8px -10px 12px rgba(0,0,0,.1);
    }

    .pet-item.scarf::after {
      content: "";
      position: absolute;
      left: 18px;
      top: 6px;
      width: 50px;
      height: 20px;
      border-radius: 999px;
      background: rgba(255,255,255,.18);
      box-shadow: inset -5px -4px 8px rgba(0,0,0,.08);
    }

    .pet-item.glasses {
      width: 86px;
      height: 32px;
      top: 112px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;
      box-sizing: border-box;
    }

    .pet-item.glasses::before,
    .pet-item.glasses::after {
      content: "";
      position: absolute;
      top: 0;
      width: 30px;
      height: 28px;
      border: 3px solid rgba(30,37,36,.72);
      border-radius: 50%;
      background: rgba(255,255,255,.08);
      box-sizing: border-box;
    }

    .pet-item.glasses::before { left: 5px; }
    .pet-item.glasses::after { right: 5px; }

    .pet-item.glasses .bridge {
      display: none;
    }

    .pet-item.glasses {
      background: linear-gradient(90deg, transparent 0 40%, rgba(30,37,36,.72) 41% 59%, transparent 60%);
      background-size: 100% 3px;
      background-repeat: no-repeat;
      background-position: center 12px;
    }

    .pet-item.headphones {
      width: 120px;
      height: 76px;
      left: 50%;
      top: 84px;
      transform: translateX(-50%);
      border-top: 6px solid rgba(66, 83, 98, .9);
      border-radius: 52px 52px 0 0;
      z-index: 9;
    }

    .pet-item.headphones::before,
    .pet-item.headphones::after {
      content: "";
      position: absolute;
      top: 36px;
      width: 24px;
      height: 38px;
      border-radius: 14px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.2), transparent 45%),
        #425362;
      box-shadow: inset -7px -8px 12px rgba(0,0,0,.16);
    }

    .pet-item.headphones::before { left: 1px; }
    .pet-item.headphones::after { right: 1px; }

    .pet-item.necklace {
      width: 86px;
      height: 34px;
      left: 50%;
      top: 148px;
      transform: translateX(-50%);
      border-bottom: 3px solid rgba(208, 158, 92, .86);
      border-radius: 0 0 999px 999px;
      z-index: 7;
    }

    .pet-item.necklace::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -8px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #e3c27e;
      box-shadow: inset -3px -3px 5px rgba(0,0,0,.15);
      transform: translateX(-50%);
    }

    .pet-item.guitar {
      width: 70px;
      height: 104px;
      right: 36px;
      bottom: 56px;
      border-radius: 24px 24px 30px 30px;
      background:
        radial-gradient(circle at 50% 60%, rgba(30,37,36,.38) 0 8px, transparent 9px),
        linear-gradient(145deg, rgba(255,255,255,.28), transparent 42%),
        #c4825c;
      box-shadow: inset -10px -14px 18px rgba(0,0,0,.14), 0 10px 18px rgba(30,37,36,.12);
      transform: rotate(-13deg);
      z-index: 7;
    }

    .pet-item.guitar::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -46px;
      width: 16px;
      height: 58px;
      border-radius: 999px;
      background: #8c6648;
      transform: translateX(-50%);
      box-shadow: inset -4px -6px 8px rgba(0,0,0,.12);
    }

    .pet-item.hoodie {
      width: 152px;
      height: 86px;
      left: 50%;
      top: 168px;
      border-radius: 44px 44px 30px 30px;
      background:
        radial-gradient(ellipse at 50% 9%, rgba(247,245,239,.9), transparent 0 17%, transparent 18%),
        linear-gradient(90deg, transparent 0 18%, rgba(30,37,36,.08) 19% 21%, transparent 22% 78%, rgba(30,37,36,.08) 79% 81%, transparent 82%),
        linear-gradient(145deg, rgba(255,255,255,.22), transparent 46%),
        #8aa9a3;
      box-shadow: inset -14px -18px 24px rgba(0,0,0,.12);
      transform: translateX(-50%);
      z-index: 6;
    }

    .pet-item.hoodie::before {
      content: "";
      position: absolute;
      left: 17px;
      right: 17px;
      top: 13px;
      height: 28px;
      border-radius: 0 0 999px 999px;
      border-bottom: 3px solid rgba(247,245,239,.55);
      box-shadow: inset 0 -2px 0 rgba(30,37,36,.08);
    }

    .pet-item.hoodie::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 14px;
      width: 42px;
      height: 24px;
      border: 2px solid rgba(30,37,36,.16);
      border-radius: 10px 10px 16px 16px;
      transform: translateX(-50%);
    }

    .pet-item.pants {
      width: 138px;
      height: 82px;
      left: 50%;
      top: 170px;
      border-radius: 28px 28px 24px 24px;
      background:
        radial-gradient(circle at 38% 22%, #f7f5ef 0 4px, transparent 5px),
        radial-gradient(circle at 62% 22%, #f7f5ef 0 4px, transparent 5px),
        linear-gradient(90deg, transparent 47%, rgba(247,245,239,.38) 48% 52%, transparent 53%),
        linear-gradient(0deg, transparent 67%, rgba(30,37,36,.15) 68% 72%, transparent 73%),
        linear-gradient(145deg, rgba(255,255,255,.2), transparent 42%),
        #5f7894;
      box-shadow: inset -14px -18px 24px rgba(0,0,0,.14);
      transform: translateX(-50%);
      z-index: 6;
    }

    .pet-item.pants::before,
    .pet-item.pants::after {
      content: "";
      position: absolute;
      top: -18px;
      width: 13px;
      height: 42px;
      border-radius: 999px;
      background: #5f7894;
      box-shadow: inset -4px -6px 8px rgba(0,0,0,.12);
    }

    .pet-item.pants::before { left: 34px; transform: rotate(-7deg); }
    .pet-item.pants::after { right: 34px; transform: rotate(7deg); }

    .pet-item.skirt {
      width: 148px;
      height: 80px;
      left: 50%;
      top: 172px;
      border-radius: 30px 30px 22px 22px;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 9px, transparent 10px 22px),
        linear-gradient(90deg, transparent 47%, rgba(30,37,36,.08) 48% 52%, transparent 53%),
        linear-gradient(145deg, rgba(255,255,255,.22), transparent 45%),
        #c98298;
      box-shadow: inset -14px -18px 24px rgba(0,0,0,.12);
      transform: translateX(-50%);
      z-index: 6;
    }

    .pet-item.skirt::before {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      top: 0;
      height: 22px;
      border-radius: 999px;
      background: #b96f85;
      box-shadow: inset -8px -8px 12px rgba(0,0,0,.08);
    }
    
    @keyframes petFloat {
      0%, 100% { transform: translateY(0) rotateZ(-1deg); }
      50% { transform: translateY(-8px) rotateZ(1deg); }
    }

    .option-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin: 14px 0 20px;
    }

    .choice-button {
      min-height: 54px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--glass-line);
      background: var(--surface);
      color: var(--text-secondary);
      padding: 10px 12px;
      line-height: 1.35;
      display: grid;
      gap: 2px;
      align-content: center;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    }

    .choice-button:hover:not(.locked) {
      background: rgba(255, 255, 255, .09);
      transform: translateY(-1px);
    }

    .choice-button small {
      display: block;
      font-size: 11px;
      color: inherit;
      opacity: .7;
    }

    .choice-button.active {
      background: var(--inverse);
      color: var(--inverse-text);
      border-color: var(--inverse);
    }

    .choice-button.locked {
      opacity: .45;
    }

    .choice-button.paid:not(.owned) {
      border-color: rgba(var(--accent-2-rgb), .35);
    }

    .choice-button.previewing {
      border-color: rgba(var(--accent-2-rgb), .65);
      box-shadow: 0 0 0 1px rgba(var(--accent-2-rgb), .20), 0 14px 34px rgba(0, 0, 0, .20);
    }

    .stat-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin: 28px 0;
    }

    .stat-tile,
    .history-item,
    .badge {
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-sm);
      background: var(--glass);
      padding: 18px;
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(140%);
    }

    .stat-tile {
      min-height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .stat-tile b {
      display: block;
      font-size: clamp(26px, 3.4vw, 36px);
      font-weight: 500;
      line-height: 1.15;
      margin-bottom: 8px;
      color: var(--heading);
    }

    .stat-tile span,
    .history-item span,
    .badge span {
      color: var(--muted);
      line-height: 1.55;
      font-size: 13px;
    }

    .progress-bar {
      height: 8px;
      border-radius: 999px;
      background: var(--surface-hover);
      overflow: hidden;
      margin: 12px 0 22px;
    }

    .progress-bar span {
      display: block;
      height: 100%;
      width: var(--progress, 0%);
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 16px rgba(var(--accent-rgb), .35);
    }

    .progress-caption {
      color: var(--muted);
      line-height: 1.6;
      margin: -6px 0 22px;
      font-size: 14px;
    }

    .history-list,
    .badge-list {
      display: grid;
      gap: 12px;
      max-height: 360px;
      overflow: auto;
      padding-right: 6px;
    }

    .storage-note {
      font-size: 13px;
      color: var(--text-secondary);
      opacity: .85;
      margin-top: 12px;
      line-height: 1.5;
    }

    /* Cloud backup card (profile page) */
    .sync-card {
      margin-top: 16px;
      padding: 20px;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-sm);
      background: var(--glass);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(140%);
      display: grid;
      gap: 14px;
    }

    .sync-card-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .sync-card-head h3 {
      font-size: 16px;
      font-weight: 500;
      color: var(--heading);
      letter-spacing: .01em;
    }

    .sync-status {
      font-size: 12px;
      color: var(--muted);
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      white-space: nowrap;
    }

    .sync-status[data-state="synced"] {
      color: var(--accent);
      border-color: rgba(var(--accent-rgb), .4);
    }

    .sync-status[data-state="syncing"] {
      color: var(--accent);
      border-color: rgba(var(--accent-rgb), .4);
    }

    .sync-status[data-state="error"] {
      color: var(--accent-2);
      border-color: rgba(var(--accent-2-rgb), .4);
    }

    .sync-code-row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .sync-code-row code {
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 14px;
      letter-spacing: .08em;
      color: var(--text-primary);
      background: var(--input-bg);
      padding: 8px 12px;
      border-radius: 8px;
      word-break: break-all;
    }

    .sync-hint {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.6;
      margin: 0;
    }

    .sync-error {
      font-size: 12px;
      color: var(--accent-2);
      line-height: 1.6;
      margin: 0;
    }

    .sync-restore-form {
      display: grid;
      gap: 10px;
      margin-top: 12px;
      max-width: 340px;
    }

    .sync-restore-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .badge.locked {
      opacity: .48;
    }

    .review-card {
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      background: var(--glass-strong);
      padding: clamp(24px, 3vw, 36px);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(118%);
    }

    .focus-view {
      padding: 0;
      overflow: hidden;
      background: #070808;
    }

    .focus-screen {
      min-height: 100svh;
      position: relative;
      overflow: hidden;
      color: var(--heading);
      isolation: isolate;
    }

    .focus-screen::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(ellipse at 78% 18%, rgba(var(--accent-rgb), .08), transparent 0 26%, transparent 27%),
        linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 48%),
        linear-gradient(0deg, rgba(0, 0, 0, .45), transparent 52%),
        linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 38%);
      pointer-events: none;
    }

    .focus-meta {
      position: absolute;
      z-index: 2;
      top: clamp(22px, 4vw, 42px);
      left: clamp(22px, 4vw, 48px);
      right: clamp(22px, 4vw, 48px);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      color: var(--muted);
      font-family: var(--body-font);
    }

    .task-title {
      font-size: clamp(22px, 3vw, 34px);
      color: var(--heading);
      margin-bottom: 8px;
      font-family: var(--display-font);
      font-weight: 400;
      letter-spacing: -.01em;
    }

    .end-btn {
      flex: 0 0 auto;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--surface-hover);
      color: var(--heading);
      border: 1px solid rgba(255, 255, 255, .20);
      backdrop-filter: blur(18px) saturate(120%);
      display: grid;
      place-items: center;
      font-size: 22px;
      transition: background .25s var(--ease-premium), border-color .25s var(--ease-premium);
    }

    .end-btn:hover {
      background: rgba(255, 255, 255, .16);
      border-color: rgba(255, 255, 255, .26);
    }

    .timer {
      position: absolute;
      z-index: 2;
      left: clamp(22px, 4vw, 48px);
      bottom: clamp(24px, 5vw, 52px);
      font-family: var(--display-font);
      padding: clamp(18px, 2.6vw, 28px);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--radius-lg);
      background: rgba(10, 12, 12, .34);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(22px) saturate(118%);
    }

    .timer-time {
      font-variant-numeric: tabular-nums;
      font-family: var(--display-font);
      font-size: clamp(58px, 12vw, 140px);
      line-height: .88;
      letter-spacing: -.02em;
      text-shadow: 0 18px 60px rgba(0, 0, 0, .36);
      color: var(--heading);
    }

    .timer-note {
      margin-top: 18px;
      color: var(--muted);
      font-size: clamp(15px, 1.9vw, 18px);
      font-family: var(--body-font);
      max-width: 460px;
    }

    .focus-controls {
      display: flex;
      gap: 12px;
      margin-top: 22px;
      flex-wrap: wrap;
    }

    .focus-control {
      min-height: 46px;
      border-radius: 999px;
      padding: 0 22px;
      background: var(--surface-hover);
      color: var(--heading);
      border: 1px solid rgba(255, 255, 255, .14);
      backdrop-filter: blur(18px) saturate(118%);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .01em;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .focus-control:hover {
      background: rgba(255, 255, 255, .18);
      border-color: var(--line-strong);
      transform: translateY(-1px);
    }

    .music-embed {
      position: absolute;
      z-index: 2;
      right: clamp(22px, 4vw, 48px);
      bottom: clamp(24px, 5vw, 52px);
      width: min(280px, calc(100vw - 44px));
      display: none;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .14);
      box-shadow: var(--glass-shadow);
      background: rgba(10, 12, 12, .32);
      padding: 16px;
      color: var(--heading);
      backdrop-filter: blur(20px) saturate(118%);
    }

    .music-embed.active {
      display: block;
    }

    .music-embed audio {
      position: absolute;
      width: 1px;
      height: 1px;
      border: 0;
      opacity: 0;
      pointer-events: none;
    }

    .music-panel-title {
      font-size: 14px;
      color: var(--text-tertiary);
      margin-bottom: 12px;
      font-weight: 500;
    }

    .collab-companion {
      display: none;
      position: absolute;
      z-index: 2;
      right: clamp(22px, 4vw, 48px);
      top: clamp(92px, 12vw, 130px);
      min-width: min(300px, calc(100vw - 44px));
      border-radius: var(--radius);
      padding: 16px;
      color: var(--heading);
      background: rgba(10, 12, 12, .28);
      border: 1px solid rgba(255, 255, 255, .12);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(20px) saturate(118%);
      align-items: center;
      gap: 14px;
    }

    .collab-companion.active {
      display: flex;
    }

    .companion-avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--surface-hover);
      border: 1px solid var(--line-strong);
      font-size: 22px;
    }

    .companion-text b {
      display: block;
      font-size: 15px;
      font-weight: 600;
    }

    .companion-text span {
      display: block;
      margin-top: 4px;
      color: var(--text-tertiary);
      font-size: 13px;
    }

    .pause-state {
      display: none;
      position: absolute;
      z-index: 3;
      inset: 0;
      place-items: center;
      text-align: center;
      padding: 24px;
      background: rgba(10, 12, 12, .42);
      backdrop-filter: blur(8px);
    }

    .pause-state.active {
      display: grid;
    }

    .pause-state b {
      display: block;
      font-size: clamp(36px, 6vw, 76px);
      font-weight: 400;
      margin-bottom: 14px;
      font-family: var(--display-font);
      color: var(--heading);
    }

    .pause-state span {
      color: var(--muted);
      font-size: 17px;
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 10;
      display: none;
      place-items: center;
      padding: 22px;
      background: var(--overlay);
      backdrop-filter: blur(14px);
    }

    .modal.active {
      display: grid;
    }

    .rest-sheet {
      width: min(900px, 100%);
      max-height: min(760px, 92svh);
      overflow: auto;
      border-radius: var(--radius-lg);
      background: var(--bg-elevated);
      color: var(--ink);
      border: 1px solid var(--glass-line);
      box-shadow: var(--glass-shadow);
      display: grid;
      grid-template-columns: .9fr 1.1fr;
    }

    .rest-visual {
      min-height: 420px;
      background:
        radial-gradient(circle at 42% 30%, rgba(var(--accent-rgb), .25), transparent 0 22%, transparent 23%),
        radial-gradient(circle at 72% 66%, rgba(var(--accent-2-rgb), .14), transparent 0 20%, transparent 21%),
        linear-gradient(180deg, rgba(var(--accent-rgb), .10), rgba(var(--accent-2-rgb), .08)),
        #0f1212;
      position: relative;
      overflow: hidden;
    }

    .rest-visual::before,
    .rest-visual::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(30, 37, 36, .18);
      border-radius: 50%;
      animation: breathe 4.8s ease-in-out infinite;
    }

    .rest-visual::before {
      width: 190px;
      height: 190px;
      left: 18%;
      top: 26%;
    }

    .rest-visual::after {
      width: 92px;
      height: 92px;
      right: 18%;
      bottom: 22%;
      animation-delay: -1.6s;
    }

    .rest-content {
      padding: clamp(28px, 4vw, 46px);
    }

    .rest-content h2 {
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.12;
      margin-bottom: 16px;
      font-weight: 400;
      font-family: var(--display-font);
      color: var(--heading);
    }

    .rest-content p {
      color: var(--text-tertiary);
      line-height: 1.85;
      margin-bottom: 26px;
    }

    .exercise-list {
      display: grid;
      gap: 12px;
      margin-bottom: 26px;
    }

    .exercise {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 14px;
      align-items: center;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-sm);
      padding: 14px;
      background: var(--surface);
      transition: background .2s ease;
    }

    .exercise:hover {
      background: rgba(255, 255, 255, .09);
    }

    .play-dot {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--inverse);
      color: var(--inverse-text);
    }

    .exercise b {
      display: block;
      font-weight: 500;
      margin-bottom: 4px;
      color: var(--heading);
    }

    .exercise small {
      color: var(--muted);
      line-height: 1.5;
      font-size: 13px;
    }

    .rest-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .pause-sheet {
      width: min(520px, 100%);
      border-radius: var(--radius-lg);
      background: var(--bg-elevated);
      color: var(--ink);
      border: 1px solid var(--glass-line);
      box-shadow: var(--glass-shadow);
      padding: clamp(28px, 4vw, 42px);
    }

    .pause-sheet h2 {
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.14;
      font-weight: 400;
      margin-bottom: 14px;
      font-family: var(--display-font);
      color: var(--heading);
    }

    .pause-sheet p {
      color: var(--text-tertiary);
      line-height: 1.8;
      margin-bottom: 24px;
    }

    textarea {
      width: 100%;
      min-height: 110px;
      resize: vertical;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-sm);
      background: var(--input-bg);
      padding: 14px 16px;
      color: var(--heading);
      outline: 0;
      font: inherit;
      transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    textarea::placeholder {
      color: var(--placeholder);
    }

    textarea:focus {
      border-color: rgba(var(--accent-rgb), .55);
      background: var(--surface-hover);
      box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .10);
    }

    .form-hint {
      min-height: 20px;
      color: var(--accent-2);
      font-size: 13px;
      margin-top: -2px;
    }

    .collab-card {
      display: grid;
      gap: 14px;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      padding: 18px;
      background: var(--glass);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(118%);
    }

    .collab-card b {
      font-size: 17px;
      font-weight: 500;
      color: var(--heading);
    }

    .collab-card p,
    .collab-note {
      margin: 0;
      color: var(--text-tertiary);
      line-height: 1.7;
      font-size: 14px;
    }

    .collab-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .setupView-collab-guest .host-only-setting {
      display: none;
    }

    .setupView-collab-guest .collab-card {
      border-color: rgba(var(--accent-rgb), .35);
      background: rgba(var(--accent-rgb), .10);
    }

    .save-cta {
      width: 100%;
      min-height: 68px;
      margin-top: 18px;
      border-radius: var(--radius);
      font-size: clamp(17px, 2.2vw, 21px);
      background: var(--inverse);
      color: var(--inverse-text);
      box-shadow: 0 20px 56px rgba(0, 0, 0, .28);
      font-weight: 600;
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .save-cta:hover {
      transform: translateY(-2px);
      background: var(--inverse-hover);
      box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
    }

    .together-summary {
      display: none;
      margin: 16px 0 0;
      border: 1px solid rgba(var(--accent-rgb), .28);
      border-radius: var(--radius);
      padding: 16px;
      background: rgba(var(--accent-rgb), .10);
      color: var(--text-primary);
      line-height: 1.7;
      font-size: 14px;
    }

    .together-summary.active {
      display: block;
    }

    .secondary {
      min-height: 52px;
      border-radius: var(--radius-sm);
      background: var(--surface);
      border: 1px solid var(--glass-line);
      color: var(--text-primary);
      font-weight: 500;
      letter-spacing: .01em;
      transition: background .25s var(--ease-premium), border-color .25s var(--ease-premium), color .25s var(--ease-premium);
    }

    .secondary:hover {
      background: var(--surface-hover);
      border-color: var(--line-strong);
      color: var(--heading);
    }

    .secondary.danger {
      color: #c45c4a;
      border-color: rgba(196, 92, 74, .35);
    }

    .secondary.danger:hover {
      background: rgba(196, 92, 74, .10);
      border-color: rgba(196, 92, 74, .55);
      color: #c45c4a;
    }

    [data-theme="light"] .secondary.danger {
      color: #b05040;
      border-color: rgba(176, 80, 64, .45);
    }

    [data-theme="light"] .secondary.danger:hover {
      background: rgba(176, 80, 64, .10);
      border-color: rgba(176, 80, 64, .65);
      color: #b05040;
    }

    .hidden {
      display: none;
    }

    .ambient {
      --sky-a: #dfe8de;
      --sky-b: #f4e4c8;
      --land-a: #8ca497;
      --land-b: #4d665e;
      --sun: rgba(255, 244, 208, .84);
      --mist: rgba(255, 255, 255, .32);
      background:
        radial-gradient(circle at var(--sun-x, 70%) var(--sun-y, 24%), var(--sun) 0 7%, transparent 8%),
        linear-gradient(180deg, var(--sky-a), var(--sky-b) 58%, var(--land-a) 59%, var(--land-b));
      overflow: hidden;
    }

    .ambient::before,
    .ambient::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--layer-one), var(--layer-two);
      animation: drift 22s ease-in-out infinite alternate;
      opacity: .95;
    }

    .ambient::after {
      filter: blur(18px);
      opacity: .48;
      animation-duration: 31s;
      animation-direction: alternate-reverse;
    }

    .scene-classroom {
      --sky-a: #e9e3d3;
      --sky-b: #cfc4ad;
      --land-a: #6b5746;
      --land-b: #342d27;
      --sun-x: 78%;
      --sun-y: 20%;
      --layer-one:
        linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.34) 10% 11%, transparent 11% 18%, rgba(255,255,255,.24) 18% 19%, transparent 19%),
        linear-gradient(0deg, transparent 0 55%, rgba(52,45,39,.42) 55% 57%, transparent 57%);
      --layer-two:
        linear-gradient(90deg, transparent 0 18%, rgba(35,28,21,.26) 18% 19%, transparent 19% 72%, rgba(35,28,21,.2) 72% 73%, transparent 73%),
        repeating-linear-gradient(90deg, transparent 0 80px, rgba(255,255,255,.12) 82px 84px);
    }

    .scene-coast {
      --sky-a: #d8e8e7;
      --sky-b: #f1d4b7;
      --land-a: #79a6a4;
      --land-b: #2e6469;
      --sun-x: 22%;
      --sun-y: 28%;
      --layer-one:
        repeating-linear-gradient(0deg, transparent 0 42px, rgba(255,255,255,.35) 44px 47px, transparent 49px 88px),
        linear-gradient(180deg, transparent 0 60%, rgba(255,255,255,.34) 61%, transparent 65%);
      --layer-two:
        radial-gradient(ellipse at 78% 74%, rgba(255,255,255,.44), transparent 0 18%, transparent 19%),
        repeating-linear-gradient(175deg, transparent 0 70px, rgba(255,255,255,.22) 72px 75px);
    }

    .scene-forest {
      --sky-a: #dbe7d1;
      --sky-b: #9fba99;
      --land-a: #55735a;
      --land-b: #1f3e32;
      --sun-x: 64%;
      --sun-y: 19%;
      --layer-one:
        radial-gradient(ellipse at 18% 72%, rgba(36,75,55,.68), transparent 0 21%, transparent 22%),
        radial-gradient(ellipse at 42% 62%, rgba(36,75,55,.6), transparent 0 28%, transparent 29%),
        radial-gradient(ellipse at 76% 68%, rgba(36,75,55,.7), transparent 0 27%, transparent 28%);
      --layer-two:
        repeating-linear-gradient(88deg, transparent 0 52px, rgba(31,62,50,.45) 53px 58px),
        linear-gradient(180deg, transparent, rgba(31,62,50,.34));
    }

    .scene-library {
      --sky-a: #d9d1bd;
      --sky-b: #b79f82;
      --land-a: #594839;
      --land-b: #251f1a;
      --sun-x: 54%;
      --sun-y: 24%;
      --layer-one:
        repeating-linear-gradient(90deg, rgba(43,34,27,.24) 0 22px, rgba(255,255,255,.08) 22px 25px, transparent 25px 54px),
        linear-gradient(0deg, transparent 0 42%, rgba(43,34,27,.32) 43% 45%, transparent 45%);
      --layer-two:
        linear-gradient(90deg, transparent 0 8%, rgba(255,235,185,.2) 8% 18%, transparent 19%),
        repeating-linear-gradient(0deg, transparent 0 84px, rgba(37,31,26,.22) 86px 90px);
    }

    .scene-rain {
      --sky-a: #cfd9d4;
      --sky-b: #9daaa6;
      --land-a: #5f6e6a;
      --land-b: #2e3938;
      --sun: rgba(255,255,255,.18);
      --sun-x: 76%;
      --sun-y: 18%;
      --layer-one:
        repeating-linear-gradient(103deg, transparent 0 22px, rgba(255,255,255,.38) 23px 24px, transparent 25px 58px),
        linear-gradient(180deg, transparent, rgba(36,43,42,.28));
      --layer-two:
        radial-gradient(ellipse at 40% 78%, rgba(255,255,255,.18), transparent 0 23%, transparent 24%),
        repeating-linear-gradient(103deg, transparent 0 42px, rgba(255,255,255,.22) 43px 44px);
    }

    .scene-mountain {
      --sky-a: #dbe6e4;
      --sky-b: #c7d2c7;
      --land-a: #8a9d8c;
      --land-b: #3e574b;
      --sun-x: 30%;
      --sun-y: 20%;
      --layer-one:
        linear-gradient(138deg, transparent 0 50%, rgba(88,110,96,.76) 51% 68%, transparent 69%),
        linear-gradient(42deg, transparent 0 54%, rgba(62,87,75,.8) 55% 72%, transparent 73%);
      --layer-two:
        linear-gradient(132deg, transparent 0 45%, rgba(255,255,255,.42) 46% 51%, transparent 52%),
        linear-gradient(44deg, transparent 0 50%, rgba(255,255,255,.3) 51% 56%, transparent 57%);
    }

    .v-dawn { filter: saturate(1.04) hue-rotate(-7deg); }
    .v-noon { filter: saturate(.94) brightness(1.04); }
    .v-dusk { filter: saturate(1.06) hue-rotate(10deg) brightness(.9); }

    .view:not(.focus-view) {
      position: relative;
      isolation: isolate;
      color: var(--heading);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .view:not(.focus-view)::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 18% 28%, rgba(var(--accent-rgb), .07), transparent 30%),
        radial-gradient(circle at 82% 72%, rgba(var(--accent-2-rgb), .05), transparent 28%),
        linear-gradient(180deg, var(--view-overlay-1), var(--view-overlay-2)),
        linear-gradient(90deg, var(--view-overlay-3), var(--view-overlay-4) 48%, var(--view-overlay-3));
      pointer-events: none;
    }

    #sceneView {
      background-image: url("assets/backgrounds/mountain/photo/02.jpg");
    }

    [data-theme="light"] #sceneView {
      background-image: url("assets/backgrounds/mountain/photo/light-02.jpg");
    }

    #setupView {
      background-image: url("assets/backgrounds/library/photo/01.jpg");
    }

    #authView,
    #resultView,
    #reviewView,
    #profileView {
      background-image: url("assets/backgrounds/forest/photo/02.jpg");
    }

    [data-theme="light"] #authView,
    [data-theme="light"] #resultView,
    [data-theme="light"] #reviewView,
    [data-theme="light"] #profileView {
      background-image: url("assets/backgrounds/forest/photo/light-02.jpg");
    }

    #petView {
      background:
        linear-gradient(180deg, rgba(15, 22, 21, .42), rgba(15, 22, 21, .7)),
        url("assets/backgrounds/classroom/film/01.png") center / cover no-repeat;
    }

    [data-theme="light"] #petView {
      background:
        linear-gradient(180deg, rgba(232, 227, 214, .35), rgba(232, 227, 214, .62)),
        url("assets/backgrounds/classroom/film/light-01.png") center / cover no-repeat;
    }





    @supports not ((backdrop-filter: blur(1px))) {
      .topbar,
      .scene-grid,
      .scene-preview,
      .panel,
      .auth-card,
      .pet-stage,
      .review-card,
      .stat-tile,
      .history-item,
      .badge,
      .timer {
        background: rgba(28, 34, 32, .82);
      }
    }

    @keyframes drift {
      from { transform: translate3d(-1.8%, -.8%, 0) scale(1.03); }
      to { transform: translate3d(2.2%, 1.1%, 0) scale(1.06); }
    }

    @keyframes breathe {
      0%, 100% { transform: scale(.86); opacity: .38; }
      50% { transform: scale(1.08); opacity: .86; }
    }

    @media (max-width: 900px) {
      .intro,
      .auth-layout,
      .setup-layout,
      .pet-layout,
      .result-layout,
      .review-layout,
      .profile-layout,
      .rest-sheet {
        grid-template-columns: 1fr;
      }

      .scene-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .scene-card {
        min-height: 190px;
        padding: 16px;
      }

      .scene-card b {
        font-size: 22px;
      }

      .daily-goal-card {
        gap: 18px;
        padding: 16px 20px;
      }

      .goal-ring-wrap {
        width: 80px;
        height: 80px;
      }

      .goal-ring-text span {
        font-size: 20px;
      }

      .scene-preview {
        min-height: 360px;
      }

      .setup-layout,
      .auth-layout,
      .pet-layout,
      .result-layout,
      .review-layout,
      .profile-layout {
        min-height: auto;
      }

      .rest-visual {
        min-height: 240px;
      }

      .insights-layout, .planner-layout, .about-layout {
        grid-template-columns: 1fr;
      }

      .insights-layout .panel, .planner-layout .panel, .about-layout .panel {
        position: static;
      }

      .about-stats {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 560px) {
      .view {
        padding: 18px;
      }

      .topbar {
        margin-bottom: 34px;
        padding: 10px 14px;
      }

      .scene-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .scene-card {
        min-height: 160px;
        padding: 14px;
      }

      .scene-card b {
        font-size: 20px;
      }

      .scene-card span {
        font-size: 12px;
      }

      .time-row,
      .rest-actions,
      .collab-actions,
      .style-grid,
      .option-grid,
      .stat-grid,
      .vocab-stats,
      .vocab-result-grid {
        grid-template-columns: 1fr;
      }

      .focus-meta {
        flex-direction: row;
      }

      .timer-time {
        font-size: clamp(54px, 20vw, 92px);
      }

      .music-embed {
        left: 18px;
        right: 18px;
        bottom: 150px;
        width: auto;
      }

      .vocab-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .vocab-settings {
        border-radius: 16px;
      }
    }
  
    /* Theme toggle */
    .theme-toggle {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid var(--line-strong);
      color: var(--muted);
      display: grid;
      place-items: center;
      font-size: 17px;
      transition: background .25s var(--ease-premium), border-color .25s var(--ease-premium), transform .25s var(--ease-premium);
    }

    .theme-toggle:hover {
      background: var(--surface-hover);
      border-color: var(--line-strong);
      transform: scale(1.08);
    }

    [data-theme="light"] .theme-toggle {
      border-color: rgba(0, 0, 0, .14);
    }

    [data-theme="light"] .theme-toggle:hover {
      border-color: rgba(0, 0, 0, .24);
    }

    /* Language switcher & vocab entry inside top nav */
    .lang-switch {
      position: relative;
    }

    .lang-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid var(--line-strong);
      color: var(--muted);
      display: grid;
      place-items: center;
      font-size: 17px;
      transition: background .25s var(--ease-premium), border-color .25s var(--ease-premium);
    }

    .lang-btn:hover {
      background: var(--surface-hover);
      border-color: var(--line-strong);
    }

    .lang-dropdown {
      position: absolute;
      top: 46px;
      right: 0;
      z-index: 100;
      min-width: 150px;
      background: rgba(16, 19, 19, .96);
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-sm);
      box-shadow: var(--glass-shadow);
      overflow: hidden;
      display: none;
    }

    .lang-dropdown.active {
      display: block;
    }

    .lang-option {
      width: 100%;
      padding: 12px 16px;
      text-align: left;
      background: transparent;
      color: var(--text-primary);
      font-size: 14px;
      transition: background .15s ease;
    }

    .lang-option:hover {
      background: var(--surface-hover);
    }

    .lang-option.active {
      color: var(--accent);
      font-weight: 600;
    }

    [data-theme="light"] .lang-dropdown {
      background: rgba(255, 255, 255, .96);
      border-color: rgba(0, 0, 0, .12);
    }

    [data-theme="light"] .lang-option:hover {
      background: rgba(0, 0, 0, .08);
    }

    .user-menu {
      position: relative;
    }

    .user-menu-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid var(--line-strong);
      color: var(--muted);
      display: grid;
      place-items: center;
      font-size: 17px;
      cursor: pointer;
      transition: background .25s var(--ease-premium), border-color .25s var(--ease-premium);
    }

    .user-menu-btn:hover {
      background: var(--surface-hover);
      border-color: var(--line-strong);
    }

    .user-menu-dropdown {
      position: absolute;
      top: 46px;
      right: 0;
      z-index: 100;
      min-width: 150px;
      background: rgba(16, 19, 19, .96);
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-sm);
      box-shadow: var(--glass-shadow);
      overflow: hidden;
      display: none;
    }

    .user-menu-dropdown.active {
      display: block;
    }

    .user-menu-option {
      width: 100%;
      padding: 12px 16px;
      text-align: left;
      background: transparent;
      color: var(--text-primary);
      font-size: 14px;
      transition: background .15s ease;
    }

    .user-menu-option:hover {
      background: var(--surface-hover);
    }

    [data-theme="light"] .user-menu-dropdown {
      background: rgba(255, 255, 255, .96);
      border-color: rgba(0, 0, 0, .12);
    }

    [data-theme="light"] .user-menu-option {
      color: #000;
    }

    [data-theme="light"] .user-menu-option:hover {
      background: rgba(0, 0, 0, .08);
    }

    .quiet-link.home-btn {
      color: var(--text-secondary);
      font-weight: 500;
    }

    .quiet-link.home-btn:hover {
      color: var(--heading);
    }

    .focus-control.home-btn {
      color: var(--heading);
    }

    [data-theme="light"] .timer {
      background: rgba(255, 255, 255, .58);
      border-color: rgba(0, 0, 0, .12);
    }

    [data-theme="light"] .timer-time {
      color: #000;
      text-shadow: 0 18px 60px rgba(255, 255, 255, .36);
    }

    [data-theme="light"] .timer-note {
      color: rgba(0, 0, 0, .70);
    }

    [data-theme="light"] .end-btn {
      background: rgba(255, 255, 255, .58);
      border-color: rgba(0, 0, 0, .14);
      color: #000;
    }

    [data-theme="light"] .end-btn:hover {
      background: rgba(255, 255, 255, .76);
      border-color: rgba(0, 0, 0, .22);
    }

    [data-theme="light"] .focus-control {
      background: rgba(255, 255, 255, .50);
      border-color: rgba(0, 0, 0, .12);
      color: #000;
    }

    [data-theme="light"] .focus-control:hover {
      background: rgba(255, 255, 255, .70);
      border-color: rgba(0, 0, 0, .20);
    }

    [data-theme="light"] .focus-control.home-btn {
      color: rgba(0, 0, 0, .70);
    }

    [data-theme="light"] .focus-control.home-btn:hover {
      color: #000;
    }

    .vocab-bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      transition: opacity .7s ease;
    }

    .vocab-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 25%, rgba(var(--accent-rgb), .10), transparent 32%),
        radial-gradient(circle at 80% 20%, rgba(var(--accent-2-rgb), .08), transparent 30%),
        linear-gradient(180deg, rgba(9, 12, 12, .48), rgba(9, 12, 12, .72));
    }

    /* Vocab module */
    .vocab-home-layout,
    .vocab-result-layout {
      max-width: 920px;
      margin: 0 auto;
    }

    .vocab-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 42px;
      flex-wrap: wrap;
    }

    .vocab-header h2 {
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.08;
      font-weight: 400;
      color: var(--heading);
      font-family: var(--display-font);
    }

    .vocab-settings {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      padding: 8px 16px;
      border: 1px solid var(--glass-line);
      border-radius: 999px;
      background: var(--glass-strong);
      backdrop-filter: blur(18px) saturate(118%);
    }

    .vocab-settings label {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 14px;
    }

    .vocab-settings input[type="number"] {
      width: 72px;
      min-height: 36px;
      border-radius: 999px;
      border: 1px solid var(--glass-line);
      background: var(--surface-hover);
      color: var(--heading);
      text-align: center;
    }

    .book-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 22px;
      margin-bottom: 40px;
    }

    .book-card {
      position: relative;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      background: var(--glass);
      padding: 24px 22px 22px;
      text-align: left;
      transition: transform .45s var(--ease-premium), border-color .45s var(--ease-premium), box-shadow .45s var(--ease-premium), background .45s var(--ease-premium);
      cursor: pointer;
      overflow: hidden;
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(118%);
    }

    .book-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      opacity: .55;
      transition: opacity .25s ease, height .25s ease;
    }

    .book-card:hover {
      transform: translateY(-4px);
      border-color: var(--line-strong);
      background: var(--glass-strong);
      box-shadow: 0 28px 80px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .book-card:hover::before {
      opacity: .9;
      height: 4px;
    }

    .book-card.active {
      border-color: rgba(255, 255, 255, .38);
      background: rgba(var(--accent-rgb), .12);
    }

    .book-card.active::before {
      opacity: 1;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
    }

    .vocab-home-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 32px;
    }

    .vocab-mistake-layout {
      max-width: 920px;
      margin: 0 auto;
    }

    .mistake-actions {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .mistake-list {
      display: grid;
      gap: 14px;
    }

    .mistake-item {
      display: grid;
      grid-template-columns: 140px 1fr auto;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid var(--glass-line);
      backdrop-filter: blur(14px);
    }

    .mistake-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }

    .mistake-word {
      font-size: 22px;
      font-weight: 500;
      color: var(--heading);
      font-family: var(--display-font);
    }

    .mistake-meaning {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
      word-break: break-word;
    }

    .mistake-meta {
      display: flex;
      flex-direction: column;
      gap: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .mistake-remove {
      padding: 8px 16px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid var(--glass-line);
      color: rgba(255, 255, 255, .8);
      cursor: pointer;
      transition: background .2s ease;
    }

    .mistake-remove:hover {
      background: rgba(255, 107, 107, .2);
      border-color: rgba(255, 107, 107, .4);
    }

    .mistake-empty {
      text-align: center;
      padding: 60px 20px;
      color: var(--muted);
      font-size: 16px;
    }

    @media (max-width: 720px) {
      .mistake-item {
        grid-template-columns: 1fr;
      }
    }

    .book-card b {
      display: block;
      font-size: 22px;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--heading);
      font-family: var(--display-font);
    }

    .book-card span {
      display: block;
      color: var(--text-tertiary);
      font-size: 14px;
      line-height: 1.6;
    }

    .vocab-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-bottom: 40px;
    }

    .vocab-stat {
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      background: var(--glass);
      padding: 22px 16px;
      text-align: center;
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(118%);
    }

    .vocab-stat b {
      display: block;
      font-size: 34px;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--heading);
    }

    .vocab-stat span {
      color: var(--muted);
      font-size: 13px;
    }

    .vocab-study-layout {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }

    .vocab-progress-wrap {
      margin-bottom: 32px;
    }

    .vocab-progress-bar {
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .16);
      overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
    }

    .vocab-progress-bar span {
      display: block;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .75));
      border-radius: 999px;
      transition: width .45s var(--ease-premium);
      box-shadow: 0 0 14px rgba(var(--accent-rgb), .35);
    }

    .vocab-progress-text {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 13px;
      margin-top: 10px;
    }

    .vocab-card {
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-lg);
      background: var(--glass);
      padding: clamp(44px, 10vh, 80px) clamp(28px, 6vw, 60px);
      margin-bottom: 36px;
      min-height: 340px;
      display: grid;
      place-content: center;
      transition: transform .5s var(--ease-premium), box-shadow .5s var(--ease-premium), background .5s var(--ease-premium);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(22px) saturate(118%);
    }

    .vocab-card.revealed {
      background: var(--glass-strong);
      box-shadow: 0 32px 100px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .10);
    }

    .vocab-word {
      font-size: clamp(52px, 11vw, 102px);
      font-weight: 400;
      line-height: 1.05;
      margin-bottom: 4px;
      font-family: var(--display-font);
      color: var(--heading);
      transition: transform .5s var(--ease-premium);
    }

    .vocab-pronounce {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      margin-bottom: 18px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .2);
      background: rgba(255, 255, 255, .1);
      color: var(--heading);
      font-size: 16px;
      cursor: pointer;
      transition: transform .18s ease, background .18s ease;
      backdrop-filter: blur(8px);
    }

    .vocab-pronounce:hover {
      transform: scale(1.1);
      background: rgba(255, 255, 255, .18);
    }

    /* The [hidden] UA rule loses to display:inline-flex above. */
    .vocab-pronounce[hidden] {
      display: none;
    }

    .mistake-pronounce {
      width: 26px;
      height: 26px;
      margin: 0 0 0 8px;
      font-size: 13px;
      vertical-align: middle;
    }

    .vocab-card.revealed .vocab-word {
      transform: scale(.92);
    }

    .vocab-meaning {
      font-size: clamp(18px, 3vw, 26px);
      color: var(--muted);
      line-height: 1.8;
      min-height: 1.8em;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .45s ease, transform .45s ease;
    }

    .vocab-card.revealed .vocab-meaning {
      opacity: 1;
      transform: translateY(0);
    }

    .pos-tag {
      display: inline-block;
      font-size: 0.7em;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--heading);
      background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      padding: 2px 8px;
      margin: 0 3px 0 0;
      vertical-align: middle;
      backdrop-filter: blur(8px);
    }

    .vocab-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 22px;
    }

    .vocab-btn {
      min-height: 58px;
      padding: 0 34px;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 600;
      transition: transform .25s var(--ease-premium), box-shadow .25s var(--ease-premium), opacity .25s var(--ease-premium);
      border: 1px solid transparent;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    }

    .vocab-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    }

    .vocab-btn:active {
      transform: translateY(0);
    }

    .vocab-btn.known {
      background: linear-gradient(135deg, rgba(var(--accent-rgb), .85), rgba(var(--accent-rgb), .65));
      color: var(--inverse-text);
    }

    .vocab-btn.unknown {
      background: linear-gradient(135deg, rgba(var(--accent-2-rgb), .85), rgba(var(--accent-2-rgb), .65));
      color: var(--inverse-text);
    }

    .vocab-btn.secondary {
      background: var(--surface-hover);
      border: 1px solid var(--glass-line);
      color: var(--heading);
    }

    .vocab-btn.secondary:hover {
      background: rgba(255, 255, 255, .14);
    }

    .vocab-hint {
      color: rgba(255, 255, 255, .45);
      font-size: 13px;
      margin-top: 8px;
      letter-spacing: .02em;
    }

    .vocab-hint kbd {
      display: inline-block;
      padding: 3px 9px;
      border-radius: 8px;
      background: var(--surface-hover);
      border: 1px solid var(--glass-line);
      font-size: 12px;
      margin: 0 2px;
    }

    .quiz-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      max-width: 720px;
      margin: 0 auto 18px;
    }

    .quiz-option {
      min-height: 64px;
      padding: 12px 16px;
      border-radius: 16px;
      background: var(--surface-hover);
      border: 1px solid var(--glass-line);
      color: var(--heading);
      font-size: 14px;
      line-height: 1.45;
      text-align: left;
      white-space: normal;
      word-break: break-word;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }

    .quiz-option:hover:not(:disabled) {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, .14);
      border-color: var(--line-strong);
    }

    .quiz-option:disabled {
      opacity: 1;
      cursor: default;
    }

    .quiz-option.correct {
      background: rgba(46, 204, 113, .22);
      border-color: rgba(46, 204, 113, .55);
      color: #d4f8e8;
    }

    .quiz-option.wrong {
      background: rgba(255, 107, 107, .22);
      border-color: rgba(255, 107, 107, .55);
      color: #ffe0e0;
    }

    .vocab-quiz-feedback {
      text-align: center;
      min-height: 28px;
      margin-bottom: 14px;
      font-size: 15px;
      font-weight: 500;
      color: var(--muted);
    }

    .vocab-quiz-feedback.correct {
      color: #7ee8b8;
    }

    .vocab-quiz-feedback.wrong {
      color: #ffb3b3;
    }

    .vocab-insights-layout {
      margin-top: 24px;
    }

    .vocab-result-layout h2 {
      color: var(--heading);
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.08;
      font-weight: 400;
      margin-bottom: 14px;
      font-family: var(--display-font);
    }

    .vocab-result-layout .panel-copy {
      color: var(--text-tertiary);
      margin: 0 auto 8px;
    }

    .vocab-result-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      margin: 36px 0;
    }

    .vocab-result-card {
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      background: var(--glass);
      padding: 30px 22px;
      text-align: center;
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(118%);
    }

    .vocab-result-card b {
      display: block;
      font-size: 40px;
      font-weight: 500;
      margin-bottom: 8px;
      color: var(--heading);
    }

    .vocab-result-card span {
      color: var(--muted);
      font-size: 14px;
    }

    /* Insights page */
    .insights-layout {
      display: grid;
      grid-template-columns: minmax(320px, .85fr) minmax(400px, 1.15fr);
      gap: clamp(28px, 4vw, 56px);
      align-items: start;
    }

    .insights-layout .panel {
      position: sticky;
      top: 28px;
    }

    .insights-insights {
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .insight-item {
      padding: 16px 18px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--glass-line);
      background: var(--glass);
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
      backdrop-filter: blur(18px) saturate(118%);
      box-shadow: var(--glass-shadow);
    }

    .insights-charts {
      display: grid;
      gap: 24px;
    }

    .chart-card {
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      background: var(--glass);
      padding: 24px;
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(118%);
    }

    .about-layout {
      display: grid;
      grid-template-columns: minmax(320px, .85fr) minmax(400px, 1.15fr);
      gap: clamp(28px, 4vw, 56px);
      align-items: start;
    }

    .about-layout .panel {
      position: sticky;
      top: 28px;
    }

    .about-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 28px;
    }

    .about-sections {
      display: grid;
      gap: 24px;
    }

    .about-card {
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      background: var(--glass);
      padding: 26px;
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(118%);
    }

    .about-card h3 {
      color: var(--heading);
      font-size: 18px;
      font-weight: 500;
      margin-bottom: 16px;
    }

    .about-card ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 12px;
    }

    .about-card li {
      position: relative;
      padding-left: 18px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.7;
    }

    .about-card li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 10px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }

    .chart-card h3 {
      color: var(--heading);
      font-size: 17px;
      font-weight: 500;
      margin-bottom: 20px;
      letter-spacing: .01em;
    }

    .chart-card canvas {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Focus heatmap (GitHub-style, Monday-first rows) */
    /* Grid items: let the heatmap shrink to the column and scroll
       instead of forcing the whole insights layout wider. */
    .insights-charts,
    .heatmap-card {
      min-width: 0;
    }

    .heatmap-scroll {
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .heatmap {
      display: flex;
      gap: 3px;
      width: max-content;
      margin: 0 auto;
    }

    .heatmap-week {
      display: grid;
      grid-template-rows: repeat(7, 11px);
      gap: 3px;
    }

    .heatmap-weekdays {
      margin-right: 4px;
    }

    .heatmap-dow {
      height: 11px;
      font-size: 9px;
      line-height: 11px;
      color: var(--muted);
    }

    .heatmap-cell {
      display: block;
      width: 11px;
      height: 11px;
      border-radius: 3px;
      background: var(--surface-hover);
    }

    .heatmap-cell[data-level="1"] {
      background: rgba(var(--accent-rgb), .25);
    }

    .heatmap-cell[data-level="2"] {
      background: rgba(var(--accent-rgb), .45);
    }

    .heatmap-cell[data-level="3"] {
      background: rgba(var(--accent-rgb), .68);
    }

    .heatmap-cell[data-level="4"] {
      background: rgba(var(--accent-rgb), .95);
    }

    .heatmap-cell.is-future {
      background: transparent;
    }

    .heatmap-empty {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }

    .heatmap-legend {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 3px;
      margin-top: 12px;
      color: var(--muted);
      font-size: 11px;
    }

    .heatmap-legend span {
      margin: 0 5px;
    }

    /* Weekly summary card */
    .week-summary-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin: 0 0 22px;
    }

    .week-summary-grid .stat-tile {
      min-height: 88px;
      padding: 14px;
    }

    .week-summary-grid .stat-tile b {
      font-size: clamp(20px, 2.4vw, 26px);
    }

    .week-bars {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 10px;
    }

    .week-bar {
      display: grid;
      grid-template-rows: 84px auto;
      gap: 8px;
      justify-items: center;
    }

    .week-bar-value {
      align-self: end;
      width: 100%;
      max-width: 24px;
      min-height: 2px;
      border-radius: 5px 5px 2px 2px;
      background: rgba(var(--accent-rgb), .55);
    }

    .week-bar.is-today .week-bar-value {
      background: var(--accent);
    }

    .week-bar-label {
      font-size: 11px;
      color: var(--muted);
    }

    .week-bar.is-today .week-bar-label {
      color: var(--accent);
    }

    @media (max-width: 560px) {
      .week-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* Planner page */
    .planner-layout {
      display: grid;
      grid-template-columns: minmax(360px, 1fr) minmax(440px, 1.15fr);
      gap: clamp(32px, 4vw, 64px);
      align-items: start;
    }

    .planner-form {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin: 24px 0;
    }

    .planner-form label {
      display: flex;
      flex-direction: column;
      gap: 8px;
      color: var(--text-tertiary);
      font-size: 13px;
      font-weight: 500;
    }

    .planner-form input {
      width: 100%;
      min-height: 48px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--glass-line);
      background: var(--surface);
      color: var(--heading);
      font-size: 15px;
      padding: 0 14px;
      outline: none;
      transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .planner-form input:focus {
      border-color: rgba(var(--accent-rgb), .55);
      background: var(--surface-hover);
      box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .10);
    }

    .planner-subjects {
      display: grid;
      gap: 16px;
      margin-bottom: 22px;
    }

    .planner-subject {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 18px;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-sm);
      background: var(--glass);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(118%);
    }

    .planner-row {
      display: flex;
      gap: 12px;
      align-items: end;
    }

    .planner-subject .planner-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
      color: var(--text-tertiary);
      font-size: 12px;
      font-weight: 500;
      flex: 1 1 auto;
      min-width: 0;
    }

    .planner-row .planner-field.name {
      flex: 2 1 0;
    }

    .planner-row .planner-field.days,
    .planner-row .planner-field.difficulty,
    .planner-row .planner-field.importance {
      flex: 1 1 0;
    }

    .planner-row .planner-field.activities {
      flex: 2 1 0;
    }

    .planner-subject input {
      min-height: 46px;
      border-radius: 12px;
      border: 1px solid var(--glass-line);
      background: var(--surface);
      color: var(--heading);
      font-size: 15px;
      padding: 0 14px;
      width: 100%;
      outline: none;
      transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .planner-subject input::placeholder {
      color: var(--placeholder);
    }

    .planner-subject input:focus {
      border-color: rgba(var(--accent-rgb), .55);
      background: var(--surface-hover);
      box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .10);
    }

    .activity-dropdown {
      position: relative;
      width: 100%;
    }

    .activity-dropdown-trigger {
      width: 100%;
      min-height: 46px;
      padding: 0 38px 0 14px;
      border-radius: 12px;
      border: 1px solid var(--glass-line);
      background: var(--surface);
      color: var(--heading);
      font-size: 15px;
      text-align: left;
      cursor: pointer;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .activity-dropdown-trigger:hover {
      background: rgba(255, 255, 255, .09);
    }

    .activity-dropdown-trigger::after {
      content: "▼";
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 10px;
      opacity: .55;
    }

    .planner-remove {
      min-height: 46px;
      min-width: 46px;
      border-radius: 12px;
      background: rgba(220, 90, 90, .12);
      border: 1px solid rgba(220, 90, 90, .28);
      color: rgba(255, 180, 180, .85);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease;
    }

    .planner-remove:hover {
      background: rgba(220, 90, 90, .20);
      border-color: rgba(220, 90, 90, .40);
    }

    .activity-sheet {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 22px;
    }

    .activity-sheet.open {
      display: flex;
    }

    .activity-sheet-overlay {
      position: absolute;
      inset: 0;
      background: rgba(4, 6, 6, .62);
      backdrop-filter: blur(4px);
    }

    .activity-sheet-panel {
      position: relative;
      width: min(420px, 100%);
      max-height: min(640px, 90vh);
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 22px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--glass-line);
      background: rgba(16, 19, 19, .96);
      backdrop-filter: blur(22px) saturate(118%);
      box-shadow: var(--glass-shadow);
    }

    .activity-sheet-header {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--glass-line);
    }

    .activity-sheet-title {
      color: var(--heading);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: .01em;
    }

    .activity-sheet-close {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background: var(--surface-hover);
      color: var(--muted);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      transition: background .2s ease;
    }

    .activity-sheet-close:hover {
      background: rgba(255, 255, 255, .14);
    }

    .activity-sheet-options {
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow-y: auto;
    }

    .activity-sheet-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 12px;
      border-radius: 12px;
      cursor: pointer;
      color: var(--text-primary);
      font-size: 15px;
      transition: background .15s ease;
    }

    .activity-sheet-option:hover {
      background: rgba(255, 255, 255, .07);
    }

    .activity-sheet-option input[type="checkbox"] {
      width: 20px;
      height: 20px;
      accent-color: var(--accent);
      flex-shrink: 0;
      cursor: pointer;
    }

    .activity-sheet-done {
      width: 100%;
      min-height: 50px;
      border-radius: var(--radius-sm);
      font-size: 16px;
    }

    .onboarding-modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 22px;
    }

    .onboarding-modal.open {
      display: flex;
    }

    .onboarding-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(4, 6, 6, .72);
      backdrop-filter: blur(8px);
    }

    [data-theme="light"] .onboarding-backdrop {
      background: rgba(240, 242, 245, .82);
    }

    .onboarding-panel {
      position: relative;
      width: min(460px, 100%);
      padding: 38px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--glass-line);
      background: rgba(16, 19, 19, .96);
      backdrop-filter: blur(28px) saturate(150%);
      box-shadow: var(--glass-shadow);
      text-align: center;
    }

    [data-theme="light"] .onboarding-panel {
      background: rgba(255, 255, 255, .96);
      border-color: rgba(0, 0, 0, .08);
    }

    .onboarding-step {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    .onboarding-step.active {
      display: flex;
    }

    .onboarding-emoji {
      font-size: 56px;
      line-height: 1;
    }

    .onboarding-step h2 {
      color: var(--heading);
      font-size: 26px;
      font-weight: 500;
      font-family: var(--display-font);
    }

    .onboarding-step p {
      color: var(--text-tertiary);
      font-size: 15px;
      line-height: 1.75;
      max-width: 340px;
    }

    .onboarding-field {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      width: 100%;
      text-align: left;
      color: var(--muted);
      font-size: 13px;
      font-weight: 500;
    }

    .onboarding-field input {
      width: 100%;
      min-height: 50px;
      padding: 0 16px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--glass-line);
      background: var(--input-bg);
      color: var(--heading);
      font-size: 16px;
      transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .onboarding-field input:focus {
      border-color: rgba(var(--accent-rgb), .55);
      background: var(--surface-hover);
      box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .10);
    }

    .onboarding-langs {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
    }

    .lang-pill {
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid var(--glass-line);
      background: var(--input-bg);
      color: var(--muted);
      font-size: 13px;
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease, color .2s ease;
    }

    .lang-pill:hover {
      background: var(--surface-hover);
    }

    .lang-pill.active {
      background: rgba(var(--accent-rgb), .18);
      border-color: rgba(var(--accent-rgb), .45);
      color: var(--accent);
    }

    [data-theme="light"] .lang-pill {
      color: var(--text-primary);
    }

    [data-theme="light"] .lang-pill.active {
      color: var(--accent);
    }

    .onboarding-next,
    .onboarding-finish {
      width: 100%;
      min-height: 52px;
      margin-top: 8px;
      border-radius: var(--radius-sm);
      font-size: 16px;
    }

    .planner-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .planner-actions .secondary,
    .planner-actions .primary {
      flex: 1 1 auto;
      min-width: 140px;
    }

    .planner-result {
      display: grid;
      gap: 24px;
    }

    .planner-schedule {
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      background: var(--glass);
      padding: 24px;
      backdrop-filter: blur(18px) saturate(118%);
      box-shadow: var(--glass-shadow);
    }

    .planner-schedule h3 {
      color: var(--heading);
      font-size: 17px;
      font-weight: 500;
      margin-bottom: 18px;
      letter-spacing: .01em;
    }

    .planner-timetable {
      display: grid;
      gap: 12px;
    }

    .planner-warning {
      padding: 14px 18px;
      border-radius: var(--radius-sm);
      background: rgba(var(--accent-2-rgb), .10);
      border: 1px solid rgba(var(--accent-2-rgb), .30);
      color: var(--accent-2);
      font-size: 14px;
      font-weight: 500;
      line-height: 1.6;
      margin-bottom: 14px;
    }

    .timetable-block {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 18px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--glass-line);
      background: var(--surface);
      transition: background .2s ease;
    }

    .timetable-block:hover {
      background: var(--surface-hover);
    }

    .timetable-block.rest {
      background: rgba(255, 255, 255, .03);
      border-style: dashed;
    }

    .timetable-time {
      color: var(--muted);
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      min-width: 110px;
    }

    .timetable-info {
      flex: 1;
      color: var(--heading);
      font-size: 15px;
      font-weight: 500;
    }

    .timetable-info span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 3px;
      font-weight: 400;
    }

    .timetable-minutes {
      color: var(--muted);
      font-size: 14px;
      font-weight: 500;
    }

    .planner-summary {
      display: grid;
      gap: 12px;
      margin-top: 24px;
    }

    .planner-summary .planner-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid var(--glass-line);
      color: var(--muted);
      font-size: 14px;
    }

    .planner-summary .planner-row:last-child {
      border-bottom: 0;
    }

    .planner-summary .planner-row b {
      color: var(--heading);
      font-weight: 500;
    }

    /* Light theme overrides for pet center */
    [data-theme="light"] .pet-stage {
      background:
        radial-gradient(circle at 30% 20%, rgba(var(--accent-rgb), .18), transparent 28%),
        radial-gradient(circle at 80% 80%, rgba(var(--accent-2-rgb), .12), transparent 26%),
        linear-gradient(180deg, rgba(243, 239, 229, .90) 0 48%, rgba(235, 231, 220, .96) 49% 100%),
        var(--bg-elevated);
    }

    [data-theme="light"] .pet-stage::before {
      background:
        linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 58px),
        linear-gradient(180deg, #c8d4cb, #9db0a3);
      border-color: rgba(126, 92, 55, .42);
      box-shadow: 0 18px 42px rgba(63, 55, 44, .12);
    }

    [data-theme="light"] .pet-stage::after {
      background: radial-gradient(ellipse, rgba(63, 91, 55, .12), transparent 70%);
    }

    [data-theme="light"] .pet-center-alert {
      background: rgba(var(--accent-2-rgb), .12);
      color: var(--accent-2);
    }

    [data-theme="light"] .choice-button:hover:not(.locked) {
      background: var(--surface-hover);
    }

    [data-theme="light"] .choice-button.locked {
      opacity: .55;
    }

    [data-theme="light"] .pet-look-option.locked {
      opacity: .55;
    }

    [data-theme="light"] .badge.locked {
      opacity: .55;
    }

    /* Smart study features */
    .smart-card {
      background: var(--glass);
      border: 1px solid var(--glass-line);
      border-radius: var(--radius);
      box-shadow: var(--glass-shadow);
      margin: 18px 0 8px;
      padding: 18px 20px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .smart-card-body p {
      margin: 0 0 12px;
      line-height: 1.55;
      color: var(--text-primary);
    }

    .smart-card-body button {
      margin-top: 4px;
    }

    .smart-hint {
      grid-column: 1 / -1;
      margin: 4px 0 10px;
      padding: 10px 14px;
      background: rgba(var(--accent-rgb), .10);
      border: 1px solid rgba(var(--accent-rgb), .22);
      border-radius: var(--radius-sm);
      color: var(--accent);
      font-size: 14px;
      line-height: 1.5;
    }

    .smart-subtext {
      margin-top: 6px;
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .smart-note {
      margin-bottom: 14px;
      padding: 12px 16px;
      background: rgba(var(--accent-2-rgb), .10);
      border: 1px solid rgba(var(--accent-2-rgb), .22);
      border-radius: var(--radius-sm);
      color: var(--accent-2);
      font-size: 14px;
      line-height: 1.5;
    }

    [data-theme="light"] .smart-card {
      background: var(--glass-strong);
    }

    [data-theme="light"] .smart-hint {
      background: rgba(var(--accent-rgb), .12);
    }

    [data-theme="light"] .smart-note {
      background: rgba(var(--accent-2-rgb), .12);
    }

    /* ============================================================
       Mobile refinements — appended last so they win equal-specificity
       ties against rules re-declared after the earlier media blocks.
       ============================================================ */

    /* The original 720px block is nested inside the 560px block above
       (missing closing brace), so it only applied below 560px.
       Re-declare it at its intended width. */
    @media (max-width: 720px) {
      .mistake-item {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      /* .insights-layout/.about-layout/.planner-layout are re-declared
         after the earlier 900px block, silently overriding its
         single-column rule and overflowing small screens. */
      .insights-layout,
      .about-layout,
      .planner-layout {
        grid-template-columns: 1fr;
      }

      .insights-layout .panel,
      .about-layout .panel,
      .planner-layout .panel {
        position: static;
      }

      /* Let the crowded top nav wrap instead of squeezing the brand. */
      .topbar {
        flex-wrap: wrap;
        gap: 10px 14px;
      }

      .brand {
        flex-shrink: 0;
      }

      .nav-links {
        flex-wrap: wrap;
        row-gap: 2px;
      }

      /* Touch targets >= 44px. */
      .quiet-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 2px;
      }

      .theme-toggle,
      .lang-btn {
        width: 44px;
        height: 44px;
      }
    }

    @media (max-width: 560px) {
      /* .vocab-stats is declared after the earlier 560px block, so its
         three-column rule won the tie; two columns fit 390px screens. */
      .vocab-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      /* Keep focus header buttons on one line beside the task title. */
      .focus-actions .focus-control {
        flex-shrink: 0;
        white-space: nowrap;
      }
    }

    /* Feedback chat room */
    .chat-layout {
      display: flex;
      flex-direction: column;
      gap: 14px;
      height: calc(100svh - 190px);
      min-height: 380px;
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 18px;
      border: 1px solid var(--glass-line);
      border-radius: var(--radius-sm);
      background: var(--glass);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(18px) saturate(140%);
    }

    .chat-empty {
      margin: auto;
      color: var(--muted);
      font-size: 13px;
    }

    .chat-msg {
      max-width: 82%;
      padding: 10px 14px;
      border-radius: 14px;
      background: var(--surface-hover);
      border: 1px solid var(--glass-line);
      align-self: flex-start;
    }

    .chat-msg.is-own {
      align-self: flex-end;
      background: rgba(var(--accent-rgb), .14);
      border-color: rgba(var(--accent-rgb), .3);
    }

    .chat-msg-head {
      display: flex;
      gap: 10px;
      align-items: baseline;
      margin-bottom: 4px;
    }

    .chat-msg-name {
      font-size: 12px;
      font-weight: 500;
      color: var(--accent);
    }

    .chat-msg-time {
      font-size: 11px;
      color: var(--muted);
    }

    .chat-msg-body {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-primary);
      word-break: break-word;
      white-space: pre-wrap;
    }

    .chat-error {
      font: inherit;
      border: 1px solid rgba(var(--accent-2-rgb), .4);
      background: rgba(var(--accent-2-rgb), .1);
      color: var(--accent-2);
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      cursor: pointer;
      text-align: center;
    }

    .chat-input-row {
      display: flex;
      gap: 10px;
    }

    .chat-input-row input {
      min-width: 0;
    }

    #chatNickname {
      flex: 0 0 130px;
    }

    #chatInput {
      flex: 1;
      min-width: 0;
    }

    /* .primary defaults to width:100%, which filled the whole flex row
       and squeezed the message input into a sliver; the send button
       should hug its label instead (>= 44px touch height kept). */
    #chatSend {
      flex: 0 0 auto;
      width: auto;
      min-width: 88px;
      min-height: 44px;
    }

    @media (max-width: 560px) {
      .chat-layout {
        height: calc(100svh - 150px);
      }

      .chat-input-row {
        flex-wrap: wrap;
      }

      #chatNickname {
        flex: 0 0 108px;
      }
    }

    /* Vocab detail view (replaces the card face in place after rating) */
    .vocab-card.is-detail {
      place-content: start;
      text-align: left;
      padding: clamp(30px, 6vh, 52px) clamp(24px, 5vw, 48px);
    }

    .vocab-card.is-detail .vocab-word {
      font-size: clamp(30px, 5.5vw, 46px);
      margin-bottom: 2px;
    }

    .vocab-card.is-detail .vocab-meaning {
      margin-top: 10px;
      font-size: clamp(17px, 2.6vw, 22px);
    }

    .vocab-card.is-detail #vocabNextActions {
      display: flex;
      justify-content: center;
      margin-top: 26px;
    }

    .vocab-detail {
      display: grid;
      gap: 16px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid var(--glass-line);
      text-align: left;
    }

    .vocab-detail-phonetic {
      color: var(--muted);
      font-size: 15px;
      letter-spacing: .02em;
    }

    .vocab-detail-phonetic:empty {
      display: none;
    }

    .vocab-detail-section h4 {
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: .08em;
      margin-bottom: 8px;
    }

    .vocab-example-item,
    .vocab-usage-item {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text-primary);
      padding: 6px 0;
      border-top: 1px solid var(--glass-line);
      overflow-wrap: break-word;
    }

    .vocab-example-item:first-child,
    .vocab-usage-item:first-child {
      border-top: none;
    }

    .vocab-usage-item {
      color: var(--text-secondary);
    }

    .vocab-form-chip {
      display: inline-block;
      margin: 0 8px 8px 0;
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid rgba(var(--accent-rgb), .3);
      background: rgba(var(--accent-rgb), .1);
      color: var(--accent);
      font-size: 13px;
      line-height: 1.5;
    }

    #vocabExamples:empty::before {
      content: "…";
      color: var(--muted);
    }

    .vocab-next {
      min-width: 220px;
      background: var(--inverse);
      color: var(--inverse-text);
    }

    .vocab-next:hover {
      background: var(--inverse-hover);
    }

    @media (max-width: 560px) {
      .vocab-detail {
        gap: 14px;
      }

      .vocab-next {
        width: 100%;
      }
    }