/* ── Local Inter font (offline-safe) ────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter-300.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700.ttf') format('truetype');
}

    :root {
      --grey50:  #F8FAFC; --grey100: #F5F7FA; --grey200: #EFF1F5;
      --grey300: #E2E8F0; --grey400: #CBD5E1; --grey500: #64748B;
      --grey600: #475569; --grey700: #334155; --grey800: #1E293B;
      --grey900: #0F172A; --white: #FFFFFF;
      --brand-red: #E2132C;
      --success: #10B981; --success-bg: #EAF3F3;
      --warning: #F59E0B; --error: #DC2626; --info: #3B82F6;
      --card-shadow: 0 4px 10px rgba(100,116,139,0.2);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', sans-serif; background: #f0f0f0;
      display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
      min-height: 100vh; overflow: auto; padding: 40px 20px 80px;
    }
    .device-frame {
      width: 390px; height: 844px; background: var(--grey100);
      border-radius: 44px; overflow: hidden; position: relative;
      box-shadow: 0 0 0 12px #1a1a1a, 0 30px 80px rgba(0,0,0,0.8);
      display: flex; flex-direction: column;
    }
    .screen {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      opacity: 0; pointer-events: none; transition: opacity 0.3s ease; overflow: hidden;
    }
    .screen.active { opacity: 1; pointer-events: all; }

    /* Hide scrollbars globally across all screens */
    .device-frame *::-webkit-scrollbar { display: none; }
    .device-frame * { scrollbar-width: none; -ms-overflow-style: none; }

    /* Status bar */
    .status-bar {
      height: 44px; background: var(--white); display: flex; align-items: center;
      justify-content: space-between; padding: 0 16px;
      flex-shrink: 0; border-bottom: 1px solid var(--grey300); position: relative;
    }
    .status-bar .kiosk-badge {
      font-size: 11px; font-weight: 600; color: var(--grey500); letter-spacing: 0.08em;
    }
    .status-bar .device-pill {
      display: flex; align-items: center; gap: 4px;
      background: var(--success-bg); border: 1px solid rgba(16,185,129,0.25);
      border-radius: 20px; padding: 3px 8px; font-size: 10px; font-weight: 600; color: var(--success);
    }
    .status-bar .clinician-badge {
      font-size: 11px; font-weight: 600; color: var(--grey600);
      background: var(--grey200); border-radius: 20px; padding: 3px 10px;
    }
    /* App bar */
    .app-bar {
      background: var(--white); padding: 12px 16px;
      border-bottom: 1px solid var(--grey300); flex-shrink: 0;
      display: flex; align-items: center; gap: 8px;
    }
    .app-bar .title { font-size: 18px; font-weight: 600; color: #000; }
    .app-bar .subtitle { font-size: 12px; color: var(--grey600); margin-top: 1px; }
    .app-bar .back-btn {
      width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
      border-radius: 8px; cursor: pointer; color: var(--grey600); transition: background 0.15s;
    }
    .app-bar .back-btn:hover { background: var(--grey200); }
    .app-bar .spacer { width: 40px; }
    /* Scroll body */
    .scroll-body {
      flex: 1; min-height: 0; overflow-y: auto; padding: 16px;
      display: flex; flex-direction: column; gap: 12px; scrollbar-width: none;
      -webkit-overflow-scrolling: touch; touch-action: pan-y;
    }
    .scroll-body::-webkit-scrollbar { display: none; }
    /* Cards */
    .card { background: var(--white); border-radius: 12px; border: 1px solid var(--grey300); box-shadow: var(--card-shadow); padding: 16px; }
    .card-lg { padding: 20px; }
    /* ── Buttons ─────────────────────────────────────────── */
    .btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      border: none; border-radius: 10px; font-family: 'Inter', sans-serif;
      font-size: 16px; font-weight: 600; cursor: pointer; padding: 0 20px;
      transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
      -webkit-user-select: none; user-select: none; letter-spacing: 0.01em;
      position: relative; overflow: hidden;
    }

    /* Primary – slate gradient, more pronounced top-to-bottom spread */
    .btn-primary {
      height: 56px; width: 100%; color: var(--white);
      background: linear-gradient(180deg, #7A8BA0 0%, #4E6070 50%, #283748 100%);
      box-shadow: 0 2px 0 #1a2638, 0 4px 14px rgba(40,55,72,0.38);
      border: 1px solid #1a2638;
    }
    .btn-primary:hover  { filter: brightness(1.12); box-shadow: 0 2px 0 #1a2638, 0 6px 20px rgba(40,55,72,0.48); }
    .btn-primary:active { filter: brightness(0.88); box-shadow: 0 0px 0 #1a2638, 0 1px 4px rgba(40,55,72,0.2); transform: translateY(2px); }

    /* Outline – white card, subtle elevation */
    .btn-outline {
      height: 56px; background: var(--white); color: var(--grey700);
      border: 1px solid var(--grey300) !important;
      box-shadow: 0 1px 0 var(--grey400), 0 2px 6px rgba(100,116,139,0.12);
    }
    .btn-outline:hover  { filter: brightness(0.96); box-shadow: 0 1px 0 var(--grey400), 0 4px 10px rgba(100,116,139,0.2); }
    .btn-outline:active { filter: brightness(0.90); box-shadow: inset 0 1px 3px rgba(100,116,139,0.18); transform: translateY(1px); }

    /* Danger – red gradient */
    .btn-danger {
      height: 56px; width: 100%; color: var(--white);
      background: linear-gradient(180deg, #F87171 0%, #DC2626 50%, #991B1B 100%);
      box-shadow: 0 2px 0 #7f1d1d, 0 4px 14px rgba(153,27,27,0.38);
      border: 1px solid #7f1d1d;
    }
    .btn-danger:hover  { filter: brightness(1.12); box-shadow: 0 2px 0 #7f1d1d, 0 6px 20px rgba(153,27,27,0.48); }
    .btn-danger:active { filter: brightness(0.88); box-shadow: 0 0px 0 #7f1d1d, 0 1px 4px rgba(153,27,27,0.2); transform: translateY(2px); }

    .btn-row { display: flex; gap: 10px; }
    .btn-row .btn-outline { flex: 2; }
    .btn-row .btn-primary  { flex: 3; }

    /* Danger-outline – white with red border/text */
    .btn-outline-danger {
      height: 56px; background: #FEF2F2; color: var(--error);
      border: 1px solid rgba(220,38,38,0.3) !important;
      box-shadow: 0 1px 0 rgba(220,38,38,0.2), 0 2px 6px rgba(220,38,38,0.07);
    }
    .btn-outline-danger:hover  { filter: brightness(0.96); box-shadow: 0 1px 0 rgba(220,38,38,0.3), 0 4px 10px rgba(220,38,38,0.12); }
    .btn-outline-danger:active { filter: brightness(0.90); box-shadow: inset 0 1px 3px rgba(220,38,38,0.18); transform: translateY(1px); }
    /* Typography */
    .label { font-size: 12px; font-weight: 500; color: var(--grey500); text-transform: uppercase; letter-spacing: 0.06em; }
    .heading { font-size: 20px; font-weight: 700; color: #000; }
    .subheading { font-size: 16px; font-weight: 600; color: #000; }
    .body-text { font-size: 14px; color: var(--grey600); line-height: 1.5; }
    .small { font-size: 12px; color: var(--grey500); }
    /* Step indicator */
    .step-indicator { display: flex; gap: 6px; justify-content: center; padding: 10px 0 6px; }
    .step-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grey300); transition: background 0.2s, transform 0.2s; }
    .step-dot.active { background: var(--grey600); transform: scale(1.3); }
    .step-dot.done { background: var(--grey400); }
    /* Animations */
    @keyframes heartbeat { 0%,100%{transform:scale(1);} 14%{transform:scale(1.15);} 28%{transform:scale(1);} 42%{transform:scale(1.1);} 70%{transform:scale(1);} }
    .pulse-heart { animation: heartbeat 1.2s ease-in-out infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .spin { animation: spin 1.2s linear infinite; }
    @keyframes fadeIn { from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);} }
    .fade-in { animation: fadeIn 0.35s ease forwards; }
    @keyframes idlePulse { 0%,100%{transform:scale(1);opacity:0.7;} 50%{transform:scale(1.07);opacity:1;} }
    .idle-pulse { animation: idlePulse 2.2s ease-in-out infinite; }
    @keyframes scanRingOut { 0%{transform:scale(0.55);opacity:0.85;} 70%{opacity:0.25;} 100%{transform:scale(1.35);opacity:0;} }
    @keyframes sheenSweep { 0%{transform:translateX(-150%) skewX(-15deg);opacity:0;} 8%{opacity:1;} 32%{transform:translateX(260%) skewX(-15deg);opacity:0;} 100%{transform:translateX(260%) skewX(-15deg);opacity:0;} }
    #homeLinkArea { scrollbar-width: none; -ms-overflow-style: none; }
    #homeLinkArea::-webkit-scrollbar { display: none; }
    /* Signal bars */
    @keyframes signalPulse { 0%,100%{height:4px;} 50%{height:var(--h);} }
    .signal-bar { width: 4px; background: var(--success); border-radius: 2px; animation: signalPulse 0.8s ease-in-out infinite; }
    .signal-bar:nth-child(1){--h:8px;animation-delay:0s;} .signal-bar:nth-child(2){--h:14px;animation-delay:0.1s;}
    .signal-bar:nth-child(3){--h:20px;animation-delay:0.2s;} .signal-bar:nth-child(4){--h:12px;animation-delay:0.3s;}
    .signal-bar:nth-child(5){--h:18px;animation-delay:0.4s;} .signal-bar:nth-child(6){--h:10px;animation-delay:0.5s;}
    .signal-bar:nth-child(7){--h:16px;animation-delay:0.6s;} .signal-bar:nth-child(8){--h:8px; animation-delay:0.7s;}
    .signal-row { display:flex; align-items:flex-end; gap:3px; height:24px; justify-content:center; }
    /* Progress ring */
    /* Recording linear timer */
    .rec-timer-display { font-size:52px; font-weight:700; color:#000; letter-spacing:-1px; line-height:1; }
    .rec-timer-label   { font-size:12px; color:var(--grey500); margin-top:4px; }
    .rec-progress-track { width:100%; height:8px; background:var(--grey200); border-radius:4px; overflow:hidden; margin-top:16px; }
    .rec-progress-fill  { height:100%; width:0%; background:var(--grey700); border-radius:4px; transition:width 0.09s linear; }
    .device-frame.tablet .rec-timer-display { font-size:68px; }
    /* Device status bar */
    .ctag-bar {
      background:var(--grey100); border:none; border-radius:12px;
      padding:12px 16px; display:flex; align-items:center; gap:12px; margin-bottom:4px;
      box-shadow: 0 4px 10px rgba(100,116,139,0.2);
    }
    .ctag-bar .id { font-size:14px; font-weight:600; color:#000; }
    .ctag-bar .battery { font-size:14px; font-weight:600; color:#000; display:flex; align-items:center; gap:6px; margin-left:auto; }
    @keyframes notchPulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(220,38,38,0.5);} 50%{opacity:0.7;box-shadow:0 0 8px 4px rgba(220,38,38,0.3);} }
    /* Banners */
    .banner { border-radius:12px; padding:14px; display:flex; align-items:center; gap:12px; }
    .banner-success { background:var(--success-bg); border:1px solid rgba(16,185,129,0.3); }
    .banner-warning { background:#FFF9EB; border:1px solid rgba(245,158,11,0.35); }
    .banner-info    { background:#EFF6FF; border:1px solid rgba(59,130,246,0.35); }
    .banner-error   { background:#FEF2F2; border:1px solid rgba(220,38,38,0.3); }
    .banner-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .banner-icon-success { background:var(--success); }
    /* PCWP scale */
    .pcwp-scale-track { height:10px; border-radius:6px; position:relative; background:linear-gradient(to right,#10B981 0%,#10B981 50%,#F59E0B 60%,#DC2626 80%,#DC2626 100%); margin-bottom:6px; }
    .pcwp-scale-marker { position:absolute; top:-4px; width:18px; height:18px; border-radius:50%; background:var(--white); border:3px solid var(--grey700); transform:translateX(-50%); }
    .pcwp-scale-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--grey500); }
    /* Result numbers */
    .result-big { font-size:64px; font-weight:300; line-height:1; color:var(--success); }
    .result-unit { font-size:28px; font-weight:500; color:#000; }
    .status-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600; }
    .status-badge-normal   { background:rgba(16,185,129,0.15); color:var(--success); }
    .status-badge-elevated { background:rgba(245,158,11,0.15); color:var(--warning); }
    /* Gender toggle */
    .gender-toggle { display:flex; gap:10px; }
    .gender-btn {
      flex:1; height:72px; border-radius:12px; border:2px solid var(--grey300);
      background:var(--white); display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:6px; cursor:pointer; transition:border-color 0.15s,background 0.15s;
      font-size:13px; font-weight:500; color:var(--grey600);
    }
    .gender-btn.selected { border-color:var(--grey600); background:var(--grey200); }
    /* Number pad */
    .numpad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .numpad-key {
      height:60px; border-radius:12px; background:var(--white); border:1.5px solid var(--grey300);
      font-size:22px; font-weight:500; color:var(--grey700);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:background 0.12s,transform 0.1s; -webkit-user-select:none; user-select:none;
    }
    .numpad-key:active { background:var(--grey200); transform:scale(0.95); }
    .numpad-key.wide { grid-column:span 2; font-size:18px; }
    .numpad-display {
      background:var(--grey50); border:1.5px solid var(--grey300); border-radius:10px;
      padding:14px 16px; font-size:28px; font-weight:600; color:var(--grey800);
      text-align:center; letter-spacing:0.12em; min-height:56px; position:relative;
    }
    .numpad-display .placeholder { font-size:16px; font-weight:400; color:var(--grey400); letter-spacing:normal; }
    @keyframes blink { 0%,100%{opacity:1;}50%{opacity:0;} }
    .cursor { animation:blink 1s step-end infinite; }

    /* ── IDLE SCREEN ─────────────────────────────────────── */
    #screen-idle { background:linear-gradient(160deg,var(--grey800) 0%,var(--grey900) 100%); }
    #screen-idle .idle-content {
      flex:1; display:flex; flex-direction:column; align-items:center;
      justify-content:center; padding:32px 24px; gap:20px;
    }
    .logo-ring { width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; }
    .logo-ring-inner { width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; }
    .tap-area { margin-top:20px; text-align:center; border:1.5px dashed rgba(255,255,255,0.2); border-radius:20px; padding:22px 36px; cursor:pointer; transition:background 0.2s; }
    .tap-area:hover { background:rgba(255,255,255,0.05); }
    .tap-text { font-size:17px; font-weight:600; color:rgba(255,255,255,0.9); }
    .tap-sub  { font-size:13px; color:rgba(255,255,255,0.45); margin-top:6px; }
    .idle-footer { padding:16px 24px; text-align:center; font-size:11px; color:rgba(255,255,255,0.25); letter-spacing:0.05em; }

    /* ── CLINICIAN LIST ─────────────────────────────────── */
    .clinician-list { display:flex; flex-direction:column; gap:8px; }
    .clinician-item {
      display:flex; align-items:center; gap:14px;
      background:var(--white); border:1.5px solid var(--grey300); border-radius:12px;
      padding:14px 16px; cursor:pointer; transition:border-color 0.15s,background 0.15s;
      -webkit-user-select:none; user-select:none;
    }
    .clinician-item:hover { border-color:var(--grey500); background:var(--grey50); }
    .clinician-item.selected { border-color:var(--grey700); background:var(--grey200); }
    .clinician-avatar {
      width:40px; height:40px; border-radius:50%; background:var(--grey200);
      display:flex; align-items:center; justify-content:center;
      font-size:14px; font-weight:700; color:var(--grey600); flex-shrink:0;
    }
    .clinician-name  { font-size:15px; font-weight:600; color:var(--grey800); }
    .clinician-role  { font-size:12px; color:var(--grey500); margin-top:1px; }
    .clinician-arrow { margin-left:auto; color:var(--grey400); }

    /* ── PIN ENTRY (inline, not overlay) ────────────────── */
    .pin-dots { display:flex; gap:14px; justify-content:center; margin:14px 0; }
    .pin-dot { width:14px; height:14px; border-radius:50%; background:var(--grey300); transition:background 0.15s; }
    .pin-dot.filled { background:var(--grey700); }
    .pin-numpad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .pin-key {
      height:56px; border-radius:10px; background:var(--white); border:1.5px solid var(--grey300);
      font-size:20px; font-weight:500; color:var(--grey700); cursor:pointer;
      display:flex; align-items:center; justify-content:center; transition:background 0.1s;
      -webkit-user-select:none; user-select:none;
    }
    .pin-key:active { background:var(--grey300); }

    /* ── COMPLETE SCREEN ─────────────────────────────────── */
    #screen-complete .complete-content {
      flex:1; display:flex; flex-direction:column; align-items:center;
      justify-content:center; padding:32px 24px; gap:16px; text-align:center;
    }
    .check-ring {
      width:100px; height:100px; border-radius:50%;
      background:var(--success-bg); border:3px solid rgba(16,185,129,0.25);
      display:flex; align-items:center; justify-content:center;
    }
    /* Demo label */
    .demo-title {
      position:fixed; top:20px; left:50%; transform:translateX(-50%);
      background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.35);
      font-family:'Inter',sans-serif; font-size:12px; padding:6px 16px;
      border-radius:20px; letter-spacing:0.05em; white-space:nowrap;
    }
    .demo-label {
      position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
      background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.4);
      font-family:'Inter',sans-serif; font-size:11px; padding:6px 14px;
      border-radius:20px; letter-spacing:0.06em; pointer-events:none;
    }

    /* ── VIEW TOGGLE ──────────────────────────────────────── */
    .view-toggle {
      display:flex; gap:6px; justify-content:center; margin-top:20px;
      background:#1a1a1a; border-radius:20px; padding:4px;
      width:fit-content; margin-left:auto; margin-right:auto;
    }
    .toggle-btn {
      font-family:'Inter',sans-serif; font-size:12px; font-weight:500;
      padding:6px 16px; border-radius:16px; border:none; cursor:pointer;
      color:rgba(255,255,255,0.5); background:transparent; transition:all 0.2s;
      letter-spacing:0.03em;
    }
    .toggle-btn.active { background:rgba(255,255,255,0.18); color:#fff; }

    /* ── TABLET OVERRIDES ─────────────────────────────────── */
    .device-frame.tablet {
      width:768px; height:1024px; border-radius:20px;
    }
    .device-frame.tablet.tablet-11 {
      width:834px; height:1194px;
    }
    .device-frame.tablet .status-bar  { height:54px; }
    .device-frame.tablet .app-bar     { padding-left:24px; padding-right:24px; }
    .device-frame.tablet .scroll-body { padding:24px; gap:16px; }
    .device-frame.tablet .card        { padding:24px; }
    .device-frame.tablet .btn         { height:64px; font-size:18px; }
    .device-frame.tablet .numpad-key  { height:88px; font-size:26px; }
    .device-frame.tablet .app-bar .title    { font-size:26px; font-weight:700; }
    .device-frame.tablet .app-bar .subtitle { font-size:15px; }
    .device-frame.tablet .heading     { font-size:26px; }
    .device-frame.tablet .subheading  { font-size:20px; }
    .device-frame.tablet .body-text   { font-size:16px; }
    .device-frame.tablet .logo-ring   { width:160px; height:160px; }
    .device-frame.tablet .logo-ring-inner { width:120px; height:120px; }
    .device-frame.tablet .tap-area    { padding:30px 48px; }
    .device-frame.tablet .tap-text    { font-size:20px; }
    .device-frame.tablet #placementBase,
    .device-frame.tablet #placementDevice { }
    /* Make placement diagram taller */
    .device-frame.tablet [style*="height:280px"] { }
    .device-frame.tablet .step-dot    { width:9px; height:9px; }
    .device-frame.tablet .ctag-bar    { padding:14px 20px; }
    .device-frame.tablet .ctag-bar .id,
    .device-frame.tablet .ctag-bar .battery { font-size:16px; }
    .device-frame.tablet .banner      { padding:18px; }
    .device-frame.tablet .numpad-display { font-size:36px; padding:18px 20px; }
    .device-frame.tablet .pin-key     { height:70px; font-size:22px; }
    .device-frame.tablet .gender-btn  { height:96px; font-size:15px; }
    .device-frame.tablet .result-big  { font-size:80px; }
    .device-frame.tablet .result-unit { font-size:36px; }

    /* ── Tier 1 tablet text scale — fixes all screens globally ── */
    .device-frame.tablet .kiosk-badge      { font-size:15px; letter-spacing:0.07em; }
    .device-frame.tablet .device-pill      { font-size:13px; padding:4px 12px; gap:6px; }
    .device-frame.tablet .device-pill svg  { width:10px; height:10px; }
    .device-frame.tablet .label            { font-size:15px; }
    .device-frame.tablet .small            { font-size:14px; }
    .device-frame.tablet .clinician-badge  { font-size:14px; padding:4px 12px; }

    /* ── Virtual keyboard (tablet soft keyboard simulation) ─ */
    .vkb {
      position: absolute; bottom: 0; left: 0; right: 0; z-index: 200;
      background: #cbd5e1; border-top: 1px solid #94a3b8;
      padding: 8px 6px 16px; transform: translateY(100%);
      transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
      user-select: none;
    }
    .vkb.visible { transform: translateY(0); }
    .vkb-row { display: flex; justify-content: center; gap: 5px; margin-bottom: 5px; }
    .vkb-key {
      background: #fff; border: none; border-radius: 5px; cursor: pointer;
      height: 40px; min-width: 30px; flex: 1; max-width: 38px;
      font-size: 15px; font-family: Inter, sans-serif; font-weight: 500;
      color: #1a1a1a; box-shadow: 0 1px 0 1px #94a3b8;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.08s;
    }
    .vkb-key:active, .vkb-key.vkb-pressed { background: #e2e8f0; }
    .vkb-key.vkb-action {
      background: #94a3b8; color: #1a1a1a; font-size: 12px; font-weight: 600;
      max-width: none; min-width: 44px; flex: 1.5;
    }
    .vkb-key.vkb-space { max-width: 240px; flex: 5; font-size: 13px; color: #64748b; }
    .vkb-key.vkb-return {
      background: #475569; color: #fff; font-size: 12px; font-weight: 600;
      max-width: none; min-width: 80px; flex: 2.5;
    }
    .device-frame.tablet .vkb-key   { height: 46px; font-size: 17px; max-width: 58px; }
    .device-frame.tablet .vkb-key.vkb-action  { min-width: 64px; }
    .device-frame.tablet .vkb-key.vkb-space   { max-width: 320px; }
    .device-frame.tablet .vkb-key.vkb-return  { min-width: 100px; }

    /* ── Patient search input ─────────────────────────────── */
    .search-wrap {
      display:flex; align-items:center; gap:10px;
      background:var(--white); border:1.5px solid var(--grey300); border-radius:12px;
      padding:12px 14px; transition:border-color 0.15s;
    }
    .search-wrap:focus-within { border-color:var(--grey600); }
    .search-wrap input {
      flex:1; border:none; outline:none; font-family:'Inter',sans-serif;
      font-size:16px; color:var(--grey800); background:transparent;
    }
    .search-wrap input::placeholder { color:var(--grey400); }
    .search-clear {
      width:24px; height:24px; border-radius:50%; background:var(--grey300);
      border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
      font-size:14px; color:var(--grey600); flex-shrink:0; transition:background 0.15s;
    }
    .search-clear:hover { background:var(--grey400); }
    /* Result section headers */
    .results-section-label {
      display:flex; align-items:center; gap:8px; padding:4px 0 8px;
    }
    .results-section-label span { font-size:11px; font-weight:600; letter-spacing:0.07em; color:var(--grey500); text-transform:uppercase; }
    .results-source-pill {
      font-size:10px; font-weight:600; padding:2px 8px; border-radius:10px;
    }
    .source-emr { background:rgba(59,130,246,0.12); color:#1E40AF; }
    /* Patient list items */
    .emr-patient-item {
      display:flex; align-items:center; gap:14px;
      background:var(--white); border:1.5px solid var(--grey300); border-radius:12px;
      padding:16px; cursor:pointer; transition:border-color 0.15s,background 0.15s;
    }
    .emr-patient-item:hover { border-color:var(--grey500); background:var(--grey50); }
    .emr-patient-item.selected { border-color:var(--success); background:rgba(16,185,129,0.05); }
    .emr-avatar {
      width:44px; height:44px; border-radius:50%; background:var(--grey200);
      display:flex; align-items:center; justify-content:center;
      font-size:14px; font-weight:700; color:var(--grey600); flex-shrink:0;
    }
    .emr-patient-name  { font-size:15px; font-weight:600; color:var(--grey800); }
    .emr-patient-meta  { font-size:12px; color:var(--grey500); margin-top:2px; }
    /* Loading spinner row */
    .search-loading-row {
      display:flex; align-items:center; gap:10px;
      padding:12px 4px; color:var(--grey500); font-size:13px;
    }

    /* ── Mode badge on idle screen ────────────────────────── */
    .mode-badge {
      display:inline-flex; align-items:center; gap:6px;
      padding:5px 12px; border-radius:20px; font-size:11px; font-weight:600;
      letter-spacing:0.05em;
    }
    .mode-badge-emr        { background:rgba(59,130,246,0.15); color:#93C5FD; border:1px solid rgba(59,130,246,0.25); }
    .mode-badge-standalone { background:rgba(245,158,11,0.15);  color:#FCD34D; border:1px solid rgba(245,158,11,0.25); }
    .mode-badge-episode    { background:rgba(16,185,129,0.18);  color:#6EE7B7; border:1px solid rgba(16,185,129,0.3); }
    /* Active CardioTag cards */
    .active-tag-item {
      display:flex; align-items:flex-start; gap:14px; padding:16px;
      background:var(--white); border-radius:12px; border:1.5px solid var(--grey200);
      transition:border-color 0.15s;
    }
    .active-tag-item.connected {
      border-color:rgba(16,185,129,0.5); background:rgba(16,185,129,0.03);
    }
    .active-tag-badge {
      display:inline-flex; align-items:center; gap:5px;
      font-size:11px; font-weight:600; padding:3px 8px; border-radius:20px;
    }
    .active-tag-badge.conn  { background:rgba(16,185,129,0.12); color:var(--success); }
    .active-tag-badge.disc  { background:var(--grey200); color:var(--grey500); }
    .hub-action-link {
      background:none; border:none; font-family:Inter,sans-serif; cursor:pointer;
      font-size:13px; font-weight:500; padding:4px 0; text-decoration:underline;
      text-underline-offset:2px;
    }