/* =========================================================
   HyperGuard Design System
   Clinical teal + coral "pulse" accent. Numbers render in
   monospace throughout, as a vitals-readout motif tying the
   type system to the product's subject (health monitoring).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  /* Color */
  --bg: #F5F9F8;
  --ink: #12211E;
  --primary: #0F6B5C;
  --primary-dark: #0A4A40;
  --primary-light: #E4F2EF;
  --pulse: #E8553F;
  --pulse-light: #FCE7E3;
  --low: #1E8E5A;
  --low-bg: #E5F5EC;
  --moderate: #C77800;
  --moderate-bg: #FBF0DC;
  --high: #C0392B;
  --high-bg: #FBE6E3;
  --surface: #FFFFFF;
  --border: #DCE6E3;
  --muted: #5B6E69;

  /* Type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Shape */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(18,33,30,.04), 0 8px 24px -10px rgba(18,33,30,.14);
  --shadow-lift: 0 4px 8px rgba(18,33,30,.06), 0 16px 32px -12px rgba(18,33,30,.18);

  --sidebar-w: 232px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0D1917;
  --ink: #E7F3EF;
  --primary: #29A186;
  --primary-dark: #1F7C68;
  --primary-light: #15302A;
  --pulse: #F17A64;
  --pulse-light: #2C1B18;
  --low: #3FB57F;
  --low-bg: #14291F;
  --moderate: #E0A233;
  --moderate-bg: #2E2412;
  --high: #E2695B;
  --high-bg: #301917;
  --surface: #142320;
  --border: #223330;
  --muted: #8BA39D;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
  font-size: 15px;
  transition: background .25s ease, color .25s ease;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.85em; font-weight: 700; }
h2 { font-size: 1.35em; font-weight: 600; }
h3 { font-size: 1.05em; font-weight: 600; margin-top: 1.2em; }
p { margin: 0 0 1em; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Numeric readout motif: every figure in the product uses this */
.mono, .num, .readout {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--pulse);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------
   Guest chrome (landing / login / register - no sidebar)
   --------------------------------------------------------- */
.guest-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(220, 230, 227, 0.8);
  background: rgba(245, 249, 248, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[data-theme="dark"] .guest-topbar {
  background: rgba(13, 25, 23, 0.62);
  border-color: rgba(34, 51, 48, 0.8);
}
.guest-topbar.scrolled {
  box-shadow: 0 10px 24px -18px rgba(18, 33, 30, 0.28);
  background: rgba(245, 249, 248, 0.8);
}
[data-theme="dark"] .guest-topbar.scrolled {
  background: rgba(13, 25, 23, 0.78);
}
.brand-mark { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15em; color: var(--ink); }
.brand-mark:hover { text-decoration: none; }
.brand-pulse { width: 26px; height: 16px; flex-shrink: 0; }
.guest-topbar nav a { margin-left: 22px; font-weight: 500; font-size: 0.92em; color: var(--muted); }
.guest-topbar nav a:hover { color: var(--primary); text-decoration: none; }
.guest-topbar .theme-toggle { margin-left: 22px; }

/* ---------------------------------------------------------
   Authenticated app shell (sidebar layout)
   --------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 22px 16px;
  position: sticky; top: 0; height: 100vh;
  transition: transform .25s ease;
  z-index: 40;
}
.sidebar .brand-mark { padding: 0 8px 22px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.sidebar-badge {
  font-size: .68em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-light); padding: 2px 8px; border-radius: 20px; margin-left: 4px;
}
.nav-links {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
  position: relative;
}
.nav-links a {
  position: relative;
  z-index: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 500; font-size: .93em;
  transition: color .18s ease, transform .18s ease, background-color .18s ease;
}
.nav-links a:hover {
  background: var(--primary-light);
  color: var(--primary);
  text-decoration: none;
}
.nav-links a.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 22px -12px rgba(15,107,92,0.75);
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.nav-links svg { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar-footer { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; font-size: .88em; }
.sidebar-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .85em; flex-shrink: 0;
}
.sidebar-user .name { font-weight: 600; }
.sidebar-user .role { color: var(--muted); font-size: .85em; }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 30;
}
.topbar h1 { margin: 0; font-size: 1.25em; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.sidebar-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--ink); }
.sidebar-overlay { display: none; }

.content { padding: 26px 28px 60px; max-width: 1100px; width: 100%; margin: 0 auto; }

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); box-shadow: var(--shadow-lift); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  .sidebar-overlay.open { display: block; position: fixed; inset: 0; background: rgba(18,33,30,.4); z-index: 35; }
}

/* Theme toggle button */
.theme-toggle {
  background: var(--bg); border: 1px solid var(--border); border-radius: 20px;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink);
}
.theme-toggle:hover { border-color: var(--primary); }
.theme-toggle svg { width: 16px; height: 16px; }
[data-theme="dark"] .icon-sun { display: inline-block; }
[data-theme="dark"] .icon-moon { display: none; }
.icon-sun { display: none; }
.icon-moon { display: inline-block; }

/* ---------------------------------------------------------
   Layout helpers
   --------------------------------------------------------- */
.container { max-width: 1000px; margin: 30px auto; padding: 0 20px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.text-center { text-align: center; }
.text-muted { color: var(--muted); font-size: 0.9em; }

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
.form-group { margin-bottom: 16px; }
label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.88em; color: var(--ink); }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1em;
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
.field-hint { font-size: .82em; color: var(--muted); margin-top: 5px; }
.field-hint.hint-live { color: var(--primary); font-weight: 600; }

fieldset.form-section {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 18px 4px; margin-bottom: 20px;
}
fieldset.form-section legend {
  font-family: var(--font-display); font-weight: 600; font-size: .92em;
  color: var(--primary); padding: 0 8px;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.92em;
  font-weight: 600;
  font-family: var(--font-body);
  transition: background .15s ease, transform .1s ease;
}
.btn:hover { background: var(--primary-dark); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn svg { width: 16px; height: 16px; }
.btn-danger { background: var(--high); }
.btn-danger:hover { background: #9c2e22; }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.btn-sm { padding: 6px 12px; font-size: 0.83em; }
.link-button {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-button:hover {
  color: var(--primary-dark);
}
.auth-inline-switch {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9em;
}
.btn-ghost-danger {
  background: none; border: none; color: var(--high); cursor: pointer;
  padding: 0; font-family: inherit; font-size: inherit; text-decoration: underline;
}
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------
   Tables
   --------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.9em; }
th { background: var(--bg); color: var(--muted); font-weight: 600; font-size: .78em; text-transform: uppercase; letter-spacing: .04em; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--primary); }
th.sortable::after { content: '⇅'; opacity: .35; margin-left: 4px; font-size: .9em; }
th.sort-asc::after { content: '↑'; opacity: 1; color: var(--primary); }
th.sort-desc::after { content: '↓'; opacity: 1; color: var(--primary); }
tbody tr:hover { background: var(--primary-light); }
td.num, th.num { font-family: var(--font-mono); }

/* ---------------------------------------------------------
   Badges
   --------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px; font-size: 0.78em; font-weight: 700; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-low { background: var(--low-bg); color: var(--low); }
.badge-moderate { background: var(--moderate-bg); color: var(--moderate); }
.badge-high { background: var(--high-bg); color: var(--high); }

/* ---------------------------------------------------------
   Toast / flash alerts
   --------------------------------------------------------- */
#toast-stack { position: fixed; top: 18px; right: 18px; z-index: 100; display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow-lift);
  font-size: .88em; display: flex; align-items: flex-start; gap: 10px;
  animation: toast-in .25s ease;
}
.toast.toast-error { border-left-color: var(--high); }
.toast .toast-close { background: none; border: none; cursor: pointer; color: var(--muted); margin-left: auto; font-size: 1.1em; line-height: 1; padding: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.toast.leaving { animation: toast-out .2s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* legacy inline flash (still used as fallback) */
.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 0.9em; }
.flash-success { background: var(--low-bg); color: var(--low); border: 1px solid var(--low); }
.flash-error { background: var(--high-bg); color: var(--high); border: 1px solid var(--high); }

/* ---------------------------------------------------------
   Confirm / app modal overlays
   --------------------------------------------------------- */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(11,25,22,.56);
  z-index: 200; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }
.page-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 25, 22, 0.02);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 80ms ease, visibility 80ms ease;
  z-index: 999;
}
.page-loading-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.page-loading-spinner {
  display: none;
}
.modal-box {
  background: var(--surface); border-radius: var(--radius); padding: 24px;
  max-width: 380px; width: 100%; box-shadow: var(--shadow-lift);
  animation: modal-in .2s ease;
  border: 1px solid var(--border);
}
.modal-box.modal-box--wide { max-width: 760px; }
.modal-box h3 { margin-top: 0; }
.modal-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 16px;
}
.modal-close {
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; font-size: 1.1em;
}
.modal-close:hover { border-color: var(--primary); color: var(--primary); }
.modal-content { max-height: 72vh; overflow: auto; padding-right: 4px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.modal-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: .72em; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--primary);
  background: var(--primary-light); padding: 5px 10px; border-radius: 999px; margin-bottom: 8px;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.page-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px;
}
.page-header p { margin-bottom: 0; }

.auth-shell {
  min-height: calc(100vh - 120px); display: grid; place-items: center; padding: 24px;
}
.auth-card {
  width: min(460px, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 24px; padding: 30px; box-shadow: var(--shadow-lift); position: relative; overflow: hidden;
  animation: modal-in .24s ease;
}
.auth-card::before {
  content: ''; position: absolute; inset: 0 auto auto 0; width: 140px; height: 140px;
  background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
  pointer-events: none;
}
.auth-card h2 { margin-bottom: 6px; }
.auth-card .auth-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 6px 10px;
  border-radius: 999px; background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: .78em;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ---------------------------------------------------------
   Stat cards (animated mono counters)
   --------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 800px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; position: relative; overflow: hidden;
}
.stat-box .num { font-size: 1.9em; font-weight: 700; color: var(--ink); display: block; }
.stat-box .label { color: var(--muted); font-size: 0.8em; margin-top: 4px; }
.stat-box .stat-icon { position: absolute; top: 16px; right: 16px; color: var(--primary-light); }
.stat-box .stat-icon svg { width: 34px; height: 34px; }

/* ---------------------------------------------------------
   Blood-pressure gauge (signature component)
   --------------------------------------------------------- */
.bp-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bp-gauge { width: 240px; max-width: 100%; }
.bp-gauge .needle { transform-origin: 120px 120px; transition: transform 1.1s cubic-bezier(.34,1.4,.4,1); }
.bp-gauge .needle-hub { fill: var(--ink); }
.bp-gauge-score { font-family: var(--font-mono); font-size: 2.4em; font-weight: 700; margin-top: -34px; }
.bp-gauge-unit { font-size: .5em; color: var(--muted); font-weight: 500; }
.bp-gauge-label { font-family: var(--font-display); font-weight: 700; font-size: 1.1em; letter-spacing: .02em; }

/* ---------------------------------------------------------
   Pulse / ECG line (hero accent)
   --------------------------------------------------------- */
.pulse-line-svg path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw-pulse 2.4s ease-out forwards; }
@keyframes draw-pulse { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------
   Landing page hero
   --------------------------------------------------------- */
.hero {
  padding: 64px 32px 40px; text-align: center; max-width: 720px; margin: 0 auto;
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78em; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--primary);
  background: var(--primary-light); padding: 5px 12px; border-radius: 20px; margin-bottom: 18px;
}
.hero h1 { font-size: 2.6em; margin-bottom: .3em; }
.hero p.lede { font-size: 1.1em; color: var(--muted); max-width: 520px; margin: 0 auto 28px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.vitals-strip {
  display: flex; justify-content: center; gap: 0; flex-wrap: wrap;
  max-width: 900px; margin: 50px auto 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.vitals-strip .vital { flex: 1; min-width: 140px; text-align: center; padding: 18px 12px; border-left: 1px solid var(--border); }
.vitals-strip .vital:first-child { border-left: none; }
.vitals-strip .vital .v-label { font-size: .72em; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.vitals-strip .vital .v-value { font-family: var(--font-mono); font-size: 1.3em; font-weight: 600; color: var(--primary); margin-top: 4px; }

.section-title { text-align: center; margin: 56px auto 28px; max-width: 600px; }

/* ---------------------------------------------------------
   Auth pages
   --------------------------------------------------------- */
.auth-wrapper { max-width: 420px; margin: 50px auto; }

/* ---------------------------------------------------------
   Chart containers
   --------------------------------------------------------- */
.chart-card canvas { max-height: 260px; }

/* ---------------------------------------------------------
   Factor / recommendation lists
   --------------------------------------------------------- */
.factor-list, .rec-list { margin: 0; padding: 0; list-style: none; }
.factor-list li, .rec-list li {
  display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .92em;
}
.factor-list li:last-child, .rec-list li:last-child { border-bottom: none; }
.factor-list li::before { content: '•'; color: var(--high); font-weight: 700; }
.rec-list li::before { content: '✓'; color: var(--primary); font-weight: 700; }

/* =========================================================
   HyperGuard Image #1 Dashboard UI
   Scoped dashboard treatment. Existing routes/data structure
   remain unchanged; this layer only modernizes presentation.
   ========================================================= */
.hg-dashboard-body .sidebar{background:#102f57;border-right:0;padding:24px 14px;color:#fff;box-shadow:10px 0 30px rgba(16,47,87,.12)}
.hg-dashboard-body .sidebar .brand-mark{color:#fff;border-bottom:0;padding:0 8px 28px;margin-bottom:14px;font-size:1.18rem}
.hg-dashboard-body .sidebar .brand-pulse{display:none}
.hg-dashboard-body .sidebar:before{content:'Healthier Today. Safer Tomorrow.';position:absolute;top:58px;left:45px;color:#b9cbe1;font-size:10px;letter-spacing:.01em}
.hg-dashboard-body .nav-links{gap:7px}
.hg-dashboard-body .nav-links a{color:#e7eff8;border-radius:11px;padding:12px 13px;font-size:.92rem}
.hg-dashboard-body .nav-links a:hover{background:rgba(74,143,226,.18);color:#fff}
.hg-dashboard-body .nav-links a.active{background:linear-gradient(135deg,#276fc0,#225b9c);box-shadow:none;color:#fff}
.hg-dashboard-body .nav-links svg{width:18px;height:18px}
.hg-dashboard-body .sidebar-footer{border-top:1px solid rgba(255,255,255,.14)}
.hg-dashboard-body .sidebar-user .name{color:#fff}.hg-dashboard-body .sidebar-user .role{color:#a9bfd8}
.hg-dashboard-body .sidebar-avatar{background:#fff;color:#1767b8}
.hg-dashboard-body .sidebar-footer .btn-secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.hg-dashboard-body .main-col{background:#f4f8fc}
.hg-dashboard-body .topbar{background:#f4f8fc;border-bottom:0;padding:13px 30px}
.hg-dashboard-body .topbar h1{font-weight:700;color:#14345d}
.hg-dashboard-body .content{max-width:1320px;padding:24px 26px 55px}
.hg-dashboard{color:#17365f}.hg-dashboard *{box-sizing:border-box}
.hg-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.hg-eyebrow{display:flex;align-items:center;gap:7px;color:#1a6bc1;font-size:.82rem;font-weight:700;margin-bottom:6px}.hg-eyebrow svg{width:15px;height:15px}
.hg-welcome h1{font-size:2rem;color:#102f57;margin:0 0 4px;letter-spacing:-.03em}.hg-welcome p{margin:0;color:#5f7692;font-size:1rem}
.hg-date-chip{display:flex;align-items:center;gap:10px;color:#17365f}.hg-date-chip svg{width:20px;color:#176ed0}.hg-date-chip strong,.hg-date-chip span{display:block}.hg-date-chip strong{font-size:.88rem}.hg-date-chip span{font-size:.72rem;color:#71869f;margin-top:2px}
.hg-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.hg-kpi{position:relative;display:flex;align-items:center;gap:13px;min-height:96px;padding:17px 17px;background:#fff;border:1px solid #e0ebf6;border-radius:12px;box-shadow:0 5px 18px rgba(31,74,118,.07)}
.hg-kpi-icon{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}.hg-kpi-icon svg{width:24px;height:24px;color:#fff}.hg-kpi div:nth-child(2){min-width:0}.hg-kpi span,.hg-kpi small{display:block}.hg-kpi span{font-size:.78rem;font-weight:700;color:#245184}.hg-kpi strong{display:block;font-family:var(--font-mono);font-size:1.35rem;line-height:1.25;color:#123b70;margin:3px 0}.hg-kpi small{font-size:.69rem;color:#7990aa}.hg-chevron{position:absolute;right:12px;width:16px;color:#5b9be0}.hg-kpi-blue .hg-kpi-icon{background:linear-gradient(135deg,#6678f4,#4f65dc)}.hg-kpi-red .hg-kpi-icon{background:linear-gradient(135deg,#ff6d7c,#f04458)}.hg-kpi-green .hg-kpi-icon{background:linear-gradient(135deg,#23c997,#16a977)}.hg-kpi-cyan .hg-kpi-icon{background:linear-gradient(135deg,#4bb5ee,#2c91dc)}.hg-kpi-red strong{color:#ed3f55}.hg-kpi-green strong{color:#14976b}
.hg-main-grid{display:grid;grid-template-columns:1.7fr .82fr .95fr;gap:16px;margin-bottom:16px}.hg-card{background:#fff;border:1px solid #dfeaf5;border-radius:12px;box-shadow:0 5px 18px rgba(31,74,118,.065);overflow:hidden}.hg-card-head,.hg-card-title{display:flex;align-items:center;gap:11px}.hg-card-head{padding:16px 18px;background:linear-gradient(90deg,#edf7ff,#f7fbff);border-bottom:1px solid #e3eef8}.hg-card-title{padding:14px 16px 10px}.hg-card-title h2,.hg-card-head h2{font-size:.94rem;color:#123b70;margin:0;text-transform:uppercase;letter-spacing:.01em}.hg-card-title p,.hg-card-head p{font-size:.74rem;color:#68829e;margin:3px 0 0}.hg-section-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eaf4ff;color:#1774d2;flex:0 0 auto}.hg-section-icon svg{width:18px}.hg-card-title.pink{background:#fff0f4}.hg-card-title.pink .hg-section-icon{background:#ffe0e9;color:#d91f56}.hg-card-title.teal{background:#effbf9}.hg-card-title.teal .hg-section-icon{background:#d9f6ef;color:#0f9e81}.hg-card-title.mint{background:#effcf9}.hg-card-title.mint .hg-section-icon{background:#d8f5ed;color:#119d84}
.hg-card-body{padding:15px 18px 17px}.hg-progress-ring{margin-left:auto;width:45px;height:45px;border-radius:50%;background:conic-gradient(#1d8cf3 var(--value),#dbe9f6 0);display:grid;place-items:center;position:relative}.hg-progress-ring:after{content:'';position:absolute;inset:6px;background:#fff;border-radius:50%}.hg-progress-ring span{position:relative;z-index:1;font-size:.67rem;font-weight:700;color:#15599b}.hg-task-summary{display:flex;justify-content:space-between;align-items:center;font-size:.84rem;margin-bottom:8px}.hg-task-summary strong{color:#173b66}.hg-task-summary span{font-weight:700;color:#1b6fc5}.hg-progress-track{height:12px;background:#e6f0f8;border-radius:99px;overflow:hidden}.hg-progress-track.large{height:13px}.hg-progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#17b980,#13a4a2)}.hg-task-preview{margin:10px 0 13px}.hg-task-row{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:.79rem;color:#244466}.hg-check{width:21px;height:21px;border:1px solid #a9c9e8;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:.8rem}.hg-task-row.is-complete .hg-check{background:#16b87f;border-color:#16b87f}.hg-task-row.is-complete span:last-child{color:#35556f}.hg-more-task{font-size:.73rem;color:#6b87a3;margin-top:5px}.hg-empty-task,.hg-empty-chart{padding:20px;color:#7890a8;font-size:.8rem}.hg-primary-btn,.hg-outline-btn,.hg-view-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;font-weight:700;font-size:.77rem;text-decoration:none;cursor:pointer;transition:.18s}.hg-primary-btn{background:linear-gradient(135deg,#2189ef,#1479e0);color:#fff;padding:11px 15px}.hg-primary-btn:hover{color:#fff;text-decoration:none;transform:translateY(-1px)}.hg-primary-btn.full{width:100%;margin-top:8px}.hg-outline-btn{width:100%;border:1px solid #b9d8f5;color:#1774d2;background:#f7fbff;padding:9px}.hg-outline-btn.danger{border-color:#ff9db1;color:#d62d53;background:#fff8fa}.hg-outline-btn:hover,.hg-view-btn:hover{text-decoration:none;background:#edf6ff}.hg-primary-btn svg,.hg-outline-btn svg,.hg-view-btn svg{width:15px;height:15px}
.hg-risk-card{min-height:280px}.hg-risk-content{display:flex;align-items:center;gap:13px;padding:8px 18px 6px}.hg-risk-ring{width:86px;height:86px;border-radius:50%;background:conic-gradient(#cf2050 var(--risk),#edf0f5 0);display:grid;place-items:center;position:relative;flex:0 0 auto}.hg-risk-ring:after{content:'';position:absolute;inset:9px;background:#fff;border-radius:50%}.hg-risk-ring span{position:relative;z-index:1;font-family:var(--font-mono);font-size:1.05rem;font-weight:700;color:#17365f}.hg-risk-label{display:block;font-size:1rem;color:#d5254f;margin-bottom:3px}.hg-risk-content div:last-child span{font-size:.73rem;color:#6b829b}.hg-risk-card>p{padding:4px 18px 13px;margin:0;font-size:.77rem;color:#526d89;line-height:1.55}
.hg-metric-list{padding:0 16px 8px}.hg-metric-list>div{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:7px;padding:10px 0;border-bottom:1px solid #e8f0f7}.hg-metric-list>div:last-child{border-bottom:0}.hg-metric-list svg{width:18px;color:#1982d9}.hg-metric-list span{font-size:.73rem;color:#56708c}.hg-metric-list strong{font-family:var(--font-mono);font-size:.78rem;color:#153a68}
.hg-analytics-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-bottom:16px}.hg-chart-card,.hg-plan-card{min-height:245px}.hg-chart-wrap{height:135px;padding:0 17px}.hg-empty-chart{height:135px;display:grid;place-items:center;text-align:center}.hg-trend-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:9px 17px 14px}.hg-trend-footer div{background:#f5faff;border-radius:7px;padding:7px 9px}.hg-trend-footer span{display:block;color:#64809d;font-size:.65rem}.hg-trend-footer strong{display:block;color:#173f72;font-family:var(--font-mono);font-size:.9rem;margin-top:2px}.hg-trend-footer .hg-change{background:#eef9f5}.hg-trend-footer .hg-change strong{color:#07946d}.hg-plan-card{padding-bottom:15px}.hg-plan-meta{display:flex;justify-content:space-between;padding:12px 17px 8px;font-size:.78rem;color:#1a3e68}.hg-plan-meta span b{color:#078f70}.hg-plan-card>.hg-progress-track{margin:0 17px}.hg-plan-count{font-size:.72rem;color:#67829e;padding:8px 17px}.hg-plan-card>p{font-size:.74rem;color:#6b849e;padding:0 17px;margin:0 0 7px}
.hg-bottom-grid{display:grid;grid-template-columns:.9fr .85fr 1.65fr;gap:16px}.hg-focus-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 16px 13px}.hg-focus-item{background:#f4f9ff;border-radius:8px;padding:11px 6px;text-align:center;min-width:0}.hg-focus-item svg{width:25px;height:25px;color:#147be1;margin-bottom:4px}.hg-focus-item strong,.hg-focus-item span{display:block}.hg-focus-item strong{font-size:.69rem;color:#173e6b}.hg-focus-item span{font-size:.61rem;color:#7189a3;margin-top:3px}.hg-focus-card>.hg-outline-btn{width:calc(100% - 32px);margin:0 16px 15px}.hg-journey{padding:5px 18px 15px}.hg-journey>div{display:flex;align-items:center;gap:10px;position:relative;padding:7px 0;font-size:.77rem;color:#4d6b89}.hg-journey>div:not(:last-child):after{content:'';position:absolute;left:9px;top:28px;height:16px;border-left:1px solid #d1dfec}.hg-journey svg{width:19px;height:19px;color:#6e9dcc;z-index:1;background:#fff}.hg-journey .done svg{color:#0aa97b;background:#dff7ef;border-radius:50%;padding:2px}.hg-journey .current{color:#1575d1;font-weight:700}.hg-journey .current svg{color:#1575d1;background:#e2f0ff;border-radius:50%}
.hg-history-card{min-width:0}.hg-history-card>.hg-card-title{display:grid;grid-template-columns:34px 1fr auto}.hg-history-card>.hg-card-title>a{font-size:.7rem;color:#1478d4}.hg-table-wrap{overflow-x:auto;padding:0 14px 14px}.hg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.72rem}.hg-table th{background:#edf5fd;color:#355779;text-align:left;font-size:.66rem;padding:9px}.hg-table th:first-child{border-radius:7px 0 0 7px}.hg-table th:last-child{border-radius:0 7px 7px 0}.hg-table td{padding:10px 9px;border-bottom:1px solid #edf2f7;color:#3d5873;white-space:nowrap}.hg-risk-badge,.hg-status-badge{display:inline-flex;padding:4px 8px;border-radius:99px;font-size:.63rem;font-weight:700}.hg-risk-badge.high{color:#e13750;background:#fff0f3}.hg-risk-badge.moderate{color:#bd7600;background:#fff7e7}.hg-risk-badge.low{color:#0a9a6f;background:#eafaf4}.hg-status-badge.current{color:#069a70;background:#e1f8ef;border:1px solid #9ce4c9}.hg-status-badge.previous{color:#3d628a;background:#eaf1f8}.hg-view-btn{border:1px solid #b9d8f5;background:#f8fbff;color:#1676d4;padding:5px 9px}.hg-table a:hover{text-decoration:none}
@media(max-width:1050px){.hg-kpi-grid{grid-template-columns:repeat(2,1fr)}.hg-main-grid{grid-template-columns:1.35fr 1fr}.hg-metrics-card{grid-column:1/-1}.hg-analytics-grid{grid-template-columns:1fr}.hg-bottom-grid{grid-template-columns:1fr 1fr}.hg-history-card{grid-column:1/-1}}
@media(max-width:760px){.hg-dashboard-body .content{padding:18px 14px 40px}.hg-welcome{align-items:flex-start;flex-direction:column}.hg-welcome h1{font-size:1.55rem}.hg-date-chip{align-self:flex-start}.hg-kpi-grid{grid-template-columns:1fr}.hg-main-grid,.hg-bottom-grid{grid-template-columns:1fr}.hg-metrics-card,.hg-history-card{grid-column:auto}.hg-focus-list{grid-template-columns:1fr}.hg-card-head{align-items:flex-start}.hg-progress-ring{margin-left:auto}.hg-dashboard-body .topbar{padding:10px 14px}}

/* =========================================================
   HyperGuard Patient Portal — Image 1 inspired UI refresh
   Scoped to user portal and guest authentication only.
   Admin portal remains untouched.
   ========================================================= */
.user-portal{--portal-bg:#f4f7fb;--portal-surface:#fff;--portal-ink:#183042;--portal-muted:#728396;--portal-border:#e4eaf1;--portal-navy:#123b53;--portal-blue:#2f80ed;--portal-teal:#19a887;--portal-red:#e35b5b;--portal-orange:#e8a33a;--portal-purple:#7c61d8;background:var(--portal-bg)}
.user-portal .app-shell{background:var(--portal-bg)}
.user-portal .sidebar{background:linear-gradient(180deg,#123b53 0%,#0d3044 100%);border:0;color:#fff;padding:24px 16px;box-shadow:8px 0 30px rgba(18,59,83,.10)}
.user-portal .sidebar .brand-mark{color:#fff;border-color:rgba(255,255,255,.12);padding:2px 10px 24px;margin-bottom:18px}
.user-portal .sidebar .brand-mark .brand-pulse{--pulse:#57d7bf}
.user-portal .nav-links a{color:rgba(255,255,255,.72);border-radius:12px;margin:2px 0;padding:12px 13px}
.user-portal .nav-links a:hover{background:rgba(255,255,255,.09);color:#fff}
.user-portal .nav-links a.active{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;border-left:3px solid #54d5bf;padding-left:10px}
.user-portal .sidebar-footer{border-color:rgba(255,255,255,.12)}
.user-portal .sidebar-user .role{color:rgba(255,255,255,.56)}
.user-portal .sidebar-avatar{background:#54d5bf;color:#0d3044}
.user-portal .sidebar-footer .btn-secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.user-portal .main-col{background:var(--portal-bg)}
.user-portal .topbar{background:rgba(255,255,255,.94);border-bottom:1px solid var(--portal-border);padding:15px 34px;backdrop-filter:blur(12px)}
.user-portal .topbar h1{font-size:15px;color:#53687a;font-weight:700}
.user-portal .content{max-width:1380px;padding:28px 34px 56px}
.user-portal .card{border:1px solid var(--portal-border);border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(30,56,76,.055);padding:24px}
.user-portal .card:hover{box-shadow:0 12px 30px rgba(30,56,76,.075)}
.user-portal .page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.user-portal .page-header h1{font-size:28px;letter-spacing:-.03em}
.user-portal .text-muted{color:var(--portal-muted)}
.user-portal .btn{border-radius:12px;background:var(--portal-navy);box-shadow:0 7px 18px rgba(18,59,83,.12);font-weight:700}
.user-portal .btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(18,59,83,.16)}
.user-portal .btn-secondary{background:#fff;color:var(--portal-ink);border:1px solid var(--portal-border);box-shadow:none}
.user-portal input,.user-portal select,.user-portal textarea{background:#fbfcfe;border:1px solid #dfe7ee;border-radius:11px;padding:11px 13px;color:var(--portal-ink)}
.user-portal input:focus,.user-portal select:focus,.user-portal textarea:focus{border-color:#8bbcf4;box-shadow:0 0 0 4px rgba(47,128,237,.09);outline:none}
.user-portal .form-section{border:1px solid var(--portal-border);border-radius:16px;padding:20px;margin-bottom:16px;background:#fff}
.user-portal .form-section legend{padding:0 8px;font-family:var(--font-display);font-weight:700;color:var(--portal-navy)}
.user-portal table{border-collapse:separate;border-spacing:0;width:100%;overflow:hidden;border:1px solid var(--portal-border);border-radius:15px;background:#fff}
.user-portal table th{background:#f7f9fc;color:#6d7e8e;font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:13px 14px;border-bottom:1px solid var(--portal-border)}
.user-portal table td{padding:14px;border-bottom:1px solid #edf1f5;color:var(--portal-ink)}
.user-portal table tr:last-child td{border-bottom:0}
.user-portal table tbody tr:hover td{background:#fbfdff}
.user-portal .badge{border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800}
.user-portal .modal-overlay{background:rgba(10,31,45,.52);backdrop-filter:blur(5px)}
.user-portal .modal-box{border:1px solid var(--portal-border);border-radius:20px;box-shadow:0 28px 70px rgba(10,31,45,.24)}

/* Dashboard polish */
.user-portal .hg-modern-dashboard{max-width:none;padding:0 0 24px}
.user-portal .hg-modern-dashboard .hg-hero{border:0;border-radius:24px;padding:28px 30px;background:linear-gradient(135deg,#ffffff 0%,#f8fbff 55%,#edf7ff 100%);box-shadow:0 10px 34px rgba(30,56,76,.07)}
.user-portal .hg-modern-dashboard .hg-kpis{gap:16px}
.user-portal .hg-modern-dashboard .hg-kpi,.user-portal .hg-modern-dashboard .hg-section{box-shadow:0 8px 26px rgba(30,56,76,.055);border-color:#e3eaf1}
.user-portal .hg-modern-dashboard .hg-kpi{border-radius:18px}
.user-portal .hg-modern-dashboard .hg-section{border-radius:20px}
.user-portal .hg-modern-dashboard .hg-primary{background:var(--portal-navy);border-radius:12px}
.user-portal .hg-modern-dashboard .hg-secondary{border-radius:12px}

/* History / result / profile page headers */
.user-portal .history-shell,.user-portal .result-shell,.user-portal .profile-shell{max-width:1240px;margin:0 auto}
.user-portal .record-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 28px;border-radius:22px;background:linear-gradient(135deg,#fff,#f4f9ff);border:1px solid var(--portal-border);box-shadow:0 8px 26px rgba(30,56,76,.055);margin-bottom:20px}
.user-portal .record-hero h1{margin:0;font-size:29px}
.user-portal .record-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.user-portal .metric-tile{display:flex;align-items:center;gap:14px;padding:17px;border:1px solid var(--portal-border);border-radius:15px;background:#fff}
.user-portal .metric-tile .metric-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#edf5ff;color:var(--portal-blue)}
.user-portal .metric-tile strong{display:block;font-family:var(--font-mono);font-size:20px}
.user-portal .metric-tile span{display:block;color:var(--portal-muted);font-size:11px;margin-top:2px}
.user-portal .assessment-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.user-portal .empty-state{padding:46px 20px;text-align:center;color:var(--portal-muted)}
.user-portal .empty-state .empty-icon{width:52px;height:52px;margin:0 auto 12px;border-radius:16px;display:grid;place-items:center;background:#edf5ff;color:var(--portal-blue)}

/* Health plan existing markup gets the same visual language */
.user-portal .health-plan-shell .card,.user-portal .health-plan-shell .stat-box{border-radius:18px!important;box-shadow:0 8px 26px rgba(30,56,76,.055)!important}
.user-portal .health-plan-shell button[type="submit"]{transition:.18s ease}
.user-portal .health-plan-shell button[type="submit"]:hover{border-color:#9ec9f4!important;background:#f7fbff!important;transform:translateY(-1px)}
.user-portal .health-plan-shell details{background:#fff;box-shadow:0 5px 18px rgba(30,56,76,.04)}

/* Guest/auth portal */
.user-guest{min-height:100vh;background:radial-gradient(circle at 15% 10%,#eaf6ff 0,#f5f8fb 35%,#f4f7fb 100%)}
.user-guest .guest-topbar{background:rgba(255,255,255,.86);border-bottom:1px solid #e4eaf1;padding:18px 40px;box-shadow:0 5px 20px rgba(30,56,76,.035)}
.user-guest .brand-mark{color:#123b53}
.user-guest .guest-topbar nav a{color:#647789}
.user-guest .auth-shell{min-height:calc(100vh - 78px);display:grid;place-items:center;padding:42px 20px}
.user-guest .auth-card{width:min(100%,480px);background:#fff;border:1px solid #e3eaf1;border-radius:24px;padding:34px;box-shadow:0 22px 60px rgba(30,56,76,.10)}
.user-guest .auth-card h2{font-size:30px;color:#183042;margin-bottom:8px}
.user-guest .auth-card input,.user-guest .auth-card select,.user-guest .auth-card textarea{border-radius:12px;background:#fbfcfe}
.user-guest .auth-card .btn{border-radius:12px}

@media(max-width:900px){
 .user-portal .content{padding:22px 18px 44px}.user-portal .topbar{padding:14px 18px}.user-portal .hg-modern-dashboard .hg-hero{padding:23px}.user-portal .hg-modern-dashboard .hg-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
 .user-portal .hg-modern-dashboard .hg-kpis{grid-template-columns:1fr}.user-portal .hg-modern-dashboard .hg-two-col,.user-portal .record-grid{grid-template-columns:1fr}.user-portal .hg-modern-dashboard .hg-hero{display:block}.user-portal .hg-modern-dashboard .hg-date-pill{margin-top:18px}.user-portal .page-header{display:block}.user-portal .page-header .btn{margin-top:14px}.user-guest .guest-topbar{padding:16px 18px}.user-guest .guest-topbar nav a{margin-left:10px;font-size:.82em}.user-guest .auth-card{padding:25px 20px}
}
/* Unified Patient Portal Image #1 consistency layer */
.user-portal{--portal-bg:#f4f8fc;--portal-surface:#fff;--portal-ink:#16324b;--portal-muted:#71869b;--portal-border:#dfe9f3;--portal-navy:#123b5d;--portal-blue:#1685f5;--portal-teal:#19b88a;background:var(--portal-bg)}
.user-portal .main-col{background:var(--portal-bg)}
.user-portal .content{max-width:1380px;padding:28px 34px 60px}
.user-portal .sidebar{background:linear-gradient(180deg,#123b5d 0%,#0b2d48 100%);border-right:0;color:#fff;box-shadow:8px 0 28px rgba(13,48,78,.12)}
.user-portal .sidebar .brand-mark{color:#fff;border-color:rgba(255,255,255,.12)}
.user-portal .sidebar .brand-pulse{--pulse:#61ddc2}
.user-portal .nav-links a{color:rgba(255,255,255,.72);border-radius:12px;margin:3px 0;padding:12px 13px}
.user-portal .nav-links a:hover{background:rgba(255,255,255,.09);color:#fff;text-decoration:none}
.user-portal .nav-links a.active{background:rgba(255,255,255,.14);color:#fff;border-left:3px solid #5ad8c0;padding-left:10px;box-shadow:none}
.user-portal .sidebar-footer{border-color:rgba(255,255,255,.12)}
.user-portal .sidebar-user .name{color:#fff}.user-portal .sidebar-user .role{color:rgba(255,255,255,.58)}
.user-portal .sidebar-avatar{background:#5ad8c0;color:#0b2d48}
.user-portal .sidebar-footer .btn-secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.user-portal .topbar{background:rgba(255,255,255,.94);border-bottom:1px solid var(--portal-border);backdrop-filter:blur(12px);padding:15px 34px}
.user-portal .topbar h1{font-size:15px;color:#587087;font-weight:700}
.user-portal .card{background:#fff;border:1px solid var(--portal-border);border-radius:18px;box-shadow:0 8px 26px rgba(31,74,118,.055)}
.user-portal .card:hover{box-shadow:0 12px 30px rgba(31,74,118,.075)}
.user-portal .page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.user-portal .page-header h1{font-size:29px;letter-spacing:-.03em;margin-bottom:5px}
.user-portal .record-hero{background:linear-gradient(135deg,#fff 0%,#f7fbff 58%,#edf7ff 100%);border-color:var(--portal-border);border-radius:22px;box-shadow:0 10px 30px rgba(31,74,118,.06)}
.user-portal .record-hero h1{color:#153a5d}.user-portal .hg-eyebrow{color:#1685f5}.user-portal .metric-icon{background:#eaf4ff;color:#1685f5;border-radius:14px}
.user-portal .btn{border-radius:11px;background:linear-gradient(135deg,#1685f5,#1174dc);border:1px solid #1685f5;color:#fff;font-weight:700;box-shadow:0 8px 18px rgba(22,133,245,.18)}
.user-portal .btn:hover{color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 11px 24px rgba(22,133,245,.22)}
.user-portal .btn-secondary{background:#fff;color:#244765;border-color:#cfddea;box-shadow:none}.user-portal .btn-secondary:hover{color:#1685f5;background:#f7fbff;border-color:#a9ccef}
.user-portal input,.user-portal select,.user-portal textarea{background:#fbfdff;border:1px solid #d5e2ee;border-radius:11px;color:#173752}
.user-portal input:focus,.user-portal select:focus,.user-portal textarea:focus{border-color:#76b7f4;box-shadow:0 0 0 4px rgba(22,133,245,.10)}
.user-portal label{color:#24435f}.user-portal .form-section{background:#fff;border-color:#e0e9f2;border-radius:16px}.user-portal .form-section legend{color:#123b5d}
.user-portal table{border:1px solid #dfe8f1;border-radius:15px;background:#fff}.user-portal table th{background:#f3f8fd;color:#55708b;border-bottom:1px solid #dfe8f1}.user-portal table td{color:#294861;border-bottom:1px solid #edf2f7}.user-portal table tbody tr:hover td{background:#f8fbfe}
.user-portal .modal-overlay{background:rgba(8,36,61,.54);backdrop-filter:blur(6px)}.user-portal .modal-box{border:1px solid #dbe7f1;border-radius:20px;box-shadow:0 30px 75px rgba(8,36,61,.25);background:#fff}.user-portal .modal-top{border-bottom:1px solid #edf2f7}.user-portal .modal-eyebrow{color:#1685f5}
.user-portal .text-muted{color:#71869b}.user-portal .badge{border-radius:999px;font-weight:800}.user-portal .history-shell,.user-portal .result-shell,.user-portal .profile-shell,.user-portal .health-plan-shell{max-width:1240px;margin:0 auto}
.user-portal .health-plan-shell .card{border-radius:18px!important;box-shadow:0 8px 26px rgba(31,74,118,.055)!important}.user-portal .health-plan-shell .stat-box{border:1px solid #e0e9f2!important;border-radius:14px!important;background:#f8fbfe!important;padding:16px!important}
.user-portal .health-plan-shell details{background:#fff;border-color:#dfe8f1!important;border-radius:14px!important}.user-portal .health-plan-shell summary{color:#24435f}
.user-portal .health-plan-shell .hp-back{display:inline-flex;align-items:center;gap:6px;color:#55708b;font-weight:700;font-size:.86rem;margin-bottom:10px}.user-portal .health-plan-shell .hp-back:hover{color:#1685f5;text-decoration:none}
.user-portal .history-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #edf2f7}.user-portal .history-page-label{color:#71869b;font-size:.8rem;font-weight:700}.user-portal .history-pagination .is-disabled{opacity:.5;pointer-events:none}
.admin-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--border);color:var(--muted);font-size:.82em}.admin-pagination .is-disabled{opacity:.5;pointer-events:none}
.user-portal .history-timezone{color:#71869b;font-size:.68rem;font-weight:700;letter-spacing:.03em}
.user-portal .health-plan-filters{display:flex;align-items:center;gap:8px;margin:22px 0 16px;padding:5px;width:max-content;max-width:100%;border:1px solid var(--portal-border);border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(31,74,118,.04)}
.user-portal .health-plan-filter{border:0;border-radius:8px;padding:8px 15px;background:transparent;color:#71869b;cursor:pointer;font:600 .78rem var(--font-body);transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
.user-portal .health-plan-filter:hover{color:#1685f5;background:#f4f9fe}.user-portal .health-plan-filter.is-active{background:#1685f5;color:#fff;box-shadow:0 5px 12px rgba(22,133,245,.18)}
.user-portal .health-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.user-portal .health-plan-card{padding:20px;border:1px solid var(--portal-border);border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(31,74,118,.055);transition:transform .18s ease,box-shadow .18s ease}.user-portal .health-plan-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(31,74,118,.09)}
.user-portal .health-plan-card[hidden]{display:none}.user-portal .health-plan-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.user-portal .health-plan-kicker{display:block;margin-bottom:4px;color:#1685f5;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.user-portal .health-plan-card h3{margin:0 0 5px;color:#163b5e;font-size:1rem}.user-portal .health-plan-completion{display:flex;justify-content:space-between;align-items:center;margin-top:20px;color:#617d98;font-size:.76rem}.user-portal .health-plan-completion strong{color:#173f6d;font-family:var(--font-mono);font-size:.82rem}.user-portal .health-plan-progress{height:8px;margin:8px 0 18px;overflow:hidden;border-radius:99px;background:#e6eff6}.user-portal .health-plan-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1685f5,#19b88a)}.user-portal .health-plan-actions{display:flex;gap:8px;flex-wrap:wrap}.user-portal .health-plan-actions .btn{font-size:.76rem}.user-portal .health-plan-assessment-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 20px}.user-portal .health-plan-assessment-summary div{padding:12px;border:1px solid #e0e9f2;border-radius:12px;background:#f8fbfe}.user-portal .health-plan-assessment-summary span,.user-portal .health-plan-assessment-summary strong{display:block}.user-portal .health-plan-assessment-summary span{color:#71869b;font-size:.68rem}.user-portal .health-plan-assessment-summary strong{margin-top:4px;color:#173f6d;font-family:var(--font-mono);font-size:.84rem}.user-portal .health-plan-filter-empty{padding:32px 18px;border:1px dashed #cbddea;border-radius:16px;background:#fbfdff;text-align:center}.user-portal .health-plan-filter-empty[hidden]{display:none}.user-portal .health-plan-filter-empty svg{display:block;width:28px;margin:0 auto 8px;color:#1685f5}.user-portal .health-plan-filter-empty strong,.user-portal .health-plan-filter-empty span{display:block}.user-portal .health-plan-filter-empty strong{color:#244765}.user-portal .health-plan-filter-empty span{margin-top:4px;color:#71869b;font-size:.8rem}
@media(max-width:900px){.user-portal .content{padding:22px 18px 44px}.user-portal .topbar{padding:14px 18px}}
@media(max-width:680px){.user-portal .content{padding:18px 14px 40px}.user-portal .page-header{display:block}.user-portal .page-header .btn{margin-top:14px}.user-portal .record-hero{padding:22px}.user-portal .record-hero h1{font-size:25px}.user-portal .health-plan-grid{grid-template-columns:1fr}.user-portal .health-plan-filters{width:100%;justify-content:space-between}.user-portal .health-plan-filter{flex:1;padding-left:8px;padding-right:8px}.user-portal .health-plan-assessment-summary{grid-template-columns:repeat(2,1fr)}}

/* Admin operations portal */
.admin-portal { --admin-bg:#f4f8fc; --admin-surface:#fff; --admin-ink:#173a5d; --admin-muted:#71869b; --admin-border:#dfe9f3; --admin-navy:#123b5d; --admin-blue:#1685f5; background:var(--admin-bg); }
.admin-portal .app-shell,.admin-portal .main-col { background:var(--admin-bg); }
.admin-portal .sidebar { background:linear-gradient(180deg,#123b5d 0%,#0b2d48 100%); border-right:0; box-shadow:8px 0 28px rgba(13,48,78,.12); }
.admin-portal .sidebar .brand-mark { color:#fff; border-color:rgba(255,255,255,.12); padding-bottom:24px; }
.admin-portal .sidebar .brand-pulse { --pulse:#61ddc2; }
.admin-portal .sidebar-badge { color:#d7fff6; background:rgba(84,216,192,.18); }
.admin-portal .nav-links { gap:5px; }
.admin-portal .nav-links a { color:rgba(255,255,255,.72); border-left:3px solid transparent; border-radius:11px; margin:2px 0; padding:11px 13px; transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
.admin-portal .nav-links a:hover { background:rgba(255,255,255,.09); color:#fff; text-decoration:none; transform:translateX(2px); }
.admin-portal .nav-links a.active { background:rgba(255,255,255,.14); border-left-color:#5ad8c0; color:#fff; padding-left:10px; box-shadow:0 8px 20px rgba(4,25,43,.12); }
.admin-portal .sidebar-footer { border-color:rgba(255,255,255,.12); }
.admin-portal .sidebar-user .name { color:#fff; }.admin-portal .sidebar-user .role { color:rgba(255,255,255,.58); }
.admin-portal .sidebar-avatar { background:#5ad8c0; color:#0b2d48; }
.admin-portal .sidebar-footer .btn-secondary { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff; }
.admin-portal .topbar { background:rgba(255,255,255,.94); border-bottom:1px solid var(--admin-border); padding:15px 30px; backdrop-filter:blur(12px); }
.admin-portal .topbar h1 { color:#587087; font-size:15px; font-weight:700; }
.admin-portal .content { max-width:1380px; padding:28px 34px 58px; }
.admin-portal .card { background:var(--admin-surface); border:1px solid var(--admin-border); border-radius:16px; box-shadow:0 8px 26px rgba(31,74,118,.055); }
.admin-portal .card:hover { box-shadow:0 12px 30px rgba(31,74,118,.08); }
.admin-portal .text-muted { color:var(--admin-muted); }
.admin-portal .admin-page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.admin-portal .admin-page-intro h2 { margin:0 0 5px; color:var(--admin-ink); font-size:1.55rem; }
.admin-portal .admin-page-intro p { margin:0; }
.admin-portal .admin-eyebrow { display:flex; align-items:center; gap:7px; margin-bottom:7px; color:var(--admin-blue); font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.admin-portal .admin-eyebrow svg { width:15px; }
.admin-portal .admin-date { display:flex; align-items:center; gap:7px; color:#55718d; font-size:.8rem; font-weight:700; white-space:nowrap; }
.admin-portal .admin-date svg { width:17px; color:var(--admin-blue); }
.admin-portal .admin-stat-grid { gap:16px; }
.admin-portal .admin-stat-box { min-height:108px; border:1px solid var(--admin-border); border-radius:16px; background:#fff; box-shadow:0 8px 26px rgba(31,74,118,.055); transition:transform .18s ease,box-shadow .18s ease; }
.admin-portal .admin-stat-box:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(31,74,118,.09); }
.admin-portal .admin-stat-box .stat-icon { color:#a9ccec; }
.admin-portal .admin-stat-box .num { color:var(--admin-ink); }
.admin-portal .admin-engine-card { padding:20px 22px; border-left:4px solid var(--admin-blue); }
.admin-portal .admin-engine-card h2 { margin:0 0 10px; color:var(--admin-ink); font-size:1rem; }
.admin-portal .admin-engine-card p { margin-bottom:5px; }
.admin-portal .admin-table-card { min-width:0; overflow:hidden; }
.admin-portal .admin-table-card h2 { color:var(--admin-ink); font-size:1rem; }
.admin-portal .admin-table-card table { border:0; border-radius:0; margin-top:12px; }
.admin-portal table th { background:#f3f8fd; color:#55708b; border-bottom:1px solid var(--admin-border); }
.admin-portal table td { color:#294861; border-bottom:1px solid #edf2f7; }
.admin-portal table tbody tr:hover td { background:#f8fbfe; }
.admin-portal .admin-filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px; margin-bottom:16px; }
.admin-portal .admin-filter-bar input { flex:1 1 240px; min-width:160px; background:#fbfdff; }
.admin-portal .admin-filter-bar .btn { white-space:nowrap; }
.admin-portal .btn { border-radius:11px; background:linear-gradient(135deg,#1685f5,#1174dc); border:1px solid #1685f5; box-shadow:0 8px 18px rgba(22,133,245,.16); }
.admin-portal .btn:hover { transform:translateY(-1px); box-shadow:0 11px 24px rgba(22,133,245,.21); }
.admin-portal .btn-secondary { background:#fff; color:#244765; border-color:#cfddea; box-shadow:none; }
.admin-portal .btn-secondary:hover { color:#1685f5; background:#f7fbff; border-color:#a9ccef; }
.admin-portal .btn-ghost-danger { color:#d5254f; }
.admin-portal .admin-record-filters { gap:8px; }
.user-portal .nav-section-label{display:block;padding:6px 13px 5px;color:rgba(255,255,255,.42);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.user-portal .nav-links a{gap:11px}.user-portal .nav-links a svg{width:18px;height:18px;flex:0 0 auto}.user-portal .nav-links a span{line-height:1}.user-portal .nav-links a.nav-primary-action{margin-top:3px;background:rgba(90,216,192,.14);border-color:rgba(90,216,192,.55);color:#dffff8}.user-portal .nav-links a.nav-primary-action:hover{background:rgba(90,216,192,.23);border-color:#5ad8c0}.user-portal .nav-links a.nav-primary-action.active{background:#1685f5;border-color:#5ad8c0}
.admin-portal .admin-record-filters .btn { min-width:68px; justify-content:center; }
.admin-portal .admin-chart-card { min-height:100%; }
.admin-portal .admin-pagination { margin:0 14px; padding:16px 0 2px; border-top:1px solid #edf2f7; }
.admin-portal .badge { border-radius:999px; font-weight:800; }
.user-portal .profile-hero{align-items:center}.user-portal .profile-hero-identity{display:flex;align-items:center;gap:16px}.user-portal .profile-avatar{width:58px;height:58px;display:grid;place-items:center;flex:0 0 auto;border-radius:17px;background:linear-gradient(135deg,#1685f5,#19b88a);color:#fff;font-family:var(--font-display);font-size:1.5rem;font-weight:700;box-shadow:0 10px 22px rgba(22,133,245,.18)}.user-portal .profile-hero-account{display:flex;flex-direction:column;align-items:flex-end;gap:3px;color:#163b5e;text-align:right}.user-portal .profile-hero-account strong{font-size:.88rem}.user-portal .profile-hero-account span{color:#71869b;font-size:.72rem}.user-portal .profile-hero-account small{display:flex;align-items:center;gap:5px;color:#099476;font-size:.68rem;font-weight:700}.user-portal .profile-hero-account small svg{width:14px}.user-portal .profile-section-card,.user-portal .profile-danger-card{margin-top:18px;padding:24px;border:1px solid var(--portal-border);border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(31,74,118,.055)}.user-portal .profile-section-heading{display:flex;align-items:center;gap:11px;margin-bottom:20px}.user-portal .profile-section-heading h3{margin:0 0 3px;color:#163b5e;font-size:1rem}.user-portal .profile-section-heading p{margin:0;color:#71869b;font-size:.76rem}.user-portal .profile-section-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px}.user-portal .profile-section-icon svg{width:18px}.user-portal .profile-section-icon.blue{background:#eaf4ff;color:#1685f5}.user-portal .profile-section-icon.teal{background:#e4f8f1;color:#099476}.user-portal .profile-section-icon.red{background:#fff0f2;color:#d5254f}.user-portal .profile-form-actions{display:flex;justify-content:flex-end;margin-top:5px}.user-portal .profile-danger-card{border-color:#f3cdd4;background:#fffafb}.user-portal .profile-danger-card .profile-section-heading{margin-bottom:14px}.user-portal .profile-danger-card .profile-section-heading h3{color:#c52b4c}.user-portal .profile-danger-card p{max-width:650px;margin-bottom:16px}.user-portal .profile-danger-card .btn-danger{background:#d5254f;border-color:#d5254f}
@media (max-width:900px) { .admin-portal .content{padding:22px 18px 44px}.admin-portal .topbar{padding:14px 18px}.admin-portal .admin-page-intro{align-items:flex-start;flex-direction:column}.admin-portal .admin-date{align-self:flex-start} }
@media (max-width:680px) { .admin-portal .content{padding:18px 14px 40px}.admin-portal .admin-page-intro h2{font-size:1.35rem}.admin-portal .admin-stat-grid{grid-template-columns:1fr 1fr}.admin-portal .admin-filter-bar{align-items:stretch}.admin-portal .admin-filter-bar input,.admin-portal .admin-filter-bar .btn{width:100%}.admin-portal .admin-record-filters .btn{width:auto;flex:1}.admin-portal .admin-pagination{margin-left:0;margin-right:0} }
.user-portal .profile-hero-identity{min-width:0}.user-portal .profile-hero-account{min-width:0}.user-portal .profile-section-card .grid-2{gap:18px}
@media (max-width:600px){.user-portal .profile-hero{align-items:flex-start}.user-portal .profile-hero-identity{align-items:flex-start}.user-portal .profile-hero-account{align-items:flex-start;margin-left:74px;margin-top:-8px;text-align:left}.user-portal .profile-section-card,.user-portal .profile-danger-card{padding:20px 16px}.user-portal .profile-form-actions{justify-content:stretch}.user-portal .profile-form-actions .btn{width:100%;justify-content:center}}

/* Cyan palette across the public, patient, and admin experiences */
.guest-portal {
  --guest-bg: #b2ebf2;
  --guest-soft: #e9fbfd;
  --guest-accent: #26c6da;
  --guest-primary: #00bcd4;
  background: linear-gradient(135deg, #f5feff 0%, var(--guest-bg) 100%);
}
.guest-portal .guest-topbar {
  background: rgba(245, 254, 255, .78);
  border-color: rgba(0, 188, 212, .2);
}
.guest-portal .brand-mark { color: #064b58; }
.guest-portal .guest-topbar nav a:hover { color: #008b9a; }
.guest-portal .hero .eyebrow { color: #007c8b; background: rgba(128, 222, 234, .34); }
.guest-portal .pulse-line-svg path { stroke: var(--guest-primary); }
.guest-portal .hero .pulse-line-svg path { stroke: #e8553f; }
.guest-portal .btn { background: linear-gradient(135deg, #00bcd4, #0097a7); border-color: #00bcd4; box-shadow: 0 8px 18px rgba(0, 188, 212, .2); }
.guest-portal .btn:hover { background: linear-gradient(135deg, #00aabd, #008b9a); box-shadow: 0 11px 24px rgba(0, 188, 212, .25); }
.guest-portal .btn-secondary { background: rgba(255, 255, 255, .62); color: #075460; border-color: rgba(0, 151, 167, .25); box-shadow: none; }
.guest-portal .btn-secondary:hover { background: rgba(128, 222, 234, .28); color: #006978; border-color: #26c6da; }
.guest-portal .vitals-strip { border-color: rgba(0, 151, 167, .24); }
.guest-portal .vitals-strip .vital { border-color: rgba(0, 151, 167, .2); }
.guest-portal .vitals-strip .vital .v-value { color: #008b9a; }
.guest-portal .card { border-color: rgba(0, 151, 167, .18); }
.guest-portal .modal-overlay { background: rgba(0, 80, 92, .46); }
.guest-portal .modal-eyebrow { color: #008b9a; background: #d9f7fa; }

.user-portal {
  --portal-bg: #e8f8fa;
  --portal-surface: #ffffff;
  --portal-ink: #173b3a;
  --portal-muted: #607f80;
  --portal-border: #ccecef;
  --portal-navy: #006978;
  --portal-blue: #26c6da;
  --portal-teal: #00bcd4;
  --portal-red: #d95757;
  --portal-orange: #d99128;
  background: var(--portal-bg);
}
.user-portal .app-shell,.user-portal .main-col { background: var(--portal-bg); }
.user-portal .sidebar { background: linear-gradient(180deg, #006978 0%, #005460 100%); box-shadow: 8px 0 28px rgba(0, 105, 120, .16); }
.user-portal .sidebar .brand-mark { color: #efffff; border-color: rgba(128, 222, 234, .24); }
.user-portal .sidebar .brand-pulse { --pulse: #80deea; }
.user-portal .sidebar .nav-section-label { color: rgba(233, 251, 253, .52); }
.user-portal .sidebar .nav-links a { color: rgba(239, 255, 255, .76); }
.user-portal .sidebar .nav-links a:hover { background: rgba(128, 222, 234, .14); color: #fff; }
.user-portal .sidebar .nav-links a.active { background: rgba(128, 222, 234, .22); border-left-color: #80deea; }
.user-portal .sidebar .nav-links a.nav-primary-action { background: rgba(128, 222, 234, .18); border-color: rgba(128, 222, 234, .58); color: #efffff; }
.user-portal .sidebar .nav-links a.nav-primary-action.active { background: #00bcd4; border-color: #b2ebf2; }
.user-portal .sidebar-avatar { background: #80deea; color: #005460; }
.user-portal .topbar { background: rgba(255, 255, 255, .84); border-color: var(--portal-border); }
.user-portal .card,.user-portal .health-plan-card,.user-portal .health-history-panel,.user-portal .profile-section-card,.user-portal .profile-danger-card { background: var(--portal-surface); border-color: var(--portal-border); }
.user-portal .btn { background: linear-gradient(135deg, #00bcd4, #0097a7); border-color: #00bcd4; box-shadow: 0 8px 18px rgba(0, 188, 212, .18); }
.user-portal .btn:hover { box-shadow: 0 11px 24px rgba(0, 188, 212, .25); }
.user-portal .btn-secondary { background: #fff; color: var(--portal-ink); border-color: var(--portal-border); }
.user-portal .btn-secondary:hover { color: #008b9a; background: #e9fbfd; border-color: #80deea; }
.user-portal .record-hero { background: linear-gradient(135deg, #fff 0%, #e9fbfd 100%); border-color: var(--portal-border); }
.user-portal .health-plan-filter.is-active { background: #00bcd4; }

.admin-portal {
  --admin-bg: #f2fafb;
  --admin-surface: #ffffff;
  --admin-ink: #1f2937;
  --admin-muted: #687783;
  --admin-border: #d5edf0;
  --admin-navy: #202b3c;
  --admin-blue: #26c6da;
  background: var(--admin-bg);
}
.admin-portal .app-shell,.admin-portal .main-col { background: var(--admin-bg); }
.admin-portal .sidebar { background: linear-gradient(180deg, #202b3c 0%, #172131 100%); }
.admin-portal .sidebar .brand-pulse { --pulse: #80deea; }
.admin-portal .sidebar .nav-links a.active { background: rgba(38, 198, 218, .25); border-left-color: #80deea; }
.admin-portal .topbar { background: rgba(255, 255, 255, .88); border-color: var(--admin-border); }
.admin-portal .card,.admin-portal .stat-box { background: var(--admin-surface); border-color: var(--admin-border); }
.admin-portal .btn { background: linear-gradient(135deg, #26c6da, #0097a7); border-color: #26c6da; box-shadow: 0 8px 18px rgba(38, 198, 218, .18); }
.admin-portal .btn:hover { box-shadow: 0 11px 24px rgba(38, 198, 218, .24); }
.admin-portal .btn-secondary { background: #fff; color: var(--admin-ink); border-color: var(--admin-border); }
.admin-portal .btn-secondary:hover { color: #008b9a; background: #e9fbfd; border-color: #80deea; }
.admin-portal .admin-engine-card { border-left-color: #26c6da; }

/* Final separated palettes: calm teal patient portal and focused blue admin portal */
.user-portal {
  --portal-bg: #f2f8f6;
  --portal-surface: #fffdf9;
  --portal-ink: #173b3a;
  --portal-muted: #6c817d;
  --portal-border: #dcebe5;
  --portal-navy: #155e59;
  --portal-blue: #0f8b78;
  --portal-teal: #57c7a8;
  --portal-red: #d95757;
  --portal-orange: #d99128;
  --portal-purple: #6978b8;
  background: var(--portal-bg);
}
.user-portal .app-shell,.user-portal .main-col{background:var(--portal-bg)}
.user-portal .sidebar{background:linear-gradient(180deg,#155e59 0%,#104a49 100%);box-shadow:8px 0 28px rgba(21,94,89,.14)}
.user-portal .sidebar .brand-mark{color:#f3fffb;border-color:rgba(138,224,195,.22)}
.user-portal .sidebar .brand-pulse{--pulse:#8ae0c3}
.user-portal .sidebar .nav-section-label{color:rgba(232,255,247,.46)}
.user-portal .sidebar .nav-links a{color:rgba(243,255,251,.74)}
.user-portal .sidebar .nav-links a:hover{background:rgba(138,224,195,.12);color:#fff}
.user-portal .nav-links a.active{background:rgba(87,199,168,.2);border-left-color:#8ae0c3;box-shadow:0 8px 20px rgba(7,58,55,.16)}
.user-portal .nav-links a.nav-primary-action{background:rgba(87,199,168,.16);border-color:rgba(138,224,195,.55);color:#e9fff7}
.user-portal .nav-links a.nav-primary-action.active{background:#0f8b78;border-color:#8ae0c3}
.user-portal .sidebar .sidebar-footer{border-color:rgba(138,224,195,.2)}
.user-portal .sidebar .sidebar-user .name{color:#f3fffb}.user-portal .sidebar .sidebar-user .role{color:rgba(232,255,247,.58)}
.user-portal .sidebar-avatar{background:#8ae0c3;color:#104a49}
.user-portal .sidebar-footer .btn-secondary{background:rgba(138,224,195,.1);border-color:rgba(138,224,195,.3);color:#f3fffb}
.user-portal .sidebar-footer .btn-secondary:hover{background:rgba(138,224,195,.18);border-color:#8ae0c3;color:#fff}
.user-portal .topbar{background:rgba(255,253,249,.9);border-color:var(--portal-border)}
.user-portal .content{background:var(--portal-bg)}
.user-portal .card,.user-portal .profile-section-card,.user-portal .profile-danger-card,.user-portal .health-plan-card,.user-portal .health-history-panel{background:var(--portal-surface);border-color:var(--portal-border)}
.user-portal .btn{background:linear-gradient(135deg,#0f8b78,#0b7568);border-color:#0f8b78;box-shadow:0 8px 18px rgba(15,139,120,.18)}
.user-portal .btn:hover{box-shadow:0 11px 24px rgba(15,139,120,.24)}
.user-portal .btn-secondary{background:var(--portal-surface);color:var(--portal-ink);border-color:var(--portal-border);box-shadow:none}
.user-portal .btn-secondary:hover{color:#0f8b78;background:#eef8f4;border-color:#a9d9c8}
.user-portal .record-hero{background:linear-gradient(135deg,#fffdf9 0%,#f2faf7 100%);border-color:var(--portal-border)}
.user-portal .metric-icon,.user-portal .profile-section-icon.blue{background:#e5f5ef;color:#0f8b78}
.user-portal .profile-section-icon.teal{background:#e0f6ee;color:#2eaa72}
.user-portal .profile-avatar{background:linear-gradient(135deg,#0f8b78,#57c7a8)}
.user-portal .health-plan-filter.is-active{background:#0f8b78;box-shadow:0 5px 12px rgba(15,139,120,.2)}
.user-portal .health-plan-progress span{background:linear-gradient(90deg,#0f8b78,#57c7a8)}

.admin-portal {
  --admin-bg: #f5f7fa;
  --admin-surface: #ffffff;
  --admin-ink: #1f2937;
  --admin-muted: #6b7788;
  --admin-border: #e1e6ed;
  --admin-navy: #202b3c;
  --admin-blue: #356ae6;
  background: var(--admin-bg);
}
.admin-portal .app-shell,.admin-portal .main-col{background:var(--admin-bg)}
.admin-portal .sidebar{background:linear-gradient(180deg,#202b3c 0%,#172131 100%);box-shadow:8px 0 28px rgba(32,43,60,.14)}
.admin-portal .sidebar .brand-pulse{--pulse:#7f9ff5}
.admin-portal .nav-links a.active{background:rgba(53,106,230,.28);border-left-color:#8ca9ff;box-shadow:0 8px 20px rgba(8,18,34,.18)}
.admin-portal .sidebar-avatar{background:#8ca9ff;color:#202b3c}
.admin-portal .topbar{background:rgba(255,255,255,.9);border-color:var(--admin-border)}
.admin-portal .card,.admin-portal .stat-box{background:var(--admin-surface);border-color:var(--admin-border)}
.admin-portal .btn{background:linear-gradient(135deg,#356ae6,#2e59c6);border-color:#356ae6;box-shadow:0 8px 18px rgba(53,106,230,.18)}
.admin-portal .btn:hover{box-shadow:0 11px 24px rgba(53,106,230,.25)}
.admin-portal .btn-secondary{background:#fff;color:var(--admin-ink);border-color:var(--admin-border);box-shadow:none}
.admin-portal .btn-secondary:hover{color:#356ae6;background:#f2f5ff;border-color:#b9c9f5}
.admin-portal .admin-engine-card{border-left-color:#356ae6}

/* Health plan history */
.user-portal .health-history-panel {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--portal-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(31, 74, 118, .055);
}
.health-history-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #edf2f7;
}
.health-history-heading h2 { margin: 0 0 5px; color: #153a5d; }
.health-history-heading p { margin: 0; }
.health-history-total { min-width: 130px; padding: 12px 14px; border-radius: 13px; background: #eff9f7; text-align: right; }
.health-history-total strong { display: block; color: #099476; font-family: var(--font-mono); font-size: 1.35rem; }
.health-history-total span { color: #5d887f; font-size: .7rem; }
.health-history-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.health-history-summary div { padding: 12px 14px; border: 1px solid #e3edf5; border-radius: 12px; background: #f8fbfe; }
.health-history-summary strong, .health-history-summary span { display: block; }
.health-history-summary strong { color: #163f6d; font-family: var(--font-mono); font-size: 1.05rem; }
.health-history-summary span { color: #71869b; font-size: .7rem; margin-top: 3px; }
.health-history-list { display: grid; gap: 9px; }
.health-history-day { border: 1px solid #dfe9f2; border-radius: 13px; background: #fff; overflow: hidden; }
.health-history-day[open] { border-color: #b9d7ed; box-shadow: 0 5px 16px rgba(31, 74, 118, .05); }
.health-history-day summary { display: grid; grid-template-columns: 36px minmax(100px, 1fr) auto auto 20px; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; list-style: none; }
.health-history-day summary::-webkit-details-marker { display: none; }
.health-history-day-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: #edf5ff; color: #1685f5; }
.health-history-day-icon.is-complete { background: #e5f8f1; color: #099476; border-radius: 50%; }
.health-history-day-icon svg { width: 17px; }
.health-history-day-info strong, .health-history-day-info span, .health-history-day-progress strong, .health-history-day-progress span { display: block; }
.health-history-day-info strong { color: #193f67; font-size: .84rem; }
.health-history-day-info span, .health-history-day-progress span { color: #71869b; font-size: .7rem; margin-top: 2px; }
.health-history-day-progress { text-align: right; }
.health-history-day-progress strong { color: #244c75; font-family: var(--font-mono); font-size: .78rem; }
.health-history-day-rate { min-width: 42px; padding: 5px 8px; border-radius: 8px; color: #087f68; background: #eaf9f4; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; text-align: center; }
.health-history-chevron { width: 16px; color: #7793ad; transition: transform .18s ease; }
.health-history-day[open] .health-history-chevron { transform: rotate(180deg); }
.health-history-tasks { padding: 0 15px 12px 63px; border-top: 1px solid #edf2f7; }
.health-history-task { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f0f4f7; }
.health-history-task:last-child { border-bottom: 0; }
.health-history-task-check { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #cddce8; border-radius: 6px; color: #8ba0b1; }
.health-history-task.is-complete .health-history-task-check { border-color: #9dddc8; background: #e5f8f1; color: #099476; }
.health-history-task-check svg { width: 13px; }
.health-history-task strong, .health-history-task span { display: block; }
.health-history-task strong { color: #294d70; font-size: .78rem; }
.health-history-task span { color: #71869b; font-size: .7rem; margin-top: 3px; }
.health-history-empty { padding: 28px 12px 10px; text-align: center; }
.health-history-empty-icon { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 13px; background: #edf5ff; color: #1685f5; }
.health-history-empty-icon svg { width: 22px; }
.health-history-empty strong { color: #244765; }
.health-history-empty p { margin: 5px 0 0; }
@media (max-width: 600px) {
  .user-portal .health-history-panel { padding: 18px 14px; }
  .health-history-heading { display: block; }
  .health-history-total { margin-top: 14px; text-align: left; }
  .health-history-summary { grid-template-columns: 1fr; }
  .health-history-day summary { grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 9px; padding: 11px; }
  .health-history-day-progress, .health-history-day-rate { display: none; }
  .health-history-tasks { padding-left: 52px; padding-right: 11px; }
}

.user-portal .dashboard-modal-summary {
  display: grid;
  grid-template-columns: 1.1fr .8fr 1.2fr;
  gap: 12px;
  margin-bottom: 18px;
}
.user-portal .dashboard-modal-summary > div,
.user-portal .dashboard-modal-grid > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  border: 1px solid #e0e9f2;
  border-radius: 13px;
  background: #f8fbfe;
}
.user-portal .dashboard-modal-summary strong,
.user-portal .dashboard-modal-grid strong {
  color: #153a68;
  font-family: var(--font-mono);
  font-size: .9rem;
}
.user-portal .dashboard-modal-summary .dashboard-modal-risk strong {
  color: #d5254f;
  font-size: 1.4rem;
}
.user-portal .dashboard-modal-label,
.user-portal .dashboard-modal-grid span {
  color: #6b829b;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.user-portal .dashboard-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.user-portal .dashboard-modal-list {
  margin: 0;
  padding: 4px 0 0;
}
.user-portal .dashboard-modal-list li {
  padding: 10px 0;
}
.user-portal .dashboard-modal-subtitle {
  margin: 22px 0 6px;
  color: #153a68;
}
@media (max-width: 600px) {
  .user-portal .dashboard-modal-summary,
  .user-portal .dashboard-modal-grid {
    grid-template-columns: 1fr;
  }
}

/* Final patient dashboard refinement */
.hg-dashboard-body .sidebar {
  background: linear-gradient(180deg, #123b5d 0%, #0b2d48 100%);
  box-shadow: 8px 0 28px rgba(13, 48, 78, .12);
}
.hg-dashboard-body .sidebar .brand-mark {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.hg-dashboard-body .nav-links a {
  margin: 3px 0;
  border-left: 3px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.hg-dashboard-body .nav-links a:hover {
  transform: translateX(2px);
}
.hg-dashboard-body .nav-links a.active {
  background: rgba(255, 255, 255, .14);
  border-left-color: #5ad8c0;
  padding-left: 10px;
  box-shadow: 0 8px 20px rgba(4, 25, 43, .12);
}
.hg-dashboard-body .main-col {
  background: #f4f8fc;
}
.hg-dashboard-body .content {
  max-width: 1380px;
  padding: 26px 34px 56px;
}
.hg-dashboard {
  max-width: 1240px;
  margin: 0 auto;
}
.hg-welcome {
  margin-bottom: 20px;
}
.hg-welcome h1 {
  font-size: clamp(1.55rem, 2.1vw, 2rem);
}
.hg-kpi,
.hg-card {
  box-shadow: 0 8px 26px rgba(31, 74, 118, .055);
  transition: box-shadow .18s ease, transform .18s ease;
}
.hg-kpi:hover,
.hg-card:hover {
  box-shadow: 0 12px 30px rgba(31, 74, 118, .09);
}
.hg-kpi {
  min-height: 92px;
  border-radius: 14px;
}
.hg-card {
  border-radius: 14px;
}
.hg-card-title h2,
.hg-card-head h2 {
  letter-spacing: .015em;
}
.hg-primary-btn,
.hg-outline-btn,
.hg-view-btn {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.hg-primary-btn:hover,
.hg-outline-btn:hover,
.hg-view-btn:hover {
  transform: translateY(-1px);
}
.hg-table td,
.hg-table th {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .hg-dashboard-body .content {
    padding: 22px 18px 44px;
  }
}
@media (max-width: 680px) {
  .hg-dashboard-body .content {
    padding: 18px 14px 40px;
  }
  .hg-kpi {
    min-height: 84px;
  }
  .hg-card-head,
  .hg-card-title {
    padding-left: 14px;
    padding-right: 14px;
  }
  .hg-trend-footer {
    gap: 6px;
  }
  .hg-trend-footer div {
    padding: 7px;
  }
}

/* Final patient sidebar override for every User Portal page, including Dashboard */
.user-portal .sidebar,
.user-portal.hg-dashboard-body .sidebar {
  background: linear-gradient(180deg, #f5fffd 0%, #e7f8f5 100%);
  border-right: 1px solid #cfe8e3;
  color: #173b3a;
  box-shadow: 8px 0 24px rgba(34, 112, 102, .08);
}
.user-portal .sidebar .brand-mark,
.user-portal.hg-dashboard-body .sidebar .brand-mark {
  color: #173b3a;
  border-bottom-color: #cfe8e3;
}
.user-portal .sidebar .nav-section-label,
.user-portal.hg-dashboard-body .sidebar .nav-section-label { color: #6b8985; }
.user-portal .sidebar .nav-links a,
.user-portal.hg-dashboard-body .sidebar .nav-links a {
  color: #345957;
  background: transparent;
  border-left: 3px solid transparent;
}
.user-portal .sidebar .nav-links a:hover,
.user-portal.hg-dashboard-body .sidebar .nav-links a:hover {
  background: #d8f2ed;
  border-color: #b7e2da;
  color: #006f70;
}
.user-portal .sidebar .nav-links a.active,
.user-portal.hg-dashboard-body .sidebar .nav-links a.active {
  background: #d5f2ed;
  border-color: #b2e4db;
  border-left-color: #00a9a3;
  color: #006f70;
  box-shadow: 0 5px 14px rgba(0, 139, 137, .08);
}
.user-portal .sidebar .nav-links a.nav-primary-action,
.user-portal.hg-dashboard-body .sidebar .nav-links a.nav-primary-action {
  background: #d5f2ed;
  border-color: #b2e4db;
  color: #006f70;
}
.user-portal .sidebar .nav-links a.nav-primary-action:hover,
.user-portal .sidebar .nav-links a.nav-primary-action.active,
.user-portal.hg-dashboard-body .sidebar .nav-links a.nav-primary-action:hover,
.user-portal.hg-dashboard-body .sidebar .nav-links a.nav-primary-action.active {
  background: #bde9df;
  border-color: #8bd2c5;
  color: #005b61;
}
.user-portal .sidebar .sidebar-footer,
.user-portal.hg-dashboard-body .sidebar .sidebar-footer { border-top-color: #cfe8e3; }
.user-portal .sidebar .sidebar-user .name,
.user-portal.hg-dashboard-body .sidebar .sidebar-user .name { color: #173b3a; }
.user-portal .sidebar .sidebar-user .role,
.user-portal.hg-dashboard-body .sidebar .sidebar-user .role { color: #6b8985; }
.user-portal .sidebar .sidebar-avatar,
.user-portal.hg-dashboard-body .sidebar .sidebar-avatar { background: #9ce1d1; color: #00656a; }
.user-portal .sidebar .sidebar-footer .btn-secondary,
.user-portal.hg-dashboard-body .sidebar .sidebar-footer .btn-secondary { background: transparent; border-color: #b7dcd6; color: #345957; }
.user-portal .sidebar .sidebar-footer .btn-secondary:hover,
.user-portal.hg-dashboard-body .sidebar .sidebar-footer .btn-secondary:hover { background: #d8f2ed; border-color: #8bd2c5; color: #006f70; }

/* Dark theme overrides for final portal shell rules */
[data-theme="dark"] .user-portal,
[data-theme="dark"] .user-portal .app-shell,
[data-theme="dark"] .user-portal .main-col,
[data-theme="dark"] .user-portal .content,
[data-theme="dark"] .user-portal.hg-dashboard-body,
[data-theme="dark"] .user-portal.hg-dashboard-body .main-col,
[data-theme="dark"] .user-portal.hg-dashboard-body .content {
  background: #0f1f24 !important;
}
[data-theme="dark"] .user-portal .topbar,
[data-theme="dark"] .user-portal.hg-dashboard-body .topbar {
  background: rgba(20, 42, 47, .94) !important;
  border-bottom-color: #294a50 !important;
}
[data-theme="dark"] .user-portal .topbar h1,
[data-theme="dark"] .user-portal.hg-dashboard-body .topbar h1 { color: #d9f7f2 !important; }
[data-theme="dark"] .user-portal .sidebar,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar {
  background: linear-gradient(180deg, #123f45 0%, #0d3036 100%) !important;
  border-right-color: #28545a !important;
  color: #e1faf5 !important;
}
[data-theme="dark"] .user-portal .sidebar .brand-mark,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .brand-mark { color: #e1faf5 !important; border-bottom-color: #28545a !important; }
[data-theme="dark"] .user-portal .sidebar .nav-section-label,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .nav-section-label { color: #8bb6b0 !important; }
[data-theme="dark"] .user-portal .sidebar .nav-links a,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .nav-links a { color: #c3e3de !important; }
[data-theme="dark"] .user-portal .sidebar .nav-links a:hover,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .nav-links a:hover { background: #1c555b !important; border-color: #3a777a !important; color: #fff !important; }
[data-theme="dark"] .user-portal .sidebar .nav-links a.active,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .nav-links a.active { background: #205d61 !important; border-color: #4cbab0 !important; color: #fff !important; }
[data-theme="dark"] .user-portal .sidebar .nav-links a.nav-primary-action,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .nav-links a.nav-primary-action { background: #205d61 !important; border-color: #4cbab0 !important; color: #e1faf5 !important; }
[data-theme="dark"] .user-portal .sidebar .sidebar-footer,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .sidebar-footer { border-top-color: #28545a !important; }
[data-theme="dark"] .user-portal .sidebar .sidebar-user .name,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .sidebar-user .name { color: #e1faf5 !important; }
[data-theme="dark"] .user-portal .sidebar .sidebar-user .role,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .sidebar-user .role { color: #8bb6b0 !important; }
[data-theme="dark"] .user-portal .sidebar .sidebar-avatar,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .sidebar-avatar { background: #4cbab0 !important; color: #0d3036 !important; }
[data-theme="dark"] .user-portal .sidebar .sidebar-footer .btn-secondary,
[data-theme="dark"] .user-portal.hg-dashboard-body .sidebar .sidebar-footer .btn-secondary { background: transparent !important; border-color: #3a777a !important; color: #c3e3de !important; }
[data-theme="dark"] .user-portal .card,
[data-theme="dark"] .user-portal .hg-card,
[data-theme="dark"] .user-portal .health-plan-card,
[data-theme="dark"] .user-portal .health-history-panel,
[data-theme="dark"] .user-portal .profile-section-card,
[data-theme="dark"] .user-portal .profile-danger-card { background: #142a2f !important; border-color: #294a50 !important; color: #d9f7f2; }
[data-theme="dark"] .user-portal .hg-card-title,
[data-theme="dark"] .user-portal .hg-card-head { background: #18373d !important; border-color: #294a50 !important; }
[data-theme="dark"] .user-portal .hg-card-title h2,
[data-theme="dark"] .user-portal .hg-card-head h2,
[data-theme="dark"] .user-portal .hg-welcome h1 { color: #d9f7f2 !important; }
[data-theme="dark"] .user-portal .text-muted { color: #9bbcb7 !important; }
[data-theme="dark"] .user-portal .theme-toggle { background: #18373d !important; border-color: #3a777a !important; color: #d9f7f2 !important; }

[data-theme="dark"] .guest-portal { background: #0f1f24; color: #d9f7f2; }
[data-theme="dark"] .guest-portal .guest-topbar { background: rgba(20,42,47,.94) !important; border-bottom-color: #294a50 !important; }
[data-theme="dark"] .guest-portal .brand-mark,
[data-theme="dark"] .guest-portal .guest-topbar nav a { color: #d9f7f2 !important; }
[data-theme="dark"] .guest-portal .guest-topbar nav a:hover { color: #80deea !important; }

[data-theme="dark"] .admin-portal,
[data-theme="dark"] .admin-portal .app-shell,
[data-theme="dark"] .admin-portal .main-col { background: #111923 !important; }
[data-theme="dark"] .admin-portal .topbar { background: rgba(28,38,52,.94) !important; border-bottom-color: #344455 !important; }
[data-theme="dark"] .admin-portal .topbar h1,
[data-theme="dark"] .admin-portal .card h2 { color: #e4edf5 !important; }
[data-theme="dark"] .admin-portal .card,
[data-theme="dark"] .admin-portal .stat-box { background: #1b2734 !important; border-color: #344455 !important; color: #e4edf5; }

/* Keep the User Portal upperbar fixed consistently across every page */
.user-portal .main-col { min-height: 100vh; }
.user-portal .topbar,
.user-portal.hg-dashboard-body .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  flex-shrink: 0;
}

/* Make the dashboard honor the final cyan User Portal palette */
.user-portal.hg-dashboard-body .sidebar { background: linear-gradient(180deg, #006978 0%, #005460 100%); box-shadow: 8px 0 28px rgba(0,105,120,.16); }
.user-portal.hg-dashboard-body .sidebar .brand-mark { color: #efffff; border-color: rgba(128,222,234,.24); }
.user-portal.hg-dashboard-body .sidebar .nav-links a { color: rgba(239,255,255,.76); }
.user-portal.hg-dashboard-body .sidebar .nav-links a:hover { background: rgba(128,222,234,.14); color: #fff; }
.user-portal.hg-dashboard-body .sidebar .nav-links a.active { background: rgba(128,222,234,.22); border-left-color: #80deea; box-shadow: 0 8px 20px rgba(0,60,70,.16); }
.user-portal.hg-dashboard-body .sidebar .nav-links a.nav-primary-action { background: rgba(128,222,234,.18); border-color: rgba(128,222,234,.58); }
.user-portal.hg-dashboard-body .sidebar .nav-links a.nav-primary-action.active { background: #00bcd4; border-color: #b2ebf2; }
.user-portal.hg-dashboard-body .sidebar-avatar { background: #80deea; color: #005460; }
.user-portal.hg-dashboard-body .sidebar-footer .btn-secondary { background: rgba(128,222,234,.1); border-color: rgba(128,222,234,.3); color: #efffff; }
.user-portal.hg-dashboard-body .main-col,.user-portal.hg-dashboard-body .content { background: #e8f8fa; }
.user-portal.hg-dashboard-body .topbar { background: rgba(255,255,255,.84); border-bottom: 1px solid #ccecef; }
.user-portal.hg-dashboard-body .topbar h1,.user-portal.hg-dashboard-body .hg-welcome h1 { color: #173b3a; }
.user-portal.hg-dashboard-body .hg-welcome p,.user-portal.hg-dashboard-body .hg-date-chip { color: #607f80; }
.user-portal.hg-dashboard-body .hg-eyebrow { color: #008b9a; }
.user-portal.hg-dashboard-body .hg-kpi,.user-portal.hg-dashboard-body .hg-card { background: #fff; border-color: #ccecef; }
.user-portal.hg-dashboard-body .hg-card-head { background: linear-gradient(90deg,#e9fbfd,#f7ffff); border-color: #d5f0f2; }
.user-portal.hg-dashboard-body .hg-card-title.pink { background: #fff1f3; }
.user-portal.hg-dashboard-body .hg-card-title.teal,.user-portal.hg-dashboard-body .hg-card-title.mint { background: #e9fbf7; }
.user-portal.hg-dashboard-body .hg-section-icon { background: #d9f7fa; color: #008b9a; }
.user-portal.hg-dashboard-body .hg-progress-fill { background: linear-gradient(90deg,#00bcd4,#2eaa72); }
.user-portal.hg-dashboard-body .hg-primary-btn { background: linear-gradient(135deg,#00bcd4,#0097a7); }
.user-portal.hg-dashboard-body .hg-outline-btn { border-color: #9ddfe5; color: #008b9a; background: #f3fdfe; }
.user-portal.hg-dashboard-body .hg-outline-btn.danger { border-color: #f0b2bb; color: #d95757; background: #fff8f9; }
.user-portal.hg-dashboard-body .hg-table th { background: #e9f8fa; color: #23656d; }
.user-portal.hg-dashboard-body .hg-table td { color: #315b60; border-color: #e2f1f2; }

/* Shared cyan navigation treatment */
.guest-portal .guest-topbar { color: #075460; border-bottom-color: rgba(0,151,167,.22); background: rgba(233,251,253,.78); }
.guest-portal .guest-topbar .brand-mark { color: #075460; }
.guest-portal .guest-topbar nav a { color: #23656d; transition: color .18s ease, transform .18s ease; }
.guest-portal .guest-topbar nav a:hover { color: #008b9a; transform: translateY(-1px); }
.guest-portal .guest-topbar .theme-toggle { color: #075460; border-color: rgba(0,151,167,.25); background: rgba(255,255,255,.58); }
.guest-portal .guest-topbar .theme-toggle:hover { border-color: #26c6da; background: #d9f7fa; }
.guest-portal .hero-actions .btn { background: linear-gradient(135deg,#00bcd4,#0097a7); border-color: #00bcd4; }
.guest-portal .hero-actions .btn-secondary { background: rgba(255,255,255,.65); color: #075460; border-color: rgba(0,151,167,.25); }
.guest-portal .hero-actions .btn-secondary:hover { background: #d9f7fa; color: #006978; border-color: #26c6da; }

.user-portal .sidebar { background: linear-gradient(180deg,#006978 0%,#005460 100%); }
.user-portal .sidebar .brand-mark { color: #efffff; }
.user-portal .sidebar .nav-section-label { color: rgba(233,251,253,.54); }
.user-portal .sidebar .nav-links a { color: rgba(239,255,255,.78); border-left: 3px solid transparent; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.user-portal .sidebar .nav-links a:hover { background: rgba(128,222,234,.14); color: #fff; transform: translateX(2px); }
.user-portal .sidebar .nav-links a.active { background: rgba(128,222,234,.23); color: #fff; border-left-color: #80deea; padding-left: 10px; }
.user-portal .sidebar .nav-links a.nav-primary-action { background: rgba(128,222,234,.18); border-color: rgba(128,222,234,.58); color: #efffff; }
.user-portal .sidebar .nav-links a.nav-primary-action:hover,.user-portal .sidebar .nav-links a.nav-primary-action.active { background: #00bcd4; border-color: #b2ebf2; }
.user-portal .sidebar .nav-links svg { color: currentColor; }
.user-portal .sidebar .sidebar-footer { border-top-color: rgba(128,222,234,.22); }
.user-portal .sidebar .sidebar-footer .btn-secondary { background: rgba(128,222,234,.1); border-color: rgba(128,222,234,.32); color: #efffff; }
.user-portal .sidebar .sidebar-footer .btn-secondary:hover { background: rgba(128,222,234,.2); border-color: #80deea; color: #fff; }

.admin-portal .sidebar { background: linear-gradient(180deg,#202b3c 0%,#172131 100%); }
.admin-portal .sidebar .brand-mark { color: #f5fbff; }
.admin-portal .sidebar .nav-links a { color: rgba(245,251,255,.76); border-left: 3px solid transparent; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.admin-portal .sidebar .nav-links a:hover { background: rgba(128,222,234,.12); color: #fff; transform: translateX(2px); }
.admin-portal .sidebar .nav-links a.active { background: rgba(38,198,218,.25); color: #fff; border-left-color: #80deea; padding-left: 10px; }
.admin-portal .sidebar .nav-links svg { color: currentColor; }
.admin-portal .sidebar .sidebar-footer { border-top-color: rgba(128,222,234,.18); }
.admin-portal .sidebar .sidebar-footer .btn-secondary { background: rgba(128,222,234,.08); border-color: rgba(128,222,234,.28); color: #f5fbff; }
.admin-portal .sidebar .sidebar-footer .btn-secondary:hover { background: rgba(128,222,234,.18); border-color: #80deea; color: #fff; }
.user-portal .modal-overlay { background: rgba(0,80,92,.46); }
.user-portal .modal-box { background: #fffdf9; border-color: #ccecef; box-shadow: 0 28px 70px rgba(0,80,92,.2); }
.user-portal .modal-top { border-color: #e2f1f2; }
.user-portal .modal-eyebrow { color: #008b9a; background: #d9f7fa; }
.user-portal .form-section { background: #fffdf9; border-color: #ccecef; }
.user-portal .form-section legend { color: #006978; }
.user-portal input,.user-portal select,.user-portal textarea { background: #fbffff; border-color: #c6e5e8; color: #173b3a; }
.user-portal input:focus,.user-portal select:focus,.user-portal textarea:focus { border-color: #26c6da; box-shadow: 0 0 0 4px rgba(38,198,218,.12); }
.user-portal label { color: #245b60; }
.user-portal .record-hero .hg-eyebrow { color: #008b9a; }
.user-portal .record-hero .metric-icon { background: #d9f7fa; color: #008b9a; }
.user-portal .history-pagination .btn,.user-portal .health-plan-actions .btn { background: linear-gradient(135deg,#00bcd4,#0097a7); border-color: #00bcd4; }
.user-portal .history-pagination .btn-secondary { background: #fffdf9; color: #173b3a; border-color: #ccecef; }
.user-portal .health-history-panel,.user-portal .health-plan-card,.user-portal .profile-section-card,.user-portal .profile-danger-card { box-shadow: 0 8px 26px rgba(0,105,120,.07); }
.user-portal .health-history-total { background: #e4f8f1; }
.user-portal .health-history-total strong,.user-portal .health-history-task.is-complete .health-history-task-check { color: #2eaa72; }
.user-portal .health-history-summary div,.user-portal .health-history-day { border-color: #ccecef; background: #fffdf9; }
.user-portal .health-history-day[open] { border-color: #80deea; }
.user-portal .health-history-day-icon { background: #d9f7fa; color: #008b9a; }
.user-portal .health-history-day-icon.is-complete,.user-portal .health-history-task.is-complete .health-history-task-check { background: #e4f8f1; }
.user-portal .health-history-day-rate { color: #087f68; background: #e4f8f1; }
.user-portal .profile-section-icon.blue { background: #d9f7fa; color: #008b9a; }
.user-portal .profile-section-icon.teal { background: #e4f8f1; color: #2eaa72; }
.user-portal .profile-avatar { background: linear-gradient(135deg,#00bcd4,#0f8b78); }
.user-portal .dashboard-tasks-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid #ccecef;border-radius:13px;background:#e9fbfd}.user-portal .dashboard-tasks-header strong,.user-portal .dashboard-tasks-header span{display:block}.user-portal .dashboard-tasks-header strong{color:#173b3a;font-size:.9rem}.user-portal .dashboard-tasks-header span{margin-top:3px;color:#607f80;font-size:.7rem}.user-portal .dashboard-tasks-count{color:#008b9a;font-family:var(--font-mono);font-size:.78rem;font-weight:700;text-align:right}.user-portal .dashboard-tasks-progress{height:10px;margin:14px 0 16px}.user-portal .dashboard-tasks-list{display:grid;gap:8px}.user-portal .dashboard-task-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:start;gap:10px;padding:12px;border:1px solid #dceff1;border-radius:12px;background:#fff}.user-portal .dashboard-task-item.is-complete{border-color:#b8e5d5;background:#f5fcf9}.user-portal .dashboard-task-check{width:25px;height:25px;display:grid;place-items:center;border:1px solid #b9dfe4;border-radius:8px;color:#80a0a4}.user-portal .dashboard-task-item.is-complete .dashboard-task-check{border-color:#8bd5bd;background:#e4f8f1;color:#2eaa72}.user-portal .dashboard-task-check svg{width:15px}.user-portal .dashboard-task-item strong,.user-portal .dashboard-task-item span{display:block}.user-portal .dashboard-task-item strong{color:#245b60;font-size:.8rem}.user-portal .dashboard-task-item span{margin-top:3px;color:#71869b;font-size:.7rem;line-height:1.45}.user-portal .dashboard-task-item small{padding-top:4px;color:#008b9a;font-size:.65rem;font-weight:700;white-space:nowrap}.user-portal .dashboard-task-item:not(.is-complete) small{color:#a07828}.user-portal .dashboard-tasks-empty{display:grid;justify-items:center;gap:7px;padding:28px 12px;color:#607f80;text-align:center}.user-portal .dashboard-tasks-empty svg{width:28px;color:#26c6da}.user-portal .dashboard-tasks-empty strong{color:#245b60;font-size:.85rem}.user-portal .dashboard-tasks-empty span{font-size:.75rem}
@media(max-width:600px){.user-portal .dashboard-tasks-header{align-items:flex-start;flex-direction:column}.user-portal .dashboard-tasks-count{text-align:left}.user-portal .dashboard-task-item{grid-template-columns:28px minmax(0,1fr)}.user-portal .dashboard-task-item small{grid-column:2;padding-top:0}}
.user-portal.hg-dashboard-body .hg-compact-action{display:inline-flex!important;width:100%!important;min-width:0!important;margin-top:8px;padding:9px 14px;justify-content:center;align-items:center;white-space:nowrap}

/* Patient sidebar reference layout */
.user-portal .sidebar {
  background: linear-gradient(180deg, #f5fffd 0%, #e7f8f5 100%);
  border-right: 1px solid #cfe8e3;
  color: #173b3a;
  box-shadow: 8px 0 24px rgba(34, 112, 102, .08);
  padding: 22px 14px;
}
.user-portal .sidebar .brand-mark {
  color: #173b3a;
  border-bottom-color: #cfe8e3;
  padding: 2px 10px 25px;
  margin-bottom: 12px;
}
.user-portal .sidebar .brand-pulse { --pulse: #00a9a3; }
.user-portal .nav-section-label {
  padding: 10px 13px 6px;
  color: #6b8985;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.user-portal .nav-section-label--spaced { margin-top: 14px; }
.user-portal .nav-links { gap: 4px; }
.user-portal .nav-links a {
  min-height: 38px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #345957;
  padding: 9px 12px;
  font-size: .82rem;
  font-weight: 700;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.user-portal .nav-links a svg { width: 16px; height: 16px; }
.user-portal .nav-links a:hover {
  background: #d8f2ed;
  border-color: #b7e2da;
  color: #006f70;
  transform: translateX(2px);
}
.user-portal .nav-links a.active {
  background: #d5f2ed;
  border-color: #b2e4db;
  border-left: 3px solid #00a9a3;
  color: #006f70;
  padding-left: 10px;
  box-shadow: 0 5px 14px rgba(0, 139, 137, .08);
}
.user-portal .nav-links a.nav-primary-action {
  background: #d5f2ed;
  border-color: #b2e4db;
  color: #006f70;
}
.user-portal .nav-links a.nav-primary-action:hover,
.user-portal .nav-links a.nav-primary-action.active {
  background: #bde9df;
  border-color: #8bd2c5;
  color: #005b61;
}
.user-portal .sidebar .sidebar-footer { border-top-color: #cfe8e3; }
.user-portal .sidebar .sidebar-user .name { color: #173b3a; }
.user-portal .sidebar .sidebar-user .role { color: #6b8985; }
.user-portal .sidebar-avatar { background: #9ce1d1; color: #00656a; }
.user-portal .sidebar-footer .btn-secondary {
  background: transparent;
  border-color: #b7dcd6;
  color: #345957;
  box-shadow: none;
}
.user-portal .sidebar-footer .btn-secondary:hover {
  background: #d8f2ed;
  border-color: #8bd2c5;
  color: #006f70;
}

/* Definitive User Portal sidebar colors */
.user-portal .sidebar,
.user-portal.hg-dashboard-body .sidebar {
  background: linear-gradient(180deg, #f5fffd 0%, #e7f8f5 100%) !important;
  border-right: 1px solid #cfe8e3 !important;
  color: #173b3a !important;
}
.user-portal .sidebar .brand-mark,
.user-portal.hg-dashboard-body .sidebar .brand-mark {
  color: #173b3a !important;
  border-bottom-color: #cfe8e3 !important;
}
.user-portal .sidebar .nav-section-label,
.user-portal.hg-dashboard-body .sidebar .nav-section-label { color: #6b8985 !important; }
.user-portal .sidebar .nav-links a,
.user-portal.hg-dashboard-body .sidebar .nav-links a {
  background: transparent !important;
  border-left: 3px solid transparent !important;
  color: #345957 !important;
}
.user-portal .sidebar .nav-links a:hover,
.user-portal.hg-dashboard-body .sidebar .nav-links a:hover {
  background: #d8f2ed !important;
  border-color: #b7e2da !important;
  color: #006f70 !important;
}
.user-portal .sidebar .nav-links a.active,
.user-portal.hg-dashboard-body .sidebar .nav-links a.active {
  background: #d5f2ed !important;
  border-color: #b2e4db !important;
  border-left-color: #00a9a3 !important;
  color: #006f70 !important;
  box-shadow: 0 5px 14px rgba(0, 139, 137, .08) !important;
}
.user-portal .sidebar .nav-links a.nav-primary-action,
.user-portal.hg-dashboard-body .sidebar .nav-links a.nav-primary-action {
  background: #d5f2ed !important;
  border-color: #b2e4db !important;
  color: #006f70 !important;
}
.user-portal .sidebar .sidebar-footer,
.user-portal.hg-dashboard-body .sidebar .sidebar-footer { border-top-color: #cfe8e3 !important; }
.user-portal .sidebar .sidebar-user .name,
.user-portal.hg-dashboard-body .sidebar .sidebar-user .name { color: #173b3a !important; }
.user-portal .sidebar .sidebar-user .role,
.user-portal.hg-dashboard-body .sidebar .sidebar-user .role { color: #6b8985 !important; }
.user-portal .sidebar .sidebar-avatar,
.user-portal.hg-dashboard-body .sidebar .sidebar-avatar { background: #9ce1d1 !important; color: #00656a !important; }
.user-portal .sidebar .sidebar-footer .btn-secondary,
.user-portal.hg-dashboard-body .sidebar .sidebar-footer .btn-secondary { background: transparent !important; border-color: #b7dcd6 !important; color: #345957 !important; }

/* Consistent User Portal workspace and upper bar */
.user-portal,
.user-portal .app-shell,
.user-portal .main-col,
.user-portal .content,
.user-portal.hg-dashboard-body,
.user-portal.hg-dashboard-body .main-col,
.user-portal.hg-dashboard-body .content {
  background: #F8FAFC !important;
}
.user-portal .topbar,
.user-portal.hg-dashboard-body .topbar {
  background: rgba(245, 255, 253, .92) !important;
  border-bottom: 1px solid #cfe8e3 !important;
  color: #173b3a;
  box-shadow: 0 4px 16px rgba(34, 112, 102, .04);
  backdrop-filter: blur(12px);
}
.user-portal .topbar h1,
.user-portal.hg-dashboard-body .topbar h1 {
  color: #345957 !important;
}
.user-portal .topbar .theme-toggle,
.user-portal.hg-dashboard-body .topbar .theme-toggle {
  color: #006f70;
  background: #f5fffd;
  border-color: #b7dcd6;
}
.user-portal .topbar .theme-toggle:hover,
.user-portal.hg-dashboard-body .topbar .theme-toggle:hover {
  background: #d8f2ed;
  border-color: #8bd2c5;
}