/* ICU IV Free v8.0.1 — cohesive calculator surface */
:root {
  --primary-blue: #26c6da;
  --bg-light: #07111b;
  --bg-white: #0d1a27;
  --text-dark: #f4f8fc;
  --text-muted: #8fa2b7;
  --border-color: #203445;
  --shadow: 0 18px 46px rgba(0,0,0,.24);
  --input-border: #31536a;
  --input-bg: #091620;
  --input-hover-bg: #0b1c28;
  --input-focus-shadow: rgba(38,198,218,.15);
}

html { background: #07111b; }
body,
body.night-mode {
  min-height: 100vh;
  padding: 0 20px 40px;
  color: var(--text-dark);
  background:
    radial-gradient(circle at 82% 2%, rgba(38,198,218,.09), transparent 26rem),
    linear-gradient(180deg, #07111b, #091723 72%, #07111b);
  transition: none;
}
.container { max-width: 1180px; }

header,
body.night-mode header {
  position: relative;
  margin: 0 -20px 26px;
  padding: 18px 20px;
  border: 0;
  border-bottom: 1px solid rgba(49,83,106,.65);
  border-radius: 0;
  background: rgba(7,17,27,.9);
  box-shadow: none;
  backdrop-filter: saturate(145%) blur(12px);
}
.app-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.app-brand { display: flex; align-items: center; gap: 13px; min-width: 0; color: inherit; text-decoration: none; }
.app-brand:hover { color: inherit; text-decoration: none; }
.app-brand img { width: 46px; height: 46px; border-radius: 11px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.app-brand-copy { text-align: left; min-width: 0; }
.header-main-title { color: var(--text-dark); font-size: 1.15rem; margin: 0; letter-spacing: -.02em; }
.header-main-title .free-mark { color: #26c6da; }
.subtitle { color: var(--text-muted); font-size: .72rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 3px 0 0; }
.app-header-actions { display: flex; align-items: center; gap: 9px; }
.app-header-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  color: #c4d0de;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
}
.app-header-link:hover { color: #82eaf3; border-color: #26c6da; }
.app-header-link.primary { background: #26c6da; border-color: #26c6da; color: #031318; }

.calculator-intro {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
}
.calculator-intro-main,
.calculator-privacy {
  padding: 20px 22px;
  border: 1px solid var(--border-color);
  background: rgba(13,26,39,.86);
  border-radius: 12px;
}
.calculator-intro .eyebrow { color: #69dbe7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.calculator-intro h2 { margin: 5px 0 4px; color: var(--text-dark); font-size: 1.4rem; letter-spacing: -.025em; }
.calculator-intro p { margin: 0; color: var(--text-muted); font-size: .84rem; }
.calculator-privacy { display: flex; align-items: center; gap: 12px; }
.privacy-shield { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #44d4a2; background: rgba(68,212,162,.1); border: 1px solid rgba(68,212,162,.22); font-weight: 800; }

.card,
body.night-mode .card {
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(13,26,39,.95);
  box-shadow: var(--shadow);
  transition: border-color .18s ease, background-color .18s ease;
}
.card-title { padding-bottom: 14px; margin-bottom: 16px; color: var(--text-dark); border-bottom: 1px solid var(--border-color); font-size: 1.18rem; letter-spacing: -.02em; }

.drug-category { margin-bottom: 12px; }
.category-header,
body.night-mode .category-header {
  position: relative;
  min-height: 46px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-left: 2px solid currentColor;
  border-radius: 8px;
  background: #0a1723;
  color: #c4d0de;
  font-size: .73rem;
  letter-spacing: .12em;
}
.vasopressor-header { color: #ff7b82; }
.sedation-header, .anticoagulation-header { color: #c59af3; }
.antiarrhythmic-header, .endocrine-header { color: #f4b45f; }
.metabolic-header, .antihypertensives-header { color: #48d5bd; }
.collapsible-header:hover { opacity: 1; transform: none; background: #0e1e2b; border-color: #31536a; }
.category-content { margin-top: 10px; }
.drug-selector { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 9px; }
.btn-drug,
body.night-mode .btn-drug {
  min-height: 50px;
  padding: 12px 14px;
  border-width: 1px;
  border-color: #31536a;
  border-radius: 8px;
  background: #091620;
  color: #c4d0de;
  box-shadow: none;
  font-size: .88rem;
}
.btn-drug:hover,
body.night-mode .btn-drug:hover { background: #102431; border-color: currentColor; transform: translateY(-1px); box-shadow: none; }
.btn-drug-vasopressor { color: #ff858c; }
.btn-drug-sedation, .btn-drug-anticoagulation { color: #caa4ef; }
.btn-drug-analgesia { color: #70bdf1; }
.btn-drug-antiarrhythmic, .btn-drug-endocrine { color: #f2bd74; }
.btn-drug-metabolic, .btn-drug-antihypertensives { color: #65d6c5; }
.btn-drug.selected { background: #183246; border-color: #6ce2ec; color: #f4f8fc; box-shadow: inset 3px 0 #26c6da; }

.selected-drug-name { border-radius: 8px; background: rgba(38,198,218,.1); color: #82eaf3; border: 1px solid rgba(38,198,218,.25); }
.section-title { color: #f4f8fc; border-color: #31536a; }
label { color: #c4d0de; }
input[type="text"], input[type="number"], input[type="date"], input[type="time"], select,
body.night-mode input[type="text"], body.night-mode input[type="number"], body.night-mode input[type="date"], body.night-mode input[type="time"], body.night-mode select {
  min-height: 48px;
  border: 1px solid #31536a;
  border-radius: 8px;
  background: #081520;
  color: #f4f8fc;
  box-shadow: none;
}
input:hover, select:hover, body.night-mode input:hover, body.night-mode select:hover { background: #0b1d29; border-color: #4d7289; }
input:focus, select:focus, body.night-mode input:focus, body.night-mode select:focus { background: #0b1d29; border-color: #26c6da; box-shadow: 0 0 0 3px rgba(38,198,218,.14); }
select option { background: #0d1a27; color: #f4f8fc; }
.input-hint { color: #6f849a; }
.calculated-field { background: #091620; border-color: #31536a; color: #82eaf3; }

.btn { min-height: 48px; border-radius: 8px; box-shadow: none; }
.btn-primary { background: #26c6da; color: #031318; }
.btn-primary:hover { background: #72e3ed; transform: translateY(-1px); box-shadow: none; }
.btn-secondary { background: transparent; color: #c4d0de; border: 1px solid #31536a; }
.btn-secondary:hover { background: #102431; border-color: #4d7289; }

.result-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.result-item,
body.night-mode .result-item {
  min-height: 110px;
  padding: 17px;
  border: 1px solid #203445;
  border-left: 2px solid #26c6da;
  border-radius: 8px;
  background: #091620;
}
.result-item.highlight { background: rgba(68,212,162,.08); border-color: rgba(68,212,162,.28); border-left-color: #44d4a2; }
.result-label { color: #7890a7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.result-value { color: #f4f8fc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.38rem; }
.result-unit { color: #26c6da; }
.preparation-box { background: #091620; border-color: #31536a; color: #c4d0de; }
.privacy-note { background: rgba(68,212,162,.08); border-color: #44d4a2; color: #9ce6cc; }
.gravity-rates { gap: 10px; }

.floating-toolbar { right: 20px; bottom: 92px; }
.toolbar-btn { width: 50px; height: 50px; border: 1px solid rgba(38,198,218,.35); background: #123044; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.toolbar-btn .toolbar-icon { display: grid; place-items: center; }
.toolbar-btn .toolbar-icon svg { width: 24px; height: 24px; fill: none; stroke: #82eaf3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tools-menu { border: 1px solid #31536a; background: #0d1a27; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.tools-menu-btn { color: #c4d0de; }
.tools-menu-btn:hover { background: #102431; color: #82eaf3; }

.about-modal-overlay, .modal-overlay-modern { background: rgba(2,8,13,.82); backdrop-filter: blur(6px); }
.about-modal, .modal-content-modern, .modal-content,
body.night-mode .about-modal { background: #0d1a27; border: 1px solid #31536a; color: #c4d0de; }
.about-modal-title, .about-modal-subtitle, .modal-header-modern { color: #f4f8fc; }

#pwa-install-banner {
  bottom: 18px;
  border: 1px solid rgba(38,198,218,.35);
  border-radius: 10px;
  background: #102b3d;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.pwa-install-button { color: #031318; background: #72e3ed; }

footer { color: #6f849a; }
footer a { color: #8fa2b7; }
footer a:hover { color: #82eaf3; }

@media (max-width: 760px) {
  body, body.night-mode { padding: 0 10px 28px; }
  header, body.night-mode header { margin: 0 -10px 16px; padding: 12px 10px; }
  .app-brand img { width: 42px; height: 42px; }
  .app-header-link:not(.primary) { display: none; }
  .app-header-link.primary { min-height: 40px; padding: 0 12px; font-size: .76rem; }
  .subtitle { max-width: 26ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calculator-intro { grid-template-columns: 1fr; }
  .calculator-intro-main, .calculator-privacy { padding: 16px; }
  .card, body.night-mode .card { padding: 17px; border-radius: 10px; }
  .drug-selector { grid-template-columns: 1fr; }
  .result-grid, .gravity-rates { grid-template-columns: 1fr; }
  .result-item, body.night-mode .result-item { min-height: 92px; }
  .floating-toolbar { right: 14px; bottom: 104px; }
  #pwa-install-banner { bottom: 16px; left: 10px; right: 10px; transform: none; }
}

@media (max-width: 420px) {
  .app-header-link.primary { display: none; }
  .header-main-title { font-size: 1.05rem; }
  .subtitle { max-width: 22ch; }
}

@media print {
  body { background: #fff !important; color: #000 !important; }
}