/* ── Variables ───────────────────────────────────────────────── */
:root {
  --bg:         #f3f5f9;
  --bg2:        #eaecf2;
  --surface:    rgba(255,255,255,0.60);
  --surface2:   rgba(255,255,255,0.75);
  --surface3:   rgba(255,255,255,0.90);
  --border:     rgba(180,200,230,0.55);
  --border2:    rgba(140,170,210,0.70);
  --accent:     #0078d4;
  --accent2:    #106ebe;
  --accent-dim: rgba(0,120,212,0.08);
  --accent-glow:rgba(0,120,212,0.18);
  --ms-red:     #f25022;
  --ms-green:   #7fba00;
  --ms-blue:    #00a4ef;
  --ms-yellow:  #ffb900;
  --l1:         #107c10;
  --l2:         #ca5010;
  --l1-dim:     rgba(16,124,16,0.08);
  --l2-dim:     rgba(202,80,16,0.08);
  --text:       #1a1a2e;
  --text2:      #5a6478;
  --text3:      #9aa3b2;
  --red:        #d13438;
  --head:       'Segoe UI', system-ui, sans-serif;
  --mono:       'JetBrains Mono', 'Cascadia Code', monospace;
  --r:          6px;
  --rl:         12px;
  --transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: #dce8f8;
  color: var(--text);
  font-family: var(--head);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Page System ─────────────────────────────────────────────── */
.page { display: none; min-height: 100vh; }
.page.active { display: flex; flex-direction: column; }

/* ── Microsoft Header ────────────────────────────────────────── */
.ms-header {
  background: rgba(240,246,255,0.75);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(180,210,240,0.50);
  box-shadow: 0 1px 0 rgba(255,255,255,0.60) inset;
  padding: 0 2rem;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.ms-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ms-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: opacity 0.18s;
}
.ms-logo:hover { opacity: 0.8; }
.ms-logo-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}
.ms-logo-product {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.ms-logo-org {
  display: block;
  font-size: 0.6rem;
  color: var(--text2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ms-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ms-theme-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(180,210,240,0.60);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: var(--transition);
}
.ms-theme-btn:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.80);
}

/* ── Tier Toggle ─────────────────────────────────────────────── */
.tier-toggle {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.50);
  border: 1px solid rgba(180,210,240,0.55);
  border-radius: var(--r);
  padding: 3px;
  backdrop-filter: blur(8px);
}
.tier-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 14px;
  border-radius: 4px;
  font-family: var(--head);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2);
  transition: var(--transition);
}
.tier-btn:hover { color: var(--text); background: var(--surface2); }
.tier-btn.active { background: var(--accent); color: #fff; }

/* ── Landing Page ────────────────────────────────────────────── */
.page-landing {
  background: transparent;
  position: relative;
  overflow: hidden;
}

.page-landing::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(180,210,255,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(200,180,255,0.30) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 60% 30%, rgba(160,230,255,0.25) 0%, transparent 50%);
  background-color: #dce8f8;
  pointer-events: none;
  z-index: 0;
}

.landing-main {
  flex: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ── Landing Hero ────────────────────────────────────────────── */
.landing-hero {
  text-align: center;
  padding: 1rem 0 0.5rem;
}
.landing-hero-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(0,120,212,0.25);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 1.2rem;
}
.landing-hero-title {
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #0f1c2e;
  margin-bottom: 1.2rem;
}
.landing-hero-title strong {
  font-weight: 700;
  color: #fff;
}
.landing-hero-sub {
  font-size: 1rem;
  color: var(--text2);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Domain Grid ─────────────────────────────────────────────── */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.domain-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(180,210,240,0.55);
  border-radius: 16px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  overflow: hidden;
  outline: none;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 2px 12px rgba(100,150,220,0.08), 0 1px 0 rgba(255,255,255,0.80) inset;
}
.domain-card:hover {
  border-color: rgba(0,120,212,0.45);
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,120,212,0.16), 0 1px 0 rgba(255,255,255,0.90) inset;
  background: rgba(255,255,255,0.75);
}
.domain-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Coloured top accent bar per domain */
.domain-card-bar {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}
.domain-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.domain-card-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.domain-card-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.domain-card-desc {
  font-size: 0.78rem;
  color: var(--text2);
  line-height: 1.6;
}
.domain-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.domain-card-count {
  font-size: 0.68rem;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.domain-card-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  font-size: 0.8rem;
  transition: var(--transition);
}
.domain-card:hover .domain-card-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Per-domain colour theming */
.domain-card[data-domain="networking"]         .domain-card-bar { background: linear-gradient(90deg, #0078d4, #00a4ef); }
.domain-card[data-domain="directory_services"] .domain-card-bar { background: linear-gradient(90deg, #7719aa, #a855f7); }
.domain-card[data-domain="performance"]        .domain-card-bar { background: linear-gradient(90deg, #d83b01, #f97316); }
.domain-card[data-domain="user_experience"]    .domain-card-bar { background: linear-gradient(90deg, #107c10, #22c55e); }
.domain-card[data-domain="device_deployment"]  .domain-card-bar { background: linear-gradient(90deg, #ca5010, #ffb900); }
.domain-card[data-domain="storage_ha"]         .domain-card-bar { background: linear-gradient(90deg, #0078d4, #00b7c3); }
.domain-card[data-domain="collaboration"]      .domain-card-bar { background: linear-gradient(90deg, #464eb8, #6264a7); }

.domain-card[data-domain="networking"]         .domain-card-icon-wrap { background: rgba(0,120,212,0.12); }
.domain-card[data-domain="directory_services"] .domain-card-icon-wrap { background: rgba(168,85,247,0.12); }
.domain-card[data-domain="performance"]        .domain-card-icon-wrap { background: rgba(249,115,22,0.12); }
.domain-card[data-domain="user_experience"]    .domain-card-icon-wrap { background: rgba(34,197,94,0.12); }
.domain-card[data-domain="device_deployment"]  .domain-card-icon-wrap { background: rgba(255,185,0,0.12); }
.domain-card[data-domain="storage_ha"]         .domain-card-icon-wrap { background: rgba(0,183,195,0.12); }
.domain-card[data-domain="collaboration"]      .domain-card-icon-wrap { background: rgba(98,100,167,0.12); }

/* ── Landing Footer ──────────────────────────────────────────── */
.landing-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--text3);
  letter-spacing: 0.04em;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ── Domain Page ─────────────────────────────────────────────── */
.page-domain { background: #dce8f8; }

/* Domain hero bar */
.domain-hero-bar {
  background: rgba(240,246,255,0.70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(180,210,240,0.50);
  padding: 0 2rem;
  flex-shrink: 0;
}
.domain-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.domain-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 5px 12px;
  cursor: pointer;
  font-family: var(--head);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2);
  transition: var(--transition);
  white-space: nowrap;
}
.domain-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.domain-hero-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}
.domain-hero-icon {
  font-size: 1.2rem;
}
.domain-hero-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}
.domain-hero-bar-strip {
  height: 3px;
  border-radius: 2px;
  width: 40px;
}

/* Domain main content */
.domain-main {
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* ── Tech Section ────────────────────────────────────────────── */
.tech-section { display: flex; flex-direction: column; gap: 10px; }
.tech-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.tech-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 18px 12px;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.tech-btn:hover {
  border-color: var(--border2);
  background: var(--surface2);
  transform: translateY(-2px);
}
.tech-btn.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 0 1px rgba(0,120,212,0.2);
}
.tech-icon { font-size: 1.4rem; }
.tech-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text2);
  letter-spacing: 0.03em;
  line-height: 1.3;
}
.tech-btn.active .tech-label { color: var(--accent); }

/* ── Question Type Tabs ──────────────────────────────────────── */
.qtype-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.qtype-tab {
  flex: 1;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 12px 14px;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}
.qtype-tab:hover { background: var(--surface2); border-color: var(--border2); }
.qtype-tab.active { border-color: var(--accent); background: var(--accent-dim); }
.qtype-icon { font-size: 1rem; }
.qtype-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.qtype-desc { font-size: 0.65rem; color: var(--text2); }
.qtype-tab.active .qtype-desc { color: rgba(0,120,212,0.8); }

/* ── Output Area ─────────────────────────────────────────────── */
.output-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  min-height: 200px;
  overflow: hidden;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 10px;
  color: var(--text3);
}
.empty-icon { font-size: 2rem; opacity: 0.2; }
.empty-title { font-size: 1rem; font-weight: 700; }
.empty-desc { font-size: 0.78rem; text-align: center; line-height: 1.6; }

.output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.output-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.meta-tag {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: 0.03em;
}
.meta-tag.tier-l1  { border-color: rgba(34,197,94,.3);  color: var(--l1);    background: var(--l1-dim); }
.meta-tag.tier-l2  { border-color: rgba(245,158,11,.3); color: var(--l2);    background: var(--l2-dim); }
.meta-tag.tier-both{ border-color: rgba(0,120,212,.3);  color: var(--accent); background: var(--accent-dim); }
.output-actions { display: flex; gap: 6px; align-items: center; }

/* Action buttons */
.action-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--head);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text2);
  transition: var(--transition);
  white-space: nowrap;
}
.action-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Export dropdown */
.export-dropdown { position: relative; }
.export-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 50;
  min-width: 150px;
}
.export-menu.open { display: block; }
.export-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 14px;
  font-family: var(--head);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text2);
  transition: background 0.12s;
}
.export-item:hover { background: var(--surface3); color: var(--accent); }

/* Search bar */
.search-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.search-icon { font-size: 0.85rem; color: var(--text3); flex-shrink: 0; }
.search-input {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
  outline: none;
}
.search-input::placeholder { color: var(--text3); }
.search-count { font-size: 0.68rem; color: var(--text2); font-weight: 600; white-space: nowrap; }
.search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  font-size: 0.8rem;
  padding: 2px 5px;
  border-radius: 4px;
  transition: color 0.13s;
}
.search-clear:hover { color: var(--red); }
.q-hidden { display: none; }
.q-highlight { background: rgba(0,120,212,0.2); border-radius: 2px; color: #60b0ff; }

/* Progress bar */
.progress-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.progress-label { font-size: 0.68rem; font-weight: 700; color: var(--text2); white-space: nowrap; }
.progress-track { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--l1); border-radius: 2px; transition: width 0.25s; }

/* ── Question Sections ───────────────────────────────────────── */
.question-section { padding: 0; }
.question-section + .question-section { border-top: 1px solid var(--border); }

.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.label-icon { font-size: 0.9rem; }
.label-tier {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 4px;
}
.label-tier.l1 { background: var(--l1-dim); color: var(--l1); border: 1px solid rgba(34,197,94,.3); }
.label-tier.l2 { background: var(--l2-dim); color: var(--l2); border: 1px solid rgba(245,158,11,.3); }
.label-type { font-size: 0.8rem; font-weight: 700; color: var(--text); }
.label-desc { font-size: 0.67rem; color: var(--text2); }
.label-count { font-size: 0.65rem; color: var(--text3); margin-left: auto; }

.question-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.question-item:hover { background: var(--surface2); }
.question-item:last-child { border-bottom: none; }
.q-num { font-size: 0.65rem; font-weight: 700; color: var(--text3); min-width: 20px; padding-top: 2px; font-family: var(--mono); }
.q-text { flex: 1; font-size: 0.82rem; color: var(--text); line-height: 1.65; font-family: var(--mono); }
.q-copy {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--text3);
  font-size: 0.75rem;
  transition: var(--transition);
  opacity: 0;
  flex-shrink: 0;
}
.question-item:hover .q-copy { opacity: 1; }
.q-copy:hover { border-color: var(--accent); color: var(--accent); }

/* Checkboxes */
.q-check {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.5px solid var(--border2);
  border-radius: 3px;
  background: var(--surface);
  cursor: pointer;
  transition: var(--transition);
  margin-top: 3px;
}
.q-check:checked {
  background: var(--l1);
  border-color: var(--l1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.question-item.checked { background: rgba(34,197,94,0.05); }
.question-item.checked .q-text {
  color: var(--text2);
  text-decoration: line-through;
  text-decoration-color: rgba(34,197,94,0.4);
}

/* ── Playbooks ───────────────────────────────────────────────── */
.pb-symptom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  padding: 18px;
}
.pb-symptom-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}
.pb-symptom-card:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-2px);
}
.pb-symptom-title { font-size: 0.82rem; font-weight: 700; color: var(--text); line-height: 1.4; }
.pb-symptom-meta { font-size: 0.65rem; color: var(--text2); letter-spacing: 0.04em; }
.pb-sev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pb-sev-dot.pb-sev-high   { background: var(--red); }
.pb-sev-dot.pb-sev-medium { background: var(--l2); }
.pb-sev-dot.pb-sev-low    { background: var(--l1); }

.pb-back {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-wrap: wrap;
}
.pb-title { font-size: 0.88rem; font-weight: 700; color: var(--text); flex: 1; }
.pb-severity {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 4px;
}
.pb-severity.pb-sev-high   { background: rgba(239,68,68,.12);  color: var(--red); border: 1px solid rgba(239,68,68,.3); }
.pb-severity.pb-sev-medium { background: var(--l2-dim); color: var(--l2); border: 1px solid rgba(245,158,11,.3); }
.pb-severity.pb-sev-low    { background: var(--l1-dim); color: var(--l1); border: 1px solid rgba(34,197,94,.3); }

.pb-phase { border-top: 1px solid var(--border); }
.pb-phase:first-of-type { border-top: none; }
.pb-phase-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.pb-phase-icon { font-size: 1rem; }
.pb-phase-name { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.pb-phase-count { font-size: 0.65rem; color: var(--text3); margin-left: auto; }

.pb-step-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pb-action {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #60b0ff;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 9px;
  white-space: pre-wrap;
  word-break: break-all;
  display: block;
}
.pb-expect { font-size: 0.72rem; color: var(--text2); line-height: 1.5; padding-left: 2px; }
.pb-empty { padding: 3rem 2rem; text-align: center; color: var(--text3); font-size: 0.82rem; }

/* ── Loading State ───────────────────────────────────────────── */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 2rem;
  color: var(--text2);
}
.loading-spinner {
  font-size: 1.4rem;
  animation: spin 1s linear infinite;
  color: var(--accent);
}
.loading-text { font-size: 0.82rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Domain Footer ───────────────────────────────────────────── */
.domain-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 1rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  font-size: 0.68rem;
  color: var(--text3);
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border);
}
.footer-shortcuts { color: var(--text3); }

/* ── AI Section ──────────────────────────────────────────────── */
.ai-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  overflow: hidden;
}
.ai-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(0,120,212,.04), transparent);
}
.ai-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.ai-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(0,120,212,.3);
  border-radius: 4px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.ai-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ai-desc  { font-size: 0.78rem; color: var(--text2); line-height: 1.65; }

.ai-provider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.ai-provider-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); white-space: nowrap; }
.ai-provider-toggle {
  display: flex;
  gap: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 3px;
}
.ai-provider-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 4px;
  font-family: var(--head);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text2);
  transition: var(--transition);
  white-space: nowrap;
}
.ai-provider-btn:hover { color: var(--text); background: var(--surface2); }
.ai-provider-btn.active { background: var(--accent); color: #fff; }
.ai-provider-status { font-size: 0.72rem; color: var(--text2); }

.ai-key-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.ai-key-input {
  flex: 1;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 7px 11px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
  transition: border 0.18s;
}
.ai-key-input:focus { outline: none; border-color: var(--accent); }
.ai-key-input::placeholder { color: var(--text3); }

.ai-input-row { display: flex; gap: 12px; padding: 16px 24px; flex-wrap: wrap; }
.ai-input {
  flex: 1;
  min-width: 240px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
  resize: vertical;
  min-height: 88px;
  transition: border 0.18s;
}
.ai-input:focus { outline: none; border-color: var(--accent); }
.ai-input::placeholder { color: var(--text3); }
.ai-btn {
  background: var(--accent);
  border: none;
  border-radius: var(--r);
  padding: 12px 24px;
  cursor: pointer;
  font-family: var(--head);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  align-self: flex-start;
  transition: var(--transition);
  white-space: nowrap;
}
.ai-btn:hover { background: var(--accent2); }
.ai-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.spinner { display: inline-block; animation: spin 1s linear infinite; }

.ai-output {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: 560px;
  overflow-y: auto;
  padding: 14px 18px;
  gap: 0;
}
.ai-bubble {
  max-width: 88%;
  margin-bottom: 10px;
  padding: 11px 14px;
  border-radius: var(--rl);
  font-size: 0.82rem;
  line-height: 1.7;
}
.ai-bubble-user      { align-self: flex-end;  background: var(--accent-dim); border: 1px solid rgba(0,120,212,.25); color: var(--text); }
.ai-bubble-assistant { align-self: flex-start; background: var(--surface2);   border: 1px solid var(--border2);      color: var(--text); }
.ai-bubble-error     { align-self: flex-start; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);  color: var(--red); }
.ai-bubble-text { font-family: var(--mono); font-size: 0.82rem; line-height: 1.7; }
.ai-bubble-text .md-h1 { font-family: var(--head); font-size: 1rem; font-weight: 700; color: #60b0ff; margin: .8rem 0 .3rem; }
.ai-bubble-text .md-h2 { font-family: var(--head); font-size: .9rem; font-weight: 700; color: var(--text); margin: .6rem 0 .2rem; }
.ai-bubble-text .md-h3 { font-family: var(--head); font-size: .82rem; font-weight: 700; color: var(--text2); margin: .5rem 0 .2rem; }
.ai-bubble-text .md-p  { margin: .2rem 0; }
.ai-bubble-text .md-ul { margin: .2rem 0 .2rem 1.2rem; padding: 0; list-style: disc; }
.ai-bubble-text .md-ul li { margin: .12rem 0; }
.ai-bubble-text .md-inline { background: var(--surface3); border: 1px solid var(--border2); border-radius: 3px; padding: 1px 5px; font-size: .76rem; color: #60b0ff; }
.ai-bubble-text .md-code { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 9px 12px; margin: .4rem 0; font-size: .75rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text); overflow-x: auto; }
.ai-bubble-text strong { color: var(--text); font-weight: 700; }
.ai-bubble-text em { color: var(--text2); font-style: italic; }

/* ── Toast ───────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  background: var(--accent);
  color: #fff;
  font-family: var(--head);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--r);
  transform: translateY(16px);
  opacity: 0;
  transition: all 0.25s;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,120,212,0.35);
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent2); }

/* ── Case Notes Tab ──────────────────────────────────────────── */
.cn-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 14px 10px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: -3px 0 18px rgba(0,0,0,0.25);
}
.cn-tab:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  box-shadow: -3px 0 22px rgba(0,120,212,0.25);
}
.cn-tab-icon { font-size: 1.1rem; }
.cn-tab-label {
  font-family: var(--head);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}
.cn-tab:hover .cn-tab-label { color: var(--accent); }

/* ── Case Notes Overlay ──────────────────────────────────────── */
.cn-overlay {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.cn-overlay.open { opacity: 1; pointer-events: all; }

/* ── Case Notes Panel ────────────────────────────────────────── */
.cn-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(680px, 96vw);
  z-index: 300;
  background: var(--surface);
  border-left: 1px solid var(--border2);
  box-shadow: -8px 0 48px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.cn-panel.open { transform: translateX(0); }

.cn-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  gap: 12px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cn-panel-title { display: flex; align-items: center; gap: 10px; }
.cn-panel-icon { font-size: 1.3rem; }
.cn-panel-name { font-size: 0.92rem; font-weight: 700; color: var(--text); }
.cn-panel-sub { font-size: 0.6rem; color: var(--text2); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.cn-header-actions { display: flex; align-items: center; gap: 8px; }
.cn-action-btn {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 5px 12px;
  cursor: pointer;
  font-family: var(--head);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text2);
  transition: var(--transition);
  white-space: nowrap;
}
.cn-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.cn-saved-indicator { font-size: 0.65rem; color: var(--l1); opacity: 0; transition: opacity 0.4s; }
.cn-saved-indicator.show { opacity: 1; }
.cn-close {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r);
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--text2);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.cn-close:hover { border-color: var(--red); color: var(--red); }

.cn-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 0; }
.cn-meta-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; margin-bottom: 4px; }
.cn-meta-field { display: flex; flex-direction: column; gap: 4px; }
.cn-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); }
.cn-input {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 10px;
  font-family: var(--head);
  font-size: 0.78rem;
  color: var(--text);
  transition: border 0.15s;
  color-scheme: dark;
}
.cn-input:focus { outline: none; border-color: var(--accent); }
.cn-input::placeholder { color: var(--text3); }
.cn-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b82a0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
input[type="date"].cn-input { background: var(--surface2); border-color: var(--accent2); }
input[type="date"].cn-input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; cursor: pointer; }

.cn-divider { height: 1px; background: var(--border); margin: 14px 0; }
.cn-sections { display: flex; flex-direction: column; gap: 12px; }
.cn-section { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; }
.cn-section-header { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; padding: 9px 13px; background: var(--bg2); border-bottom: 1px solid var(--border); }
.cn-section-icon { font-size: 0.9rem; }
.cn-section-title { font-size: 0.8rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.cn-section-hint { font-size: 0.65rem; color: var(--text2); line-height: 1.5; }
.cn-textarea { width: 100%; background: transparent; border: none; padding: 11px 13px; font-family: var(--mono); font-size: 0.76rem; color: var(--text); line-height: 1.65; resize: vertical; transition: background 0.12s; }
.cn-textarea:focus { outline: none; background: rgba(0,120,212,0.03); }
.cn-textarea::placeholder { color: var(--text3); font-size: 0.72rem; }

.cn-action-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cn-action-col { display: flex; flex-direction: column; }
.cn-action-col:first-child { border-right: 1px solid var(--border); }
.cn-action-col-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 13px; border-bottom: 1px solid var(--border); }
.pending-customer { color: var(--l2); background: var(--l2-dim); }
.pending-ms { color: var(--accent); background: var(--accent-dim); }

.cn-ref-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 12px 13px; }

.cn-preview-wrap { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; }
.cn-preview-toggle { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--bg2); border: none; cursor: pointer; font-family: var(--head); font-size: 0.78rem; font-weight: 700; color: var(--text2); text-align: left; transition: color 0.15s; }
.cn-preview-toggle:hover { color: var(--accent); }
.cn-preview { background: var(--bg2); border: none; padding: 14px; font-family: var(--mono); font-size: 0.73rem; color: var(--text); line-height: 1.7; white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow-y: auto; }

/* ── Glass Theme (DEFAULT) ──────────────────────────────────── */
body, body.theme-glass {
  --bg:         #f3f5f9;
  --bg2:        #eaecf2;
  --surface:    #ffffff;
  --surface2:   #f8f9fc;
  --surface3:   #f0f2f7;
  --border:     #dde1eb;
  --border2:    #c8cdd9;
  --accent:     #0078d4;
  --accent2:    #106ebe;
  --accent-dim: rgba(0,120,212,0.08);
  --accent-glow:rgba(0,120,212,0.18);
  --l1:         #107c10;
  --l2:         #ca5010;
  --l1-dim:     rgba(16,124,16,0.08);
  --l2-dim:     rgba(202,80,16,0.08);
  --text:       #1a1a2e;
  --text2:      #5a6478;
  --text3:      #9aa3b2;
  --red:        #d13438;
}

body.theme-glass .ms-header {
  background: rgba(255,255,255,0.95);
  border-bottom-color: var(--border);
}
body.theme-glass .page-landing::before {
  background: radial-gradient(ellipse, rgba(0,120,212,0.06) 0%, transparent 70%);
}
body.theme-glass .domain-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.theme-glass .domain-card:hover {
  box-shadow: 0 8px 32px rgba(0,120,212,0.14);
}
body.theme-glass .q-highlight { background: rgba(0,120,212,0.12); color: var(--accent); }
body.theme-glass .pb-action { color: var(--accent2); }
body.theme-glass .ai-bubble-text .md-h1 { color: var(--accent); }
body.theme-glass .ai-bubble-text .md-inline { color: var(--accent); }
body.theme-glass input[type="date"].cn-input::-webkit-calendar-picker-indicator { filter: none; opacity: 0.6; }
body.theme-glass ::-webkit-scrollbar-track { background: var(--bg2); }
body.theme-glass ::-webkit-scrollbar-thumb { background: var(--border2); }

/* ── Dark Theme (TOGGLE) ─────────────────────────────────────── */
body.theme-dark {
  --bg:         #050810;
  --bg2:        #0a0e1a;
  --surface:    #0f1520;
  --surface2:   #141c2e;
  --surface3:   #1a2438;
  --border:     #1e2a3e;
  --border2:    #243248;
  --accent:     #00d4ff;
  --accent2:    #0099cc;
  --accent-dim: rgba(0,212,255,0.10);
  --accent-glow:rgba(0,212,255,0.25);
  --l1:         #22c55e;
  --l2:         #f59e0b;
  --l1-dim:     rgba(34,197,94,0.12);
  --l2-dim:     rgba(245,158,11,0.12);
  --text:       #dce6f5;
  --text2:      #6b7f9e;
  --text3:      #374357;
  --red:        #ef4444;
}
body.theme-dark { background: #050810; color: #dce6f5; }
body.theme-dark .ms-header {
  background: rgba(5,8,16,0.95);
  backdrop-filter: blur(14px);
  border-bottom-color: #1e2a3e;
  box-shadow: none;
}
body.theme-dark .ms-logo-product { color: #dce6f5; }
body.theme-dark .ms-logo-org { color: #6b7f9e; }
body.theme-dark .ms-theme-btn { background: #141c2e; border-color: #243248; }
body.theme-dark .ms-theme-btn:hover { border-color: #00d4ff; background: rgba(0,212,255,0.10); }
body.theme-dark .tier-toggle { background: #0f1520; border-color: #1e2a3e; }
body.theme-dark .tier-btn { color: #6b7f9e; }
body.theme-dark .tier-btn.active { background: #00d4ff; color: #000; }
body.theme-dark .page-landing { background: #050810; }
body.theme-dark .page-landing::before {
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(0,212,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(0,150,255,0.05) 0%, transparent 55%);
  background-color: #050810;
}
body.theme-dark .landing-hero-title { color: #dce6f5; }
body.theme-dark .landing-hero-sub { color: #6b7f9e; }
body.theme-dark .landing-footer { color: #374357; border-top-color: #1e2a3e; }
body.theme-dark .domain-card {
  background: #0f1520;
  border-color: #1e2a3e;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
body.theme-dark .domain-card:hover {
  background: #141c2e;
  border-color: #00d4ff;
  box-shadow: 0 8px 32px rgba(0,212,255,0.15);
  transform: translateY(-4px);
}
body.theme-dark .domain-card-label { color: #dce6f5; }
body.theme-dark .domain-card-desc { color: #6b7f9e; }
body.theme-dark .domain-card-count { color: #374357; }
body.theme-dark .domain-card-arrow { background: #141c2e; border-color: #243248; color: #6b7f9e; }
body.theme-dark .domain-card:hover .domain-card-arrow { background: #00d4ff; border-color: #00d4ff; color: #000; }
body.theme-dark .domain-card-footer { border-top-color: #1e2a3e; }
body.theme-dark .page-domain { background: #050810; }
body.theme-dark .domain-hero-bar { background: #0a0e1a; border-bottom-color: #1e2a3e; backdrop-filter: none; }
body.theme-dark .domain-back-btn { color: #6b7f9e; border-color: #1e2a3e; }
body.theme-dark .domain-back-btn:hover { color: #00d4ff; border-color: #00d4ff; }
body.theme-dark .domain-hero-name { color: #dce6f5; }
body.theme-dark .tech-section-label { color: #374357; }
body.theme-dark .tech-btn { background: #0f1520; border-color: #1e2a3e; }
body.theme-dark .tech-btn:hover { background: #141c2e; border-color: #243248; }
body.theme-dark .tech-btn.active { background: rgba(0,212,255,0.10); border-color: #00d4ff; }
body.theme-dark .tech-btn.active .tech-label { color: #00d4ff; }
body.theme-dark .tech-label { color: #6b7f9e; }
body.theme-dark .qtype-tab { background: #0f1520; border-color: #1e2a3e; }
body.theme-dark .qtype-tab:hover { background: #141c2e; border-color: #243248; }
body.theme-dark .qtype-tab.active { background: rgba(0,212,255,0.10); border-color: #00d4ff; }
body.theme-dark .qtype-label { color: #dce6f5; }
body.theme-dark .qtype-desc { color: #6b7f9e; }
body.theme-dark .output-area { background: #0f1520; border-color: #1e2a3e; }
body.theme-dark .output-header { border-bottom-color: #1e2a3e; }
body.theme-dark .meta-tag { background: #141c2e; border-color: #1e2a3e; color: #6b7f9e; }
body.theme-dark .action-btn { background: #141c2e; border-color: #1e2a3e; color: #6b7f9e; }
body.theme-dark .action-btn:hover { border-color: #00d4ff; color: #00d4ff; }
body.theme-dark .export-menu { background: #141c2e; border-color: #243248; }
body.theme-dark .export-item { color: #6b7f9e; }
body.theme-dark .export-item:hover { background: #1a2438; color: #00d4ff; }
body.theme-dark .search-bar-row { background: #0a0e1a; border-bottom-color: #1e2a3e; }
body.theme-dark .search-input { color: #dce6f5; }
body.theme-dark .progress-bar-row { background: #0a0e1a; border-bottom-color: #1e2a3e; }
body.theme-dark .progress-track { background: #1e2a3e; }
body.theme-dark .section-label { background: #0a0e1a; border-bottom-color: #1e2a3e; }
body.theme-dark .question-item { border-bottom-color: #1e2a3e; }
body.theme-dark .question-item:hover { background: #141c2e; }
body.theme-dark .q-text { color: #dce6f5; }
body.theme-dark .q-num { color: #374357; }
body.theme-dark .q-check { background: #0f1520; border-color: #243248; }
body.theme-dark .pb-symptom-card { background: #141c2e; border-color: #1e2a3e; }
body.theme-dark .pb-symptom-card:hover { background: rgba(0,212,255,0.10); border-color: #00d4ff; }
body.theme-dark .pb-symptom-title { color: #dce6f5; }
body.theme-dark .pb-back { background: #0a0e1a; border-bottom-color: #1e2a3e; }
body.theme-dark .pb-title { color: #dce6f5; }
body.theme-dark .pb-phase-header { background: #0a0e1a; border-bottom-color: #1e2a3e; }
body.theme-dark .pb-action { background: #0a0e1a; border-color: #1e2a3e; color: #00d4ff; }
body.theme-dark .pb-expect { color: #6b7f9e; }
body.theme-dark .empty-state { color: #374357; }
body.theme-dark .ai-section { background: #0f1520; border-color: #1e2a3e; }
body.theme-dark .domain-footer { border-top-color: #1e2a3e; color: #374357; }
body.theme-dark .toast { background: #00d4ff; color: #000; }
body.theme-dark .cn-tab { background: #141c2e; border-color: #243248; }
body.theme-dark .cn-tab:hover { background: rgba(0,212,255,0.10); border-color: #00d4ff; }
body.theme-dark .cn-panel { background: #0f1520; border-left-color: #243248; }
body.theme-dark .cn-panel-header { background: #0a0e1a; border-bottom-color: #1e2a3e; }
body.theme-dark .cn-panel-name { color: #dce6f5; }
body.theme-dark .cn-action-btn { background: #141c2e; border-color: #243248; color: #6b7f9e; }
body.theme-dark .cn-action-btn:hover { border-color: #00d4ff; color: #00d4ff; }
body.theme-dark .cn-input { background: #0a0e1a; border-color: #1e2a3e; color: #dce6f5; color-scheme: dark; }
body.theme-dark .cn-section { background: #141c2e; border-color: #1e2a3e; }
body.theme-dark .cn-section-header { background: #0a0e1a; border-bottom-color: #1e2a3e; }
body.theme-dark .cn-section-title { color: #dce6f5; }
body.theme-dark .cn-textarea { color: #dce6f5; }
body.theme-dark .cn-preview { background: #0a0e1a; color: #dce6f5; }
body.theme-dark .cn-preview-toggle { background: #0a0e1a; color: #6b7f9e; }
body.theme-dark .cn-divider { background: #1e2a3e; }
body.theme-dark .cn-action-col:first-child { border-right-color: #1e2a3e; }
body.theme-dark .cn-action-col-label { border-bottom-color: #1e2a3e; }
body.theme-dark ::-webkit-scrollbar-track { background: #050810; }
body.theme-dark ::-webkit-scrollbar-thumb { background: #1e2a3e; }
body.theme-dark .q-highlight { background: rgba(0,212,255,0.18); color: #00d4ff; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .landing-main { padding: 2.5rem 1.2rem 2rem; gap: 2rem; }
  .domain-grid  { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  .landing-hero-title { font-size: 2.2rem; }
  .domain-main  { padding: 1.5rem 1.2rem 3rem; }
  .tech-grid    { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .qtype-tabs   { gap: 4px; }
  .qtype-tab    { min-width: 90px; padding: 10px 10px; }
  .qtype-desc   { display: none; }
  .cn-action-split { grid-template-columns: 1fr; }
  .cn-action-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
}

@media (max-width: 600px) {
  .ms-header-inner { height: 50px; }
  .ms-logo-org     { display: none; }
  .tier-toggle     { display: none; }
  .domain-grid     { grid-template-columns: 1fr 1fr; gap: 10px; }
  .domain-card-body { padding: 16px; }
  .domain-card-desc { display: none; }
  .domain-card-footer { display: none; }
  .landing-hero-title { font-size: 1.8rem; }
  .landing-hero-sub   { font-size: 0.88rem; }
  .tech-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .ai-input-row { flex-direction: column; }
  .ai-btn { width: 100%; text-align: center; }
  .output-header { flex-direction: column; align-items: flex-start; }
  .cn-meta-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
  .domain-grid { grid-template-columns: 1fr; }
}

/* ── Keyboard focus ──────────────────────────────────────────── */
.tech-btn:focus-visible,
.qtype-tab:focus-visible,
.action-btn:focus-visible,
.ai-btn:focus-visible,
.domain-back-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Page transition ─────────────────────────────────────────── */
.page {
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}