:root,
    [data-theme="classic"] {
      --bg:           #f5f2eb;
      --surface:      #ffffff;
      --surface-alt:  #faf8f3;
      --navy:         #1a2744;
      --gold:         #c8922a;
      --gold-light:   #f0d89a;
      --cream:        #fffdf6;
      --text:         #1a2744;
      --text-muted:   #5a6070;
      --border:       #ddd8cc;
      --shadow:       0 4px 24px rgba(26,39,68,.10);
      --radius:       14px;
      --radius-sm:    8px;
      --display-font: 'Playfair Display', Georgia, serif;
      --body-font:    'Source Sans 3', system-ui, sans-serif;
      --accent:       var(--gold);
      --accent-light: var(--gold-light);
      --btn-bg:       var(--navy);
      --btn-text:     #fff;
      --slot-who:     #1a7a4a;
      --slot-action:  #1a3a6e;
      --slot-what:    #0e7a60;
      --slot-when:    #b35c00;
      --slot-where:   #5a2d91;
      --slot-extra:   #2c6fad;
      --slot-polarity:#b52030;
      --slot-type:    #4a5260;
    }
    [data-theme="teal"] {
      --bg:           #eef6f7;
      --surface:      #ffffff;
      --surface-alt:  #f4fafb;
      --navy:         #1a3a4a;
      --gold:         #00838f;
      --gold-light:   #b2ebf2;
      --cream:        #f8fdfe;
      --text:         #1a3a4a;
      --text-muted:   #4a6a72;
      --border:       #b2d8dd;
      --shadow:       0 4px 24px rgba(0,131,143,.10);
      --accent:       #00838f;
      --accent-light: #b2ebf2;
      --btn-bg:       #00838f;
      --btn-text:     #fff;
      --display-font: 'DM Serif Display', Georgia, serif;
      --body-font:    'DM Sans', system-ui, sans-serif;
    }
    /* ─── RESET & BASE ──────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--body-font);
      line-height: 1.6;
      min-height: 100vh;
    }
    /* ─── NAV PLACEHOLDER ───────────────────────────────────── */
    #ylc-nav-placeholder { width: 100%; }
    /* ─── THEME TOGGLE ──────────────────────────────────────── */
    .theme-bar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: .5rem;
      max-width: 960px;
      margin: 0 auto;
      padding: .6rem 1.25rem .2rem;
      font-size: .8rem;
      color: var(--text-muted);
    }
    .theme-toggle {
      display: flex;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      overflow: hidden;
      font-size: .78rem;
    }
    .theme-toggle button {
      padding: .3rem .85rem;
      border: none;
      background: transparent;
      cursor: pointer;
      color: var(--text-muted);
      font-family: var(--body-font);
      font-size: .78rem;
      transition: background .2s, color .2s;
    }
    .theme-toggle button.active {
      background: var(--accent);
      color: #fff;
      font-weight: 600;
    }
    /* ─── MAIN CARD ─────────────────────────────────────────── */
    .tool-wrap {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 1.25rem 4rem;
    }
    .tool-card {
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    /* ─── HERO HEADER ───────────────────────────────────────── */
    .card-header {
      background: var(--navy);
      color: #fff;
      padding: 2.5rem 2.5rem 2rem;
      position: relative;
      overflow: hidden;
    }
    .card-header::after {
      content: '';
      position: absolute;
      right: -40px; bottom: -40px;
      width: 220px; height: 220px;
      border-radius: 50%;
      background: var(--accent);
      opacity: .12;
    }
    .card-header .eyebrow {
      font-family: var(--body-font);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: .5rem;
      opacity: .85;
    }
    .card-header h1 {
      font-family: var(--display-font);
      font-size: clamp(1.6rem, 4vw, 2.4rem);
      font-weight: 700;
      line-height: 1.15;
      margin-bottom: .65rem;
    }
    .card-header p {
      font-size: .95rem;
      opacity: .8;
      max-width: 560px;
    }
    .lia-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px;
      padding: .3rem .75rem;
      font-size: .78rem;
      margin-top: 1rem;
    }
    .lia-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 6px var(--accent);
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
    /* ─── FORM BODY ─────────────────────────────────────────── */
    .card-body {
      padding: 2rem 2.5rem 2.5rem;
    }
    @media (max-width: 600px) {
      .card-header, .card-body { padding-left: 1.25rem; padding-right: 1.25rem; }
    }
    label {
      display: block;
      font-weight: 600;
      font-size: .85rem;
      letter-spacing: .03em;
      color: var(--text);
      margin-bottom: .4rem;
    }
    .form-group { margin-bottom: 1.25rem; }
    select, textarea {
      width: 100%;
      font-family: var(--body-font);
      font-size: .95rem;
      color: var(--text);
      background: var(--surface-alt);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      padding: .65rem .9rem;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    select:focus, textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(200,146,42,.15);
    }
    [data-theme="teal"] select:focus,
    [data-theme="teal"] textarea:focus {
      box-shadow: 0 0 0 3px rgba(0,131,143,.15);
    }
    textarea { min-height: 120px; resize: vertical; }
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    @media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
    /* ─── BUTTONS ───────────────────────────────────────────── */
    .btn-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .25rem; }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .65rem 1.4rem;
      border-radius: var(--radius-sm);
      border: none;
      font-family: var(--body-font);
      font-size: .92rem;
      font-weight: 700;
      cursor: pointer;
      transition: opacity .2s, transform .1s;
    }
    .btn:active { transform: scale(.97); }
    .btn-primary { background: var(--btn-bg); color: var(--btn-text); }
    .btn-primary:hover { opacity: .88; }
    .btn-primary:disabled { opacity: .55; cursor: not-allowed; }
    .btn-ghost {
      background: transparent;
      color: var(--text-muted);
      border: 1.5px solid var(--border);
    }
    .btn-ghost:hover { background: var(--surface-alt); }
    /* ─── ACCOUNT BAR ────────────────────────────────────────── */
    .account-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 960px;
      margin: 0 auto;
      padding: 0 1.25rem .4rem;
      font-size: .82rem;
      color: var(--text-muted);
      flex-wrap: wrap;
      gap: .5rem;
    }
    .account-status { display: flex; align-items: center; gap: .5rem; }
    .account-status .tier-pill {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: .15rem .55rem;
      border-radius: 999px;
      background: var(--accent-light);
      color: var(--navy);
    }
    .account-link {
      color: var(--accent);
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      background: none;
      border: none;
      font-family: var(--body-font);
      font-size: .82rem;
    }
    .account-link:hover { text-decoration: underline; }
    /* ─── LOCKED OPTION STYLING ──────────────────────────────── */
    select option:disabled {
      color: #b0b0b0;
      font-style: italic;
    }
    .lock-hint {
      font-size: .78rem;
      color: var(--text-muted);
      margin-top: .4rem;
      display: none;
    }
    .lock-hint.active { display: block; }
    .lock-hint a { color: var(--accent); font-weight: 600; cursor: pointer; }
    /* ─── SIGN-IN MODAL ──────────────────────────────────────── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(26,39,68,.55);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
    }
    .modal-overlay.active { display: flex; }
    .modal-box {
      background: var(--surface);
      border-radius: var(--radius);
      max-width: 420px;
      width: 100%;
      padding: 2rem 2.25rem;
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
      text-align: center;
    }
    .modal-box .modal-icon { font-size: 2.2rem; margin-bottom: .5rem; }
    .modal-box h3 {
      font-family: var(--display-font);
      font-size: 1.3rem;
      color: var(--navy);
      margin-bottom: .5rem;
    }
    .modal-box p { font-size: .9rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.55; }
    .modal-box input[type="email"], .modal-box input[type="text"] {
      width: 100%;
      font-family: var(--body-font);
      font-size: .95rem;
      padding: .65rem .9rem;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      margin-bottom: .75rem;
      outline: none;
    }
    .modal-box input:focus { border-color: var(--accent); }
    .modal-box .btn-primary { width: 100%; justify-content: center; }
    .modal-close {
      position: absolute;
      top: 1rem; right: 1.1rem;
      background: none; border: none;
      font-size: 1.3rem; color: var(--text-muted);
      cursor: pointer; line-height: 1;
    }
    .modal-box { position: relative; }
    .modal-status {
      font-size: .85rem;
      margin-top: .75rem;
      padding: .6rem .8rem;
      border-radius: var(--radius-sm);
      display: none;
    }
    .modal-status.success { display: block; background: #eaf4ee; color: #1a5c30; border: 1px solid #7ec49a; }
    .modal-status.error   { display: block; background: #fdf0f0; color: #7a1a1a; border: 1px solid #e0a0a0; }
    .modal-tiers {
      text-align: left;
      background: var(--surface-alt);
      border-radius: var(--radius-sm);
      padding: .8rem 1rem;
      font-size: .78rem;
      color: var(--text-muted);
      margin-top: 1rem;
      line-height: 1.6;
    }
    .modal-tiers strong { color: var(--text); }
    /* ─── POWER LESSON BANNER ───────────────────────────────── */
    .power-lesson-banner {
      display: none;
      align-items: center;
      gap: .75rem;
      background: var(--navy);
      color: #fff;
      border-radius: var(--radius-sm);
      padding: .75rem 1.1rem;
      margin-bottom: 1.25rem;
      font-size: .88rem;
      line-height: 1.5;
    }
    .power-lesson-banner.active { display: flex; }
    .power-lesson-banner .pl-icon {
      font-size: 1.4rem;
      flex-shrink: 0;
    }
    .power-lesson-banner strong {
      color: var(--gold-light);
      font-size: .82rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      display: block;
      margin-bottom: .15rem;
    }
    .power-lesson-banner p { opacity: .78; margin: 0; }
    /* ─── LOADING ───────────────────────────────────────────── */
    .loading-strip {
      display: none;
      align-items: center;
      gap: .6rem;
      background: var(--accent-light);
      border: 1px solid var(--gold);
      border-radius: var(--radius-sm);
      padding: .75rem 1rem;
      margin-top: 1rem;
      font-size: .9rem;
      color: var(--text);
    }
    [data-theme="teal"] .loading-strip { border-color: var(--accent); }
    .loading-strip .spinner {
      width: 18px; height: 18px;
      border: 2.5px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .75s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-strip.active { display: flex; }
    /* ─── ERROR ─────────────────────────────────────────────── */
    .error-box {
      display: none;
      background: #fff5f5;
      border: 1.5px solid #e05a5a;
      border-radius: var(--radius-sm);
      padding: .85rem 1rem;
      color: #8b1a1a;
      font-size: .9rem;
      margin-top: 1rem;
    }
    .error-box.active { display: block; }
    /* ─── DIVIDER ────────────────────────────────────────────── */
    .section-divider {
      border: none;
      border-top: 1.5px solid var(--border);
      margin: 2rem 0;
    }
    /* ─── RESULTS ───────────────────────────────────────────── */
    #results { display: none; }
    #results.active { display: block; }
    .result-section { margin-bottom: 2rem; }
    .result-section h2 {
      font-family: var(--display-font);
      font-size: 1.15rem;
      color: var(--navy);
      margin-bottom: .75rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .result-section h2::after {
      content: '';
      flex: 1;
      height: 1.5px;
      background: var(--border);
      margin-left: .5rem;
    }
    .summary-box {
      background: var(--surface-alt);
      border-left: 4px solid var(--accent);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      padding: 1rem 1.25rem;
      font-size: .97rem;
      line-height: 1.6;
    }
    /* ─── SLOTS GRID ─────────────────────────────────────────── */
    .slots-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: .85rem;
    }
    .slot-card {
      background: var(--cream);
      border-radius: var(--radius-sm);
      padding: .9rem 1rem;
      border-left: 5px solid var(--border);
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
    }
    .slot-card.slot-who    { border-color: var(--slot-who); }
    .slot-card.slot-action { border-color: var(--slot-action); }
    .slot-card.slot-what   { border-color: var(--slot-what); }
    .slot-card.slot-when   { border-color: var(--slot-when); }
    .slot-card.slot-where  { border-color: var(--slot-where); }
    .slot-card.slot-extra  { border-color: var(--slot-extra); }
    .slot-card.slot-polarity { border-color: var(--slot-polarity); }
    .slot-card.slot-type   { border-color: var(--slot-type); }
    .slot-name {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: .25rem;
    }
    .slot-text {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
    }
    .slot-meaning {
      font-size: .82rem;
      color: var(--text-muted);
      margin-top: .2rem;
    }
    /* ─── PATTERN FOCUS ─────────────────────────────────────── */
    .pattern-box {
      background: var(--navy);
      color: #fff;
      border-radius: var(--radius-sm);
      padding: 1.1rem 1.4rem;
      line-height: 1.65;
    }
    .pattern-box .pat-target {
      font-size: 1.08rem;
      font-weight: 700;
      margin-bottom: .2rem;
    }
    .pattern-box .pat-english {
      font-size: .9rem;
      opacity: .75;
      margin-bottom: .6rem;
    }
    .pattern-template {
      display: inline-block;
      font-family: 'Courier New', monospace;
      font-size: .88rem;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 6px;
      padding: .35rem .75rem;
      letter-spacing: .02em;
    }
    /* ─── SWAP IDEAS ─────────────────────────────────────────── */
    .swap-group { margin-bottom: .75rem; font-size: .92rem; }
    .swap-group strong { color: var(--text); }
    .swap-original { color: var(--text-muted); }
    .chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
    .chip {
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: .28rem .8rem;
      font-size: .85rem;
      color: var(--text);
    }
    /* ─── EXPANSIONS ─────────────────────────────────────────── */
    .expansion-item {
      background: var(--surface-alt);
      border-radius: var(--radius-sm);
      padding: .75rem 1rem;
      margin-bottom: .6rem;
    }
    .expansion-target {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
    }
    .expansion-english {
      font-size: .88rem;
      color: var(--text-muted);
      margin-top: .15rem;
    }
    /* ─── YOUR TURN ──────────────────────────────────────────── */
    .your-turn-list { list-style: none; }
    .your-turn-list li {
      padding: .5rem 0 .5rem 1.25rem;
      border-bottom: 1px dashed var(--border);
      font-size: .95rem;
      position: relative;
    }
    .your-turn-list li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: var(--accent);
      font-weight: 700;
    }
    .your-turn-list li:last-child { border-bottom: none; }
    /* ─── CALLOUT BOXES ──────────────────────────────────────── */
    .callout {
      border-radius: var(--radius-sm);
      padding: 1rem 1.25rem;
      font-size: .93rem;
      line-height: 1.6;
    }
    .callout-info {
      background: #eef3fb;
      border: 1px solid #b8cce8;
      color: #1a3060;
    }
    .callout-practice {
      background: var(--surface-alt);
      border: 1.5px solid var(--accent);
      color: var(--text);
    }
    /* ─── DOWNLOAD CTA ───────────────────────────────────────── */
    .download-cta {
      background: var(--navy);
      color: #fff;
      border-radius: var(--radius-sm);
      padding: 1.25rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: .5rem;
    }
    .download-cta p { font-size: .92rem; opacity: .85; margin-top: .25rem; }
    .btn-download {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      background: var(--gold);
      color: #fff;
      padding: .6rem 1.25rem;
      border-radius: var(--radius-sm);
      font-weight: 700;
      font-size: .88rem;
      text-decoration: none;
      white-space: nowrap;
      transition: opacity .2s;
    }
    [data-theme="teal"] .btn-download { background: var(--accent); }
    .btn-download:hover { opacity: .85; }