/* Topbar */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar .wrap{
  max-width:1240px;margin:0 auto;padding:12px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:#0b1220;letter-spacing:.2px}
.brand .logo{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#60a5fa,#2563eb);box-shadow:0 12px 25px rgba(37,99,235,.25);}
.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--border);
  background:var(--primary);color:#fff;font-weight:800;
  box-shadow:0 14px 34px rgba(37,99,235,.18);
  cursor:pointer;
}
.btn:hover{background:var(--primary2);text-decoration:none}
.btn.secondary{background:#fff;color:var(--text);box-shadow:var(--shadow2)}
.btn.secondary:hover{background:#f8fafc}
.btn.danger{background:var(--danger);border-color:transparent;box-shadow:none}
.btn.danger:hover{filter:brightness(1.05)}
.btn.link{background:transparent;color:var(--primary);border-color:transparent;box-shadow:none;padding:0}
.btn.link:hover{text-decoration:underline;background:transparent}

input,select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:12px;background:#fff;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(37,99,235,.55);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
label{display:block;font-weight:800;margin:12px 0 6px}

/* Cards, alerts */
.card{background:#fff;border:1px solid var(--border);border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow);overflow:hidden;margin:14px 0}
.card .hd{padding:14px 16px;border-bottom:1px solid var(--border);font-weight:900}
.card .bd{padding:16px}

.alert{padding:10px 12px;border-radius:14px;border:1px solid var(--border);margin:12px 0}
.alert.danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert.success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.muted{color:var(--muted)}
.badge{display:inline-flex;padding:4px 10px;border-radius:999px;background:#f1f5f9;border:1px solid var(--border);font-weight:800;font-size:12px}

/* Layout with sidebar */
.layout{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start}
.sidebar{
  position:sticky;top:74px;
  background:#0b1220;color:#e8eefc;border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);box-shadow:0 18px 50px rgba(2,6,23,.20);
  overflow:hidden
}
.sidebar .title{padding:14px 14px;font-weight:900;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.10)}
.sidebar a{display:block;padding:10px 14px;color:rgba(232,238,252,.82);text-decoration:none}
.sidebar a:hover{background:rgba(255,255,255,.06)}
.sidebar a.active{background:rgba(37,99,235,.25);color:#fff}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;top:auto}
}