:root{--ring:rgba(37,99,235,.22)}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.input,.select,.textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:.55rem .75rem;font-size:.9rem;background:#fff;color:#0f172a;transition:border-color .15s,box-shadow .15s}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px var(--ring)}
.input::placeholder{color:#94a3b8}
.label{display:block;font-size:.78rem;font-weight:600;color:#475569;margin-bottom:.3rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem 1rem;border-radius:10px;font-weight:600;font-size:.875rem;transition:background .15s,transform .05s;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:#2563eb;color:#fff}.btn-primary:hover:not(:disabled){background:#1d4ed8}
.btn-ghost{background:#fff;border-color:#cbd5e1;color:#334155}.btn-ghost:hover:not(:disabled){background:#f1f5f9}
.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover:not(:disabled){background:#b91c1c}
.btn-sm{padding:.3rem .65rem;font-size:.8rem;border-radius:8px}
.icon-btn{display:inline-flex;padding:.4rem;border-radius:8px;color:#64748b;cursor:pointer}.icon-btn:hover{background:#f1f5f9;color:#0f172a}
.tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.tbl th{background:#f8fafc;text-align:left;font-weight:600;color:#475569;font-size:.75rem;padding:.65rem .9rem;white-space:nowrap}
.tbl td{padding:.7rem .9rem;border-top:1px solid #eef2f7;vertical-align:middle}
.tbl tbody tr:hover{background:#f8fafc}
.tbl .num{text-align:right}
.badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap}
.b-green{background:#dcfce7;color:#166534}.b-amber{background:#fef3c7;color:#92400e}.b-red{background:#fee2e2;color:#991b1b}
.b-blue{background:#dbeafe;color:#1e40af}.b-slate{background:#e2e8f0;color:#334155}.b-purple{background:#ede9fe;color:#5b21b6}.b-indigo{background:#e0e7ff;color:#3730a3}
.nav-link{display:flex;align-items:center;gap:.75rem;padding:.65rem .9rem;border-radius:10px;color:#cbd5e1;font-weight:500;font-size:.9rem;transition:background .15s,color .15s}
.nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-link.active{background:#2563eb;color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.35)}
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow:auto;z-index:50;animation:fade .15s}
.modal-box{background:#fff;border-radius:16px;width:100%;box-shadow:0 20px 50px rgba(15,23,42,.3);animation:pop .18s}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #e2e8f0}
.modal-head h3{font-weight:700;font-size:1.05rem}
.modal-body{padding:1.25rem}
.spinner{width:34px;height:34px;border:3px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;animation:spin .7s linear infinite}
.btn-spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.btn-ghost .btn-spin{border-color:#cbd5e1;border-top-color:#2563eb}
#toasts{position:fixed;top:1rem;right:1rem;z-index:100;display:flex;flex-direction:column;gap:.5rem;max-width:calc(100vw - 2rem)}
.toast{display:flex;gap:.6rem;align-items:flex-start;padding:.75rem 1rem;border-radius:12px;color:#fff;font-size:.875rem;font-weight:500;box-shadow:0 10px 25px rgba(15,23,42,.25);animation:slide .2s;min-width:240px}
.toast.success{background:#16a34a}.toast.error{background:#dc2626}.toast.info{background:#2563eb}
.seg{display:inline-flex;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden;background:#fff}
.seg button{padding:.4rem .8rem;font-size:.8rem;font-weight:600;color:#475569}
.seg button.on{background:#2563eb;color:#fff}
.chip{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem;border:1px solid #cbd5e1;border-radius:10px;font-size:.82rem;font-weight:600;color:#475569;background:#fff;cursor:pointer}
.chip.on{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}
.fade-in{animation:fade .2s}
.scroll-y{overflow-y:auto}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid #2563eb;outline-offset:2px}