:root{
  --blue:#0B5ED7;
  --blue2:#0a58ca;
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --card:#f8fafc;
  --border:#e5e7eb;
  --danger:#dc2626;
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background:var(--bg);}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue2)}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--blue); color:#fff; box-shadow: 0 8px 18px rgba(2,6,23,.12);
}
.topbar-inner{display:flex;align-items:center;gap:16px; height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.18);
  font-weight:800; letter-spacing:.5px;
}
.brand-name{font-weight:700}
.nav{display:flex;gap:14px; align-items:center; margin-left:10px}
.nav a{color:rgba(255,255,255,.9); padding:10px 10px;border-radius:10px}
.nav a.active,.nav a:hover{background:rgba(255,255,255,.15); color:#fff}

.nav-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.pill{color:#fff;background:rgba(255,255,255,.15); padding:10px 12px; border-radius:999px}

.btn{border:0; cursor:pointer; font-weight:700; border-radius:12px; padding:10px 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn-primary{background:#fff;color:var(--blue)}
.btn-primary:hover{background:#f1f5f9}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-outline:hover{background:rgba(255,255,255,.12)}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.18)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:8px 10px;border-radius:10px;font-size:.92rem}

.page{padding-top:84px; padding-bottom:40px}
.hero{
  background:linear-gradient(180deg,#eff6ff 0,#ffffff 55%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow: var(--shadow);
}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:stretch}
.h-title{font-size:1.45rem; margin:0 0 8px}
.h-sub{margin:0 0 14px; color:var(--muted); line-height:1.5}
.h-actions{display:flex;gap:10px; flex-wrap:wrap}
.kpis{display:grid; grid-template-columns: repeat(2,1fr); gap:10px}
.kpi{background:#fff;border:1px solid var(--border); border-radius:14px; padding:12px}
.kpi b{display:block;font-size:1.05rem}
.kpi span{color:var(--muted);font-size:.92rem}

.grid{display:grid; gap:14px}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow: var(--shadow); padding:14px;
}
.card-title{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px}
.badge{display:inline-flex;align-items:center;gap:6px; padding:6px 10px; border-radius:999px; background:#eff6ff; color:#1e40af; font-weight:700; font-size:.85rem}
.muted{color:var(--muted)}
.sep{height:1px; background:var(--border); margin:12px 0}

.form{display:grid; gap:10px}
.input, select, textarea{
  width:100%; padding:12px 12px; border-radius:12px; border:1px solid var(--border);
  outline:none; background:#fff;
}
textarea{min-height:110px; resize:vertical}
.row{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px}
.help{font-size:.92rem; color:var(--muted)}
.alert{padding:12px; border-radius:14px; border:1px solid var(--border); background:var(--card)}
.alert-danger{border-color:#fecaca; background:#fef2f2; color:#7f1d1d}
.alert-success{border-color:#bbf7d0; background:#f0fdf4; color:#14532d}

.table-wrap{overflow:auto;border:1px solid var(--border); border-radius:14px; background:#fff}
table{width:100%; border-collapse:collapse; min-width:820px}
th,td{padding:12px; border-bottom:1px solid var(--border); text-align:left}
th{background:#f8fafc; font-size:.92rem; color:#334155}
tr:hover td{background:#fbfdff}

.footer{border-top:1px solid var(--border); padding:22px 0; background:#fff}
.footer-inner{display:flex; align-items:flex-start; justify-content:space-between; gap:18px}
.foot-title{font-weight:800}
.foot-muted{color:var(--muted); margin-top:4px}
.foot-links{display:flex; gap:14px; flex-wrap:wrap}
.foot-right{margin-left:auto}

.dropdown{position:relative}
.dropdown-menu{
  position:absolute; right:0; top:44px; min-width:200px;
  background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:14px; box-shadow: var(--shadow);
  padding:8px; display:none;
}
.dropdown-menu a{display:block; padding:10px 10px; border-radius:12px; color:var(--text)}
.dropdown-menu a:hover{background:#f1f5f9}
.dropdown-menu .danger{color:var(--danger)}
.dropdown-sep{height:1px;background:var(--border); margin:6px 0}

.mobile-menu{display:none; background:rgba(255,255,255,.10)}
.mobile-menu-inner{padding:12px 16px 16px}
.mobile-menu a{display:block;color:#fff; padding:10px 10px; border-radius:12px}
.mobile-menu a:hover{background:rgba(255,255,255,.12)}
.mobile-sep{height:1px;background:rgba(255,255,255,.22); margin:10px 0}

.mobile-menu-btn{display:none}

@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav{display:none}
  .mobile-menu-btn{display:inline-flex}
  .footer-inner{flex-direction:column}
}

@media (max-width: 560px){
  .row{grid-template-columns:1fr}
  .pill{display:none}
}