@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Inter', sans-serif;
      transition: background-color 0.4s ease, color 0.4s ease;
      min-height: 100vh;
    }

    /* Light Mode (default) */
    body.light-mode {
      background: #f8f5f5;
      color: #2d2222;
    }

    body.light-mode .glass {
      background: rgba(255, 252, 252, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(180, 60, 60, 0.06);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    }

    body.light-mode .glass-light {
      background: rgba(255, 252, 252, 0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(180, 60, 60, 0.04);
    }

    body.light-mode .sidebar {
      background: rgba(255, 252, 252, 0.95);
      border-right: 1px solid rgba(180, 60, 60, 0.04);
    }

    body.light-mode .sidebar-link {
      color: #6a5a5a;
    }

    body.light-mode .sidebar-link:hover {
      background: rgba(180, 60, 60, 0.03);
      color: #3d2a2a;
    }

    body.light-mode .sidebar-link.active {
      background: rgba(180, 60, 60, 0.05);
      color: #3d2a2a;
    }

    body.light-mode .sidebar-link.active i {
      color: #b05050;
    }

    body.light-mode .kpi-number {
      color: #3d2a2a;
    }

    body.light-mode .kpi-label {
      color: rgba(80, 60, 60, 0.4);
    }

    body.light-mode .pill {
      background: rgba(180, 60, 60, 0.03);
      border: 1px solid rgba(180, 60, 60, 0.05);
      color: rgba(80, 60, 60, 0.6);
    }

    body.light-mode .pill-active {
      background: rgba(180, 60, 60, 0.06);
      border-color: rgba(180, 60, 60, 0.1);
      color: #6a3a3a;
    }

    body.light-mode .gradient-text {
      background: linear-gradient(135deg, #8a3a3a 0%, #b05050 50%, #c96a6a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    body.light-mode .text-primary { color: #2d2222; }
    body.light-mode .text-secondary { color: #5a4a4a; }
    body.light-mode .text-muted { color: #8a7a7a; }
    body.light-mode .border-subtle { border-color: rgba(180, 60, 60, 0.04); }

    /* Dark Mode */
    body.dark-mode {
      background: #0d0a0a;
      color: #e5dddd;
    }

    body.dark-mode .glass {
      background: rgba(20, 14, 14, 0.7);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(200, 120, 120, 0.06);
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
    }

    body.dark-mode .glass-light {
      background: rgba(30, 20, 20, 0.5);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(200, 120, 120, 0.04);
    }

    body.dark-mode .sidebar {
      background: rgba(13, 10, 10, 0.95);
      border-right: 1px solid rgba(200, 120, 120, 0.04);
    }

    body.dark-mode .sidebar-link {
      color: #8a7a7a;
    }

    body.dark-mode .sidebar-link:hover {
      background: rgba(200, 120, 120, 0.03);
      color: #f0e8e8;
    }

    body.dark-mode .sidebar-link.active {
      background: rgba(200, 120, 120, 0.05);
      color: #f0e8e8;
    }

    body.dark-mode .sidebar-link.active i {
      color: #d08080;
    }

    body.dark-mode .kpi-number {
      background: linear-gradient(135deg, #f5ecec 0%, #dbb8b8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    body.dark-mode .kpi-label {
      color: rgba(180, 150, 150, 0.4);
    }

    body.dark-mode .pill {
      background: rgba(200, 120, 120, 0.04);
      border: 1px solid rgba(200, 120, 120, 0.06);
      color: rgba(200, 160, 160, 0.6);
    }

    body.dark-mode .pill-active {
      background: rgba(200, 80, 80, 0.08);
      border-color: rgba(200, 80, 80, 0.12);
      color: #dbb8b8;
    }

    body.dark-mode .gradient-text {
      background: linear-gradient(135deg, #f0e6e6 0%, #dbb8b8 50%, #c49090 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    body.dark-mode .text-primary { color: #f0e8e8; }
    body.dark-mode .text-secondary { color: #b0a0a0; }
    body.dark-mode .text-muted { color: #8a7a7a; }
    body.dark-mode .border-subtle { border-color: rgba(200, 120, 120, 0.04); }

    /* Shared styles */
    .card-hover {
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-hover:hover {
      transform: translateY(-2px);
    }

    body.light-mode .card-hover:hover {
      border-color: rgba(180, 60, 60, 0.12);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    }

    body.dark-mode .card-hover:hover {
      border-color: rgba(200, 120, 120, 0.12);
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    }

    .btn-primary {
      border: none;
      transition: all 0.3s ease;
      color: white;
    }

    body.light-mode .btn-primary {
      background: linear-gradient(135deg, #b05050 0%, #8a3a3a 100%);
    }

    body.light-mode .btn-primary:hover {
      background: linear-gradient(135deg, #c05a5a 0%, #9a4040 100%);
      box-shadow: 0 8px 24px rgba(180, 60, 60, 0.2);
    }

    body.dark-mode .btn-primary {
      background: linear-gradient(135deg, #b03a3a 0%, #8a2a2a 100%);
    }

    body.dark-mode .btn-primary:hover {
      background: linear-gradient(135deg, #c04444 0%, #9a3030 100%);
      box-shadow: 0 8px 30px rgba(180, 50, 50, 0.25);
    }

    .btn-primary:active { transform: translateY(0px); }
    .btn-primary { transform: translateY(0px); }

    .btn-secondary {
      transition: all 0.3s ease;
    }

    body.light-mode .btn-secondary {
      background: rgba(180, 60, 60, 0.04);
      border: 1px solid rgba(180, 60, 60, 0.06);
      color: #5a3a3a;
    }

    body.light-mode .btn-secondary:hover {
      background: rgba(180, 60, 60, 0.06);
      border-color: rgba(180, 60, 60, 0.12);
    }

    body.dark-mode .btn-secondary {
      background: rgba(200, 120, 120, 0.05);
      border: 1px solid rgba(200, 120, 120, 0.08);
      color: #dbb8b8;
    }

    body.dark-mode .btn-secondary:hover {
      background: rgba(200, 120, 120, 0.08);
      border-color: rgba(200, 120, 120, 0.15);
    }

    /* Theme toggle */
    .theme-toggle {
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 8px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    body.light-mode .theme-toggle {
      background: rgba(180, 60, 60, 0.04);
      border: 1px solid rgba(180, 60, 60, 0.06);
      color: #5a3a3a;
    }

    body.light-mode .theme-toggle:hover {
      background: rgba(180, 60, 60, 0.08);
    }

    body.dark-mode .theme-toggle {
      background: rgba(200, 120, 120, 0.05);
      border: 1px solid rgba(200, 120, 120, 0.08);
      color: #dbb8b8;
    }

    body.dark-mode .theme-toggle:hover {
      background: rgba(200, 120, 120, 0.1);
    }

    /* Processing overlay */
    #processingOverlay {
      transition: background 0.4s ease;
    }

    body.light-mode #processingOverlay {
      background: rgba(255, 252, 252, 0.95);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
    }

    body.dark-mode #processingOverlay {
      background: rgba(10, 8, 8, 0.95);
      backdrop-filter: blur(60px);
      -webkit-backdrop-filter: blur(60px);
    }

    #processingOverlay .glass {
      transition: background 0.4s ease, border-color 0.4s ease;
    }

    body.light-mode #processingOverlay .glass {
      background: rgba(255, 252, 252, 0.98);
      border: 1px solid rgba(180, 60, 60, 0.06);
    }

    body.dark-mode #processingOverlay .glass {
      background: rgba(13, 10, 10, 0.97);
      border: 1px solid rgba(200, 120, 120, 0.06);
    }

    .step-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 12px;
      transition: all 0.4s ease;
    }

    body.light-mode .step-dot {
      background: rgba(180, 60, 60, 0.15);
    }

    body.dark-mode .step-dot {
      background: rgba(200, 120, 120, 0.15);
    }

    .step-dot.completed {
      background: #b05050;
    }

    .step-text {
      transition: all 0.3s ease;
    }

    body.light-mode .step-text {
      color: #8a7a7a;
    }

    body.dark-mode .step-text {
      color: #8a7a7a;
    }

    .step-text.completed {
      color: #4a3a3a;
    }

    body.dark-mode .step-text.completed {
      color: #dbb8b8;
    }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { border-radius: 10px; }

    body.light-mode ::-webkit-scrollbar-thumb {
      background: rgba(180, 60, 60, 0.1);
    }

    body.light-mode ::-webkit-scrollbar-thumb:hover {
      background: rgba(180, 60, 60, 0.15);
    }

    body.dark-mode ::-webkit-scrollbar-thumb {
      background: rgba(200, 120, 120, 0.15);
    }

    body.dark-mode ::-webkit-scrollbar-thumb:hover {
      background: rgba(200, 120, 120, 0.25);
    }

    /* Animations */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .fade-up {
      animation: fadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    input[type="file"] { display: none; }

    /* Table styling */
    .data-table {
      border-collapse: collapse;
      width: 100%;
    }

    .data-table th {
      text-align: left;
      padding: 10px 16px;
      font-size: 0.6rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    body.light-mode .data-table th {
      color: rgba(80, 60, 60, 0.3);
      border-bottom: 1px solid rgba(180, 60, 60, 0.04);
    }

    body.dark-mode .data-table th {
      color: rgba(180, 150, 150, 0.3);
      border-bottom: 1px solid rgba(200, 120, 120, 0.04);
    }

    .data-table td {
      padding: 10px 16px;
      font-size: 0.8rem;
    }

    body.light-mode .data-table td {
      border-bottom: 1px solid rgba(180, 60, 60, 0.02);
      color: rgba(60, 50, 50, 0.7);
    }

    body.dark-mode .data-table td {
      border-bottom: 1px solid rgba(200, 120, 120, 0.02);
      color: rgba(220, 210, 210, 0.7);
    }

    .data-table tr:hover td {
      background: rgba(180, 60, 60, 0.01);
    }

    body.dark-mode .data-table tr:hover td {
      background: rgba(200, 120, 120, 0.02);
    }

    .chart-wrapper {
      border-radius: 14px;
      padding: 16px;
    }

    body.light-mode .chart-wrapper {
      background: rgba(255, 252, 252, 0.5);
      border: 1px solid rgba(180, 60, 60, 0.03);
    }

    body.dark-mode .chart-wrapper {
      background: rgba(13, 10, 10, 0.3);
      border: 1px solid rgba(200, 120, 120, 0.03);
    }

    /* Theme transition for all elements */
    .glass, .glass-light, .sidebar, .sidebar-link, .kpi-number, .kpi-label,
    .pill, .pill-active, .btn-primary, .btn-secondary, .theme-toggle,
    .step-dot, .step-text, .data-table th, .data-table td, .chart-wrapper {
      transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }

    /* Ambient glow for dark mode only */
    body.dark-mode .ambient-glow {
      position: fixed;
      pointer-events: none;
      z-index: 0;
    }

    body.dark-mode .ambient-glow-1 {
      top: -20%;
      right: -10%;
      width: 600px;
      height: 600px;
      background: radial-gradient(ellipse, rgba(180, 60, 60, 0.06) 0%, transparent 70%);
      border-radius: 50%;
    }

    body.dark-mode .ambient-glow-2 {
      bottom: -20%;
      left: -10%;
      width: 500px;
      height: 500px;
      background: radial-gradient(ellipse, rgba(140, 40, 40, 0.05) 0%, transparent 70%);
      border-radius: 50%;
    }

    /* Dashboard Tabs */
    .tab-btn {
      padding: 10px 16px;
      border-radius: 14px;
      font-size: 0.8rem;
      font-weight: 700;
      transition: all 0.3s ease;
    }

    body.light-mode .tab-btn {
      color: #7a6666;
    }

    body.dark-mode .tab-btn {
      color: #a69090;
    }

    body.light-mode .tab-btn:hover {
      background: rgba(180, 60, 60, 0.04);
      color: #3d2a2a;
    }

    body.dark-mode .tab-btn:hover {
      background: rgba(200, 120, 120, 0.05);
      color: #f0e8e8;
    }

    body.light-mode .active-tab {
      background: linear-gradient(135deg, #b05050 0%, #8a3a3a 100%);
      color: white;
    }

    body.dark-mode .active-tab {
      background: linear-gradient(135deg, #b03a3a 0%, #8a2a2a 100%);
      color: white;
    }

    .tab-panel {
      display: none;
    }

    .tab-panel.active {
      display: block;
    }
  

    @keyframes ecgDraw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
    @keyframes ecgPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
    @keyframes wakeWord {
      0%   { opacity: 0; transform: translateY(12px) scale(0.94); filter: blur(6px); }
      100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }
    @keyframes wakeTag  { from { opacity: 0; letter-spacing: 0.5em; } to { opacity: 0.85; letter-spacing: 0.3em; } }
    @keyframes glowPulse {
      0%,100% { text-shadow: 0 0 22px rgba(224,122,122,0.25); }
      50%     { text-shadow: 0 0 40px rgba(224,122,122,0.65); }
    }
    #authGate { transition: opacity 0.5s ease; }
    #authGate.fadeout { opacity: 0; pointer-events: none; }
    #ecgLine { stroke-dasharray: 900; stroke-dashoffset: 900; animation: ecgDraw 1.5s ease-out forwards, ecgPulse 2.2s ease-in-out 1.6s infinite; }
    #splashWord { animation: wakeWord 0.9s cubic-bezier(0.2,0.8,0.2,1) 0.55s forwards, glowPulse 2.6s ease-in-out 1.5s infinite; }
    #splashTag  { animation: wakeTag 0.8s ease-out 1.25s forwards; }
    .auth-input { width:100%; margin-top:6px; margin-bottom:14px; padding:11px 14px; border-radius:12px;
      background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); color:#fff; font-size:14px; outline:none; }
    .auth-input::placeholder { color:rgba(255,255,255,0.35); }
    .auth-input:focus { border-color:rgba(224,122,122,0.6); }
    .auth-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.5); }
    .auth-tab { flex:1; padding:9px 0; border-radius:11px; font-size:13px; font-weight:700; cursor:pointer; border:none; transition:all 0.2s ease; }
    /* Top header height (was Tailwind h-20). */
    .app-header { min-height: 5rem; }

    /* Hide scrollbar on the quick-reply chips row while keeping it scrollable. */
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }

    /* Mobile sidebar: hidden by default, slides in when toggled open. */
    @media (max-width: 1023px){
      #sidebar { display: none; box-shadow: 0 0 40px rgba(0,0,0,0.35); }
      #sidebar.sidebar-open { display: flex; }

      /* PWA standalone: keep the header + sidebar logo clear of the notch / status bar. */
      .app-header {
        padding-top: env(safe-area-inset-top);
        min-height: calc(5rem + env(safe-area-inset-top));
      }
      #sidebar > div:first-child {
        padding-top: env(safe-area-inset-top);
        height: calc(5rem + env(safe-area-inset-top));
      }
    }

    /* ---- Mobile web-app polish ---- */
    /* Honour device safe areas (notch / home indicator) when installed. */
    @supports (padding: max(0px)) {
      body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    }
    /* 16px inputs stop iOS Safari from auto-zooming when a field is focused. */
    #chatInput, .auth-input, input[type="text"], input[type="email"], input[type="password"], select { font-size: 16px; }

    @media (max-width: 640px) {
      /* Chat panel fills the phone viewport (dvh accounts for the URL bar) and
         keeps the input above the home indicator. */
      #tab-assistant > section.glass {
        height: calc(100vh - 140px) !important;
        height: calc(100dvh - 140px) !important;
        min-height: 0 !important;
      }
      #chatForm { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
      #chatMessages { padding-left: 1rem; padding-right: 1rem; }
      /* Bubbles can use more width on a small screen. */
      #chatMessages .max-w-\[80\%\] { max-width: 88%; }
    }
  

    @keyframes healthPop { 0% { opacity:0; transform: translateY(18px) scale(0.97); } 100% { opacity:1; transform: translateY(0) scale(1); } }
    #healthOverlay { transition: opacity 0.35s ease; }
    #healthOverlay.hide { opacity: 0; pointer-events: none; }
    #healthOverlay .ho-card { animation: healthPop 0.5s cubic-bezier(0.2,0.8,0.2,1) forwards; }
    #hoRing { transition: stroke-dashoffset 1.2s cubic-bezier(0.3,0.9,0.3,1); }
    .ho-stagger { opacity: 0; animation: healthPop 0.5s ease forwards; }