:root { --brand: #4f46e5; }
* { font-family: 'Inter', system-ui, sans-serif; }
body { margin: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Sidebar link */
.nav-link { transition: all .15s ease; }
.nav-link.active { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.nav-link:not(.active):hover { background: #eef2ff; color: var(--brand); }

/* Cards */
.card { background:#fff; border:1px solid #e2e8f0; border-radius:1rem; }
.stat-card { transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }

/* Gradient text */
.gradient-text { background: linear-gradient(135deg,#6366f1,#a855f7); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gradient-bg { background: linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#a855f7 100%); }
.auth-bg { background: linear-gradient(135deg,#312e81 0%,#4f46e5 45%,#7c3aed 100%); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border-radius:.6rem; transition:all .15s; cursor:pointer; border:none; }
.btn-primary { background:var(--brand); color:#fff; padding:.6rem 1.1rem; }
.btn-primary:hover { background:#4338ca; }
.btn-ghost { background:#f1f5f9; color:#475569; padding:.55rem 1rem; }
.btn-ghost:hover { background:#e2e8f0; }
.btn-success { background:#16a34a; color:#fff; padding:.6rem 1.1rem; }
.btn-success:hover { background:#15803d; }
.btn-danger { background:#dc2626; color:#fff; padding:.5rem .9rem; }

input,select,textarea { outline:none; transition:border .15s, box-shadow .15s; }
input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(79,70,229,.15); }
.field { width:100%; padding:.6rem .8rem; border:1px solid #cbd5e1; border-radius:.6rem; font-size:.9rem; }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.badge-green { background:#dcfce7; color:#166534; }
.badge-red { background:#fee2e2; color:#991b1b; }
.badge-yellow { background:#fef9c3; color:#854d0e; }
.badge-blue { background:#dbeafe; color:#1e40af; }
.badge-gray { background:#f1f5f9; color:#475569; }

/* Table */
table { border-collapse: collapse; width:100%; }
.tbl th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; padding:.7rem .9rem; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.tbl td { padding:.7rem .9rem; border-bottom:1px solid #f1f5f9; font-size:.875rem; }
.tbl tr:hover td { background:#f8fafc; }

/* Toast */
.toast { min-width:260px; padding:.85rem 1rem; border-radius:.7rem; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.2); display:flex; gap:.6rem; align-items:center; animation: slideIn .25s ease; }
@keyframes slideIn { from { transform:translateX(120%);opacity:0 } to { transform:translateX(0);opacity:1 } }

/* Modal */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; z-index:90; padding:1rem; animation: fade .15s; }
@keyframes fade { from {opacity:0} to {opacity:1} }
.modal { background:#fff; border-radius:1rem; max-width:560px; width:100%; max-height:90vh; overflow:auto; box-shadow:0 25px 60px rgba(0,0,0,.3); }

/* Spinner */
.spinner { width:18px; height:18px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; }
.spinner-dark { border-color:rgba(79,70,229,.2); border-top-color:var(--brand); }
@keyframes spin { to { transform: rotate(360deg) } }

/* Result card print */
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position:absolute; left:0; top:0; width:100%; }
  .no-print { display:none !important; }
}

.fade-in { animation: fadeIn .25s ease; }
@keyframes fadeIn { from {opacity:0; transform:translateY(6px)} to {opacity:1; transform:translateY(0)} }