* { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --surface:          #f6f4ef;
      --surface-low:      #efeeeb;
      --surface-high:     #ffffff;
      --surface-highest:  #d4d1ca;
      --outline:          #d4d1ca;
      --primary:          #fe4d01;
      --secondary:        #e54501;
      --on-surface:       #151515;
      --on-surface-muted: #706d65;
    }

    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    body {
      font-family: 'Manrope', sans-serif;
      background: var(--surface);
      color: var(--on-surface);
      height: 100dvh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      user-select: none;
    }

    /* ── Header ── */
    #app-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 50;
      background: rgba(246, 244, 239, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: var(--safe-top) 20px 12px;
      min-height: calc(56px + var(--safe-top));
      flex-shrink: 0;
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    #app-header h1 {
      font-weight: 700;
      font-size: 17px;
      color: var(--on-surface);
      letter-spacing: -0.3px;
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    #settings-btn, #readmode-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--on-surface-muted);
      padding: 8px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s, background 0.2s;
    }
    #settings-btn:hover, #readmode-btn:hover {
      color: var(--primary);
      background: rgba(254, 77, 1, 0.08);
    }

    /* ── Tabs ── */
    #tab-home, #tab-grammar {
      display: none;
      flex: 1;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      margin-top: calc(56px + var(--safe-top));
    }
    #tab-home.active { display: flex; justify-content: flex-start; }
    #tab-grammar.active { display: flex; align-items: stretch; position: relative; }

    /* ── Profile tab ── */
    #tab-profile {
      display: none;
      flex: 1;
      flex-direction: column;
      overflow-y: auto;
      margin-top: calc(56px + var(--safe-top));
      padding: 20px 20px calc(20px + var(--safe-bottom));
      gap: 16px;
    }
    #tab-profile.active { display: flex; }

    .profile-card-time {
      display: flex; align-items: center; gap: 16px;
    }
    .time-icon {
      width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
      background: rgba(254,77,1,0.12);
      display: flex; align-items: center; justify-content: center;
    }
    .time-icon .material-symbols-outlined { font-size: 24px; color: var(--primary); }
    .time-value { font-size: 24px; font-weight: 800; color: var(--on-surface); }
    .time-label { font-size: 12px; color: var(--on-surface-muted); margin-top: 2px; font-weight: 500; }

    .streak-card {
      background: linear-gradient(135deg, #fe4d01 0%, #c93b00 100%);
      border-radius: 20px;
      padding: 24px;
      display: flex;
      align-items: center;
      gap: 18px;
      color: white;
      box-shadow: 0 8px 24px rgba(254, 77, 1, 0.28);
      flex-shrink: 0;
    }
    .streak-flame { font-size: 52px; line-height: 1; }
    .streak-count { font-size: 48px; font-weight: 800; line-height: 1; }
    .streak-label { font-size: 15px; font-weight: 600; opacity: 0.92; margin-top: 2px; }
    .streak-sublabel { font-size: 12px; opacity: 0.72; margin-top: 4px; }

    .profile-card {
      background: var(--surface-low);
      border: 1px solid var(--outline);
      border-radius: 20px;
      padding: 20px;
      flex-shrink: 0;
    }
    .profile-card-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--on-surface-muted);
      margin-bottom: 14px;
    }

    .q-progress-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }
    .q-progress-track {
      flex: 1;
      height: 8px;
      background: rgba(0,0,0,0.08);
      border-radius: 4px;
      overflow: hidden;
    }
    .q-progress-fill {
      height: 100%;
      background: var(--primary);
      border-radius: 4px;
      transition: width 0.4s ease;
      box-shadow: 0 0 8px rgba(254, 77, 1, 0.35);
    }
    .q-progress-fill.complete { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.35); }
    .q-progress-num {
      font-size: 13px;
      font-weight: 700;
      color: var(--on-surface);
      white-space: nowrap;
    }
    .q-progress-sub { font-size: 12px; color: var(--on-surface-muted); }

    .type-list { display: flex; flex-direction: column; gap: 11px; }
    .type-row  { display: flex; align-items: center; gap: 12px; }
    .type-check {
      width: 26px; height: 26px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .type-check.done { background: var(--primary); color: white; }
    .type-check.todo { border: 2px dashed rgba(0,0,0,0.18); color: transparent; }
    .type-name { font-size: 14px; font-weight: 600; }
    .type-name.done { color: var(--on-surface); }
    .type-name.todo { color: var(--on-surface-muted); }

    .skip-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .skip-desc { font-size: 13px; color: var(--on-surface-muted); flex: 1; }
    .skip-badge {
      font-size: 12px; font-weight: 700;
      padding: 5px 12px; border-radius: 20px; white-space: nowrap;
    }
    .skip-badge.available { background: rgba(254,77,1,0.12); color: var(--primary); }
    .skip-badge.used      { background: rgba(0,0,0,0.06);    color: var(--on-surface-muted); }

    .goal-complete-banner {
      background: rgba(34,197,94,0.12);
      border: 1px solid rgba(34,197,94,0.3);
      border-radius: 14px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #16a34a;
      flex-shrink: 0;
    }

    /* ── Bottom nav ── */
    #bottom-nav {
      display: flex;
      background: rgba(246, 244, 239, 0.96);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 24px 24px 0 0;
      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
      padding-bottom: var(--safe-bottom);
      padding-top: 4px;
      flex-shrink: 0;
    }
    .nav-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 0 10px;
      gap: 4px;
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(112, 109, 101, 0.5);
      font-size: 10px;
      font-family: 'Manrope', sans-serif;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: color 0.2s;
    }
    .nav-btn .nav-icon-wrap {
      border-radius: 16px;
      padding: 4px 18px;
      transition: background 0.2s;
      display: flex;
      align-items: center;
    }
    .nav-btn.active {
      color: var(--primary);
    }
    .nav-btn.active .nav-icon-wrap {
      background: rgba(254, 77, 1, 0.1);
      box-shadow: 0 0 15px rgba(254, 77, 1, 0.1);
    }

    /* ── Grammar Tab ── */
    #grammar-list-view {
      flex: 1; overflow-y: auto; width: 100%;
      padding: 16px 16px calc(16px + var(--safe-bottom));
      display: flex; flex-direction: column; gap: 12px;
    }
    .grammar-section-label {
      font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--on-surface-muted);
      margin-top: 8px;
    }
    .grammar-topic-card {
      width: 100%; background: var(--surface-low);
      border: 1px solid var(--outline); border-radius: 18px;
      padding: 16px 18px; display: flex; align-items: center;
      gap: 14px; cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .grammar-topic-card:active { border-color: var(--primary); background: rgba(254,77,1,0.05); }
    .grammar-topic-icon {
      width: 44px; height: 44px; border-radius: 12px;
      background: rgba(254,77,1,0.1); display: flex;
      align-items: center; justify-content: center;
      flex-shrink: 0; color: var(--primary);
    }
    .grammar-topic-info { flex: 1; min-width: 0; }
    .grammar-topic-title { font-size: 15px; font-weight: 700; color: var(--on-surface); }
    .grammar-topic-sub { font-size: 12px; color: var(--on-surface-muted); margin-top: 2px; }
    .grammar-topic-meta { font-size: 11px; color: var(--on-surface-muted); margin-top: 4px; opacity: 0.7; }
    .grammar-topic-arrow { color: var(--on-surface-muted); opacity: 0.35; flex-shrink: 0; }

    /* Topic detail */
    #grammar-topic-view {
      position: absolute; inset: 0; background: var(--surface);
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
      z-index: 10;
    }
    #grammar-topic-view.open { transform: translateX(0); }
    #grammar-topic-nav {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px 10px; border-bottom: 1px solid var(--outline); flex-shrink: 0;
    }
    #grammar-back-btn {
      background: none; border: none; cursor: pointer; color: var(--primary);
      display: flex; align-items: center; gap: 2px;
      font-size: 14px; font-weight: 700; font-family: 'Manrope', sans-serif; padding: 4px 0;
    }
    #grammar-topic-nav-title { font-size: 15px; font-weight: 700; color: var(--on-surface); }
    #grammar-topic-body {
      flex: 1; min-height: 0; overflow-y: auto;
      padding: 18px 16px 18px;
      display: flex; flex-direction: column; gap: 14px;
    }
    #grammar-topic-body > * { flex-shrink: 0; }

    /* Section types */
    .gs-intro {
      font-size: 14px; line-height: 1.75; color: var(--on-surface);
      background: rgba(254,77,1,0.06); border-left: 3px solid var(--primary);
      border-radius: 0 12px 12px 0; padding: 14px 16px;
    }
    .gs-rule { background: var(--surface-low); border: 1px solid var(--outline); border-radius: 16px; padding: 16px; }
    .gs-rule-title { font-size: 11px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
    .gs-rule-body { font-size: 14px; line-height: 1.65; color: var(--on-surface); margin-bottom: 10px; }
    .gs-rule-examples { display: flex; flex-direction: column; gap: 6px; }
    .gs-rule-example { background: var(--surface); border-radius: 10px; padding: 8px 12px; }
    .gs-rule-example-nl { font-size: 13px; font-weight: 600; color: var(--on-surface); font-family: 'Inter', sans-serif; }
    .gs-rule-example-en { font-size: 12px; color: var(--on-surface-muted); margin-top: 1px; }

    .gs-table-wrap { border: 1px solid var(--outline); border-radius: 16px; overflow: hidden; }
    .gs-table-title {
      font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--on-surface-muted); padding: 10px 14px 8px;
      background: var(--surface-low); border-bottom: 1px solid var(--outline);
    }
    .gs-table { width: 100%; border-collapse: collapse; }
    .gs-table-head th {
      font-size: 11px; font-weight: 700; color: var(--on-surface-muted);
      padding: 7px 12px; text-align: left; background: var(--surface-low);
      border-bottom: 1px solid var(--outline);
    }
    .gs-table-row { cursor: pointer; transition: background 0.15s; }
    .gs-table-row:not(:last-of-type) { border-bottom: 1px solid rgba(0,0,0,0.05); }
    .gs-table-row:active { background: rgba(254,77,1,0.05); }
    .gs-table-row td { padding: 10px 12px; font-size: 13px; vertical-align: middle; }
    .gs-table-row td:first-child { color: var(--on-surface-muted); font-size: 12px; }
    .gs-table-row td:nth-child(2) { font-weight: 700; color: var(--primary); }
    .gs-table-row td:nth-child(3) { font-size: 11px; color: var(--on-surface-muted); font-style: italic; }
    .gs-table-row .gs-expand-hint { font-size: 11px; color: var(--on-surface-muted); opacity: 0.5; }
    .gs-table-expand { background: rgba(254,77,1,0.04); display: none; }
    .gs-table-expand.open { display: table-row; }
    .gs-table-expand td { padding: 8px 12px 11px; border-top: 1px dashed rgba(254,77,1,0.2); }
    .gs-table-expand-nl { font-size: 13px; font-weight: 600; color: var(--on-surface); }
    .gs-table-expand-en { font-size: 12px; color: var(--on-surface-muted); margin-top: 2px; }

    .gs-exercise { background: var(--surface-low); border: 1px solid var(--outline); border-radius: 16px; padding: 16px; }
    .gs-exercise-q { font-size: 14px; font-weight: 600; color: var(--on-surface); margin-bottom: 12px; line-height: 1.5; }
    .gs-exercise-row { display: flex; gap: 8px; margin-bottom: 6px; }
    .gs-exercise-input {
      flex: 1; border: 1.5px solid var(--outline); border-radius: 10px;
      padding: 10px 14px; font-size: 14px; font-family: 'Manrope', sans-serif;
      background: var(--surface); color: var(--on-surface); outline: none;
      transition: border-color 0.2s;
    }
    .gs-exercise-input:focus { border-color: var(--primary); }
    .gs-exercise-input.ok  { border-color: #22c55e; background: rgba(34,197,94,0.06); }
    .gs-exercise-input.err { border-color: #ef4444; background: rgba(239,68,68,0.06); }
    .gs-exercise-check {
      background: transparent; color: var(--primary);
      border: 1.5px solid var(--primary); border-radius: 10px;
      padding: 10px 16px; font-size: 13px; font-weight: 700;
      font-family: 'Manrope', sans-serif; cursor: pointer; white-space: nowrap;
      transition: background 0.15s, color 0.15s;
    }
    .gs-exercise-check:active { background: rgba(254,77,1,0.1); }
    .gs-exercise-check:disabled { opacity: 0.3; cursor: default; }
    .gs-exercise-feedback { font-size: 13px; font-weight: 600; min-height: 18px; }
    .gs-exercise-feedback.ok  { color: #16a34a; }
    .gs-exercise-feedback.err { color: #ef4444; }
    .gs-exercise-hint { font-size: 12px; color: var(--on-surface-muted); margin-top: 6px; font-style: italic; }

    .gs-practice {
      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
      border-radius: 16px; padding: 20px; display: flex; align-items: center;
      justify-content: space-between; cursor: pointer;
      box-shadow: 0 4px 16px rgba(254,77,1,0.25); border: none; width: 100%;
      font-family: 'Manrope', sans-serif; text-align: left;
    }
    .gs-practice-label { font-size: 15px; font-weight: 700; color: white; }
    .gs-practice-sub { font-size: 12px; color: rgba(255,255,255,0.75); margin-top: 2px; }
    .gs-practice-icon { color: white; }

    /* ── Story section ── */
    .gs-story-wrap { margin: 4px 0 8px; }
    .gs-story-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px;
    }
    .gs-story-title { font-size: 16px; font-weight: 700; color: var(--on-surface); }
    .gs-story-play-all {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 12px; border-radius: 20px; border: none;
      background: var(--primary); color: white;
      font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .gs-story-play-all .material-symbols-outlined { font-size: 18px; }
    .gs-story-para {
      display: flex; align-items: flex-start; gap: 10px;
      margin-bottom: 14px;
    }
    .gs-story-play {
      flex-shrink: 0; padding: 4px; border: none; background: none;
      color: var(--primary); cursor: pointer; margin-top: 1px;
    }
    .gs-story-play .material-symbols-outlined { font-size: 20px; }
    .gs-story-text {
      margin: 0; line-height: 1.65; font-size: 15px;
      color: var(--on-surface);
    }

    /* ── Story MCQ ── */
    .gs-mcq-wrap { margin: 4px 0 8px; }
    .gs-mcq-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--on-surface); }
    .gs-mcq-q { margin-bottom: 20px; }
    .gs-mcq-question { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--on-surface); }
    .gs-mcq-options { display: flex; flex-direction: column; gap: 8px; }
    .gs-mcq-opt {
      padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--surface-highest);
      background: var(--surface-low); color: var(--on-surface);
      font-size: 14px; text-align: left; cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .gs-mcq-opt:active:not(:disabled) { background: var(--surface-high); }
    .gs-mcq-opt.gs-mcq-correct { background: #dcfce7; border-color: #16a34a; color: #15803d; font-weight: 600; }
    .gs-mcq-opt.gs-mcq-wrong   { background: #fee2e2; border-color: #dc2626; color: #b91c1c; }
    .gs-mcq-opt.gs-mcq-wrong-opt:disabled { opacity: 0.45; }
    .gs-mcq-feedback { margin-top: 8px; font-size: 13px; font-weight: 600; }
    .gs-mcq-feedback.ok { color: #16a34a; }
    .gs-mcq-feedback.err { color: #dc2626; }

    /* ── Grammar paged navigation ── */
    #grammar-page-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px calc(10px + var(--safe-bottom));
      border-top: 1px solid var(--outline); flex-shrink: 0;
      background: var(--surface);
    }
    #grammar-page-footer.hidden { display: none; }
    .grammar-page-nav-btn {
      background: var(--surface-low); border: 1.5px solid var(--outline);
      border-radius: 12px; padding: 9px 18px; font-size: 13px; font-weight: 700;
      font-family: 'Manrope', sans-serif; color: var(--on-surface); cursor: pointer;
      transition: background 0.18s, border-color 0.18s, opacity 0.18s;
      display: flex; align-items: center; gap: 2px;
    }
    .grammar-page-nav-btn:disabled { opacity: 0.25; cursor: default; }
    .grammar-page-nav-btn.primary {
      background: var(--primary); color: white; border-color: var(--primary);
    }
    .grammar-page-nav-btn:not(:disabled):active { background: var(--surface-highest); }
    .grammar-page-nav-btn.primary:not(:disabled):active { background: var(--secondary); border-color: var(--secondary); }
    #grammar-page-dots { display: flex; gap: 5px; align-items: center; }
    .grammar-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--outline); transition: background 0.2s, transform 0.2s, opacity 0.2s;
      flex-shrink: 0;
    }
    .grammar-dot.active { background: var(--primary); transform: scale(1.4); }
    .grammar-dot.done   { background: var(--primary); opacity: 0.35; transform: scale(1); }
    .gs-summary-reveal {
      background: rgba(34,197,94,0.07); border: 1.5px dashed #22c55e;
      border-radius: 16px; padding: 18px 16px; text-align: center; cursor: pointer;
      font-family: 'Manrope', sans-serif; transition: background 0.2s;
    }
    .gs-summary-reveal:active { background: rgba(34,197,94,0.14); }
    .gs-summary-reveal-title { font-size: 14px; font-weight: 700; color: #16a34a; margin-bottom: 4px; }
    .gs-summary-reveal-sub   { font-size: 12px; color: var(--on-surface-muted); }
    .gs-topic-complete-banner {
      background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.25);
      border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 10px;
    }
    .gs-topic-complete-icon { font-size: 22px; }
    .gs-topic-complete-text { font-size: 13px; font-weight: 700; color: #16a34a; }

    /* ── Progress bar ── */
    #progress {
      width: 100%;
      flex-shrink: 0;
      padding: 8px 0 2px;
    }
    #progress-track {
      width: 100%;
      height: 2px;
      background: rgba(0,0,0,0.08);
    }
    #progress-fill {
      height: 2px;
      background: var(--primary);
      transition: width 0.4s ease;
      box-shadow: 0 0 8px rgba(254, 77, 1, 0.4);
    }
    #progress-label {
      text-align: center;
      font-size: 11px;
      color: var(--on-surface-muted);
      margin-top: 6px;
      letter-spacing: 0.5px;
      font-weight: 500;
    }

    /* ── Curriculum progress popup ── */
    #curriculum-popup-backdrop,
    #daily-popup-backdrop {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45);
      z-index: 200; backdrop-filter: blur(2px);
    }
    #curriculum-popup-backdrop.open,
    #daily-popup-backdrop.open { display: block; }
    #curriculum-popup,
    #daily-popup {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 201;
      background: var(--surface); border-radius: 24px 24px 0 0;
      padding: 0 0 calc(24px + var(--safe-bottom));
      transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
      max-height: 80vh; overflow-y: auto;
    }
    #curriculum-popup.open,
    #daily-popup.open { transform: translateY(0); }
    #curriculum-popup-handle,
    #daily-popup-handle {
      width: 36px; height: 4px; border-radius: 2px;
      background: var(--outline); margin: 12px auto 4px;
    }
    #curriculum-popup-title,
    #daily-popup-title {
      font-size: 17px; font-weight: 700; color: var(--on-surface);
      padding: 8px 20px 14px; border-bottom: 1px solid var(--outline);
    }
    #curriculum-popup-list,
    #daily-popup-list { padding: 10px 16px 0; display: flex; flex-direction: column; gap: 8px; }
    .cp-section-label {
      font-size: 11px; font-weight: 700; color: var(--on-surface-muted);
      text-transform: uppercase; letter-spacing: 0.6px;
      padding: 6px 4px 2px;
    }
    .cp-row {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 14px; border-radius: 14px;
      background: var(--surface-high); cursor: pointer;
      transition: opacity 0.15s;
    }
    .cp-row:active { opacity: 0.7; }
    .cp-row.cp-done { opacity: 0.55; cursor: default; }
    .cp-row-icon {
      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(254,77,1,0.12);
    }
    .cp-row-icon .material-symbols-outlined { font-size: 20px; color: var(--primary); }
    .cp-row.cp-done .cp-row-icon { background: rgba(74,222,128,0.12); }
    .cp-row.cp-done .cp-row-icon .material-symbols-outlined { color: #4ade80; }
    .cp-row-body { flex: 1; min-width: 0; }
    .cp-row-title { font-size: 15px; font-weight: 600; color: var(--on-surface); }
    .cp-row-sub { font-size: 12px; color: var(--on-surface-muted); margin-top: 1px; }
    .cp-row-status {
      font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 8px; flex-shrink: 0;
      background: rgba(254,77,1,0.12); color: var(--primary);
    }
    .cp-row.cp-done .cp-row-status { background: rgba(74,222,128,0.12); color: #4ade80; }
    .cp-info-row {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 14px; border-radius: 14px;
      background: var(--surface-high);
    }
    .cp-info-row .cp-row-icon { background: rgba(255,255,255,0.06); }
    .cp-info-row .cp-row-icon .material-symbols-outlined { color: var(--on-surface-muted); }
    .cp-info-row.cp-done .cp-row-icon { background: rgba(74,222,128,0.12); }
    .cp-info-row.cp-done .cp-row-icon .material-symbols-outlined { color: #4ade80; }

    /* ── Home curriculum bar ── */
    #home-curriculum-bar {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
      margin: 0 16px 14px;
      padding: 10px 16px;
      background: rgba(254,77,1,0.08);
      border: 1px solid rgba(254,77,1,0.18);
      border-radius: 14px;
      flex-shrink: 0;
      cursor: pointer; transition: background 0.15s;
    }
    #home-curriculum-bar:active { background: rgba(254,77,1,0.14); }
    #home-curriculum-label {
      font-size: 12px; font-weight: 600; color: var(--primary);
      text-align: center; flex: 1; line-height: 1.4;
    }
    /* ── Curriculum bar pills ── */
    #home-curriculum-rows {
      display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0;
    }
    #home-curriculum-label {
      display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
      font-size: 12px; font-weight: 600; color: var(--primary);
      justify-content: center;
    }
    .cb-les {
      color: var(--primary); font-weight: 700; white-space: nowrap;
    }
    .cb-pill {
      padding: 2px 7px; border-radius: 20px; font-size: 11px; font-weight: 700;
      background: rgba(254,77,1,0.1); color: var(--primary);
      white-space: nowrap;
    }
    .cb-pill.cb-done {
      background: rgba(74,222,128,0.15); color: #4ade80;
    }

    /* ── Home bar daily row (qdb-row classes used by curriculum-ui.js) ── */
    .qdb-row {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .qdb-row-label {
      font-size: 11px; font-weight: 700; color: var(--on-surface-muted);
      text-transform: uppercase; letter-spacing: 0.04em; word-break: break-word;
    }
    .qdb-row-done .qdb-row-label { color: #4ade80; }
    .qdb-chevron { font-size: 18px; color: var(--on-surface-muted); opacity: 0.35; flex-shrink: 0; }

    #quiz-daily-bar {
      display: flex; flex-direction: column; gap: 12px;
      margin: 4px 16px 14px;
      padding: 16px;
      background: #fff;
      border: none;
      border-radius: 20px;
      box-shadow: 0 2px 12px rgba(45,49,50,0.07);
      flex-shrink: 0;
    }
    .qdb-header {
      display: flex; justify-content: space-between; align-items: center;
    }
    .qdb-title {
      font-size: 16px; font-weight: 800; color: var(--on-surface);
    }
    .qdb-pct {
      font-size: 14px; font-weight: 700; color: var(--primary);
    }
    #quiz-daily-bar.qdb-complete .qdb-pct { color: #16a34a; }
    .qdb-track {
      width: 100%; height: 10px; background: #F7F5F0;
      border-radius: 999px; overflow: hidden;
    }
    .qdb-fill {
      height: 100%; background: var(--primary);
      border-radius: 999px; transition: width 0.7s ease;
    }
    #quiz-daily-bar.qdb-complete .qdb-fill { background: #4ade80; }
    .qdb-pills {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .qdb-pill {
      display: flex; align-items: center; gap: 4px;
      padding: 5px 10px 5px 7px; border-radius: 999px;
      background: #F7F5F0; border: 1px solid rgba(0,0,0,0.06);
      font-size: 11px; font-weight: 600; color: var(--on-surface-muted);
    }
    .qdb-pill .material-symbols-outlined { font-size: 14px; }
    .qdb-pill.done {
      background: rgba(254,77,1,0.1); border-color: rgba(254,77,1,0.15);
      color: var(--primary);
    }
    #quiz-daily-bar.qdb-complete .qdb-pill.done {
      background: rgba(74,222,128,0.15); border-color: rgba(74,222,128,0.3);
      color: #16a34a;
    }
    .qdb-continue-btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      width: 100%; padding: 10px 16px; border-radius: 12px;
      background: var(--primary); color: #fff;
      font-size: 13px; font-weight: 700; border: none; cursor: pointer;
      transition: opacity 0.15s;
    }
    .qdb-continue-btn:active { opacity: 0.8; }
    .qdb-continue-btn .material-symbols-outlined { font-size: 18px; }
    .qdb-pick-label {
      text-align: center; font-size: 12px; font-weight: 600;
      color: var(--on-surface-muted); padding: 4px 0;
    }

    #home-curriculum-bar.curriculum-bar-complete,
    #deck-curriculum-bar.curriculum-bar-complete {
      background: rgba(74,222,128,0.1);
      border-color: rgba(74,222,128,0.35);
    }
    #home-curriculum-bar.curriculum-bar-complete #home-curriculum-label,
    #home-curriculum-bar.curriculum-bar-complete #home-curriculum-rows .qdb-row-done .qdb-row-label,
    #deck-curriculum-bar.curriculum-bar-complete #deck-curriculum-label {
      color: #4ade80;
    }
    #home-back-to-plan-btn {
      font-size: 12px; font-weight: 700; color: var(--primary);
      background: none; border: 1.5px solid var(--primary);
      border-radius: 8px; padding: 4px 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
    }

    /* ── Les complete popup ── */
    #les-complete-backdrop {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
      z-index: 300;
    }
    #les-complete-backdrop.open { display: block; }
    #les-complete-popup {
      position: fixed; left: 50%; top: 50%;
      transform: translate(-50%, -50%) scale(0.88);
      z-index: 301; width: min(340px, calc(100vw - 40px));
      background: var(--surface); border-radius: 28px;
      padding: 32px 24px 24px;
      text-align: center;
      opacity: 0; pointer-events: none;
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
    }
    #les-complete-popup.open {
      opacity: 1; pointer-events: auto;
      transform: translate(-50%, -50%) scale(1);
    }
    #les-complete-emoji { font-size: 52px; margin-bottom: 12px; }
    #les-complete-title {
      font-size: 22px; font-weight: 800; color: var(--on-surface); margin-bottom: 8px;
    }
    #les-complete-sub {
      font-size: 14px; color: var(--on-surface-muted); line-height: 1.5; margin-bottom: 24px;
    }
    #les-complete-btns { display: flex; flex-direction: column; gap: 10px; }
    #les-complete-next-btn {
      padding: 14px; border-radius: 14px;
      background: var(--primary); color: #fff;
      font-size: 15px; font-weight: 700; cursor: pointer;
      border: none; transition: opacity 0.15s;
    }
    #les-complete-next-btn:active { opacity: 0.8; }
    #les-complete-repeat-btn {
      padding: 13px; border-radius: 14px;
      background: var(--surface-high); color: var(--on-surface-muted);
      font-size: 14px; font-weight: 600; cursor: pointer;
      border: none; transition: opacity 0.15s;
    }
    #les-complete-repeat-btn:active { opacity: 0.7; }

    /* ── Daily goal complete popup ── */
    #daily-goal-backdrop {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
      z-index: 298;
    }
    #daily-goal-backdrop.open { display: block; }
    #daily-goal-popup {
      position: fixed; left: 50%; top: 50%;
      transform: translate(-50%, -50%) scale(0.88);
      z-index: 299; width: min(340px, calc(100vw - 40px));
      background: var(--surface); border-radius: 28px;
      padding: 36px 24px 28px;
      text-align: center;
      opacity: 0; pointer-events: none;
      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
    }
    #daily-goal-popup.open {
      opacity: 1; pointer-events: auto;
      transform: translate(-50%, -50%) scale(1);
    }
    #daily-goal-emoji {
      font-size: 60px; margin-bottom: 14px;
      animation: none;
    }
    #daily-goal-popup.open #daily-goal-emoji {
      animation: goalBounce 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
    }
    @keyframes goalBounce {
      0%   { transform: scale(0.4); opacity: 0; }
      60%  { transform: scale(1.2); }
      100% { transform: scale(1);   opacity: 1; }
    }
    #daily-goal-title {
      font-size: 24px; font-weight: 800; color: var(--on-surface); margin-bottom: 6px;
    }
    #daily-goal-streak {
      font-size: 18px; font-weight: 700; color: #fe4d01; margin-bottom: 10px;
    }
    #daily-goal-sub {
      font-size: 13px; color: var(--on-surface-muted); line-height: 1.55; margin-bottom: 26px;
    }
    #daily-goal-close-btn {
      width: 100%; padding: 15px; border-radius: 14px;
      background: linear-gradient(135deg, #fe4d01, #c93b00);
      color: #fff; font-size: 16px; font-weight: 700;
      cursor: pointer; border: none;
      box-shadow: 0 4px 16px rgba(254,77,1,0.35);
      transition: opacity 0.15s, transform 0.1s;
    }
    #daily-goal-close-btn:active { opacity: 0.85; transform: scale(0.98); }

    /* ── Curriculum popup: view full plan button ── */
    #curriculum-popup-journey-btn,
    #daily-popup-quiz-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      margin: 14px 16px 0;
      padding: 13px 16px;
      width: calc(100% - 32px);
      background: rgba(254,77,1,0.08);
      border: 1.5px solid rgba(254,77,1,0.25);
      border-radius: 14px;
      font-size: 14px; font-weight: 700; color: var(--primary);
      cursor: pointer; transition: background 0.15s;
    }
    #curriculum-popup-journey-btn:active,
    #daily-popup-quiz-btn:active { background: rgba(254,77,1,0.16); }
    #curriculum-popup-journey-btn .material-symbols-outlined,
    #daily-popup-quiz-btn .material-symbols-outlined { font-size: 18px; }

    /* ── Grammar les journey (plan view inside Topics tab) ── */
    #grammar-les-list-view {
      flex: 1; overflow-y: auto; padding: 0 16px 32px;
      width: 100%; box-sizing: border-box;
    }
    #grammar-les-journey {
      display: flex; flex-direction: column; padding: 4px 0 16px;
    }
    .sj-les { display: flex; align-items: stretch; }
    .sj-les-last .journey-left { padding-bottom: 0; }
    .sj-card {
      flex: 1; padding: 6px 12px 16px 14px;
      border-radius: 14px; margin: 0 0 0 0;
      transition: background 0.15s;
    }
    .sj-les[data-les]:active .sj-card { background: var(--surface-high); }
    .sj-card-current { background: rgba(254,77,1,0.05); border: 1.5px solid rgba(254,77,1,0.2); border-radius: 14px; }
    .sj-card-done { opacity: 0.65; }
    .sj-card-locked { opacity: 0.45; }
    .sj-badge {
      display: inline-block; font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.4px;
      padding: 2px 8px; border-radius: 20px; margin-bottom: 4px;
    }
    .sj-badge-current { background: rgba(254,77,1,0.15); color: var(--primary); }
    .sj-badge-done    { background: rgba(74,222,128,0.15); color: #4ade80; }
    .sj-les-num   { font-size: 11px; font-weight: 600; color: var(--on-surface-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
    .sj-les-title { font-size: 16px; font-weight: 700; color: var(--on-surface); margin-bottom: 3px; }
    .sj-les-meta  { font-size: 12px; color: var(--on-surface-muted); }

    /* ── Theme groups ── */
    .sj-theme { margin-bottom: 6px; }
    /* legacy header (kept for any remnants) */
    .sj-theme-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 4px 10px; cursor: pointer; user-select: none;
    }
    .sj-theme-header:active { opacity: 0.6; }
    .sj-theme-header-left { display: flex; align-items: center; gap: 10px; }
    .sj-theme-title { font-size: 15px; font-weight: 700; color: var(--on-surface); }
    /* Card-style thema row */
    .sj-thema-row {
      display: flex; align-items: center; gap: 12px;
      background: var(--surface); border-radius: 14px;
      padding: 12px 14px 12px 12px; cursor: pointer; user-select: none;
      transition: opacity 120ms;
    }
    .sj-thema-row:active { opacity: 0.7; }
    .sj-thema-row--current { box-shadow: 0 0 0 1.5px #F25C3B inset; }
    .sj-thema__badge { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
    .sj-thema__badge > * { position: absolute; inset: 0; display: grid; place-items: center; }
    .sj-thema__num { font-size: 12px; font-weight: 800; color: var(--on-surface); position: relative; z-index: 1; }
    .sj-thema__body { flex: 1; min-width: 0; }
    .sj-thema__title { font-size: 15px; font-weight: 700; color: var(--on-surface); letter-spacing: -0.005em; margin-bottom: 2px; }
    .sj-thema__meta { font-size: 11.5px; color: var(--on-surface-muted); font-weight: 500; }
    .sj-thema__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .sj-thema__dot { width: 6px; height: 6px; border-radius: 999px; background: #F25C3B; box-shadow: 0 0 0 3px rgba(242,92,59,0.2); }
    .sj-section-label { font-size: 11px; font-weight: 700; color: var(--on-surface-muted); text-transform: uppercase; letter-spacing: 0.9px; padding: 4px 0 8px; }
    .sj-section-label--mt { margin-top: 12px; }
    .sj-theme-badge {
      font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
      background: var(--surface-high); color: var(--on-surface-muted);
    }
    .sj-theme-badge-done    { background: rgba(74,222,128,0.15); color: #4ade80; }
    .sj-theme-badge-current { background: rgba(254,77,1,0.15); color: var(--primary); }
    .sj-theme-chevron { font-size: 20px; color: var(--on-surface-muted); transition: transform 0.2s; }
    .sj-theme-chevron-collapsed { transform: rotate(-90deg); }
    .sj-theme-body { padding-bottom: 4px; }

    /* ── Les detail view ── */
    #grammar-les-detail-view {
      flex: 1; display: flex; flex-direction: column; overflow: hidden;
      width: 100%;
    }
    #grammar-les-detail-nav {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 16px 8px; flex-shrink: 0;
    }
    #grammar-les-back-btn {
      display: flex; align-items: center; gap: 2px;
      background: none; border: none; color: var(--primary);
      font-size: 15px; font-weight: 600; cursor: pointer; padding: 4px 0;
    }
    #grammar-les-detail-title {
      flex: 1; text-align: center; font-size: 15px; font-weight: 600;
      color: var(--on-surface); margin-right: 40px;
    }
    #grammar-les-detail-body { flex: 1; overflow-y: auto; padding: 0 16px 32px; }
    .sd-hero {
      padding: 16px 0 20px;
    }
    .sd-hero-num  { font-size: 11px; font-weight: 700; color: var(--on-surface-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
    .sd-hero-title { font-size: 22px; font-weight: 800; color: var(--on-surface); margin-bottom: 6px; }
    .sd-hero-desc  { font-size: 14px; color: var(--on-surface-muted); line-height: 1.45; margin-bottom: 16px; }
    .sd-switch-btn {
      padding: 10px 20px; border-radius: 22px;
      border: 2px solid var(--primary); background: none;
      color: var(--primary); font-size: 14px; font-weight: 700;
      cursor: pointer; transition: background 0.15s, color 0.15s;
    }
    .sd-switch-btn:active { background: var(--primary); color: #fff; }
    .sd-section-label {
      font-size: 11px; font-weight: 700; color: var(--on-surface-muted);
      text-transform: uppercase; letter-spacing: 0.6px;
      padding: 16px 0 8px;
    }
    .sd-row {
      display: flex; align-items: center; gap: 14px;
      background: var(--surface-high); border-radius: 14px;
      padding: 14px 16px; margin-bottom: 8px;
      cursor: pointer; transition: background 0.12s;
    }
    .sd-row:active { background: var(--outline); }
    .sd-row.sd-disabled { cursor: default; opacity: 0.4; }
    .sd-row.sd-disabled:active { background: var(--surface-high); }
    .sd-row-icon {
      width: 38px; height: 38px; border-radius: 10px;
      background: var(--surface); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .sd-row-icon .material-symbols-outlined { font-size: 20px; color: var(--primary); }
    .sd-row-body { flex: 1; }
    .sd-row-title { font-size: 15px; font-weight: 600; color: var(--on-surface); }
    .sd-row-sub   { font-size: 12px; color: var(--on-surface-muted); margin-top: 2px; }
    .sd-row-arrow { font-size: 20px; color: var(--on-surface-muted); }
    .sd-deck-count { font-size: 12px; color: var(--on-surface-muted); white-space: nowrap; }

    /* ── Journey tab ── */
    #tab-journey {
      display: none; flex-direction: column;
      flex: 1; overflow: hidden;
      background: var(--background);
      margin-top: calc(56px + var(--safe-top));
    }
    #tab-journey.active { display: flex; }
    #journey-nav {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--outline);
      flex-shrink: 0;
    }
    #journey-back-btn {
      background: none; border: none; padding: 4px; cursor: pointer;
      color: var(--on-surface); display: flex; align-items: center;
    }
    #journey-back-btn .material-symbols-outlined { font-size: 24px; }
    #journey-nav-title {
      font-size: 17px; font-weight: 700; color: var(--on-surface);
    }
    #journey-body {
      flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding: 20px 20px calc(32px + var(--safe-bottom));
    }
    .journey-les {
      display: flex; gap: 16px; align-items: stretch;
    }
    .journey-left {
      display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 44px;
    }
    .journey-node {
      width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .journey-node .material-symbols-outlined { font-size: 20px; }
    .journey-node-active {
      background: var(--primary); color: #fff;
      box-shadow: 0 0 0 4px rgba(254,77,1,0.18);
    }
    .journey-node-done {
      background: #4ade80; color: #0f1c10;
    }
    .journey-node-locked {
      background: var(--surface-high); color: var(--on-surface-muted);
    }
    .journey-line {
      flex: 1; width: 2px; background: var(--outline); margin: 4px 0;
      min-height: 16px;
    }
    .journey-line-done { background: #4ade80; }
    .journey-card {
      flex: 1; padding: 14px 16px; border-radius: 16px; margin-bottom: 12px;
      border: 1.5px solid var(--outline);
    }
    .journey-card-current {
      border-color: var(--primary);
      background: rgba(254,77,1,0.06);
    }
    .journey-card-done {
      opacity: 0.65;
    }
    .journey-card-locked { opacity: 0.45; }
    .journey-badge {
      display: inline-block; font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.5px;
      padding: 2px 8px; border-radius: 6px; margin-bottom: 6px;
    }
    .journey-badge-current { background: rgba(254,77,1,0.15); color: var(--primary); }
    .journey-badge-done    { background: rgba(74,222,128,0.15); color: #4ade80; }
    .journey-badge-final   { background: rgba(168,85,247,0.15); color: #a855f7; }
    .journey-les-num  { font-size: 11px; color: var(--on-surface-muted); font-weight: 600; margin-bottom: 2px; }
    .journey-les-title { font-size: 16px; font-weight: 700; color: var(--on-surface); margin-bottom: 4px; }
    .journey-les-desc  { font-size: 13px; color: var(--on-surface-muted); line-height: 1.4; }
    .journey-switch-btn {
      margin-top: 10px; padding: 6px 14px; border-radius: 20px;
      border: 1.5px solid var(--primary); background: none;
      color: var(--primary); font-size: 13px; font-weight: 600;
      cursor: pointer; transition: background 0.15s, color 0.15s;
    }
    .journey-switch-btn:active { background: var(--primary); color: #fff; }

    /* ── De / Het quiz ── */
    .dh-empty { color: var(--on-surface-muted); text-align: center; padding: 40px 0; font-size: 14px; }

    /* Deck picker */
    .dh-picker-wrap {
      display: flex; flex-direction: column; gap: 20px;
      width: 100%; padding: 4px 0 24px;
    }
    .dh-picker-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
    .dh-picker-icon { font-size: 40px; color: var(--primary); }
    .dh-picker-heading { font-size: 22px; font-weight: 800; color: var(--on-surface); }
    .dh-picker-sub { font-size: 14px; color: var(--on-surface-muted); }
    .dh-topic-link {
      display: flex; align-items: center; gap: 7px;
      margin-top: 12px; padding: 10px 14px;
      background: rgba(167,139,250,0.08);
      border: 1.5px solid rgba(167,139,250,0.25);
      border-radius: 12px; cursor: pointer;
      font-size: 13px; font-weight: 600; color: #a78bfa;
      width: 100%;
    }
    .dh-topic-link .material-symbols-outlined { font-size: 17px; }
    .dh-topic-arrow { margin-left: auto; }
    .dh-picker-list { display: flex; flex-direction: column; gap: 10px; }

    /* All / None row */
    .dh-group-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 0 2px; }

    /* Group list — mirrors #deck-sheet-list overrides */
    #dh-group-list {
      display: flex; flex-direction: column; gap: 0;
    }
    #dh-group-list .deck-group-name {
      font-size: 9px; letter-spacing: 2.5px;
      color: var(--on-surface-muted); opacity: 0.6; padding: 14px 4px 6px;
    }
    #dh-group-list .deck-group-header { padding: 8px 4px 2px; margin-top: 0; }
    #dh-group-list .deck-group-items { gap: 6px; }
    #dh-group-list .file-item {
      padding: 13px 14px; border-radius: 14px;
      border: 1.5px solid rgba(0,0,0,0.07);
      background: var(--surface-high); gap: 12px;
      transition: border-color 0.18s, background 0.18s, transform 0.12s;
    }
    #dh-group-list .file-item:active { transform: scale(0.985); }
    #dh-group-list .file-item.selected { border-color: var(--primary); background: rgba(254,77,1,0.06); }
    #dh-group-list .file-item input[type=checkbox] { display: none; }
    #dh-group-list .file-name { font-size: 14px; font-weight: 700; }
    .dh-picker-item {
      display: flex; align-items: center; gap: 14px;
      background: var(--surface-high); border-radius: 16px;
      padding: 16px; cursor: pointer; user-select: none;
      border: 2px solid transparent; transition: border-color 0.15s, background 0.15s;
    }
    .dh-picker-item.selected { border-color: var(--primary); background: rgba(254,77,1,0.05); }
    .dh-picker-check {
      width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
      background: var(--surface); border: 2px solid var(--outline);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, border-color 0.15s;
    }
    .dh-picker-item.selected .dh-picker-check { background: var(--primary); border-color: var(--primary); }
    .dh-picker-check .material-symbols-outlined { font-size: 16px; color: #fff; opacity: 0; transition: opacity 0.1s; }
    .dh-picker-item.selected .dh-picker-check .material-symbols-outlined { opacity: 1; }
    .dh-picker-info { flex: 1; }
    .dh-picker-name { font-size: 15px; font-weight: 600; color: var(--on-surface); }
    .dh-start-btn {
      width: 100%; padding: 16px; border-radius: 16px;
      background: var(--primary); color: #fff;
      border: none; font-size: 17px; font-weight: 700; cursor: pointer;
      box-shadow: 0 4px 16px rgba(254,77,1,0.35);
    }

    /* Game layout */
    .dh-game-wrap {
      display: flex; flex-direction: column; width: 100%; height: 100%; gap: 14px;
    }

    /* Score bar */
    .dh-scorebar {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      padding: 0 2px;
    }
    .dh-score-row {
      display: flex; align-items: center; gap: 10px;
    }
    .dh-score-chip {
      display: flex; align-items: center; gap: 5px;
      font-size: 15px; font-weight: 700; padding: 5px 12px;
      border-radius: 20px;
    }
    .dh-score-chip .material-symbols-outlined { font-size: 17px; }
    .dh-score-correct { background: rgba(74,222,128,0.12); color: #4ade80; }
    .dh-score-wrong   { background: rgba(248,113,113,0.12); color: #f87171; }
    .dh-progress-label { font-size: 13px; font-weight: 600; color: var(--on-surface-muted); }
    .dh-progress-label span { opacity: 0.5; }

    /* Card area — fixed height so card never grows/shrinks */
    .dh-card-area {
      flex: none; height: 300px; width: 100%;
      position: relative; border-radius: 24px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.1s;
    }
    .dh-dir-label {
      position: absolute; top: 50%; transform: translateY(-50%);
      display: flex; align-items: center; gap: 4px;
      font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
      opacity: 0.25; pointer-events: none; z-index: 0;
    }
    .dh-dir-label .material-symbols-outlined { font-size: 16px; }
    .dh-dir-left  { left: 12px; color: #60a5fa; }
    .dh-dir-right { right: 12px; color: #a78bfa; }

    /* The swipeable card — fixed size, text adapts inside */
    .dh-card {
      position: absolute; inset: 0;
      background: var(--surface-high);
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 24px; text-align: center;
      overflow: hidden; cursor: grab; user-select: none;
      will-change: transform; z-index: 1;
      touch-action: none;
    }
    .dh-card:active { cursor: grabbing; }

    /* Stamp overlays */
    .dh-stamp {
      position: absolute; top: 24px; padding: 6px 14px;
      border-radius: 8px; font-size: 22px; font-weight: 900;
      letter-spacing: 2px; opacity: 0; pointer-events: none;
      border: 3px solid; transform: rotate(-12deg);
      transition: opacity 0.05s;
    }
    .dh-stamp-de  { left: 20px;  color: #60a5fa; border-color: #60a5fa; transform: rotate(-12deg); }
    .dh-stamp-het { right: 20px; color: #a78bfa; border-color: #a78bfa; transform: rotate(12deg); }

    /* Card content — text scales to fit the fixed card */
    .dh-card-inner {
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      width: 100%; overflow: hidden;
    }
    .dh-card-word {
      font-size: clamp(20px, 7vw, 34px); font-weight: 900; color: var(--on-surface);
      letter-spacing: -0.5px; word-break: break-word; line-height: 1.1;
      max-width: 100%;
    }
    .dh-card-english {
      font-size: clamp(13px, 3.5vw, 17px); color: var(--on-surface-muted); font-weight: 500;
      word-break: break-word; max-width: 100%;
    }
    .dh-card-example {
      font-size: 12px; color: var(--on-surface-muted); line-height: 1.45;
      font-style: italic; margin-top: 4px;
      padding: 7px 12px; background: var(--surface); border-radius: 10px;
      width: 100%; box-sizing: border-box;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Action buttons */
    .dh-action-row { display: flex; gap: 12px; flex-shrink: 0; }
    .dh-action-btn {
      flex: 1; padding: 15px 12px; border-radius: 18px;
      border: 2px solid; font-size: 17px; font-weight: 800;
      cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: transform 0.12s, opacity 0.12s;
    }
    .dh-action-btn:active { transform: scale(0.95); opacity: 0.8; }
    .dh-action-icon { font-size: 18px; font-weight: 900; }
    .dh-action-de  { background: rgba(96,165,250,0.1); color: #60a5fa; border-color: rgba(96,165,250,0.35); }
    .dh-action-het { background: rgba(167,139,250,0.08); color: #a78bfa; border-color: rgba(167,139,250,0.3); }

    /* Results */
    .dh-results-wrap { display: flex; flex-direction: column; gap: 16px; width: 100%; padding-bottom: 32px; }
    .dh-results-hero { text-align: center; padding: 12px 0 4px; }
    .dh-results-emoji { font-size: 48px; line-height: 1; margin-bottom: 8px; }
    .dh-results-pct   { font-size: 52px; font-weight: 900; color: var(--on-surface); line-height: 1; }
    .dh-results-detail { font-size: 13px; color: var(--on-surface-muted); margin-top: 8px; }
    .dh-results-btns { display: flex; gap: 10px; }
    .dh-btn-primary  {
      flex: 1; padding: 14px; border-radius: 14px; border: none;
      background: var(--primary); color: #fff;
      font-size: 15px; font-weight: 700; cursor: pointer;
    }
    .dh-btn-secondary {
      flex: 1; padding: 14px; border-radius: 14px; border: none;
      background: var(--surface-high); color: var(--on-surface);
      font-size: 15px; font-weight: 600; cursor: pointer;
    }
    .dh-divider-label {
      font-size: 11px; font-weight: 700; color: var(--on-surface-muted);
      text-transform: uppercase; letter-spacing: 1px; padding: 4px 0;
    }
    .dh-result-list { display: flex; flex-direction: column; gap: 8px; }
    .dh-result-row {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--surface-high); border-radius: 14px;
      padding: 12px 14px; gap: 12px;
    }
    .dh-result-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
    .dh-result-badge {
      font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
      padding: 4px 9px; border-radius: 8px; flex-shrink: 0;
    }
    .dh-badge-ok  { background: rgba(74,222,128,0.15); color: #4ade80; }
    .dh-badge-err { background: rgba(248,113,113,0.15); color: #f87171; }
    .dh-result-word { font-size: 14px; font-weight: 600; color: var(--on-surface); }
    .dh-result-en   { font-size: 12px; color: var(--on-surface-muted); margin-top: 1px; }
    .dh-result-right { flex-shrink: 0; font-size: 14px; font-weight: 700; }
    .dh-verdict-ok  { color: #4ade80; font-size: 18px; }
    .dh-verdict-err { color: #f87171; font-size: 13px; }
    .dh-verdict-err em { font-style: normal; font-weight: 800; }

    /* Swipe feedback pop */
    .dh-feedback-pop {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.4);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      opacity: 0;
      z-index: 9999;
      pointer-events: none;
      transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease-out;
      will-change: transform, opacity;
    }
    .dh-feedback-pop.dh-fp-in {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    .dh-feedback-pop.dh-fp-out {
      transform: translate(-50%, -50%) scale(1.25);
      opacity: 0;
      transition: transform 0.3s ease-out, opacity 0.28s ease-out;
    }
    .dh-fp-num {
      font-size: 56px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -1px;
      text-shadow: 0 4px 20px rgba(0,0,0,0.18);
    }
    .dh-fp-label {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      opacity: 0.85;
    }
    .dh-feedback-ok  .dh-fp-num,
    .dh-feedback-ok  .dh-fp-label { color: #4ade80; }
    .dh-feedback-err .dh-fp-num,
    .dh-feedback-err .dh-fp-label { color: #f87171; }

    /* ── Card area ── */
    #card-area {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    /* ── Card ── */
    #card-wrap {
      width: 90vw;
      max-width: 480px;
      height: 58vh;
      max-height: 380px;
      perspective: 1200px;
    }

    .card {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.45s cubic-bezier(.4,0,.2,1);
      cursor: pointer;
    }
    .card.flipped { transform: rotateY(180deg); }

    .card-edge {
      position: absolute;
      top: 0;
      height: 100%;
      width: 36%;
      z-index: 10;
      cursor: pointer;
      display: flex;
      align-items: center;
      opacity: 0.45;
      transition: opacity 0.2s;
      font-size: 38px;
      color: #151515;
    }
    .card-edge:hover, .card-edge:active { opacity: 0.85; }
    .card-edge.left  { left: 0;  justify-content: flex-start; padding-left: 14px;  border-radius: 22px 0 0 22px; background: linear-gradient(to right, rgba(0,0,0,0.07), transparent); }
    .card-edge.right { right: 0; justify-content: flex-end;   padding-right: 14px; border-radius: 0 22px 22px 0; background: linear-gradient(to left,  rgba(0,0,0,0.07), transparent); }

    .card-front, .card-back {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border-radius: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 36px 28px;
      text-align: center;
      gap: 16px;
    }
    .card-front {
      background: #ffffff;
      border: 1.5px solid #fe4d01;
      box-shadow: 0 8px 40px rgba(254,77,1,0.12), 0 2px 12px rgba(0,0,0,0.06);
    }
    .card-back {
      background: #fff9f6;
      border: 1.5px solid #d4d1ca;
      box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 2px 12px rgba(0,0,0,0.04);
      transform: rotateY(180deg);
    }

    .tag       { font-size: 11px; color: var(--on-surface-muted); letter-spacing: 1.5px; text-transform: uppercase; }
    .word      { font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 700; color: #fe4d01; line-height: 1.1; word-break: break-word; }
    .word.word-lg { font-size: clamp(1.4rem, 4.5vw, 2rem); }
    .word.word-xl { font-size: clamp(1rem, 3.8vw, 1.4rem); }
    .word-en   { font-size: clamp(1rem, 3.5vw, 1.6rem); font-weight: 400; color: var(--on-surface-muted); }
    .sentence-nl { font-size: clamp(0.9rem, 3vw, 1.1rem); color: var(--on-surface-muted); line-height: 1.6; }
    .flip-hint { font-size: 11px; color: var(--on-surface-muted); opacity: 0.4; margin-top: 4px; letter-spacing: 1px; }

    .speak-btn {
      background: none;
      border: 1.5px solid var(--surface-highest);
      border-radius: 50%;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--on-surface-muted);
      font-size: 17px;
      transition: border-color 0.2s, color 0.2s;
      flex-shrink: 0;
    }
    .speak-btn:active, .speak-btn.speaking {
      border-color: #fe4d01;
      color: #fe4d01;
    }

    .translation { font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 700; color: #151515; line-height: 1.2; }
    .sentence-en { font-size: clamp(0.85rem, 2.8vw, 1rem); color: var(--on-surface-muted); font-style: italic; line-height: 1.6; }

    #hint { position: fixed; bottom: calc(68px + var(--safe-bottom)); font-size: 11px; color: rgba(0,0,0,0.15); letter-spacing: 0.5px; }
    #loading { color: var(--on-surface-muted); font-size: 14px; margin: auto; font-weight: 500; }

    .done-screen {
      display: flex; flex-direction: column; align-items: center;
      gap: 20px; color: var(--on-surface-muted); font-size: 18px;
      text-align: center; margin: auto;
    }
    .done-screen button {
      background: transparent;
      border: 1.5px solid var(--primary);
      color: var(--primary);
      padding: 12px 32px;
      border-radius: 50px;
      font-size: 15px;
      font-family: 'Manrope', sans-serif;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .done-screen button:hover { background: var(--primary); color: #fff; }

    /* ── Read mode overlay ── */
    #readmode-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--surface);
      z-index: 100;
      flex-direction: column;
    }
    #readmode-overlay.open { display: flex; }
    #readmode-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(14px + var(--safe-top)) 20px 14px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      background: var(--surface-low);
      flex-shrink: 0;
    }
    #readmode-header h2 {
      font-size: 16px;
      color: var(--on-surface);
      font-weight: 700;
      margin: 0;
    }
    #readmode-close {
      background: rgba(0,0,0,0.05);
      border: none;
      color: var(--on-surface-muted);
      font-size: 16px;
      cursor: pointer;
      padding: 6px 11px;
      border-radius: 10px;
      transition: background 0.2s, color 0.2s;
    }
    #readmode-close:hover { background: rgba(254,77,1,0.1); color: var(--primary); }
    #readmode-search-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      background: var(--surface-low);
      flex-shrink: 0;
    }
    #readmode-search-wrap .material-symbols-outlined {
      font-size: 20px;
      color: var(--on-surface-muted);
      flex-shrink: 0;
    }
    #readmode-search {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 15px;
      color: var(--on-surface);
      outline: none;
    }
    #readmode-search::placeholder { color: var(--on-surface-muted); }
    #readmode-list {
      flex: 1;
      overflow-y: auto;
      padding: 12px 16px calc(16px + var(--safe-bottom));
    }
    .read-row {
      padding: 14px 0;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .read-word { font-size: 17px; font-weight: 700; color: var(--primary); }
    .read-english { font-size: 13px; color: #fe4d01; margin-top: 2px; }
    .read-nl { font-size: 13px; color: var(--on-surface-muted); margin-top: 6px; font-style: italic; }
    .read-en { font-size: 12px; color: rgba(112,109,101,0.5); margin-top: 2px; }

    /* ── Deck chip ── */
    #progress-row-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 6px;
    }
    #deck-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      padding: 0;
      font-family: 'Manrope', sans-serif;
      font-size: 11px;
      font-weight: 600;
      color: var(--on-surface-muted);
      cursor: pointer;
      opacity: 0.75;
      transition: opacity 0.15s;
    }
    #deck-chip:active { opacity: 1; }
    .deck-chip-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--primary);
      flex-shrink: 0;
    }

    /* ── Deck sheet ── */
    #deck-sheet-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      z-index: 200;
      backdrop-filter: blur(3px);
      animation: none;
    }
    #deck-sheet-backdrop.open { display: block; }

    #deck-sheet {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 201;
      background: var(--surface);
      border-radius: 24px 24px 0 0;
      max-height: 78vh;
      display: flex;
      flex-direction: column;
      transform: translateY(100%);
      transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
      box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
    }
    #deck-sheet.open { transform: translateY(0); }

    #deck-sheet-handle {
      width: 40px;
      height: 4px;
      background: rgba(0,0,0,0.1);
      border-radius: 2px;
      margin: 14px auto 0;
      flex-shrink: 0;
    }
    #deck-sheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 4px;
      flex-shrink: 0;
    }
    #deck-sheet-header > span {
      font-size: 18px;
      font-weight: 800;
      color: var(--on-surface);
      letter-spacing: -0.3px;
    }
    #deck-sheet-header > div { display: flex; align-items: center; gap: 4px; }
    #deck-sheet-close {
      background: rgba(0,0,0,0.06);
      border: none;
      color: var(--on-surface-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 6px;
      border-radius: 50%;
      transition: background 0.15s;
    }
    #deck-sheet-close:active { background: rgba(0,0,0,0.12); }
    #deck-curriculum-bar {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 8px 16px; background: rgba(254,77,1,0.07);
      border-bottom: 1px solid rgba(254,77,1,0.15); flex-shrink: 0;
    }
    #deck-curriculum-label {
      font-size: 12px; font-weight: 600; color: var(--primary); flex: 1;
    }
    #deck-back-to-plan-btn {
      font-size: 12px; font-weight: 700; color: var(--primary);
      background: none; border: 1.5px solid var(--primary);
      border-radius: 8px; padding: 4px 10px; cursor: pointer; white-space: nowrap;
    }

    #deck-sheet-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px 16px 4px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    /* Override file-item inside sheet for card-style */
    #deck-sheet-list .deck-group-name {
      font-size: 9px;
      letter-spacing: 2.5px;
      color: var(--on-surface-muted);
      opacity: 0.6;
      padding: 14px 4px 6px;
    }
    #deck-sheet-list .deck-group-header {
      padding: 8px 4px 2px;
      margin-top: 0;
    }
    #deck-sheet-list .deck-group-items {
      gap: 6px;
    }
    #deck-sheet-list .file-item {
      padding: 13px 14px;
      border-radius: 14px;
      border: 1.5px solid rgba(0,0,0,0.07);
      background: var(--surface-high);
      gap: 12px;
      transition: border-color 0.18s, background 0.18s, transform 0.12s;
    }
    #deck-sheet-list .file-item:active { transform: scale(0.985); }
    #deck-sheet-list .file-item.selected {
      border-color: var(--primary);
      background: rgba(254,77,1,0.06);
    }
    #deck-sheet-list .file-item input[type=checkbox] { display: none; }
    .deck-item-check {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid rgba(0,0,0,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: transparent;
      transition: background 0.18s, border-color 0.18s, color 0.18s;
    }
    .file-item.selected .deck-item-check {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }
    #deck-sheet-list .file-name {
      font-size: 14px;
      font-weight: 700;
    }
    #deck-sheet-footer {
      padding: 12px 16px calc(14px + var(--safe-bottom));
      flex-shrink: 0;
      border-top: 1px solid rgba(0,0,0,0.06);
    }
    #deck-sheet-study-btn {
      width: 100%;
      padding: 15px;
      background: linear-gradient(135deg, #fe4d01, #d94000);
      color: white;
      border: none;
      border-radius: 14px;
      font-family: 'Manrope', sans-serif;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
      letter-spacing: -0.2px;
      box-shadow: 0 4px 16px rgba(254,77,1,0.35);
      transition: opacity 0.15s;
    }
    #deck-sheet-study-btn:active { opacity: 0.85; }

    /* ── Settings overlay ── */
    #settings-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 100;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }
    #settings-overlay.open { display: flex; }

    #settings-panel {
      background: var(--surface-high);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 24px;
      padding: 28px 24px 20px;
      width: 90vw;
      max-width: 420px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }

    #settings-panel h2 {
      font-size: 10px;
      color: var(--on-surface-muted);
      letter-spacing: 2.5px;
      text-transform: uppercase;
      font-weight: 700;
    }

    .decks-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .decks-header-actions {
      display: flex;
      gap: 6px;
    }
    .deck-select-btn {
      font-size: 11px;
      font-weight: 600;
      font-family: 'Manrope', sans-serif;
      color: var(--primary);
      background: none;
      border: none;
      cursor: pointer;
      padding: 2px 4px;
      opacity: 0.8;
    }
    .deck-select-btn:hover { opacity: 1; }

    .deck-group-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 4px 4px;
      margin-top: 4px;
      cursor: pointer;
    }
    .deck-group-left {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .deck-group-chevron {
      font-size: 16px;
      color: var(--on-surface-muted);
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .deck-group-name {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--on-surface-muted);
    }
    .deck-group-checkbox {
      accent-color: var(--primary);
      width: 16px;
      height: 16px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .deck-group-items {
      display: none;
      flex-direction: column;
      gap: 8px;
      padding-bottom: 4px;
    }
    .deck-group-items.expanded {
      display: flex;
    }

    #file-list {
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .file-item {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(0,0,0,0.02);
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 14px;
      padding: 12px 14px;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .file-item:hover { background: rgba(0,0,0,0.04); }
    .file-item.selected {
      border-color: rgba(254,77,1,0.4);
      background: rgba(254,77,1,0.05);
    }

    .file-item input[type=checkbox] {
      accent-color: var(--primary);
      width: 16px;
      height: 16px;
      cursor: pointer;
      flex-shrink: 0;
    }

    .file-label {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .file-name {
      font-size: 13px;
      color: var(--on-surface);
      font-weight: 600;
    }
    .file-count {
      font-size: 11px;
      color: var(--on-surface-muted);
    }

    .settings-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }

    .btn {
      padding: 10px 22px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 600;
      font-family: 'Manrope', sans-serif;
      cursor: pointer;
      border: 1px solid rgba(0,0,0,0.12);
      background: rgba(0,0,0,0.04);
      color: var(--on-surface-muted);
      transition: all 0.2s;
    }
    .btn:hover { border-color: rgba(0,0,0,0.2); color: var(--on-surface); }
    .btn.primary {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      box-shadow: 0 4px 20px rgba(245,158,11,0.3);
    }
    .btn.primary:hover { background: #e54501; }

    /* ── Quiz tab ── */
    #tab-quiz {
      display: none;
      flex: 1;
      flex-direction: column;
      align-items: center;
      overflow-y: auto;
      margin-top: calc(56px + var(--safe-top));
      padding: 0 20px calc(20px + var(--safe-bottom));
    }
    #tab-quiz.active { display: flex; }

    #quiz-progress-wrap {
      width: 100%;
      max-width: 480px;
      padding: 18px 0 10px;
      flex-shrink: 0;
    }
    #quiz-top-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 10px;
      position: relative;
    }
    #quiz-restart-header-btn {
      position: absolute;
      right: 0;
      background: none;
      border: none;
      padding: 4px;
      cursor: pointer;
      color: var(--on-surface-muted);
      display: flex;
      align-items: center;
      border-radius: 50%;
      transition: color 0.15s, background 0.15s;
    }
    #quiz-restart-header-btn:hover { color: var(--primary); background: rgba(254,77,1,0.08); }
    #quiz-restart-header-btn .material-symbols-outlined { font-size: 20px; }
    #quiz-dots {
      display: flex;
      gap: 7px;
      justify-content: center;
    }
    .qdot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--outline);
      transition: background 0.3s, transform 0.2s;
      flex-shrink: 0;
    }
    .qdot.correct { background: #22c55e; transform: scale(1.15); }
    .qdot.wrong   { background: #ef4444; transform: scale(1.15); }
    .qdot.current { background: var(--primary); transform: scale(1.2); }

    #quiz-score-lbl {
      text-align: center;
      font-size: 11px;
      color: var(--on-surface-muted);
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    #quiz-body {
      flex: 1;
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding-bottom: 20px;
    }

    #quiz-card {
      width: 100%;
      background: var(--surface-high);
      border: 1.5px solid var(--outline);
      border-radius: 22px;
      padding: 26px 22px 22px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.06);
    }
    #quiz-counter {
      font-size: 10px;
      color: var(--on-surface-muted);
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 700;
    }
    #quiz-sentence {
      font-size: clamp(1rem, 3.5vw, 1.25rem);
      color: var(--on-surface);
      line-height: 1.65;
      font-weight: 600;
    }
    .quiz-blank {
      color: var(--primary);
      font-weight: 800;
      letter-spacing: 3px;
    }
    #quiz-hint {
      font-size: clamp(0.82rem, 2.6vw, 0.95rem);
      color: var(--on-surface-muted);
      font-style: italic;
      line-height: 1.55;
      border-top: 1px solid rgba(0,0,0,0.06);
      padding-top: 10px;
      margin-top: 2px;
    }

    #quiz-input-row {
      display: flex;
      gap: 10px;
      width: 100%;
      align-items: center;
    }
    #quiz-word-lbl {
      font-size: 13px;
      font-weight: 700;
      color: var(--on-surface-muted);
      background: var(--surface-low);
      border: 1px solid var(--outline);
      border-radius: 10px;
      padding: 6px 10px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    #quiz-infinitive-hint {
      display: flex; align-items: center; gap: 8px; margin: 2px 0 4px;
    }
    #quiz-infinitive-btn {
      font-size: 12px; font-weight: 600; color: var(--on-surface-muted);
      background: none; border: 1px dashed var(--outline); border-radius: 8px;
      padding: 4px 10px; cursor: pointer;
    }
    #quiz-infinitive-btn:active { background: var(--surface-high); }
    #quiz-infinitive-reveal {
      font-size: 14px; font-weight: 700; color: var(--primary);
    }
    #quiz-input {
      flex: 1;
      background: var(--surface-low);
      border: 1.5px solid var(--outline);
      border-radius: 14px;
      padding: 13px 16px;
      font-size: 16px;
      font-family: 'Manrope', sans-serif;
      color: var(--on-surface);
      outline: none;
      transition: border-color 0.2s, background 0.2s;
      user-select: text;
      -webkit-user-select: text;
      min-width: 0;
    }
    #quiz-input:focus  { border-color: var(--primary); }
    #quiz-input.ok     { border-color: #22c55e; background: rgba(34,197,94,0.05); }
    #quiz-input.err    { border-color: #ef4444; background: rgba(239,68,68,0.05); }

    .quiz-inline-input {
      display: inline-block;
      background: transparent;
      border: none;
      border-bottom: 2px solid var(--primary);
      border-radius: 0;
      padding: 0 2px 1px;
      font-size: inherit;
      font-family: 'Manrope', sans-serif;
      font-weight: 700;
      color: var(--on-surface);
      text-align: center;
      outline: none;
      vertical-align: baseline;
      min-width: 2ch;
      transition: border-color 0.15s;
    }
    .quiz-inline-input:focus { border-bottom-color: var(--primary); }
    .quiz-inline-input.ok    { border-bottom-color: #22c55e; color: #22c55e; }
    .quiz-inline-input.err   { border-bottom-color: #ef4444; color: #ef4444; }

    #quiz-check-btn {
      background: var(--primary);
      border: none;
      border-radius: 14px;
      padding: 13px 20px;
      color: #fff;
      font-size: 15px;
      font-family: 'Manrope', sans-serif;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s;
      flex-shrink: 0;
    }
    #quiz-check-btn:active { background: var(--secondary); }

    #quiz-feedback {
      min-height: 22px;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      letter-spacing: 0.3px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    #quiz-feedback.ok   { color: #22c55e; }
    #quiz-feedback.err  { color: #ef4444; }
    #quiz-feedback.ans  { color: var(--on-surface-muted); font-weight: 500; }
    #quiz-feedback.hint { color: var(--primary); font-weight: 600; }
    .fb-speak-btn { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.75; }
    .fb-speak-btn:active { opacity: 1; }
    .fb-speak-btn .material-symbols-outlined { font-size: 16px; }
    .quiz-sentence-audio-btn {
      display: flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
      background: rgba(255,255,255,0.08); color: inherit; flex-shrink: 0;
      transition: background 0.15s;
    }
    .quiz-sentence-audio-btn:active { background: rgba(255,255,255,0.18); }
    .quiz-sentence-audio-btn .material-symbols-outlined { font-size: 18px; }

    #quiz-btn-row {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
    }
    /* shared base — matches app .btn */
    #quiz-btn-row button {
      padding: 10px 22px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 600;
      font-family: 'Manrope', sans-serif;
      cursor: pointer;
      border: 1px solid rgba(0,0,0,0.12);
      background: rgba(0,0,0,0.04);
      color: var(--on-surface-muted);
      transition: border-color 0.2s, background 0.2s, color 0.2s;
    }
    #quiz-btn-row button:hover {
      border-color: rgba(0,0,0,0.2);
      color: var(--on-surface);
    }
    /* Next → — matches app .btn.primary */
    #quiz-next-btn {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: #fff !important;
      box-shadow: 0 4px 14px rgba(254,77,1,0.25);
    }
    #quiz-next-btn:hover { background: var(--secondary) !important; border-color: var(--secondary) !important; }
    #quiz-skip-btn { color: var(--on-surface-muted) !important; font-size: 13px; }

    /* ── Quiz mode selector ── */
    .quiz-mode-wrap {
      display: flex; flex-direction: column;
      gap: 20px; padding: 4px 0 16px; width: 100%;
    }
    .quiz-mode-title {
      font-size: 20px; font-weight: 800;
      color: var(--on-surface); letter-spacing: -0.3px;
    }
    .quiz-mode-subtitle {
      font-size: 13px; color: var(--on-surface-muted); margin-top: 2px;
    }
    .quiz-mode-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
    .quiz-mode-btn {
      display: flex; flex-direction: row; align-items: center; gap: 12px;
      padding: 14px; border-radius: 20px;
      border: 1px solid rgba(0,0,0,0.06); background: #fff;
      box-shadow: 0 2px 12px rgba(45,49,50,0.07);
      cursor: pointer; font-family: 'Manrope', sans-serif; text-align: left;
      transition: transform 0.15s, box-shadow 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .quiz-mode-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(45,49,50,0.13); }
    .quiz-mode-btn:active { transform: scale(0.97); }
    .quiz-mode-icon {
      width: 44px; height: 44px; border-radius: 12px;
      background: rgba(254,77,1,0.1);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      transition: transform 0.15s;
    }
    .quiz-mode-btn:hover .quiz-mode-icon { transform: scale(1.1); }
    .quiz-mode-icon .material-symbols-outlined { font-size: 22px; color: var(--primary); }
    .quiz-mode-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .quiz-mode-btn .mode-label { font-size: 13px; font-weight: 700; color: var(--on-surface); line-height: 1.2; }
    .quiz-mode-btn small { font-size: 10px; color: var(--on-surface-muted); line-height: 1.3; }

    /* ── Quiz groups (legacy) ── */
    .quiz-groups { display: flex; flex-direction: column; gap: 20px; width: 100%; }
    .quiz-group  { width: 100%; }
    .quiz-group-header {
      display: flex; align-items: center; gap: 7px;
      font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--on-surface);
      margin-bottom: 10px;
    }
    .quiz-group-header .material-symbols-outlined { font-size: 18px; color: var(--primary); }
    .quiz-groups .quiz-mode-btns { grid-template-columns: 1fr 1fr; }
    .quiz-mode-btn.full-width { grid-column: 1 / -1; }

    /* ── Quiz body selection mode override ── */
    #quiz-body.qs-mode { justify-content: flex-start; align-items: stretch; padding-top: 8px; }

    /* ── Quiz selection screen (redesign) ── */
    .qs-wrap { width: 100%; display: flex; flex-direction: column; padding-bottom: 16px; }

    .qs-streak-card {
      background: var(--surface-high); border-radius: 14px;
      padding: 14px 16px; margin-bottom: 16px;
    }
    .qs-streak-card__head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .qs-streak-card__title-row { display: flex; align-items: center; gap: 6px; }
    .qs-streak-card__title { font-size: 14px; font-weight: 700; color: var(--on-surface); }
    .qs-streak-card__day   { font-size: 13px; color: var(--on-surface-muted); font-weight: 500; }
    .qs-streak-card__done {
      display: flex; align-items: center; gap: 4px;
      font-size: 12px; font-weight: 600; color: #16a34a;
      background: rgba(34,197,94,0.1); padding: 4px 10px; border-radius: 999px;
    }
    .qs-streak-card__bar {
      height: 6px; background: var(--outline); border-radius: 999px; overflow: hidden;
    }
    .qs-streak-card__bar > div { height: 100%; background: #22C55E; border-radius: 999px; }

    .qs-rec-hero {
      background: linear-gradient(135deg, #1F1A14 0%, #2A211A 100%);
      border-radius: 20px; padding: 18px; margin-bottom: 22px;
      position: relative; overflow: hidden; cursor: pointer;
      -webkit-tap-highlight-color: transparent; border: none; text-align: left; width: 100%;
    }
    .qs-rec-hero::before {
      content: ''; position: absolute; top: -40px; right: -40px;
      width: 180px; height: 180px;
      background: radial-gradient(circle, rgba(254,77,1,0.35) 0%, transparent 70%);
      pointer-events: none;
    }
    .qs-rec-hero:active { opacity: 0.92; }
    .qs-rec-hero__top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 14px; position: relative;
    }
    .qs-rec-hero__tag {
      display: flex; align-items: center; gap: 5px;
      background: rgba(254,77,1,0.18); color: #FF8A6E;
      font-size: 11px; font-weight: 600; padding: 5px 9px; border-radius: 999px;
    }
    .qs-rec-hero__reason { font-size: 10.5px; color: rgba(255,255,255,0.5); font-weight: 500; }
    .qs-rec-hero__row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; position: relative; }
    .qs-rec-hero__icon {
      width: 52px; height: 52px; border-radius: 14px;
      background: var(--primary); display: grid; place-items: center;
      flex-shrink: 0; box-shadow: 0 6px 20px -4px rgba(254,77,1,0.5);
    }
    .qs-rec-hero__body { flex: 1; min-width: 0; }
    .qs-rec-hero__title { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin-bottom: 4px; }
    .qs-rec-hero__desc { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.4; margin-bottom: 8px; }
    .qs-rec-hero__meta { display: flex; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,0.55); font-weight: 500; align-items: center; }
    .qs-rec-hero__cta {
      width: 100%; background: var(--primary); color: #fff;
      font-size: 14px; font-weight: 600; padding: 12px;
      border-radius: 14px; display: flex; align-items: center;
      justify-content: center; gap: 6px; position: relative;
      font-family: 'Manrope', sans-serif;
    }
    .qs-rec-hero:active .qs-rec-hero__cta { background: var(--secondary); }

    .qs-section-head { margin-bottom: 14px; }
    .qs-section-head__title { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--on-surface); }
    .qs-section-head__sub   { margin: 0; font-size: 13px; color: var(--on-surface-muted); line-height: 1.4; }

    .qs-cat-tabs {
      display: flex; gap: 8px; overflow-x: auto;
      margin: 0 -20px 18px; padding: 4px 20px;
      scrollbar-width: none;
    }
    .qs-cat-tabs::-webkit-scrollbar { display: none; }
    .qs-cat-tab {
      display: inline-flex; align-items: center; gap: 6px;
      white-space: nowrap; font-size: 13.5px; font-weight: 600;
      color: var(--on-surface-muted); background: var(--surface-high);
      border: 1px solid transparent; padding: 9px 14px;
      border-radius: 999px; flex-shrink: 0; cursor: pointer;
      font-family: 'Manrope', sans-serif;
      -webkit-tap-highlight-color: transparent;
      transition: background 120ms, color 120ms;
    }
    .qs-cat-tab__count {
      font-size: 11px; font-weight: 600; color: var(--on-surface-muted);
      background: rgba(0,0,0,0.04); padding: 1px 6px;
      border-radius: 999px; font-variant-numeric: tabular-nums;
    }
    .qs-cat-tab.is-active { background: var(--on-surface); color: #fff; }
    .qs-cat-tab.is-active .qs-cat-tab__count { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }

    .qs-groups { display: flex; flex-direction: column; gap: 22px; width: 100%; }
    .qs-group  { display: flex; flex-direction: column; gap: 10px; }
    .qs-group-label {
      display: flex; align-items: center; gap: 8px;
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--on-surface-muted); padding: 0 4px;
    }
    .qs-group-label__count {
      font-size: 10.5px; font-weight: 700; color: var(--on-surface-muted);
      background: rgba(0,0,0,0.04); padding: 2px 7px;
      border-radius: 999px; font-variant-numeric: tabular-nums;
    }
    .qs-rows-stack { display: flex; flex-direction: column; gap: 8px; }
    .qs-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    .qs-card {
      display: flex; flex-direction: column; gap: 4px;
      padding: 14px; background: var(--surface-high);
      border-radius: 14px; cursor: pointer; border: none;
      font-family: 'Manrope', sans-serif; text-align: left;
      min-height: 130px; transition: transform 100ms;
      -webkit-tap-highlight-color: transparent;
    }
    .qs-card:active { transform: scale(0.97); }
    .qs-card__icon {
      width: 42px; height: 42px; border-radius: 11px;
      display: grid; place-items: center; margin-bottom: 6px;
    }
    .qs-card__title { font-size: 15px; font-weight: 600; color: var(--on-surface); letter-spacing: -0.005em; }
    .qs-card__desc  { font-size: 12px; color: var(--on-surface-muted); line-height: 1.35; flex: 1; }

    .qs-section-head__row {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
    }
    .qs-layout-toggle {
      width: 36px; height: 36px; border-radius: 999px; border: none;
      background: var(--surface-high); display: grid; place-items: center;
      cursor: pointer; flex-shrink: 0; color: var(--on-surface-muted);
      -webkit-tap-highlight-color: transparent;
    }
    .qs-layout-toggle:active { background: var(--outline); }

    .qs-row {
      display: flex; align-items: center; gap: 12px;
      background: var(--surface-high); border-radius: 14px;
      padding: 12px 14px 12px 12px; width: 100%; cursor: pointer;
      font-family: 'Manrope', sans-serif; text-align: left; border: none;
      transition: transform 100ms, background 120ms;
      -webkit-tap-highlight-color: transparent;
    }
    .qs-row:active { transform: scale(0.99); background: var(--surface); }
    .qs-row__icon {
      width: 42px; height: 42px; border-radius: 11px;
      display: grid; place-items: center; flex-shrink: 0;
    }
    .qs-row__body { flex: 1; min-width: 0; }
    .qs-row__title-line { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
    .qs-row__title { font-size: 15.5px; font-weight: 600; color: var(--on-surface); }
    .qs-row__badge {
      font-size: 9.5px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.05em; color: var(--primary);
      background: rgba(254,77,1,0.1); padding: 2px 6px; border-radius: 4px;
    }
    .qs-row__badge--done { color: #16a34a; background: rgba(34,197,94,0.1); }
    .qs-row__desc { font-size: 12.5px; color: var(--on-surface-muted); line-height: 1.35; }

    /* ── Spelling quiz ── */
    #spelling-word {
      font-size: clamp(1.6rem, 7vw, 2.2rem);
      font-weight: 800;
      letter-spacing: 4px;
      color: var(--on-surface);
      text-align: center;
      line-height: 1.4;
    }
    .spell-blank {
      color: var(--primary);
      border-bottom: 3px solid var(--primary);
      min-width: 0.7em;
      display: inline-block;
      text-align: center;
    }
    #spelling-hint {
      font-size: clamp(0.82rem, 2.6vw, 0.95rem);
      color: var(--on-surface-muted);
      font-style: italic;
      text-align: center;
    }
    .spell-letter-input {
      display: inline-block;
      width: 1.5em; height: 1.8em;
      text-align: center;
      font-size: inherit; font-weight: 800;
      font-family: 'Manrope', sans-serif;
      border: none; border-bottom: 3px solid var(--primary);
      background: transparent; color: var(--primary);
      outline: none; padding: 0; margin: 0 1px;
      vertical-align: baseline; letter-spacing: 0;
      caret-color: var(--primary);
    }
    .spell-letter-input.ok  { border-color: #22c55e; color: #16a34a; }
    .spell-letter-input.err { border-color: #ef4444; color: #dc2626; }

    /* ── Listening quiz ── */
    #listen-play-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; }
    #listen-play-btn {
      width: 72px; height: 72px; border-radius: 50%;
      background: var(--primary); border: none; color: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 6px 20px rgba(254,77,1,0.3);
      transition: transform 0.15s, background 0.2s;
    }
    #listen-play-btn:active { transform: scale(0.92); }
    #listen-play-btn.playing { background: var(--secondary); }
    .listen-play-label { font-size: 11px; color: var(--on-surface-muted); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }
    #listen-choices { width: 100%; display: flex; flex-direction: column; gap: 10px; }
    #dictation-prompt { font-size: clamp(1.1rem,3.5vw,1.3rem); font-weight: 700; color: var(--on-surface); margin-top: 6px; }
    #dictation-sub { font-size: 13px; color: var(--on-surface-muted); margin-bottom: 4px; }
    #dictation-play-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; }
    #dictation-play-btn { background: var(--primary); color: var(--on-primary); border: none; border-radius: 50%; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s; }
    #dictation-play-btn:active { transform: scale(0.92); }
    #order-typing-wrap { width: 100%; padding: 4px 0 8px; }
    #order-typing-input { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--outline); background: var(--surface-high); font-size: 15px; color: var(--on-surface); outline: none; }
    #order-typing-input.ok  { border-color: var(--correct); background: color-mix(in srgb, var(--correct) 10%, var(--surface-high)); }
    #order-typing-input.err { border-color: var(--wrong);   background: color-mix(in srgb, var(--wrong)   10%, var(--surface-high)); }
    #dictation-input-wrap { width: 100%; padding: 0 0 8px; }
    #dictation-input { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--outline); background: var(--surface-high); font-size: 15px; color: var(--on-surface); outline: none; }
    #dictation-input.ok  { border-color: var(--correct); background: color-mix(in srgb, var(--correct) 10%, var(--surface-high)); }
    #dictation-input.err { border-color: var(--wrong);   background: color-mix(in srgb, var(--wrong)   10%, var(--surface-high)); }
    .listen-choice {
      width: 100%; text-align: left; padding: 14px 18px;
      border-radius: 14px; border: 1.5px solid var(--outline);
      background: var(--surface-high); font-size: 14px;
      font-family: 'Manrope', sans-serif; font-weight: 500;
      color: var(--on-surface); cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .listen-choice:hover:not(:disabled) { border-color: var(--primary); }
    .listen-choice.correct { border-color: #22c55e; background: rgba(34,197,94,0.08); color: #16a34a; font-weight: 700; }
    .listen-choice.wrong   { border-color: #ef4444; background: rgba(239,68,68,0.05); color: #dc2626; }
    .listen-choice.correct:disabled, .listen-choice.wrong:disabled { opacity: 1; cursor: default; }
    .listen-choice:disabled { opacity: 0.55; cursor: default; }

    /* ── Word Order quiz ── */
    #order-placed-area, #order-bank-area { width: 100%; }
    .order-area-label {
      font-size: 11px; font-weight: 600; color: var(--on-surface-muted);
      margin-bottom: 8px;
    }
    #order-placed, #order-bank {
      display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px;
      padding: 10px 12px; border-radius: 14px;
      border: 1.5px solid var(--outline); background: var(--surface-high);
    }
    #order-placed { background: var(--surface-low); border-style: dashed; }
    #order-placed:empty::after {
      content: 'Tap words below to build your sentence';
      color: var(--on-surface-muted); font-size: 12px; align-self: center;
    }
    .order-chip {
      padding: 7px 14px; border-radius: 50px;
      border: 1.5px solid var(--outline); background: var(--surface-high);
      font-size: 14px; font-family: 'Manrope', sans-serif; font-weight: 600;
      color: var(--on-surface); cursor: pointer;
      transition: border-color 0.15s, transform 0.1s;
    }
    .order-chip:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); }
    .order-chip.placed { border-color: var(--primary); color: var(--primary); background: rgba(254,77,1,0.06); }
    .order-chip.ok  { border-color: #22c55e !important; background: rgba(34,197,94,0.08) !important; color: #16a34a !important; }
    .order-chip.err { border-color: #ef4444 !important; background: rgba(239,68,68,0.05) !important; color: #dc2626 !important; }
    .order-chip:disabled { cursor: default; }
    .order-punct { font-size: 1.1rem; font-weight: 700; color: var(--on-surface); align-self: center; margin-left: 2px; }
    .order-first-hint { font-size: 11px; color: var(--on-surface-muted); margin-bottom: 6px; }

    /* ── Uitspraak quiz ── */
    #speak-word { font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 800; color: var(--on-surface); text-align: center; margin: 12px 0 4px; }
    #speak-translation { font-size: 0.95rem; color: var(--on-surface-muted); text-align: center; margin-bottom: 8px; }
    #speak-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 18px 0 10px; }
    #speak-hear-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--outline); background: var(--surface-high); color: var(--on-surface-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
    #speak-mic-btn { width: 72px; height: 72px; border-radius: 50%; border: none; background: var(--primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(254,77,1,0.35); transition: transform 0.1s, box-shadow 0.1s; }
    #speak-mic-btn .material-symbols-outlined { font-size: 32px; }
    #speak-mic-btn:disabled { background: var(--surface-high); color: var(--on-surface-muted); box-shadow: none; cursor: default; }
    #speak-mic-btn.listening { animation: speak-pulse 1s ease-in-out infinite; }
    @keyframes speak-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(254,77,1,0.4); } 50% { box-shadow: 0 0 0 14px rgba(254,77,1,0); } }
    #speak-status { text-align: center; font-size: 13px; font-weight: 600; color: var(--on-surface-muted); min-height: 18px; }
    #speak-status.ok  { color: #22c55e; }
    #speak-status.err { color: #ef4444; }
    #speak-transcript { text-align: center; font-size: 14px; color: var(--on-surface); margin-top: 6px; font-style: italic; }

    /* ── Gesprekken quiz ── */
    .convo-phase-label {
      font-size: 12px; font-weight: 600;
      color: var(--on-surface-muted); margin: 6px 0 4px; display: flex; align-items: center; gap: 6px;
    }
    .convo-phase-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; border-radius: 50%; background: var(--primary);
      color: #fff; font-size: 11px; font-weight: 800; flex-shrink: 0;
    }

    /* ── Gesprekken intro ── */
    #convo-intro {
      display: flex; flex-direction: column; align-items: center; gap: 18px;
      padding: 10px 4px 24px; width: 100%;
    }
    .convo-intro-title { font-size: 1.5rem; font-weight: 800; color: var(--on-surface); }
    .convo-intro-subtitle { font-size: 13px; font-weight: 600; color: var(--on-surface-muted); margin-top: -10px; }
    .convo-intro-step {
      display: flex; align-items: flex-start; gap: 12px;
      width: 100%; padding: 14px 16px; border-radius: 16px;
      background: var(--surface-high); border: 1.5px solid var(--outline);
    }
    .convo-intro-step-num {
      width: 26px; height: 26px; border-radius: 50%; background: var(--primary);
      color: #fff; font-size: 14px; font-weight: 800; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .convo-intro-step-text { font-size: 14px; line-height: 1.5; color: var(--on-surface); }
    .convo-intro-example {
      width: 100%; padding: 10px 14px; border-radius: 14px;
      background: var(--surface); border: 1px dashed var(--outline);
    }
    .convo-intro-example-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--on-surface-muted); margin-bottom: 8px; letter-spacing: 0.05em; }
    .convo-intro-example-rows { display: flex; flex-direction: column; gap: 6px; }
    .convo-intro-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1.5px solid var(--outline); background: var(--surface-high); }
    .convo-intro-row.correct-hint { border-color: var(--primary); background: rgba(254,77,1,0.05); }
    .convo-intro-tick { font-size: 14px; font-weight: 800; color: var(--primary); margin-left: 4px; }
    .convo-intro-arrange { display: flex; flex-direction: column; gap: 8px; }
    .convo-intro-arrange-placed, .convo-intro-arrange-bank { display: flex; flex-wrap: wrap; gap: 6px; }
    .convo-intro-arrange-bank .order-chip { opacity: 0.6; }
    #convo-intro-start-btn {
      margin-top: 4px; width: 100%; padding: 14px; border-radius: 14px;
      background: var(--primary); color: #fff; border: none;
      font-size: 1rem; font-weight: 800; cursor: pointer; letter-spacing: 0.02em;
    }
    #convo-intro-start-btn:active { opacity: 0.85; }

    .convo-direction-hint { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); margin-top: 4px; margin-bottom: 2px; }
    #convo-question-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
    #convo-question { font-size: clamp(1.1rem, 4vw, 1.4rem); font-weight: 700; color: var(--on-surface); line-height: 1.4; }
    #convo-play-btn {
      flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
      border: 1.5px solid var(--outline); background: var(--surface-high);
      color: var(--primary); cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    #convo-play-btn:active { background: rgba(254,77,1,0.08); }
    #convo-rows { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .convo-row {
      width: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px;
      border-radius: 14px; border: 1.5px solid var(--outline); background: var(--surface-high);
      cursor: pointer; font-family: 'Manrope', sans-serif; text-align: left;
      transition: border-color 0.15s, background 0.15s;
    }
    .convo-row:active { border-color: var(--primary); background: rgba(254,77,1,0.05); }
    .convo-word-chip {
      padding: 4px 10px; border-radius: 50px; pointer-events: none;
      border: 1.5px solid var(--outline); background: var(--surface);
      font-size: 13px; font-weight: 600; color: var(--on-surface);
    }

    #quiz-start-wrap, #quiz-done-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      text-align: center;
      padding: 20px 0;
    }
    .quiz-done-emoji { font-size: 42px; }
    .quiz-done-score {
      font-size: 3rem;
      font-weight: 800;
      color: var(--primary);
      line-height: 1;
    }
    .quiz-done-sub {
      font-size: 15px;
      color: var(--on-surface-muted);
    }
    .quiz-counted-note {
      font-size: 13px;
      font-weight: 600;
      padding: 7px 16px;
      border-radius: 20px;
    }
    .quiz-counted-note.counted     { background: rgba(34,197,94,0.12); color: #16a34a; }
    .quiz-counted-note.not-counted { background: rgba(0,0,0,0.06);    color: var(--on-surface-muted); }

    /* ── Done screen daily progress bar ── */
    #done-daily-wrap {
      width: 100%;
      padding: 4px 0 2px;
    }
    #done-daily-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 7px;
    }
    #done-daily-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--on-surface-muted);
    }
    #done-daily-nums {
      font-size: 12px;
      font-weight: 700;
      color: var(--on-surface);
    }
    #done-daily-track {
      width: 100%;
      height: 8px;
      background: rgba(0,0,0,0.08);
      border-radius: 4px;
      overflow: hidden;
    }
    #done-daily-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #done-daily-fill.in-progress { background: var(--primary); box-shadow: 0 0 8px rgba(254,77,1,0.4); }
    #done-daily-fill.complete    { background: #22c55e;        box-shadow: 0 0 8px rgba(34,197,94,0.4); }
    #done-daily-sub {
      font-size: 11px;
      color: var(--on-surface-muted);
      margin-top: 6px;
      font-weight: 500;
      text-align: center;
    }
    #quiz-restart-btn {
      background: var(--primary);
      border: 1px solid var(--primary);
      color: #fff;
      padding: 10px 32px;
      border-radius: 50px;
      font-size: 13px;
      font-family: 'Manrope', sans-serif;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(254,77,1,0.25);
      transition: background 0.2s;
    }
    #quiz-restart-btn:hover { background: var(--secondary); }

    /* ── Sleep / notifications ── */
    .sleep-section {
      border-top: 1px solid rgba(0,0,0,0.08);
      padding-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .sleep-section h2 {
      font-size: 10px;
      color: var(--on-surface-muted);
      letter-spacing: 2.5px;
      text-transform: uppercase;
      font-weight: 700;
    }
    .sleep-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .sleep-row label {
      font-size: 13px;
      color: var(--on-surface-muted);
    }
    .sleep-row input[type=time] {
      background: rgba(0,0,0,0.03);
      border: 1px solid rgba(0,0,0,0.12);
      border-radius: 10px;
      color: var(--on-surface);
      font-size: 14px;
      padding: 6px 10px;
      width: 110px;
      text-align: center;
      -webkit-appearance: none;
    }
    .sleep-row input[type=time]:focus {
      outline: none;
      border-color: var(--primary);
    }
    .sleep-row select {
      background: rgba(0,0,0,0.03);
      border: 1px solid rgba(0,0,0,0.12);
      border-radius: 10px;
      color: var(--on-surface);
      font-size: 14px;
      padding: 6px 10px;
      width: 140px;
      -webkit-appearance: none;
      text-align: center;
    }
    .sleep-row select:focus {
      outline: none;
      border-color: var(--primary);
    }

    /* ── Report button ── */
    .report-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--on-surface-muted);
      padding: 6px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.2s, background 0.2s;
      opacity: 0.55;
    }
    .report-btn:active, .report-btn.reported {
      color: #ef4444;
      background: rgba(239,68,68,0.1);
      opacity: 1;
    }
    .report-btn .material-symbols-outlined { font-size: 18px; }

    /* card report btn — floats outside card */
    #card-report-wrap {
      position: absolute;
      bottom: 8px;
      right: 8px;
      z-index: 20;
    }

    /* ── Auto-play progress bar ── */
    @keyframes autoplay-shrink {
      from { width: 100%; }
      to   { width: 0%; }
    }
    #autoplay-bar {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 3px;
      border-radius: 0 0 22px 22px;
      background: rgba(0,0,0,0.07);
      overflow: hidden;
      z-index: 20;
      pointer-events: none;
    }
    #autoplay-bar-fill {
      height: 100%;
      width: 100%;
      background: var(--primary);
    }

    #autoplay-audio-label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      margin-top: 10px;
      padding: 5px 14px;
      border-radius: 20px;
      border: none;
      background: var(--surface-low);
      font-size: 12px;
      font-weight: 500;
      color: var(--on-surface-muted);
      cursor: pointer;
    }
    #autoplay-audio-label.ap-audio-off {
      color: var(--on-surface-lowest, #aaa);
    }
    #autoplay-audio-label .material-symbols-outlined {
      font-size: 15px;
    }

    /* ── Auto-play menu ── */
    #autoplay-menu {
      position: fixed;
      z-index: 600;
      background: var(--surface-high);
      border: 1px solid var(--surface-highest);
      border-radius: 16px;
      padding: 6px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    }
    .apm-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 14px;
      border-radius: 10px;
      background: transparent;
      border: none;
      color: var(--on-surface);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      min-width: 64px;
    }
    .apm-btn:active { background: var(--surface-low); }
    .apm-btn .material-symbols-outlined { font-size: 26px; color: var(--primary); }
    .apm-stop .material-symbols-outlined { color: #ef4444; }
    .apm-sep { width: 1px; height: 36px; background: var(--surface-highest); margin: 0 2px; }

    /* quiz report btn in top row */
    #quiz-report-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--on-surface-muted);
      padding: 6px 8px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      opacity: 0.5;
      transition: color 0.2s, opacity 0.2s;
    }
    #quiz-report-btn:active, #quiz-report-btn.reported { color: #ef4444; opacity: 1; }
    #quiz-report-btn .material-symbols-outlined { font-size: 20px; }

    /* Settings reported section */
    .reported-section-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--on-surface);
      margin: 4px 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .reported-clear-all {
      font-size: 12px;
      font-weight: 600;
      color: #ef4444;
      background: none;
      border: none;
      cursor: pointer;
      padding: 2px 0;
    }
    .reported-empty {
      font-size: 13px;
      color: var(--on-surface-muted);
      text-align: center;
      padding: 12px 0;
    }
    .reported-item {
      background: var(--surface);
      border: 1px solid var(--outline);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 8px;
      position: relative;
    }
    .reported-item-word {
      font-size: 14px;
      font-weight: 700;
      color: var(--on-surface);
      margin-bottom: 2px;
    }
    .reported-item-nl {
      font-size: 12px;
      color: var(--on-surface);
      margin-bottom: 1px;
    }
    .reported-item-en {
      font-size: 12px;
      color: var(--on-surface-muted);
      margin-bottom: 4px;
    }
    .reported-item-meta {
      font-size: 11px;
      color: var(--on-surface-muted);
      opacity: 0.7;
    }
    .reported-item-remove {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--on-surface-muted);
      font-size: 16px;
      line-height: 1;
      padding: 2px 4px;
    }

    /* ── Grammar: page slide animations ── */
    @keyframes gs-slide-next { from { transform:translateX(20px); opacity:0 } to { transform:none; opacity:1 } }
    @keyframes gs-slide-prev { from { transform:translateX(-20px); opacity:0 } to { transform:none; opacity:1 } }
    .gs-anim-next { animation: gs-slide-next 0.22s cubic-bezier(0.4,0,0.2,1); }
    .gs-anim-prev { animation: gs-slide-prev 0.22s cubic-bezier(0.4,0,0.2,1); }

    /* exercise-page dots — hollow ring style */
    .grammar-dot.type-exercise { width:9px; height:9px; border:2px solid var(--primary); background:transparent; box-sizing:border-box; }
    .grammar-dot.type-exercise.active { background:var(--primary); }
    .grammar-dot.type-exercise.done   { background:var(--primary); opacity:0.4; border-color:var(--primary); }

    /* explanation shown inside exercise after checking */
    .gs-exercise-explain {
      font-size:12px; line-height:1.55; margin-top:7px;
      padding:7px 10px; border-radius:8px; font-style:italic;
    }
    .gs-exercise-explain.ok  { color:#166534; background:rgba(34,197,94,0.08); }
    .gs-exercise-explain.err { color:#991b1b; background:rgba(239,68,68,0.08); }

    /* wrong-answer shake */
    @keyframes gs-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 60%{transform:translateX(5px)} 80%{transform:translateX(-3px)} }
    .gs-shake { animation: gs-shake 0.28s ease; }

    /* "Show answer" reveal link */
    .gs-exercise-reveal {
      background: none; border: none; cursor: pointer;
      font-size: 11px; color: var(--on-surface-muted); font-family: 'Manrope', sans-serif;
      text-decoration: underline; padding: 2px 0; display: block; margin-top: 4px;
      transition: color 0.15s;
    }
    .gs-exercise-reveal:hover { color: var(--primary); }

    /* lesson list: completion badge and inline progress bar */
    .grammar-topic-done-badge {
      display:inline-flex; align-items:center; gap:3px;
      background:rgba(34,197,94,0.12); color:#16a34a;
      font-size:10px; font-weight:700; padding:3px 9px; border-radius:10px;
      margin-top:5px;
    }
    .grammar-topic-prog-bar {
      width:100%; height:3px; background:rgba(0,0,0,0.08);
      border-radius:2px; margin-top:6px; overflow:hidden;
    }
    .grammar-topic-prog-fill { height:100%; background:var(--primary); border-radius:2px; }

    /* toast */
    #report-toast {
      position: fixed;
      bottom: calc(80px + var(--safe-bottom));
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: #1e1e2e;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      padding: 10px 20px;
      border-radius: 24px;
      opacity: 0;
      transition: opacity 0.25s, transform 0.25s;
      pointer-events: none;
      z-index: 400;
      white-space: nowrap;
    }
    #report-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ── Leaderboard ── */
    .leaderboard-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 0; border-bottom: 1px solid var(--outline);
    }
    .leaderboard-row:last-child { border-bottom: none; }
    .leaderboard-row.leaderboard-me { background: #fff7ed; margin: 0 -16px; padding: 10px 16px; border-radius: 8px; }
    .leaderboard-rank  { font-size: 18px; width: 28px; text-align: center; flex-shrink: 0; }
    .leaderboard-name  { flex: 1; font-size: 14px; font-weight: 600; color: var(--on-surface); }
    .leaderboard-streak { font-size: 14px; font-weight: 700; color: #fe4d01; }
    .leaderboard-loading, .leaderboard-empty { font-size: 13px; color: var(--on-surface-muted); padding: 8px 0; }

    /* ── Onboarding ── */
    @keyframes ob-rise {
      from { opacity: 0; transform: translateY(28px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)    scale(1);    }
    }
    @keyframes ob-fade {
      from { opacity: 0; } to { opacity: 1; }
    }

    #onboarding-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 500;
      background: var(--surface);
      align-items: center; justify-content: center;
      padding: 24px;
      overflow-y: auto;
    }
    #onboarding-overlay.open { display: flex; animation: ob-fade 0.25s ease both; }

    #onboarding-card {
      width: 100%; max-width: 360px;
      background: var(--surface-high);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
      animation: ob-rise 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
      display: flex; flex-direction: column;
    }

    /* Orange gradient hero at top of card */
    #onboarding-hero {
      background: linear-gradient(135deg, #fe4d01 0%, #c93b00 100%);
      padding: 32px 28px 28px;
      display: flex; flex-direction: column;
      align-items: center; gap: 10px;
      position: relative;
      overflow: hidden;
    }
    #onboarding-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12) 0%, transparent 60%);
      pointer-events: none;
    }
    #onboarding-logo {
      font-size: 44px; line-height: 1;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
    }
    #onboarding-title {
      font-size: 22px; font-weight: 800;
      color: #fff; text-align: center;
      line-height: 1.2; letter-spacing: -0.3px;
    }
    #onboarding-sub {
      font-size: 13px; color: rgba(255,255,255,0.78);
      text-align: center; line-height: 1.5;
    }

    /* Form body */
    #onboarding-form-body {
      padding: 24px 24px 20px;
      display: flex; flex-direction: column; gap: 12px;
    }

    #onboarding-name-row { display: contents; }

    #onboarding-name,
    #onboarding-email,
    #onboarding-password {
      width: 100%; padding: 13px 16px;
      border: 1.5px solid var(--outline);
      border-radius: 12px; font-size: 15px;
      font-family: 'Manrope', sans-serif;
      background: var(--surface); color: var(--on-surface);
      outline: none;
      transition: border-color 0.18s, box-shadow 0.18s;
    }
    #onboarding-name:focus,
    #onboarding-email:focus,
    #onboarding-password:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(254,77,1,0.12);
    }

    #onboarding-error {
      font-size: 12.5px; color: #dc2626;
      min-height: 16px; text-align: center;
      line-height: 1.4;
    }
    #onboarding-error a { color: #dc2626; font-weight: 600; }

    #onboarding-btn {
      width: 100%; padding: 14px;
      background: linear-gradient(135deg, #fe4d01 0%, #d94000 100%);
      color: white; border: none; border-radius: 12px;
      font-size: 15px; font-weight: 700;
      font-family: 'Manrope', sans-serif;
      cursor: pointer; margin-top: 2px;
      box-shadow: 0 4px 14px rgba(254,77,1,0.30);
      transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
    }
    #onboarding-btn:hover:not(:disabled) {
      box-shadow: 0 6px 20px rgba(254,77,1,0.38);
      transform: translateY(-1px);
    }
    #onboarding-btn:active:not(:disabled) {
      transform: translateY(0); box-shadow: 0 2px 8px rgba(254,77,1,0.22);
    }
    #onboarding-btn:disabled { opacity: 0.55; cursor: default; }

    #onboarding-toggle {
      margin-top: 4px; font-size: 12.5px;
      color: var(--on-surface-muted); text-align: center;
    }
    #onboarding-toggle a {
      color: var(--primary); font-weight: 600; text-decoration: none;
    }
    #onboarding-toggle a:hover { text-decoration: underline; }

    /* ── Multi-step onboarding (full-screen) ── */
    #notif-onboarding-overlay {
      display: none; position: fixed; inset: 0; z-index: 100;
      background: var(--surface); flex-direction: column;
    }
    #notif-onboarding-overlay.open { display: flex; animation: ob-fade 0.2s ease both; }

    .onb-step { flex: 1; display: flex; flex-direction: column; min-height: 0; }

    .onb-scroll {
      flex: 1; overflow-y: auto;
      padding: max(env(safe-area-inset-top, 0px), 56px) 28px 24px;
      display: flex; flex-direction: column; gap: 24px;
    }

    .onb-hero {
      display: flex; flex-direction: column; align-items: center;
      text-align: center; padding-bottom: 4px;
    }

    .onb-icon-wrap {
      width: 88px; height: 88px; border-radius: 22px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 46px; margin-bottom: 22px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    }

    .onb-title {
      font-size: 28px; font-weight: 800; line-height: 1.2;
      color: var(--on-surface); margin: 0 0 10px; letter-spacing: -0.3px;
    }

    .onb-desc {
      font-size: 15px; color: var(--on-surface-muted);
      line-height: 1.6; margin: 0; max-width: 280px;
    }

    /* Feature list */
    .onb-features { display: flex; flex-direction: column; gap: 10px; }
    .onb-feature {
      display: flex; gap: 14px; align-items: center;
      background: var(--surface-high); border-radius: 14px;
      padding: 14px 16px; border: 1px solid var(--outline);
    }
    .onb-feature-icon {
      width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .onb-feature-title { font-size: 15px; font-weight: 600; color: var(--on-surface); margin-bottom: 2px; }
    .onb-feature-sub { font-size: 13px; color: var(--on-surface-muted); line-height: 1.35; }

    /* ── Journey timeline (onboarding step 2) ── */
    .onb-journey {
      display: flex; flex-direction: column;
      padding: 4px 16px 16px;
    }
    .onb-les {
      display: flex; gap: 0; align-items: stretch;
    }
    .onb-les-left {
      display: flex; flex-direction: column; align-items: center;
      flex-shrink: 0; width: 48px;
    }
    .onb-les-node {
      width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--surface-high); border: 2px solid var(--outline);
      color: var(--on-surface-muted);
    }
    .onb-les-node .material-symbols-outlined { font-size: 20px; }
    .onb-les-node-active {
      background: linear-gradient(135deg,#fe4d01,#c93b00);
      border-color: transparent; color: #fff;
      box-shadow: 0 4px 14px rgba(254,77,1,0.35);
    }
    .onb-les-node-final {
      background: linear-gradient(135deg,#a855f7,#7c3aed);
      border-color: transparent; color: #fff;
      box-shadow: 0 4px 14px rgba(168,85,247,0.35);
    }
    .onb-les-line {
      width: 2px; flex: 1; min-height: 12px;
      background: var(--outline); margin: 4px 0;
    }
    .onb-les-last .onb-les-left { padding-bottom: 0; }
    .onb-les-card {
      flex: 1; padding: 6px 0 16px 14px;
    }
    .onb-les-last .onb-les-card { padding-bottom: 4px; }
    .onb-les-badge {
      display: inline-block; font-size: 10px; font-weight: 700;
      color: #fff; background: linear-gradient(135deg,#fe4d01,#c93b00);
      border-radius: 6px; padding: 2px 8px; margin-bottom: 4px;
      letter-spacing: 0.4px; text-transform: uppercase;
    }
    .onb-les-badge-final {
      background: linear-gradient(135deg,#a855f7,#7c3aed);
    }
    .onb-les-num {
      font-size: 11px; font-weight: 600; color: var(--on-surface-muted);
      text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;
    }
    .onb-les-title {
      font-size: 16px; font-weight: 700; color: var(--on-surface); margin-bottom: 3px;
    }
    .onb-les-desc {
      font-size: 13px; color: var(--on-surface-muted); line-height: 1.45;
    }
    .onb-les-current .onb-les-title { color: var(--primary); }
    .onb-les[data-les] { transition: opacity 0.15s; }
    .onb-les[data-les]:active { opacity: 0.7; }
    .onb-les-selected .onb-les-card {
      background: rgba(254,77,1,0.06);
      border-radius: 14px; padding: 6px 12px 16px;
      border: 1.5px solid rgba(254,77,1,0.25);
      margin-left: -2px;
    }
    .onb-les-selected .onb-les-title { color: var(--primary); }

    /* Deck list (kept for potential reuse) */
    .onb-deck-list { display: flex; flex-direction: column; gap: 4px; }
    .onb-loading { color: var(--on-surface-muted); text-align: center; padding: 24px 0; font-size: 14px; }

    .onb-group-header {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 4px 6px; cursor: pointer; user-select: none;
    }
    .onb-group-chevron { font-size: 18px; color: var(--on-surface-muted); transition: transform 0.2s; }
    .onb-group-name { font-size: 13px; font-weight: 700; color: var(--on-surface-muted); text-transform: uppercase; letter-spacing: 0.6px; flex: 1; }
    .onb-group-count { font-size: 12px; font-weight: 600; color: var(--primary); background: rgba(254,77,1,0.1); padding: 2px 8px; border-radius: 10px; }
    .onb-group-count-none { color: var(--on-surface-muted); background: var(--outline); }

    .onb-group-items { display: none; flex-direction: column; gap: 8px; padding-bottom: 8px; }
    .onb-group-items.expanded { display: flex; }
    .onb-deck-item {
      display: flex; gap: 14px; align-items: center;
      background: var(--surface-high); border-radius: 14px;
      padding: 14px 16px; cursor: pointer; user-select: none;
      border: 1.5px solid var(--outline);
      transition: border-color 0.15s;
    }
    .onb-deck-item.selected { border-color: var(--primary); }
    .onb-deck-check {
      width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
      border: 2px solid var(--outline);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, border-color 0.15s;
    }
    .onb-deck-item.selected .onb-deck-check { background: var(--primary); border-color: var(--primary); }
    .onb-deck-check .material-symbols-outlined { font-size: 15px; color: #fff; opacity: 0; transition: opacity 0.1s; }
    .onb-deck-item.selected .onb-deck-check .material-symbols-outlined { opacity: 1; }
    .onb-deck-name { font-size: 15px; font-weight: 500; color: var(--on-surface); }

    /* Les picker (onboarding step 3) */
    #onb-les-list { display: flex; flex-direction: column; gap: 10px; }
    .onb-les-option {
      display: flex; align-items: center; gap: 14px;
      background: var(--surface-high); border-radius: 16px;
      padding: 14px 16px; cursor: pointer; user-select: none;
      border: 2px solid transparent; transition: border-color 0.15s, background 0.15s;
    }
    .onb-les-option.selected { border-color: var(--primary); background: rgba(254,77,1,0.06); }
    .onb-les-option-icon {
      width: 40px; height: 40px; border-radius: 12px;
      background: var(--surface); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .onb-les-option.selected .onb-les-option-icon { background: rgba(254,77,1,0.12); }
    .onb-les-option-icon .material-symbols-outlined { font-size: 22px; color: var(--on-surface-muted); }
    .onb-les-option.selected .onb-les-option-icon .material-symbols-outlined { color: var(--primary); }
    .onb-les-option-body { flex: 1; }
    .onb-les-option-num { font-size: 11px; font-weight: 700; color: var(--on-surface-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
    .onb-les-option-title { font-size: 15px; font-weight: 600; color: var(--on-surface); }
    .onb-les-option-check { font-size: 22px; color: var(--primary); flex-shrink: 0; }

    /* Notification preview bubble — matches real iOS notification layout */
    .onb-notif-preview {
      display: flex; gap: 12px; align-items: flex-start;
      background: var(--surface-high); border-radius: 14px;
      padding: 14px 16px; border: 1px solid var(--outline);
    }
    .onb-notif-app-icon {
      width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
      background: linear-gradient(135deg,#fe4d01,#c93b00);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
    }
    .onb-notif-content { flex: 1; min-width: 0; }
    .onb-notif-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
    .onb-notif-app-name { font-size: 11px; font-weight: 700; color: var(--on-surface-muted); text-transform: uppercase; letter-spacing: 0.4px; }
    .onb-notif-time { font-size: 11px; color: var(--on-surface-muted); }
    .onb-notif-title { font-size: 14px; font-weight: 700; color: var(--on-surface); margin-bottom: 2px; }
    .onb-notif-body { font-size: 13px; color: var(--on-surface-muted); line-height: 1.4; }

    /* Settings card (iOS grouped style) */
    .onb-settings-card {
      background: var(--surface-high); border-radius: 14px;
      overflow: hidden; border: 1px solid var(--outline);
    }
    .onb-settings-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 15px 16px;
    }
    .onb-settings-label { font-size: 15px; color: var(--on-surface); }
    .onb-settings-select {
      background: none; border: none; color: var(--on-surface-muted);
      font-size: 15px; cursor: pointer;
    }
    .onb-settings-divider { height: 1px; background: var(--outline); margin: 0 16px; }

    /* Footer */
    .onb-footer {
      padding: 16px 28px;
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
      display: flex; flex-direction: column; gap: 6px;
      background: var(--surface);
      border-top: 1px solid var(--outline);
    }

    .onb-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; }
    .onb-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--outline); transition: background 0.2s, width 0.2s, border-radius 0.2s;
    }
    .onb-dot.active { background: var(--primary); width: 20px; border-radius: 4px; }

    .onb-btn-primary {
      width: 100%; height: 52px; border-radius: 14px;
      background: var(--primary); color: #fff;
      font-size: 17px; font-weight: 700; border: none; cursor: pointer;
      transition: opacity 0.15s;
    }
    .onb-btn-primary:active { opacity: 0.8; }

    .onb-btn-skip {
      background: none; border: none; width: 100%;
      color: var(--on-surface-muted); font-size: 15px; cursor: pointer;
      padding: 6px; text-align: center;
    }

    /* ── AI Tab ── */
    #tab-ai {
      display: none;
      flex: 1;
      flex-direction: column;
      overflow-y: auto;
      margin-top: calc(56px + var(--safe-top));
      padding: 20px 20px calc(20px + var(--safe-bottom));
    }
    #tab-ai.active { display: flex; }

    #ai-home-wrap { display: flex; flex-direction: column; gap: 12px; width: 100%; }
    #ai-home-title {
      font-size: 26px; font-weight: 800; color: var(--on-surface);
      padding: 4px 0 8px;
    }
    .ai-home-card {
      display: flex; align-items: center; gap: 14px;
      background: var(--surface-high); border: 1.5px solid var(--outline);
      border-radius: 20px; padding: 18px 16px;
      cursor: pointer; text-align: left; width: 100%;
      font-family: 'Manrope', sans-serif;
    }
    .ai-home-card-icon {
      width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .ai-home-card-icon .material-symbols-outlined { font-size: 26px; }
    .ai-home-card-text { display: flex; flex-direction: column; gap: 3px; flex: 1; }
    .ai-home-card-label { font-size: 16px; font-weight: 700; color: var(--on-surface); }
    .ai-home-card-desc  { font-size: 13px; color: var(--on-surface-muted); line-height: 1.4; }
    .ai-home-chevron { color: var(--on-surface-muted) !important; font-size: 20px !important; }

    /* ── AI Conversation Quiz ── */
    #ai-setup-wrap {
      display: flex; flex-direction: column; align-items: center;
      gap: 12px; padding: 8px 4px; width: 100%; text-align: center;
    }
    #ai-setup-icon {
      width: 64px; height: 64px; border-radius: 20px;
      background: rgba(254,77,1,0.1); display: flex; align-items: center; justify-content: center;
    }
    #ai-setup-icon .material-symbols-outlined { font-size: 32px; color: var(--primary); }
    #ai-setup-title { font-size: 20px; font-weight: 800; color: var(--on-surface); }
    #ai-setup-desc  { font-size: 14px; color: var(--on-surface-muted); line-height: 1.5; }
    #ai-key-input {
      width: 100%; padding: 14px 16px; border-radius: 14px;
      border: 1.5px solid var(--outline); background: var(--surface-high);
      font-size: 15px; font-family: 'Manrope', sans-serif; color: var(--on-surface);
      outline: none;
    }
    #ai-key-input:focus { border-color: var(--primary); }
    #ai-key-save-btn {
      width: 100%; height: 52px; border-radius: 14px;
      background: var(--primary); color: #fff;
      font-size: 16px; font-weight: 700; border: none; cursor: pointer;
    }

    #ai-topic-loading {
      display: flex; align-items: center; justify-content: center;
      flex: 1; width: 100%;
    }
    #ai-topic-wrap {
      display: flex; flex-direction: column;
      width: 100%; flex: 1; min-height: 0; align-self: stretch;
    }
    #ai-topic-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 4px 0 12px; flex-shrink: 0;
    }
    #ai-topic-title {
      font-size: 17px; font-weight: 800; color: var(--on-surface);
    }
    #ai-topic-list {
      flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
    }
    .ai-topic-group { display: flex; flex-direction: column; gap: 8px; }
    .ai-topic-group-title {
      font-size: 11px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: var(--on-surface-muted);
      padding: 0 4px;
    }
    .ai-topic-btn {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 16px; border-radius: 16px;
      border: 1.5px solid var(--outline); background: var(--surface-high);
      cursor: pointer; text-align: left; width: 100%;
      font-family: 'Manrope', sans-serif;
    }
    .ai-topic-btn .material-symbols-outlined { color: var(--primary); font-size: 22px; flex-shrink: 0; }
    .ai-topic-btn-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
    .ai-topic-btn-label { font-size: 15px; font-weight: 700; color: var(--on-surface); }
    .ai-topic-btn-count { font-size: 12px; color: var(--on-surface-muted); }
    .ai-topic-chevron { color: var(--on-surface-muted) !important; font-size: 20px !important; }

    /* ── AI Mode selector ── */
    #ai-mode-select {
      display: flex; flex-direction: column; gap: 12px; padding-top: 8px;
    }
    .ai-mode-select-label {
      font-size: 13px; font-weight: 700; color: var(--on-surface-muted);
      text-transform: uppercase; letter-spacing: 0.8px; padding: 0 2px;
    }
    .ai-mode-opt {
      display: flex; align-items: center; gap: 14px;
      background: var(--surface-high); border: 1.5px solid var(--outline);
      border-radius: 20px; padding: 18px 16px;
      cursor: pointer; text-align: left; width: 100%;
      font-family: 'Manrope', sans-serif;
    }
    .ai-mode-opt-icon {
      width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .ai-mode-opt-icon .material-symbols-outlined { font-size: 26px; }
    .ai-mode-opt-text { display: flex; flex-direction: column; gap: 3px; flex: 1; }
    .ai-mode-opt-label { font-size: 16px; font-weight: 700; color: var(--on-surface); }
    .ai-mode-opt-desc  { font-size: 13px; color: var(--on-surface-muted); line-height: 1.4; }

    #ai-chat-titles {
      display: flex; flex-direction: column; align-items: center; flex: 1;
    }
    #ai-chat-subtitle {
      font-size: 12px; color: var(--on-surface-muted); font-weight: 600;
    }

    #ai-chat-wrap {
      display: flex; flex-direction: column;
      width: 100%; flex: 1; min-height: 0;
      align-self: stretch;
    }
    #ai-chat-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 4px 0 12px; gap: 8px; flex-shrink: 0;
    }
    #ai-chat-title {
      font-size: 17px; font-weight: 800; color: var(--on-surface); flex: 1; text-align: center;
    }
    #ai-model-btn {
      display: flex; align-items: center; gap: 4px;
      background: var(--surface-low); border: 1.5px solid var(--outline);
      border-radius: 20px; padding: 6px 10px;
      font-size: 12px; font-weight: 700; color: var(--on-surface); cursor: pointer;
      font-family: 'Manrope', sans-serif; white-space: nowrap;
    }
    #ai-model-btn .material-symbols-outlined { font-size: 16px; color: var(--primary); }
    .ai-icon-btn {
      background: none; border: none; cursor: pointer;
      color: var(--on-surface-muted); padding: 6px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
    }
    .ai-icon-btn .material-symbols-outlined { font-size: 22px; }

    #ai-chat-messages {
      flex: 1; min-height: 0; overflow-y: auto;
      display: flex; flex-direction: column; gap: 10px;
      padding: 4px 0 8px;
    }
    #ai-chat-empty {
      text-align: center; color: var(--on-surface-muted);
      font-size: 14px; margin: auto; padding: 20px;
    }
    .ai-msg { display: flex; align-items: flex-end; gap: 6px; }
    .ai-msg-user      { justify-content: flex-end; }
    .ai-msg-assistant { justify-content: flex-start; }
    .ai-msg-live { opacity: 0.45; font-style: italic; }
    .ai-msg-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
    .ai-translate-btn {
      background: none; border: none; padding: 0 2px;
      font-size: 11px; color: var(--on-surface-muted);
      cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
      opacity: 0.6;
    }
    .ai-translate-btn:active { opacity: 1; }
    .ai-translation {
      display: none; font-size: 13px; color: var(--on-surface-muted);
      font-style: italic; padding: 2px 0 4px 2px; line-height: 1.4;
    }
    .ai-replay-btn {
      flex-shrink: 0; background: none; border: none; padding: 2px;
      color: var(--on-surface-muted); cursor: pointer; line-height: 1;
      opacity: 0.6; transition: opacity 0.15s;
    }
    .ai-replay-btn:active { opacity: 1; }
    .ai-replay-btn .material-symbols-outlined { font-size: 20px; }
    .ai-msg-bubble {
      max-width: 80%; padding: 12px 16px; border-radius: 18px;
      font-size: 15px; line-height: 1.5; word-break: break-word;
    }
    .ai-msg-user .ai-msg-bubble {
      background: var(--primary); color: #fff;
      border-bottom-right-radius: 4px;
    }
    .ai-msg-assistant .ai-msg-bubble {
      background: var(--surface-high); color: var(--on-surface);
      border: 1.5px solid var(--outline); border-bottom-left-radius: 4px;
    }

    #ai-hint-bar {
      display: flex; align-items: flex-start; gap: 8px;
      background: rgba(254,77,1,0.07); border: 1.5px solid rgba(254,77,1,0.2);
      border-radius: 12px; padding: 10px 14px;
      margin: 0 0 8px; flex-shrink: 0;
    }
    #ai-hint-bar .material-symbols-outlined { font-size: 16px; color: var(--primary); margin-top: 1px; flex-shrink: 0; }
    #ai-hint-text { font-size: 13px; color: var(--on-surface); line-height: 1.45; font-style: italic; }

    #ai-chat-bottom {
      flex-shrink: 0; display: flex; align-items: center;
      justify-content: center; gap: 16px; padding: 12px 0 4px;
    }
    #ai-chat-status {
      position: absolute; left: 50%; transform: translateX(-50%);
      bottom: 90px; font-size: 13px; color: var(--on-surface-muted);
      font-style: italic; pointer-events: none;
    }
    #ai-mic-btn {
      width: 68px; height: 68px; border-radius: 50%; border: none;
      background: var(--primary); color: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 4px 16px rgba(254,77,1,0.35);
      transition: background 0.2s;
    }
    #ai-mic-btn .material-symbols-outlined { font-size: 30px; }
    #ai-mic-btn.ai-mic-listening {
      background: #ef4444;
      box-shadow: 0 4px 16px rgba(239,68,68,0.35);
      animation: tr-pulse 1.2s ease-in-out infinite;
    }
    #ai-mic-btn:disabled { background: var(--surface-highest); box-shadow: none; color: var(--on-surface-muted); }

    /* Model picker overlay */
    #ai-model-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.45);
      z-index: 400; display: flex; align-items: flex-end; justify-content: center;
    }
    #ai-model-picker {
      background: var(--surface-high); border-radius: 24px 24px 0 0;
      padding: 20px 16px calc(20px + var(--safe-bottom));
      width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 8px;
    }
    #ai-model-picker-title {
      font-size: 16px; font-weight: 800; color: var(--on-surface);
      text-align: center; padding-bottom: 8px;
    }
    .ai-model-opt {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--outline);
      background: var(--surface); cursor: pointer; text-align: left; width: 100%;
      font-family: 'Manrope', sans-serif;
    }
    .ai-model-opt.selected { border-color: var(--primary); background: rgba(254,77,1,0.06); }
    .ai-model-opt .material-symbols-outlined { color: var(--primary); font-size: 20px; }
    .ai-model-opt-left { display: flex; flex-direction: column; gap: 2px; }
    .ai-model-opt-label { font-size: 15px; font-weight: 700; color: var(--on-surface); }
    .ai-model-opt-desc  { font-size: 12px; color: var(--on-surface-muted); }
    .ai-picker-section-title {
      font-size: 11px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: var(--on-surface-muted);
      padding: 4px 4px 0;
    }
    #ai-model-cancel {
      margin-top: 4px; padding: 14px; border-radius: 14px; border: none;
      background: var(--surface-low); color: var(--on-surface-muted);
      font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'Manrope', sans-serif;
      width: 100%;
    }

    /* ── Goals panel ── */
    #ai-goals-panel {
      flex-shrink: 0;
      background: var(--surface-low);
      border-radius: 14px;
      margin: 0 0 6px;
      overflow: hidden;
    }
    #ai-goals-header {
      display: flex; align-items: center; gap: 7px;
      padding: 8px 12px;
    }
    #ai-goals-progress {
      font-size: 13px; font-weight: 700; color: var(--on-surface); flex: 1;
    }
    .ai-eval-btn {
      display: flex; align-items: center; gap: 4px;
      padding: 5px 10px; border-radius: 20px; border: 1.5px solid var(--primary);
      background: transparent; color: var(--primary);
      font-size: 12px; font-weight: 700; font-family: 'Manrope', sans-serif;
      cursor: pointer; transition: background 0.15s;
    }
    .ai-eval-btn .material-symbols-outlined { font-size: 15px; }
    .ai-eval-btn.all-done {
      background: var(--primary); color: #fff;
    }
    #ai-goals-list {
      display: flex; flex-direction: column; gap: 0;
      padding: 0 12px 10px;
    }
    .ai-goal-item {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 0;
      border-top: 1px solid var(--surface-highest);
    }
    .ai-goal-item:first-child { border-top: none; }
    .ai-goal-icon { font-size: 17px; color: var(--on-surface-muted); flex-shrink: 0; }
    .ai-goal-nl   { font-size: 13px; color: var(--on-surface-muted); }
    .ai-goal-item.done .ai-goal-icon { color: #22c55e; }
    .ai-goal-item.done .ai-goal-nl   { color: var(--on-surface); text-decoration: line-through; opacity: 0.6; }
    .ai-goal-item.missed .ai-goal-icon { color: var(--primary); }
    .ai-goal-item.missed .ai-goal-nl   { color: var(--on-surface); }

    /* ── Start button (ai-leads) ── */
    .ai-chat-empty-start { display: flex; align-items: center; justify-content: center; flex: 1; }
    .ai-start-btn {
      display: flex; align-items: center; gap: 8px;
      padding: 14px 28px; border-radius: 50px;
      background: var(--primary); color: #fff; border: none;
      font-size: 16px; font-weight: 700; font-family: 'Manrope', sans-serif;
      cursor: pointer; box-shadow: 0 4px 16px rgba(254,77,1,0.35);
    }
    .ai-start-btn .material-symbols-outlined { font-size: 24px; }

    /* ── Evaluation screen ── */
    #ai-eval-wrap {
      display: flex; flex-direction: column;
      height: 100%; overflow-y: auto; padding: 12px 16px 24px;
      gap: 14px;
    }
    #ai-eval-topbar {
      display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    }
    #ai-eval-title {
      flex: 1; font-size: 17px; font-weight: 800; color: var(--on-surface);
      text-align: center;
    }
    #ai-eval-loading {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 14px; flex: 1; color: var(--on-surface-muted); font-size: 14px;
    }
    @keyframes ai-spin { to { transform: rotate(360deg); } }
    .ai-eval-spin { font-size: 36px; animation: ai-spin 1s linear infinite; color: var(--primary); }
    #ai-eval-goals {
      background: var(--surface-low); border-radius: 14px; padding: 10px 14px;
      display: flex; flex-direction: column; gap: 4px;
    }
    #ai-eval-score-row {
      border-top: 1px solid var(--surface-highest);
      padding-top: 8px; margin-top: 4px;
      font-size: 13px; font-weight: 700; color: var(--on-surface); text-align: right;
    }
    #ai-eval-score-card {
      display: flex; flex-direction: column; align-items: center;
      background: var(--surface-low); border-radius: 16px; padding: 16px 20px 12px;
      flex-shrink: 0;
    }
    #ai-eval-score-num   { font-size: 64px; font-weight: 900; line-height: 1; }
    #ai-eval-score-denom { font-size: 22px; font-weight: 700; color: var(--on-surface-muted); }
    #ai-eval-score-breakdown {
      font-size: 12px; color: var(--on-surface-muted); font-weight: 600;
      display: flex; align-items: center; gap: 4px; margin-top: 6px;
      flex-wrap: wrap; justify-content: center;
    }
    .ai-eval-sep { opacity: 0.4; }
    #ai-eval-feedback {
      background: var(--surface-low); border-radius: 14px;
      font-size: 14px; color: var(--on-surface); line-height: 1.6;
      display: flex; flex-direction: column;
    }
    .ai-eval-section { padding: 12px 16px; border-bottom: 1px solid var(--surface-highest); }
    .ai-eval-section:last-child { border-bottom: none; }
    .ai-eval-section-title {
      font-size: 11px; font-weight: 800; color: var(--on-surface-muted);
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
    }
    .ai-eval-section-body { font-size: 14px; color: var(--on-surface); line-height: 1.5; }
    .ai-eval-mistake      { font-size: 13px; color: var(--on-surface); line-height: 1.6; padding: 2px 0; }
    .ai-eval-flow-warn .ai-eval-section-title { color: #ef4444; }
    #ai-eval-actions {
      display: flex; flex-direction: column; gap: 10px; margin-top: auto;
    }
    .ai-eval-action-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 14px; border-radius: 14px; border: none;
      font-size: 15px; font-weight: 700; font-family: 'Manrope', sans-serif;
      cursor: pointer; background: var(--surface-low); color: var(--on-surface-muted);
    }
    .ai-eval-action-btn.primary {
      background: var(--primary); color: #fff;
    }
    .ai-eval-action-btn .material-symbols-outlined { font-size: 20px; }

    /* ── Schrijven Quiz ── */
    #schrijven-wrap {
      display: flex; flex-direction: column;
      width: 100%; flex: 1; min-height: 0; align-self: stretch;
    }
    #schrijven-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 4px 0 12px; flex-shrink: 0;
    }
    #schrijven-topbar-text {
      display: flex; align-items: center; gap: 8px;
    }
    #schrijven-topbar-title {
      font-size: 17px; font-weight: 800; color: var(--on-surface);
    }
    #schrijven-scroll {
      display: flex; flex-direction: column; gap: 10px;
      padding-bottom: 8px;
    }
    .schrijven-section-label {
      font-size: 11px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: var(--on-surface-muted);
      padding: 0 2px;
    }
    .schrijven-prompt-label {
      font-size: 14px; font-weight: 700; letter-spacing: 0;
      text-transform: none; color: var(--on-surface);
      margin-top: 4px;
    }
    .schrijven-context {
      background: var(--surface-high); border: 1.5px solid var(--outline);
      border-radius: 14px; padding: 14px 16px;
      font-size: 14px; line-height: 1.65; color: var(--on-surface);
      white-space: pre-wrap; font-family: 'Manrope', sans-serif;
    }
    .schrijven-template {
      font-size: 13px; color: var(--on-surface-muted);
      padding: 0 2px; white-space: pre-wrap;
      font-family: 'Manrope', sans-serif;
    }
    #schrijven-textarea {
      width: 100%; padding: 14px 16px; border-radius: 14px;
      border: 1.5px solid var(--outline); background: var(--surface-high);
      font-size: 15px; font-family: 'Manrope', sans-serif; color: var(--on-surface);
      outline: none; resize: none; line-height: 1.6; box-sizing: border-box;
      min-height: 160px; overflow: hidden;
    }
    #schrijven-textarea:focus { border-color: var(--primary); }
    .schrijven-word-count {
      font-size: 12px; color: var(--on-surface-muted);
      text-align: right; padding: 0 2px;
    }
    .schrijven-word-count.schrijven-wc-ok    { color: #22c55e; }
    .schrijven-word-count.schrijven-wc-short { color: var(--primary); }
    #schrijven-footer {
      display: flex; flex-direction: column; gap: 10px;
      padding-top: 10px; flex-shrink: 0;
    }
    #schrijven-submit-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; height: 52px; border-radius: 14px;
      background: var(--primary); color: #fff;
      font-size: 16px; font-weight: 700; font-family: 'Manrope', sans-serif;
      border: none; cursor: pointer;
    }
    #schrijven-submit-btn:disabled {
      opacity: 0.4; cursor: default;
    }
    #schrijven-submit-btn .material-symbols-outlined { font-size: 20px; }
    .schrijven-loading {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; flex: 1; gap: 12px;
      font-size: 14px; color: var(--on-surface-muted);
    }
    .schrijven-level-badge {
      font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
      background: rgba(34,197,94,0.15); color: #22c55e;
      border-radius: 6px; padding: 2px 7px;
    }
    .schrijven-level-badge--topbar { font-size: 12px; }
    .schrijven-topic-top {
      display: flex; align-items: center; gap: 7px;
    }
    .schrijven-wc-pill {
      display: flex; align-items: center; gap: 6px;
      font-size: 13px; font-weight: 600;
      padding: 8px 14px; border-radius: 10px;
      align-self: flex-start;
    }
    .schrijven-wc-pill .material-symbols-outlined { font-size: 16px; }
    .schrijven-wc-pill.ok   { background: rgba(34,197,94,0.12); color: #22c55e; }
    .schrijven-wc-pill.warn { background: rgba(239,68,68,0.10); color: #ef4444; }
    .schrijven-mistake-wrong   { color: #ef4444; font-weight: 600; }
    .schrijven-mistake-arrow   { color: var(--on-surface-muted); }
    .schrijven-mistake-correct { color: #22c55e; font-weight: 600; }
    .schrijven-section-doel   { border-left: 3px solid var(--primary); }
    .schrijven-section-grammar{ border-left: 3px solid #ef4444; }
    .schrijven-section-well   { border-left: 3px solid #22c55e; }
    .schrijven-section-tip    { border-left: 3px solid #f59e0b; }
    .schrijven-title-doel     { color: var(--primary); }
    .schrijven-title-grammar  { color: #ef4444; }
    .schrijven-title-well     { color: #22c55e; }
    .schrijven-title-tip      { color: #f59e0b; }

    .schrijven-submitted-text {
      font-size: 14px; color: var(--on-surface); line-height: 1.65;
      white-space: pre-wrap; font-family: 'Manrope', sans-serif;
      background: var(--surface-low); border-radius: 10px; padding: 12px 14px;
      margin-top: 4px;
    }

    /* ── Transcript Tab ── */
    #tab-transcript { display: none; }

    /* transcript rendered inside #tab-ai fills the remaining space */
    #tab-ai #tr-header { padding-top: 0; }
    #tab-ai #tr-body   { margin: 0 0 8px; }

    #tr-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 0 12px;
      flex-shrink: 0;
      gap: 8px;
    }
    #tr-title {
      font-size: 22px;
      font-weight: 800;
      color: var(--on-surface);
      font-family: 'Manrope', sans-serif;
    }
    #tr-body {
      flex: 1;
      overflow-y: auto;
      margin: 0 16px;
      background: var(--surface-high);
      border-radius: 16px;
      padding: 16px;
      border: 1.5px solid var(--outline);
    }
    #tr-text {
      font-size: 18px;
      line-height: 1.7;
      font-family: 'Manrope', sans-serif;
      color: var(--on-surface);
      word-break: break-word;
      min-height: 100%;
    }
    #tr-placeholder {
      color: var(--on-surface-muted);
      font-size: 16px;
    }
    .tr-block { margin-bottom: 14px; }
    .tr-block-src { color: var(--on-surface); font-size: 17px; font-weight: 600; line-height: 1.5; }
    .tr-block-tgt { color: var(--on-surface-muted); font-size: 14px; margin-top: 2px; line-height: 1.4; }
    .tr-translating { font-style: italic; opacity: 0.6; }
    .tr-interim { color: var(--on-surface-muted); font-style: italic; font-size: 17px; }

    #tr-toggle-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--surface-low);
      border: 1.5px solid var(--outline);
      border-radius: 20px;
      padding: 6px 12px 6px 14px;
      cursor: pointer;
      color: var(--on-surface);
    }
    #tr-lang-badge {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      font-family: 'Manrope', sans-serif;
    }
    #tr-toggle-btn .material-symbols-outlined { font-size: 18px; color: var(--primary); }

    #tr-footer {
      flex-shrink: 0;
      padding: 16px 20px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #tr-status {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    #tr-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--outline);
      transition: background 0.2s;
    }
    #tr-dot.active {
      background: #ef4444;
      box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
      animation: tr-pulse 1.2s ease-in-out infinite;
    }
    @keyframes tr-pulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
      50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0.05); }
    }
    #tr-status-text {
      font-size: 13px;
      font-weight: 600;
      color: var(--on-surface-muted);
      font-family: 'Manrope', sans-serif;
    }

    #tr-btn-row {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    #tr-clear-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1.5px solid var(--outline);
      background: var(--surface-high);
      color: var(--on-surface-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    #tr-mic-btn {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: none;
      background: var(--primary);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(254,77,1,0.35);
      transition: background 0.2s, box-shadow 0.2s;
    }
    #tr-mic-btn .material-symbols-outlined { font-size: 28px; }
    #tr-mic-btn.tr-recording {
      background: #ef4444;
      box-shadow: 0 4px 16px rgba(239,68,68,0.35);
    }
    #tr-mic-btn:disabled {
      background: var(--surface-highest);
      box-shadow: none;
      color: var(--on-surface-muted);
    }

    /* ── Profile greeting ── */
    .profile-greeting {
      font-size: 20px; font-weight: 700; color: var(--on-surface);
      padding: 8px 0 4px;
    }