/* =========================================================
   VITRONIS NOTFALLPASS — Design tokens
   Palette: deep navy ink + warm bone paper, with a restrained
   emergency-red signal and a muted mint accent. Typography
   mixes a system sans for voice with a monospace face for
   data (vitals, dosages, blood type).
   ========================================================= */
:root{
  --ink:        #0B1C2C;
  --ink-soft:   #3A4A57;
  --steel:      #5B6B73;
  --paper:      #F7F5F0;
  --paper-raised:#FFFFFF;
  --line:       rgba(11,28,44,0.12);
  --line-strong:rgba(11,28,44,0.22);
  --brand-dark: #0B1C2C;

  --blue:       #1C5D99;
  --blue-deep:  #123E66;
  --signal:     #D7263D;
  --signal-soft:#FBE7EA;
  --signal-text:#8C1326;
  --mint:       #2E8B74;
  --mint-soft:  #E4F2EE;
  --mint-text:  #185C4B;
  --mint-text-deep: #134a3c;
  --amber-soft: #FCEFD9;
  --amber-text: #6B4D0A;
  --amber:      #B6770A;

  --ecg-bg:     #07140F;
  --ecg-line:   #34E0A1;
  --ecg-grid:   rgba(52,224,161,0.14);

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11,28,44,0.06), 0 1px 1px rgba(11,28,44,0.04);
  --shadow-2: 0 8px 28px rgba(11,28,44,0.16);
  --maxw: 760px;
}

/* =========================== DARK THEME =========================== */
html[data-theme="dark"]{
  --ink:        #EEF1F4;
  --ink-soft:   #B7C0C9;
  --steel:      #8C97A3;
  --paper:      #10151B;
  --paper-raised:#1A2129;
  --line:       rgba(255,255,255,0.10);
  --line-strong:rgba(255,255,255,0.22);

  --blue:       #4D9BDB;
  --blue-deep:  #6FB2E8;
  --signal:     #FF5C72;
  --signal-soft:rgba(255,92,114,0.16);
  --signal-text:#FF93A4;
  --mint:       #3FCBA3;
  --mint-soft:  rgba(63,203,163,0.16);
  --mint-text:  #5FE3BC;
  --mint-text-deep: #3FCBA3;
  --amber-soft: rgba(214,150,30,0.18);
  --amber-text: #F0B95B;
  --amber:      #D6961E;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.2);
  --shadow-2: 0 8px 28px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .idcard{ box-shadow: 0 0 0 1px rgba(255,255,255,0.06), var(--shadow-1); }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea{ color: var(--ink); }
html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus{ background: var(--paper-raised); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

*{ box-sizing: border-box; min-width: 0; }
html{ -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3{ font-family: var(--font-display); margin: 0; }
img{ max-width: 100%; display:block; }

:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }
.hidden{ display: none !important; }

/* =========================== DEMO RIBBON =========================== */
.demo-ribbon{
  background: var(--amber);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 6px 10px;
}

/* =========================== TOPBAR =========================== */
.topbar{
  position: sticky; top: 0; z-index: 30;
  background: var(--brand-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; flex: none; }
.brand__logo{ height: 38px; width: auto; flex: none; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand__name{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--mint);
  font-weight: 600;
}
.brand__product{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  white-space: nowrap;
}
.topbar__actions{ display:flex; flex-wrap: wrap; gap:8px; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }

/* =========================== BUTTONS =========================== */
.btn{
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  padding: 9px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: var(--blue); color: #fff; }
.btn--primary:hover{ background: var(--blue-deep); }
.btn--outline{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.35); }
.btn--outline:hover{ border-color:#fff; }
.btn--ghost{ background: transparent; color:#fff; border-color: transparent; opacity:.85; }
.btn--ghost:hover{ opacity:1; text-decoration: underline; }
.btn--app{ background: rgba(46,139,116,0.18); color:#fff; border-color: rgba(46,139,116,0.5); }
.btn--app:hover{ background: rgba(46,139,116,0.3); }
.btn--rescue{
  background: var(--signal); color:#fff; border-color: var(--signal);
  font-weight: 800; padding: 9px 16px;
  box-shadow: 0 2px 10px rgba(215,38,61,0.3);
}
.btn--rescue:hover{ background: #b51d31; }

.btn-rescue-hero{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 0 0 16px; padding: 16px 20px;
  background: var(--signal); color: #fff; border: none; border-radius: var(--radius-lg);
  font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.005em;
  cursor: pointer; box-shadow: 0 4px 14px rgba(215,38,61,0.3);
  transition: background-color .15s ease, transform .05s ease;
}
.btn-rescue-hero:hover{ background: #b51d31; }
.btn-rescue-hero:active{ transform: translateY(1px); }

.page .btn--ghost, .page .btn--outline{ color: var(--ink); }
.page .btn--outline{ border-color: var(--line-strong); background: var(--paper-raised); }
.page .btn--outline:hover{ border-color: var(--ink); }

/* =========================== STATUS BAR =========================== */
.statusbar{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.statusbar:not(:empty){ padding-top: 14px; }
.statusbar .chip{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13.5px; font-weight: 600;
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--mint-soft); color: var(--mint-text);
  border: 1px solid rgba(46,139,116,0.25);
}
.statusbar .chip--error{ background: var(--signal-soft); color:var(--signal-text); border-color: rgba(215,38,61,0.3); }

/* =========================== PAGE LAYOUT =========================== */
.page{ max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 60px; }

/* ID card */
.idcard{
  background: var(--brand-dark); color: #fff; border-radius: var(--radius-lg);
  padding: 22px 22px 18px; margin-bottom: 18px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-1);
}
.idcard::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(28,93,153,0.5), transparent 55%);
  pointer-events:none;
}
.idcard__eyebrow{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55); margin: 0 0 10px; text-transform: uppercase;
}
.idcard__name{
  font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 7vw, 32px);
  letter-spacing: -0.01em; margin: 0 0 14px; word-break: break-word;
}
.idcard__row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; position: relative; }
.idcard__stat{ min-width: 0; }
.idcard__stat .label{
  display:block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.5); text-transform: uppercase; margin-bottom: 4px;
}
.idcard__stat .value{
  font-family: var(--font-mono); font-size: clamp(13px,3.6vw,16px); font-weight: 600; color: #fff; word-break: break-word;
}
.idcard__blood{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 42px; height: 28px; padding: 0 8px; background: var(--signal); color:#fff;
  font-family: var(--font-mono); font-weight: 800; font-size: 14px; border-radius: var(--radius);
}

/* =========================== DATA SECTIONS (read view) =========================== */
.section{
  background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px;
}
.section--critical{ border-left-color: var(--signal); }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom: 10px; }
.section__head h2{
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
  font-weight: 800; font-family: var(--font-mono);
}
.section__empty{ color: var(--steel); font-size: 14px; font-style: italic; }

.taglist{ display:flex; flex-wrap:wrap; gap:8px; }
.tag{
  font-size: 13.5px; font-weight: 600; background: var(--paper); border:1px solid var(--line);
  padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.tag:hover{ border-color: var(--blue); background: var(--paper-raised); }
.tag--signal{ background: var(--signal-soft); color:var(--signal-text); border-color: rgba(215,38,61,0.3); }

.datarow{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line); cursor: pointer; transition: background .15s ease;
  margin: 0 -18px; padding-left: 18px; padding-right: 18px; border-radius: var(--radius);
}
.datarow:hover{ background: var(--paper); }
.datarow:first-child{ border-top:none; }
.datarow__main{ min-width:0; }
.datarow__title{ font-weight: 700; font-size: 14.5px; }
.datarow__sub{ color: var(--steel); font-size: 13px; margin-top:1px; }
.datarow__value{ font-family: var(--font-mono); font-weight: 700; font-size: 14px; white-space: nowrap; text-align:right; }
.datarow--warning{ background: var(--signal-soft); }
.datarow__chevron{ color: var(--steel); flex: none; align-self:center; font-size: 13px; }
.flag-critical{
  display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.06em; text-transform:uppercase; color: var(--signal); margin-left: 8px;
}

.doclist{ display:flex; flex-direction:column; gap:8px; }
.docrow{
  display:flex; align-items:center; gap:10px; font-size: 14.5px; font-weight: 600;
  cursor: pointer; padding: 6px 0; border-radius: var(--radius);
}
.docrow:hover{ text-decoration: underline; }
.docrow .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.docrow .dot--yes{ background: var(--mint); }
.docrow .dot--no{ background: var(--line-strong); }
.docrow .status{ font-family: var(--font-mono); font-size: 12px; color: var(--steel); margin-left:auto; text-transform:uppercase; letter-spacing:.04em; white-space: nowrap; }

.contactcard{
  display:flex; align-items:center; justify-content:space-between; padding: 10px 0; gap: 10px;
  border-top: 1px solid var(--line); cursor: pointer; margin: 0 -18px; padding-left: 18px; padding-right: 18px; border-radius: var(--radius);
}
.contactcard:hover{ background: var(--paper); }
.contactcard:first-child{ border-top:none; }
.contactcard__name{ font-weight:700; font-size:14.5px; }
.contactcard__rel{ color: var(--steel); font-size: 13px; }
.contactcard__phone{ font-family: var(--font-mono); font-weight:700; font-size:14px; color: var(--blue); text-decoration:none; white-space:nowrap; }
.contactcard__phone:hover{ text-decoration:underline; }

/* =========================== EDIT TABS + FORM =========================== */
.edit-tabs{ display:flex; gap:4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.edit-tab{
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--steel);
  background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: 10px 6px; cursor: pointer; margin-bottom: -1px;
}
.edit-tab.active{ color: var(--ink); border-bottom-color: var(--blue); }

.pass-edit{ display:flex; flex-direction:column; gap:12px; }
.edit-section{ background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.edit-section h2{
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
  font-weight: 800; font-family: var(--font-mono); margin-bottom: 12px;
}
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field:last-child{ margin-bottom:0; }
.field > span{ font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  font: inherit; font-family: var(--font-body); padding: 9px 10px; border:1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--paper); color: var(--ink); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ background:#fff; }
.field textarea{ resize: vertical; min-height: 60px; }
.field--check{ flex-direction:row; align-items:center; gap:8px; }
.field--check input{ width:auto; }
.field__small{ font-size: 12px; color: var(--steel); margin-top: -2px; }

.repeat-item{ border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; background: var(--paper); }
.repeat-item:last-of-type{ margin-bottom: 0; }
.repeat-item__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.repeat-item__head span{ font-family: var(--font-mono); font-size: 11px; letter-spacing:0.06em; text-transform: uppercase; color: var(--steel); font-weight: 700; }
.repeat-item .field{ margin-bottom: 10px; }
.repeat-item .field:last-child{ margin-bottom: 0; }
.btn-remove{
  background: transparent; border: 1px solid var(--line-strong); color: var(--signal); border-radius: var(--radius);
  width:30px; height:30px; cursor:pointer; font-size:15px; line-height:1; flex: none;
}
.btn-remove:hover{ background: var(--signal-soft); }
.btn-add{
  margin-top: 10px; background: transparent; border: 1px dashed var(--line-strong); color: var(--blue);
  border-radius: var(--radius); padding: 8px 12px; cursor:pointer; font-weight:700; font-size:13.5px; width: 100%;
}
.btn-add:hover{ border-color: var(--blue); background: rgba(28,93,153,0.05); }

/* File upload control */
.filefield{
  display:flex; align-items:center; gap:10px; flex-wrap: wrap;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 10px;
  background: var(--paper);
}
.filefield input[type=file]{ font-size: 12.5px; max-width: 100%; }
.filefield__name{ font-size: 12.5px; color: var(--ink-soft); font-weight: 600; word-break: break-all; }
.filefield__remove{
  background: none; border: none; color: var(--signal); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline;
}
.filefield__thumb{ width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.doc-status{ font-family: var(--font-mono); font-size: 11px; font-weight: 700; margin-left: 6px; }
.doc-status--yes{ color: var(--mint); }
.doc-status--no{ color: var(--steel); }

.avatar-edit{ display:flex; align-items:center; gap:14px; margin-bottom: 14px; }
.avatar-edit__preview{
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--paper); border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:800; color: var(--steel); flex: none;
}

.edit-actionbar{ position: sticky; bottom: 0; display:flex; gap:10px; justify-content:flex-end; background: linear-gradient(to top, var(--paper) 60%, transparent); padding: 16px 0 4px; }

/* =========================== FOOTER =========================== */
.footer{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px 40px; color: var(--steel); font-size: 12.5px; }
.footer__disclaimer{
  margin-top: 10px; padding: 10px 12px; background: var(--amber-soft); border: 1px solid rgba(182,119,10,0.25);
  border-radius: var(--radius); color: var(--amber-text);
}

/* =========================== MODALS =========================== */
.modal-overlay{
  position: fixed; inset: 0; z-index: 50; background: rgba(11,28,44,0.55);
  display:flex; align-items:center; justify-content:center; padding: 20px;
}
.modal{ background: var(--paper-raised); border-radius: var(--radius-lg); width: 100%; max-width: 380px; padding: 26px 24px 24px; box-shadow: var(--shadow-2); position: relative; }
.modal--wide{ max-width: 460px; }
.modal__close{
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: var(--paper); color: var(--steel); font-size: 14px; cursor: pointer; line-height: 1;
}
.modal__close:hover{ background: var(--line); color: var(--ink); }
.modal__app-icon{ height: 40px; width: auto; margin-bottom: 10px; }
.modal h2{ font-size: 19px; margin-bottom: 6px; padding-right: 24px; }
.modal__hint{ color: var(--steel); font-size: 13.5px; margin: 0 0 16px; }
.modal__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top: 6px; }
.field__error{ color: var(--signal); font-size: 13px; font-weight:600; margin: -4px 0 10px; }

.detail-grid{ display:flex; flex-direction:column; gap: 10px; }
.detail-row{ display:flex; justify-content:space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.detail-row:first-child{ border-top:none; }
.detail-row dt{ font-size: 12px; font-weight: 700; color: var(--steel); text-transform: uppercase; letter-spacing: .04em; flex: none; }
.detail-row dd{ margin:0; font-size: 14.5px; font-weight: 600; text-align: right; }
.detail-note{ background: var(--paper); border-radius: var(--radius); padding: 10px 12px; font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; }

/* =========================== RESCUER DASHBOARD =========================== */
.page--rescuer{ max-width: 800px; }
.rescuer-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap: wrap; margin-bottom: 6px; }
.rescuer-top__title{ display:flex; align-items:center; gap:12px; }
.rescuer-top__logo{ height: 34px; width: auto; }
.rescuer-top__title h1{ font-size: 20px; font-weight:800; }
.rescuer-top__patient{ margin:2px 0 0; color: var(--steel); font-family: var(--font-mono); font-size: 13px; }
.rescuer-top__right{ display:flex; align-items:center; gap:12px; flex-wrap: wrap; }
.rescuer-disclaimer{
  font-size: 12.5px; color: var(--steel); background: var(--amber-soft); border: 1px solid rgba(182,119,10,0.25);
  border-radius: var(--radius); padding: 8px 12px; margin: 12px 0 20px;
}

.badge{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size: 11px; font-weight:700; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }
.badge--live{ background: var(--mint-soft); color:var(--mint-text); }
.badge .dot{ width:7px; height:7px; border-radius:50%; background: var(--mint); animation: dot-pulse 1.6s ease-in-out infinite; }
@keyframes dot-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* Rescuer standard health summary */
.rescuer-summary{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px;
}
.rsum-card{ background: var(--paper-raised); border:1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius); padding: 12px 14px; }
.rsum-card--critical{ border-left-color: var(--signal); }
.rsum-card .label{ display:block; font-family: var(--font-mono); font-size: 10px; letter-spacing:0.08em; color: var(--steel); text-transform: uppercase; margin-bottom: 6px; }
.rsum-card .body{ font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: break-word; }
.rsum-card .body .tag{ cursor: default; }
.rsum-card .body .tag:hover{ border-color: var(--line); background: var(--paper); }

/* ECG */
.ecg-card{ background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; }
.ecg-monitor{ background: var(--ecg-bg); border-radius: var(--radius); overflow: hidden; margin-top: 8px; }
.ecg-svg{ width:100%; height: 130px; display:block; }
.ecg-grid{ stroke: var(--ecg-grid); stroke-width: 1; }
.ecg-line{
  fill:none; stroke: var(--ecg-line); stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(52,224,161,0.6));
  transform-box: view-box; transform-origin: 0 0;
  animation: ecg-scroll 1s linear infinite;
  cursor: pointer;
}
@keyframes ecg-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-200px); }
}
.ecg-monitor{ cursor: pointer; }
.ecg-monitor:hover{ outline: 2px solid var(--mint); outline-offset: 2px; }
.ecg-tap-hint{ font-size: 11px; color: var(--steel); margin-top: 6px; font-family: var(--font-mono); }

.vitals-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.vital{ background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; transition: border-color .15s ease, transform .05s ease; }
.vital:hover{ border-color: var(--blue); }
.vital:active{ transform: translateY(1px); }
.vital .label{ display:block; font-family: var(--font-mono); font-size: 10px; letter-spacing:0.08em; color: var(--steel); text-transform: uppercase; margin-bottom:8px; }
.vital .value{ font-family: var(--font-mono); font-weight: 800; font-size: 22px; color: var(--ink); overflow-wrap: break-word; }
.vital .unit{ font-size: 12.5px; font-weight: 600; color: var(--steel); margin-left: 3px; }
.vital .range{ font-size: 11px; color: var(--steel); margin-top: 4px; }
.vital--alert{ border-color: rgba(215,38,61,0.4); background: var(--signal-soft); }
.vital--alert .value{ color: var(--signal); }
.vital .tap-hint{ font-size: 10px; color: var(--blue); font-weight: 700; margin-top: 6px; font-family: var(--font-mono); }

.chart-card{ background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 12px; margin-bottom: 16px; }
.chart-card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom: 6px; flex-wrap: wrap; }
.chart-card__head h2{ font-size: 14px; font-weight:800; }
.chart-card__sub{ font-size: 11.5px; color: var(--steel); font-family: var(--font-mono); }
.chart-svg{ width:100%; height:auto; display:block; touch-action: pan-y; cursor: grab; }
.chart-svg:active{ cursor: grabbing; }
.chart-svg .grid-line{ stroke: var(--line); stroke-width:1; }
.chart-svg .axis-label{ font-family: var(--font-mono); font-size: 9px; fill: var(--steel); }
.chart-svg .series{ fill:none; stroke: var(--blue); stroke-width:2; }
.chart-svg .area{ fill: rgba(28,93,153,0.08); stroke:none; }
.chart-svg .bar{ fill: var(--blue); cursor: pointer; }
.chart-svg .bar--rest{ fill: var(--mint); }
.chart-svg .bar:hover{ fill: var(--blue-deep); }

.chart-toolbar{ display:flex; align-items:center; gap:8px; margin: 6px 0 10px; flex-wrap: wrap; }
.btn-zoom{
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; padding: 5px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer;
}
.btn-zoom:hover{ border-color: var(--blue); color: var(--blue); }
.chart-toolbar__hint{ font-size: 11.5px; color: var(--steel); margin-left: auto; }

.point-hit{ cursor: pointer; }
.chart-tooltip rect{ fill: var(--brand-dark); }
.chart-tooltip text{ fill: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; }
.chart-tooltip .tooltip-dot{ fill: var(--blue); stroke: #fff; stroke-width: 1.5; }

.modal--chart{ max-width: 640px; max-height: 88vh; overflow-y: auto; }

/* =========================== NOTFALL-DATENBLATT =========================== */
.protocol-sheet{
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin: 14px 0; font-size: 13.5px;
}
.protocol-sheet h3{
  font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); font-weight: 800; margin: 16px 0 8px; padding-top: 10px; border-top: 1px solid var(--line);
}
.protocol-sheet h3:first-child{ margin-top: 0; padding-top: 0; border-top: none; }
.protocol-sheet__head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 6px; }
.protocol-sheet__head img{ height: 28px; }
.protocol-sheet__meta{ font-family: var(--font-mono); font-size: 11px; color: var(--steel); }
.protocol-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.protocol-row{ display:flex; justify-content:space-between; gap: 10px; padding: 3px 0; font-size: 13px; }
.protocol-row dt{ color: var(--steel); font-weight: 600; }
.protocol-row dd{ margin:0; font-weight: 700; text-align:right; }
.protocol-flag{ background: var(--signal-soft); color:var(--signal-text); border-radius: var(--radius); padding: 6px 10px; font-weight: 700; font-size: 12.5px; margin-top: 6px; }
.protocol-sheet ul{ margin: 4px 0; padding-left: 18px; }
.protocol-sheet li{ margin-bottom: 2px; }
.protocol-sheet__footer{ font-size: 11px; color: var(--steel); margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--line); }

@media print{
  body.printing-protocol *{ visibility: hidden; }
  body.printing-protocol #protocolPrintArea, body.printing-protocol #protocolPrintArea *{ visibility: visible; }
  body.printing-protocol #protocolPrintArea{ position: absolute; left: 0; top: 0; width: 100%; padding: 10mm; border: none; }

  body.printing-pass *{ visibility: hidden; }
  body.printing-pass #passPrintArea, body.printing-pass #passPrintArea *{ visibility: visible; }
  body.printing-pass #passPrintArea{ position: absolute; left: 0; top: 0; width: 100%; padding: 10mm; }
  body.printing-pass .idcard{ color: var(--ink) !important; background: #fff !important; border: 1px solid var(--line); }
  body.printing-pass .idcard::before{ display:none; }
  body.printing-pass .idcard__eyebrow, body.printing-pass .idcard__stat .label{ color: var(--steel) !important; }
  body.printing-pass .idcard__name, body.printing-pass .idcard__stat .value{ color: var(--ink) !important; }
}

/* =========================== ONBOARDING HINT =========================== */
.onboarding-hint{
  max-width: var(--maxw); margin: 14px auto 0; padding: 12px 16px;
  background: var(--mint-soft); border: 1px solid rgba(46,139,116,0.3); border-radius: var(--radius);
  display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap;
}
.onboarding-hint p{ margin: 0; font-size: 13.5px; color: var(--mint-text); flex: 1 1 240px; }
.onboarding-hint button{
  font-family: var(--font-display); font-weight: 700; font-size: 13px; flex: none;
  background: var(--mint-text); color: #fff; border: none; border-radius: var(--radius); padding: 7px 14px; cursor: pointer;
}
.onboarding-hint button:hover{ background: var(--mint-text-deep); }

/* =========================== BOTTOM PRINT BAR =========================== */
.print-bar{
  max-width: var(--maxw); margin: 0 auto 28px; padding: 0 20px;
  display: flex; justify-content: center;
}
.print-bar .btn{ width: 100%; max-width: 320px; padding: 12px; font-size: 14.5px; }
.print-bar .btn--outline{ color: var(--ink); border-color: var(--line-strong); background: var(--paper-raised); }
.print-bar .btn--outline:hover{ border-color: var(--ink); }

/* =========================== LEGAL LINKS =========================== */
.legal-links{ display:flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.legal-links button{
  background:none; border:none; color: var(--steel); font-size: 12px; text-decoration: underline;
  cursor: pointer; padding: 0; font-family: var(--font-body);
}
.legal-links button:hover{ color: var(--ink); }
.legal-content h3{ font-size: 13px; margin: 16px 0 6px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.legal-content h3:first-child{ margin-top: 0; }
.legal-content p{ font-size: 13.5px; line-height: 1.6; margin: 0 0 8px; }
.legal-content .placeholder{ background: var(--amber-soft); border: 1px solid rgba(182,119,10,0.25); border-radius: var(--radius); padding: 8px 10px; font-size: 12.5px; color: var(--amber-text); }

/* =========================== PROTOKOLL-AUSWAHL =========================== */
.protocol-choice{ display:flex; flex-direction:column; gap:10px; margin: 10px 0; }
.protocol-choice button{
  display:flex; align-items:center; gap:12px; text-align:left;
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px 16px;
  background: var(--paper); cursor:pointer; font-family: var(--font-body);
}
.protocol-choice button:hover{ border-color: var(--blue); background: var(--paper-raised); }
.protocol-choice .icon{ font-size: 22px; flex: none; }
.protocol-choice .title{ font-weight: 700; font-size: 14.5px; }
.protocol-choice .sub{ font-size: 12.5px; color: var(--steel); margin-top: 2px; }

/* =========================== ESP32-SENSOR =========================== */
.sensor-card{ background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.sensor-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.sensor-card__title{ font-weight: 700; font-size: 14px; }
.sensor-ip-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sensor-ip-label{ font-size: 13px; color: var(--steel); white-space: nowrap; }
.sensor-ip-input{ font-family: var(--font-mono); font-size: 13px; padding: 6px 10px; border:1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); width: 160px; }
.sensor-values{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top: 12px; }
.sensor-value-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.sensor-value-card .label{ display:block; font-family: var(--font-mono); font-size: 10px; letter-spacing:.08em; color: var(--steel); text-transform: uppercase; margin-bottom:6px; }
.sensor-value-card .value{ font-family: var(--font-mono); font-weight: 800; font-size: 26px; color: var(--ink); }
.sensor-value-card .unit{ font-size: 14px; font-weight: 400; color: var(--steel); margin-left: 2px; }
.sensor-error{ color: var(--signal); font-size: 13px; font-weight: 600; margin: 8px 0 0; }
.sensor-hint{ font-size: 12px; color: var(--steel); margin: 8px 0 0; line-height: 1.5; }

/* =========================== RETTUNGSKRÄFTE: ORT/ZEIT =========================== */
.scene-card{ background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; }
.scene-card__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.scene-card__data{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }
.scene-card__data strong{ color: var(--ink); }

/* =========================== NOTFALLSIMULATION =========================== */
.sim-card{ background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.sim-card__row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sim-card__hint{ font-size: 12px; color: var(--steel); flex: 1 1 200px; }
#btnSimHeartAttack:hover{ border-color: var(--signal); color: var(--signal); }

.bodymap-card{
  background: var(--paper-raised); border:1px solid rgba(224,32,58,0.35); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 18px; box-shadow: 0 0 0 1px rgba(224,32,58,0.08);
}
.bodymap-wrap{ display:flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.bodymap-svg{ width: 140px; height: 280px; flex: none; }
.bodymap-figure{ fill: var(--line-strong); stroke: none; }
.bodymap-limb{ fill: none; stroke: var(--line-strong); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.radiate-line{ stroke: var(--signal); stroke-width: 2; stroke-dasharray: 3 4; opacity: 0.7; }
.pain-marker{ fill: var(--signal); }
.pain-marker--primary{
  filter: drop-shadow(0 0 6px rgba(224,32,58,0.8));
  animation: pain-pulse 1.3s ease-in-out infinite;
}
.pain-marker--radiate{ opacity: 0.7; animation: pain-pulse 1.3s ease-in-out infinite; animation-delay: .25s; }
.pain-ripple{
  fill: none; stroke: var(--signal); stroke-width: 2;
  transform-box: fill-box; transform-origin: center;
  animation: pain-ripple 1.6s ease-out infinite;
}
@keyframes pain-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@keyframes pain-ripple{ 0%{ transform: scale(0.7); opacity: .8; } 100%{ transform: scale(2.6); opacity: 0; } }

.bodymap-legend{ flex: 1 1 220px; font-size: 13.5px; }
.bodymap-legend__row{ margin-bottom: 8px; line-height: 1.5; }
.bodymap-legend .dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; }
.bodymap-legend .dot--primary{ background: var(--signal); box-shadow: 0 0 6px rgba(224,32,58,0.7); }
.bodymap-legend .dot--radiate{ background: var(--signal); opacity: 0.6; }
.bodymap-alert{
  margin-top: 6px; background: var(--signal-soft); color: var(--signal-text);
  border-radius: var(--radius); padding: 10px 14px; font-weight: 700; font-size: 13px; line-height: 1.5;
}

/* =========================== RESPONSIVE =========================== */
@media (max-width: 600px){
  .idcard__row{ grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
  .vitals-grid{ grid-template-columns: repeat(2, 1fr); }
  .rescuer-summary{ grid-template-columns: 1fr; }
  .protocol-grid{ grid-template-columns: 1fr; }
  .topbar__actions .btn{ padding: 7px 10px; font-size: 12.5px; }
  .brand__product{ font-size: 14px; }
  .brand__logo{ height: 32px; }
  .chart-toolbar__hint{ display: none; }
}

@media (max-width: 380px){
  .idcard__row{ grid-template-columns: 1fr 1fr; }
  .idcard{ padding: 18px 16px 14px; }
  .page{ padding-left: 14px; padding-right: 14px; }
  .topbar__inner{ padding: 10px 14px; }
  .section, .edit-section, .rsum-card, .vital, .chart-card, .ecg-card{ padding-left: 13px; padding-right: 13px; }
  .datarow, .contactcard{ margin-left: -13px; margin-right: -13px; padding-left: 13px; padding-right: 13px; }
}