:root { --ink:#1B2A41; --teal:#0E7C7B; --signal:#C8553D; --paper:#F5F7F6; }
body { font-family:'IBM Plex Sans', system-ui, -apple-system, sans-serif; background:var(--paper); color:#1f2937; }
.nav-link { display:block; border-radius:.375rem; padding:.5rem .75rem; font-size:.875rem; color:#e2e8f0; }
.nav-link:hover { background:rgba(255,255,255,.1); color:#fff; }
.nav-link.active { background:rgba(255,255,255,.15); color:#fff; font-weight:500; }
.btn, .btn-primary, .btn-danger, .btn-ghost { display:inline-flex; align-items:center; justify-content:center; border-radius:.375rem; padding:.5rem 1rem; font-size:.875rem; font-weight:500; transition:background .15s; cursor:pointer; }
.btn-primary { background:var(--teal); color:#fff; } .btn-primary:hover { background:#0B6362; }
.btn-danger  { background:var(--signal); color:#fff; } .btn-danger:hover { background:#A94530; }
.btn-ghost   { background:#fff; color:#334155; border:1px solid #cbd5e1; } .btn-ghost:hover { background:#f8fafc; }
.btn-primary:focus-visible, .btn-danger:focus-visible, .btn-ghost:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.field { margin-top:.25rem; display:block; width:100%; border-radius:.375rem; border:1px solid #cbd5e1; box-shadow:0 1px 2px rgba(0,0,0,.05); font-size:.875rem; padding:.5rem .75rem; background:#fff; }
.field:focus { border-color:var(--teal); outline:none; box-shadow:0 0 0 3px rgba(14,124,123,.2); }
.card { border-radius:.5rem; background:#fff; border:1px solid #e2e8f0; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }