:root{
  --sidebar-width: 280px;
  --topbar-height: 78px;
  --bg: #f4f7fb;
  --surface: rgba(255,255,255,.88);
  --surface-strong:#ffffff;
  --text:#18212f;
  --muted:#738095;
  --border:rgba(15,23,42,.08);
  --shadow: 0 10px 30px rgba(15,23,42,.10);
  --shadow-soft: 0 20px 45px rgba(15,23,42,.08);
  --grad-primary: linear-gradient(135deg,#2563eb,#7c3aed);
  --grad-success: linear-gradient(135deg,#059669,#22c55e);
  --grad-warning: linear-gradient(135deg,#f97316,#facc15);
  --grad-danger: linear-gradient(135deg,#ef4444,#ec4899);
  --grad-info: linear-gradient(135deg,#0891b2,#3b82f6);
}
*{box-sizing:border-box}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:
radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 26%),
radial-gradient(circle at top right, rgba(124,58,237,.09), transparent 24%),
var(--bg);
min-height:100vh;}
a{text-decoration:none}
.app-page{padding-left:calc(var(--sidebar-width) + 20px);padding-top:calc(var(--topbar-height) + 22px);}
.app-page .container{max-width:none;padding-left:10px;padding-right:10px}
.sidebar{
 position:fixed; top:16px; left:16px; bottom:16px; width:var(--sidebar-width);
 background:linear-gradient(180deg,#111827,#182437 55%,#0f172a);
 border-radius:28px; box-shadow:0 24px 60px rgba(2,6,23,.28); z-index:1040; overflow:auto;
}
.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:20px}
.brand-block{padding:22px 22px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-logo{width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:grid;place-items:center;color:#fff;font-size:1.3rem;box-shadow:0 12px 25px rgba(59,130,246,.35)}
.brand-title{color:#fff;font-weight:800;letter-spacing:.3px}
.brand-subtitle{color:rgba(255,255,255,.66);font-size:.85rem}
.sidebar-section{padding:18px 16px 4px}
.sidebar-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.45); margin:0 12px 12px;}
.nav-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:22px;padding:10px}
.sidebar .nav-link,.sidebar .menu-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;color:rgba(255,255,255,.82);padding:12px 14px;border-radius:16px;border:none;background:transparent;width:100%;font-weight:600;transition:.22s ease;margin-bottom:4px}
.sidebar .nav-link:hover,.sidebar .nav-link.active,.sidebar .menu-toggle:hover,.sidebar .menu-toggle:not(.collapsed){background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(139,92,246,.18));color:#fff;transform:translateX(2px)}
.sidebar .nav-link .icon,.sidebar .menu-toggle .icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);flex-shrink:0}
.submenu{padding:6px 0 6px 46px}
.submenu .nav-link{font-size:.94rem;padding:10px 12px;background:transparent;color:rgba(255,255,255,.72)}
.topbar{position:fixed;top:16px;left:calc(var(--sidebar-width) + 32px);right:16px;height:var(--topbar-height);z-index:1030;background:rgba(255,255,255,.72);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.55);box-shadow:var(--shadow);border-radius:24px;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.topbar .hello{font-size:1.12rem;font-weight:800;margin-bottom:2px}
.topbar .sub{color:var(--muted);font-size:.88rem}
.top-pill{padding:12px 14px;border-radius:16px;background:rgba(37,99,235,.08);color:#1d4ed8;font-weight:700;display:flex;align-items:center;gap:10px}
.card,.table,.alert,.form-control,.form-select,.input-group-text,.dropdown-menu{border:none}
.card{background:rgba(255,255,255,.88);backdrop-filter:blur(8px);box-shadow:var(--shadow-soft);border-radius:24px;overflow:hidden}
.card .card-body{padding:1.35rem}
.section-title{font-weight:800;letter-spacing:-.02em;margin-bottom:.35rem}
.section-subtitle{color:var(--muted);margin-bottom:0}
.page-banner{position:relative;overflow:hidden;border-radius:30px;padding:28px 28px;background:linear-gradient(135deg,#0f172a,#1d4ed8 55%,#8b5cf6);color:#fff;box-shadow:0 20px 45px rgba(30,41,59,.22)}
.page-banner:before{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;background:rgba(255,255,255,.08);border-radius:50%}
.page-banner:after{content:"";position:absolute;right:80px;bottom:-90px;width:240px;height:240px;background:rgba(255,255,255,.06);border-radius:50%}
.metric-card{position:relative;padding:22px;border-radius:28px;color:#fff;overflow:hidden;min-height:160px}
.metric-card::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px;background:rgba(255,255,255,.14);border-radius:50%}
.metric-card .label{opacity:.8;font-weight:600;text-transform:uppercase;font-size:.78rem;letter-spacing:.12em}
.metric-card .value{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin:10px 0 8px}
.metric-card .meta{font-size:.95rem;opacity:.9}
.metric-card .metric-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:1.25rem}
.kpi-primary{background:var(--grad-primary)}
.kpi-success{background:var(--grad-success)}
.kpi-warning{background:var(--grad-warning)}
.kpi-danger{background:var(--grad-danger)}
.kpi-info{background:var(--grad-info)}
.table{margin-bottom:0;border-collapse:separate;border-spacing:0 10px}
.table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#64748b;background:transparent;border:none;padding:0 14px 10px}
.table tbody tr{background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.05)}
.table tbody td{padding:15px 14px;border:none;vertical-align:middle}
.table tbody tr td:first-child{border-radius:16px 0 0 16px}
.table tbody tr td:last-child{border-radius:0 16px 16px 0}
.form-control,.form-select{min-height:52px;border-radius:16px;background:#f8fafc;box-shadow:inset 0 0 0 1px rgba(148,163,184,.18)}
.form-control:focus,.form-select:focus{background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.14), inset 0 0 0 1px rgba(59,130,246,.26)}
.btn{border:none;border-radius:16px;font-weight:700;padding:.82rem 1.25rem;box-shadow:none}
.btn-primary{background:linear-gradient(135deg,#2563eb,#7c3aed)}
.btn-success{background:linear-gradient(135deg,#059669,#22c55e)}
.btn-danger{background:linear-gradient(135deg,#ef4444,#ec4899)}
.btn-warning{background:linear-gradient(135deg,#f97316,#facc15);color:#111827}
.btn-outline-light{border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.10)}
.badge{padding:.62rem .8rem;border-radius:999px;font-weight:700}
.stat-mini{border-radius:22px;padding:18px 20px;background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.08)}
.stat-mini .icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(59,130,246,.09);color:#2563eb}
.surface-muted{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.96));}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.quick-link{padding:18px;border-radius:22px;background:#fff;box-shadow:0 16px 35px rgba(15,23,42,.08);color:var(--text);font-weight:700;display:flex;align-items:center;gap:12px;transition:.22s}
.quick-link:hover{transform:translateY(-3px);color:#1d4ed8}
.quick-link i{width:42px;height:42px;border-radius:14px;background:rgba(59,130,246,.10);display:grid;place-items:center;color:#2563eb}
.progress-modern{height:12px;border-radius:999px;background:#e2e8f0;overflow:hidden}.progress-modern > span{display:block;height:100%;border-radius:999px;background:linear-gradient(135deg,#2563eb,#7c3aed)}
.login-page{display:grid;place-items:center;padding:32px;position:relative;overflow:hidden}
.login-page::before,.login-page::after{content:"";position:absolute;border-radius:50%;filter:blur(10px)}
.login-page::before{width:360px;height:360px;background:rgba(37,99,235,.12);left:-120px;top:-80px}
.login-page::after{width:340px;height:340px;background:rgba(124,58,237,.12);right:-80px;bottom:-100px}
.login-shell{width:min(1040px,100%);display:grid;grid-template-columns:1.08fr .92fr;gap:26px;align-items:stretch}
.login-promo{background:linear-gradient(135deg,#0f172a,#1d4ed8 58%,#8b5cf6);border-radius:34px;padding:42px;color:#fff;box-shadow:0 25px 70px rgba(15,23,42,.24);position:relative;overflow:hidden}
.login-promo::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);top:-40px;right:-70px}
.login-promo::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.06);bottom:-140px;left:-50px}
.login-card{background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-radius:34px;padding:18px;box-shadow:0 25px 70px rgba(15,23,42,.12)}
.login-inner{padding:24px}
.login-stat{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.1);border-radius:18px}
.footer-note{color:var(--muted);font-size:.88rem}
@media (max-width: 991px){
  .app-page{padding-left:0;padding-top:104px}
  .sidebar{left:10px;top:10px;bottom:10px;transform:translateX(-120%);transition:.25s ease}
  .sidebar.show{transform:translateX(0)}
  .topbar{left:12px;right:12px;top:12px}
  .app-page .container{padding-left:0;padding-right:0}
  .login-shell{grid-template-columns:1fr}
}
@media (max-width: 575px){
  .page-banner{padding:22px}
  .topbar{height:auto;padding:14px 16px;align-items:flex-start;gap:12px;flex-direction:column}
}