.auditor-demo-workspace { color:var(--orbita-ink); max-width:1440px; }
.demo-page-intro { display:flex; align-items:center; justify-content:space-between; gap:32px; margin:4px 0 28px; }
.demo-page-intro h2 { font-size:clamp(1.5rem,2.2vw,2rem); letter-spacing:-.035em; margin:0 0 12px; }
.demo-page-intro p { max-width:700px; margin:0; line-height:1.65; }
.demo-origin { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--orbita-ink); white-space:nowrap; text-underline-offset:5px; }
.demo-token-list { margin-top:28px; background:var(--orbita-surface); border:1px solid var(--orbita-line); border-radius:20px; overflow:hidden; }
.demo-token-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 26px; border-bottom:1px solid var(--orbita-line); }
.demo-token-row:last-child { border-bottom:0; }
.demo-token-row h3 { margin:0 0 6px; font-size:1rem; font-weight:650; overflow-wrap:anywhere; }
.demo-token-row p { margin:0 0 6px; line-height:1.5; }
.demo-token-row[data-demo-token-state="active"] { background:linear-gradient(100deg,#f4fbf7,#fff 65%); }
.demo-token-row[data-demo-token-state="paused"] { background:linear-gradient(100deg,#fffbf1,#fff 65%); }
.demo-token-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; flex-shrink:0; }
.demo-token-description { min-width:0; }
.demo-token-description > span { font-size:.8125rem; color:#24513d; }
.demo-token-row[data-demo-token-state="paused"] .demo-token-description > span { color:#684407; }
.demo-token-row:is([data-demo-token-state="expired"],[data-demo-token-state="revoked"]) .demo-token-description > span { color:#49494f; }
.demo-create-form { padding:28px; background:var(--orbita-surface); border:1px solid var(--orbita-line); border-radius:24px; margin-bottom:24px; display:grid; gap:22px; max-width:960px; box-shadow:0 4px 22px rgb(29 29 31 / 3%); }
.demo-create-form h2,.demo-secret-heading h2 { margin:0; font-size:1.125rem; line-height:1.4; font-weight:650; letter-spacing:-.02em; overflow-wrap:anywhere; }
.demo-create-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.demo-create-fields > :last-child { grid-column:1/-1; }
.demo-create-fields > div { min-width:0; }
.demo-create-form :is(input,select) { box-sizing:border-box; min-height:48px; width:100%; padding:12px 14px; color:var(--orbita-ink); background:var(--orbita-surface-muted); border:1px solid var(--orbita-line-strong); border-radius:12px; font:inherit; }
.demo-create-form label { display:block; margin-bottom:8px; font-weight:600; }
.demo-create-form :is(p,small) { color:var(--orbita-ink); line-height:1.6; }
.demo-switch { position:relative; display:inline-flex; align-items:center; width:52px; height:44px; cursor:pointer; }
.demo-switch input { position:absolute; width:100%; height:100%; margin:0; opacity:0; cursor:inherit; z-index:1; }
.demo-switch span { display:block; width:50px; height:30px; border-radius:20px; border:1px solid #707076; background:#e4e4e9; transition:background 180ms; }
.demo-switch span::after { content:""; display:block; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 4px #0003; margin:2px; transition:transform 180ms cubic-bezier(.2,.7,.2,1); }
.demo-switch input:checked+span { background:#168253; border-color:#168253; }
.demo-switch input:checked+span::after { transform:translateX(20px); }
.demo-switch input:focus-visible+span { outline:3px solid var(--leila-focus); outline-offset:4px; }
.demo-switch input:disabled+span { opacity:.5; }
.demo-secret-result { display:grid; grid-template-columns:minmax(14rem,1fr) auto; gap:20px 28px; align-items:end; padding:26px 28px; background:var(--orbita-surface); border:1px solid var(--orbita-line); border-radius:24px; margin-bottom:28px; box-shadow:0 4px 22px rgb(29 29 31 / 3%); }
.demo-secret-heading { grid-column:1/-1; display:flex; align-items:baseline; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; }
.demo-secret-heading p { margin:0; font-size:.875rem; line-height:1.5; }
.demo-secret-field { min-width:0; display:grid; gap:10px; font-size:.875rem; }
.demo-secret { box-sizing:border-box; display:block; width:100%; max-width:700px; font:inherit; font-family:ui-monospace,monospace; min-height:52px; margin:0; padding:12px 16px; background:var(--orbita-canvas); border:1px solid var(--orbita-line); border-radius:12px; color:var(--orbita-ink); }
.demo-secret-result[data-demo-code-size="short"] .demo-secret { width:min(100%,15rem); font-size:1.75rem; font-weight:650; letter-spacing:.22em; line-height:1.2; }
.demo-secret-result > .actions { margin:0; align-items:center; gap:8px; }
.demo-feedback:not([hidden]) { padding:16px 0; line-height:1.6; }
.demo-feedback[role="alert"] { color:#53151b; }
.demo-empty { margin:0; padding:28px; line-height:1.6; }
@media(max-width:800px) { .demo-page-intro,.demo-token-row { align-items:flex-start; flex-direction:column; gap:18px; } .demo-create-form,.demo-token-row,.demo-secret-result { padding:20px; } .demo-token-actions { flex-shrink:1; } .demo-secret-result { grid-template-columns:minmax(0,1fr); gap:18px; } }
@media(max-width:560px) { .demo-create-fields { grid-template-columns:minmax(0,1fr); } .demo-token-actions { gap:8px; } .demo-secret-result > .actions { display:flex; flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .demo-switch span,.demo-switch span::after { transition:none; } }
@media(forced-colors:active) { .demo-switch span { border-color:ButtonText; } .demo-switch input:checked+span { background:Highlight; } .demo-switch span::after { background:CanvasText; } }