:root { color-scheme: dark; --bg:#0b1120; --panel:#111a2b; --line:#26354c; --text:#edf3ff; --muted:#91a0b8; --accent:#78a9ff; --green:#70d4a3; --yellow:#f1c56b; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); } a { color:inherit; text-decoration:none; } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }.skip-link { position:absolute; left:12px; top:-48px; z-index:20; padding:10px 14px; background:var(--accent); color:var(--bg); border-radius:6px; font-size:12px; font-weight:700; }.skip-link:focus { top:12px; }
.layout { display:flex; min-height:100vh; }.sidebar { width:254px; flex:0 0 254px; background:#0e1728; border-right:1px solid var(--line); padding:25px 15px 18px; display:flex; flex-direction:column; }.brand { font-size:18px; font-weight:750; letter-spacing:-.03em; display:flex; align-items:center; gap:10px; padding:0 10px 28px; }.brand-mark { width:29px; height:29px; border-radius:9px; display:grid; place-items:center; background:#83aaff; color:#0b1120; font-weight:900; }.brand-muted { color:#92a5c6; font-weight:500; }.v1-badge { color:var(--green); border:1px solid #286a4e; background:#143327; border-radius:5px; font-size:9px; letter-spacing:.08em; padding:7px 8px; margin:0 7px 20px; text-align:center; } nav { display:grid; gap:3px; }.nav-item { color:var(--muted); border-radius:7px; display:flex; align-items:center; gap:11px; padding:10px; font-size:13px; }.nav-item:hover,.nav-item.active { color:var(--text); background:#1a2941; }.nav-item.active { box-shadow:inset 3px 0 0 var(--accent); }.nav-icon { color:#a5badc; width:17px; text-align:center; font-size:15px; }.nav-demo { margin-left:auto; font-size:9px; color:var(--yellow); border:1px solid #665328; border-radius:4px; padding:2px 4px; }.sidebar-footer { margin-top:auto; border-top:1px solid var(--line); padding:18px 10px 0; color:var(--muted); font-size:11px; line-height:1.7; }.sidebar-footer small { color:#64748f; }.status-dot { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:5px; }
.main { flex:1; min-width:0; }.topbar { height:66px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 42px; }.mobile-brand { display:none; font-weight:700; }.topbar-actions { display:flex; align-items:center; gap:16px; margin-left:auto; }.tenant-label { color:var(--muted); font-size:12px; }.avatar { border:1px solid #466189; background:#233657; color:white; border-radius:50%; width:32px; height:32px; font-size:11px; }.content { max-width:1180px; margin:0 auto; padding:29px 42px 70px; }.breadcrumbs { color:var(--muted); display:flex; align-items:center; gap:10px; font-size:12px; margin-bottom:32px; }.breadcrumbs a:hover { color:var(--accent); }.breadcrumbs [aria-current] { color:var(--text); }.crumb-separator { color:#51617b; }
.language-switcher { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:6px; background:#0c1424; }.language-button { border:0; border-radius:4px; padding:5px 7px; color:var(--muted); background:transparent; font-size:10px; font-weight:700; cursor:pointer; }.language-button:hover,.language-button.active { color:var(--text); background:#1a2941; }
.page-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:26px; }.eyebrow { color:var(--accent); font-size:10px; letter-spacing:.13em; font-weight:700; margin-bottom:10px; } h1 { font-size:31px; letter-spacing:-.04em; margin:0 0 8px; } p { color:var(--muted); font-size:14px; margin:0; line-height:1.55; }.button { display:inline-flex; align-items:center; gap:8px; border-radius:6px; padding:10px 14px; font-size:12px; font-weight:650; border:1px solid transparent; cursor:pointer; }.button.primary { color:#0b1120; background:var(--accent); }.button.secondary { color:#cbd8eb; background:#18243a; border-color:#354862; }.button:disabled { cursor:not-allowed; opacity:.55; }.lock { font-size:15px; }.demo-notice { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid #665328; background:#211d13; border-radius:7px; color:#f1d58e; font-size:12px; line-height:1.5; margin-bottom:26px; }.demo-notice strong { color:#ffe7a6; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:24px; }.metric-card,.panel,.placeholder { background:var(--panel); border:1px solid var(--line); border-radius:8px; }.metric-card { padding:18px; display:flex; flex-direction:column; gap:7px; }.metric-card span,.metric-card small { color:var(--muted); font-size:11px; }.metric-card strong { font-size:25px; }.panel { padding:22px; }.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; }.panel h2 { font-size:16px; margin:0 0 7px; }.panel-heading p { font-size:12px; }.tag,.pill { color:#b7c9e5; background:#1c2d49; border:1px solid #345075; padding:4px 8px; border-radius:99px; font-size:10px; white-space:nowrap; }.pill.green { color:var(--green); background:#143327; border-color:#286a4e; }.journey { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:10px; margin-top:24px; }.journey a { white-space:pre-line; background:#18243a; border:1px solid #2e4463; border-radius:7px; padding:13px; color:#d9e5f8; font-size:12px; line-height:1.55; }.journey a:hover { border-color:var(--accent); color:var(--accent); }.journey>span { color:#617694; text-align:center; }
.table-heading { color:#71829d; text-transform:uppercase; letter-spacing:.08em; font-size:10px; padding:0 12px 12px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:2fr 1fr 1.4fr auto; gap:16px; }.table-row { display:grid; grid-template-columns:2fr 1fr 1.4fr auto; gap:16px; align-items:center; padding:17px 12px; border-bottom:1px solid #1c2940; font-size:13px; }.table-row:last-child { border-bottom:0; }.table-row small,.list-item small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }.row-link { color:var(--accent); font-weight:650; }.row-link:hover { text-decoration:underline; }.muted { color:var(--muted); font-size:12px; }.list-item { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 4px; border-bottom:1px solid #1c2940; }.list-item:last-child { border-bottom:0; }.empty { color:var(--muted); padding:20px 0; font-size:13px; }.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.detail-grid h2 { margin-bottom:18px; } dl { display:grid; grid-template-columns:1fr 1.4fr; gap:13px; margin:0; font-size:12px; } dt { color:var(--muted); } dd { margin:0; color:#d9e5f8; }.placeholder { min-height:290px; display:grid; place-items:center; align-content:center; gap:12px; text-align:center; }.placeholder-icon { font-size:38px; color:var(--accent); }.placeholder h2 { margin:0; font-size:20px; }.placeholder p { margin-bottom:8px; }
.workflow-steps { display:flex; align-items:center; gap:0; margin-top:24px; }.workflow-step { display:flex; align-items:center; gap:9px; color:#d9e5f8; }.workflow-step span { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--bg); background:var(--accent); font-size:11px; font-weight:800; }.workflow-step i { color:#617694; font-style:normal; margin:0 14px; }.chat-panel { max-width:760px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:22px; }.chat-message { max-width:80%; padding:13px 15px; border-radius:8px; margin-bottom:13px; }.chat-message p { font-size:13px; color:#d9e5f8; }.chat-message.user { background:#1a2941; margin-left:auto; }.chat-message.assistant { background:#172b2b; border:1px solid #285653; }.chat-role { display:block; color:var(--muted); font-size:10px; margin-bottom:6px; }.chat-input { display:flex; gap:9px; margin-top:22px; }.chat-input input { flex:1; min-width:0; border:1px solid var(--line); background:#0c1424; color:var(--muted); border-radius:6px; padding:10px; font-size:11px; }
.state-panel { min-height:260px; display:grid; place-items:center; align-content:center; gap:10px; padding:28px; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:8px; }.state-panel h2 { margin:0; font-size:18px; }.state-panel p { max-width:460px; font-size:13px; }.state-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#1c2d49; color:var(--accent); font-size:25px; }.state-panel.error { border-color:#70434b; }.state-panel.error .state-icon { background:#3b2028; color:#ff9eae; }.state-panel.loading .state-icon { animation:spin 1.2s linear infinite; }.access-badge { display:inline-flex; align-items:center; gap:6px; color:#b9cceb; background:#18243a; border:1px solid #354862; border-radius:99px; padding:5px 9px; font-size:10px; white-space:nowrap; }.access-dot { width:6px; height:6px; background:var(--green); border-radius:50%; }.rights-panel { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }.rights-panel h2 { margin-bottom:7px; } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:850px) { .sidebar { width:205px; flex-basis:205px; }.content { padding:25px 24px 50px; }.topbar { padding:0 24px; }.metric-grid { grid-template-columns:repeat(2,1fr); }.journey { grid-template-columns:1fr 20px 1fr; }.journey>span:nth-of-type(n+3) { display:none; }.detail-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .layout { display:block; }.sidebar { width:100%; height:auto; padding:14px; }.brand { padding-bottom:13px; }.demo-badge,.sidebar-footer { display:none; } nav { display:flex; overflow-x:auto; gap:3px; }.nav-item { white-space:nowrap; padding:8px; }.nav-item:not(.active) { display:none; }.topbar { height:52px; }.mobile-brand { display:block; }.tenant-label { display:none; }.content { padding:22px 16px 40px; }.page-header { display:block; }.page-header .button { margin-top:17px; }.metric-grid { gap:8px; }.metric-card { padding:13px; }.table-heading { display:none; }.table-row { grid-template-columns:1fr auto; gap:10px; }.table-row>:nth-child(2),.table-row>:nth-child(3) { display:none; }.journey { grid-template-columns:1fr; }.journey>span { display:none; } h1 { font-size:26px; } }
.auth-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--bg); }.auth-card { width:min(100%, 430px); padding:34px; background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 60px #0005; }.auth-brand { padding:0 0 36px; }.auth-card h1 { font-size:28px; margin-bottom:10px; }.auth-card form { display:grid; gap:10px; margin-top:24px; }.auth-card label { color:#b9cceb; font-size:12px; }.auth-card input { width:100%; border:1px solid var(--line); background:#0c1424; color:var(--text); border-radius:6px; padding:11px; font-size:13px; }.auth-card .button { justify-content:center; margin-top:8px; }
.qr-enrollment { margin-top:20px; padding:16px; border:1px solid var(--line); border-radius:8px; background:#f7f9fc; color:#0b1120; text-align:center; }.qr-enrollment p { color:#334155; font-size:12px; margin-bottom:12px; }.qr-enrollment canvas { display:block; margin:auto; max-width:100%; }
.progress-panel { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line, #d9e0e7); border-radius: 0.75rem; }
.progress-track { height: 0.65rem; margin: 0.8rem 0; overflow: hidden; background: #e8edf2; border-radius: 999px; }
.progress-track span { display: block; height: 100%; background: #26734d; border-radius: inherit; transition: width 0.2s ease; }