:root{--primary:#2563eb;--dark:#0f172a;--muted:#64748b;--bg:#f1f5f9;--card:#ffffff;--line:#e2e8f0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#0f172a;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app-shell{display:flex;min-height:100vh}.sidebar{width:270px;background:#0f172a;color:#fff;position:fixed;top:0;bottom:0;left:0;padding:18px;overflow-y:auto;z-index:1000}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;letter-spacing:.2px;margin-bottom:22px}.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#38bdf8,#2563eb);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900}.sidebar .nav-link{color:#cbd5e1;border-radius:12px;padding:10px 12px;margin-bottom:4px;font-weight:600}.sidebar .nav-link:hover,.sidebar .nav-link:focus{background:#1e293b;color:#fff}.main{margin-left:270px;width:calc(100% - 270px)}.topbar{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:900}.topbar h1{font-size:1.2rem;margin:0;font-weight:800}.topbar small{color:var(--muted)}.topbar-right{display:flex;align-items:center;gap:10px}.user-pill{background:#eff6ff;color:#1d4ed8;padding:7px 12px;border-radius:999px;font-weight:700}.content{padding:24px}.card{border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.05)}.card-header{background:#fff;border-bottom:1px solid var(--line);border-radius:18px 18px 0 0!important}.metric{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(15,23,42,.05)}.metric span{display:block;color:var(--muted);font-weight:700;font-size:.85rem}.metric strong{display:block;font-size:1.65rem;margin-top:8px}.table{font-size:.92rem}.table th{color:#475569;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}.btn{border-radius:12px;font-weight:700}.form-control,.form-select{border-radius:12px;border-color:#cbd5e1}.guest-body{min-height:100vh;background:radial-gradient(circle at top left,#dbeafe,#f8fafc 42%,#e0f2fe);display:flex;align-items:center;justify-content:center;padding:20px}.login-wrap{width:100%;max-width:430px}.login-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 30px 80px rgba(37,99,235,.14)}.login-brand{margin-bottom:20px}.login-card h2{font-weight:900}.login-card p{color:var(--muted)}code{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:2px 6px}@media(max-width:991px){.sidebar{transform:translateX(-105%);transition:.2s ease}.sidebar.show{transform:translateX(0)}.main{margin-left:0;width:100%}.topbar{height:auto;min-height:70px;padding:12px 16px;gap:12px}.topbar-right{gap:6px}.user-pill{display:none}.content{padding:16px}.table{min-width:760px}.metric strong{font-size:1.3rem}}
.role-box{border:1px solid rgba(148,163,184,.28);background:rgba(30,41,59,.7);border-radius:16px;padding:10px 12px}.role-box span{display:block;color:#cbd5e1;font-size:.84rem}.role-box strong{display:block;color:#fff;font-size:.95rem}.sidebar .nav-link.active{background:#2563eb;color:#fff}.badge-role{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;background:#eef2ff;color:#3730a3;font-weight:800;font-size:.78rem}.permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}.permission-chip{border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px;font-weight:700;color:#334155}.action-row{display:flex;gap:8px;flex-wrap:wrap}.table-actions{white-space:nowrap}
.nav-section{color:#94a3b8;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin:18px 8px 7px}.topbar-title{min-width:190px}.topbar-router{flex:1;display:flex;justify-content:flex-end}.router-select-form{width:min(460px,100%);background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:8px 10px}.router-select-form label{display:block;font-size:.72rem;font-weight:900;color:#475569;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}.router-select-form small{display:block;color:#64748b;margin-top:3px;font-size:.75rem}.api-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.api-object-id{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.8rem}.api-subnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.api-subnav a{border:1px solid var(--line);border-radius:999px;padding:7px 12px;text-decoration:none;font-weight:800;background:#fff;color:#334155}.api-subnav a.active{background:#2563eb;color:#fff;border-color:#2563eb}.status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:#22c55e;margin-right:6px}.status-dot.off{background:#94a3b8}.mini-help{font-size:.84rem;color:#64748b}.sync-card{border:1px dashed #cbd5e1;border-radius:18px;padding:14px;background:#f8fafc}
@media(max-width:991px){.topbar{flex-wrap:wrap;align-items:flex-start}.topbar-title{flex:1}.topbar-router{order:3;width:100%;justify-content:stretch}.router-select-form{width:100%}.topbar-right{margin-left:auto}.nav-section{margin-top:14px}}

.stat-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .05);
  min-height: 112px;
}
.stat-card span {
  display: block;
  color: #64748b;
  font-size: .86rem;
  margin-bottom: 6px;
}
.stat-card strong {
  display: block;
  font-size: 1.25rem;
  color: #0f172a;
  margin-bottom: 4px;
  word-break: break-word;
}
.stat-card small {
  color: #64748b;
}

/* BilMik v7 sidebar refinement */
.sidebar{width:292px;padding:18px 14px;background:linear-gradient(180deg,#0f172a 0%,#111827 58%,#0b1220 100%)}
.main{margin-left:292px;width:calc(100% - 292px)}
.sidebar-nav{gap:4px}.sidebar .nav-link{display:flex;align-items:center;gap:9px;min-height:40px;color:#cbd5e1;border:1px solid transparent;border-radius:13px;padding:9px 12px;margin-bottom:2px;font-size:.93rem}.sidebar .nav-link.active{background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:rgba(147,197,253,.25);box-shadow:0 10px 25px rgba(37,99,235,.22)}.sidebar .nav-link:hover{background:#1e293b;border-color:rgba(148,163,184,.18)}.nav-group{margin:4px 0}.nav-group-toggle{width:100%;display:flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;color:#cbd5e1;border-radius:14px;padding:9px 11px;font-weight:800;text-align:left}.nav-group-toggle:hover,.nav-group-toggle.active{background:#182235;color:#fff;border-color:rgba(148,163,184,.20)}.nav-group-toggle.active{box-shadow:inset 3px 0 0 #38bdf8}.nav-icon{width:28px;height:28px;border-radius:10px;background:rgba(59,130,246,.16);display:inline-flex;align-items:center;justify-content:center;color:#93c5fd;font-size:.8rem;font-weight:900}.nav-caret{margin-left:auto;transition:.18s ease;color:#94a3b8}.nav-group.open .nav-caret,.nav-group-toggle[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}.nav-submenu{padding:4px 0 4px 38px}.nav-submenu .nav-sublink{min-height:34px;font-size:.86rem;padding:7px 10px;border-radius:11px;color:#bac4d3}.nav-submenu .nav-sublink::before{content:"";width:6px;height:6px;border-radius:999px;background:#64748b;display:inline-block}.nav-submenu .nav-sublink.active::before{background:#fff}.brand{padding:2px 4px 8px}.role-box{margin-left:4px;margin-right:4px}.topbar{gap:14px}.topbar-title h1{line-height:1.15}.form-side-card{top:96px}.router-search-form{flex-wrap:wrap}.router-search-form .form-control{min-width:220px;flex:1}.sidebar-backdrop{display:none}
@media(max-width:991px){.sidebar{width:min(88vw,310px);box-shadow:20px 0 60px rgba(15,23,42,.28)}.main{margin-left:0;width:100%}.sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:990}.sidebar.show{z-index:1001}.topbar{position:sticky;top:0}.topbar-title{min-width:0}.topbar-title h1{font-size:1rem}.topbar-title small{display:none}.form-side-card{position:static!important}.nav-submenu{padding-left:30px}.router-search-form .btn{width:100%}}
@media(max-width:575px){.content{padding:12px}.card{border-radius:15px}.topbar{padding:10px 12px}.topbar-right form .btn{padding:.35rem .55rem}.router-select-form{border-radius:13px}.table-actions .btn{margin-top:4px}.brand{margin-bottom:12px}}
