@import url('tokens.css');
/* One control set; existing class names are component aliases. */
*{box-sizing:border-box}body{font:var(--text-base)/var(--lh) var(--font-sans);color:var(--text-primary);font-synthesis:none}
button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}
button,.button,.primary,.secondary,.quiet,.ghost,.danger,.tool-button,.accent-button{min-height:36px;border:1px solid transparent;border-radius:var(--radius-control);padding:7px 12px;font-size:14px;font-weight:600;line-height:20px;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.primary,.accent-button,.btn:not(.secondary){background:var(--accent-primary);border-color:var(--accent-primary);color:var(--text-on-accent)}
.primary:hover:not(:disabled),.accent-button:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.primary:active:not(:disabled),.accent-button:active:not(:disabled){background:var(--accent-pressed)}
.secondary,.btn-outline,.lib-btn{background:var(--surface-paper);border-color:var(--border-control);color:var(--text-primary)}.quiet,.ghost,.tool-button{background:transparent;color:var(--text-secondary)}
.secondary:hover:not(:disabled),.quiet:hover:not(:disabled),.ghost:hover:not(:disabled),.tool-button:hover:not(:disabled){background:var(--surface-selected)}
.danger{background:var(--surface-paper);border-color:var(--border-control);color:var(--state-error)!important}.dense{min-height:32px;padding:5px 8px;font-size:13px}.launcher-primary{min-height:44px}.full{width:100%}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{min-height:36px;max-width:100%;padding:7px 10px;border:1px solid var(--border-control);border-radius:var(--radius-control);background:var(--surface-paper);color:var(--text-primary);font-size:14px;line-height:20px}
textarea{line-height:1.5;resize:vertical}input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:1}
:root{--control-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='1.75'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
select{appearance:none;padding-right:32px;background-image:var(--control-chevron);background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--accent-primary)}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible,.ink-signal :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.icon{width:16px;height:16px;flex:none;stroke-width:1.75}.icon-lg{width:20px;height:20px}
.chip,#save-status{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--border-default);border-radius:var(--radius-chip);background:var(--surface-subtle);color:var(--text-secondary);font-size:12px;font-weight:500;line-height:18px;white-space:nowrap}
.chip::before,#save-status::before{content:'';width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent-primary)}.chip.is-live::before,.is-unsaved::before{background:var(--state-live)!important}.is-live::before{animation:live-pulse 1.8s var(--ease) infinite}
.live-dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--state-live);animation:live-pulse 1.8s var(--ease) infinite}
.segmented,.inspector-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--border-default);border-radius:var(--radius-control);background:var(--surface-subtle)}
.segmented button,.inspector-tabs button{flex:1;min-height:32px;padding:5px 8px;border:0;color:var(--text-secondary);background:transparent;font-size:13px}.segmented button[aria-selected=true],.inspector-tabs button[aria-selected=true]{background:var(--surface-paper);color:var(--accent-primary);box-shadow:var(--elev-1)}
.menu{position:absolute;z-index:20;min-width:228px;padding:4px;border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-paper);box-shadow:var(--elev-2);animation:menu-in var(--dur) var(--ease)}
.menu button{display:flex;width:100%;justify-content:flex-start;background:transparent;color:var(--text-primary);border:0}.menu button:hover:not(:disabled),.menu button:focus-visible{background:var(--surface-selected)}.menu .hint{padding:4px 8px;margin:0;color:var(--text-muted);font-size:12px}
.card{border:1px solid var(--border-default);border-radius:var(--radius-card);background:var(--surface-paper);box-shadow:var(--elev-1)}
dialog,.dialog,.modal{padding:24px;border:1px solid var(--border-default);border-radius:var(--radius-dialog);background:var(--surface-paper);color:var(--text-primary);box-shadow:var(--elev-3);max-width:calc(100vw - 32px)}dialog::backdrop{background:#0B102066}.modal-header h2,.dialog h2{font:700 24px/1.1 var(--font-display);letter-spacing:-.02em}
.toast{position:fixed;z-index:50;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 16px;border:1px solid #374151;border-radius:var(--radius-card);background:var(--ink-950);color:#fff;box-shadow:var(--elev-2);font-size:13px;display:flex;align-items:center;gap:8px}.toast.error{border-left:3px solid var(--state-live)}
.switch{appearance:none;width:32px!important;height:20px;min-height:20px;border-radius:999px!important;border:1px solid var(--border-control);background:var(--ink-100);padding:2px;cursor:pointer}.switch::before{content:'';display:block;width:14px;height:14px;border-radius:50%;background:var(--text-secondary);transition:transform var(--dur-fast) var(--ease)}.switch:checked{background:var(--accent-primary);border-color:var(--accent-primary)}.switch:checked::before{background:#fff;transform:translateX(12px)}
kbd{padding:2px 5px;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface-subtle);font:12px/1.5 var(--font-mono);font-variant-numeric:tabular-nums}
.tooltip{position:relative}.tooltip::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);pointer-events:none;opacity:0;white-space:nowrap;padding:4px 8px;border-radius:6px;background:var(--ink-950);color:#fff;font-size:12px;transition:opacity var(--dur-fast) var(--ease);z-index:30}.tooltip:hover::after,.tooltip:focus-visible::after{opacity:1}
.header-actions .tooltip::after{left:auto;right:0;transform:none}
*{scrollbar-width:thin;scrollbar-color:var(--border-control) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{border-radius:999px;background:var(--border-control)}[hidden]{display:none!important}
@keyframes live-pulse{50%{box-shadow:0 0 0 4px #FF5A4F20}}@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.app-header{height:56px;padding:0 24px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--border-default);background:var(--surface-paper)}.wordmark{display:flex;align-items:center;gap:8px;color:var(--text-primary);text-decoration:none;font:800 20px/1 var(--font-sans);letter-spacing:-.02em}.brand-mark{width:28px;height:28px;display:grid;place-items:center;background:var(--accent-primary);color:#fff;border-radius:6px;font:800 22px/1 var(--font-sans)}.brand-dot{color:var(--accent-primary)}.workspace-name{color:var(--text-muted);font-size:13px;letter-spacing:0;border-left:1px solid var(--border-default);padding-left:16px}.app-header>a.quiet{margin-left:auto}@media(max-width:600px){.app-header{padding:0 16px;gap:12px}.app-header .workspace-name{display:none}}
