:root {
  --bg: #f4f7fb;
  --bg-strong: #e9eef7;
  --panel: rgba(255,255,255,.95);
  --panel-alt: #f8fbff;
  --border: #dbe4f0;
  --border-strong: #c7d3e4;
  --text: #0f172a;
  --text-soft: #475569;
  --text-muted: #64748b;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: #dbeafe;
  --indigo: #4f46e5;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 14px 38px rgba(15,23,42,.08);
  --radius-xl: 24px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.10), transparent 28%),
    radial-gradient(circle at top right, rgba(99,102,241,.10), transparent 24%),
    linear-gradient(180deg, var(--bg-strong) 0%, var(--bg) 260px);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.demo-strip {
  position: sticky; top: 0; z-index: 100;
  min-height: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 12px;
  background: #f7efe1;
  border-bottom: 1px solid #f0cfa2;
  color: #9a3412;
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
}
.site-wrap { max-width: 1680px; margin: 0 auto; padding: 18px; }
.card {
  background: var(--panel);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; margin-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { width: 210px; max-width: 32vw; height: auto; }
.brand-kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--primary); text-transform: uppercase; }
.brand-title { margin-top: 4px; color: var(--text-soft); font-weight: 700; }
.header-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.header-badge {
  border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 800;
  background: var(--primary-soft); color: var(--primary-strong); border: 1px solid #bfdbfe;
}
.shell-grid {
  display: grid; grid-template-columns: 276px minmax(0, 1fr) 332px; gap: 18px; align-items: start;
}
.left-rail, .right-rail .rail-card, .guide-panel {
  position: sticky; top: 64px;
}
.left-rail { padding: 18px; max-height: calc(100vh - 88px); overflow: auto; }
.nav-title { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--primary); text-transform: uppercase; }
.nav-copy { margin-top: 8px; color: var(--text-soft); line-height: 1.6; font-size: 14px; }
.nav-group { margin-top: 18px; display: grid; gap: 8px; }
.nav-group-title { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.nav-link {
  padding: 12px 14px; border-radius: 14px; font-weight: 800; font-size: 14px; color: #334155;
  border: 1px solid transparent; transition: .18s ease;
}
.nav-link:hover { background: linear-gradient(180deg, #fff, #f8fafc); border-color: var(--border); transform: translateY(-1px); }
.nav-link.active { background: linear-gradient(135deg, var(--primary-soft) 0%, #eef2ff 100%); border-color: #93c5fd; color: var(--primary-strong); }
.nav-divider { height: 1px; background: var(--border); margin: 18px 0; }
.mini-action {
  display: block; margin-top: 8px; border-radius: 14px; padding: 12px 14px;
  background: white; border: 1px solid var(--border); font-weight: 700; color: var(--text-soft);
}
.main-column { min-width: 0; display: grid; gap: 18px; }
.hero { padding: 24px; background: linear-gradient(135deg, rgba(255,255,255,.97) 0%, rgba(239,246,255,.96) 100%); }
.hero-kicker { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--primary); text-transform: uppercase; }
.hero h1 { margin: 10px 0 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; letter-spacing: -.03em; }
.hero p { margin: 12px 0 0; color: var(--text-soft); line-height: 1.7; max-width: 980px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: 14px; padding: 10px 16px; font-size: 14px; font-weight: 800; border: 1px solid transparent;
  cursor: pointer; transition: .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #fff; border-color: #1d4ed8;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 14%, rgba(255,255,255,0) 40%),
    radial-gradient(140% 88% at 50% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 56%),
    linear-gradient(135deg, #3b82f6 0%, #2563eb 42%, #1d4ed8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(15,23,42,.16), 0 12px 24px rgba(37,99,235,.24);
}
.btn-secondary { background: rgba(255,255,255,.92); color: #334155; border-color: var(--border-strong); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { border: 1px solid var(--border); border-radius: 22px; padding: 18px; box-shadow: var(--shadow-sm); }
.metric-label { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.metric-value { margin-top: 10px; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; }
.metric-note { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.tone-slate { background: white; }
.tone-blue { background: #eff6ff; border-color: #bfdbfe; }
.tone-amber { background: #fffbeb; border-color: #fcd34d; }
.tone-emerald { background: #ecfdf5; border-color: #a7f3d0; }
.tone-rose { background: #fff1f2; border-color: #fecdd3; }
.tone-indigo { background: #eef2ff; border-color: #c7d2fe; }
.content-grid { display: grid; gap: 18px; }
.content-grid.two { grid-template-columns: 1.1fr .9fr; }
.content-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-card { padding: 22px; }
.section-kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--primary); text-transform: uppercase; }
.section-title { margin-top: 6px; font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; }
.section-copy { margin-top: 10px; color: var(--text-soft); line-height: 1.7; }
.lane-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.lane {
  border: 1px solid var(--border); border-radius: 22px; background: var(--panel-alt); padding: 14px;
}
.lane-head { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.lane-title { font-size: 14px; font-weight: 900; color: var(--text); }
.lane-subtitle { margin-top: 4px; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.lane-body { display: grid; gap: 10px; margin-top: 12px; }
.record-card {
  width: 100%; text-align: left; border: 1px solid var(--border); background: white; border-radius: 18px;
  padding: 14px; transition: .16s ease; cursor: pointer;
}
.record-card:hover, .record-card.active { border-color: #93c5fd; box-shadow: 0 12px 24px rgba(37,99,235,.12); transform: translateY(-1px); }
.record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.record-title { font-weight: 800; color: var(--text); }
.record-meta { margin-top: 4px; font-size: 12px; letter-spacing: .02em; color: var(--text-muted); }
.status-chip {
  white-space: nowrap; border-radius: 999px; padding: 6px 10px; border: 1px solid #bfdbfe;
  background: #eff6ff; color: var(--primary-strong); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.record-body { margin-top: 10px; color: var(--text-soft); font-size: 14px; line-height: 1.6; }
.record-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.micro-chip {
  border-radius: 999px; padding: 5px 8px; font-size: 11px; font-weight: 800; border: 1px solid var(--border);
  background: var(--panel-alt); color: var(--text-soft); text-transform: uppercase; letter-spacing: .08em;
}
.record-next { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--text); }
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 20px; margin-top: 16px; }
.data-table { width: 100%; border-collapse: collapse; background: white; }
.data-table th, .data-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: 14px; }
.data-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--text-muted); background: #f8fbff; }
.right-rail { display: grid; gap: 18px; align-self: start; }
.guide-panel, .rail-card { background: var(--panel); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-sm); padding: 18px; }
.guide-panel { display: block; }
.guide-panel:not(.is-open) { display: none; }
.guide-title, .rail-title { font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.guide-panel ul { margin: 12px 0 0 18px; padding: 0; color: var(--text-soft); line-height: 1.7; }
.rail-copy { margin: 10px 0 0; color: var(--text-soft); line-height: 1.7; font-size: 14px; }
.rail-note { margin-top: 12px; border-radius: 16px; padding: 12px 14px; background: #f8fbff; border: 1px solid var(--border); color: var(--text-soft); font-size: 14px; line-height: 1.6; }
.detail-title { margin-top: 12px; font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; }
.detail-meta { margin-top: 4px; color: var(--text-muted); font-size: 13px; }
.detail-status { margin-top: 12px; display: inline-flex; border-radius: 999px; padding: 6px 10px; background: #eff6ff; border: 1px solid #bfdbfe; color: var(--primary-strong); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.detail-next { margin-top: 12px; border-radius: 16px; padding: 12px 14px; background: #f8fbff; border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.6; }
.stepper { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.step { flex: 1 1 140px; border: 1px solid var(--border); border-radius: 18px; background: white; padding: 12px 14px; }
.step-num { font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.step-title { margin-top: 8px; font-weight: 800; }
.step-copy { margin-top: 6px; font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.phone-shell {
  margin-top: 16px; max-width: 420px; background: #0f172a; padding: 10px; border-radius: 32px; box-shadow: var(--shadow-md);
}
.phone-screen {
  background: linear-gradient(180deg, #eff3f8 0%, #f8fbff 100%); border-radius: 24px; min-height: 720px; overflow: hidden;
}
.phone-header { padding: 18px 18px 0; }
.phone-body { padding: 18px; display: grid; gap: 14px; }
.mobile-card { background: rgba(255,255,255,.96); border: 1px solid var(--border); border-radius: 24px; padding: 18px; box-shadow: var(--shadow-sm); }
.mobile-eyebrow { font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.mobile-title { margin-top: 8px; font-size: 2rem; font-weight: 900; line-height: .98; letter-spacing: -.04em; }
.mobile-subtitle { margin-top: 10px; color: var(--text-soft); line-height: 1.7; }
.mobile-action-stack { display: grid; gap: 12px; margin-top: 16px; }
.mobile-button { display: block; width: 100%; text-align: center; }
.field { border-radius: 16px; border: 1px solid var(--border); background: white; padding: 12px 14px; }
.field-label { font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.field-value { margin-top: 6px; font-weight: 700; color: var(--text); }
.warning-box { border-radius: 18px; border: 1px solid #fcd34d; background: #fffbeb; padding: 14px; color: #92400e; }
.success-box { border-radius: 18px; border: 1px solid #a7f3d0; background: #ecfdf5; padding: 14px; color: #166534; }
.kpi-list { display: grid; gap: 12px; margin-top: 16px; }
.kpi-row { border: 1px solid var(--border); border-radius: 18px; padding: 14px; background: white; }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; }
.kpi-bar { margin-top: 10px; height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.kpi-fill { height: 100%; border-radius: 999px; background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); }
.site-footer { margin: 18px 4px 0; color: var(--text-muted); font-size: 13px; }
@media (max-width: 1360px) { .shell-grid { grid-template-columns: 250px minmax(0,1fr); } .right-rail { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } .right-rail .rail-card, .guide-panel { position: static; } }
@media (max-width: 980px) { .site-wrap { padding: 14px; } .shell-grid, .metric-grid, .content-grid.two, .content-grid.three, .lane-board, .right-rail { grid-template-columns: 1fr; } .left-rail { position: static; max-height: none; } .site-header { flex-direction: column; align-items: flex-start; } .brand img { width: 170px; } }
@media print { .demo-strip, .left-rail, .guide-panel, .hero-actions, .site-footer { display: none !important; } .shell-grid { grid-template-columns: 1fr !important; } body { background: white; } .card, .rail-card { box-shadow: none; } }


/* ===== interactive demo rebuild additions ===== */
.demo-workspace { display:grid; gap:18px; }
.demo-workspace.two { grid-template-columns: 1.1fr .9fr; }
.demo-panel {
  background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(248,251,255,.96) 100%);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.demo-panel h3, .demo-panel h4 { margin: 0; font-size: 1.06rem; letter-spacing: -.02em; }
.demo-panel p { color: var(--text-soft); line-height: 1.7; }
.demo-subtle { color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.demo-action-row { display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; }
.demo-stack { display:grid; gap:14px; }
.demo-dropzone {
  border: 1.5px dashed #93c5fd;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
  border-radius: 22px;
  padding: 22px;
  text-align: center;
}
.demo-dropzone.dragover { border-color: var(--primary-strong); background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%); }
.demo-drop-title { font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; }
.demo-drop-copy { margin-top: 8px; color: var(--text-soft); line-height: 1.7; }
.demo-inline-badges, .demo-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.demo-chip {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); background:#fff; color:#334155;
  border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800;
}
.demo-chip.action { cursor:pointer; }
.demo-chip.action:hover { border-color:#93c5fd; background:#eff6ff; color:#1d4ed8; }
.demo-doc-list, .demo-warning-list, .demo-event-list, .demo-checklist { display:grid; gap:10px; margin-top: 14px; }
.demo-doc-row, .demo-warning-row, .demo-event-row, .demo-check-row {
  border:1px solid var(--border); background:#fff; border-radius:18px; padding:14px;
}
.demo-doc-row-head, .demo-event-head, .demo-check-row-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.demo-doc-title, .demo-event-title { font-weight:800; }
.demo-doc-meta, .demo-event-meta, .demo-row-meta { margin-top:4px; color: var(--text-muted); font-size: 13px; line-height:1.5; }
.demo-doc-snippet, .demo-event-copy, .demo-warning-row p, .demo-check-row p { margin-top:8px; color: var(--text-soft); font-size: 14px; line-height:1.65; }
.demo-empty {
  border:1px dashed var(--border-strong); border-radius:18px; padding:18px; color:var(--text-soft); background:#f8fbff;
}
.demo-form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.demo-field, .demo-textarea-wrap { display:grid; gap:8px; }
.demo-field label, .demo-textarea-wrap label { font-size:12px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color: var(--text-muted); }
.demo-field input, .demo-field select, .demo-textarea-wrap textarea {
  width:100%; min-height:48px; border-radius:16px; border:1px solid var(--border-strong); background:#fff; color:var(--text);
  padding:12px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.demo-textarea-wrap textarea { min-height:110px; resize:vertical; }
.demo-field-note { color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.demo-rule {
  margin-top:14px; border:1px solid #fcd34d; background:#fffbeb; border-radius:18px; padding:14px; color:#92400e; font-size:14px; line-height:1.6;
}
.demo-confirm {
  display:flex; align-items:flex-start; gap:12px; margin-top:14px; padding:14px; border-radius:18px; background:#eff6ff; border:1px solid #bfdbfe;
}
.demo-confirm input { margin-top:3px; transform: scale(1.15); }
.demo-receipt {
  border:1px solid #a7f3d0; background:#ecfdf5; border-radius:22px; padding:20px;
}
.demo-receipt-title { font-size:1.06rem; font-weight:900; color:#065f46; }
.demo-timeline {
  display:grid; gap:12px;
}
.demo-timeline .demo-event-row { position: relative; padding-left: 18px; }
.demo-timeline .demo-event-row::before {
  content:''; position:absolute; left:8px; top:18px; bottom:-12px; width:2px; background:#dbeafe;
}
.demo-timeline .demo-event-row:last-child::before { display:none; }
.demo-timeline .demo-event-row::after {
  content:''; position:absolute; left:3px; top:18px; width:12px; height:12px; border-radius:999px; background:#2563eb; box-shadow:0 0 0 4px #dbeafe;
}
.demo-status-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; }
.demo-mini-stat { border:1px solid var(--border); border-radius:18px; background:#fff; padding:14px; }
.demo-mini-stat-label { font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
.demo-mini-stat-value { margin-top:8px; font-size:1.1rem; font-weight:900; }
.demo-frontdoor-card {
  display:grid; grid-template-columns: 1.1fr .9fr; gap:18px;
}
.demo-hero-note { margin-top:12px; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; font-weight:800; font-size:12px; }
.demo-highlight-card { border:1px solid var(--border); border-radius:22px; background:#fff; padding:18px; }
.demo-highlight-card strong { display:block; font-size: 1rem; margin-bottom: 6px; }
.demo-divider { height:1px; background:var(--border); margin:16px 0; }
.demo-link-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.demo-helper-text { margin-top:10px; color:var(--text-soft); font-size:14px; line-height:1.65; }
.demo-judicial-live { margin-top:18px; }
.demo-live-banner {
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:22px; padding:18px;
}
.demo-live-actions { display:flex; flex-wrap:wrap; gap:10px; }
.demo-inline-table { width:100%; border-collapse:collapse; margin-top:12px; }
.demo-inline-table th, .demo-inline-table td { padding:12px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; font-size:14px; }
.demo-inline-table th { font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--text-muted); }
.demo-front-summary { margin-top:16px; }
.demo-hidden { display:none !important; }

@media (max-width: 1100px) {
  .demo-workspace.two, .demo-frontdoor-card, .demo-status-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .demo-form-grid, .demo-link-grid { grid-template-columns: 1fr; }
  .demo-live-banner { flex-direction: column; }
}

.demo-field input.demo-autofilled, .demo-textarea-wrap textarea.demo-autofilled {
  border-color:#93c5fd;
  background:linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
  transition:box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.demo-autofill-log { display:grid; gap:8px; margin-top:12px; }
.demo-autofill-step {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  border:1px solid var(--border); border-radius:16px; padding:10px 12px; background:#f8fbff;
}
.demo-autofill-step strong { font-size:13px; }
.demo-autofill-step span { color:var(--text-muted); font-size:12px; line-height:1.55; }


.demo-step-grid { display:grid; gap:10px; }
.demo-step-row { display:grid; grid-template-columns: 82px 1fr; gap:12px; align-items:start; border:1px solid var(--border); border-radius:18px; padding:14px; background:#fff; }
.demo-source-panel { display:grid; gap:10px; }
.demo-source-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border:1px solid var(--border); border-radius:18px; padding:14px; background:#fff; }
.demo-source-value { font-weight:900; color:var(--text); text-align:right; max-width:40%; }
.status-chip.is-strong { background:#ecfdf5; border-color:#a7f3d0; color:#047857; }
.status-chip.is-watch { background:#fffbeb; border-color:#fcd34d; color:#b45309; }
.status-chip.is-caution { background:#fff1f2; border-color:#fecdd3; color:#be123c; }
@media (max-width: 900px) { .demo-source-row, .demo-step-row { grid-template-columns: 1fr; } .demo-source-row { flex-direction:column; } .demo-source-value { max-width:none; text-align:left; } }


.selectable-doc { width:100%; text-align:left; cursor:pointer; appearance:none; font:inherit; color:inherit; }
.selectable-doc.active { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.demo-workbench { display:grid; gap:12px; }
.demo-confidence-meter { height:10px; border-radius:999px; overflow:hidden; background:#e2e8f0; }
.demo-confidence-meter span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, #2563eb 0%, #60a5fa 100%); }
.demo-workbench-extract { border:1px solid var(--border); border-radius:18px; background:#f8fbff; padding:14px; color:var(--text-soft); font-size:14px; line-height:1.7; }
.demo-compare-grid { display:grid; gap:10px; }
.demo-compare-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border:1px solid var(--border); border-radius:18px; padding:14px; background:#fff; }
.demo-compare-values { display:grid; gap:10px; justify-items:end; text-align:right; }
.demo-compare-values strong { display:block; font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.demo-compare-values span { display:block; margin-top:4px; color:var(--text); font-size:13px; }
@media (max-width: 900px) { .demo-compare-row { flex-direction:column; } .demo-compare-values { justify-items:start; text-align:left; } }


.demo-timeline-mini { display:grid; gap:10px; }
.demo-mini-event { padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:#fff; display:grid; gap:4px; }
.demo-mini-event strong { font-size:.9rem; }
.demo-mini-event span { color:var(--text-soft); font-size:.88rem; }
.demo-health-card { border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%); padding:18px; box-shadow: var(--shadow-sm); }
.demo-check-grid { display:grid; gap:10px; margin-top:14px; }
.demo-compare-grid { display:grid; gap:10px; }
.demo-inline-table .demo-chip { margin-right:6px; }

.demo-flow-map { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.demo-flow-map.compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
.demo-flow-step, .demo-story-row, .demo-route-row, .demo-entity-card {
  border:1px solid var(--border); background:#fff; border-radius:18px; padding:14px;
}
.demo-flow-kicker { font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
.demo-flow-state { margin-top:8px; font-size:1rem; font-weight:900; color:var(--text); }
.demo-flow-copy { margin-top:8px; color:var(--text-soft); font-size:14px; line-height:1.6; }
.demo-story-grid, .demo-route-grid, .demo-entity-grid { display:grid; gap:12px; }
.demo-story-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.demo-entity-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px) { .demo-flow-map, .demo-flow-map.compact, .demo-entity-grid { grid-template-columns: 1fr; } }

.demo-workbench-shell { display:grid; gap:14px; }
.demo-calendar-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-top:8px; }
.demo-slot-card { border:1px solid var(--border); border-radius:18px; background:#fff; padding:16px; text-align:left; display:grid; gap:6px; cursor:pointer; box-shadow:var(--shadow-soft); }
.demo-slot-card strong { color:var(--text); font-size:15px; }
.demo-slot-card span { color:var(--text-soft); font-size:13px; }
.demo-slot-card:hover { border-color:#93c5fd; transform:translateY(-1px); }
.demo-composer-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.demo-order-panel { border:1px solid var(--border); border-radius:18px; background:#fff; padding:16px; display:grid; gap:12px; }
.demo-order-list { display:grid; gap:10px; }
.demo-order-list > div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--border); padding-bottom:10px; }
.demo-order-list > div:last-child { border-bottom:0; padding-bottom:0; }
.demo-order-list strong { color:var(--text); font-size:14px; }
.demo-order-list span { color:var(--text-soft); font-size:14px; text-align:right; }
.demo-chip.is-selected { border-color:#2563eb; color:#1d4ed8; background:#eff6ff; }
@media (max-width: 980px) { .demo-calendar-grid, .demo-composer-grid { grid-template-columns: 1fr; } }


.demo-kpi-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top:14px; }
.demo-kpi-card { border:1px solid var(--border); border-radius:18px; background:#fff; padding:16px; display:grid; gap:8px; }
.demo-kpi-title { font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
.demo-kpi-value { font-size:1.35rem; font-weight:900; color:var(--text); }
.demo-kpi-copy { color:var(--text-soft); font-size:14px; line-height:1.6; }
@media (max-width: 980px) { .demo-kpi-grid { grid-template-columns: 1fr; } }


.demo-viewer-grid, .demo-studio-grid { display:grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap:14px; }
.demo-doc-list { display:grid; gap:10px; }
.demo-doc-button {
  width:100%; text-align:left; border:1px solid var(--border); border-radius:16px; background:#fff;
  padding:12px 14px; display:grid; gap:6px; cursor:pointer; box-shadow:var(--shadow-soft);
}
.demo-doc-button strong { color:var(--text); font-size:14px; }
.demo-doc-button span { color:var(--text-soft); font-size:13px; line-height:1.5; }
.demo-doc-button.is-active { border-color:#93c5fd; box-shadow:0 0 0 3px rgba(37,99,235,.12); background:#f8fbff; }
.demo-preview-panel { border:1px solid var(--border); border-radius:18px; background:#fff; padding:16px; display:grid; gap:12px; }
.demo-preview-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.demo-thumbnail-strip { display:grid; gap:10px; }
.demo-thumb-card { border:1px solid var(--border); border-radius:14px; background:#f8fbff; padding:12px; display:grid; gap:4px; }
.demo-thumb-card strong { font-size:13px; color:var(--text); }
.demo-thumb-card span { font-size:12px; color:var(--text-soft); line-height:1.5; }
@media (max-width: 1120px) { .demo-viewer-grid, .demo-studio-grid { grid-template-columns: 1fr; } }


.demo-tab-row { display:flex; flex-wrap:wrap; gap:10px; }
.demo-tab { border:1px solid var(--border); border-radius:999px; background:#fff; color:var(--text); padding:10px 14px; font:inherit; cursor:pointer; box-shadow:var(--shadow-soft); }
.demo-tab.is-active { border-color:#2563eb; background:#eff6ff; color:#1d4ed8; }
.demo-hearing-grid, .demo-hearing-story { display:grid; gap:10px; }
.demo-hearing-step, .demo-hearing-story-row { border:1px solid var(--border); border-radius:16px; background:#fff; padding:14px; display:grid; gap:6px; }
.demo-hearing-step { grid-template-columns: 1fr auto; align-items:start; gap:14px; }
.demo-hearing-step strong, .demo-hearing-story-row strong { color:var(--text); font-size:14px; }
.demo-hearing-step span, .demo-hearing-story-row span { color:var(--text-soft); font-size:13px; line-height:1.6; }
.demo-hearing-step em { color:var(--text-muted); font-size:12px; font-style:normal; text-transform:uppercase; letter-spacing:.12em; }
.demo-hearing-story-row p { margin:0; color:var(--text-soft); font-size:14px; line-height:1.6; }
@media (max-width: 900px) { .demo-hearing-step { grid-template-columns:1fr; } }


.demo-control-bar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 20px; margin-bottom:18px; }
.demo-control-title { font-size:1.1rem; font-weight:900; letter-spacing:-.02em; margin-top:4px; }
.demo-control-subtitle { margin-top:8px; color:var(--text-soft); font-size:14px; }
.demo-control-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.demo-route-status { padding:18px 20px; }
.demo-route-status-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.demo-mode-banner { margin-top:12px; border-radius:16px; padding:12px 14px; border:1px solid var(--border); background:#f8fbff; color:var(--text-soft); font-weight:700; }
.demo-mode-banner.is-loading { background:#eff6ff; border-color:#bfdbfe; color:var(--primary-strong); }
.demo-mode-banner.is-warning { background:#fffbeb; border-color:#fcd34d; color:#92400e; }
.demo-scenario-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; margin-top:16px; }
.demo-scenario-card { text-align:left; border:1px solid var(--border); background:white; border-radius:18px; padding:14px; cursor:pointer; transition:.16s ease; }
.demo-scenario-card:hover, .demo-scenario-card.is-active { border-color:#93c5fd; box-shadow:0 12px 24px rgba(37,99,235,.12); transform:translateY(-1px); }
@media (max-width: 980px) { .demo-control-bar, .demo-route-status-head { flex-direction:column; } .demo-control-actions { justify-content:flex-start; } .demo-scenario-grid { grid-template-columns: 1fr; } }