:root {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-soft: #eef2ff;
  --background: #fafafa;
  --surface: #ffffff;
  --surface-alt: #f6f6f8;
  --text: #0a0a0a;
  --text-secondary: #6b6b6b;
  --neutral: #9c9c9c;
  --border: #e8e8ec;
  --border-strong: #d8d8df;
  --success: #10b981;
  --success-soft: #ecfdf5;
  --warning: #f59e0b;
  --warning-soft: #fffbeb;
  --error: #ef4444;
  --error-soft: #fef2f2;
  --info: #2563eb;
  --info-soft: #eff6ff;
  --sidebar: 240px;
  --topbar: 56px;
  --radius-card: 12px;
  --radius-control: 6px;
  --shadow-hover: 0 8px 30px rgba(0,0,0,.08);
  --font-display: "Be Vietnam Pro", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Be Vietnam Pro", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; min-width: 320px; background: var(--background); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.16); border-color: var(--primary) !important; }
button { cursor: pointer; }
svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: 10px; transform: translateY(-180%); z-index: 1000; padding: 8px 12px; border-radius: 6px; background: var(--text); color: white; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar); display: flex; flex-direction: column; padding: 16px 12px; background: rgba(255,255,255,.94); border-right: 1px solid var(--border); backdrop-filter: blur(14px); }
.brand-row { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px; border: 0; background: transparent; text-align: left; border-radius: 8px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--text); color: white; font: 700 15px var(--font-display); }
.brand-copy { display: grid; }
.brand-copy strong { font: 700 15px var(--font-display); letter-spacing: -.015em; }
.brand-copy small, .company-copy small { color: #555; font-size: 12px; }
.company-switcher { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; margin-top: 18px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); text-align: left; transition: border .2s ease, background .2s ease; }
.company-switcher:hover { border-color: var(--border-strong); background: var(--surface-alt); }
.company-menu { position: absolute; top: 134px; left: 12px; z-index: 55; width: 216px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,.14); }
.company-menu-head { display: grid; gap: 3px; padding: 13px 14px 10px; border-bottom: 1px solid var(--border); }
.company-menu-head strong { font-family: var(--font-display); font-size: 14px; }
.company-menu-head span { color: #555; font-size: 12px; line-height: 1.5; }
.company-mode-option { width: 100%; min-height: 58px; display: grid; grid-template-columns: 16px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface); text-align: left; }
.company-mode-option:hover { background: var(--surface-alt); }
.company-mode-option.active { background: var(--primary-soft); }
.company-mode-option > span:last-child { display: grid; gap: 2px; }
.company-mode-option strong { font-family: var(--font-display); font-size: 14px; }
.company-mode-option small { color: #555; font-size: 12px; line-height: 1.45; }
.mode-radio { width: 14px; height: 14px; border: 1px solid var(--border-strong); border-radius: 9999px; background: var(--surface); }
.company-mode-option.active .mode-radio { border: 4px solid var(--primary); }
.company-menu-link { width: 100%; min-height: 42px; padding: 8px 12px; border: 0; background: var(--surface); color: #4338ca; font-size: 13px; text-align: left; }
.company-menu-link:hover { background: var(--surface-alt); }
.company-avatar, .avatar-button { display: grid; place-items: center; border-radius: 9999px; font: 500 11px var(--font-mono); }
.company-avatar { width: 32px; height: 32px; background: #eef2ff; color: #4338ca; }
.company-copy { display: grid; min-width: 0; }
.company-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px var(--font-display); }
.nav-groups { display: grid; align-content: start; gap: 4px; margin-top: 16px; overflow-y: auto; scrollbar-width: thin; }
.nav-group { border-radius: 8px; }
.nav-group-toggle { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-secondary); text-align: left; transition: color .18s ease, background .18s ease; }
.nav-group-toggle, .nav-button { touch-action: manipulation; }
.nav-group-toggle:hover { background: var(--surface-alt); color: var(--text); }
.nav-group.open > .nav-group-toggle { color: var(--text); font-weight: 600; }
.nav-group-label, .nav-group-meta { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nav-group-label > svg { width: 17px; height: 17px; flex: 0 0 auto; }
.nav-group-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; letter-spacing: .04em; }
.nav-group-count { color: #666; font: 500 11px var(--font-mono); }
.nav-group-chevron { transition: transform .18s ease; }
.nav-group-chevron svg { width: 14px; height: 14px; }
.nav-group.open .nav-group-chevron { transform: rotate(90deg); }
.nav-list { display: grid; gap: 2px; margin: 2px 0 6px; padding-left: 8px; }
.nav-button { min-height: 42px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #555; font-size: 14px; text-align: left; transition: color .18s ease, background .18s ease; }
.nav-button:hover { background: var(--surface-alt); color: var(--text); }
.nav-button.active { background: var(--primary-soft); color: #4338ca; font-weight: 500; }
.nav-button-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-button svg { width: 17px; height: 17px; }
.nav-badge { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 9999px; background: var(--error-soft); color: #b91c1c; font: 500 10px var(--font-mono); }
.sidebar-footer { margin-top: auto; padding: 14px 10px 2px; border-top: 1px solid var(--border); }
.sidebar-footer p { margin: 5px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.policy-line { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.app { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; border-bottom: 1px solid var(--border); background: rgba(250,250,250,.88); backdrop-filter: blur(14px); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; }
.crumb { display: flex; align-items: center; gap: 8px; color: #666; font-size: 13px; }
.crumb strong { color: var(--text); font-weight: 500; }
.search-button { min-width: 188px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--neutral); font-size: 12px; text-align: left; }
.search-button span:nth-child(2) { flex: 1; }
.search-button svg { width: 15px; height: 15px; }
.ai-chat-button { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #d9dcff; border-radius: 8px; background: var(--primary-soft); color: #4338ca; font-size: 12px; font-weight: 500; }
.ai-chat-button:hover { border-color: #bfc5ff; background: #e5e9ff; }
.ai-chat-button svg { width: 15px; height: 15px; }
.demo-launch { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: #4338ca; font-size: 14px; font-weight: 600; }
.demo-launch:hover, .demo-launch[aria-pressed="true"] { border-color: #bfc5ff; background: var(--primary-soft); }
.demo-launch svg { width: 15px; height: 15px; }
kbd { padding: 2px 5px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-alt); color: var(--text-secondary); font: 10px var(--font-mono); }
.data-status { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; }
.status-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 9999px; }
.status-dot.success { background: var(--success); }.status-dot.warning { background: var(--warning); }.status-dot.error { background: var(--error); }.status-dot.info { background: var(--info); }
.avatar-button { width: 34px; height: 34px; border: 0; background: var(--text); color: white; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.icon-button:hover { background: var(--surface-alt); }
.mobile-menu, .mobile-only { display: none; }
#main { max-width: 1328px; margin: 0 auto; padding: 32px 24px 64px; }
.page-enter { animation: page-enter .24s ease-out both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.overline { margin: 0 0 7px; color: #555; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
h1, h2, h3, h4 { font-family: var(--font-display); }
h1 { margin: 0; font-size: clamp(28px, 2.35vw, 36px); font-weight: 700; line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; }
h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.018em; }
h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.page-head p:not(.overline) { max-width: 720px; margin: 9px 0 0; color: var(--text-secondary); line-height: 1.65; }
.head-actions { display: flex; gap: 8px; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px; background: var(--primary); color: white; font-size: 14px; font-weight: 500; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-1px); background: var(--primary-hover); box-shadow: 0 4px 12px rgba(99,102,241,.35); }
.button.secondary { border-color: var(--border); background: var(--surface); color: var(--text); }
.button.secondary:hover { background: var(--surface-alt); box-shadow: var(--shadow-hover); }
.button.ghost { background: transparent; color: var(--text-secondary); }
.button.ghost:hover { background: var(--surface-alt); color: var(--text); box-shadow: none; }
.button.danger { border-color: #fecaca; background: var(--surface); color: #b91c1c; }
.button:disabled { transform: none; box-shadow: none; cursor: default; opacity: .7; }
.grid { display: grid; gap: 20px; }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }.span-3 { grid-column: span 3; }.span-4 { grid-column: span 4; }.span-5 { grid-column: span 5; }.span-6 { grid-column: span 6; }.span-7 { grid-column: span 7; }.span-8 { grid-column: span 8; }.span-9 { grid-column: span 9; }.span-12 { grid-column: span 12; }
.card { min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: transform .2s ease, box-shadow .2s ease, border .2s ease; }
.card.hoverable:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.card.compact { padding: 16px; }
.card.tint { background: var(--surface-alt); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.card-head p { margin: 4px 0 0; color: #555; font-size: 14px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 32px 0 14px; }
.section-title h2 { font-size: 22px; }
.section-title p { margin: 3px 0 0; color: var(--text-secondary); font-size: 13px; }
.metric-card { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.metric-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.metric-label { color: #555; font-size: 14px; }
.metric-value { margin-top: 8px; font: 500 clamp(21px,2vw,28px)/1.15 var(--font-mono); letter-spacing: -.025em; }
.metric-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #555; font-size: 13px; }
.trend.up { color: #047857; }.trend.down { color: #dc2626; }.trend.warn { color: #b45309; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.success { background: var(--success-soft); color: #047857; }.pill.warning { background: var(--warning-soft); color: #a16207; }.pill.error { background: var(--error-soft); color: #b91c1c; }.pill.info { background: var(--info-soft); color: #1d4ed8; }.pill.neutral { background: #f3f4f6; color: #4b5563; }.pill.primary { background: var(--primary-soft); color: #4338ca; }
.progress { height: 7px; overflow: hidden; border-radius: 9999px; background: #f0f0f3; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.progress.success > span { background: var(--success); }.progress.warning > span { background: var(--warning); }.progress.error > span { background: var(--error); }
.department-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.department-card { width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: left; transition: transform .2s ease, box-shadow .2s ease, border .2s ease; }
.department-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--border-strong); }
.department-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 18px 14px; }
.department-name { display: flex; align-items: center; gap: 10px; }
.department-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); color: var(--text-secondary); }
.department-icon svg { width: 17px; height: 17px; }
.department-owner { margin-top: 3px; color: #555; font-size: 12px; }
.department-summary { padding: 0 18px 14px; color: #555; font-size: 14px; min-height: 58px; }
.department-kpi { padding: 14px 18px; border-top: 1px solid var(--border); background: #fdfdfd; }
.department-kpi-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.department-kpi-head span { color: var(--text-secondary); }
.department-kpi-head strong { font-family: var(--font-mono); font-size: 13px; }
.department-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; border-top: 1px solid var(--border); background: var(--border); }
.department-stat { padding: 12px 10px; background: var(--surface); }
.department-stat span { display: block; color: #666; font-size: 11px; }
.department-stat strong { display: block; margin-top: 3px; font: 500 13px var(--font-mono); }
.list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.list-row { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface); text-align: left; }
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: #fcfcfd; }
.list-row.selected { position: relative; background: var(--primary-soft); color: #3730a3; }
.list-row.selected::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--primary); }
.row-title { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.row-icon { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-alt); color: var(--text-secondary); }
.row-icon svg { width: 15px; height: 15px; }
.row-copy { min-width: 0; }
.row-copy strong { display: block; font-family: var(--font-display); font-size: 14px; }
.row-copy span { display: block; margin-top: 3px; color: #555; font-size: 13px; line-height: 1.5; }
.row-meta { display: flex; align-items: center; gap: 8px; }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { background: #fcfcfd; color: #555; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
tbody tr { cursor: pointer; transition: background .16s ease; }
tbody tr:hover { background: #fafaff; }
td strong { font-family: var(--font-display); font-weight: 600; }
td small { display: block; margin-top: 3px; color: #555; font-size: 12px; }
.mono { font-family: var(--font-mono); font-size: 13px; }
.chart-card { min-height: 300px; }
.chart-area { position: relative; height: 230px; margin-top: 8px; overflow: hidden; }
.chart-grid { position: absolute; inset: 0 0 24px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 45px, #eeeeF2 46px); }
.chart-area svg { position: relative; width: 100%; height: 205px; overflow: visible; }
.chart-axis { display: flex; justify-content: space-between; padding-top: 4px; color: var(--neutral); font: 10px var(--font-mono); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; color: #555; font-size: 13px; }
.legend i { display: inline-block; width: 13px; height: 2px; margin-right: 5px; vertical-align: middle; }
.insight { padding: 13px 15px; border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; background: var(--primary-soft); color: #3730a3; font-size: 14px; line-height: 1.55; }
.insight.warning { border-color: var(--warning); background: var(--warning-soft); color: #92400e; }
.insight.error { border-color: var(--error); background: var(--error-soft); color: #991b1b; }
.mini-bars { display: grid; gap: 12px; }
.mini-bar-row { display: grid; grid-template-columns: 100px minmax(0,1fr) 48px; align-items: center; gap: 10px; font-size: 11px; }
.mini-bar-row span:first-child { color: var(--text-secondary); }
.mini-bar-row strong { text-align: right; font: 500 10px var(--font-mono); }
.health-matrix { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.health-cell { padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.health-cell h3 { margin-bottom: 5px; }
.health-cell p { margin: 0; color: var(--text-secondary); font-size: 11px; }
.health-value { margin-top: 12px; font: 500 18px var(--font-mono); }
.heatmap { display: grid; grid-template-columns: 110px repeat(4,1fr); gap: 4px; font-size: 10px; }
.heatmap > div { min-height: 34px; display: grid; place-items: center; padding: 5px; border-radius: 5px; text-align: center; }
.heatmap .label { justify-content: start; color: var(--text-secondary); text-align: left; }
.heat-low { background: var(--success-soft); color: #047857; }.heat-med { background: var(--warning-soft); color: #92400e; }.heat-high { background: var(--error-soft); color: #991b1b; }
.flow-map { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; align-items: stretch; }
.flow-node { position: relative; min-height: 92px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.flow-node::after { content: "→"; position: absolute; right: -9px; top: 50%; z-index: 2; transform: translateY(-50%); color: var(--neutral); }
.flow-node:last-child::after { display: none; }
.flow-node span { display: block; color: var(--neutral); font-size: 10px; text-transform: uppercase; }
.flow-node strong { display: block; margin-top: 7px; font-family: var(--font-display); font-size: 12px; }
.flow-node.active { border-color: #c7d2fe; background: var(--primary-soft); }
.option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.option-card { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-align: left; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.option-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.option-card.selected { border-color: #a5b4fc; background: linear-gradient(145deg,#f7f8ff,#eef2ff); box-shadow: inset 0 0 0 1px #c7d2fe; }
.option-label, .eyebrow, .ai-kicker { color: var(--neutral); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.option-card h3 { margin-top: 7px; }
.option-card p { margin: 7px 0 14px; color: var(--text-secondary); font-size: 12px; }
.decision-why { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); }
.decision-why strong { color: var(--neutral); font-size: 10px; letter-spacing: .07em; }
.decision-why p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.decision-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.analysis-result { margin-top: 14px; padding: 13px 14px; border: 1px solid #bfdbfe; border-radius: 8px; background: var(--info-soft); color: #1e40af; }
.analysis-result p { margin: 4px 0 0; font-size: 12px; }
.handoff-chain, .detail-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.handoff-chain span, .detail-chain span { padding: 5px 8px; border: 1px solid rgba(5,150,105,.22); border-radius: 5px; background: rgba(255,255,255,.62); font-size: 9px; font-weight: 600; letter-spacing: .04em; }
.handoff-chain i, .detail-chain i { color: var(--neutral); font-style: normal; }
.decision-success { display: flex; gap: 18px; padding: 24px; border: 1px solid #a7f3d0; border-radius: 12px; background: var(--success-soft); color: #065f46; }
.decision-success > svg { flex: 0 0 auto; width: 34px; height: 34px; padding: 7px; border-radius: 9999px; background: #d1fae5; }
.decision-success span { font: 500 10px var(--font-mono); letter-spacing: .06em; }
.decision-success h2 { margin-top: 5px; }
.decision-success p { max-width: 760px; margin: 6px 0 0; color: #047857; font-size: 13px; }
.strategy-map { padding: 0; overflow: hidden; }
.strategy-map-head { display: grid; grid-template-columns: minmax(0,1fr) 240px; align-items: end; gap: 30px; padding: 24px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg,#fff 25%,#f5f6ff); }
.strategy-map-head h2 { margin-top: 6px; font-size: 27px; }
.strategy-map-head p { margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; }
.goal-progress { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 5px; }
.goal-progress strong { font: 500 24px var(--font-mono); }
.goal-progress span { color: var(--text-secondary); font-size: 12px; }
.goal-progress .progress { grid-column: 1 / -1; margin-top: 7px; }
.strategy-column-labels, .strategy-track { display: grid; grid-template-columns: 1.35fr .72fr .8fr 1.45fr; align-items: center; gap: 18px; }
.strategy-column-labels { padding: 10px 24px; border-bottom: 1px solid var(--border); background: #fcfcfd; color: var(--neutral); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.strategy-track { position: relative; width: 100%; padding: 16px 24px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface); text-align: left; transition: background .18s ease; }
.strategy-track:last-child { border-bottom: 0; }
.strategy-track:hover { background: #fafaff; }
.strategy-track::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--track-color,var(--primary)); }
.accent-1 { --track-color: var(--primary); }.accent-2 { --track-color: var(--info); }.accent-3 { --track-color: var(--warning); }.accent-4 { --track-color: var(--success); }
.strategy-driver { display: grid; grid-template-columns: 9px minmax(0,1fr); align-items: center; column-gap: 9px; }
.strategy-driver i { width: 8px; height: 8px; border-radius: 9999px; background: var(--track-color); box-shadow: 0 0 0 4px color-mix(in srgb,var(--track-color) 14%,white); }
.strategy-driver strong { font: 600 12px var(--font-display); }
.strategy-driver small { grid-column: 2; margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.strategy-kpi { font: 500 12px var(--font-mono); }
.strategy-owner { color: var(--text-secondary); font-size: 11px; }
.strategy-initiatives { display: flex; flex-wrap: wrap; gap: 6px; }
.strategy-initiatives em { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-alt); color: var(--text); font-size: 10px; font-style: normal; }
.strategy-insight { margin-top: 16px; }
.evidence-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.evidence-strip span, .chat-evidence span { padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-secondary); font: 500 9px var(--font-mono); }
.evidence-strip.vertical { display: grid; }
.variance-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--border); }
.variance-summary div { padding: 12px; background: var(--surface-alt); }
.variance-summary span { display: block; color: var(--neutral); font-size: 9px; letter-spacing: .05em; }
.variance-summary strong { display: block; margin-top: 4px; font-size: 11px; }
.timeline { position: relative; display: grid; gap: 16px; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 4px; width: 1px; background: var(--border-strong); }
.timeline-item { position: relative; }
.timeline-item::before { content: ""; position: absolute; top: 4px; left: -22px; width: 9px; height: 9px; border-radius: 9999px; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.timeline-item time { display: block; color: var(--neutral); font: 10px var(--font-mono); }
.timeline-item h3 { margin-top: 3px; }
.timeline-item p { margin: 2px 0 0; color: var(--text-secondary); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 500; }
.field small { color: var(--text-secondary); font-size: 10px; }
.input, select.input { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }
.toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-copy strong { display: block; font-family: var(--font-display); font-size: 13px; }
.toggle-copy span { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 11px; }
.toggle { width: 38px; height: 22px; padding: 2px; border: 0; border-radius: 9999px; background: #d4d4d8; }
.toggle::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 9999px; background: white; transition: transform .2s ease; }
.toggle.on { background: var(--primary); }.toggle.on::after { transform: translateX(16px); }
.tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); width: fit-content; }
.tab { min-height: 32px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); font-size: 12px; }
.tab.active { background: var(--surface-alt); color: var(--text); font-weight: 500; }
.back-button { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 0; border: 0; background: transparent; color: var(--text-secondary); font-size: 12px; }
.back-button:hover { color: var(--primary-hover); }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); font-size: 12px; }
.notice svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--text-secondary); }
.notice p { margin: 0; color: var(--text-secondary); }
.notice.success-notice { border-color: #a7f3d0; background: var(--success-soft); color: #047857; }
.notice.warning-notice { margin-bottom: 16px; border-color: #fde68a; background: var(--warning-soft); color: #92400e; }
.notice.success-notice p, .notice.warning-notice p { color: inherit; }
.notice.ops-info-notice { margin-bottom: 16px; border-color: #bfdbfe; background: var(--info-soft); color: #1e40af; }
.notice.ops-info-notice p { color: inherit; }
.ops-metrics { margin-bottom: 20px; }
.ops-grid { margin-top: 0; }
.ops-grid .list-row { min-height: 68px; }
.ops-grid .row-copy span { line-height: 1.45; }
.audit-latest { display: grid; gap: 8px; margin-bottom: 16px; }
.audit-latest > span { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 11px; }
.scrim { position: fixed; inset: 0; z-index: 45; background: rgba(10,10,10,.45); }
.dialog-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding: 10vh 20px 20px; background: rgba(10,10,10,.42); }
.dialog { width: min(620px,100%); overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 24px 80px rgba(0,0,0,.22); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.dialog-head h2 { font-size: 18px; }
.detail-dialog { width: min(720px,100%); }
.detail-body { max-height: min(62vh,620px); overflow-y: auto; padding: 20px; }
.detail-body h3 { margin: 20px 0 9px; }
.detail-chain { margin: 0 0 18px; }
.detail-chain span { border-color: var(--border); background: var(--surface-alt); color: var(--text-secondary); }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.detail-grid > div { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); }
.detail-grid span { display: block; color: var(--neutral); font-size: 9px; letter-spacing: .06em; }
.detail-grid strong { display: block; margin-top: 4px; font-size: 12px; }
.detail-copy { color: var(--text-secondary); font-size: 12px; }
.detail-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
.check-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 9px 10px 9px 34px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-secondary); font-size: 12px; }
.check-list li::before { content: "✓"; position: absolute; left: 11px; color: var(--success); font-weight: 700; }
.audit-trace { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.audit-trace span { position: relative; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-alt); color: var(--text-secondary); font-size: 10px; text-align: center; }
.audit-trace span:not(:last-child)::after { content: "→"; position: absolute; right: -8px; color: var(--neutral); }
.search-field { display: flex; align-items: center; gap: 9px; margin: 16px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; }
.search-field svg { width: 17px; height: 17px; color: var(--neutral); }
.search-field input { width: 100%; height: 44px; border: 0; outline: 0; background: transparent; }
.search-results { border-top: 1px solid var(--border); }
.search-results button { width: 100%; display: grid; gap: 2px; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--border); background: var(--surface); text-align: left; }
.search-results button:hover { background: var(--surface-alt); }
.search-results span { color: var(--text-secondary); font-size: 11px; }
.drawer-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(10,10,10,.28); backdrop-filter: blur(2px); }
.chat-drawer { position: fixed; inset: 0 0 0 auto; z-index: 75; width: min(420px,100%); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; border-left: 1px solid var(--border); background: var(--surface); box-shadow: -20px 0 60px rgba(0,0,0,.12); transform: translateX(105%); transition: transform .24s ease; }
.chat-drawer.open { transform: translateX(0); }
body.drawer-open { overflow: hidden; }
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px; border-bottom: 1px solid var(--border); }
.chat-head h2 { margin-top: 3px; font-size: 18px; }
.chat-context { display: flex; align-items: center; gap: 7px; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface-alt); color: var(--text-secondary); font-size: 11px; }
.chat-messages { min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 20px; }
.chat-message { display: flex; align-items: flex-start; gap: 8px; }
.chat-message p { max-width: 85%; margin: 0; padding: 11px 13px; border-radius: 4px 12px 12px 12px; background: var(--surface-alt); color: var(--text-secondary); font-size: 12px; }
.chat-message.user { justify-content: flex-end; }
.chat-message.user p { border-radius: 12px 4px 12px 12px; background: var(--primary); color: white; }
.chat-evidence { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-left: 34px; }
.chat-evidence button { padding: 4px 7px; border: 0; border-radius: 5px; background: var(--primary-soft); color: #4338ca; font-size: 10px; }
.chat-avatar { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--text); color: white; font: 600 9px var(--font-mono); }
.chat-compose { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 16px; border-top: 1px solid var(--border); }
.chat-compose input { min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 7px; outline: 0; }
.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 100; width: min(360px,calc(100% - 32px)); }
.interview-demo { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: min(480px,calc(100% - 40px)); overflow: hidden; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(255,255,255,.99); box-shadow: 0 24px 70px rgba(10,10,10,.22); backdrop-filter: blur(16px); }
.demo-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.demo-head > div { display: grid; gap: 2px; }
.demo-kicker { color: #3730a3; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.demo-head strong { font: 600 13px var(--font-mono); }
.demo-close { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.demo-close:hover { background: var(--surface-alt); }
.demo-close svg { width: 16px; height: 16px; }
.demo-step-dots { display: grid; grid-template-columns: repeat(var(--demo-steps,10),1fr); gap: 5px; padding: 12px 16px 0; }
.demo-step-dots span { height: 5px; border-radius: 9999px; background: var(--border-strong); }
.demo-step-dots span.done { background: #a5b4fc; }
.demo-step-dots span.active { background: var(--primary); }
.demo-body { display: grid; gap: 14px; padding: 16px; }
.demo-time { width: max-content; padding: 4px 8px; border-radius: 4px; background: var(--surface-alt); color: #555; font: 500 12px var(--font-mono); }
.demo-body h2 { font-size: 22px; line-height: 1.35; }
.demo-script { display: grid; gap: 6px; align-items: start; }
.demo-script > span { color: #555; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.demo-script p { margin: 0; font-size: 15px; line-height: 1.65; }
.demo-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 12px; }
.demo-actions > div { display: flex; gap: 8px; }
.demo-actions .button { min-height: 46px; padding: 0 15px; font-size: 14px; }
.demo-actions .button:disabled { opacity: .38; }
.demo-shortcut { margin: 0; padding: 0 16px 14px; color: #666; font-size: 12px; text-align: right; }
.demo-focus { outline: 4px solid rgba(79,70,229,.5); outline-offset: 6px; border-radius: 10px; scroll-margin: 120px 510px 120px 24px; }
.demo-active #main .option-label,
.demo-active #main .eyebrow,
.demo-active #main .ai-kicker,
.demo-active #main .decision-why strong { font-size: 12px; color: #555; }
.stage-funnel { display: grid; grid-template-columns: repeat(9,minmax(118px,1fr)); gap: 8px; margin-top: 16px; padding: 10px; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.stage-funnel > div { min-width: 118px; display: grid; gap: 4px; padding: 10px; border-left: 3px solid #c7d2fe; border-radius: 6px; background: var(--surface-alt); }
.stage-funnel span { color: #555; font-size: 12px; font-weight: 600; white-space: nowrap; }
.stage-funnel strong { color: var(--text); font: 600 20px var(--font-mono); }
.stage-funnel small { color: #555; font: 500 12px var(--font-mono); }
.toast { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid #a7f3d0; border-radius: 9px; background: #f0fdf8; color: #065f46; box-shadow: 0 16px 50px rgba(0,0,0,.14); font-size: 12px; animation: toast-in .2s ease-out; }

/* AI-native automation surfaces — User Flows v0.7 */
.automation-metrics { margin-top: 20px; }
.ai-org-shell { margin-top: 20px; padding: 28px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ai-owner-node { position: relative; z-index: 2; max-width: 620px; min-height: 88px; margin: 0 auto; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid #a5b4fc; border-radius: 12px; background: var(--primary-soft); }
.ai-owner-node .company-avatar { width: 44px; height: 44px; font-size: 13px; }
.ai-owner-node > div { display: grid; gap: 3px; }
.ai-owner-node > div > span { color: #555; font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.ai-owner-node strong { font: 700 18px var(--font-display); }
.ai-owner-node small { color: #555; font-size: 13px; }
.org-connector { width: 2px; height: 28px; margin: 0 auto; background: #c7d2fe; }
.ai-org-grid { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 16px; }
.ai-org-grid::before { content: ""; position: absolute; top: -1px; left: 12.5%; right: 12.5%; height: 2px; background: #c7d2fe; }
.ai-org-node { position: relative; min-width: 0; min-height: 250px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--border); border-top: 4px solid var(--success); border-radius: 12px; background: var(--surface); text-align: left; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ai-org-node::before { content: ""; position: absolute; top: -20px; left: 50%; width: 2px; height: 18px; background: #c7d2fe; }
.ai-org-node.warning { border-top-color: var(--warning); }.ai-org-node.error { border-top-color: var(--error); }
.ai-org-node:hover { transform: translateY(-2px); border-color: #c7d2fe; box-shadow: var(--shadow-hover); }
.org-node-head { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.org-node-head .department-icon { width: 38px; height: 38px; }
.org-node-head > span:nth-child(2) { display: grid; gap: 2px; }
.org-node-head strong { font: 650 15px var(--font-display); }
.org-node-head small { color: #555; font-size: 12px; }
.org-node-head b { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 9999px; background: var(--error-soft); color: #b91c1c; font: 600 12px var(--font-mono); }
.org-node-summary { min-height: 48px; color: var(--text); font-size: 14px; line-height: 1.5; }
.org-node-activity { padding: 10px; border-radius: 7px; background: var(--surface-alt); color: #555; font-size: 12px; line-height: 1.5; }
.org-node-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.org-node-footer em { color: #4338ca; font-size: 12px; font-style: normal; font-weight: 600; white-space: nowrap; }
.automation-lower { margin-top: 20px; }

/* v0.7: accounting, operations, commission and company-wide calendar */
.human-only-notice { margin-bottom: 20px; }
.step-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.step-list li { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; min-height: 66px; }
.step-list li:not(:last-child)::after { content: ""; position: absolute; top: 30px; bottom: 0; left: 15px; width: 2px; background: var(--border); }
.step-list b { z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: #666; }
.step-list .done b { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }.step-list .active b { border-color: #c7d2fe; background: var(--primary-soft); color: var(--primary); }
.step-list span { display: grid; gap: 3px; align-content: start; padding-top: 3px; }.step-list strong { font-size: 14px; }.step-list small { color: #666; line-height: 1.4; }
.ops-health-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(320px,1fr); gap: 20px; }
.ops-alert-main { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; align-items: start; margin: 18px 0; padding: 16px; border: 1px solid #fecaca; border-radius: 10px; background: #fff7f7; }
.ops-alert-main h3 { margin-bottom: 6px; font-size: 18px; }.ops-alert-main p { margin: 0; color: #555; line-height: 1.6; }
.health-list { display: grid; }.health-list > div { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.health-list > div:last-child { border-bottom: 0; }.health-list p { display: grid; gap: 3px; margin: 0; }.health-list small { color: #666; }.health-list b { font-size: 12px; color: #555; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }.health-dot.success { background: var(--success); }.health-dot.warning { background: var(--warning); }
.rule-stack { display: grid; gap: 12px; }.rule-stack article { padding: 16px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 9px; }.rule-stack article.warning { border-left-color: var(--warning); background: #fffbeb; }
.rule-stack article > span:first-child { color: #666; font-size: 11px; font-weight: 700; letter-spacing: .05em; }.rule-stack h3 { margin: 5px 0; font-size: 18px; }.rule-stack p { margin: 0 0 12px; color: #555; line-height: 1.55; }
.payout-list { display: grid; margin-top: 8px; }.payout-list label { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); }
.payout-list input { width: 18px; height: 18px; accent-color: var(--primary); }.payout-list span { display: grid; gap: 3px; }.payout-list small { color: #666; }.payout-list b { font: 600 16px var(--font-mono); }
.company-calendar-card { overflow-x: auto; }.company-calendar-week,.company-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(120px,1fr)); min-width: 840px; }
.company-calendar-week { border: 1px solid var(--border); border-bottom: 0; background: var(--surface-alt); }.company-calendar-week span { padding: 10px; color: #555; font-size: 12px; font-weight: 700; text-align: center; }
.company-calendar-grid { border-top: 1px solid var(--border); border-left: 1px solid var(--border); }.company-day { min-height: 116px; padding: 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }.company-day.empty { background: var(--surface-alt); }.company-day.today { box-shadow: inset 0 0 0 2px var(--primary); }.company-day > strong { display: block; margin-bottom: 6px; font: 600 12px var(--font-mono); }
.calendar-event { width: 100%; display: block; margin-top: 5px; padding: 6px 7px; border: 0; border-left: 3px solid #94a3b8; border-radius: 4px; background: #f8fafc; color: #444; font-size: 11px; line-height: 1.35; text-align: left; }.calendar-event:hover { filter: brightness(.97); }.calendar-event.error { border-left-color: var(--error); background: #fff1f2; }.calendar-event.warning { border-left-color: var(--warning); background: #fffbeb; }.calendar-event.success { border-left-color: var(--success); background: #ecfdf5; }.calendar-event.info { border-left-color: var(--primary); background: var(--primary-soft); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; color: #555; font-size: 12px; }.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }.calendar-legend i { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }.calendar-legend i.error { background: var(--error); }.calendar-legend i.warning { background: var(--warning); }.calendar-legend i.success { background: var(--success); }.calendar-legend i.info { background: var(--primary); }
.priority-stack { display: grid; gap: 14px; }.priority-item { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 20px; border: 1px solid var(--border); border-left: 4px solid var(--warning); border-radius: 10px; background: var(--surface); }.priority-item.critical { border-left-color: var(--error); }.priority-rank { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-alt); font: 600 16px var(--font-mono); }.priority-item > div > span { color: #666; font-size: 11px; font-weight: 700; letter-spacing: .04em; }.priority-item h3 { margin: 5px 0; font-size: 18px; }.priority-item p { margin: 0 0 10px; color: #555; line-height: 1.55; }.priority-item .pill + .pill { margin-left: 6px; }

.calendar-card { margin-top: 20px; }
.content-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(150px,1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.calendar-day { min-width: 150px; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.calendar-day > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.calendar-day > header strong { font: 650 13px var(--font-display); }.calendar-day > header span { color: #555; font: 11px var(--font-mono); }
.calendar-day > div { min-height: 190px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 12px; }
.calendar-day h3 { font-size: 14px; line-height: 1.5; }.calendar-day p { margin: 0; color: #555; font-size: 12px; }.calendar-day .pill { margin-top: auto; }
.channel-label { color: #4338ca; font-size: 12px; font-weight: 700; }
.content-preview { min-height: 620px; }
.post-author { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.post-author > div { display: grid; gap: 2px; }.post-author strong { font-family: var(--font-display); }.post-author small { color: #555; font-size: 12px; }
.post-copy { padding: 18px 0; font-size: 15px; line-height: 1.7; }.post-copy p { margin: 0 0 14px; }.post-tags { color: #4338ca; }
.content-placeholder { min-height: 160px; display: grid; place-content: center; gap: 6px; padding: 24px; border: 1px dashed #a5b4fc; border-radius: 10px; background: var(--primary-soft); text-align: center; }
.content-placeholder span { color: #4338ca; font-size: 12px; font-weight: 700; text-transform: uppercase; }.content-placeholder strong { font: 600 15px var(--font-display); }.content-placeholder small { color: #555; font-size: 12px; }
.draft-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.performance-bars { display: grid; gap: 16px; }.performance-bars > div { display: grid; grid-template-columns: 190px minmax(0,1fr) 54px; align-items: center; gap: 12px; font-size: 13px; }.performance-bars strong { font: 600 12px var(--font-mono); text-align: right; }

.care-summary { margin-bottom: 18px; padding: 14px 16px; border-left: 3px solid var(--error); border-radius: 0 8px 8px 0; background: var(--error-soft); }
.care-summary span { color: #991b1b; font-size: 12px; font-weight: 700; letter-spacing: .05em; }.care-summary p { margin: 5px 0 0; font-size: 14px; line-height: 1.6; }
.message-thread { display: grid; gap: 10px; }.message { max-width: 86%; padding: 12px 14px; border-radius: 10px; background: var(--surface-alt); }.message.ai { justify-self: end; background: var(--primary-soft); }.message strong { font-size: 12px; }.message p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; }
.draft-response { display: grid; gap: 7px; margin-top: 18px; }.draft-response label { font-size: 13px; font-weight: 600; }.draft-response textarea { resize: vertical; line-height: 1.55; }

.template-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.template-card { min-height: 230px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: left; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.template-card:hover,.template-card.selected { transform: translateY(-2px); border-color: #a5b4fc; box-shadow: var(--shadow-hover); }.template-card.selected { background: var(--primary-soft); }
.template-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-alt); color: #4338ca; }.template-card h3 { font-size: 16px; }.template-card p { margin: 0; color: #555; font-size: 13px; line-height: 1.55; }.template-card > span:last-child { margin-top: auto; color: #555; font-size: 12px; }
.contract-workspace { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(320px,.8fr); gap: 20px; }
.contract-document { padding: 36px 48px; }.contract-doc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); color: #555; font-size: 12px; }.contract-document > h2 { margin: 30px auto 10px; max-width: 620px; text-align: center; font-size: 23px; }.contract-parties { margin: 0 auto 30px; max-width: 680px; color: #555; text-align: center; }.contract-document article { position: relative; margin: 18px 0; padding: 16px 18px; border: 1px solid transparent; border-radius: 8px; }.contract-document article h3 { margin-bottom: 7px; }.contract-document article p { margin: 0; font-size: 14px; line-height: 1.7; }.contract-document article.changed-clause { border-color: #fcd34d; background: var(--warning-soft); }.changed-clause > span { display: block; margin-bottom: 6px; color: #92400e; font-size: 11px; font-weight: 700; letter-spacing: .05em; }.contract-checks { align-self: start; position: sticky; top: 76px; }

@media (max-width: 1180px) {
  .ai-org-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 14px; }.ai-org-grid::before { display: none; }.ai-org-node::before { display: none; }
  .template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.contract-workspace { grid-template-columns: 1fr; }.contract-checks { position: static; }
  .ops-health-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ai-org-shell { padding: 18px; }.ai-owner-node { grid-template-columns: 40px minmax(0,1fr); }.ai-owner-node > .pill { grid-column: 1 / -1; justify-self: start; }.ai-org-grid { grid-template-columns: 1fr; }.ai-org-node { min-height: 220px; }
  .template-grid { grid-template-columns: 1fr; }.template-card { min-height: 190px; }.contract-document { padding: 22px 18px; }.contract-document > h2 { font-size: 19px; }.performance-bars > div { grid-template-columns: 1fr 48px; }.performance-bars .progress { grid-column: 1 / -1; grid-row: 2; }
  .draft-actions { flex-direction: column-reverse; }.draft-actions .button { width: 100%; }.message { max-width: 96%; }
  .priority-item { grid-template-columns: 38px minmax(0,1fr); padding: 16px; }.priority-item > .button { grid-column: 1 / -1; width: 100%; }.ops-alert-main { grid-template-columns: 1fr; }.health-list > div { grid-template-columns: 12px minmax(0,1fr); }.health-list > div > b { grid-column: 2; }
}
.toast svg { flex: 0 0 auto; width: 18px; height: 18px; }
.toast.warning { border-color: #fde68a; background: var(--warning-soft); color: #92400e; }
.toast.error { border-color: #fecaca; background: var(--error-soft); color: #991b1b; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
[hidden] { display: none !important; }

@media (max-width: 1180px) {
  :root { --sidebar: 76px; }
  .brand-copy, .company-copy, .company-switcher > span:last-child, .nav-group-label > span, .nav-group-meta, .nav-button span:not(.nav-button-copy):not(.nav-badge), .nav-button-copy > span:last-child, .sidebar-footer p { display: none; }
  .brand { width: 100%; justify-content: center; }.company-switcher { display: flex; justify-content: center; padding: 9px; }
  .company-menu { top: 72px; left: 64px; width: 240px; }
  .nav-group-toggle { justify-content: center; padding: 0; }.nav-list { padding-left: 0; }.nav-button { justify-content: center; padding: 0; }.nav-button-copy { justify-content: center; }.nav-button svg { width: 19px; height: 19px; }
  .nav-badge { position: absolute; margin: -20px -38px 0 0; }
  .demo-launch { width: 44px; min-height: 44px; padding: 0; justify-content: center; }.demo-launch span:last-child { display: none; }
  .sidebar-footer { padding: 14px 0 2px; }.policy-line { justify-content: center; }.policy-line strong { display: none; }
  .department-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .health-matrix { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .span-2 { grid-column: span 4; }.span-3 { grid-column: span 6; }.span-4 { grid-column: span 6; }.span-5,.span-7,.span-8,.span-9 { grid-column: span 12; }
  .flow-map { grid-template-columns: repeat(3,minmax(0,1fr)); }.flow-node:nth-child(3)::after { display: none; }
  .strategy-column-labels, .strategy-track { grid-template-columns: 1.2fr .8fr 1fr; }.strategy-column-labels span:nth-child(3),.strategy-owner { display: none; }
}
@media (max-width: 767px) {
  :root { --sidebar: 260px; }
  body.nav-open { overflow: hidden; }
  .sidebar { z-index: 50; width: 260px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 18px 60px rgba(0,0,0,.16); }
  body.nav-open .sidebar { transform: translateX(0); }
  .brand-copy, .company-copy { display: grid !important; }
  .company-switcher > span:last-child, .nav-group-label > span, .nav-group-meta, .nav-button-copy > span:last-child { display: flex !important; }
  .sidebar-footer p { display: block !important; }
  .company-switcher { display: grid; justify-content: initial; }
  .company-menu { top: 134px; left: 12px; width: 236px; }
  .nav-group-toggle { justify-content: space-between; padding: 0 10px; }.nav-list { padding-left: 8px; }.nav-button { justify-content: space-between; padding: 0 10px; }.nav-button-copy { justify-content: initial; }.nav-badge { position: static; margin: 0; }
  .nav-group-toggle, .nav-button { min-height: 44px; }
  .sidebar-footer { padding: 14px 10px 2px; }.policy-line { justify-content: flex-start; }.policy-line strong { display: inline; }
  .mobile-only, .mobile-menu { display: grid; }.app { margin-left: 0; }
  .topbar { padding: 0 14px; }.crumb > span:first-child, .data-status, .search-button span:nth-child(2), .search-button kbd, .ai-chat-button span:last-child { display: none; }.search-button { min-width: 36px; width: 36px; padding: 0; justify-content: center; border: 0; background: transparent; }.ai-chat-button { width: 36px; padding: 0; justify-content: center; }
  #main { padding: 24px 16px 48px; }.page-head { display: block; }.head-actions { flex-direction: column; align-items: stretch; margin-top: 16px; }.head-actions .button { width: 100%; min-height: 44px; }
  .grid-12 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-12 { grid-column: span 2; }
  .metric-card.span-3 { grid-column: span 1; }.metric-card { padding: 13px; }.metric-value { font-size: 19px; }
  .department-grid, .health-matrix { grid-template-columns: 1fr; gap: 12px; }.department-summary { min-height: auto; }
  .flow-map { grid-template-columns: 1fr; }.flow-node::after { display: none; }
  .option-grid { grid-template-columns: 1fr; }.decision-success { padding: 18px; }.strategy-map-head { grid-template-columns: 1fr; gap: 18px; padding: 18px; }.strategy-column-labels { display: none; }.strategy-track { grid-template-columns: 1fr; gap: 11px; padding: 16px 18px; }.strategy-owner { display: block; }.strategy-kpi::before { content: "KPI  "; color: var(--neutral); font: 500 9px var(--font-body); letter-spacing: .06em; }.strategy-initiatives { padding-top: 2px; }.chat-drawer { width: 100%; }.toast-region { right: 16px; bottom: 16px; }
  .decision-footer, .detail-actions { flex-direction: column-reverse; }.decision-footer .button, .detail-actions .button { width: 100%; min-height: 44px; }.detail-body { max-height: calc(100vh - 190px); padding: 16px; }.detail-grid { grid-template-columns: 1fr; }.audit-trace { grid-template-columns: 1fr 1fr; }.audit-trace span:nth-child(2)::after { display: none; }.variance-summary { grid-template-columns: 1fr; }.handoff-chain { align-items: flex-start; }
  .interview-demo { right: 12px; bottom: 12px; width: calc(100% - 24px); max-height: calc(100dvh - 88px); overflow-y: auto; }.demo-actions { align-items: stretch; }.demo-actions > div { flex: 1; }.demo-actions > div .button { flex: 1; min-height: 44px; }.demo-actions > .button { min-height: 44px; }.demo-shortcut { display: none; }.demo-focus { scroll-margin: 96px 16px 390px; }
  .heatmap { grid-template-columns: 86px repeat(4,64px); overflow-x: auto; }
  .form-grid { grid-template-columns: 1fr; }.page-head h1 { font-size: 27px; line-height: 1.22; letter-spacing: -.02em; }
  .list-row { grid-template-columns: minmax(0,1fr); }.row-meta { padding-left: 41px; }
  .dialog-wrap { padding-top: 20px; }.mini-bar-row { grid-template-columns: 82px minmax(0,1fr) 44px; }
}
@media (max-width: 430px) {
  .grid-12 { grid-template-columns: 1fr; }.span-2,.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-12,.metric-card.span-3 { grid-column: span 1; }
  .metric-grid-mobile { grid-template-columns: repeat(2,minmax(0,1fr)); }.metric-grid-mobile .metric-card { grid-column: span 1; }
  .department-stats { grid-template-columns: 1fr 1fr 1fr; }.topbar-right { gap: 6px; }.avatar-button { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }