/* Appearance: colors, layout, buttons, and responsive sizes. */

:root {
  --bg:#080f1d;
  --panel:#101d2d;
  --line:#24364b;
  --muted:#9aafc6;
  --text:#edf5ff;
  --mint:#60e6be;
  --amber:#ffc778;
  --red:#ff8799}
* {
  box-sizing:border-box}
body {
  margin:0;
  background:radial-gradient(ellipse at 80% 0,#193347 0,transparent 50%),var(--bg);
  color:var(--text);
  font:15px/1.55 system-ui,-apple-system,sans-serif;
  min-height:100vh}
button,a,input {
  font:inherit}
button {
  cursor:pointer;
  border:1px solid var(--line);
  color:var(--text);
  background:#18293d;
  border-radius:12px;
  padding:12px 18px;
  transition:.18s}
button:hover:not(:disabled) {
  border-color:var(--mint);
  transform:translateY(-2px)}
button:disabled {
  cursor:default;
  opacity:.65}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--amber);
  outline-offset:4px}
.primary {
  background:var(--mint);
  color:#062d28;
  font-weight:800;
  border:0}
.ghost {
  background:transparent}
.small {
  font-size:12px;
  padding:8px 12px}
a {
  color:var(--mint)}
header {
  border-bottom:1px solid var(--line);
  padding:20px max(24px,calc((100vw - 1260px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:#091421b8}
.brand {
  font-size:21px;
  letter-spacing:2px;
  font-weight:850}
.brand span {
  color:var(--mint)}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--mint);
  font-size:11px;
  font-weight:800}
.muted {
  color:var(--muted)}
main {
  max-width:1260px;
  margin:auto;
  padding:30px 24px}
h1 {
  font-size:clamp(36px,5vw,64px);
  line-height:1.05;
  letter-spacing:-2px;
  margin:20px 0}
h2 {
  font-size:27px;
  line-height:1.25;
  margin:10px 0 18px}
h3 {
  margin:0 0 10px}
p {
  margin:10px 0 18px}
.panel {
  background:linear-gradient(135deg,#142437,#101a2a);
  border:1px solid var(--line);
  border-radius:20px;
  padding:26px}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:50px;
  align-items:center;
  padding:32px 0}
.hero p {
  max-width:570px;
  font-size:17px}
.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:22px 0}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.chip {
  border:1px solid var(--line);
  border-radius:40px;
  padding:5px 10px;
  font-size:11px;
  color:var(--muted)}
.stats {
  display:flex;
  gap:30px;
  margin:28px 0}
.stat b {
  display:block;
  font-size:28px;
  color:var(--mint)}
.monitor {
  position:relative;
  overflow:hidden;
  background:#071b22;
  border:1px solid #295c5b;
  border-radius:20px;
  padding:24px;
  box-shadow:0 30px 100px #0d76632b}
.monitor svg {
  width:100%;
  height:120px;
  filter:drop-shadow(0 0 5px #60e6be)}
.trace {
  stroke-dasharray:1100;
  stroke-dashoffset:1100;
  animation:trace 4s linear infinite}
@keyframes trace {
  to {
  stroke-dashoffset:0}
}
.monitor-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px}
.monitor-grid b {
  font:32px ui-monospace,monospace;
  color:var(--mint)}
.monitor-grid small {
  display:block;
  color:var(--muted);
  font-size:10px}
.ward {
  display:grid;
  grid-template-columns:220px 1fr 260px;
  gap:20px;
  align-items:start}
.queue {
  display:grid;
  gap:9px}
.patient {
  padding:13px;
  border:1px solid var(--line);
  border-radius:12px;
  opacity:.6}
.patient.active {
  border-color:var(--mint);
  opacity:1;
  background:#16403950}
.patient.done {
  opacity:.8}
.patient small {
  display:block;
  color:var(--muted);
  font-size:11px}
.patient b {
  font-size:13px}
.steps {
  display:flex;
  gap:8px;
  margin:18px 0}
.step {
  flex:1;
  border-top:3px solid var(--line);
  padding-top:8px;
  font-size:10px;
  color:var(--muted)}
.step.on {
  border-color:var(--mint);
  color:var(--mint)}
.vitals {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:20px 0}
.vital {
  padding:12px 8px;
  background:#07111f;
  border-radius:10px;
  text-align:center}
.vital b {
  display:block;
  font:19px ui-monospace,monospace}
.vital small {
  font-size:10px;
  color:var(--muted)}
.finding {
  background:#193d4050;
  border-left:3px solid var(--mint);
  padding:14px 16px;
  margin:16px 0;
  font-size:14px}
.answers {
  display:grid;
  gap:10px}
.answer {
  display:flex;
  text-align:left;
  align-items:center;
  gap:12px;
  background:#142338;
  width:100%;
  padding:14px}
.key {
  flex:0 0 27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background:#ffffff0d;
  color:var(--muted);
  font-size:12px}
.answer.correct {
  border-color:var(--mint);
  background:#194739;
  opacity:1}
.answer.wrong {
  border-color:var(--red);
  background:#482637;
  opacity:1}
.feedback {
  margin-top:18px;
  padding:18px;
  border-radius:12px;
  background:#0a1826;
  border:1px solid var(--line)}
.feedback.good h3 {
  color:var(--mint)}
.feedback.bad h3 {
  color:var(--amber)}
.feedback p {
  font-size:14px}
.bar {
  height:8px;
  background:#243146;
  border-radius:20px;
  overflow:hidden;
  margin:10px 0}
.bar i {
  display:block;
  height:100%;
  background:var(--mint);
  transition:width .4s}
.big {
  font:36px ui-monospace,monospace}
.side-section {
  padding:18px 0;
  border-bottom:1px solid var(--line)}
.side-section:first-child {
  padding-top:0}
.side-section:last-child {
  border:0;
  padding-bottom:0}
.note {
  font-size:12px;
  color:var(--muted)}
.report-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px}
.report-row {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:13px 0;
  border-bottom:1px solid var(--line)}
details {
  margin-top:14px}
summary {
  cursor:pointer;
  color:var(--mint);
  font-size:13px}
.sources {
  margin-top:35px;
  border-top:1px solid var(--line);
  padding:22px 0}
.source-list {
  display:grid;
  gap:10px;
  padding:15px 0;
  font-size:13px}
footer {
  max-width:1260px;
  margin:auto;
  padding:10px 24px 25px;
  color:var(--muted);
  font-size:11px}
.toast {
  color:var(--amber);
  font-size:12px}
.pause {
  padding:55px;
  text-align:center}
.badge {
  display:inline-block;
  background:#ffc77818;
  color:var(--amber);
  padding:6px 12px;
  border-radius:30px;
  font-size:12px}
.report-title {
  max-width:750px}
.log {
  padding:12px;
  background:#07111f;
  border-radius:10px;
  font-size:12px;
  color:var(--muted);
  margin-top:14px}
@media(max-width:1050px) {
  .ward {
  grid-template-columns:180px 1fr}
.sidebar {
  grid-column:1/-1;
  display:flex;
  gap:28px}
.side-section {
  border:0;
  flex:1}
.hero {
  gap:20px}
}
@media(max-width:700px) {
  main {
  padding:20px 16px}
.hero,.ward,.report-grid {
  grid-template-columns:1fr}
.hero {
  padding:10px 0}
.queue {
  display:flex;
  overflow:auto}
.patient {
  min-width:125px}
.queue-title {
  display:none}
.sidebar {
  display:block}
.vitals {
  grid-template-columns:repeat(2,1fr)}
header {
  padding:16px}
.brand {
  font-size:16px}
.panel {
  padding:20px}
h1 {
  font-size:43px}
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
  animation:none!important;
  transition:none!important}
.trace {
  stroke-dashoffset:0}
}