:root{
  --bg: #f4f8fc;
  --bg2: #eef4fb;
  --card: rgba(255,255,255,.88);
  --card-strong: rgba(255,255,255,.96);
  --text: #18324a;
  --muted: #6b8298;
  --line: rgba(107,130,152,.22);
  --line-strong: rgba(74,112,145,.32);
  --btn: #ffffff;
  --btn2: #edf5ff;
  --good: #11a36a;
  --bad: #d84d6a;
  --warn: #c79211;
  --primary: #3f87c5;
  --primary-soft: rgba(63,135,197,.12);
  --shadow: 0 16px 40px rgba(31,61,93,.10);
  --shadow-sm: 0 8px 20px rgba(31,61,93,.08);
}

*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(108, 170, 224, .18), transparent 55%),
    radial-gradient(900px 520px at 100% 0%, rgba(120, 201, 184, .12), transparent 50%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.topbar{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand{ display:flex; gap:14px; align-items:center; }
.dot{
  width: 12px; height: 12px;
  background: linear-gradient(135deg, #78c9b8, var(--primary));
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(63,135,197,.12);
}
.title{ font-weight: 800; letter-spacing:.2px; font-size: 20px; }
.subtitle{ color: var(--muted); font-size: 13px; margin-top: 3px; }
.status{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; }

.pill,
.stepPill{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-sm);
  font-variant-numeric: tabular-nums;
}

.layout,
.adminWrap{
  display:grid;
  grid-template-columns: minmax(520px, 1.45fr) minmax(320px, 1fr);
  gap: 18px;
  padding: 20px;
  max-width: 1280px;
  margin: 0 auto;
}

.adminWrap{
  grid-template-columns: 1fr;
  max-width: 1220px;
}

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
}

.card{
  background: linear-gradient(180deg, var(--card-strong), var(--card));
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 24px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.stage,
.panel,
.adminCard{ padding: 18px; }

.stageHead,
.panelHead{
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  gap:12px;
  padding: 6px 4px 14px;
}
.kicker{ color: var(--muted); font-size: 12px; }
.stageTitle,
.panelTitle{ font-size: 28px; font-weight: 800; margin-top: 4px; line-height: 1.1; }
.panelTitle{ font-size: 22px; }

.mini{
  background: linear-gradient(180deg, #f8fbff, #eef4fb);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  min-width: 190px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.miniLabel{ color: var(--muted); font-size: 12px; }
.miniValue{ margin-top: 6px; font-weight: 800; font-size: 18px; }

.canvasWrap{
  border: 1px solid rgba(170,194,215,.45);
  border-radius: 22px;
  overflow:hidden;
  background: #dfe7ef;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}

#toothSvg{ width: 100%; height: auto; display:block; }

.controlsRow{
  display:flex;
  gap:12px;
  justify-content: space-between;
  align-items:center;
  margin-top: 14px;
  padding: 0 4px 2px;
}

.rotation .label{ color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.rotBtns{ display:flex; align-items:center; gap:10px; }
.rotValue{
  min-width: 64px;
  text-align:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.86);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--line);
  background: var(--btn);
  color: var(--text);
  text-decoration:none;
  padding: 11px 14px;
  border-radius: 14px;
  cursor: pointer;
  user-select:none;
  transition: .18s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover{
  background: var(--btn2);
  transform: translateY(-1px);
}
.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.btn.primary{
  background: linear-gradient(180deg, #5da4df, var(--primary));
  color: #fff;
  border-color: rgba(50,117,175,.45);
}
.btn.primary:hover{ background: linear-gradient(180deg, #68ace5, #3275af); }
.btn.ghost{ background: rgba(255,255,255,.8); }

.stepBox,
.feedback,
.tableWrap{
  border: 1px solid rgba(170,194,215,.42);
  background: linear-gradient(180deg, #ffffff, #f6faff);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.stepBox{ padding: 16px; }
.stepName{ font-weight: 800; font-size: 18px; }
.stepDesc{ margin-top: 8px; color: var(--muted); line-height: 1.6; }
.stepRule{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(107,130,152,.28);
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
}

.toolGrid{
  display:grid;
  gap: 12px;
  margin-top: 14px;
}

.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.instrumentTray{
  position:relative;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(84,168,188,.34);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(180deg, #bfe8ed, #9dd7df);
  background-size: 16px 16px, 16px 16px, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), var(--shadow-sm);
}

.chairSideTools{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(113,132,148,.28);
  border-radius: 8px;
  background: linear-gradient(180deg, #f7fafc, #e8eef4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), var(--shadow-sm);
}

.toolBtn{
  position:relative;
  min-width:0;
  border: 1px solid rgba(120,152,173,.34);
  color: var(--text);
  cursor:pointer;
  user-select:none;
  appearance: none;
  -webkit-appearance: none;
  transition: .18s ease;
}

.instrumentBtn{
  display:grid;
  place-items:center;
  border-radius: 8px;
  overflow:hidden;
}
.trayTool{
  aspect-ratio: 1.03;
  padding: 7px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 7px 18px rgba(40,83,103,.14);
}
.chairTool{
  aspect-ratio: 1.15;
  padding: 8px;
  background: linear-gradient(180deg, #ffffff, #f2f6fa);
  box-shadow: 0 5px 14px rgba(31,61,93,.08);
}
.toolBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(63,135,197,.5);
  box-shadow: 0 10px 22px rgba(31,61,93,.13);
}
.toolBtn.active{
  outline: 3px solid rgba(63,135,197,.26);
  border-color: rgba(63,135,197,.72);
  background: #f5fbff;
}
.toolBtn.active::after{
  content:"";
  position:absolute;
  inset:5px;
  border: 2px solid rgba(17,163,106,.72);
  border-radius: 7px;
  pointer-events:none;
}
.toolIndex{
  position:absolute;
  left:6px;
  top:6px;
  z-index:2;
  min-width: 25px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(21,47,65,.72);
  color:#fff;
  font-size: 11px;
  line-height:1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.instrumentPhoto{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  border-radius: 6px;
  background: #fff;
  overflow:hidden;
}
.instrumentPhoto img{
  width:100%;
  height:100%;
  display:block;
  object-position:center;
}
.duoPhoto{
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
}
.duoPhoto img{
  min-width:0;
  border-radius: 5px;
  background:#fff;
  object-fit: contain;
}

.chairIcon{
  position:relative;
  display:block;
  width:100%;
  height:100%;
}
.tubeArc{
  position:absolute;
  left: 12%;
  top: 24%;
  width: 72%;
  height: 48%;
  border: 9px solid rgba(70,126,150,.78);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(22deg);
}
.suctionTipIcon{
  position:absolute;
  right: 12%;
  bottom: 19%;
  width: 43%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #315d72, #6fb3c8);
  transform: rotate(-31deg);
}
.chairPulseIcon{
  position:absolute;
  right: 22%;
  bottom: 28%;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(70,176,202,.74);
  border-radius: 50%;
  animation: suctionPulse 1.15s ease-out infinite;
}
.syringeBody{
  position:absolute;
  left: 18%;
  top: 29%;
  width: 57%;
  height: 21px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f5f8fb, #b8c4cd);
  border: 1px solid rgba(100,118,132,.36);
  transform: rotate(-25deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.syringeTip{
  position:absolute;
  right: 19%;
  top: 31%;
  width: 29%;
  height: 6px;
  border-radius: 999px;
  background: #687a88;
  transform: rotate(-25deg);
}
.waterBadge,
.airBadge{
  position:absolute;
  right: 18%;
  bottom: 18%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  box-shadow: 0 4px 12px rgba(31,61,93,.12);
}
.waterBadge::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 5px;
  width: 12px;
  height: 17px;
  border-radius: 9px 9px 10px 10px;
  background: #48a8d8;
  transform: rotate(45deg);
}
.airBadge::before,
.airBadge::after{
  content:"";
  position:absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  border-radius: 999px;
  background: #a7b5c2;
}
.airBadge::before{ top: 9px; box-shadow: 0 6px 0 #a7b5c2; }
.airBadge::after{ top: 21px; width: 11px; left: 9px; }
.handpieceBody{
  position:absolute;
  left: 19%;
  top: 32%;
  width: 56%;
  height: 24px;
  border-radius: 999px 10px 10px 999px;
  background: linear-gradient(180deg, #edf2f6, #9eabb7);
  border: 1px solid rgba(91,107,120,.44);
  transform: rotate(-35deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.handpieceNeck{
  position:absolute;
  right: 19%;
  top: 22%;
  width: 32%;
  height: 8px;
  border-radius: 999px;
  background: #8796a2;
  transform: rotate(-35deg);
}
.prophyCupIcon{
  position:absolute;
  right: 16%;
  top: 15%;
  width: 22px;
  height: 18px;
  border-radius: 4px 4px 11px 11px;
  background: linear-gradient(180deg, #efe3c9, #bba077);
  transform: rotate(-35deg);
}
.genericToolIcon{
  position:absolute;
  inset: 22%;
  border-radius: 999px;
  background: #becbd6;
}

.feedback{ margin-top: 14px; overflow:hidden; }
.feedbackHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(170,194,215,.42);
  font-weight: 800;
}
.aiAssistBtn{
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.1;
  box-shadow: none;
}
.aiAssistBtn.needsConfig{
  border-color: rgba(199,146,17,.38);
  color: #9c6d0f;
}
.feedbackBody{
  padding: 12px 14px;
  color: var(--text);
  line-height: 1.6;
  min-height: 88px;
}
.feedbackMain{
  white-space: pre-wrap;
}
.aiFeedback{
  margin-top: 10px;
  padding: 10px 11px;
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  background: var(--primary-soft);
  color: #23465f;
}
.aiFeedback.loading{
  color: var(--muted);
  border-left-color: rgba(107,130,152,.45);
  background: rgba(239,246,253,.72);
}
.aiFeedback.error{
  color: #8b5d08;
  border-left-color: rgba(199,146,17,.58);
  background: rgba(255,246,219,.82);
}
.aiFeedbackLabel{
  margin-bottom: 3px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}

.footerActions{
  display:flex;
  gap:10px;
  margin-top: 14px;
  padding: 0 4px 2px;
  flex-wrap: wrap;
}

#bgPhoto{ filter: saturate(1.02) contrast(1.02); }
/* 位置提示图形不显示：保留元素只用于内部命中检测/评分 */
.zone{ fill: transparent; stroke: transparent; stroke-width: 0; }
.zoneText{ display:none; }
.paint{ display:none; fill: transparent; stroke: transparent; stroke-width: 0; }
#bracketImage{ filter: drop-shadow(0 8px 18px rgba(14, 27, 40, .28)); pointer-events: none; }
.target{ fill: transparent; stroke: transparent; stroke-width: 0; stroke-dasharray: none; }
.flash{ fill: none; stroke: rgba(216,77,106,.68); stroke-width: 3; stroke-linecap: round; }
.svgToast{ fill: var(--text); font-size: 14px; }
.hidden{ display:none; }

/* Simulation animation layer */
.surfaceFx{
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}
.cleanSheen{
  fill: rgba(255,255,255,.2);
  stroke: rgba(255,255,255,.68);
  stroke-width: 3;
  filter: url(#softGlow);
  animation: cleanSheenPulse 1.2s ease-out forwards;
}
.etchedSurface{
  fill: url(#etchedGradient);
  stroke: rgba(159,189,204,.52);
  stroke-width: 1.6;
  filter: url(#softGlow);
  animation: etchedSettle 1.2s ease-out both;
}
.waterSurface{
  fill: url(#waterGradient);
  stroke: rgba(80,172,213,.42);
  stroke-width: 1.8;
  filter: url(#softGlow);
  animation: waterSurfacePulse .9s ease-in-out infinite alternate;
}
.primerSurface{
  fill: url(#primerGradient);
  stroke: rgba(63,135,197,.32);
  stroke-width: 1.5;
  filter: url(#softGlow);
  animation: primerSettle 1.3s ease-out both;
}
.drySheen{
  fill: transparent;
  stroke: rgba(255,255,255,.76);
  stroke-width: 3;
  stroke-dasharray: 18 12;
  filter: url(#softGlow);
  animation: dryFlash 1.2s ease-out forwards;
}
.curedGlow{
  fill: rgba(76,181,221,.08);
  stroke: rgba(78,177,215,.78);
  stroke-width: 4;
  filter: url(#softGlow);
  animation: curedPulse 1.4s ease-out forwards;
}

.fx{
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}
.toolHalo{
  fill: rgba(255,255,255,.2);
  stroke: rgba(255,255,255,.72);
  stroke-width: 3;
  filter: url(#softGlow);
  animation: haloPulse .7s ease-in-out infinite alternate;
}
.toolHandle,
.microbrushHandle,
.probeHandle{
  fill: none;
  stroke: #68798a;
  stroke-width: 10;
  stroke-linecap: round;
}
.polishHead{
  fill: #f5f0e3;
  stroke: #b9aa8b;
  stroke-width: 4;
}
.polishBristles{
  stroke: #9e8c6a;
  stroke-width: 4;
  stroke-linecap: round;
}
.polishCup{
  transform-box: fill-box;
  transform-origin: center;
}
#polishFx.playing .polishCup{ animation: polishSpin .34s linear infinite; }
.spark{
  fill: rgba(255,255,255,.92);
  stroke: rgba(87,158,199,.28);
  stroke-width: 1;
  filter: url(#softGlow);
  opacity: 0;
}
#polishFx.playing .sparkA{ animation: sparkle .72s ease-out infinite; }
#polishFx.playing .sparkB{ animation: sparkle .72s .22s ease-out infinite; }

.timerTrack{
  fill: rgba(255,255,255,.14);
  stroke: rgba(255,255,255,.48);
  stroke-width: 6;
}
.timerProgress{
  fill: none;
  stroke: #5aa9d9;
  stroke-width: 6;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
}
.dropper{
  fill: rgba(245,248,252,.95);
  stroke: #637487;
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 14px rgba(20,35,48,.22));
}
.gelDrop{
  fill: rgba(88,186,211,.62);
  stroke: rgba(37,125,154,.52);
  stroke-width: 1.4;
  filter: url(#softGlow);
  transform-box: fill-box;
  transform-origin: center;
}
#etchFx.playing .gelDrop{ animation: gelPulse .72s ease-in-out infinite alternate; }
.gelBubble{ fill: rgba(255,255,255,.8); opacity: .85; }

.sprayNozzle,
.airNozzle{
  fill: none;
  stroke: #5f7487;
  stroke-width: 11;
  stroke-linecap: round;
}
.waterJet{
  fill: none;
  stroke: rgba(78,176,218,.76);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 18 12;
  filter: url(#softGlow);
}
#rinseFx.playing .waterJet{ animation: jetFlow .52s linear infinite; }
.waterDrop{
  fill: rgba(102,196,232,.76);
  filter: url(#softGlow);
}
#rinseFx.playing .dropA{ animation: dropletFall .72s ease-in infinite; }
#rinseFx.playing .dropB{ animation: dropletFall .72s .12s ease-in infinite; }
#rinseFx.playing .dropC{ animation: dropletFall .72s .24s ease-in infinite; }

.airLine{
  fill: none;
  stroke: rgba(255,255,255,.86);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 20 14;
  filter: url(#softGlow);
}
#dryFx.playing .airLine{ animation: airFlow .58s linear infinite; }
.airStar{
  fill: rgba(255,255,255,.92);
  filter: url(#softGlow);
  transform-box: fill-box;
  transform-origin: center;
}
#dryFx.playing .airStar{ animation: sparkle .66s ease-out infinite; }

.primerBlob{
  fill: rgba(255,242,183,.24);
  stroke: rgba(95,179,176,.42);
  stroke-width: 2;
  filter: url(#softGlow);
}
.microbrushTip{
  fill: none;
  stroke: #55aeb1;
  stroke-width: 8;
  stroke-linecap: round;
}
.primerSweep{
  fill: none;
  stroke: rgba(255,237,160,.82);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 18 18;
  filter: url(#softGlow);
}
#primerFx.playing .primerSweep{ animation: primerSweep 1s ease-in-out infinite; }

.cottonRoll rect{
  fill: rgba(255,255,255,.96);
  stroke: rgba(183,199,213,.75);
  stroke-width: 1.4;
  filter: drop-shadow(0 6px 14px rgba(37,54,68,.16));
}
.cottonRoll path{
  fill: none;
  stroke: rgba(185,198,209,.78);
  stroke-width: 2;
  stroke-linecap: round;
}
.suctionTube{
  fill: none;
  stroke: rgba(71,131,151,.82);
  stroke-width: 13;
  stroke-linecap: round;
}
.suctionTip{
  fill: none;
  stroke: rgba(42,91,111,.9);
  stroke-width: 9;
  stroke-linecap: round;
}
.suctionPulse{
  fill: none;
  stroke: rgba(83,178,199,.62);
  stroke-width: 3;
}
#isolationFx.playing .suctionPulse{ animation: suctionPulse 1s ease-out infinite; }

.probeTip{
  fill: none;
  stroke: #6a7886;
  stroke-width: 5;
  stroke-linecap: round;
}
.resinChip{
  fill: rgba(217,86,107,.74);
  stroke: rgba(160,48,66,.48);
  stroke-width: 1;
}
#flashCleanFx.playing .chipA{ animation: chipFly .8s ease-out forwards; }
#flashCleanFx.playing .chipB{ animation: chipFly .8s .1s ease-out forwards; }

.cureTrack{ stroke: rgba(102,201,230,.36); }
.cureProgress{ stroke: #66d7ef; }
.cureBody{
  fill: #4d6174;
  stroke: rgba(255,255,255,.52);
  stroke-width: 2;
  filter: drop-shadow(0 8px 16px rgba(18,31,45,.28));
}
.cureCone{
  fill: rgba(96,211,238,.2);
  stroke: rgba(95,208,238,.5);
  stroke-width: 2;
  filter: url(#softGlow);
}
.cureSpot{
  fill: rgba(103,221,245,.3);
  stroke: rgba(103,221,245,.72);
  stroke-width: 3;
  filter: url(#softGlow);
}
#cureFx.playing .cureCone,
#cureFx.playing .cureSpot{ animation: cureGlow .7s ease-in-out infinite alternate; }

.placementAura{
  fill: rgba(107,201,190,.11);
  stroke: rgba(60,150,197,.64);
  stroke-width: 3;
  stroke-dasharray: 12 8;
  filter: url(#softGlow);
}
#placementFx.playing .placementAura{ animation: placementMarch .85s linear infinite; }

@keyframes cleanSheenPulse{
  0%{ opacity:0; transform:scale(.82); }
  45%{ opacity:1; }
  100%{ opacity:.2; transform:scale(1.18); }
}
@keyframes etchedSettle{
  from{ opacity:0; transform:scale(.72); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes waterSurfacePulse{
  from{ opacity:.45; transform:scale(.96); }
  to{ opacity:.9; transform:scale(1.05); }
}
@keyframes primerSettle{
  from{ opacity:0; transform:scale(.76); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes dryFlash{
  0%{ opacity:0; stroke-dashoffset:40; transform:scale(.9); }
  35%{ opacity:1; }
  100%{ opacity:0; stroke-dashoffset:0; transform:scale(1.2); }
}
@keyframes curedPulse{
  0%{ opacity:0; transform:scale(.5); }
  35%{ opacity:1; }
  100%{ opacity:0; transform:scale(1.42); }
}
@keyframes haloPulse{
  from{ opacity:.45; transform:scale(.92); }
  to{ opacity:.9; transform:scale(1.08); }
}
@keyframes polishSpin{ to{ transform:rotate(360deg); } }
@keyframes sparkle{
  0%{ opacity:0; transform:scale(.4) rotate(0deg); }
  45%{ opacity:1; }
  100%{ opacity:0; transform:scale(1.25) rotate(40deg); }
}
@keyframes gelPulse{
  from{ transform:scale(.94); opacity:.72; }
  to{ transform:scale(1.08); opacity:1; }
}
@keyframes jetFlow{ to{ stroke-dashoffset:-30; } }
@keyframes dropletFall{
  0%{ opacity:0; transform:translate(8px,-12px) scale(.7); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:translate(-18px,24px) scale(1.1); }
}
@keyframes airFlow{ to{ stroke-dashoffset:-34; } }
@keyframes primerSweep{ to{ stroke-dashoffset:-36; } }
@keyframes suctionPulse{
  0%{ opacity:.8; transform:scale(.65); }
  100%{ opacity:0; transform:scale(1.65); }
}
@keyframes chipFly{
  0%{ opacity:1; transform:translate(0,0) rotate(0deg); }
  100%{ opacity:0; transform:translate(28px,-28px) rotate(65deg); }
}
@keyframes cureGlow{
  from{ opacity:.5; transform:scale(.97); }
  to{ opacity:1; transform:scale(1.06); }
}
@keyframes placementMarch{ to{ stroke-dashoffset:-20; } }

/* Dialog */
dialog{ border: none; padding: 0; background: transparent; }
dialog::backdrop{ background: rgba(18,35,52,.25); backdrop-filter: blur(6px); }
.dialogCard{
  width: min(720px, calc(100vw - 28px));
  margin: 10vh auto 0;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(180deg, #ffffff, #f6faff);
  box-shadow: var(--shadow);
  padding: 18px;
}
.dialogTitle{ font-weight: 900; font-size: 18px; }
.dialogBody{ margin-top: 10px; color: var(--text); line-height: 1.75; }
.dialogBody ul{ margin: 10px 0 0 18px; }
.dialogBody code{
  background: #edf5fd;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(170,194,215,.42);
}
.dialogActions{ display:flex; justify-content:flex-end; margin-top: 12px; }
.muted{ color: var(--muted); }

.formRow{ display:flex; gap:12px; align-items:center; margin: 10px 0 6px; flex-wrap: wrap; }
.formLabel{ color: var(--muted); font-size: 13px; min-width: 48px; }
.input{
  flex: 1;
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(170,194,215,.48);
  background: rgba(255,255,255,.96);
  color: var(--text);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}
.input:focus{
  border-color: rgba(63,135,197,.55);
  box-shadow: 0 0 0 4px rgba(63,135,197,.10);
}

.stepHintTitle{
  font-weight: 950;
  font-size: 20px;
  letter-spacing: .3px;
  margin-bottom: 8px;
}
.flashLabel{ fill: rgba(216,77,106,.9); font-size: 14px; font-weight: 800; }

/* admin table */
.adminControls{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 840px){
  .adminControls{ grid-template-columns: 1fr; }
}

.tableWrap{ margin-top: 14px; overflow:auto; }
.adminTable{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 780px;
}
.adminTable th,
.adminTable td{
  text-align:left;
  padding: 14px 12px;
  border-bottom: 1px solid rgba(170,194,215,.34);
  vertical-align: top;
}
.adminTable th{
  font-weight: 800;
  color: #3b5872;
  background: rgba(239,246,253,.92);
  position: sticky;
  top: 0;
}
.adminTable tr:hover td{ background: rgba(237,245,255,.55); }
.emptyCell{ color: var(--muted); text-align:center !important; }

/* small status helpers */
#adminStatus,
#scorePill,
#stepPill,
#countPill{ font-weight: 700; }


.viewSwitch{
  display:flex;
  gap:10px;
  padding: 0 4px 12px;
}
.viewSwitch.hidden{ display:none; }
.viewSwitch .btn.active{
  background: linear-gradient(180deg, #f1f8ff, #e4f1ff);
  border-color: rgba(63,135,197,.45);
  color: var(--primary);
  font-weight: 800;
}

/* Text-only / non-dynamic version overrides */
.toolGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.toolBtn{
  text-align:left;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(170,194,215,.48);
  background: linear-gradient(180deg, #ffffff, #f6faff);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: .18s ease;
}
.toolBtn:hover{
  background: linear-gradient(180deg, #ffffff, #eef6ff);
  transform: translateY(-1px);
}
.toolBtn.active{
  outline: 2px solid rgba(63,135,197,.28);
  background: linear-gradient(180deg, #f1f8ff, #e4f1ff);
}
.toolBtn *{ color: inherit; }
.toolName{ font-weight: 800; }
.toolHint{ color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.3; }

#surfaceStateFx,
#toolFxLayer,
.surfaceFx,
.fx{
  display:none !important;
}