* { box-sizing: border-box; }
    body { font-family: 'Sarabun', sans-serif; font-size: 19px; background: #1e2128; color: #abb2bf; margin: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
    .tab.active { background: #61afef !important; color: #1e2128 !important; font-weight: 700; font-size: 15px !important; }
    .card { background: #282c34; border: 1px solid #3a3f4b; border-radius: 8px; }
    .btn { padding: 12px 22px; border-radius: 6px; border: none; cursor: pointer; font-family: 'Sarabun', sans-serif; font-size: 17px; font-weight: 600; transition: opacity .2s; }
    .btn:hover { opacity: .85; } .btn:disabled { opacity: .4; cursor: not-allowed; }
    .btn-blue { background: #61afef; color: #1e2128; }
    .btn-green { background: #98c379; color: #1e2128; }
    .btn-purple { background: #c678dd; color: #1e2128; }
    .btn-yellow { background: #e5c07b; color: #1e2128; }
    .btn-red { background: #e06c75; color: #fff; }
    .btn-gray { background: #3a3f4b; color: #abb2bf; }
    .inp { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 10px 14px; width: 100%; font-family: 'Sarabun', sans-serif; font-size: 17px; }
    .inp:focus { outline: none; border-color: #61afef; }
    textarea.inp { resize: vertical; }
    select.inp option { background: var(--card); color: var(--text); }
    select.inp { color: var(--text); }
    body.theme-light select.inp option { background: #ffffff; color: #1a202c; }
    body.theme-light select.inp { background: #ffffff; color: #1a202c; }
    label { font-size: 16px; color: var(--muted); display: block; margin-bottom: 6px; }
    .step-row { display: flex; align-items: center; gap: 8px; font-size: 16px; padding: 5px 0; }
    .log-line { font-size: 15px; font-family: monospace; padding: 2px 0; color: var(--text); }
    .log-line.err { color: var(--red); } .log-line.ok { color: var(--green); } .log-line.inf { color: var(--muted); }
    .doc-pill { padding: 6px 14px; border-radius: 20px; font-size: 15px; cursor: pointer; border: 1px solid #3a3f4b; background: #282c34; color: #abb2bf; }
    .doc-pill.active { background: #98c379; color: #1e2128; border-color: #98c379; font-weight: 700; }
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: #1e2128; }
    ::-webkit-scrollbar-thumb { background: #3a3f4b; border-radius: 3px; }
    .ksa-td { padding: 6px 10px; font-size: 15px; border-bottom: 1px solid #3a3f4b; }
    .badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 14px; font-weight: 600; }
    .spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #3a3f4b; border-top-color: #61afef; border-radius: 50%; animation: sp .8s linear infinite; }
    @keyframes sp { to { transform: rotate(360deg); } }

    .sec-item { display:flex; align-items:center; gap:7px; padding:9px 12px; border-radius:5px; cursor:pointer; font-size:15px; color:var(--text); transition:background .15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sec-item:hover { background:var(--border); font-size:15px; }
    .sec-item.active { background:var(--blue)22; color:var(--blue); font-weight:600; }
    .sec-item.done { color:var(--green); }
    .sec-dot { width:8px; height:8px; border-radius:50%; background:var(--border); flex-shrink:0; }
    .sec-dot.done { background:var(--green); }
    .sec-dot.active { background:var(--blue); }

    .md-preview { font-family:'Sarabun',sans-serif; font-size:16px; line-height:1.8; color:var(--text); }
    .md-preview h2 { font-size:18px; font-weight:700; color:var(--blue); margin:16px 0 6px; border-left:3px solid var(--blue); padding-left:8px; }
    .md-preview h3 { font-size:16px; font-weight:700; color:var(--yellow); margin:12px 0 4px; }
    .md-preview strong { font-weight:700; color:var(--text); }
    .md-preview p { margin:6px 0; }
    .md-preview ul, .md-preview ol { padding-left:20px; margin:6px 0; }
    .md-preview li { margin:3px 0; }
    .md-preview hr { border:none; border-top:1px solid var(--border); margin:12px 0; }
    .md-preview table { border-collapse:collapse; width:100%; margin:8px 0; font-size:13px; }
    .md-preview th { background:var(--border); padding:6px 8px; text-align:left; font-weight:600; }
    .md-preview td { border:1px solid var(--border); padding:5px 8px; vertical-align:top; }
    .md-preview blockquote { border-left:3px solid var(--border); padding-left:10px; color:var(--muted); margin:6px 0; }
    .preview-toggle { display:flex; gap:4px; margin-bottom:8px; }
    .preview-toggle button { padding:3px 10px; border-radius:4px; font-size:11px; border:1px solid var(--border); cursor:pointer; background:transparent; color:var(--muted); }
    .preview-toggle button.active { background:var(--blue); color:#fff; border-color:var(--blue); font-weight:700; }
    #preview-area { white-space: pre-wrap; line-height: 1.75; font-size: 14px; font-family: 'Sarabun', sans-serif; }

    /* ─── THEMES ─── */
    :root {
      --bg:      #1e2128;
      --sidebar: #21252b;
      --card:    #282c34;
      --border:  #3a3f4b;
      --text:    #abb2bf;
      --muted:   #5c6370;
      --blue:    #61afef;
      --green:   #98c379;
      --purple:  #c678dd;
      --yellow:  #e5c07b;
      --red:     #e06c75;
      --cyan:    #56b6c2;
    }
    body.theme-light {
      --bg:      #f5f6fa;
      --sidebar: #ffffff;
      --card:    #ffffff;
      --border:  #dde1e9;
      --text:    #1a202c;
      --muted:   #6b7280;
      --blue:    #2563eb;
      --green:   #16a34a;
      --purple:  #7c3aed;
      --yellow:  #f59e0b;
      --red:     #dc2626;
      --cyan:    #0891b2;
    }
    body.theme-light .inp { background:#ffffff; color:#1a202c; border-color:#dde1e9; }
    body.theme-light .card { background:#ffffff; border-color:#dde1e9; }
    body.theme-light .btn-gray { background:#e5e7eb; color:#374151; }
    body.theme-light .log-line { color:#374151; }
    body.theme-light .log-line.err { color:#dc2626; }
    body.theme-light .log-line.ok  { color:#16a34a; }
    body.theme-light .sec-item { color:#374151; }
    body.theme-light .sec-item:hover { background:#f3f4f6; }
    body.theme-light #log { background:#f9fafb; }
    body.theme-light .tab { color:#374151; }
    body.theme-light .tab.active { background:#2563eb !important; color:#fff !important; }
    body.theme-light .wz-btn.active .wz-circle { background:#2563eb; }
    body.theme-light .btn-yellow { color:#fff; }
    body.theme-ocean {
      --bg:      #0d1117;
      --sidebar: #161b22;
      --card:    #1c2128;
      --border:  #30363d;
      --text:    #c9d1d9;
      --muted:   #484f58;
      --blue:    #58a6ff;
      --green:   #3fb950;
      --purple:  #d2a8ff;
      --yellow:  #e3b341;
      --red:     #f85149;
      --cyan:    #76e3ea;
    }
    body.theme-forest {
      --bg:      #1a1f16;
      --sidebar: #1e2619;
      --card:    #252d1e;
      --border:  #3a4830;
      --text:    #b8c9a3;
      --muted:   #6b7c5a;
      --blue:    #7ec8a4;
      --green:   #a3d977;
      --purple:  #c678dd;
      --yellow:  #e5c07b;
      --red:     #e06c75;
      --cyan:    #56b6c2;
    }
    body { background: var(--bg); color: var(--text); }
    .card { background: var(--card); border-color: var(--border); }
    .inp  { background: var(--bg);   border-color: var(--border); color: var(--text); }
    .inp:focus { border-color: var(--blue); }
    .btn-blue   { background: var(--blue);   color: #fff; }
    .btn-green  { background: var(--green);  color: #fff; }
    .btn-purple { background: var(--purple); color: #fff; }
    .btn-yellow { background: var(--yellow); color: #1e2128; }
    .btn-gray   { background: var(--border); color: var(--text); }
    .tab.active { background: var(--blue) !important; color: #fff !important; }
    .ksa-td     { border-bottom: 1px solid var(--border); }
    .badge { border-color: transparent; }
    .log-line.err { color: var(--red); }
    .log-line.ok  { color: var(--green); }
    .log-line.inf { color: var(--muted); }
    .doc-pill.active { background: var(--green); color: #fff; border-color: var(--green); }
    .doc-pill { border-color: var(--border); background: var(--card); color: var(--text); }
    .spin { border-color: var(--border); border-top-color: var(--blue); }

    .sec-item { display:flex; align-items:center; gap:7px; padding:9px 12px; border-radius:5px; cursor:pointer; font-size:15px; color:var(--text); transition:background .15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .sec-item:hover { background:var(--border); font-size:15px; }
    .sec-item.active { background:var(--blue)22; color:var(--blue); font-weight:600; }
    .sec-item.done { color:var(--green); }
    .sec-dot { width:8px; height:8px; border-radius:50%; background:var(--border); flex-shrink:0; }
    .sec-dot.done { background:var(--green); }
    .sec-dot.active { background:var(--blue); }

    .md-preview { font-family:'Sarabun',sans-serif; font-size:16px; line-height:1.8; color:var(--text); }
    .md-preview h2 { font-size:18px; font-weight:700; color:var(--blue); margin:16px 0 6px; border-left:3px solid var(--blue); padding-left:8px; }
    .md-preview h3 { font-size:16px; font-weight:700; color:var(--yellow); margin:12px 0 4px; }
    .md-preview strong { font-weight:700; color:var(--text); }
    .md-preview p { margin:6px 0; }
    .md-preview ul, .md-preview ol { padding-left:20px; margin:6px 0; }
    .md-preview li { margin:3px 0; }
    .md-preview hr { border:none; border-top:1px solid var(--border); margin:12px 0; }
    .md-preview table { border-collapse:collapse; width:100%; margin:8px 0; font-size:13px; }
    .md-preview th { background:var(--border); padding:6px 8px; text-align:left; font-weight:600; }
    .md-preview td { border:1px solid var(--border); padding:5px 8px; vertical-align:top; }
    .md-preview blockquote { border-left:3px solid var(--border); padding-left:10px; color:var(--muted); margin:6px 0; }
    .preview-toggle { display:flex; gap:4px; margin-bottom:8px; }
    .preview-toggle button { padding:3px 10px; border-radius:4px; font-size:11px; border:1px solid var(--border); cursor:pointer; background:transparent; color:var(--muted); }
    .preview-toggle button.active { background:var(--blue); color:#fff; border-color:var(--blue); font-weight:700; }
    #preview-area { background: var(--bg); color: var(--text); }

    /* ─── UX IMPROVEMENTS ─── */
    /* Phase header pill */
    .phase-hdr { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; letter-spacing:.5px; margin-bottom:16px; padding:5px 14px 5px 10px; border-radius:20px; background:var(--card); border:1px solid var(--border); }
    .phase-hdr .ph-num { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; flex-shrink:0; }

    /* Progress stepper (inner — Phase 2 AI processing steps) */
    .stepper { display:flex; align-items:center; margin-bottom:18px; }
    .st-step { display:flex; align-items:center; gap:5px; }
    .st-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border:2px solid var(--border); color:var(--muted); flex-shrink:0; transition:all .2s; }
    .st-num.active { border-color:var(--blue); color:var(--blue); background:color-mix(in srgb, var(--blue) 12%, transparent); }
    .st-num.done { border-color:var(--green); color:var(--green); background:color-mix(in srgb, var(--green) 12%, transparent); }
    .st-label { font-size:12px; color:var(--muted); white-space:nowrap; }
    .st-label.active { color:var(--text); font-weight:600; }
    .st-line { flex:1; height:2px; background:var(--border); margin:0 8px; min-width:20px; border-radius:1px; }
    .st-line.done { background:var(--green); }
    /* Wizard nav */
    .wz-btn { display:flex;align-items:center;gap:8px;padding:5px 10px;border:none;background:transparent;cursor:pointer;border-radius:8px;transition:.15s; }
    .wz-btn:hover { background:color-mix(in srgb, var(--text) 7%, transparent); }
    .wz-circle { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:var(--border);color:var(--muted);transition:.2s;flex-shrink:0; }
    .wz-lbl { font-size:15px;color:var(--muted);white-space:nowrap;transition:.2s; }
    .wz-btn.active .wz-circle { background:var(--purple);color:#fff; }
    .wz-btn.active .wz-lbl { color:var(--text);font-weight:600; }
    .wz-btn.done .wz-circle { background:var(--green);color:#fff; }
    .wz-btn.done .wz-lbl { color:var(--green); }
    .wz-conn { width:32px;height:2px;background:var(--border);border-radius:1px;transition:.3s;flex-shrink:0; }
    .wz-conn.done { background:var(--green); }
    .wz-back { display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:12px;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:6px;cursor:pointer;margin-bottom:12px;transition:.15s; }
    .wz-back:hover { color:var(--text);border-color:var(--text); }

    /* Drop zone hover */
    #drop-zone { transition:border-color .2s, background .2s; }
    #drop-zone:hover { border-color:var(--blue) !important; background:color-mix(in srgb, var(--blue) 6%, transparent) !important; }
    #drop-zone.dragover { border-color:var(--blue) !important; background:color-mix(in srgb, var(--blue) 10%, transparent) !important; border-style:solid !important; }

    /* Export button glow */

    /* Tab active underline animation */
    .tab { position:relative; transition:color .15s; }

    /* ── Readability global fixes ── */
    .card { font-size: 15px; }
    #main { font-size: 15px; }
    .ar-step-label { font-size: 14px !important; }

    /* ── Guide Bar ── */
    .guide-bar { background: color-mix(in srgb, var(--blue) 6%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; }
    .guide-steps { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
    .guide-step { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 160px; }
    .guide-step b { font-size: 14px; color: var(--text); }
    .guide-step span { font-size: 13px; color: var(--muted); line-height: 1.5; }
    .guide-num { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
    .guide-arrow { font-size: 18px; color: var(--muted); padding-top: 4px; flex-shrink: 0; }
    @media (max-width: 600px) { .guide-arrow { display: none; } }

    /* ── Guide bar toggle ── */
    .guide-bar { position: relative; }
    .guide-toggle-btn { position:absolute; top:10px; right:12px; background:transparent; border:1px solid color-mix(in srgb,var(--blue) 30%,transparent); color:var(--blue); border-radius:6px; padding:2px 10px; font-size:12px; cursor:pointer; font-family:'Sarabun',sans-serif; transition:.15s; }
    .guide-toggle-btn:hover { background:color-mix(in srgb,var(--blue) 10%,transparent); }
    .guide-bar.guide-collapsed .guide-steps { display:none !important; }
    .guide-bar.guide-collapsed { padding-bottom: 10px; }

    /* ── Guide step progress states ── */
    .guide-step.gs-done .guide-num  { background: var(--green) !important; }
    .guide-step.gs-done b           { color: var(--green) !important; }
    .guide-step.gs-done span        { color: var(--green) !important; opacity: .85; }
    .guide-step.gs-active .guide-num { background: var(--blue) !important; box-shadow: 0 0 0 4px color-mix(in srgb,var(--blue) 25%,transparent); animation: guide-pulse 2s ease-in-out infinite; }
    .guide-step.gs-active b          { color: var(--text) !important; }
    .guide-step.gs-pending .guide-num { background: var(--border) !important; color: var(--muted) !important; }
    .guide-step.gs-pending b          { color: var(--muted) !important; }
    .guide-step.gs-pending span       { opacity: .45; }
    .guide-arrow.gs-done-arrow        { color: var(--green) !important; font-weight: 700; }
    @keyframes guide-pulse { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 35%,transparent); } 50% { box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 0%,transparent); } }

    /* ── Typography normalization ── */
    label { font-size: 16px !important; }
    .small-label { font-size: 13px; }
    details summary { font-size: 14px !important; }

    /* ── Primary CTA pulse ── */
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 0 0 rgba(152,195,121,.4); }
      50%       { box-shadow: 0 0 0 6px rgba(152,195,121,0); }
    }
    .btn-primary-pulse { animation: pulse-glow 2.5s ease-in-out infinite; }

    /* ── Wizard nav ── */
    .wz-btn { padding: 8px 12px !important; }
    .wz-circle { width: 34px !important; height: 34px !important; font-size: 16px !important; }
    .wz-lbl { font-size: 16px !important; }
    .wz-subtitle { font-size: 12px; color: var(--muted); white-space: nowrap; }
    .wz-conn { width: 36px !important; }

    /* ── Course empty state ── */
    .empty-state { text-align:center; padding: 40px 20px; color: var(--muted); }
    .empty-state .empty-icon { font-size: 56px; margin-bottom: 16px; }
    .empty-state h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
    .empty-state p { font-size: 15px; line-height: 1.7; margin-bottom: 20px; }

    /* ── Phase 3 section cards ── */
    #p3-section-items, #p3-doc-items { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 10px !important; }
    .sec-item { padding: 12px 14px !important; font-size: 16px !important; border-radius: 8px !important; border: 1px solid var(--border); }
    .sec-item:hover { background: color-mix(in srgb, var(--blue) 8%, transparent) !important; }
    .sec-item.done { background: color-mix(in srgb, var(--green) 6%, transparent) !important; border-color: color-mix(in srgb, var(--green) 30%, transparent) !important; }
    .sec-item.active { border-color: var(--blue) !important; }
    .sec-dot { width: 10px !important; height: 10px !important; }

    /* ── Section label in Phase 3 cards ── */
    .sec-status-text { font-size: 12px; color: var(--muted); margin-top: 4px; display: block; }

    /* ── Settings font boost ── */
    #pnl-cfg label { font-size: 14px !important; }
    #pnl-cfg .inp { font-size: 16px !important; }

    /* ── Coverage meter ── */
    #p3-cov-label { font-size: 18px !important; }
    #p3-coverage-wrap span[style*="font-size:13px"] { font-size: 16px !important; }

    /* ── Auto run button in nav ── */
    #btn-auto-run { padding: 6px 16px !important; font-size: 14px !important; border-radius: 8px !important; }

    /* ── wz-back button ── */
    .wz-back { font-size: 14px !important; padding: 6px 14px !important; margin-bottom: 16px !important; }

    /* ── Guide bar text ── */
    .guide-step b { font-size: 15px !important; }
    .guide-step span { font-size: 14px !important; }
    .guide-num { font-size: 15px !important; }

    /* ── Phase header ── */
    .phase-hdr { font-size: 17px !important; padding: 7px 18px 7px 12px !important; margin-bottom: 20px !important; }
    .phase-hdr .ph-num { width: 26px !important; height: 26px !important; font-size: 14px !important; }