@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

:root{
  --bg:#F5F7FA; --surface:#FFFFFF; --navy:#0B1F3A; --navy-light:#14335C;
  --red:#D62839; --teal:#1B998B; --amber:#B87418; --slate:#5B6B79; --border:#E1E6EB;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--navy); font-family:'Inter',sans-serif; -webkit-tap-highlight-color:transparent; }
.pl-display{ font-family:'Space Grotesk',sans-serif; }
.pl-mono{ font-family:'JetBrains Mono',monospace; }
.wrap{ max-width:880px; margin:0 auto; padding:0 20px; }
.wrap-lg{ max-width:960px; margin:0 auto; padding:0 20px; }

.pl-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; }
.pl-btn-primary{ background:var(--navy); color:#fff; border:none; transition:background .15s ease; cursor:pointer; font-family:inherit; }
.pl-btn-primary:hover{ background:var(--navy-light); }
.pl-btn-primary:disabled{ opacity:.55; cursor:not-allowed; }
.pl-btn-danger{ background:var(--red); color:#fff; border:none; transition:background .15s ease; cursor:pointer; font-family:inherit; }
.pl-btn-danger:hover{ background:#B31E2C; }
.pl-btn-ghost{ background:transparent; color:var(--navy); border:1px solid var(--border); cursor:pointer; font-family:inherit; }
.pl-btn-ghost:hover{ background:#EEF1F4; }
.pl-input{ border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--navy); font-family:inherit; }
.pl-input:focus{ outline:2px solid var(--navy); outline-offset:1px; border-color:var(--navy); }
.pl-input-error{ border-color:var(--red) !important; }
.pl-badge-teal{ background:rgba(27,153,139,.12); color:var(--teal); }
.pl-badge-red{ background:rgba(214,40,57,.10); color:var(--red); }
.pl-badge-amber{ background:rgba(184,116,24,.12); color:var(--amber); }
.pl-badge-slate{ background:#EEF1F4; color:var(--slate); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--navy); outline-offset:2px;
}
a{ color:inherit; }
button{ font-size:inherit; }

.row{ display:flex; align-items:center; }
.col{ display:flex; flex-direction:column; }
.gap-1{ gap:4px; } .gap-1_5{ gap:6px; } .gap-2{ gap:8px; } .gap-3{ gap:12px; }
.justify-between{ justify-content:space-between; } .justify-center{ justify-content:center; }
.items-center{ align-items:center; }
.flex-wrap{ flex-wrap:wrap; }
.text-center{ text-align:center; }
.rounded-full{ border-radius:999px; }
.w-full{ width:100%; }

.ecg-track{ animation-name:ecgScroll; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes ecgScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.pl-pulse{ animation:plPulse 1.4s ease-in-out infinite; }
@keyframes plPulse{ 0%,100%{ opacity:1;} 50%{ opacity:.45;} }
.pl-spin{ animation:plSpin 1s linear infinite; }
@keyframes plSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .ecg-track, .pl-pulse, .pl-spin{ animation:none !important; }
}

.icon-btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px; border-radius:999px; }