/* CS Agritech @26 — the phone microscope.
   Black stage, because a specimen is judged against black; paper below,
   because a measurement is read like a note. Gold only on the capture ring. */

.sc {
  --ink: #14261f;
  --gold: #C9A227;
  padding: 0 0 24px;
}

.sc__head {
  padding: 18px 18px 14px;
  background:
    radial-gradient(120% 90% at 85% -20%, rgba(201,162,39,.18), transparent 60%),
    linear-gradient(180deg, #0B3D2E 0%, #0A2E23 100%);
  color: #F3EFE2;
}
.sc__kick {
  font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em; text-transform: uppercase; color: #9FBFAE;
}
.sc__title { margin: 6px 0 5px; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
.sc__lead { margin: 0; font-size: 13px; line-height: 1.5; color: #D8E3DA; max-width: 46em; }
.sc__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sc__chip {
  font-size: 11.5px; text-decoration: none; color: #14261f; background: var(--gold);
  padding: 7px 11px; border-radius: 999px; font-weight: 650;
}
.sc__chip--quiet { background: rgba(255,255,255,.1); color: #D8E3DA; font-weight: 500; }

/* ---- stage --------------------------------------------------------- */
.sc-stage {
  position: relative; margin: 14px 12px 0; border-radius: 18px; overflow: hidden;
  background: #05100C; aspect-ratio: 4 / 3;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.sc-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-stage.is-blind video { display: none; }
.sc-stage__frame i {
  position: absolute; width: 22px; height: 22px;
  border: 2px solid rgba(201,162,39,.85); border-radius: 3px;
}
.sc-stage__frame i:nth-child(1) { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.sc-stage__frame i:nth-child(2) { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.sc-stage__frame i:nth-child(3) { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.sc-stage__frame i:nth-child(4) { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.sc-stage__hint {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  font-size: 11px; line-height: 1.4; color: #C9D6CD;
  background: rgba(5,16,12,.55); padding: 7px 9px; border-radius: 8px;
}

/* ---- capture bar --------------------------------------------------- */
.sc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 4px; }
.sc-shoot {
  width: 66px; height: 66px; border-radius: 50%; border: 3px solid var(--gold);
  background: transparent; display: grid; place-items: center; padding: 0;
}
.sc-shoot span { width: 50px; height: 50px; border-radius: 50%; background: var(--gold); display: block; }
.sc-shoot:active span { transform: scale(.94); }
.sc-bar__side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.sc-mini {
  border: 1px solid #D8D2C0; background: #fff; color: var(--ink);
  font-size: 12px; padding: 7px 11px; border-radius: 9px; font-weight: 600;
}
.sc-mini.is-on { background: var(--gold); border-color: var(--gold); }
.sc-zoom { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #6B7A72; }
.sc-zoom input { width: 108px; }

/* ---- calibration --------------------------------------------------- */
.sc-cal {
  margin: 14px 12px 0; padding: 14px 14px 12px; background: #fff;
  border: 1px solid #E7E1D0; border-radius: 14px;
}
.sc-cal__row { display: flex; align-items: center; gap: 10px; }
.sc-cal__row h2 { margin: 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #6B7A72; flex: 1; }
.sc-cal__state { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #7A5720; background: #FBF3E0; border: 1px solid #EFDFB8; border-radius: 9px; padding: 9px 10px; }
.sc-cal__state.is-set { color: #14513C; background: #EAF3ED; border-color: #CBE0D4; }
.sc-link { border: 0; background: none; color: #6B7A72; font-size: 12px; text-decoration: underline; }
.sc-field { display: block; margin-top: 10px; font-size: 12px; color: #4B5B51; }
.sc-field select, .sc-field input[type="number"], .sc-field input[type="text"] {
  margin-top: 4px; width: 100%; padding: 8px 9px; border: 1px solid #D8D2C0;
  border-radius: 9px; font-size: 13px; background: #FDFBF4; color: var(--ink);
}
.sc-field--inline { display: flex; align-items: center; gap: 7px; margin: 0; white-space: nowrap; }
.sc-field--inline select, .sc-field--inline input[type="number"] { width: auto; margin: 0; }

/* ---- shot ---------------------------------------------------------- */
.sc-shot { margin: 14px 12px 0; }
.sc-shot canvas { width: 100%; display: block; border-radius: 12px; background: #05100C; }
.sc-read { margin: 8px 0 0; font-size: 13.5px; color: #14513C; }
.sc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.sc-btn {
  border: 1px solid #CFC8B4; background: #fff; color: var(--ink);
  font-size: 12.5px; font-weight: 650; padding: 9px 13px; border-radius: 10px;
}
.sc-btn:disabled { opacity: .45; }
.sc-btn--primary { background: #0B3D2E; border-color: #0B3D2E; color: #F3EFE2; }
.sc-count-box { margin-top: 12px; padding: 12px; background: #fff; border: 1px solid #E7E1D0; border-radius: 12px; }
.sc-count-box__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-count { margin: 10px 0 0; font-size: 13px; color: var(--ink); line-height: 1.5; }
.sc-count__note { display: block; margin-top: 4px; font-size: 11.5px; color: #6B7A72; }

/* ---- result + history ---------------------------------------------- */
.sc-result { margin: 14px 12px 0; padding: 13px; background: #fff; border: 1px solid #E7E1D0; border-radius: 14px; }
.sc-field--full input { width: 100%; }
.sc-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.sc-acts .sc-btn { width: 100%; }

.sc-hist { margin: 14px 12px 0; }
.sc-hist h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #6B7A72; }
.sc-hist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-hist__i { margin: 0; }
.sc-hist__i img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; display: block; background: #05100C; }
.sc-hist__i figcaption { font-size: 10.5px; color: #6B7A72; margin-top: 3px; }

.sc-note {
  margin: 16px 14px 0; padding: 12px 13px; border-radius: 12px;
  background: #FBF7EC; border: 1px solid #EADFC4; color: #4B5B51;
  font-size: 12px; line-height: 1.55;
}
.sc-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: #14261f; color: #F3EFE2; font-size: 12.5px; padding: 9px 14px;
  border-radius: 999px; z-index: 90; max-width: 86vw; text-align: center;
}