*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{cursor:pointer}
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:7px 14px;font-weight:550}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.btn.sm{padding:3px 9px;font-size:12.5px;border-radius:6px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
input,select,textarea{background:var(--input);border:1px solid var(--line);border-radius:8px;padding:8px 11px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
label{display:block;font-size:12.5px;color:var(--muted);margin:12px 0 4px}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:100;max-width:min(92vw,380px)}
.toast{padding:10px 14px;border-radius:8px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--ok);box-shadow:0 6px 24px #0004}
.toast.err{border-left-color:var(--danger)}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}