:root {
      --navy: #183A52;
      --navy-dark: #102B3E;
      --navy-hover: #224B66;
      --ochre: #D2A13A;
      --ochre-mid: #D8AE52;
      --ochre-light: #E2C276;
      --white: #FFFFFF;
      --cream: #F8F1DE;
      --danger: #9E3E38;
      --success: #276543;
      /*
      Spec 47 Part 4: the spoken lesson's per-question timer bar only —
      no other element uses this yet.
      */
      --sky: #6FA8C9;
      --topbar-height: 88px;
      --footer-height: 58px;
      --pb-app-height: 100vh;
    }
    * {
      box-sizing: border-box;
    }
    html,
    body {
      margin: 0;
      width: 100%;
      min-width: 0;
      height: 100%;
      overflow: hidden;
    }
    body {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: var(--pb-app-height, 100vh);
      min-height: 100vh;
      font-family:
        "Crimson Pro",
        "Noto Serif",
        Georgia,
        serif;
      font-size: 18px;
      color: var(--navy);
      background:
        linear-gradient(
          180deg,
          var(--ochre) 0%,
          var(--ochre-mid) 58%,
          var(--ochre-light) 100%
        );
    }
    @supports (height: 100dvh) {
      :root {
        --pb-app-height: 100dvh;
      }
      body {
        min-height: 100dvh;
      }
    }
    button,
    select,
    input,
    textarea {
      font: inherit;
      color: inherit;
    }
    button {
      cursor: pointer;
    }
    button:disabled,
    select:disabled,
    input:disabled,
    textarea:disabled {
      cursor: not-allowed;
      opacity: .58;
    }
    .hidden {
      display: none !important;
    }
    /* =====================================================
       TOP BAR
       ===================================================== */
    .topbar {
      position: relative;
      z-index: 100;
      flex: 0 0 var(--topbar-height);
      width: 100%;
      height: var(--topbar-height);
      overflow: visible;
      background: var(--navy);
      color: var(--white);
      box-shadow:
        0 5px 18px rgba(16, 43, 62, .17);
    }
    .topbar-inner {
      width: min(1500px, 100%);
      height: 100%;
      margin: 0 auto;
      padding: 0 34px;
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .top-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 0 1 auto;
    }
    .top-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      min-width: 0;
    }
    .auth-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .top-brand {
      border: 0;
      padding:
        3px 7px 5px 0;
      margin-right: 5px;
      background: transparent;
      color: var(--white);
      font-family:
        "Crimson Pro",
        "Noto Serif",
        Georgia,
        serif;
      font-size: 1.85rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.025em;
      white-space: nowrap;
      cursor: pointer;
      transition:
        opacity .15s ease;
    }
    .top-brand:hover {
      opacity: .78;
    }
    .topbar .email {
      display: inline-block;
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 3px 0 4px;
      color:
        rgba(255, 255, 255, .88);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.25;
    }
    .consistency-indicator {
      min-width: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 1px 3px;
      color: var(--ochre);
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      cursor: default;
    }
    .nav-btn {
      border:
        1px solid rgba(255, 255, 255, .32);
      border-radius: 11px;
      padding:
        11px 17px;
      background: transparent;
      color: var(--white);
      font-weight: 600;
      font-size: 1.04rem;
      transition:
        background .16s ease,
        transform .16s ease,
        border-color .16s ease;
    }
    .nav-btn:hover:not(:disabled) {
      background:
        rgba(255, 255, 255, .10);
      border-color:
        rgba(255, 255, 255, .52);
      transform:
        translateY(-1px);
    }
    .nav-btn.emphasis {
      background:
        rgba(255, 255, 255, .12);
      border-color:
        rgba(255, 255, 255, .48);
    }
    .user-menu-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .user-menu-btn {
      width: 45px;
      height: 45px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border:
        1px solid rgba(255, 255, 255, .30);
      border-radius: 11px;
      background: transparent;
      color: var(--white);
      font-size: 1.72rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: .03em;
      transition:
        background .15s ease,
        border-color .15s ease;
    }
    .user-menu-btn:hover,
    .user-menu-btn[aria-expanded="true"] {
      background:
        rgba(255, 255, 255, .10);
      border-color:
        rgba(255, 255, 255, .52);
    }
    .user-menu-dropdown {
      position: absolute;
      top: calc(100% + 9px);
      right: 0;
      width: 224px;
      overflow: hidden;
      padding: 6px;
      border:
        1px solid rgba(24, 58, 82, .13);
      border-radius: 13px;
      background: var(--white);
      color: var(--navy);
      box-shadow:
        0 14px 34px rgba(16, 43, 62, .18);
    }
    .user-menu-item {
      width: 100%;
      min-height: 42px;
      display: flex;
      align-items: center;
      padding: 9px 11px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--navy);
      text-align: left;
      font-weight: 600;
      font-size: .95rem;
    }
    .user-menu-item:hover {
      background:
        rgba(24, 58, 82, .07);
    }
    .user-menu-divider {
      height: 1px;
      margin: 5px 4px;
      background:
        rgba(24, 58, 82, .11);
    }
    .user-menu-item.danger {
      color: #8a3131;
    }
    /* =====================================================
       SETTINGS
       ===================================================== */
    .settings-card {
      width:
        min(720px, 100%);
    }
    .settings-card h3 {
      margin-bottom: 7px;
    }
    .settings-intro {
      margin:
        0 0 24px;
      color:
        rgba(24, 58, 82, .66);
      line-height: 1.45;
    }
    .settings-row {
      display: grid;
      grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 300px);
      gap: 24px;
      align-items: center;
      padding:
        18px 0;
      border-top:
        1px solid rgba(24, 58, 82, .11);
    }
    .settings-row-copy strong {
      display: block;
      margin-bottom: 4px;
      font-size: 1.03rem;
    }
    .settings-row-copy span {
      color:
        rgba(24, 58, 82, .62);
      font-size: .88rem;
      line-height: 1.4;
    }
    .settings-language-select {
      width: 100%;
      min-height: 46px;
      padding:
        10px 38px 10px 12px;
      border:
        1px solid rgba(24, 58, 82, .18);
      border-radius: 11px;
      background: var(--white);
      color: var(--navy);
    }
    .settings-toggle-control {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }
    .settings-toggle {
      position: relative;
      width: 50px;
      height: 29px;
      display: inline-block;
      flex: 0 0 auto;
    }
    .settings-toggle input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .settings-toggle-slider {
      position: absolute;
      inset: 0;
      border:
        1px solid rgba(24, 58, 82, .22);
      border-radius: 999px;
      background:
        rgba(24, 58, 82, .13);
      cursor: pointer;
      transition:
        background .16s ease,
        border-color .16s ease;
    }
    .settings-toggle-slider::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 21px;
      height: 21px;
      border-radius: 50%;
      background: var(--white);
      box-shadow:
        0 2px 7px rgba(16, 43, 62, .18);
      transition:
        transform .16s ease;
    }
    .settings-toggle input:checked +
    .settings-toggle-slider {
      border-color:
        rgba(24, 58, 82, .72);
      background: var(--navy);
    }
    .settings-toggle input:checked +
    .settings-toggle-slider::after {
      transform:
        translateX(21px);
    }
    .settings-toggle input:focus-visible +
    .settings-toggle-slider {
      outline:
        3px solid rgba(24, 58, 82, .16);
      outline-offset: 3px;
    }
    .settings-toggle-state {
      min-width: 28px;
      color:
        rgba(24, 58, 82, .68);
      font-size: .88rem;
      font-weight: 650;
    }
    .settings-note {
      margin:
        18px 0 0;
      padding:
        12px 14px;
      border-radius: 10px;
      background:
        rgba(24, 58, 82, .055);
      color:
        rgba(24, 58, 82, .65);
      font-size: .84rem;
      line-height: 1.45;
    }

    /* =====================================================
       CHARACTER
       ===================================================== */
    .plainbetter-character {
      display: none;
      position: fixed;
      z-index: 125;
      width: 98px;
      height: 154px;
      opacity: 1;
      pointer-events: none;
      will-change:
        opacity,
        left,
        top;
      filter:
        drop-shadow(
          0 4px 2px rgba(16, 43, 62, .09)
        );
    }
    .plainbetter-character svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .plainbetter-character.login-visible {
      display: block;
    }
    .character-line {
      fill: none;
      stroke: var(--navy-dark);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .character-head {
      fill: var(--cream);
      stroke: var(--navy-dark);
      stroke-width: 5;
    }
    .character-hand {
      fill: var(--cream);
      stroke: var(--navy-dark);
      stroke-width: 3.5;
    }
    .character-phone {
      fill: var(--white);
      stroke: var(--navy-dark);
      stroke-width: 3.2;
    }
    .character-phone-detail {
      fill: none;
      stroke: var(--navy-dark);
      stroke-width: 1.4;
      stroke-linecap: round;
    }
    .pose-hang,
    .pose-sit {
      display: none;
    }
    .character-hanging .pose-hang {
      display: block;
    }
    .character-sitting .pose-sit {
      display: block;
    }
    .character-hanging {
      transform-origin:
        25px 3px;
      animation:
        plainbetterSwing
        4.2s
        ease-in-out
        infinite;
    }
    .character-sitting {
      animation: none;
    }
    @keyframes plainbetterSwing {
      0% {
        transform:
          rotate(-5deg);
      }
      50% {
        transform:
          rotate(6deg);
      }
      100% {
        transform:
          rotate(-5deg);
      }
    }
    /* =====================================================
       APP
       ===================================================== */
    .app {
      position: relative;
      flex: 1 1 auto;
      width: 100%;
      min-height: 0;
      overflow: hidden;
    }
    .screen {
      display: none;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 0;
      color: var(--navy);
    }
    .screen.active {
      display: flex;
    }
    .column-screen {
      flex-direction: column;
      min-height: 0;
    }
    .center-screen {
      justify-content: center;
      padding:
        32px 28px;
      overflow-y: auto;
      min-height: 0;
    }
    /* =====================================================
       HOME
       ===================================================== */
    .home-screen {
      flex-direction: column;
      align-items: stretch;
      overflow: hidden;
      min-height: 0;
      padding:
        clamp(14px, 3vh, 28px)
        0
        clamp(14px, 3vh, 30px);
    }
    .home-title {
      flex: 0 0 auto;
      text-align: center;
      padding:
        clamp(4px, 1.2vh, 10px)
        24px
        4px;
    }
    .brand-title {
      margin: 0;
      color: var(--navy);
      font-size:
        clamp(
          3.4rem,
          min(7vw, 10vh),
          6.5rem
        );
      line-height: .94;
      letter-spacing: -.045em;
      font-weight: 400;
    }
    .brand-subtitle {
      margin-top: 12px;
      color:
        rgba(24, 58, 82, .82);
      font-size:
        clamp(1.65rem, 3vw, 2.25rem);
      font-weight: 400;
    }
    .mode-grid {
      flex: 1 1 auto;
      width:
        min(1340px, calc(100% - 72px));
      min-height: 0;
      margin:
        clamp(14px, 3vh, 28px)
        auto
        0;
      display: grid;
      grid-template-columns:
        1fr 1fr;
      grid-template-rows:
        minmax(0, 292px);
      gap: 24px;
      align-content: center;
    }
    .mode-tile {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding:
        clamp(20px, 3.5vh, 34px)
        55px;
      border:
        1px solid rgba(24, 58, 82, .17);
      border-radius: 23px;
      background:
        rgba(255, 255, 255, .73);
      color: var(--navy);
      text-align: center;
      box-shadow:
        0 11px 30px rgba(16, 43, 62, .08);
      transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        border-color .2s ease;
    }
    .mode-tile::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, .23),
          transparent 50%
        );
    }
    .mode-tile:hover {
      transform:
        translateY(-5px);
      background:
        rgba(255, 255, 255, .88);
      border-color:
        rgba(24, 58, 82, .27);
      box-shadow:
        0 20px 42px rgba(16, 43, 62, .14);
    }
    .mode-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 430px;
    }
    .mode-icon {
      width: 70px;
      height: 70px;
      margin-bottom: 18px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: var(--navy);
      color: var(--white);
      font-size: 1.8rem;
      font-weight: 700;
      box-shadow:
        0 10px 22px rgba(16, 43, 62, .18);
      transition:
        transform .2s ease;
    }
    .mode-tile:hover .mode-icon {
      transform:
        scale(1.045);
    }
    .mode-title {
      display: block;
      margin-bottom: 8px;
      font-size: 2rem;
      line-height: 1;
      font-weight: 600;
    }
    .mode-description {
      color:
        rgba(24, 58, 82, .72);
      font-size: 1.1rem;
      line-height: 1.42;
      font-weight: 400;
    }
    .mode-enter {
      margin-top: 17px;
      font-size: 1.2rem;
      font-weight: 600;
      transition:
        transform .2s ease;
    }
    .mode-tile:hover .mode-enter {
      transform:
        translateX(4px);
    }

    /* =====================================================
       NEW LANGUAGE ONBOARDING
       ===================================================== */
    .language-onboarding-screen {
      flex-direction: column;
      overflow-y: auto;
      min-height: 0;
      padding:
        28px 24px
        46px;
    }
    .language-onboarding-shell {
      width:
        min(850px, 100%);
      margin:
        0 auto;
    }
    .language-onboarding-heading {
      display: flex;
      align-items: center;
      gap: 13px;
      margin-bottom: 24px;
    }
    .language-onboarding-heading img {
      width: 48px;
      height: 32px;
      border-radius: 5px;
      object-fit: cover;
      box-shadow:
        0 0 0 1px rgba(24, 58, 82, .10);
    }
    .language-onboarding-heading h1 {
      margin: 0;
      font-size:
        clamp(2rem, 4vw, 2.7rem);
      line-height: 1.08;
    }
    .starting-level-card {
      padding:
        24px;
      border:
        1px solid rgba(24, 58, 82, .17);
      border-radius: 19px;
      background:
        rgba(255, 255, 255, .90);
      box-shadow:
        0 12px 30px rgba(16, 43, 62, .07);
    }
    .starting-level-card h2 {
      margin:
        0 0 8px;
      font-size: 1.75rem;
      font-weight: 600;
    }
    .starting-level-card > p {
      max-width: 650px;
      margin:
        0 0 20px;
      color:
        rgba(24, 58, 82, .68);
      font-size: .98rem;
      line-height: 1.5;
    }
    .starting-level-options {
      display: grid;
      grid-template-columns:
        1fr 1fr;
      gap: 13px;
    }
    .starting-level-option {
      min-height: 154px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding:
        18px;
      border:
        1px solid rgba(24, 58, 82, .16);
      border-radius: 15px;
      background:
        rgba(250, 249, 242, .78);
      color: var(--navy);
      text-align: left;
      transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
    }
    .starting-level-option:hover:not(:disabled) {
      transform:
        translateY(-2px);
      border-color:
        rgba(24, 58, 82, .32);
      background: var(--white);
      box-shadow:
        0 8px 20px rgba(16, 43, 62, .06);
    }
    .starting-level-option:disabled {
      opacity: .48;
      cursor: default;
    }
    .starting-level-option-kicker {
      margin-bottom: 8px;
      color:
        rgba(24, 58, 82, .55);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .055em;
      text-transform: uppercase;
    }
    .starting-level-option-title {
      font-size: 1.18rem;
      font-weight: 650;
      line-height: 1.22;
    }
    .starting-level-option-copy {
      margin-top: 8px;
      color:
        rgba(24, 58, 82, .65);
      font-size: .87rem;
      line-height: 1.42;
    }
    .starting-level-option-meta {
      margin-top: auto;
      padding-top: 13px;
      color:
        rgba(24, 58, 82, .72);
      font-size: .79rem;
      font-weight: 650;
    }
    .onboarding-resume {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding:
        18px;
      border-radius: 14px;
      background:
        rgba(24, 58, 82, .065);
    }
    .onboarding-resume-copy strong {
      display: block;
      margin-bottom: 4px;
      font-size: 1.03rem;
    }
    .onboarding-resume-copy span {
      color:
        rgba(24, 58, 82, .65);
      font-size: .87rem;
      line-height: 1.35;
    }
    .onboarding-resume .secondary-btn {
      flex:
        0 0 auto;
      margin: 0;
    }
    .dashboard-onboarding-prompt {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      padding:
        17px 18px;
      border:
        1px solid rgba(24, 58, 82, .14);
      border-radius: 14px;
      background:
        rgba(255, 255, 255, .72);
    }
    .dashboard-onboarding-prompt strong {
      display: block;
      margin-bottom: 4px;
    }
    .dashboard-onboarding-prompt p {
      margin: 0;
      color:
        rgba(24, 58, 82, .64);
      font-size: .84rem;
      line-height: 1.38;
    }
    .dashboard-onboarding-prompt .secondary-btn {
      flex:
        0 0 auto;
      margin: 0;
    }

    /* =====================================================
       INITIAL GRAMMAR PLACEMENT
       ===================================================== */
    .grammar-placement-wrap {
      flex: 1;
      display: flex;
      justify-content: center;
      padding:
        24px;
      overflow-y: auto;
      min-height: 0;
    }
    .grammar-placement-card {
      width:
        min(720px, 100%);
      margin: auto;
      padding:
        28px;
      border:
        1px solid rgba(24, 58, 82, .16);
      border-radius: 18px;
      background:
        rgba(255, 255, 255, .92);
      box-shadow:
        0 12px 28px rgba(16, 43, 62, .07);
    }
    .grammar-placement-label {
      margin-top: 24px;
      color:
        rgba(24, 58, 82, .56);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .055em;
      text-transform: uppercase;
    }
    .grammar-placement-prompt {
      margin:
        7px 0 21px;
      font-size:
        clamp(1.5rem, 3vw, 2rem);
      font-weight: 600;
      line-height: 1.24;
    }
    .grammar-placement-answer {
      width: 100%;
      min-height: 49px;
      padding:
        11px 13px;
      border:
        1px solid rgba(24, 58, 82, .20);
      border-radius: 11px;
      background: var(--white);
      color: var(--navy);
      font: inherit;
      outline: none;
    }
    .grammar-placement-answer:focus {
      border-color:
        rgba(24, 58, 82, .55);
      box-shadow:
        0 0 0 3px rgba(24, 58, 82, .06);
    }
    .grammar-placement-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 11px;
      margin-top: 16px;
    }
    .grammar-placement-actions .big-btn {
      width: auto;
      min-width: 150px;
      margin: 0;
    }
    .grammar-placement-skip {
      border: 0;
      background: transparent;
      color:
        rgba(24, 58, 82, .58);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .grammar-placement-message {
      margin-top: 12px;
      color:
        rgba(24, 58, 82, .66);
      font-size: .86rem;
      line-height: 1.4;
    }

    /* =====================================================
       GRAMMAR LEARNING
       ===================================================== */
    .grammar-learning-screen {
      flex-direction: column;
      overflow-y: auto;
      min-height: 0;
      padding:
        26px 28px
        44px;
    }
    .grammar-learning-shell {
      width:
        min(980px, 100%);
      margin:
        0 auto;
    }
    .grammar-learning-heading {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }
    .grammar-learning-heading img {
      flex: 0 0 auto;
      width: 54px;
      height: 36px;
      border-radius: 5px;
      object-fit: cover;
      box-shadow:
        0 1px 4px rgba(16, 43, 62, .16);
    }
    .grammar-learning-heading h1 {
      margin: 0;
      font-size:
        clamp(2.45rem, 5vw, 4rem);
    }
    .grammar-current-level {
      width: 100%;
      display: block;
      margin: 0;
      padding:
        19px 20px;
      border:
        1px solid rgba(24, 58, 82, .16);
      border-radius: 17px;
      background:
        rgba(255, 255, 255, .84);
      color: var(--navy);
      text-align: left;
      box-shadow:
        0 8px 23px rgba(16, 43, 62, .065);
      transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
    }
    .grammar-current-level:hover:not(:disabled) {
      transform:
        translateY(-2px);
      background: var(--white);
      border-color:
        rgba(24, 58, 82, .29);
      box-shadow:
        0 12px 28px rgba(16, 43, 62, .09);
    }
    .grammar-current-level-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
    }
    .grammar-current-level-label {
      color:
        rgba(24, 58, 82, .62);
      font-size: .82rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .grammar-current-level-value {
      margin-top: 3px;
      font-size: 1.55rem;
      font-weight: 600;
      line-height: 1.12;
    }
    .grammar-current-level-percent {
      flex: 0 0 auto;
      font-size: 1.08rem;
      font-weight: 600;
    }
    .grammar-current-progress {
      height: 10px;
      margin-top: 13px;
      overflow: hidden;
      border-radius: 999px;
      background:
        rgba(24, 58, 82, .11);
    }
    .grammar-current-progress-fill {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: var(--navy);
      transition:
        width .24s ease;
    }
    .grammar-current-level-foot {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 9px;
      color:
        rgba(24, 58, 82, .61);
      font-size: .82rem;
      line-height: 1.4;
    }
    .grammar-current-level-foot span:last-child {
      flex: 0 0 auto;
      font-weight: 600;
    }
    .grammar-recommendations-section {
      margin-top: 26px;
    }
    .grammar-recommendations-section h2 {
      margin:
        0 0 13px;
      font-size: 1.65rem;
      font-weight: 600;
    }
    .grammar-recommendations {
      display: grid;
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .grammar-recommendation-card {
      min-width: 0;
      min-height: 196px;
      display: flex;
      flex-direction: column;
      padding:
        17px;
      border:
        1px solid rgba(24, 58, 82, .15);
      border-radius: 15px;
      background:
        rgba(255, 255, 255, .86);
      color: var(--navy);
      box-shadow:
        0 7px 19px rgba(16, 43, 62, .055);
    }
    .grammar-recommendation-rank {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      margin-bottom: 11px;
      border-radius: 9px;
      background: var(--navy);
      color: var(--white);
      font-size: .88rem;
      font-weight: 700;
    }
    .grammar-recommendation-name {
      font-size: 1.17rem;
      font-weight: 600;
      line-height: 1.22;
    }
    .grammar-recommendation-outcome {
      margin-top: 7px;
      color:
        rgba(24, 58, 82, .64);
      font-size: .91rem;
      line-height: 1.4;
    }
    .grammar-recommendation-actions {
      margin-top: auto;
      padding-top: 15px;
    }
    .grammar-practise-btn {
      width: 100%;
      border: 0;
      border-radius: 10px;
      padding:
        10px 12px;
      background: var(--navy);
      color: var(--white);
      font-weight: 600;
      transition:
        transform .15s ease,
        background .15s ease;
    }
    .grammar-practise-btn:hover {
      transform:
        translateY(-1px);
      background: var(--navy-hover);
    }
    .grammar-tutor-toggle {
      width: 100%;
      margin-top: 8px;
      border:
        1px solid rgba(24, 58, 82, .18);
      border-radius: 10px;
      padding:
        9px 11px;
      background:
        rgba(255, 255, 255, .68);
      color: var(--navy);
      font-weight: 600;
      transition:
        background .15s ease,
        border-color .15s ease;
    }
    .grammar-tutor-toggle:hover {
      background: var(--white);
      border-color:
        rgba(24, 58, 82, .34);
    }
    .grammar-tutor-toggle.active {
      border-color: var(--navy);
      background:
        rgba(24, 58, 82, .07);
    }
    .grammar-lesson-btn {
      width: 100%;
      margin-top: 8px;
      border: 0;
      border-radius: 10px;
      padding:
        10px 12px;
      background: var(--ochre);
      color: var(--navy);
      font-weight: 600;
      transition:
        transform .15s ease,
        background .15s ease;
    }
    .grammar-lesson-btn:hover {
      transform:
        translateY(-1px);
      background: var(--ochre-mid);
    }
    .grammar-tutor-workspace {
      width: 100%;
      margin-top: 16px;
      padding: 20px;
      border:
        1px solid rgba(24, 58, 82, .16);
      border-radius: 16px;
      background:
        rgba(255, 255, 255, .91);
      box-shadow:
        0 9px 24px rgba(16, 43, 62, .07);
      scroll-margin-top: 18px;
    }
    .grammar-tutor-workspace-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 15px;
    }
    .grammar-tutor-workspace-label {
      margin-bottom: 4px;
      color:
        rgba(24, 58, 82, .56);
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .grammar-tutor-workspace-head h3 {
      margin:
        0 0 5px;
      font-size: 1.32rem;
      font-weight: 600;
      line-height: 1.2;
    }
    .grammar-tutor-workspace-outcome {
      max-width: 700px;
      margin: 0;
      color:
        rgba(24, 58, 82, .64);
      font-size: .9rem;
      line-height: 1.42;
    }
    .grammar-tutor-close {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border:
        1px solid rgba(24, 58, 82, .15);
      border-radius: 9px;
      background:
        rgba(255, 255, 255, .66);
      color:
        rgba(24, 58, 82, .66);
      font-size: 1.35rem;
      line-height: 1;
    }
    .grammar-tutor-close:hover {
      background: var(--white);
      color: var(--navy);
    }
    .grammar-tutor-thread {
      display: flex;
      flex-direction: column;
      gap: 9px;
      max-height: 360px;
      min-height: 0;
      margin-bottom: 11px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .grammar-tutor-workspace-thread {
      min-height: 48px;
      padding:
        3px 1px;
    }
    .grammar-tutor-empty {
      color:
        rgba(24, 58, 82, .58);
      font-size: .82rem;
      line-height: 1.38;
    }
    .grammar-tutor-message {
      max-width:
        min(88%, 720px);
      padding:
        9px 11px;
      border-radius: 11px;
      font-size: .9rem;
      line-height: 1.48;
      white-space: pre-wrap;
    }
    .grammar-tutor-message.user {
      align-self: flex-end;
      background: var(--navy);
      color: var(--white);
      border-bottom-right-radius: 4px;
    }
    .grammar-tutor-message.assistant {
      align-self: flex-start;
      background:
        rgba(209, 160, 61, .14);
      color: var(--navy);
      border:
        1px solid rgba(209, 160, 61, .18);
      border-bottom-left-radius: 4px;
    }
    .grammar-tutor-message strong {
      font-weight: 700;
    }
    .grammar-tutor-form {
      display: flex;
      gap: 7px;
      align-items: flex-end;
    }
    .grammar-tutor-input {
      min-width: 0;
      flex: 1;
      min-height: 38px;
      max-height: 108px;
      resize: vertical;
      padding:
        8px 9px;
      border:
        1px solid rgba(24, 58, 82, .18);
      border-radius: 9px;
      background: var(--white);
      color: var(--navy);
      font: inherit;
      font-size: .82rem;
      line-height: 1.35;
      outline: none;
    }
    .grammar-tutor-input:focus {
      border-color:
        rgba(24, 58, 82, .50);
      box-shadow:
        0 0 0 3px rgba(24, 58, 82, .05);
    }
    .grammar-tutor-send {
      flex: 0 0 auto;
      min-height: 38px;
      padding:
        8px 10px;
      border: 0;
      border-radius: 9px;
      background: var(--navy);
      color: var(--white);
      font-weight: 600;
    }
    .grammar-tutor-send:disabled,
    .grammar-tutor-input:disabled {
      opacity: .55;
      cursor: default;
    }
    .grammar-tutor-error {
      margin-top: 7px;
      color: #8d2828;
      font-size: .78rem;
      line-height: 1.35;
    }
    .grammar-lesson-explanation {
      margin-bottom: 20px;
      color: var(--navy);
      line-height: 1.55;
    }
    .grammar-lesson-explanation p {
      margin:
        0 0 12px;
    }
    .grammar-lesson-explanation p:last-child {
      margin-bottom: 0;
    }
    .grammar-lesson-examples {
      margin-bottom: 20px;
    }
    .grammar-lesson-examples .sentence-hint {
      margin: 0 0 10px;
    }
    .grammar-lesson-examples .sentence-hint:last-child {
      margin-bottom: 0;
    }
    .grammar-recall-results-list {
      list-style: none;
      padding: 0;
      margin:
        0 0 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .grammar-recall-results-list .answer-feedback {
      margin: 0;
    }
    .grammar-learning-message {
      padding:
        16px 17px;
      border:
        1px solid rgba(24, 58, 82, .13);
      border-radius: 13px;
      background:
        rgba(255, 255, 255, .70);
      color:
        rgba(24, 58, 82, .67);
      line-height: 1.45;
    }

    /* Focused grammar practice in Chat */
    .chat-workspace.practice-mode {
      width:
        min(1480px, calc(100% - 44px));
      grid-template-columns:
        280px minmax(0, 1fr) 280px;
      gap: 22px;
    }
    .practice-focus {
      align-self: start;
      padding: 18px;
      border:
        1px solid rgba(24, 58, 82, .18);
      border-radius: 14px;
      background:
        rgba(255, 255, 255, .88);
      box-shadow:
        0 7px 20px rgba(16, 43, 62, .065);
    }
    .practice-focus-label {
      margin-bottom: 8px;
      color:
        rgba(24, 58, 82, .60);
      font-size: .79rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .practice-focus-name {
      font-size: 1.16rem;
      font-weight: 600;
      line-height: 1.24;
    }
    .practice-focus-outcome {
      margin-top: 9px;
      color:
        rgba(24, 58, 82, .72);
      font-size: .94rem;
      line-height: 1.45;
    }
    .practice-focus-note {
      margin-top: 13px;
      padding-top: 11px;
      border-top:
        1px solid rgba(24, 58, 82, .11);
      color:
        rgba(24, 58, 82, .58);
      font-size: .82rem;
      line-height: 1.4;
    }

    /* =====================================================
       SETUP
       ===================================================== */
    .setup-content {
      width:
        min(650px, 100%);
      margin: auto;
    }
    .eyebrow {
      display: inline-flex;
      margin-bottom: 12px;
      color:
        rgba(24, 58, 82, .72);
      font-size: .88rem;
      font-weight: 600;
      letter-spacing: .10em;
      text-transform: uppercase;
    }
    h1 {
      margin: 0;
      color: var(--navy);
      font-size:
        clamp(2.45rem, 5vw, 4rem);
      line-height: .98;
      letter-spacing: -.035em;
      font-weight: 400;
    }
    h2,
    h3 {
      margin-top: 0;
      color: var(--navy);
      font-weight: 500;
    }
    .intro {
      margin:
        17px 0 30px;
      color:
        rgba(24, 58, 82, .76);
      font-size: 1.08rem;
      line-height: 1.52;
    }
    .field {
      margin-bottom: 18px;
    }
    .field label {
      display: block;
      margin-bottom: 8px;
      font-size: .98rem;
      font-weight: 600;
    }
    .field-help {
      margin:
        7px 0 0;
      color:
        rgba(24, 58, 82, .69);
      font-size: .88rem;
      line-height: 1.45;
    }
    .chat-difficulty-options {
      display: grid;
      grid-template-columns:
        1fr 1fr;
      gap: 11px;
    }
    .chat-difficulty-option {
      min-height: 92px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding:
        15px 16px;
      border:
        1px solid rgba(24, 58, 82, .16);
      border-radius: 14px;
      background:
        rgba(255, 255, 255, .72);
      color: var(--navy);
      text-align: left;
      transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
    }
    .chat-difficulty-option:hover {
      transform:
        translateY(-1px);
      border-color:
        rgba(24, 58, 82, .32);
      background: var(--white);
    }
    .chat-difficulty-option.selected {
      border-color:
        rgba(24, 58, 82, .66);
      background: var(--white);
      box-shadow:
        0 5px 14px rgba(16, 43, 62, .08);
    }
    .chat-difficulty-title {
      font-size: 1.04rem;
      font-weight: 650;
      line-height: 1.2;
    }
    .chat-difficulty-copy {
      margin-top: 6px;
      color:
        rgba(24, 58, 82, .62);
      font-size: .84rem;
      line-height: 1.35;
    }
    .select-wrap {
      position: relative;
    }
    .select-wrap::after {
      content: "⌄";
      position: absolute;
      right: 16px;
      top: 50%;
      transform:
        translateY(-56%);
      pointer-events: none;
      color:
        rgba(24, 58, 82, .65);
    }
    select,
    input,
    textarea {
      width: 100%;
      border:
        1px solid rgba(24, 58, 82, .20);
      border-radius: 13px;
      outline: none;
      background:
        rgba(255, 255, 255, .94);
      color: var(--navy);
      box-shadow:
        0 5px 14px rgba(16, 43, 62, .045);
    }
    select {
      appearance: none;
      padding:
        14px 44px 14px 15px;
    }
    input {
      padding:
        13px 15px;
    }
    textarea {
      min-height: 135px;
      padding:
        13px 15px;
      resize: vertical;
      line-height: 1.5;
    }
    select:focus,
    input:focus,
    textarea:focus {
      border-color:
        rgba(24, 58, 82, .54);
      box-shadow:
        0 0 0 4px rgba(24, 58, 82, .08);
    }
    .custom {
      margin:
        -2px 0 18px;
      padding: 15px;
      border:
        1px solid rgba(24, 58, 82, .16);
      border-radius: 15px;
      background:
        rgba(255, 255, 255, .28);
    }
    .custom-footer {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 7px;
      color:
        rgba(24, 58, 82, .68);
      font-size: .83rem;
    }
    .notice {
      margin-bottom: 18px;
      padding:
        12px 14px;
      border:
        1px solid rgba(158, 62, 56, .28);
      border-radius: 12px;
      background:
        rgba(255, 247, 244, .92);
      color: var(--danger);
      font-size: .93rem;
      line-height: 1.45;
    }
    .error {
      color: var(--danger);
      font-weight: 600;
    }
    .big-btn {
      width: 100%;
      border: 0;
      border-radius: 14px;
      padding:
        14px 18px;
      background: var(--navy);
      color: var(--white);
      font-weight: 600;
      box-shadow:
        0 8px 19px rgba(16, 43, 62, .16);
      transition:
        background .17s ease,
        transform .17s ease;
    }
    .big-btn:hover:not(:disabled) {
      background: var(--navy-hover);
      transform:
        translateY(-1px);
    }
    .credit {
      margin-top: 16px;
      color:
        rgba(24, 58, 82, .61);
      font-size: .77rem;
      text-align: center;
      line-height: 1.45;
    }
    .credit a {
      color: inherit;
    }
    /* =====================================================
       CHAT
       ===================================================== */
    .workspace-header {
      flex: 0 0 auto;
      width:
        min(1220px, calc(100% - 52px));
      margin: 0 auto;
      padding:
        22px 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .workspace-header h2 {
      margin:
        0 0 4px;
      font-size: 1.65rem;
      font-weight: 500;
    }
    .workspace-header p {
      margin: 0;
      color:
        rgba(24, 58, 82, .69);
      font-size: .98rem;
    }
    .btn {
      border:
        1px solid rgba(24, 58, 82, .20);
      border-radius: 10px;
      padding:
        9px 13px;
      background:
        rgba(255, 255, 255, .87);
      color: var(--navy);
      font-weight: 600;
      transition:
        transform .16s ease,
        background .16s ease;
    }
    .btn:hover:not(:disabled) {
      transform:
        translateY(-1px);
      background: var(--white);
    }
    .btn.danger {
      border-color:
        rgba(158, 62, 56, .30);
      background:
        rgba(255, 247, 244, .88);
      color: var(--danger);
    }
    .chat-workspace {
      flex: 1 1 auto;
      min-height: 0;
      width:
        min(1220px, calc(100% - 52px));
      margin:
        0 auto;
      padding-bottom: 18px;
      display: grid;
      grid-template-columns:
        320px minmax(0, 1fr);
      gap: 34px;
      align-items: stretch;
    }
    .feedback {
      align-self: start;
      padding: 19px;
      border:
        1px solid rgba(24, 58, 82, .18);
      border-radius: 14px;
      background:
        rgba(255, 255, 255, .88);
      box-shadow:
        0 7px 20px rgba(16, 43, 62, .065);
      min-height: 112px;
    }
    .feedback-title {
      margin-bottom: 8px;
      color:
        rgba(24, 58, 82, .66);
      font-size: .82rem;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .feedback p {
      margin:
        5px 0;
      line-height: 1.46;
    }
    .feedback-placeholder {
      color:
        rgba(24, 58, 82, .58);
      line-height: 1.45;
    }
    .ok {
      color: var(--success);
      font-weight: 600;
    }
    .chat-main {
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border:
        1px solid rgba(24, 58, 82, .12);
      border-radius: 19px;
      background: var(--white);
      box-shadow:
        0 12px 31px rgba(16, 43, 62, .09);
    }
    .messages {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding:
        25px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      background:
        rgba(255, 255, 255, .98);
    }
    .row {
      display: flex;
      width: 100%;
    }
    .row.ai {
      justify-content: flex-start;
    }
    .row.user {
      justify-content: flex-end;
    }
    .bubble {
      max-width:
        min(76%, 620px);
      padding:
        12px 16px;
      border-radius: 16px;
      line-height: 1.5;
      word-break: break-word;
      unicode-bidi: plaintext;
      box-shadow:
        0 5px 15px rgba(16, 43, 62, .065);
    }
    .row.ai .bubble {
      background: var(--ochre);
      color: var(--navy);
      border:
        1px solid rgba(24, 58, 82, .10);
      border-bottom-left-radius: 5px;
    }
    .row.user .bubble {
      background: var(--navy);
      color: var(--white);
      border:
        1px solid var(--navy);
      border-bottom-right-radius: 5px;
    }
    .example-label {
      margin-bottom: 4px;
      font-size: .73rem;
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
      opacity: .73;
    }
    .translation {
      margin-top: 8px;
      padding-top: 8px;
      border-top:
        1px solid rgba(255, 255, 255, .23);
      font-size: .85rem;
      opacity: .88;
      direction: ltr;
      text-align: left;
    }
    .composer-area {
      flex: 0 0 auto;
      padding:
        13px 18px 17px;
      border-top:
        1px solid rgba(24, 58, 82, .12);
      background: var(--white);
    }
    .chars {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding:
        0 0 10px;
    }
    .chars-label {
      width: 100%;
      color:
        rgba(24, 58, 82, .67);
      font-size: .79rem;
      font-weight: 600;
    }
    .char-btn {
      min-width: 34px;
      height: 32px;
      border:
        1px solid rgba(24, 58, 82, .17);
      border-radius: 8px;
      background:
        rgba(255, 255, 255, .88);
      color: var(--navy);
      font-weight: 600;
    }
    .char-btn:hover:not(:disabled) {
      background: var(--white);
      border-color:
        rgba(24, 58, 82, .35);
    }
    /* Spec 17: shift toggle for special-character panels */
    .char-shift-btn {
      min-width: 34px;
      height: 32px;
      border:
        1px solid rgba(24, 58, 82, .17);
      border-radius: 8px;
      background:
        rgba(255, 255, 255, .88);
      color: var(--navy);
      font-weight: 700;
    }
    .char-shift-btn:hover:not(:disabled) {
      background: var(--white);
      border-color:
        rgba(24, 58, 82, .35);
    }
    .char-shift-btn.active {
      border-color: var(--ochre);
      background: var(--ochre);
      color: var(--white);
    }
    .composer {
      display: flex;
      gap: 9px;
    }
    .composer input {
      flex: 1;
    }
    .send,
    .example {
      border-radius: 12px;
      padding:
        0 16px;
      font-weight: 600;
    }
    .send {
      border: 0;
      background: var(--navy);
      color: var(--white);
    }
    .send:hover:not(:disabled) {
      background: var(--navy-hover);
    }
    .example {
      border:
        1px solid rgba(24, 58, 82, .20);
      background:
        rgba(255, 255, 255, .85);
      color: var(--navy);
    }
    /* =====================================================
       DICTIONARY
       ===================================================== */
    .word {
      border-bottom:
        1px dotted currentColor;
      cursor: help;
      outline: none;
    }
    .tooltip {
      display: none;
      position: fixed;
      z-index: 9999;
      width: max-content;
      max-width:
        min(370px, calc(100vw - 24px));
      padding:
        12px 14px;
      border-radius: 12px;
      background: var(--navy-dark);
      color: var(--white);
      box-shadow:
        0 13px 34px rgba(16, 43, 62, .26);
      font-size: .91rem;
      line-height: 1.4;
      pointer-events: none;
    }
    .tooltip.visible {
      display: block;
    }
    .tip-title {
      margin-bottom: 6px;
      font-weight: 600;
    }
    .tip-list {
      margin: 0;
      padding-left: 20px;
    }
    .tip-list li {
      margin: 4px 0;
    }
    .tip-tags {
      opacity: .67;
      font-size: .8rem;
      font-style: italic;
    }
    .tip-meta {
      margin-top: 7px;
      opacity: .73;
      font-size: .8rem;
    }
    /* =====================================================
       VOCABULARY SETUP
       ===================================================== */
    .vocab-setup-screen {
      flex-direction: column;
      overflow-y: auto;
      min-height: 0;
      padding:
        25px 26px
        44px;
    }
    .vocab-setup-shell {
      width:
        min(880px, 100%);
      margin:
        0 auto;
    }
    .vocab-setup-head {
      margin-bottom: 22px;
    }
    .vocab-setup-head h1 {
      margin-bottom: 10px;
    }
    .vocab-setup-head .grammar-learning-heading {
      margin-bottom: 10px;
    }
    .vocab-setup-head .grammar-learning-heading h1 {
      margin: 0;
    }
    .vocab-setup-head p {
      max-width: 650px;
      margin: 0;
      color:
        rgba(24, 58, 82, .70);
      font-size: 1rem;
      line-height: 1.48;
    }
    .vocab-practice-section {
      padding-top: 2px;
    }
    .vocab-practice-section h2 {
      margin:
        0 0 5px;
      font-size: 1.45rem;
      font-weight: 600;
    }
    .vocab-practice-intro {
      margin:
        0 0 14px;
      color:
        rgba(24, 58, 82, .64);
      font-size: .91rem;
      line-height: 1.42;
    }
    .vocab-source-grid {
      display: grid;
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
      /*
      Spec 44 Part 2: without this, grid's default align-items (stretch)
      makes every card in a row match its row's tallest card, so a card's
      own min-height/padding never governs its rendered height — reducing
      them in Spec 43 had no visible effect. This is the governing rule.
      */
      align-items: start;
      gap: 11px;
      margin-bottom: 18px;
    }
    .vocab-choice-card {
      min-height: 84px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding:
        10px 20px;
      border:
        1px solid rgba(24, 58, 82, .15);
      border-radius: 14px;
      background:
        rgba(255, 255, 255, .76);
      color: var(--navy);
      text-align: left;
      transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
    }
    /*
    Spec 12 Part 4: New Vocab (#newVocabFrequencyCard) is the only tile
    ever conditionally hidden (German only). When it's hidden, the three
    remaining tiles' last one spans both columns instead of leaving an
    empty cell beside it — pure CSS, no layout script.

    Spec 52 Part 4: that last tile is now My vocabulary — Mixed was
    moved ahead of New Vocab in the markup (so it wins
    defaultVocabSource()'s "first visible tile" selection regardless of
    language) and Random's own tile, the previous last one, was
    removed from the grid entirely.
    */
    .vocab-source-grid:has(#newVocabFrequencyCard.hidden)
      [data-vocab-source="my_vocab"] {
      grid-column: 1 / -1;
    }
    .vocab-choice-card:hover:not(:disabled) {
      transform:
        translateY(-2px);
      background: var(--white);
      border-color:
        rgba(24, 58, 82, .28);
      box-shadow:
        0 8px 19px rgba(16, 43, 62, .065);
    }
    .vocab-choice-card.selected {
      border-color:
        rgba(24, 58, 82, .63);
      background: var(--white);
      box-shadow:
        0 0 0 3px rgba(24, 58, 82, .055);
    }
    .vocab-choice-card:disabled {
      opacity: .48;
      cursor: default;
    }
    .vocab-choice-title {
      font-size: 1.04rem;
      font-weight: 650;
      line-height: 1.2;
    }
    .vocab-choice-copy {
      margin-top: 7px;
      color:
        rgba(24, 58, 82, .62);
      font-size: .83rem;
      line-height: 1.37;
    }
    .vocab-options-row {
      display: grid;
      grid-template-columns:
        minmax(0, .7fr)
        minmax(0, 1.3fr);
      gap: 13px;
      /*
      Spec 64 Part 5: was `end` -- each field sized to its own content
      and bottom-aligned, so Answer style (one row of buttons) sat
      shorter than Number of words (two rows). `stretch` makes both
      fields the height of the taller one; the flex rules below make
      each field's own control div fill that height in turn, rather
      than leaving empty space under a shorter one.
      */
      align-items: stretch;
    }
    .vocab-options-row .field {
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
    }
    .vocab-options-row .vocab-mode-control,
    .vocab-options-row .vocab-count-control {
      flex: 1;
    }
    /*
    Spec 64 Part 4, corrected by Spec 65 Part 1: scoped to
    .vocab-options-row so this does not reach the retry panel's own
    Answer-style control (#retryModeControl), which reuses
    .vocab-mode-control/.vocab-mode-btn but has no taglines and must
    not change.
    */
    .vocab-options-row .vocab-mode-control .vocab-mode-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    /*
    Spec 65: the option name and its tagline are each given their own
    low-specificity class (one selector, same shape as
    .vocab-mode-btn-tagline below) and set to display: block directly,
    rather than relying on the button's own flex-column to blockify
    them as flex items -- Spec 64's version left both on one run-on
    line. Deliberately not a descendant selector scoped through
    .vocab-options-row .vocab-mode-control .vocab-mode-btn: that would
    out-specificity the existing single-class mobile-hiding rule below
    and defeat it at the 820px breakpoint.
    */
    .vocab-mode-btn-label,
    .vocab-mode-btn-tagline {
      display: block;
    }
    /*
    The tagline reuses .vocab-choice-copy verbatim (the lesson focus
    tiles' own description style) for size, colour, line height and
    spacing, rather than a second set of near-identical values --
    applied directly on the tagline span's own class list, not here.

    .vocab-choice-copy is never itself inside a bold-weight ancestor,
    so it never needs to state its own font-weight. Here it sits inside
    .vocab-mode-btn, which sets font-weight: 600 for the option name
    above it -- without this override, the tagline would inherit that
    same bold weight instead of reading lighter than the name, as
    Part 1 requires. Scoped to this button only; the tiles' own use of
    .vocab-choice-copy is untouched.
    */
    .vocab-options-row .vocab-mode-control .vocab-mode-btn .vocab-choice-copy {
      font-weight: normal;
    }
    .vocab-mode-control {
      display: grid;
      grid-template-columns:
        1fr 1fr;
      padding: 4px;
      border:
        1px solid rgba(24, 58, 82, .17);
      border-radius: 13px;
      background:
        rgba(255, 255, 255, .68);
    }
    .vocab-mode-btn {
      min-height: 44px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color:
        rgba(24, 58, 82, .66);
      font-weight: 600;
      transition:
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease;
    }
    .vocab-mode-btn.selected {
      background: var(--white);
      color: var(--navy);
      box-shadow:
        0 3px 10px rgba(16, 43, 62, .08);
    }
    .vocab-count-control {
      display: grid;
      grid-template-columns:
        1fr 1fr 1fr;
      padding: 4px;
      border:
        1px solid rgba(24, 58, 82, .17);
      border-radius: 13px;
      background:
        rgba(255, 255, 255, .68);
    }
    .vocab-start-row {
      display: flex;
      align-items: center;
      gap: 13px;
    }
    .vocab-start-row .big-btn {
      width: auto;
      min-width: 170px;
      margin: 0;
    }
    .vocab-login-note {
      margin: 0;
      color:
        rgba(24, 58, 82, .58);
      font-size: .8rem;
      line-height: 1.35;
    }
    .sr-select {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    /* =====================================================
       VOCAB STUDY
       ===================================================== */
    .vocab-study-head {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin-bottom: 14px;
    }
    .vocab-study-reveal-all-btn {
      border: 0;
      border-radius: 10px;
      padding:
        9px 14px;
      background:
        rgba(24, 58, 82, .08);
      color: var(--navy);
      font-weight: 600;
      font-size: .85rem;
    }
    .vocab-study-list {
      list-style: none;
      padding: 0;
      margin:
        0 0 22px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .vocab-study-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding:
        12px 14px;
      border:
        1px solid rgba(24, 58, 82, .14);
      border-radius: 12px;
      background:
        rgba(255, 255, 255, .82);
    }
    .vocab-study-english {
      flex:
        1 1 0;
      color:
        rgba(24, 58, 82, .78);
    }
    .vocab-study-arrow {
      color:
        rgba(24, 58, 82, .38);
    }
    .vocab-study-target-wrap {
      flex:
        1 1 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }
    .vocab-study-target {
      font-weight: 600;
      color: var(--navy);
      transition: filter .15s ease;
    }
    .vocab-study-target.blurred {
      filter: blur(6px);
      user-select: none;
    }
    .vocab-study-reveal-btn {
      border: 0;
      border-radius: 8px;
      padding:
        6px 10px;
      background:
        rgba(24, 58, 82, .08);
      color: var(--navy);
      font-weight: 600;
      font-size: .78rem;
      white-space: nowrap;
    }

    /* =====================================================
       VOCAB TEST
       ===================================================== */
    .quiz-wrap {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      justify-content: center;
      overflow-y: auto;
      padding:
        18px 28px 28px;
    }
    .quiz-card {
      width:
        min(720px, 100%);
      margin: auto;
      padding: 28px;
      border:
        1px solid rgba(24, 58, 82, .14);
      border-radius: 18px;
      background:
        rgba(255, 255, 255, .90);
      box-shadow:
        0 9px 28px rgba(16, 43, 62, .08);
    }
    .quiz-status {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      color:
        rgba(24, 58, 82, .66);
      font-size: .88rem;
      font-weight: 600;
    }
    .quiz-progress-track {
      height: 7px;
      margin-top: 11px;
      overflow: hidden;
      border-radius: 999px;
      background:
        rgba(24, 58, 82, .10);
    }
    .quiz-progress-fill {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: var(--navy);
      transition:
        width .18s ease;
    }
    .prompt-label {
      margin-top: 26px;
      color:
        rgba(24, 58, 82, .59);
      font-size: .8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .prompt {
      margin:
        10px 0 9px;
      font-size:
        clamp(1.65rem, 3.4vw, 2.15rem);
      font-weight: 500;
      line-height: 1.25;
    }
    .pos {
      display: inline-flex;
      padding:
        4px 8px;
      border-radius: 999px;
      background: var(--cream);
      color:
        rgba(24, 58, 82, .64);
      font-size: .81rem;
    }
    .synonym-hint {
      margin:
        10px 0;
      padding:
        11px 13px;
      border:
        1px solid rgba(210, 161, 58, .35);
      border-radius: 11px;
      background:
        rgba(210, 161, 58, .08);
    }
    .synonym-hint p {
      margin: 0;
      font-size: .88rem;
      line-height: 1.4;
      color:
        rgba(24, 58, 82, .78);
    }
    .synonym-hint .secondary-btn {
      margin:
        9px 0 0;
    }
    .synonym-hint-target {
      margin-top:
        9px !important;
      font-weight: 600;
    }
    #sentenceHintBtn {
      margin:
        10px 0 0;
    }
    .sentence-hint {
      margin:
        10px 0;
      padding:
        11px 13px;
      border:
        1px solid rgba(210, 161, 58, .35);
      border-radius: 11px;
      background:
        rgba(210, 161, 58, .08);
    }
    .sentence-hint p {
      margin: 0;
      font-size: .92rem;
      line-height: 1.45;
      color:
        rgba(24, 58, 82, .9);
    }
    .sentence-hint-translation {
      margin-top:
        7px !important;
      font-size: .85rem !important;
      color:
        rgba(24, 58, 82, .64) !important;
    }
    .sentence-hint-word {
      font-weight: 700;
      color: var(--ochre);
    }
    .options {
      display: grid;
      grid-template-columns:
        1fr 1fr;
      gap: 10px;
      margin-top: 24px;
    }
    .option {
      padding: 13px;
      border:
        1px solid rgba(24, 58, 82, .16);
      border-radius: 11px;
      background:
        rgba(255, 255, 255, .94);
      color: var(--navy);
      font-weight: 600;
      transition:
        background .15s ease,
        transform .15s ease;
    }
    .option:hover:not(:disabled) {
      transform:
        translateY(-1px);
      background: var(--white);
    }
    .option.good {
      border-color: #9FD0B2;
      background: #F2FBF5;
      color: var(--success);
    }
    .option.bad {
      border-color: #E8ABAB;
      background: #FFF5F5;
      color: var(--danger);
    }
    .hardcore {
      margin-top: 24px;
    }
    .test-chars {
      margin-top: 12px;
      padding-bottom: 12px;
    }
    .hardcore-row {
      display: flex;
      gap: 9px;
    }
    .hardcore-row input {
      flex: 1;
    }
    .hardcore-row .send {
      min-width: 98px;
    }
    .answer-feedback {
      margin:
        18px 0 12px;
      padding:
        11px 13px;
      border-radius: 11px;
      font-weight: 600;
      line-height: 1.4;
    }
    .answer-feedback.good {
      border:
        1px solid #B9DDC6;
      background: #F2FBF5;
      color: var(--success);
    }
    .answer-feedback.bad {
      border:
        1px solid #EBC1C1;
      background: #FFF5F5;
      color: var(--danger);
    }
    .answer-feedback.partial {
      border:
        1px solid #E7D6A1;
      background: #FFFAEF;
      color: #8A6B1F;
    }
    .answer-feedback.revealed {
      border:
        1px solid rgba(24, 58, 82, .22);
      background: rgba(24, 58, 82, .05);
      color: var(--navy);
    }
    .option.partial {
      border-color: #E7D6A1;
      background: #FFFAEF;
      color: #8A6B1F;
    }
    /*
    Spec 68 Part 7: the noun gender lesson's own question card reuses
    .quiz-card/.quiz-status/.answer-feedback etc. verbatim, but its
    prompt is a single centred word rather than .prompt's left-aligned
    phrase, so it gets its own two rules here instead of overriding
    .prompt's alignment for every other lesson that uses it.
    */
    .gender-lesson-noun {
      margin:
        10px 0 6px;
      font-size:
        clamp(1.65rem, 3.4vw, 2.15rem);
      font-weight: 500;
      line-height: 1.25;
      text-align: center;
    }
    .gender-lesson-meaning {
      margin:
        0 0 24px;
      color:
        rgba(24, 58, 82, .62);
      font-size: .94rem;
      line-height: 1.4;
      text-align: center;
    }
    /*
    Spec 68 Part 7: three buttons today (der/die/das) but a flex row
    with each .option at flex: 1, not a fixed-column grid like .options
    above -- a future two-gender language's own two buttons fill the
    same row correctly with no CSS change.
    */
    .gender-lesson-options {
      display: flex;
      gap: 10px;
      margin-top: 24px;
    }
    .gender-lesson-options .option {
      flex: 1;
    }
    .final-score {
      font-size: 1.3rem;
      font-weight: 500;
    }
    .vocab-finish-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 6px;
    }
    .vocab-finish-actions .secondary-btn {
      width: 100%;
    }
    .retry-options-panel {
      margin-top: 18px;
      padding-top: 18px;
      border-top:
        1px solid rgba(24, 58, 82, .14);
    }
    .retry-options-panel .field {
      margin-bottom: 16px;
    }
    /* Spec 16: vocabulary lesson results table */
    .vocab-results-table {
      margin-top: 24px;
      padding-top: 18px;
      border-top:
        1px solid rgba(24, 58, 82, .14);
    }
    .vocab-results-header {
      display: grid;
      grid-template-columns:
        minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 60px;
      gap: 10px;
      padding: 0 13px 8px;
      color:
        rgba(24, 58, 82, .60);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .vocab-results-rows {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .vocab-results-rows .answer-feedback {
      display: grid;
      grid-template-columns:
        minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 60px;
      align-items: center;
      gap: 10px;
      margin: 0;
      font-weight: 500;
    }
    .vocab-result-value {
      word-break: break-word;
    }
    .vocab-result-marks {
      font-weight: 700;
    }
    .vocab-result-label {
      display: none;
    }
    .vocab-result-synonym-tag {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 7px;
      border-radius: 999px;
      background:
        rgba(210, 161, 58, .18);
      color: #8A6118;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .03em;
      text-transform: uppercase;
      vertical-align: middle;
    }
    .vocab-result-hinted-tag {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 7px;
      border-radius: 999px;
      background:
        rgba(24, 58, 82, .12);
      color: var(--navy);
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .03em;
      text-transform: uppercase;
      vertical-align: middle;
    }
    .vocab-results-total {
      display: flex;
      justify-content: space-between;
      margin-top: 14px;
      padding: 11px 13px;
      border-top:
        1px solid rgba(24, 58, 82, .14);
      color: var(--navy);
      font-weight: 700;
    }
    /* =====================================================
       STATS / RECENT
       ===================================================== */
    .utility {
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow-y: auto;
      padding:
        32px 26px;
    }
    .utility-card {
      width:
        min(760px, 100%);
      max-width: 100%;
      min-width: 0;
      margin: 0 auto;
      padding: 25px;
      border:
        1px solid rgba(24, 58, 82, .14);
      border-radius: 18px;
      background:
        rgba(255, 255, 255, .88);
      box-shadow:
        0 8px 28px rgba(16, 43, 62, .07);
    }
    .utility-message {
      color:
        rgba(24, 58, 82, .70);
      line-height: 1.5;
    }
    .lang-list,
    .recent-list {
      display: grid;
      gap: 9px;
      min-width: 0;
      max-width: 100%;
    }
    .lang-btn,
    .recent-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding:
        13px 14px;
      border:
        1px solid rgba(24, 58, 82, .14);
      border-radius: 11px;
      background:
        rgba(255, 255, 255, .92);
      text-align: left;
      color: var(--navy);
      font-weight: 600;
    }
    .lang-btn:hover,
    .recent-btn:hover {
      background: var(--white);
      border-color:
        rgba(24, 58, 82, .28);
    }
    .stats-language-row {
      display: flex;
      align-items: stretch;
      gap: 9px;
      min-width: 0;
    }
    .stats-language-row .lang-btn {
      flex: 1 1 auto;
      min-width: 0;
    }
    .reset-progress-btn {
      flex: 0 0 auto;
      align-self: stretch;
      padding: 10px 12px;
      border: 1px solid #E8ABAB;
      border-radius: 11px;
      background: #FFF5F5;
      color: var(--danger);
      font-size: .82rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .reset-progress-btn:hover:not(:disabled) {
      border-color: #D98282;
      background: #FDE9E9;
    }
    .reset-progress-btn:disabled {
      cursor: wait;
      opacity: .62;
    }
    .lang-copy {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .lang-copy small {
      color:
        rgba(24, 58, 82, .64);
      font-size: .83rem;
      font-weight: 500;
    }
    .lang-vocab-count {
      white-space: nowrap;
      color: var(--navy);
    }
    .overall {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-top: 17px;
      padding-top: 17px;
      border-top:
        1px solid rgba(24, 58, 82, .13);
      font-weight: 600;
    }
    .legacy-note {
      color:
        rgba(24, 58, 82, .65);
    }
    .detail-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }
    .linkbtn {
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--navy);
      font-weight: 600;
    }
    .vocab-list {
      list-style: none;
      padding: 0;
      margin:
        17px 0 0;
      display: grid;
      grid-template-columns:
        1fr 1fr;
      gap:
        8px 12px;
    }
    .vocab-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding:
        9px 10px;
      border:
        1px solid rgba(24, 58, 82, .13);
      border-radius: 10px;
      background:
        rgba(248, 241, 222, .72);
    }
    .delete-word {
      border:
        1px solid rgba(158, 62, 56, .28);
      border-radius: 8px;
      padding:
        5px 8px;
      background: #FFF7F4;
      color: var(--danger);
      font-size: .79rem;
      font-weight: 600;
    }
    .grammar-estimate-card {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin: 11px 0 12px;
      padding: 17px 18px;
      border:
        1px solid rgba(24, 58, 82, .13);
      border-radius: 13px;
      background:
        rgba(248, 241, 222, .64);
    }
    .grammar-estimate-copy {
      min-width: 0;
    }
    .grammar-estimate-label {
      display: block;
      color:
        rgba(24, 58, 82, .62);
      font-size: .78rem;
      line-height: 1.3;
    }
    .grammar-estimate-value {
      display: block;
      margin-top: 3px;
      color: var(--navy);
      font-size: 1.58rem;
      font-weight: 600;
      line-height: 1.12;
    }
    .grammar-estimate-note {
      display: block;
      margin-top: 7px;
      max-width: 760px;
      color:
        rgba(24, 58, 82, .64);
      font-size: .82rem;
      line-height: 1.4;
    }
    .grammar-status {
      flex: 0 0 auto;
      padding: 5px 9px;
      border:
        1px solid rgba(24, 58, 82, .14);
      border-radius: 999px;
      background:
        rgba(255, 255, 255, .72);
      color:
        rgba(24, 58, 82, .72);
      font-size: .76rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .grammar-status.provisional {
      border-color:
        rgba(213, 168, 77, .42);
      background:
        rgba(255, 248, 228, .90);
    }
    .grammar-status.established {
      border-color:
        rgba(45, 119, 75, .25);
      background:
        rgba(239, 249, 242, .86);
      color: var(--success);
    }
    .grammar-levels {
      display: grid;
      gap: 0;
      margin-top: 16px;
      padding:
        0 14px;
      border:
        1px solid rgba(24, 58, 82, .12);
      border-radius: 12px;
      background:
        rgba(255, 255, 255, .38);
    }
    .grammar-level-row {
      padding:
        10px 0 11px;
      border-bottom:
        1px solid rgba(24, 58, 82, .10);
    }
    .grammar-level-row:last-child {
      border-bottom: 0;
    }
    .grammar-level-top,
    .grammar-concept-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
    }
    .grammar-level-name,
    .grammar-concept-name {
      color: var(--navy);
      font-weight: 600;
    }
    .grammar-level-metrics,
    .grammar-concept-reliability {
      flex: 0 0 auto;
      color:
        rgba(24, 58, 82, .66);
      font-size: .78rem;
      white-space: nowrap;
    }
    .grammar-fit-bar,
    .grammar-concept-bar {
      height: 6px;
      margin-top: 7px;
      overflow: hidden;
      border-radius: 999px;
      background:
        rgba(24, 58, 82, .10);
    }
    .grammar-fit-fill,
    .grammar-concept-fill {
      height: 100%;
      border-radius: inherit;
      background: var(--navy);
    }
    .grammar-level-bottom,
    .grammar-concept-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 6px;
      color:
        rgba(24, 58, 82, .60);
      font-size: .75rem;
      line-height: 1.35;
    }
    .grammar-level-qualification {
      flex: 0 0 auto;
      padding: 2px 7px;
      border:
        1px solid rgba(24, 58, 82, .12);
      border-radius: 999px;
      background:
        rgba(248, 241, 222, .72);
      color:
        rgba(24, 58, 82, .68);
      font-size: .70rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .grammar-level-qualification.qualifies {
      border-color:
        rgba(45, 119, 75, .24);
      background:
        rgba(239, 249, 242, .86);
      color: var(--success);
    }
    .grammar-concepts-wrap {
      margin-top: 15px;
      padding: 0;
      border:
        1px solid rgba(24, 58, 82, .15);
      border-radius: 12px;
      background:
        rgba(255, 255, 255, .48);
      overflow: hidden;
    }
    .grammar-concepts-wrap summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 14px;
      cursor: pointer;
      color: var(--navy);
      font-size: .98rem;
      font-weight: 600;
      list-style: none;
    }
    .grammar-concepts-wrap summary::-webkit-details-marker {
      display: none;
    }
    .grammar-concepts-wrap summary::after {
      content: "▾";
      color:
        rgba(24, 58, 82, .58);
      transition:
        transform .16s ease;
    }
    .grammar-concepts-wrap[open] summary::after {
      transform:
        rotate(180deg);
    }
    .grammar-concepts-summary-count {
      margin-left: auto;
      color:
        rgba(24, 58, 82, .60);
      font-size: .77rem;
      font-weight: 500;
    }
    .grammar-concepts {
      display: grid;
      gap: 0;
      padding:
        0 13px 13px;
    }
    .grammar-concept {
      padding: 11px 0;
      border-top:
        1px solid rgba(24, 58, 82, .10);
    }
    .grammar-concept-targets {
      margin-top: 6px;
      color:
        rgba(24, 58, 82, .55);
      font-size: .72rem;
      line-height: 1.4;
    }

    .stats-section {
      margin-top: 24px;
      padding-top: 22px;
      border-top:
        1px solid rgba(24, 58, 82, .13);
    }
    .stats-section:first-of-type {
      margin-top: 18px;
    }
    .stats-section-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }
    .stats-section-heading h4 {
      margin: 2px 0 0;
      font-size: 1.2rem;
    }
    .profile-window {
      flex: 0 0 auto;
      padding: 5px 8px;
      border:
        1px solid rgba(24, 58, 82, .13);
      border-radius: 999px;
      background:
        rgba(248, 241, 222, .72);
      color:
        rgba(24, 58, 82, .68);
      font-size: .78rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .profile-summary {
      display: grid;
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin: 15px 0 18px;
    }
    .profile-summary-card {
      padding: 12px;
      border:
        1px solid rgba(24, 58, 82, .13);
      border-radius: 11px;
      background:
        rgba(255, 255, 255, .72);
    }
    .profile-summary-card span {
      display: block;
      color:
        rgba(24, 58, 82, .62);
      font-size: .78rem;
      line-height: 1.3;
    }
    .profile-summary-card strong {
      display: block;
      margin-top: 4px;
      color: var(--navy);
      font-size: 1.25rem;
      font-weight: 600;
    }
    .profile-topics {
      display: grid;
      gap: 13px;
    }
    .profile-category {
      padding: 13px;
      border:
        1px solid rgba(24, 58, 82, .13);
      border-radius: 12px;
      background:
        rgba(248, 241, 222, .58);
    }
    .profile-category-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .profile-category-head strong {
      font-size: 1rem;
    }
    .profile-category-head span {
      color:
        rgba(24, 58, 82, .62);
      font-size: .79rem;
      white-space: nowrap;
    }
    .profile-topic {
      padding: 10px 0;
      border-top:
        1px solid rgba(24, 58, 82, .10);
    }
    .profile-topic:first-child {
      padding-top: 0;
      border-top: 0;
    }
    .profile-topic:last-child {
      padding-bottom: 0;
    }
    .profile-topic-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .profile-topic-name {
      font-weight: 600;
    }
    .profile-topic-count {
      color:
        rgba(24, 58, 82, .67);
      font-size: .8rem;
      white-space: nowrap;
    }
    .profile-bar {
      height: 5px;
      margin-top: 7px;
      overflow: hidden;
      border-radius: 999px;
      background:
        rgba(24, 58, 82, .10);
    }
    .profile-bar-fill {
      height: 100%;
      border-radius: inherit;
      background: var(--navy);
    }
    .profile-topic-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 7px;
      min-height: 22px;
    }
    .profile-topic-context {
      color:
        rgba(24, 58, 82, .60);
      font-size: .78rem;
    }
    .trend-pill {
      padding: 3px 7px;
      border:
        1px solid rgba(24, 58, 82, .13);
      border-radius: 999px;
      background:
        rgba(255, 255, 255, .7);
      color:
        rgba(24, 58, 82, .72);
      font-size: .74rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .trend-pill.improving {
      border-color:
        rgba(45, 119, 75, .24);
      background:
        rgba(239, 249, 242, .86);
      color: var(--success);
    }
    .trend-pill.recurring {
      border-color:
        rgba(158, 62, 56, .20);
      background:
        rgba(255, 247, 244, .88);
      color: var(--danger);
    }
    .recent-btn {
      display: block;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }
    .recent-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }
    .recent-top strong {
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .recent-time {
      flex: 0 0 auto;
      color:
        rgba(24, 58, 82, .60);
      font-size: .81rem;
      white-space: nowrap;
    }
    .recent-meta {
      margin-top: 4px;
      color:
        rgba(24, 58, 82, .64);
      font-size: .85rem;
    }
    .recent-preview {
      margin-top: 7px;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
      font-size: .95rem;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .recent-messages {
      display: flex;
      flex-direction: column;
      gap: 13px;
      padding: 15px;
      border:
        1px solid rgba(24, 58, 82, .14);
      border-radius: 14px;
      background:
        rgba(255, 255, 255, .94);
    }
    .stored-feedback {
      align-self: flex-end;
      width:
        min(82%, 650px);
      padding:
        10px 12px;
      border:
        1px solid rgba(24, 58, 82, .18);
      border-radius: 10px;
      background:
        rgba(255, 255, 255, .88);
      font-size: .87rem;
    }
    .stored-feedback p {
      margin: 3px 0;
    }
    .retention {
      margin-top: 16px;
      color:
        rgba(24, 58, 82, .60);
      font-size: .81rem;
      line-height: 1.45;
    }
    .secondary-btn {
      border:
        1px solid rgba(24, 58, 82, .22);
      border-radius: 11px;
      padding:
        10px 14px;
      background:
        rgba(255, 255, 255, .94);
      color: var(--navy);
      font-weight: 600;
    }
    /* =====================================================
       LEGAL
       ===================================================== */
    .legal-wrap {
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow-y: auto;
      padding:
        32px 24px;
    }
    .legal-content {
      width:
        min(900px, 100%);
      margin: 0 auto;
      padding:
        34px 38px;
      border:
        1px solid rgba(24, 58, 82, .14);
      border-radius: 18px;
      background:
        rgba(255, 255, 255, .91);
      box-shadow:
        0 9px 28px rgba(16, 43, 62, .07);
      line-height: 1.62;
    }
    .legal-content h1 {
      margin-bottom: 8px;
    }
    .legal-content h2 {
      margin:
        30px 0 8px;
      font-size: 1.45rem;
      font-weight: 600;
    }
    .legal-content h3 {
      margin:
        22px 0 6px;
      font-size: 1.15rem;
      font-weight: 600;
    }
    .legal-content p {
      margin:
        9px 0;
    }
    .legal-content ul {
      margin:
        8px 0 10px;
      padding-left: 23px;
    }
    .legal-content li {
      margin: 6px 0;
    }
    .legal-content a {
      color: var(--navy);
      font-weight: 600;
    }
    .legal-updated {
      margin-bottom: 28px;
      color:
        rgba(24, 58, 82, .62);
      font-size: .9rem;
    }
    .legal-callout {
      margin:
        22px 0;
      padding:
        14px 16px;
      border-left:
        4px solid var(--navy);
      border-radius: 8px;
      background:
        rgba(210, 161, 58, .18);
    }
    /* =====================================================
       FOOTER
       ===================================================== */
    .site-footer {
      position: relative;
      z-index: 100;
      flex:
        0 0 var(--footer-height);
      width: 100%;
      height: var(--footer-height);
      border-top:
        1px solid rgba(24, 58, 82, .16);
      background:
        rgba(226, 194, 118, .95);
      backdrop-filter:
        blur(8px);
      color:
        rgba(24, 58, 82, .82);
    }
    .site-footer-inner {
      width:
        min(1340px, calc(100% - 48px));
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .footer-links {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: nowrap;
    }
    .footer-link {
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--navy);
      font-weight: 600;
      white-space: nowrap;
    }
    .footer-link:hover {
      text-decoration: underline;
    }
    .footer-dot {
      color:
        rgba(24, 58, 82, .48);
      font-size: .9rem;
      line-height: 1;
      user-select: none;
    }
    /* =====================================================
       PRIVACY
       ===================================================== */
    .privacy-banner {
      position: fixed;
      left: 50%;
      bottom:
        calc(var(--footer-height) + 14px);
      z-index: 12000;
      width:
        min(760px, calc(100% - 28px));
      transform:
        translateX(-50%);
      padding:
        19px 20px;
      border:
        1px solid rgba(255, 255, 255, .28);
      border-radius: 16px;
      background: var(--navy-dark);
      color: var(--white);
      box-shadow:
        0 20px 60px rgba(16, 43, 62, .32);
    }
    .privacy-banner h3 {
      margin:
        0 0 7px;
      color: var(--white);
      font-size: 1.25rem;
      font-weight: 600;
    }
    .privacy-banner p {
      margin: 0;
      color:
        rgba(255, 255, 255, .88);
      line-height: 1.45;
    }
    .privacy-current {
      margin-top:
        7px !important;
      color:
        rgba(255, 255, 255, .70) !important;
      font-size: .88rem;
    }
    .privacy-actions {
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .privacy-choice-btn {
      flex:
        1 1 210px;
      border:
        1px solid rgba(255, 255, 255, .50);
      border-radius: 10px;
      padding:
        10px 13px;
      background:
        rgba(255, 255, 255, .10);
      color: var(--white);
      font-weight: 600;
    }
    .privacy-choice-btn:hover {
      background:
        rgba(255, 255, 255, .18);
    }
    .privacy-policy-btn {
      border: 0;
      padding:
        8px 2px;
      background: transparent;
      color: var(--white);
      text-decoration: underline;
      font-weight: 600;
    }
    /* =====================================================
       DASHBOARD
       ===================================================== */
    .dashboard-screen {
      flex-direction: column;
      overflow-y: auto;
      min-height: 0;
      padding:
        24px 28px
        44px;
    }
    .dashboard-shell {
      width:
        min(1180px, 100%);
      margin:
        0 auto;
    }
    .dashboard-top-row {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 20px;
    }
    .dashboard-heading {
      margin: 0;
    }
    .dashboard-heading h1 {
      margin: 0;
      font-size:
        clamp(2.8rem, 5.5vw, 4.7rem);
    }
    .dashboard-new-language-wrap {
      position: relative;
      flex: 0 0 auto;
    }
    .dashboard-new-language-tile {
      min-width: 178px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding:
        12px 16px;
      border:
        1px solid rgba(24, 58, 82, .18);
      border-radius: 14px;
      background:
        rgba(255, 255, 255, .80);
      color: var(--navy);
      font-weight: 600;
      box-shadow:
        0 7px 19px rgba(16, 43, 62, .055);
      transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
    }
    .dashboard-new-language-tile:hover {
      transform:
        translateY(-2px);
      background: var(--white);
      border-color:
        rgba(24, 58, 82, .30);
      box-shadow:
        0 11px 25px rgba(16, 43, 62, .09);
    }
    .dashboard-new-language-plus {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: var(--navy);
      color: var(--white);
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 1;
    }
    .dashboard-new-language-panel {
      position: absolute;
      z-index: 80;
      top:
        calc(100% + 9px);
      right: 0;
      width:
        min(330px, calc(100vw - 34px));
      padding: 14px;
      border:
        1px solid rgba(24, 58, 82, .17);
      border-radius: 14px;
      background: var(--white);
      box-shadow:
        0 18px 42px rgba(16, 43, 62, .16);
    }
    .dashboard-new-language-panel .field {
      margin:
        0 0 10px;
    }
    .dashboard-new-language-panel .secondary-btn {
      width: 100%;
      min-height: 44px;
    }
    .dashboard-language-grid {
      display: grid;
      grid-template-columns:
        repeat(auto-fill, 180px);
      justify-content: start;
      gap: 12px;
    }
    .dashboard-language-card {
      width: 180px;
      min-width: 0;
      min-height: 124px;
      padding:
        13px 12px;
      border:
        1px solid rgba(24, 58, 82, .16);
      border-radius: 17px;
      background:
        rgba(255, 255, 255, .80);
      color: var(--navy);
      text-align: center;
      box-shadow:
        0 7px 19px rgba(16, 43, 62, .055);
      transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
    }
    .dashboard-language-card:hover {
      transform:
        translateY(-3px);
      background: var(--white);
      border-color:
        rgba(24, 58, 82, .29);
      box-shadow:
        0 12px 27px rgba(16, 43, 62, .10);
    }
    .dashboard-language-card.selected {
      border-color:
        rgba(24, 58, 82, .58);
      background: var(--white);
      box-shadow:
        0 0 0 3px rgba(24, 58, 82, .07),
        0 12px 27px rgba(16, 43, 62, .10);
    }
    .dashboard-language-flag {
      display: block;
      width: 46px;
      height: 31px;
      margin:
        0 auto 10px;
      border-radius: 4px;
      object-fit: cover;
      box-shadow:
        0 1px 4px rgba(16, 43, 62, .16);
    }
    .dashboard-language-card.no-flag {
      justify-content: center;
    }
    .dashboard-language-card.no-flag .dashboard-language-flag {
      display: none;
    }
    .dashboard-language-name {
      display: block;
      font-size: 1.22rem;
      font-weight: 600;
      line-height: 1.14;
    }
    .dashboard-language-level {
      display: block;
      margin-top: 5px;
      color:
        rgba(24, 58, 82, .68);
      font-size: .98rem;
      font-weight: 500;
      line-height: 1.3;
    }
    .dashboard-message {
      margin:
        0 0 14px;
      color:
        rgba(24, 58, 82, .69);
      line-height: 1.48;
    }
    .dashboard-plan {
      margin-top: 24px;
      padding:
        24px;
      border:
        1px solid rgba(24, 58, 82, .15);
      border-radius: 19px;
      background:
        rgba(255, 255, 255, .83);
      box-shadow:
        0 10px 28px rgba(16, 43, 62, .07);
    }
    .dashboard-plan-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
    }
    .dashboard-plan-language {
      display: flex;
      align-items: center;
      gap: 13px;
      min-width: 0;
    }
    .dashboard-plan-flag {
      flex: 0 0 auto;
      width: 54px;
      height: 36px;
      border-radius: 5px;
      object-fit: cover;
      box-shadow:
        0 1px 4px rgba(16, 43, 62, .16);
    }
    .dashboard-plan-head h2 {
      margin: 0;
      font-size: 1.85rem;
      font-weight: 600;
    }
    .dashboard-plan-level {
      flex: 0 0 auto;
      min-width: 100px;
      padding:
        10px 13px;
      border:
        1px solid rgba(24, 58, 82, .14);
      border-radius: 13px;
      background:
        rgba(248, 241, 222, .72);
      text-align: center;
    }
    .dashboard-plan-level span {
      display: block;
      color:
        rgba(24, 58, 82, .58);
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .dashboard-plan-level strong {
      display: block;
      margin-top: 3px;
      font-size: 1.3rem;
      font-weight: 700;
    }
    .dashboard-plan-level-breakdown {
      display: block;
      margin-top: 5px;
      color:
        rgba(24, 58, 82, .58);
      font-size: .72rem;
      font-weight: 500;
      line-height: 1.25;
      text-transform: none;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .dashboard-action-grid {
      display: grid;
      grid-template-columns:
        1fr 1fr;
      gap: 13px;
    }
    .dashboard-action {
      min-height: 126px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding:
        18px;
      border:
        1px solid rgba(24, 58, 82, .15);
      border-radius: 15px;
      background:
        rgba(255, 255, 255, .94);
      color: var(--navy);
      text-align: left;
      transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
    }
    .dashboard-action:hover:not(:disabled) {
      transform:
        translateY(-2px);
      border-color:
        rgba(24, 58, 82, .30);
      box-shadow:
        0 10px 22px rgba(16, 43, 62, .08);
    }
    .dashboard-action-icon {
      width: 43px;
      height: 43px;
      display: grid;
      place-items: center;
      margin-bottom: 10px;
      border-radius: 11px;
      background: var(--navy);
      color: var(--white);
      font-size: 1rem;
      font-weight: 700;
    }
    .dashboard-action-title {
      font-size: 1.22rem;
      font-weight: 600;
      line-height: 1.18;
      text-align: center;
    }
    .dashboard-action-copy {
      margin-top: 7px;
      color:
        rgba(24, 58, 82, .66);
      font-size: .94rem;
      line-height: 1.42;
    }
    .dashboard-action-enter {
      margin-top: auto;
      padding-top: 15px;
      font-weight: 600;
    }
    .dashboard-free-action {
      grid-column:
        1 / -1;
      min-height: 0;
      display: grid;
      grid-template-columns:
        auto 1fr auto;
      align-items: center;
      gap: 15px;
    }
    .dashboard-free-action .dashboard-action-icon {
      margin-bottom: 0;
    }
    .dashboard-free-action .dashboard-action-enter {
      margin-top: 0;
      padding-top: 0;
      white-space: nowrap;
    }
    .dashboard-loading-card {
      grid-column:
        1 / -1;
      padding:
        20px;
      border:
        1px solid rgba(24, 58, 82, .13);
      border-radius: 14px;
      background:
        rgba(255, 255, 255, .66);
      color:
        rgba(24, 58, 82, .66);
    }

    /* =====================================================
       LOGIN / ENTRY ROUTE
       ===================================================== */
    body.routing-pending .topbar,
    body.routing-pending .app,
    body.routing-pending .site-footer,
    body.routing-pending .plainbetter-character,
    body.routing-pending .privacy-banner {
      visibility: hidden;
    }
    .login-screen {
      justify-content: center;
      overflow-y: auto;
      padding:
        34px 28px;
      min-height: 0;
    }
    .login-layout {
      width:
        min(1120px, 100%);
      margin: auto;
      display: grid;
      grid-template-columns:
        minmax(0, 1.15fr)
        minmax(340px, .85fr);
      gap:
        clamp(38px, 7vw, 92px);
      align-items: center;
    }
    .login-copy {
      max-width: 650px;
    }
    .login-copy .brand-title {
      text-align: left;
      font-size:
        clamp(4.2rem, 8vw, 7rem);
    }
    .login-tagline {
      margin:
        18px 0 0;
      max-width: 620px;
      color:
        rgba(24, 58, 82, .79);
      font-size:
        clamp(1.35rem, 2.6vw, 2rem);
      line-height: 1.25;
      font-weight: 400;
    }
    .login-description {
      margin:
        18px 0 0;
      max-width: 570px;
      color:
        rgba(24, 58, 82, .69);
      font-size: 1.06rem;
      line-height: 1.55;
    }
    .login-entry-card {
      width: 100%;
      padding:
        30px;
      border:
        1px solid rgba(24, 58, 82, .14);
      border-radius: 22px;
      background:
        rgba(255, 255, 255, .90);
      box-shadow:
        0 16px 42px rgba(16, 43, 62, .11);
    }
    .login-entry-card h2 {
      margin-bottom: 7px;
      font-size: 1.8rem;
      font-weight: 600;
    }
    .login-entry-card .utility-message {
      margin:
        0 0 22px;
    }
    .entry-secondary {
      margin-top: 11px;
      padding:
        13px 18px;
      border:
        1px solid rgba(24, 58, 82, .26);
      background:
        rgba(255, 255, 255, .78);
      color: var(--navy);
    }
    .entry-secondary:hover {
      transform:
        translateY(-1px);
      background: var(--white);
      border-color:
        rgba(24, 58, 82, .42);
    }
    .entry-signup-ochre {
      margin-top: 11px;
      background: var(--ochre);
      color: var(--navy);
    }
    .entry-signup-ochre:hover:not(:disabled) {
      background: #d8ad53;
      color: var(--navy);
    }
    .entry-note {
      margin:
        12px 0 0;
      color:
        rgba(24, 58, 82, .58);
      font-size: .83rem;
      line-height: 1.42;
      text-align: center;
    }
    /* =====================================================
       AUTH
       ===================================================== */
    .auth-modal {
      position: fixed;
      inset: 0;
      z-index: 15000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background:
        rgba(16, 43, 62, .65);
    }
    .auth-card {
      position: relative;
      width:
        min(440px, 100%);
      padding: 25px;
      border-radius: 19px;
      background: var(--white);
      color: var(--navy);
      box-shadow:
        0 24px 70px rgba(16, 43, 62, .29);
    }
    .auth-close {
      position: absolute;
      top: 11px;
      right: 13px;
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color:
        rgba(24, 58, 82, .65);
      font-size: 1.4rem;
    }
    .auth-tabs {
      display: grid;
      grid-template-columns:
        1fr 1fr;
      gap: 5px;
      margin:
        18px 0;
      padding: 4px;
      border-radius: 11px;
      background: var(--cream);
    }
    .tab {
      border: 0;
      border-radius: 8px;
      padding: 9px;
      background: transparent;
      color:
        rgba(24, 58, 82, .64);
      font-weight: 600;
    }
    .tab.active {
      background: var(--white);
      color: var(--navy);
      box-shadow:
        0 1px 3px rgba(16, 43, 62, .10);
    }
    .password-wrap {
      position: relative;
    }
    .password-wrap input {
      padding-right: 78px;
    }
    .password-toggle {
      position: absolute;
      top: 50%;
      right: 10px;
      transform:
        translateY(-50%);
      border: 0;
      padding:
        5px 7px;
      border-radius: 7px;
      background: transparent;
      color:
        rgba(24, 58, 82, .72);
      font-size: .86rem;
      font-weight: 600;
      line-height: 1;
    }
    .password-toggle:hover {
      background:
        rgba(24, 58, 82, .07);
      color: var(--navy);
    }
    .password-toggle:focus-visible {
      outline:
        2px solid rgba(24, 58, 82, .40);
      outline-offset: 1px;
    }
    .auth-link-row {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .auth-link {
      border: 0;
      padding: 2px 0;
      background: transparent;
      color: var(--navy);
      font-size: .9rem;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .auth-link:hover {
      opacity: .76;
    }
    .auth-msg {
      min-height: 20px;
      margin-top: 12px;
      font-size: .89rem;
    }
    /* =====================================================
       MOBILE
       ===================================================== */
    @media (max-width: 980px) {
      .topbar .email {
        max-width: 170px;
      }
      .top-brand {
        font-size: 1.5rem;
        margin-right: 1px;
      }
    }
    @media (max-width: 820px) {
      :root {
        --topbar-height: 64px;
        --footer-height: 64px;
      }
      .app {
        min-width: 0;
        min-height: 0;
        overflow: hidden;
      }
      .screen {
        min-width: 0;
      }
      .screen.active {
        min-width: 0;
      }
      .topbar-inner {
        width: 100%;
        min-width: 0;
      }
      .top-left {
        flex: 1 1 auto;
        min-width: 0;
      }
      .top-right {
        flex: 0 1 auto;
        min-width: 0;
      }
      .topbar .email {
        display: inline-block !important;
        max-width: 132px;
        font-size: .82rem;
      }
      .consistency-indicator {
        min-width: 20px;
        font-size: 1.28rem;
      }
      .user-menu-btn {
        width: 40px;
        height: 40px;
      }
      .site-footer {
        height: auto;
        min-height: var(--footer-height);
      }
      .site-footer-inner {
        height: auto;
        min-height: var(--footer-height);
        padding:
          7px 0;
      }
      .footer-links {
        flex-wrap: wrap;
        row-gap: 4px;
      }
      .dashboard-screen,
      .login-screen,
      .home-screen,
      .language-onboarding-screen,
      .grammar-learning-screen,
      .vocab-setup-screen {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
      }
      .dashboard-screen {
        padding:
          25px 14px
          32px;
      }
      .dashboard-language-grid {
        grid-template-columns:
          repeat(auto-fill, 164px);
      }
      .dashboard-action-grid {
        grid-template-columns: 1fr;
      }
      .dashboard-top-row {
        align-items: center;
        gap: 12px;
      }
      .dashboard-heading h1 {
        font-size:
          clamp(2.35rem, 9vw, 3.35rem);
      }
      .dashboard-new-language-tile {
        min-width: 0;
        padding:
          10px 12px;
      }
      .dashboard-plan {
        padding:
          19px 15px;
      }
      .dashboard-plan-head {
        flex-direction: column;
        gap: 12px;
      }
      .dashboard-plan-level {
        min-width: 0;
        text-align: left;
      }
      .dashboard-free-action {
        grid-column: auto;
        grid-template-columns:
          auto 1fr;
      }
      .dashboard-free-action .dashboard-action-enter {
        grid-column:
          1 / -1;
      }
      .dashboard-language-card {
        width: 164px;
        min-height: 116px;
        padding:
          12px 10px;
      }
      .dashboard-language-flag {
        width: 42px;
        height: 28px;
      }
      .login-screen {
        align-items: flex-start;
        padding:
          30px 17px;
      }
      .login-layout {
        grid-template-columns: 1fr;
        gap: 27px;
      }
      .login-copy {
        text-align: center;
        margin: 0 auto;
      }
      .login-copy .brand-title {
        text-align: center;
        font-size: 3.8rem;
      }
      .login-tagline {
        margin-top: 13px;
        font-size: 1.45rem;
      }
      .login-description {
        margin-top: 12px;
        font-size: .98rem;
      }
      .login-entry-card {
        width:
          min(470px, 100%);
        margin: 0 auto;
        padding:
          23px 18px;
      }
      body {
        font-size: 17px;
      }
      .topbar-inner {
        padding:
          0 12px;
        gap: 7px;
      }
      .top-left {
        gap: 5px;
      }
      .top-right,
      .auth-actions {
        gap: 5px;
      }
      .top-brand {
        font-size: 1.28rem;
        padding-right: 2px;
      }
      .nav-btn {
        padding:
          8px 9px;
        font-size: .80rem;
      }
      #topBackBtn {
        padding:
          8px 8px;
        font-size: .76rem;
      }
      #recentBtn {
        font-size: .74rem;
      }
      .plainbetter-character {
        width: 84px;
        height: 132px;
      }
      .home-screen {
        overflow-y: auto;
        padding:
          24px 0;
      }
      .brand-title {
        font-size: 3.6rem;
      }
      .brand-subtitle {
        font-size: 1.5rem;
      }
      .mode-grid {
        flex: 0 0 auto;
        width:
          calc(100% - 28px);
        margin-top: 25px;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 15px;
        padding-bottom: 20px;
      }
      .mode-tile {
        height: 220px;
        padding:
          26px 22px;
      }
      .mode-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 13px;
        font-size: 1.5rem;
      }
      .mode-title {
        font-size: 1.7rem;
      }
      .mode-description {
        font-size: .98rem;
      }
      .mode-enter {
        margin-top: 11px;
        font-size: 1.05rem;
      }
      .center-screen {
        align-items: flex-start;
        padding:
          28px 17px;
      }
      .workspace-header {
        width:
          calc(100% - 28px);
        padding:
          17px 0 11px;
      }
      .chat-workspace {
        width:
          calc(100% - 28px);
        grid-template-columns:
          1fr;
        grid-template-rows:
          auto minmax(0, 1fr);
        gap: 12px;
        padding-bottom: 12px;
      }
      .grammar-learning-screen {
        padding:
          22px 14px
          32px;
      }
      .grammar-recommendations {
        grid-template-columns: 1fr;
      }
      .grammar-recommendation-card {
        min-height: 0;
      }
      .grammar-current-level-foot {
        flex-direction: column;
      }
      .chat-workspace.practice-mode {
        width:
          calc(100% - 28px);
        grid-template-columns: 1fr;
        grid-template-rows:
          auto minmax(0, 1fr) auto;
        gap: 12px;
      }
      .practice-focus {
        order: 3;
      }
      .feedback {
        padding: 13px;
        min-height: auto;
      }
      .messages {
        padding:
          18px 14px;
      }
      .bubble {
        max-width: 88%;
      }
      .composer {
        flex-wrap: wrap;
      }
      .composer input {
        flex-basis: 100%;
      }
      .example {
        flex: 1;
        min-height: 42px;
      }
      .send {
        min-height: 42px;
      }
      .language-onboarding-screen {
        padding:
          20px 14px
          34px;
      }
      .starting-level-options {
        grid-template-columns: 1fr;
      }
      .chat-difficulty-options {
        grid-template-columns: 1fr;
      }
      .chat-difficulty-option {
        min-height: 78px;
      }
      .onboarding-resume,
      .dashboard-onboarding-prompt {
        align-items: stretch;
        flex-direction: column;
      }
      .onboarding-resume .secondary-btn,
      .dashboard-onboarding-prompt .secondary-btn {
        width: 100%;
      }
      .grammar-placement-wrap {
        align-items: flex-start;
        padding:
          16px 13px 24px;
      }
      .grammar-placement-card {
        padding: 20px;
      }
      .grammar-tutor-workspace {
        padding: 16px;
      }
      .grammar-tutor-form {
        align-items: stretch;
        flex-direction: column;
      }
      .grammar-tutor-send {
        width: 100%;
      }
      .grammar-placement-actions {
        align-items: stretch;
        flex-direction: column-reverse;
      }
      .grammar-placement-actions .big-btn {
        width: 100%;
      }
      .vocab-setup-screen {
        padding:
          20px 14px
          32px;
      }
      .vocab-source-grid {
        grid-template-columns: 1fr;
      }
      .vocab-choice-card {
        min-height: 0;
      }
      .vocab-options-row {
        grid-template-columns: 1fr;
      }
      /*
      Spec 64 Part 4: hidden, not removed from markup -- vertical space
      is tight on the phone layout and the option names are
      self-explanatory once seen. Same breakpoint as the rest of this
      screen's mobile layout, no new one introduced.
      */
      .vocab-mode-btn-tagline {
        display: none;
      }
      .vocab-start-row {
        align-items: stretch;
        flex-direction: column;
      }
      .vocab-start-row .big-btn {
        width: 100%;
      }
      .quiz-wrap {
        align-items: flex-start;
        padding:
          16px 13px 24px;
      }
      .utility {
        padding:
          23px 13px;
      }
      .utility-card,
      .quiz-card {
        padding:
          19px 15px;
      }
      .spoken-card {
        height: 300px;
      }
      .options,
      .vocab-list,
      .profile-summary {
        grid-template-columns: 1fr;
      }
      /*
      Spec 16: four columns will not fit at phone widths — reflow
      each results row to a stacked layout, with the header row
      hidden in favour of an inline label per stacked field.
      */
      .vocab-results-header {
        display: none;
      }
      .vocab-results-rows .answer-feedback {
        grid-template-columns: 1fr;
        gap: 2px;
      }
      .vocab-result-label {
        display: block;
        margin-top: 8px;
        color:
          rgba(24, 58, 82, .55);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
      }
      .vocab-result-cell:first-child .vocab-result-label {
        margin-top: 0;
      }
      .stats-section-heading {
        flex-direction: column;
        gap: 7px;
      }
      .grammar-estimate-card,
      .grammar-level-bottom,
      .grammar-concept-bottom {
        flex-direction: column;
        align-items: flex-start;
      }
      .grammar-level-metrics,
      .grammar-concept-reliability {
        white-space: normal;
      }
      .hardcore-row {
        flex-direction: column;
      }
      .hardcore-row .send {
        min-height: 44px;
      }
      .hardcore-row .secondary-btn {
        min-height: 44px;
      }
      .recent-top {
        flex-direction: column;
        gap: 3px;
      }
      .legal-wrap {
        padding:
          22px 13px;
      }
      .legal-content {
        padding:
          24px 18px;
      }
      .site-footer-inner {
        width:
          calc(100% - 16px);
      }
      .site-footer-inner > div:first-child {
        display: none;
      }
      .footer-links {
        width: 100%;
        justify-content: center;
        gap: 7px;
      }
      .footer-link {
        font-size: .75rem;
      }
      .footer-dot {
        font-size: .7rem;
      }
    }
    @media (max-width: 620px) {
      .topbar .email {
        max-width: 92px;
        font-size: .75rem;
      }
      .consistency-indicator {
        min-width: 18px;
        font-size: 1.15rem;
      }
      .top-brand {
        font-size: 1.12rem;
      }
      #topBackBtn {
        padding:
          7px 6px;
        font-size: .68rem;
      }
    }
    @media (max-width: 520px) {
      .topbar-inner {
        padding:
          0 8px;
      }
      .topbar .email {
        max-width: 74px;
        font-size: .70rem;
      }
      .consistency-indicator {
        min-width: 16px;
        font-size: 1.05rem;
      }
      .dashboard-screen {
        padding-top: 18px;
      }
      .dashboard-top-row {
        align-items: flex-start;
      }
      .dashboard-heading h1 {
        font-size: 2.55rem;
      }
      .dashboard-new-language-tile {
        gap: 7px;
        padding:
          9px 10px;
        font-size: .88rem;
      }
      .dashboard-new-language-plus {
        width: 24px;
        height: 24px;
        font-size: 1.08rem;
      }
      .dashboard-language-grid {
        grid-template-columns:
          repeat(2, minmax(0, 1fr));
      }
      .dashboard-language-card {
        width: 100%;
        min-height: 110px;
      }
      .nav-btn {
        padding:
          7px 6px;
        font-size: .70rem;
      }
      #recentBtn {
        font-size: .65rem;
      }
      .footer-links {
        gap: 5px;
      }
      .footer-link {
        font-size: .67rem;
      }
      .footer-dot {
        font-size: .62rem;
      }
      .brand-title {
        font-size: 3rem;
      }
    }
    @media (max-height: 900px) {
      .center-screen {
        padding:
          18px 28px;
      }
      .login-screen {
        padding:
          18px 28px;
      }
      .grammar-placement-wrap {
        padding:
          14px 24px;
      }
      .quiz-wrap {
        padding:
          12px 28px 16px;
      }
      .language-onboarding-screen {
        padding:
          16px 24px 24px;
      }
      .grammar-learning-screen {
        padding:
          16px 28px 24px;
      }
      .vocab-setup-screen {
        padding:
          16px 26px 24px;
      }
      .dashboard-screen {
        padding:
          16px 28px 24px;
      }
      .quiz-card {
        padding:
          18px 28px;
      }
      .grammar-placement-card {
        padding:
          18px;
      }
    }
    @media (max-width: 700px) {
      .settings-row {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .user-menu-dropdown {
        width: min(224px, calc(100vw - 28px));
      }
      .topbar .email {
        max-width: 150px;
      }
    }

    /* =====================================================
       BACKEND WAKE LOADER
       ===================================================== */
    .backend-wake-loader {
      position: fixed;
      inset: 0;
      z-index: 30000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background:
        linear-gradient(
          180deg,
          var(--ochre) 0%,
          var(--ochre-mid) 58%,
          var(--ochre-light) 100%
        );
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity .42s ease,
        visibility 0s linear .42s;
    }
    .backend-wake-loader.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition:
        opacity .24s ease;
    }
    .backend-wake-loader.finishing {
      opacity: 0;
      pointer-events: none;
      transition:
        opacity .42s ease .24s;
    }
    .backend-wake-loader-inner {
      width:
        min(520px, calc(100% - 48px));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform:
        translateY(-1.5vh);
    }
    .backend-wake-figure-stage {
      position: relative;
      width: 160px;
      height:
        clamp(280px, 43vh, 390px);
      flex: 0 0 auto;
      transition:
        transform .72s cubic-bezier(.65, 0, .35, 1);
      will-change: transform;
    }
    .backend-wake-swing {
      position: absolute;
      top:
        calc(-1 * clamp(74px, 10vh, 104px));
      left: 50%;
      width: 160px;
      height:
        calc(100% + clamp(74px, 10vh, 104px));
      transform:
        translateX(-50%)
        rotate(-6deg);
      transform-origin:
        50% 0;
      animation:
        backendWakeSwing
        2.7s
        ease-in-out
        infinite;
      will-change: transform;
    }
    .backend-wake-swing svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .backend-wake-rope {
      fill: none;
      stroke: var(--navy-dark);
      stroke-width: 4;
      stroke-linecap: round;
    }
    .backend-wake-person-line {
      fill: none;
      stroke: var(--navy-dark);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .backend-wake-person-head {
      fill: var(--cream);
      stroke: var(--navy-dark);
      stroke-width: 5;
    }
    .backend-wake-person-hand {
      fill: var(--cream);
      stroke: var(--navy-dark);
      stroke-width: 3.2;
    }
    .backend-wake-progress-stage {
      width: 100%;
      transition:
        transform .72s cubic-bezier(.65, 0, .35, 1),
        opacity .45s ease;
      will-change:
        transform,
        opacity;
    }
    .backend-wake-copy {
      margin-bottom: 13px;
      color:
        rgba(24, 58, 82, .78);
      font-size: 1.08rem;
      font-weight: 600;
      text-align: center;
    }
    .backend-wake-progress-track {
      width: 100%;
      height: 12px;
      overflow: hidden;
      border:
        1px solid rgba(24, 58, 82, .22);
      border-radius: 999px;
      background:
        rgba(248, 241, 222, .62);
      box-shadow:
        inset 0 1px 3px rgba(16, 43, 62, .08);
    }
    .backend-wake-progress-fill {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: var(--navy);
      transition:
        width .16s linear;
      will-change: width;
    }
    .backend-wake-loader.ready
    .backend-wake-progress-fill {
      transition:
        width .20s ease-out;
    }
    .backend-wake-loader.finishing
    .backend-wake-figure-stage {
      transform:
        translateY(-115vh);
    }
    .backend-wake-loader.finishing
    .backend-wake-progress-stage {
      transform:
        translateY(70vh);
      opacity: 0;
    }
    @keyframes backendWakeSwing {
      0%,
      100% {
        transform:
          translateX(-50%)
          rotate(-7deg);
      }
      50% {
        transform:
          translateX(-50%)
          rotate(7deg);
      }
    }

    /* =====================================================
       SPOKEN VOCABULARY (Spec 45)
       ===================================================== */
    .spoken-quiz-wrap {
      width:
        min(720px, 100%);
      margin: auto;
    }
    .spoken-card-stack {
      position: relative;
      margin-top: 16px;
    }
    /*
    Spec 47 Part 2: a fixed height, not a floor — .spoken-card-stack's own
    box (and so the two ghost layers below, which stretch to match it via
    inset: 0) is sized only by this element, the one normal-flow child it
    has, so a fixed height here is what keeps every card, live or
    decorative, genuinely identical regardless of content. Chosen to
    comfortably fit the longest realistic prompt now that Spec 46 removed
    the sense bullets; content taller than this scrolls inside the card
    (via .spoken-card-content below) rather than growing it.
    */
    .spoken-card {
      height: 360px;
      display: flex;
      flex-direction: column;
    }
    /*
    Spec 47 Part 2: centres the prompt/part-of-speech/feedback block
    vertically within the fixed-height card, so a short prompt doesn't
    sit at the top of a tall card. "I don't know" is a sibling after
    this, not inside it, and keeps its existing bottom-anchored position
    (Spec 46; centring the button itself is a later spec) — this wrapper
    taking the remaining space via flex: 1 is what pushes it there now
    that the card's own height is fixed instead of auto-sized to content.
    */
    .spoken-card-content {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .spoken-card-ghost {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .spoken-card-ghost-1 {
      z-index: 1;
      transform:
        translateY(10px)
        scale(.97);
      opacity: .55;
    }
    .spoken-card-ghost-2 {
      z-index: 0;
      transform:
        translateY(20px)
        scale(.94);
      opacity: .30;
    }
    #spokenCard {
      position: relative;
      z-index: 2;
      transition:
        opacity .18s ease;
    }
    .spoken-timer-track {
      margin: 0 0 22px;
    }
    /*
    Spec 47 Part 4: light blue, distinct from the lesson progress bar
    above it (which keeps its navy fill from .quiz-progress-fill) — a new
    --sky token, following the existing single-hue-name convention
    (--navy, --ochre, --cream).
    */
    .spoken-timer-fill {
      background: var(--sky);
      transition:
        width 1s linear;
    }
    .spoken-card-feedback {
      margin-top: 18px;
      font-size: 1.15rem;
      font-weight: 600;
      text-align: center;
    }
    .spoken-card-feedback.good {
      color: var(--success);
    }
    .spoken-card-feedback.bad {
      color:
        rgba(24, 58, 82, .82);
    }
    .spoken-dont-know-btn {
      align-self: flex-end;
      flex-shrink: 0;
      min-height: 44px;
    }
    /*
    Spec 47 Part 3: the whole card's background fades to the outcome
    colour and partway back, rather than the earlier box-shadow ring
    pulse — which, being a shadow rather than a fill, read as no pulse
    at all against the card's own background. Percentages are relative
    to the animation's own duration (1.5s), so 33.333% lands the peak at
    roughly 0.5s and 100% lands the partial fade-back at roughly 1.5s
    total, matching the spec's two-phase timing without needing separate
    animations chained together.
    */
    @keyframes spokenCardCorrectFade {
      0% {
        background-color:
          rgba(255, 255, 255, .90);
      }
      33.333% {
        background-color:
          rgba(39, 101, 67, .55);
      }
      100% {
        background-color:
          rgba(39, 101, 67, .275);
      }
    }
    .spoken-card.correct {
      animation:
        spokenCardCorrectFade 1.5s ease;
    }
    @keyframes spokenCardIncompleteFade {
      0% {
        background-color:
          rgba(255, 255, 255, .90);
      }
      33.333% {
        background-color:
          rgba(210, 161, 58, .55);
      }
      100% {
        background-color:
          rgba(210, 161, 58, .275);
      }
    }
    .spoken-card.incomplete {
      animation:
        spokenCardIncompleteFade 1.5s ease;
    }
    #spokenFinishCard {
      width:
        min(720px, 100%);
      margin: auto;
    }
    @keyframes spokenFadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    .spoken-fade-in {
      animation:
        spokenFadeIn .4s ease;
    }

    @media (prefers-reduced-motion: reduce) {
      .backend-wake-swing {
        animation: none;
        transform:
          translateX(-50%)
          rotate(0deg);
      }
      .backend-wake-figure-stage,
      .backend-wake-progress-stage,
      .backend-wake-loader,
      .backend-wake-progress-fill {
        transition-duration: .01ms !important;
      }
      .character-hanging {
        animation: none;
        transform:
          rotate(1deg);
      }
      .spoken-card.correct,
      .spoken-card.incomplete {
        animation: none;
      }
      .spoken-fade-in {
        animation: none;
      }
    }