.demo-dashboard{--surface-0:0 0% 100%;--surface-1:60 5% 98%;--surface-2:60 4% 95%;--surface-3:50 4% 91%;--surface-4:50 3% 82%;--surface-5:50 2% 62%;--ink-1:0 0% 10%;--ink-2:40 1% 29%;--ink-3:60 2% 48%;--ink-4:60 2% 63%;--signal-red:0 48% 49%;--signal-amber:33 48% 45%;--signal-green:150 30% 42%;--brand-accent:207 44% 48%;--surface-canvas:var(--surface-0);--surface-primary:var(--surface-1);--surface-secondary:var(--surface-2);--surface-tertiary:var(--surface-3);--surface-hover:var(--surface-2);--content-primary:var(--ink-1);--content-secondary:var(--ink-2);--content-tertiary:var(--ink-3);--content-quaternary:var(--ink-4);--border-primary:0 0% 0%/0.08;--border-secondary:0 0% 0%/0.04;--border:var(--border-primary);--background:var(--surface-canvas);--foreground:var(--content-primary);--primary:var(--ink-1);--primary-foreground:var(--surface-0);--muted:var(--surface-secondary);--muted-foreground:var(--content-secondary);--success:var(--signal-green);--warning:var(--signal-amber);--destructive:var(--signal-red);color-scheme:light;color:hsl(var(--foreground));font-family:var(--font-sans,"Satoshi",-apple-system,sans-serif)}.demo-chrome{position:relative;border-radius:12px;border:1px solid hsl(var(--border-primary));background:hsl(var(--surface-0));box-shadow:0 0 0 1px hsl(var(--border-primary)),0 8px 24px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.04);overflow:hidden}.demo-chrome:after{content:"";position:absolute;inset:-18%;background:radial-gradient(circle 340px at var(--glow-x,50%) var(--glow-y,50%),hsl(var(--brand-accent)/.06),transparent 70%);pointer-events:none;opacity:0;filter:blur(42px);transition:opacity .24s ease;z-index:0}.demo-chrome:hover:after{opacity:1}.demo-sidebar{width:180px;flex-shrink:0;border-right:1px solid hsl(var(--border-primary));background:hsl(var(--surface-0));display:flex;flex-direction:column;padding:12px 0}.demo-sidebar-brand{font-size:14px;font-weight:500;color:hsl(var(--ink-1));padding:0 16px 12px;border-bottom:1px solid hsl(var(--border-primary));margin-bottom:8px}.demo-sidebar-item{display:flex;align-items:center;height:32px;padding:0 12px;margin:0 8px;border-radius:6px;font-size:13px;font-weight:500;color:hsl(var(--ink-3));border-left:2px solid transparent;transition:all .15s;gap:10px;cursor:pointer}.demo-sidebar-item[data-active=true]{background:hsl(var(--surface-2));color:hsl(var(--ink-1));border-left-color:hsl(var(--ink-1))}.demo-sidebar-item:hover{background:hsl(var(--surface-2)/.6);color:hsl(var(--ink-2))}.demo-sidebar-item svg{width:16px;height:16px;flex-shrink:0}.demo-sidebar-user{margin-top:auto;padding:12px 16px 0;border-top:1px solid hsl(var(--border-primary));display:flex;align-items:center;gap:8px}.demo-sidebar-avatar{width:28px;height:28px;border-radius:50%;background:hsl(var(--surface-2));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:hsl(var(--ink-2))}.demo-sidebar-user-name{font-size:12px;font-weight:500;color:hsl(var(--ink-1))}.demo-sidebar-user-email{font-size:11px;color:hsl(var(--ink-3))}.demo-section-number{font-family:var(--font-data,monospace);font-size:12px;letter-spacing:.08em;color:hsl(var(--ink-3));font-weight:600;text-transform:uppercase}.demo-stagger{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}.demo-stagger[data-visible=true]{opacity:1;transform:none}.demo-status-line{font-family:var(--font-data,monospace);font-size:11px;letter-spacing:.02em;color:hsl(var(--ink-4))}.demo-toolbar{height:44px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid hsl(var(--border-primary));flex-shrink:0}.demo-toolbar-title{font-size:14px;font-weight:600;color:hsl(var(--ink-1))}.demo-toolbar-count{font-size:13px;color:hsl(var(--ink-3))}.demo-toolbar-action{height:30px;padding:0 10px;border-radius:6px;border:1px solid hsl(var(--border-primary));background:hsl(var(--surface-0));font-size:12px;font-weight:500;color:hsl(var(--ink-2));display:flex;align-items:center;gap:5px;cursor:pointer;transition:background .15s}.demo-toolbar-action:hover{background:hsl(var(--surface-2))}.pjx-surface-card{border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--surface-1));box-shadow:0 1px 2px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.5)}.demo-job-row:hover{background:hsl(var(--surface-2))}@media (max-width:979px){.demo-sidebar{display:none}}