:root{--demo-ink: #172033;--demo-muted: #667085;--demo-line: #dde3ec;--demo-soft: #f5f7fb;--demo-orange: #f05a24;--demo-orange-dark: #c94313;--demo-green: #16794a;--demo-red: #b42318}body:has(.demo-app){margin:0;background:var(--demo-soft);color:var(--demo-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.demo-route main{display:block;max-width:none}.demo-app{min-height:100vh;background:radial-gradient(circle at 8% 0%,rgba(240,90,36,.09),transparent 28rem),var(--demo-soft)}.demo-topbar{min-height:68px;padding:10px clamp(18px,4vw,56px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border-bottom:1px solid var(--demo-line)}.demo-brand,.demo-topbar-actions,.demo-actions,.demo-inline,.demo-pagination{display:flex;align-items:center}.demo-brand{gap:10px;color:var(--demo-ink);text-decoration:none;font-weight:800;font-size:20px}.demo-brand img{width:38px;height:38px}.demo-brand small{color:var(--demo-muted);font-size:12px;font-weight:700;padding-left:10px;border-left:1px solid var(--demo-line)}.demo-topbar-actions,.demo-actions,.demo-inline,.demo-pagination{gap:10px}.demo-page{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:42px 0 64px}.demo-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);align-items:end;gap:32px;margin-bottom:28px}.demo-intro h1{margin:4px 0 10px;max-width:780px;font-size:clamp(32px,5vw,54px);line-height:1.04;letter-spacing:-.04em}.demo-intro p:not(.demo-eyebrow){margin:0;max-width:760px;color:var(--demo-muted);font-size:17px;line-height:1.65}.demo-eyebrow{margin:0;color:var(--demo-orange-dark);font-size:12px;font-weight:900;letter-spacing:.14em}.demo-scenario{padding:18px 20px;display:grid;gap:6px;background:#fff8f4;border:1px solid #ffd4c2;border-radius:16px}.demo-scenario strong{font-size:13px;color:var(--demo-orange-dark)}.demo-scenario span{line-height:1.45}.demo-panel{padding:clamp(20px,3vw,32px);background:#fff;border:1px solid var(--demo-line);border-radius:20px;box-shadow:0 14px 36px #1018280f}.demo-panel+.demo-panel,.demo-grid+.demo-panel,.demo-panel+.demo-grid{margin-top:22px}.demo-panel-header{margin-bottom:22px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.demo-panel-header h2,.demo-panel h2,.demo-card h2,.demo-card h3{margin:0}.demo-panel-header p{margin:6px 0 0;color:var(--demo-muted)}.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.demo-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-card{padding:22px;background:#fff;border:1px solid var(--demo-line);border-radius:16px}.demo-card p{color:var(--demo-muted);line-height:1.55}.demo-field{display:grid;gap:7px}.demo-field+.demo-field{margin-top:15px}.demo-field label,.demo-label{color:#344054;font-size:13px;font-weight:800}.demo-input,.demo-select,.demo-textarea{width:100%;min-height:46px;box-sizing:border-box;padding:11px 13px;color:var(--demo-ink);background:#fff;border:1px solid #cbd3df;border-radius:10px;font:inherit;outline:none}.demo-textarea{min-height:104px;resize:vertical}.demo-input:focus,.demo-select:focus,.demo-textarea:focus{border-color:var(--demo-orange);box-shadow:0 0 0 3px #f05a2421}.demo-button{min-height:42px;padding:9px 16px;color:#fff;background:var(--demo-orange);border:1px solid var(--demo-orange);border-radius:10px;font:inherit;font-weight:800;cursor:pointer;text-decoration:none}.demo-button:hover:not(:disabled){background:var(--demo-orange-dark);border-color:var(--demo-orange-dark)}.demo-button.secondary{color:#344054;background:#fff;border-color:#cbd3df}.demo-button.danger{background:#fff;color:var(--demo-red);border-color:#f2b8b5}.demo-button:disabled{cursor:not-allowed;opacity:.45}.demo-badge,.demo-status{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800}.demo-badge{color:var(--demo-green);background:#eaf8f0}.demo-status{color:#344054;background:#eef1f6}.demo-status.success{color:var(--demo-green);background:#eaf8f0}.demo-status.error{color:var(--demo-red);background:#fff0ef}.demo-table-wrap{overflow-x:auto;border:1px solid var(--demo-line);border-radius:12px}.demo-table{width:100%;border-collapse:collapse;text-align:left}.demo-table th,.demo-table td{padding:13px 14px;border-bottom:1px solid var(--demo-line);vertical-align:middle}.demo-table th{color:#475467;background:#f8fafc;font-size:12px;letter-spacing:.04em;text-transform:uppercase}.demo-table tr:last-child td{border-bottom:0}.demo-empty{padding:34px;color:var(--demo-muted);text-align:center;border:1px dashed #cbd3df;border-radius:12px}.demo-note{margin:16px 0 0;padding:13px 15px;color:#714319;background:#fff7e8;border-left:4px solid #f3a63b;border-radius:8px;line-height:1.5}.demo-code{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.92em}.demo-footer{padding:22px clamp(18px,4vw,56px);display:flex;justify-content:space-between;gap:20px;color:#667085;background:#fff;border-top:1px solid var(--demo-line);font-size:13px}.demo-footer a{color:var(--demo-orange-dark);font-weight:800}@media (max-width: 760px){.demo-intro,.demo-grid,.demo-grid.three{grid-template-columns:1fr}.demo-topbar,.demo-panel-header,.demo-footer{align-items:flex-start;flex-direction:column}.demo-badge{display:none}}