:root {
  --hm-primary: #0d56b3;
  --hm-primary-dark: #0b2f63;
  --hm-accent: #6f7c8a;
  --hm-bg: #eef3f9;
  --hm-card: #ffffff;
  --hm-text: #1f2937;
}
body {
  background: linear-gradient(180deg, #eef4fb 0%, #f8fbff 100%);
  color: var(--hm-text);
}
.sidebar {
  min-height: 100vh;
  background: linear-gradient(180deg, #0a1d3d 0%, #0d56b3 58%, #123f83 100%);
  color: #fff;
  position: sticky;
  top: 0;
}
.brand-box {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.2rem;
  padding: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  box-shadow: 0 12px 35px rgba(0,0,0,.18);
}
.brand-box img {
  max-width: 165px;
  width: 100%;
  height: auto;
  margin: 0 auto .6rem;
  display: block;
}
.brand-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.15;
}
.brand-subtitle {
  font-size: .78rem;
  opacity: .85;
}
.sidebar-group-label {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .08em;
  opacity: .75;
  margin: 1rem .75rem .35rem;
}
.sidebar a {
  color: #eef5ff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .95rem;
  border-radius: .9rem;
  margin-bottom: .35rem;
  transition: all .15s ease;
}
.sidebar a:hover, .sidebar a.active {
  background: rgba(255,255,255,.14);
  transform: translateX(2px);
}
.content {
  padding: 1.5rem;
}
.topbar {
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(13,86,179,.08);
  border-radius: 1.2rem;
  padding: 1rem 1.2rem;
  box-shadow: 0 10px 25px rgba(18,63,131,.08);
}
.page-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #143e78;
}
.card-stat, .table-wrap, .form-wrap, .info-card {
  background: var(--hm-card);
  border: 1px solid rgba(13,86,179,.08);
  border-radius: 1.25rem;
  box-shadow: 0 12px 28px rgba(18,63,131,.08);
}
.card-stat { border: 0; }
.card-stat .card-body {
  padding: 1.2rem 1.25rem;
}
.metric-label {
  color: #6b7280;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.metric-value {
  font-size: 2rem;
  font-weight: 800;
  color: #0d56b3;
}
.metric-note {
  color: #6b7280;
  font-size: .85rem;
}
.table-wrap, .form-wrap, .info-card {
  padding: 1rem 1.1rem;
}
.table-wrap h5, .info-card h5 {
  color: #143e78;
  font-weight: 700;
}
.table thead th {
  color: #526174;
  font-size: .85rem;
  border-bottom-width: 1px;
}
.table tbody td {
  vertical-align: middle;
}
.quick-actions a {
  min-width: 180px;
}
.login-shell {
  min-height: 100vh;
  background: radial-gradient(circle at top left, rgba(13,86,179,.25), transparent 35%), linear-gradient(135deg, #0a1d3d 0%, #0d56b3 60%, #dfe8f5 100%);
}
.login-card {
  border: 0;
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
}
.login-brand {
  background: linear-gradient(180deg, #0a1d3d 0%, #0d56b3 100%);
  color: #fff;
}
.login-brand img {
  max-width: 220px;
  width: 100%;
  height: auto;
}
.badge-soft {
  background: rgba(13,86,179,.10);
  color: #0d56b3;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-weight: 600;
}
.footer-note {
  color: #6b7280;
  font-size: .82rem;
}
@media (max-width: 767.98px) {
  .sidebar { min-height: auto; position: static; }
  .content { padding: 1rem; }
  .topbar { margin-top: 1rem; }
}
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
.list-clean { list-style:none; padding-left:0; margin:0; }
.list-clean li { padding:.4rem 0; border-bottom:1px solid rgba(0,0,0,.06); }
.payslip { max-width: 980px; margin: 0 auto; }
.payslip .line { display:flex; justify-content:space-between; padding:.35rem 0; border-bottom:1px dashed #d5deea; }
.section-title { font-weight:700; color:#143e78; margin-bottom:.6rem; }
@media print { .no-print, .sidebar, .topbar, .footer-note { display:none !important; } .content { width:100% !important; padding:0 !important; } body { background:#fff; } }