/* Minfo Signal Design System - shared application layer */
:root {
  --bg: #FFFFFF;
  --surface: #F4F4F5;
  --surface-container: #F4F4F5;
  --line: #DDDDDF;
  --ink: #2A2A2C;
  --body: #3A3A3C;
  --muted: #8A8A8E;
  --accent: #F99D32;
  --accent-hover: #E08C25;
  --accent-active: #C97C1E;
  --accent-text: #A9690A;
  --on-accent: #2A2A2C;
  --on-primary: #FFFFFF;
  --success: #2E7D5B;
  --warning: #A9690A;
  --error: #D2392B;
  --info: #2C6B8F;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(40,36,30,.06);
  --shadow-2: 0 2px 8px rgba(40,36,30,.08);
  --shadow-3: 0 6px 20px rgba(40,36,30,.10);
  --shadow-4: 0 14px 40px rgba(40,36,30,.14);
  --background: var(--bg);
  --card: var(--surface);
  --border: var(--line);
  --foreground: var(--ink);
  --muted-foreground: var(--muted);
  --ground: var(--bg);
  --surface-2: var(--surface);
  --ink-2: var(--body);
  --ink-3: var(--muted);
  --line-2: var(--line);
  --accent-ink: var(--warning);
  --focus: var(--accent-active);
  --good: var(--success);
  --warn: var(--error);
  --text: var(--ink);
  --green: var(--success);
}

[data-theme="dark"],
:root[data-theme="dark"] {
  --bg: #1C1C1E;
  --surface: #2A2A2C;
  --surface-container: #2A2A2C;
  --line: #3E3E42;
  --ink: #FFFFFF;
  --body: #E4E4E6;
  --muted: #9A9A9E;
  --accent: #F99D32;
  --accent-hover: #E08C25;
  --accent-active: #C97C1E;
  --accent-text: #F99D32;
  --on-accent: #2A2A2C;
  --on-primary: #1C1C1E;
  --success: #5FAE86;
  --warning: #D69B43;
  --error: #FF8A80;
  --info: #6FA7C5;
  --shadow-1: 0 1px 2px rgba(0,0,0,.18);
  --shadow-2: 0 2px 8px rgba(0,0,0,.24);
  --shadow-3: 0 6px 20px rgba(0,0,0,.30);
  --shadow-4: 0 14px 40px rgba(0,0,0,.38);
  --background: var(--bg);
  --card: var(--surface);
  --border: var(--line);
  --foreground: var(--ink);
  --muted-foreground: var(--muted);
  --ground: var(--bg);
  --surface-2: var(--surface);
  --ink-2: var(--body);
  --ink-3: var(--muted);
  --line-2: var(--line);
  --accent-ink: var(--accent-hover);
  --focus: var(--accent-hover);
  --good: var(--success);
  --warn: var(--error);
  --text: var(--ink);
  --green: var(--success);
}

html { color-scheme: light; }
html:has([data-theme="dark"]) { color-scheme: dark; }
body {
  background: var(--bg) !important;
  color: var(--body) !important;
  font-family: 'Satoshi', Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1 { font-family: 'Cabinet Grotesk', 'Satoshi', sans-serif; font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
h2, h3, h4, h5, h6 { font-family: 'Satoshi', Arial, sans-serif; color: var(--ink); }
a { color: var(--body); text-underline-offset: 3px; }
a:hover { color: var(--accent-text); }
::selection { background: rgba(249,157,50,.28); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 3px !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

header {
  background: color-mix(in srgb, var(--bg) 94%, transparent) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}
.brand-lockup, .brand, .wm, .mark { font-family: 'Cabinet Grotesk', 'Satoshi', sans-serif !important; font-weight: 800 !important; letter-spacing: -.025em !important; }
.brand-m, .brand .m, .wm .m, .mark .m { color: var(--accent) !important; }
.brand-pulse, .brand .pulse, .wm .pulse { color: var(--ink) !important; }

.card,
.modal,
.container,
.intent-card,
.kpi,
.review-post,
.preview-box {
  border-color: var(--line) !important;
  box-shadow: none !important;
}
.card { background: var(--bg) !important; border-radius: 16px !important; }
.card:hover { border-color: var(--line); }
.card h2 {
  color: var(--muted) !important;
  font-family: 'Satoshi', Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
}
.modal-bg { background: rgba(28,28,30,.68) !important; backdrop-filter: blur(8px); }
.modal {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-4) !important;
}
.modal h2 { font-size: 22px !important; line-height: 1.3 !important; font-weight: 700 !important; }
.modal p { color: var(--body) !important; }

.btn, button, input, textarea, select { font-family: 'Satoshi', Arial, sans-serif; }
.btn {
  min-height: 44px;
  padding: 13px 24px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 220ms ease-out, border-color 220ms ease-out, color 220ms ease-out, opacity 220ms ease-out;
}
.btn.hero { background: var(--accent) !important; color: var(--on-accent) !important; }
.btn.hero:hover { background: var(--accent-hover) !important; opacity: 1; }
.btn.hero:active { background: var(--accent-active) !important; }
.btn.primary { background: var(--ink) !important; color: var(--on-primary) !important; }
.btn.secondary { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
.btn.secondary:hover { background: var(--surface) !important; border-color: var(--line) !important; opacity: 1; }
.btn.ghost { color: var(--ink) !important; }
.btn.ghost:hover { background: var(--surface) !important; }
.btn.danger { background: var(--error) !important; color: #FFFFFF !important; }
.btn.small { min-height: 32px; padding: 8px 16px; border-radius: 8px; font-size: 13px; }
.btn:disabled, button:disabled { background: var(--surface) !important; color: var(--muted) !important; border-color: var(--line) !important; opacity: 1 !important; cursor: not-allowed; }

.icon-btn, .tab-btn {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: none !important;
}
.icon-btn:hover, .tab-btn:hover { background: var(--surface) !important; border-color: var(--line) !important; }
.icon-btn.active, .tab-btn.active { background: var(--ink) !important; color: var(--on-primary) !important; border-color: var(--ink) !important; }

label { color: var(--ink) !important; font-size: 13px; line-height: 1.4; font-weight: 500; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea,
select {
  min-height: 46px;
  padding: 13px 15px !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent) !important; outline-offset: 1px !important; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }

.pill {
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--muted) !important;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .06em;
}
.pill.success { color: var(--success) !important; border-color: color-mix(in srgb, var(--success) 45%, var(--line)) !important; }
.pill.live, .pill.accent { color: var(--accent-text) !important; border-color: color-mix(in srgb, var(--accent) 48%, var(--line)) !important; }
.status, .hint, .caption { color: var(--muted) !important; }
.status.error, .error { color: var(--error) !important; }

.intent-card { background: var(--bg) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: none !important; transform: none !important; }
.intent-card:hover { background: var(--surface) !important; border-color: var(--line) !important; }
.intent-card.active { background: var(--surface) !important; border: 1px solid var(--accent) !important; box-shadow: none !important; }
.intent-card-title { color: var(--ink) !important; font-weight: 700 !important; }

.view-mode-switch { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.view-mode-btn { color: var(--muted) !important; }
.view-mode-btn.active { background: var(--bg) !important; color: var(--ink) !important; box-shadow: var(--shadow-1) !important; }
.wizard-runway { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; }
.wizard-step-node { color: var(--muted) !important; }
.wizard-step-node .w-num { background: var(--bg) !important; border: 1px solid var(--line) !important; color: var(--muted) !important; }
.wizard-step-node.active { color: var(--ink) !important; background: transparent !important; box-shadow: none !important; }
.wizard-step-node.active .w-num { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }
.wizard-step-node.completed .w-num { background: var(--success) !important; border-color: var(--success) !important; color: #FFFFFF !important; }
.wizard-connector { background: var(--line) !important; }
.wizard-connector.active { background: var(--success) !important; }

.user-executive-btn, .executive-dropdown-menu, .exec-menu-status-item, .exec-menu-link {
  border-color: var(--line) !important;
  box-shadow: none !important;
}
.user-executive-btn, .executive-dropdown-menu { background: var(--bg) !important; color: var(--ink) !important; }
.exec-menu-status-item:hover, .exec-menu-link:hover { background: var(--surface) !important; }
.user-avatar-badge, .exec-menu-avatar { background: var(--surface) !important; color: var(--ink) !important; }
.user-vip-tag, .exec-action-badge { background: transparent !important; color: var(--muted) !important; border: 1px solid var(--line) !important; }

#welcomeBanner, .consent-banner {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.spinner-orb { border-color: var(--line) !important; border-top-color: var(--accent) !important; box-shadow: none !important; }
.spinner-expected-box { background: var(--surface) !important; border: 1px solid var(--line) !important; }

table { color: var(--body); }
th { background: var(--surface); color: var(--muted) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .08em; }
th, td { border-color: var(--line) !important; }
tbody tr:hover { background: var(--surface); }
.kpi { background: var(--surface) !important; }
.kpi b { color: var(--ink) !important; }

#businessProfileDialog, #peerIntelligenceDialog {
  background: var(--bg) !important;
  color: var(--body) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-4) !important;
}
#businessProfileDialog::backdrop, #peerIntelligenceDialog::backdrop { background: rgba(28,28,30,.68); backdrop-filter: blur(8px); }

body[data-mobile-page="radar"] { --background: var(--bg); --card: var(--surface); --border: var(--line); --foreground: var(--ink); --muted-foreground: var(--muted); }
body[data-mobile-page="radar"] header { border-radius: 16px !important; }
body[data-mobile-page="radar"] [class*="shadow"] { box-shadow: none !important; }
body[data-mobile-page="radar"] [class*="border-[#F99D32]"] { border-color: var(--line) !important; }
body[data-mobile-page="sdk"] pre { background: var(--surface) !important; color: var(--body) !important; border-color: var(--line) !important; }
body[data-mobile-page="privacy"] .container { background: var(--bg) !important; }
body[data-mobile-page="survey"] .card { background: var(--bg) !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--bg); border-radius: 999px; }

@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {
  body { font-size: 16px; }
  main { padding: 16px 12px; }
  .card { padding: 16px 14px !important; margin-bottom: 16px; }
  .modal { border-radius: 16px !important; }
  .btn:not(.icon-only) { min-height: 48px; }
  .wizard-runway { border-radius: 12px !important; }
  .wizard-step-node.active { background: transparent !important; }
  .phone-page-nav { background: var(--bg) !important; border-bottom: 1px solid var(--line); }
}


/* Paired AI and Natural Voice post review */
.post-version-switcher {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.post-version-switcher[hidden] { display: none !important; }
.post-platform-tabs,
.post-voice-tabs,
.post-default-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.post-tab {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--body);
  font: 700 14px/1.2 Satoshi, Arial, sans-serif;
  cursor: pointer;
}
.post-tab.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.post-default-controls select { width: auto; min-width: 138px; }
#postVersionStatus { margin: 0; min-height: 1.25em; }
@media (max-width: 600px) {
  .post-version-switcher { padding: 10px; }
  .post-platform-tabs .post-tab,
  .post-voice-tabs .post-tab { flex: 1 1 120px; }
  .post-default-controls select,
  .post-default-controls .btn { flex: 1 1 140px; }
}