/* ============================================================
   Dark Clinical Theme — shared base for Angie's reference app
   ============================================================ */
:root{
  --bg-primary:#1a1d23; --bg-secondary:#24272d; --bg-tertiary:#15171c;
  --border-primary:#363a42; --border-secondary:#374151; --border-subtle:#2d3238;
  --text-primary:#ffffff; --text-secondary:#e1e5e9; --text-muted:#9ca3af; --text-subtle:#6b7280;
  --status-safe:#10b981; --status-caution:#f59e0b; --status-danger:#ef4444;
  --accent-primary:#3b82f6; --accent-secondary:#60a5fa;
  --alert-bg:#2d1b1b; --alert-border:#4a2626; --alert-text:#fca5a5;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg-primary); color:var(--text-secondary);
  line-height:1.55; min-height:100vh; -webkit-text-size-adjust:100%;
}
.wrap{max-width:640px; margin:0 auto; padding:0 16px;}

/* Sticky topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(26,29,35,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle);
  padding:env(safe-area-inset-top) 16px 0;
}
.topbar-inner{max-width:640px; margin:0 auto; padding:14px 0; display:flex; align-items:center; gap:12px;}
.topbar h1{font-size:1.15em; font-weight:600; color:#fff; letter-spacing:-0.3px;}
.topbar .pulse{width:9px;height:9px;border-radius:50%;background:var(--status-safe);box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pulse 2.4s infinite;flex:none;}
.topbar .spacer{margin-left:auto;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  font:inherit; font-size:0.92em; font-weight:600; cursor:pointer;
  background:var(--bg-secondary); color:var(--text-secondary);
  border:1px solid var(--border-primary); border-radius:8px; padding:10px 14px;
  transition:border-color .15s, background .15s, color .15s;
}
.btn:hover{border-color:var(--border-secondary); color:#fff;}
.btn.primary{background:var(--accent-primary); border-color:var(--accent-primary); color:#fff;}
.btn.primary:hover{background:#2f6fe0;}
.btn.danger{color:var(--status-danger); border-color:rgba(239,68,68,.35);}
.btn.danger:hover{background:rgba(239,68,68,.1); color:#fca5a5;}
.btn.ghost{background:transparent;}
.btn:disabled{opacity:.5; cursor:default;}
.btn-sm{padding:7px 10px; font-size:0.82em;}

/* Inputs */
input,select,textarea{
  width:100%; padding:12px 13px; background:var(--bg-primary);
  border:1px solid #4b5563; border-radius:8px; color:#fff; font:inherit; font-size:1em;
  transition:border-color .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent-secondary); box-shadow:0 0 0 3px rgba(96,165,250,.12);}
select option{background:var(--bg-primary); color:#fff;}
textarea{resize:vertical; min-height:80px; line-height:1.5;}
label.field-label{display:block; margin-bottom:6px; color:#d1d5db; font-weight:500; font-size:0.82em;}

/* Cards */
.card{
  background:var(--bg-secondary); border:1px solid var(--border-primary);
  border-radius:12px; padding:20px; position:relative; overflow:hidden;
}
.card.safe{border-left:4px solid var(--status-safe);}
.card.caution{border-left:4px solid var(--status-caution);}
.card.danger{border-left:4px solid var(--status-danger);}
.card.info{border-left:4px solid var(--accent-primary);}

.disclaimer{background:var(--alert-bg); border:1px solid var(--alert-border); color:var(--alert-text); padding:15px 16px; border-radius:10px; font-size:0.88em;}
footer{text-align:center; color:var(--text-subtle); font-size:0.82em; padding:22px 0 28px;}
footer a{color:var(--text-subtle); text-decoration:none; border-bottom:1px dotted var(--border-secondary);}
footer .heart{color:var(--status-danger);}