:root { --demo-blue:#183b66; --demo-red:#e32932; --demo-ivory:#f7f4ee; }
body { padding-top: 34px; }
button { font: inherit; }
.demo-ribbon { position: fixed; z-index: 100; inset: 0 0 auto; height: 34px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 0 18px; color: #183b66; background: #edf2f7; border-bottom: 1px solid #dce4ec; font-size: 11px; }
.demo-ribbon span { font-weight: 850; }
.demo-ribbon span i, .demo-mode i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #258566; box-shadow: 0 0 0 4px rgba(37,133,102,.12); }
.demo-ribbon strong { color: #596674; font-weight: 650; }
.demo-ribbon a { justify-self: end; font-weight: 800; }
.demo-shell .sidebar { top: 34px; }
.demo-shell .main { min-width: 0; }
.demo-shell .topbar { top: 34px; }
.sidebar .nav-link { width: 100%; border: 0; color: inherit; background: transparent; text-align: left; }
.sidebar .nav-link:hover { color: white; background: rgba(255,255,255,.06); }
.sidebar .nav-link.active { color: white; background: linear-gradient(90deg, rgba(var(--brand-rgb), .5), rgba(var(--brand-rgb), .13)); }
.readonly-lock { color: #85879a; }
.demo-mode, .readonly-pill, .sync-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 8px 11px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.demo-mode, .readonly-pill { color: #5f6872; background: #f1f3f6; border: 1px solid var(--line); }
.sync-status { color: #1d7456; background: #e6f8f1; }
.view-kicker { display: block; margin-bottom: 5px; color: var(--brand); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.demo-view { display: none; animation: viewIn .24s ease; }
.demo-view.active { display: block; }
@keyframes viewIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.demo-metrics { margin-bottom: 18px; }
.compact-metrics { margin-bottom: 18px; }
.demo-dashboard-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; margin-top: 18px; }
.card-header { min-height: 64px; }
.card-header h2 { margin: 0; }
.text-link { border: 0; padding: 4px; color: var(--muted); background: transparent; cursor: pointer; }
.text-link:hover { color: var(--brand); }
.entity-mark.blue { background:#e8eef9; color:#315a86; }
.entity-mark.green { background:#e6f8f1; color:#258566; }
.entity-mark.amber { background:#fff2db; color:#a66915; }
.entity-mark.coral { background:#fdebec; color:#b8444a; }
.pipeline-demo { height: 12px; display: flex; overflow: hidden; border-radius: 999px; background:#eef0f2; }
.pipeline-demo i { width: var(--w); background: var(--c); }
.pipeline-legend { display:grid; grid-template-columns:repeat(2,1fr); gap:10px 18px; margin-top:17px; color:var(--muted); font-size:11px; }
.pipeline-legend span { display:flex; align-items:center; gap:7px; }
.pipeline-legend i { width:8px; height:8px; border-radius:50%; background:var(--c); }
.event-list { padding-top: 5px; }
.demo-event { display:grid; grid-template-columns:38px 1fr auto; gap:11px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); }
.demo-event:last-child { border-bottom:0; }
.event-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:var(--brand-soft); color:var(--brand); }
.event-icon.mail { color:#315a86; background:#e8eef9; }.event-icon.scan { color:#a66915; background:#fff2db; }.event-icon.guard { color:#258566; background:#e6f8f1; }.event-icon.learn { color:#6c459e; background:#f1ebf8; }
.demo-event strong,.demo-event p { display:block; margin:0; }.demo-event p,.demo-event time { color:var(--muted); font-size:10px; }
.priority-list { display:grid; gap:9px; }.priority-list > div { display:grid; grid-template-columns:28px 1fr; gap:10px; padding:11px; border-radius:11px; background:#faf7f3; border-left:3px solid var(--brand); }.priority-list span { font-weight:900; color:var(--brand); }.priority-list p,.priority-list strong { display:block; margin:0; font-size:11px; }.priority-list p { color:var(--muted); }.priority-list strong { color:var(--ink); font-size:12px; }
.demo-toolbar { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 18px; border-bottom:1px solid var(--line); }.filter-pills { display:flex; gap:6px; flex-wrap:wrap; }.filter-pills span { padding:7px 10px; border-radius:999px; color:var(--muted); background:var(--canvas); font-size:11px; font-weight:750; }.filter-pills .active { color:white; background:var(--ink); }
.table-sub { display:block; margin-top:2px; color:var(--muted); font-size:10px; }
.kanban { display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:14px; overflow-x:auto; padding-bottom:8px; }.kanban-column { padding:14px; border-radius:16px; background:#eef0f2; }.kanban-column > header { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; font-size:11px; }.kanban-column > header span { font-weight:850; text-transform:uppercase; letter-spacing:.06em; }.kanban-column > header strong { color:var(--muted); }.deal-card { padding:14px; margin-top:9px; border:1px solid var(--line); border-radius:13px; background:white; box-shadow:0 6px 14px rgba(31,45,59,.05); }.deal-card b { display:block; }.deal-card p { margin:5px 0 18px; color:var(--muted); font-size:11px; }.deal-card footer { display:flex; justify-content:space-between; font-size:11px; }.deal-card em { color:var(--brand); font-style:normal; font-weight:850; }.kanban-column.won { background:#e8f5f0; }
.mail-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:18px; }.mail-list,.mail-preview { overflow:hidden; }.mail-tabs { display:flex; gap:8px; padding:15px; border-bottom:1px solid var(--line); }.mail-tabs span { padding:7px 9px; color:var(--muted); font-size:10px; font-weight:800; }.mail-tabs .active { color:var(--brand); background:var(--brand-soft); border-radius:8px; }.mail-item { width:100%; display:grid; grid-template-columns:7px 1fr auto; gap:11px; align-items:start; padding:16px; border:0; border-bottom:1px solid var(--line); background:white; text-align:left; }.mail-item.selected { background:#faf6f6; }.mail-item strong,.mail-item p { display:block; margin:0; }.mail-item p,.mail-item time { color:var(--muted); font-size:10px; }.mail-priority { width:7px; height:7px; margin-top:5px; border-radius:50%; background:#bdc4ca; }.mail-priority.urgent { background:var(--brand); }.mail-priority.medium { background:#d78a12; }.mail-preview { padding:25px; }.mail-preview h2 { margin:15px 0 3px; }.mail-body { margin:25px 0; padding:20px 0; border-block:1px solid var(--line); }.draft { padding:18px; border-radius:14px; background:#edf2f7; border:1px solid #dce5ee; }.draft > span { color:var(--demo-blue); font-weight:850; }.draft p { line-height:1.7; }.draft small { color:var(--muted); }
.scan-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:18px; }.document-list { padding:0 18px 18px; }.scan-document { display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:center; padding:14px 10px; border-bottom:1px solid var(--line); }.scan-document.selected { margin:0 -5px; padding-inline:15px; border-radius:12px; background:#f7f3f3; }.scan-document strong,.scan-document small { display:block; }.scan-document small { color:var(--muted); font-size:10px; }.file-icon { width:40px; height:46px; display:grid; place-items:center; border-radius:8px; color:white; background:var(--brand); font-size:9px; font-weight:900; }.file-icon.image { background:var(--demo-blue); }.extraction { padding:0 22px 22px; }.confidence { color:#1d7456; background:#e6f8f1; border-radius:999px; padding:7px 10px; font-size:10px; font-weight:850; }.fake-document { margin:18px 0; min-height:160px; padding:25px; border:1px solid #ddd6ca; background:#fffdfa; box-shadow:0 8px 24px rgba(30,40,50,.07); }.fake-document span,.fake-document b,.fake-document strong { display:block; }.fake-document span { color:var(--brand); font-weight:900; }.fake-document b { margin:25px 0 10px; }.fake-document strong { margin-top:22px; font-size:22px; }.extraction dl { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:var(--line); }.extraction dl div { padding:11px; background:white; }.extraction dt { color:var(--muted); font-size:9px; text-transform:uppercase; }.extraction dd { margin:4px 0 0; font-weight:750; }.readonly-note { margin:15px 0 0; color:var(--muted); font-size:10px; }
.learn-layout { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; margin-bottom:18px; }.learn-paths { overflow:hidden; }.learn-path { display:grid; grid-template-columns:46px 1fr auto; gap:13px; align-items:center; padding:17px 20px; border-top:1px solid var(--line); }.learn-path.active { background:#faf7fd; }.learn-path strong,.learn-path p,.learn-path span { display:block; }.learn-path p { margin:4px 0 7px; color:var(--muted); font-size:11px; }.learn-path > b { color:#6c459e; font-size:16px; }.learn-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:13px; font-size:17px; font-weight:900; }.learn-mark.crm { color:#315a86; background:#e8eef9; }.learn-mark.phone { color:#b8444a; background:#fdebec; }.learn-mark.scan { color:#258566; background:#e6f8f1; }.learn-meta { color:#777f89; font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }.learn-focus { padding:24px; background:linear-gradient(145deg,#f7f2fc,#fff); }.learn-focus h2 { margin:8px 0; font-size:22px; line-height:1.15; }.learn-focus > p { margin:0 0 19px; color:var(--muted); font-size:12px; }.learn-progress { height:9px; overflow:hidden; margin:20px 0; border-radius:99px; background:#e7dff0; }.learn-progress i { display:block; width:var(--progress); height:100%; border-radius:inherit; background:#7a4fb2; }.learn-stat { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:11px; }.learn-stat span { color:var(--muted); }.learn-action { width:100%; margin:18px 0 9px; padding:12px; border:0; border-radius:11px; color:white; background:#7a4fb2; font-weight:850; opacity:.72; }.learn-focus > small { display:block; color:var(--muted); font-size:9px; line-height:1.5; }.adoption-plan { overflow:hidden; }.adoption-steps { display:grid; grid-template-columns:repeat(4,1fr); padding:8px 20px 22px; }.adoption-steps div { position:relative; min-height:93px; padding:12px 15px; border-top:3px solid #d9dde1; }.adoption-steps div::before { content:""; position:absolute; width:12px; height:12px; left:15px; top:-8px; border:3px solid white; border-radius:50%; background:#b9c0c7; }.adoption-steps .done { border-color:#258566; }.adoption-steps .done::before { background:#258566; }.adoption-steps .current { border-color:#7a4fb2; }.adoption-steps .current::before { background:#7a4fb2; box-shadow:0 0 0 5px rgba(122,79,178,.15); }.adoption-steps span { display:block; margin:5px 0 7px; color:var(--muted); font-size:9px; font-weight:900; }.adoption-steps strong,.adoption-steps small { display:block; }.adoption-steps small { margin-top:4px; color:var(--muted); font-size:9px; }
.audit-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; margin-bottom:18px; }.audit-needs { padding:0 20px 20px; }.audit-needs > div { display:grid; grid-template-columns:76px 1fr auto; gap:13px; align-items:center; padding:15px 0; border-top:1px solid var(--line); }.audit-needs strong,.audit-needs p { display:block; margin:0; }.audit-needs p { margin-top:4px; color:var(--muted); font-size:10px; }.audit-priority { font-size:9px; font-weight:900; text-transform:uppercase; }.audit-priority.high { color:#b8444a; }.audit-priority.medium { color:#a66915; }.audit-decisions { padding:24px; background:linear-gradient(145deg,#fff8ea,#fff); }.audit-decisions h2 { margin:8px 0 18px; }.audit-decisions dl { margin:0; }.audit-decisions dl div { display:flex; justify-content:space-between; gap:15px; padding:12px 0; border-top:1px solid var(--line); }.audit-decisions dt { color:var(--muted); font-size:10px; }.audit-decisions dd { margin:0; text-align:right; font-size:11px; font-weight:800; }.audit-timeline { overflow:hidden; }.audit-timeline .current { border-color:#b06a16; }.audit-timeline .current::before { background:#b06a16; box-shadow:0 0 0 5px rgba(176,106,22,.15); }
.task-board { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.task-count { min-width:28px; padding:5px; border-radius:99px; color:white; background:var(--brand); text-align:center; font-size:10px; }.task-count.muted { background:var(--muted); }.demo-task { display:grid; grid-template-columns:24px 1fr auto; gap:12px; align-items:center; padding:15px 18px; border-top:1px solid var(--line); }.fake-check { width:20px; height:20px; border:2px solid #cfd4d8; border-radius:7px; }.demo-task strong,.demo-task p { display:block; margin:0; }.demo-task p,.demo-task time { color:var(--muted); font-size:10px; }
.empty-search { padding:80px 20px; text-align:center; }.empty-search span { display:block; font-size:45px; color:var(--muted); }.empty-search h2 { margin:10px 0 4px; }.empty-search p { color:var(--muted); }
[data-searchable][hidden] { display:none !important; }

@media (max-width:1100px) { .demo-dashboard-grid,.scan-grid,.mail-layout,.learn-layout,.audit-layout { grid-template-columns:1fr; }.demo-metrics { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { body { padding-top:54px; }.demo-ribbon { height:54px; grid-template-columns:1fr auto; }.demo-ribbon strong { display:none; }.demo-ribbon a { font-size:10px; }.demo-shell .sidebar { top:54px; transform:translateX(-100%); transition:transform .22s ease; }.demo-shell .sidebar.open { transform:none; }.demo-shell .main { margin-left:0; }.demo-shell .topbar { top:54px; }.mobile-toggle { display:block; }.content { padding:20px 14px; }.global-search { width:min(330px,60vw); }.demo-mode { display:none; }.page-heading { align-items:flex-start; flex-direction:column; }.demo-metrics,.grid-4,.grid-3,.task-board,.adoption-steps { grid-template-columns:1fr; }.learn-path { grid-template-columns:42px 1fr; }.learn-path > b { grid-column:2; }.audit-needs > div { grid-template-columns:1fr; }.pipeline-legend { grid-template-columns:1fr; }.service.scan ul { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .demo-view { animation:none; }.demo-shell .sidebar { transition:none; } }