*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.4;color:#0f172a;background:#f8fafc}
.topbar{position:sticky;top:0;z-index:10;display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:0.75rem 1rem;background:#0f172a;color:#fff;border-bottom:1px solid #0b1220}
.brand{font-weight:700;letter-spacing:.3px}
.nav{display:flex;flex-wrap:wrap;gap:.5rem}
.nav-btn{background:#1e293b;color:#e2e8f0;border:1px solid #334155;border-radius:8px;padding:.4rem .7rem;cursor:pointer}
.nav-btn[aria-current="page"]{background:#334155}
.nav-btn:hover{filter:brightness(1.1)}
main#app{padding:1rem;max-width:1100px;margin:0 auto}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1rem;margin-bottom:1rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h2{margin:.2rem 0 1rem 0;font-size:1.1rem}
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:.8rem}
.form-grid .field{grid-column:span 6}
.field label{display:block;font-size:.85rem;margin-bottom:.3rem;color:#334155}
.field input,.field select,.field textarea{width:100%;padding:.55rem .6rem;border:1px solid #cbd5e1;border-radius:8px;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #38bdf8;border-color:#38bdf8}
.actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.6rem}
.btn{border:1px solid #0ea5e9;background:#0ea5e9;color:#fff;border-radius:8px;padding:.5rem .8rem;cursor:pointer}
.btn.secondary{background:#fff;color:#0ea5e9}
.btn.danger{border-color:#ef4444;background:#ef4444}
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}
.table th,.table td{padding:.6rem .7rem;border-bottom:1px solid #e2e8f0;text-align:left;font-size:.92rem}
.table th{background:#f1f5f9;font-weight:600}
.table tr:last-child td{border-bottom:none}
.toolbar{display:flex;gap:.6rem;align-items:center;justify-content:space-between;margin:.4rem 0 .8rem 0}
.search{flex:1}
.search input{width:100%;padding:.5rem .6rem;border:1px solid #cbd5e1;border-radius:8px}
.badge{display:inline-block;padding:.15rem .45rem;border:1px solid #cbd5e1;border-radius:999px;font-size:.75rem;color:#475569;background:#f8fafc}
.footer{padding:1rem;text-align:center;color:#64748b}
hr{border:none;border-top:1px solid #e2e8f0;margin:1rem 0}
small, .hint{color:#64748b}
kbd{background:#e2e8f0;border-radius:6px;padding:.1rem .3rem;font-size:.8em;border:1px solid #cbd5e1}