#glucosense-app{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#000;color:#fff;max-width:560px;margin:auto;padding:12px;border-radius:12px}
.mode-toggle button{background:#222;color:#fff;border:1px solid #444;padding:8px 10px;border-radius:8px;margin-right:6px}
.mode-toggle button.active{background:#0073aa}
#liveVideo{width:100%;border-radius:12px;border:1px solid #444;background:#000}
.guides{opacity:.8;font-size:.9em;margin:6px 0}
.indicators span{display:inline-block;margin-right:8px;font-size:.85em}
.controls button{margin:8px 6px 0 0;padding:8px 10px;border-radius:8px;border:1px solid #444;background:#222;color:#fff}
.controls button:disabled{opacity:.5}
.refline{margin-top:10px}
#refInput{background:#fff;color:#000;border-radius:8px;border:1px solid #888;padding:8px;width:100%;box-sizing:border-box}
#estTxt{font-size:1.1em;margin:8px 0 4px}
#metricsChart{margin-top:8px;background:#111;border-radius:12px;border:1px solid #333}

#roiCircle {
  position: absolute;
  border: 2px solid white;
  border-radius: 50%;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}
#livePane {
  position: relative;
}

#videoWrap{position:relative;width:100%;border-radius:12px;overflow:hidden}
#videoWrap > #liveVideo{display:block;width:100%;height:auto;border-radius:12px}
#videoWrap > #roiCircle{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:200px;
  height:200px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 6px rgba(0,0,0,.5);
  pointer-events:none;
  z-index:10;
}

#videoWrap{position:relative;border-radius:12px;overflow:hidden}
#videoWrap > #liveVideo{display:block;width:100%;height:auto;border-radius:12px}
#videoWrap > #roiCircle,
#livePane > #roiCircle{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:200px;
  height:200px;
  border-radius:50%;
  border:2px solid #fff;
  pointer-events:none;
  z-index:10;
}

#glucosense-app > h2{color:#568203}

/* v4.0.1 auto UI */
.gs2-bars{ margin-top:10px; }
.gs2-bar{ margin:10px 0; }
.gs2-barlabel{ font-size:14px; opacity:.9; margin-bottom:4px; }
.gs2-bars input[type=range]{ width:100%; }
.gs2-result{ margin-top:10px; font-size:18px; font-weight:600; }


#signalCanvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:20;mix-blend-mode:screen;opacity:.95;}


/* === Measurement history + trend (v4.0.7) === */
.gs2-history{ margin-top:12px; }
.gs2-panel-title{
  font-size:14px;
  opacity:.9;
  margin:8px 0 6px;
}
.gs2-tablewrap{
  border:1px solid #333;
  background:#0b0b0b;
  border-radius:12px;
  padding:8px;
  max-height:170px;
  overflow:auto;
}
.gs2-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.gs2-table thead th{
  text-align:left;
  font-weight:600;
  padding:6px 6px;
  border-bottom:1px solid #2a2a2a;
  position:sticky;
  top:0;
  background:#0b0b0b;
}
.gs2-table tbody td{
  padding:6px 6px;
  border-bottom:1px solid #171717;
  opacity:.95;
}
.gs2-table tbody tr:last-child td{ border-bottom:none; }
.gs2-chartwrap{
  border:1px solid #333;
  background:#0b0b0b;
  border-radius:12px;
  padding:10px;
}
#gs2TrendCanvas{ width:100%; height:220px; display:block; }
.gs2-note{ font-size:12px; opacity:.75; margin-top:8px; }


/* === Voice prompt (ask-once) v4.1.4 === */
.gs2-prompt{ margin-top:10px; }
.gs2-prompt[aria-hidden="true"]{ display:none; }
.gs2-prompt-inner{
  border:1px solid #333;
  background:#0b0b0b;
  border-radius:12px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.gs2-prompt-text{ font-size:13px; opacity:.9; }
.gs2-prompt-actions{ display:flex; gap:8px; }
.gs2-btn{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #444;
  background:#222;
  color:#fff;
  font-size:13px;
}
.gs2-btn:active{ transform:translateY(1px); }
.gs2-btn-ghost{ background:transparent; border-color:#333; opacity:.85; }

/* === TTS toast (robust fallback) v4.1.6 === */
.gs2-tts-toast{ display:none !important; 
  margin-top:10px;
  border:1px solid #333;
  background:#0b0b0b;
  border-radius:12px;
  padding:10px;
  font-size:13px;
  opacity:.92;
  display:none;
}
.gs2-tts-toast button{
  margin-left:10px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #444;
  background:#222;
  color:#fff;
  font-size:13px;
}

/* === Age band (initial calibration) v4.1.8 === */
.gs2-age{
  margin-top:10px;
  border:1px solid #333;
  background:#0b0b0b;
  border-radius:12px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.gs2-age-label{ font-size:13px; opacity:.9; }
.gs2-age-select{
  background:#111;
  color:#fff;
  border:1px solid #444;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
}


/* Fingertip video input source (v4.2.4) */
.gs2-inputsrc{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.gs2-inputsrc-label{font-weight:600;opacity:.9}
.gs2-inputsrc-select{background:#0f1f1b;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 10px}
.gs2-inputsrc-file{background:#0f1f1b;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 10px}


.gs2-inputsrc-force{background:#8fae2d;color:#0b1412;border:none;border-radius:10px;padding:8px 10px;font-weight:700;cursor:pointer;margin-left:8px;}
.gs2-inputsrc-force:active{transform:scale(0.99);}

.gs2-inputsrc-force.secondary{background:transparent;color:#8fae2d;border:1px solid rgba(143,174,45,0.45);}
.gs2-inputsrc-force.secondary:hover{filter:brightness(1.05);}