:root{
  --bg:#0b1020;
  --panel:#0e1630;
  --panel2:#0b132a;
  --border:rgba(255,255,255,0.08);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.62);
  --accent:#57d6a5;
  --accent2:#7aa7ff;
  --danger:#ff5d7a;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#070b16,#0b1020);
  overflow:hidden;
}

#app{display:flex; height:100vh; width:100vw;}
#panel{
  width:380px; min-width:340px; max-width:440px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border-right:1px solid var(--border);
  padding:14px;
  overflow:auto;
}
#viewerWrap{flex:1; position:relative; background:#fff;}
#viewer{position:absolute; inset:0;}

.brand{padding:8px 6px 14px 6px;}
.title{font-weight:700; letter-spacing:0.2px; font-size:18px;}
.hint{margin-top:6px; color:var(--muted); font-size:12px; line-height:1.25}

.box{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
  box-shadow: var(--shadow);
  background:rgba(0,0,0,0.14);
}

label{display:block; font-size:12px; color:var(--muted); margin:8px 0 6px;}
input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  outline:none;
}
input:focus{border-color: rgba(87,214,165,0.6);}

.row{display:flex; gap:10px; margin-top:10px;}
button{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  cursor:pointer;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
button:hover{background:rgba(255,255,255,0.09); border-color:rgba(87,214,165,0.35);}
button:active{transform:scale(0.98);}
button:disabled{opacity:0.45; cursor:not-allowed;}

.filebtn{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.06);
  text-align:center;
  cursor:pointer;
  user-select:none;
}
.filebtn input{display:none;}

.sectionTitle{font-weight:650; margin-bottom:8px;}
.grid3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
}
.mode.active{
  border-color: rgba(122,167,255,0.7);
  background: rgba(122,167,255,0.12);
}

.info{font-size:12px; color:rgba(255,255,255,0.86); line-height:1.35; min-height:64px; white-space:pre-wrap;}
.logs{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  color:rgba(255,255,255,0.76);
  height:120px;
  overflow:auto;
  white-space:pre-wrap;
}
.logs .ok{color:rgba(87,214,165,0.95)}
.logs .warn{color:rgba(255,209,102,0.95)}
.logs .err{color:rgba(255,93,122,0.95)}
.dataset{font-size:12px; color:rgba(255,255,255,0.82); line-height:1.35; white-space:pre-wrap;}

.tooltip{
  position:absolute;
  z-index:20;
  pointer-events:none;
  background: rgba(0,0,0,0.70);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px;
  padding:10px 12px;
  max-width:420px;
  color:rgba(255,255,255,0.94);
  font-size:12px;
  box-shadow: var(--shadow);
  opacity:0;
  transform: translateY(6px);
  transition:none;
}
.tooltip.hidden{display:none;}
.tooltip .tTitle{font-weight:700; margin-bottom:6px;}
.tooltip table{width:100%; border-collapse:collapse; margin-top:6px; font-size:12px;}
.tooltip td{padding:2px 6px; vertical-align:top;}
.tooltip td.k{color:rgba(255,255,255,0.62); width:44%;}
.tooltip td.v{color:rgba(255,255,255,0.92);}
.ngl-tooltip{display:none !important;}

.loader{
  position:absolute; inset:0;
  background: rgba(6,10,22,0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.loader.hidden{display:none;}

.loaderInner{
  width:420px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  padding:18px;
  background: rgba(0,0,0,0.28);
  box-shadow: var(--shadow);
  text-align:center;
}
.loaderTitle{font-weight:700; font-size:18px; margin-bottom:12px;}
.heartWrap{display:flex; justify-content:center; margin:6px 0 10px;}
#heartSvg{
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
  transform-origin: 50% 60%;
  animation: beat 1.05s ease-in-out infinite;
}
@keyframes beat{
  0%{transform:scale(1.00)}
  12%{transform:scale(1.06)}
  24%{transform:scale(0.99)}
  36%{transform:scale(1.03)}
  48%{transform:scale(1.00)}
  100%{transform:scale(1.00)}
}
.heartShell{
  fill: rgba(255,255,255,0.05);
  stroke: rgba(255,255,255,0.22);
  stroke-width:2.2;
}
.heartGlow{
  fill:none;
  stroke: rgba(255,93,122,0.35);
  stroke-width:2.8;
  filter: drop-shadow(0 0 18px rgba(255,93,122,0.20));
}

#ecg{
  width:100%;
  border-radius:12px;
  background: rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.10);
}
.progressRow{
  margin-top:10px;
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
}
#progressText{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(87,214,165,0.95);
  font-size:16px;
}
.dots{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(87,214,165,0.85);
  font-size:16px;
  animation: twinkle 0.7s ease-in-out infinite;
}
@keyframes twinkle{
  0%{opacity:0.65}
  50%{opacity:1}
  100%{opacity:0.65}
}
.sub{margin-top:8px; color: rgba(255,255,255,0.75); font-size:12px;}

.fps{
  position:absolute;
  top:10px;
  right:12px;
  z-index:30;
  padding:6px 10px;
  border-radius:10px;
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px;
  pointer-events:none;
  box-shadow: var(--shadow);
}