:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --ink: #172033;
  --muted: #6b778c;
  --primary: #265dff;
  --primary-2: #0d3cbf;
  --danger: #dc3545;
  --warning: #f59f00;
  --success: #16a34a;
  --sidebar-grad: linear-gradient(180deg, #0f172a 0%, #162a56 100%);
  --shadow: 0 20px 40px rgba(15, 23, 42, .08);
  --radius: 24px;
}
html, body { min-height: 100%; }
body {
  background: radial-gradient(circle at top left, #edf3ff 0, #f5f7fb 35%, #f5f7fb 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 290px; max-width: 86vw; background: var(--sidebar-grad); border-right: 1px solid rgba(255,255,255,.07);
}
.main-area { flex: 1; min-width: 0; }
.topbar {
  backdrop-filter: blur(10px); background: rgba(245, 247, 251, .9); border-bottom: 1px solid rgba(38,93,255,.08);
}
.patient-pill {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 1rem;
}
.nav-system {
  color: rgba(255,255,255,.86); border-radius: 16px; padding: .85rem 1rem; transition: .2s ease;
}
.nav-system:hover, .nav-system.active {
  color: #fff; background: rgba(255,255,255,.13); transform: translateX(2px);
}
.patient-switcher { min-width: 260px; max-width: 100%; }
.card-soft, .metric-card, .form-card {
  background: var(--surface); border: 1px solid rgba(15, 23, 42, .05); border-radius: var(--radius); box-shadow: var(--shadow);
}
.metric-card { padding: 1rem 1.1rem; position: relative; overflow: hidden; }
.metric-card::after {
  content: ""; position: absolute; inset: auto -24px -24px auto; width: 96px; height: 96px; border-radius: 50%; background: rgba(38,93,255,.08);
}
.metric-label { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.metric-value { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; line-height: 1; }
.metric-sub { color: var(--muted); font-size: .88rem; }
.section-title { font-weight: 800; margin-bottom: .25rem; }
.section-subtitle { color: var(--muted); }
.table-card { background: var(--surface); border: 1px solid rgba(15,23,42,.05); border-radius: var(--radius); box-shadow: var(--shadow); }
.table thead th {
  background: #eff4ff; color: #31456a; font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 0;
}
.table tbody tr { vertical-align: middle; }
.form-control, .form-select {
  border-radius: 16px; min-height: 46px; border-color: #d8e0f2; box-shadow: none;
}
textarea.form-control { min-height: 110px; }
.form-control:focus, .form-select:focus { border-color: rgba(38,93,255,.45); box-shadow: 0 0 0 4px rgba(38,93,255,.12); }
.btn { border-radius: 14px; font-weight: 700; }
.btn-primary { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%); border: 0; }
.btn-soft { background: #eef3ff; color: var(--primary); border: 1px solid #dbe6ff; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { max-width: 1080px; width: 100%; }
.login-brand {
  background: linear-gradient(135deg, #14213d 0%, #1f4cb7 65%, #5c86ff 100%); color: #fff; border-radius: 28px; padding: 2rem; height: 100%;
}
.login-panel {
  background: rgba(255,255,255,.96); border-radius: 28px; box-shadow: var(--shadow); padding: 2rem;
}
.hero-badge { display: inline-flex; gap: .5rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.status-success { background: rgba(22,163,74,.12); color: #0f7a33; }
.status-warning { background: rgba(245,159,0,.16); color: #b16600; }
.status-danger { background: rgba(220,53,69,.14); color: #b42334; }
.status-info { background: rgba(38,93,255,.12); color: #1741bf; }
.chart-wrap { min-height: 320px; }
.quick-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.quick-grid > * { grid-column: span 12; }
@media (min-width: 768px) {
  .quick-grid .span-4 { grid-column: span 4; }
  .quick-grid .span-6 { grid-column: span 6; }
  .quick-grid .span-8 { grid-column: span 8; }
}
@media (max-width: 991.98px) {
  .sidebar { width: 320px; }
  .patient-switcher { min-width: 180px; }
}
@media (max-width: 575.98px) {
  .topbar .container-fluid { align-items: flex-start !important; flex-direction: column; }
  .patient-switcher { width: 100%; }
  .table-responsive { font-size: .92rem; }
}