:root{
    --ink:#0f172a;
    --muted:#64748b;
    --line:#dbe3ef;
    --surface:#ffffff;
    --canvas:#f4f7fb;
    --brand:#d43b09;
}
*{box-sizing:border-box}
body{background:var(--canvas);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif}
.app-navbar{background:linear-gradient(110deg,#111827,#0f172a)}
.page-title{font-weight:800;letter-spacing:-.025em}
.card-pro{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 28px rgba(15,23,42,.06)}
.filter-label{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.table-pro{margin:0;white-space:nowrap}
.table-pro thead th{position:sticky;top:0;z-index:3;background:#0b1220;color:#fff;border-color:#253047;font-size:.78rem;vertical-align:middle}
.table-pro tbody td{vertical-align:middle;border-color:#e5eaf2}
.table-pro tbody tr{cursor:pointer}
.table-pro tbody tr:hover{background:#eff6ff}
.name-link{font-weight:700;color:#1d4ed8;text-decoration:none}
.badge-soft{padding:.48rem .65rem;border-radius:999px;font-weight:700}
.metric{padding:1rem 1.1rem;border-left:4px solid var(--metric-color,#2563eb)}
.metric-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}
.metric-value{font-size:1.35rem;font-weight:850}
.detail-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;font-weight:800}
.detail-value{font-weight:700}
.table-scroll{max-height:calc(100vh - 310px);overflow:auto;border-radius:12px}
.empty-state{padding:4rem 1rem;text-align:center;color:var(--muted)}
.btn-brand{background:#2563eb;color:#fff;border-color:#2563eb}
.btn-brand:hover{background:#1d4ed8;color:#fff}
@media(max-width:768px){
    .page-actions{width:100%}
    .page-actions .btn{flex:1}
    .table-scroll{max-height:none}
}