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

body.auth-loading {
  visibility: hidden;
}

:root {
  --color-emergency:#DC2626;--color-emergency-bg:#FEF2F2;--color-emergency-border:#FECACA;
  --color-urgent:#D97706;--color-urgent-bg:#FFFBEB;--color-urgent-border:#FDE68A;
  --color-selfcare:#16A34A;--color-selfcare-bg:#F0FDF4;--color-selfcare-border:#BBF7D0;

  --color-navy:#0B1929;
  --color-navy-light:#152638;
  --color-navy-muted:#1E3A52;

  --color-primary:#0B1929;
  --color-secondary:#4A5568;
  --color-subtle:#8A97A8;
  --color-inverse:#FFFFFF;

  --color-surface:#F7F9FC;
  --color-white:#FFFFFF;
  --color-card:#FFFFFF;
  --color-border:#E4EAF0;
  --color-border-strong:#C8D4E0;

  --color-accent:#1A6EE0;
  --color-accent-dark:#1458B8;
  --color-accent-bg:#EBF2FF;

  --color-focus:#1A6EE0;

  --shadow-sm:0 1px 3px rgba(11,25,41,.08),0 1px 2px rgba(11,25,41,.04);
  --shadow-md:0 4px 12px rgba(11,25,41,.10),0 2px 4px rgba(11,25,41,.06);
  --shadow-lg:0 12px 32px rgba(11,25,41,.14),0 4px 8px rgba(11,25,41,.08);

  --font-sans:'Outfit',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:24px;
  --radius-full:999px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); color: var(--color-primary); background: var(--color-surface); line-height: 1.5; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-dark); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

.site-nav { position: sticky; top: 0; z-index: 30; height: 64px; background: var(--color-navy); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.nav-logo { color: var(--color-inverse); font-size: 20px; font-weight: 600; }
.logo-plus { color: var(--color-accent); }
.nav-right { display: none; align-items: center; gap: 18px; }
.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-links a { color: var(--color-inverse); opacity: .6; font-size: 14px; font-weight: 500; padding: 22px 2px 18px; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a[aria-current='page'] { opacity: 1; }
.nav-links a[aria-current='page'] { border-bottom-color: var(--color-accent); }
.nav-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); border: 0; background: var(--color-navy-muted); color: var(--color-inverse); font-size: 14px; font-weight: 600; cursor: pointer; }
.profile-menu { position: absolute; top: 56px; right: 0; width: 200px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px; display: none; }
.profile-menu.open { display: block; }
.profile-menu-name { font-size: 16px; font-weight: 600; }
.profile-menu-email { font-size: 13px; color: var(--color-subtle); margin-bottom: 10px; }
.profile-menu-divider { height: 1px; background: var(--color-border); margin: 8px 0; }
.profile-menu-item { width: 100%; border: 0; background: transparent; text-align: left; padding: 6px 0; font: inherit; color: var(--color-primary); cursor: pointer; }
.profile-menu-item.signout { color: var(--color-emergency); }
.nav-profile-wrap { position: relative; }
.nav-hamburger { width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nav-hamburger span, .nav-hamburger span::before, .nav-hamburger span::after { content: ''; display: block; width: 18px; height: 2px; border-radius: 2px; background: white; position: relative; }
.nav-hamburger span::before { position: absolute; top: -6px; }
.nav-hamburger span::after { position: absolute; top: 6px; }
.mobile-drawer { position: fixed; inset: 0 0 0 auto; width: min(82vw, 320px); background: var(--color-navy); transform: translateX(100%); transition: transform .2s ease; z-index: 60; padding: 88px 24px 24px; display: flex; flex-direction: column; }
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer a { color: white; font-size: 18px; font-weight: 500; margin-bottom: 16px; }
.mobile-drawer-bottom { margin-top: auto; color: white; opacity: .9; }

.disclaimer-strip { text-align: center; padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-size: 13px; color: var(--color-secondary); background: var(--color-white); }
.hero { padding: 72px 0 60px; text-align: center; }
.hero h1 { font-size: 42px; line-height: 1.1; margin: 0 auto 16px; max-width: 720px; font-weight: 700; }
.hero p { max-width: 620px; margin: 0 auto 24px; color: var(--color-secondary); font-size: 18px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 120px; padding: 0 20px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; cursor: pointer; border: 0; }
.btn-primary { background: var(--color-navy); color: #fff; }
.btn-primary:hover { background: var(--color-navy-light); }
.btn-danger { background: var(--color-emergency); color: #fff; }
.btn-secondary { background: #fff; border: 1px solid var(--color-border); color: var(--color-primary); }
.cta-lg { height: 52px; width: 200px; }

.outcome-grid { display: grid; gap: 16px; margin: 24px auto 40px; }
.outcome-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; border-left: 4px solid; box-shadow: var(--shadow-sm); }
.badge, .pill { display: inline-flex; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.footer { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: 24px 0; margin-top: 48px; color: var(--color-secondary); font-size: 14px; }

.triage-main,.result-main{max-width:760px;margin:0 auto;padding:0 16px 32px}
.progress-bar{height:3px;background:var(--color-border);position:sticky;top:64px;z-index:10}
.progress-fill{height:100%;width:0;background:var(--color-accent);transition:width 400ms cubic-bezier(.4,0,.2,1)}
.question-card{background:var(--color-white);border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--shadow-md);padding:40px;max-width:580px;margin:48px auto;width:100%}
.question-title{font-size:22px;font-weight:600;color:var(--color-primary);line-height:1.4;margin-bottom:28px}
.answer-btn{display:block;width:100%;padding:16px 20px;margin-bottom:10px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);font-size:15px;font-weight:500;color:var(--color-primary);text-align:left;cursor:pointer;transition:all 150ms ease}
.answer-btn:hover,.answer-btn.active{border-color:var(--color-accent);background:var(--color-accent-bg);color:var(--color-accent)}
.category-btn{padding:20px;border-radius:var(--radius-lg);border:1.5px solid var(--color-border);background:var(--color-white);box-shadow:var(--shadow-sm);font-size:15px;font-weight:500;text-align:left;cursor:pointer;transition:all 150ms ease}
.category-btn:hover{border-color:var(--color-navy);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.safety-option{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius-md);border:1.5px solid var(--color-border);margin-bottom:10px;cursor:pointer;transition:border-color 150ms ease,background 150ms ease}
.safety-option:has(input:checked){border-color:var(--color-emergency);background:var(--color-emergency-bg)}
.safety-option input[type='checkbox']{width:18px;height:18px;accent-color:var(--color-emergency);flex-shrink:0}
.back-link{border:0;background:none;color:var(--color-secondary);padding:12px 0;margin-top:14px}
.escalation{border-radius:var(--radius-xl);padding:40px;max-width:580px;margin:48px auto;box-shadow:var(--shadow-md)}
.escalation.emergency{background:var(--color-emergency-bg);border:2px solid var(--color-emergency)}
.escalation.urgent{background:var(--color-urgent-bg);border:2px solid var(--color-urgent)}
.escalation.physician{background:var(--color-accent-bg);border:2px solid var(--color-accent)}

.result-banner{border-radius:var(--radius-xl);padding:40px;margin-bottom:32px;border-left:6px solid}
.result-banner.self-care{background:var(--color-selfcare-bg);border-color:var(--color-selfcare)}
.result-banner.urgent{background:var(--color-urgent-bg);border-color:var(--color-urgent)}
.result-banner.emergency{background:var(--color-emergency-bg);border-color:var(--color-emergency)}
.result-banner.physician{background:var(--color-accent-bg);border-color:var(--color-accent)}
.result-headline{font-size:28px;font-weight:700;line-height:1.2;margin:12px 0 8px}
.result-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:6px 14px;border-radius:var(--radius-full);background:white}
.result-section{background:var(--color-white);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);padding:28px;margin-bottom:16px}
.result-section h2{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-subtle);margin-bottom:16px}
.result-med-card{background:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border);padding:20px;margin-bottom:12px}
.result-med-name{font-size:16px;font-weight:600;color:var(--color-primary);margin-bottom:8px}
.result-med-regimen{font-size:14px;color:var(--color-secondary);padding:8px 12px;background:white;border-radius:var(--radius-sm);border-left:3px solid var(--color-accent);margin-bottom:8px}
.monitor-window{border-left:4px solid var(--color-urgent);background:var(--color-urgent-bg)}

.kit-container{max-width:1140px;margin:0 auto;padding:24px 20px 48px}
.search-wrap{position:relative}
.kit-search{width:100%;height:48px;padding:0 16px 0 44px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-size:15px;background:var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%238A97A8' stroke-width='2'/%3E%3Cpath d='m20 20-3.5-3.5' stroke='%238A97A8' stroke-width='2'/%3E%3C/svg%3E") no-repeat 14px center;box-shadow:var(--shadow-sm);transition:border-color 150ms ease,box-shadow 150ms ease}
.kit-search:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(26,110,224,.15);outline:none}
.clear-search{position:absolute;right:10px;top:10px;border:0;background:none;font-size:24px;color:var(--color-subtle);display:none;cursor:pointer}
.filter-pills{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;scrollbar-width:none;flex-wrap:nowrap}
.filter-pill{padding:8px 18px;border-radius:var(--radius-full);font-size:13px;font-weight:500;border:1.5px solid var(--color-border);background:var(--color-white);color:var(--color-secondary);cursor:pointer;white-space:nowrap;transition:all 150ms ease}
.filter-pill:hover{border-color:var(--color-border-strong);color:var(--color-primary)}
.filter-pill.active{background:var(--color-navy);border-color:var(--color-navy);color:white;font-weight:600}
.med-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;padding:24px 0}
.med-card{background:var(--color-white);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);padding:24px;cursor:pointer;transition:box-shadow 200ms ease,transform 200ms ease;display:flex;flex-direction:column;gap:12px}
.med-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.med-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.med-card-name{font-size:17px;font-weight:600;color:var(--color-primary);line-height:1.3}
.med-card-category{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-subtle);border:1px solid var(--color-border);white-space:nowrap;flex-shrink:0}
.med-card-uses{font-size:14px;color:var(--color-secondary);line-height:1.6}
.med-card-regimen{font-size:13px;color:var(--color-primary);font-weight:500;padding:10px 14px;background:var(--color-surface);border-radius:var(--radius-sm);border-left:3px solid var(--color-accent)}
.med-card-footer{margin-top:auto;padding-top:12px;border-top:1px solid var(--color-border)}
.med-card-btn{font-size:13px;font-weight:600;color:var(--color-accent)}
.med-card.physician-only{border-left:3px solid var(--color-urgent)}
.physician-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--color-urgent);background:var(--color-urgent-bg);padding:3px 8px;border-radius:var(--radius-full)}
.med-modal-overlay{position:fixed;inset:0;background:rgba(11,25,41,.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity 200ms ease}
.med-modal-overlay.open{opacity:1;pointer-events:all}
.med-modal{background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:600px;max-height:85vh;overflow-y:auto;padding:32px;position:relative;transform:translateY(16px);transition:transform 200ms ease}
.med-modal-overlay.open .med-modal{transform:translateY(0)}
.med-modal-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border-radius:var(--radius-full);background:var(--color-surface);border:1px solid var(--color-border);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-secondary)}
.side-effects-row{display:flex;flex-wrap:wrap;gap:8px}
.pregnancy-box{padding:10px;border-radius:8px;margin:10px 0}
.pregnancy-box.caution{background:#FFFBEB;border:1px solid #FDE68A}
.pregnancy-box.block{background:#FEF2F2;border:1px solid #FCA5A5}

.history-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.history-card{background:var(--color-white);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:16px;transition:box-shadow 150ms ease}
.history-card:hover{box-shadow:var(--shadow-md)}
.history-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.history-outcome-badge{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 12px;border-radius:var(--radius-full)}
.history-outcome-badge.self-care{background:var(--color-selfcare-bg);color:var(--color-selfcare)}
.history-outcome-badge.urgent{background:var(--color-urgent-bg);color:var(--color-urgent)}
.history-outcome-badge.emergency{background:var(--color-emergency-bg);color:var(--color-emergency)}
.history-date{font-size:12px;color:var(--color-subtle)}
.history-condition{font-size:18px;font-weight:600;color:var(--color-primary);margin-bottom:4px}
.history-category{font-size:13px;color:var(--color-subtle);margin-bottom:12px}
.history-meds{font-size:13px;color:var(--color-secondary);padding:10px 14px;background:var(--color-surface);border-radius:var(--radius-sm);margin-bottom:16px}
.history-empty{text-align:center;padding:56px 0}

.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-wrap{width:min(420px,100%)}
.auth-brand{text-align:center;font-size:32px;font-weight:600}
.auth-tagline{text-align:center;color:var(--color-subtle);margin-top:4px}
.auth-btn{width:100%}
.auth-divider{text-align:center;color:var(--color-subtle)}
.auth-note{font-size:12px;color:var(--color-subtle);text-align:center;margin-top:10px}
.auth-error{color:var(--color-emergency);font-size:13px}
.auth-label{display:block;font-size:13px;font-weight:600;color:var(--color-secondary);margin-bottom:6px;margin-top:14px}
.auth-input{width:100%;height:48px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);padding:0 16px;font-size:15px;font-family:var(--font-sans);background:var(--color-white);transition:border-color 150ms ease,box-shadow 150ms ease;display:block;margin-bottom:4px}
.auth-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(26,110,224,0.12);outline:none}
.auth-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-md)}

.faq-item{border-bottom:1px solid var(--color-border)}
.faq-item:first-child{border-top:1px solid var(--color-border)}
.faq-question{display:flex;justify-content:space-between;align-items:center;width:100%;padding:20px 0;background:none;border:none;font-family:var(--font-sans);font-size:16px;font-weight:500;color:var(--color-primary);text-align:left;cursor:pointer;gap:16px}
.faq-question:hover{color:var(--color-accent)}
.faq-chevron{font-size:20px;color:var(--color-subtle);transition:transform 200ms ease;flex-shrink:0;line-height:1}
.faq-answer{padding:0 0 20px}
.faq-answer p{font-size:15px;color:var(--color-secondary);line-height:1.7;margin:0}

@media (min-width:640px){
  .nav-right{display:flex}
  .nav-hamburger{display:none}
  .outcome-grid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}