:root{
  --bg:#eaf3fc;--panel:#fff;--panel2:#f6faff;--text:#132b45;--muted:#71869d;--line:#cfe0ee;
  --blue:#3768e8;--cyan:#20b9bf;--green:#18ad66;--red:#db5757;--yellow:#f3b73f;
  --shadow:0 18px 44px rgba(31,68,104,.14);
}
html[data-theme="dark"]{--bg:#101a26;--panel:#172432;--panel2:#1d2d3d;--text:#edf6ff;--muted:#9ab0c5;--line:#31475a;--shadow:0 20px 48px rgba(0,0,0,.34)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}button{font:inherit;color:inherit;cursor:pointer}.app{height:100dvh;padding:10px;display:grid;grid-template-rows:64px 62px minmax(0,1fr) 30px;gap:8px;background:radial-gradient(circle at 85% 100%,rgba(32,185,191,.13),transparent 28%),var(--bg)}
.topbar,.questionbar,.stage-card,.control-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.topbar{border-radius:20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px}.brand{display:flex;align-items:center;gap:12px;font-size:clamp(20px,1.65vw,30px)}.brand-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(135deg,#ddecff,#d3fbf7)}.code{font-weight:900;color:var(--blue);background:var(--panel2);border:1px solid var(--line);padding:10px 18px;border-radius:14px}.top-actions{display:flex;justify-content:flex-end;gap:8px}.icon-btn,.fullscreen-btn{border:1px solid var(--line);background:var(--panel2);border-radius:13px;height:42px;font-weight:800}.icon-btn{width:46px;font-size:20px}.fullscreen-btn{padding:0 16px;background:#132b45;color:#fff;border-color:#132b45}
.questionbar{border-radius:18px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:0 16px}.phase-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:900}.questionbar h1{font-size:clamp(21px,2vw,32px);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-pill{padding:10px 14px;border-radius:999px;background:#e8f8f0;color:#128654;font-weight:900;white-space:nowrap}html[data-theme="dark"] .status-pill{background:#173a2b;color:#7de2ad}
.content{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:8px}.stage-card,.control-card{border-radius:20px;min-height:0;overflow:hidden}.stage-card{display:grid;grid-template-rows:minmax(0,1fr) 76px;padding:8px}.scene{width:100%;height:100%;display:block;border-radius:16px}.fluid-canvas{touch-action:none;background:transparent}.scene-label{font-size:18px;font-weight:900;fill:#49647d;letter-spacing:1.5px}.counter-title{font-size:18px;font-weight:900;fill:#58718a;letter-spacing:2px}.counter-number{font-size:104px;font-weight:950;fill:#17314d}.counter-unit{font-size:20px;font-weight:800;fill:#6d8399}html[data-theme="dark"] .counter-title,html[data-theme="dark"] .counter-unit,html[data-theme="dark"] .scene-label{fill:#afc5d7}html[data-theme="dark"] .counter-number{fill:#edf6ff}html[data-theme="dark"] #counterCard rect{fill:#1d2d3d;stroke:#31475a}.result-strip{display:grid;grid-template-columns:110px 1px 110px minmax(0,1fr);align-items:center;gap:14px;border-top:1px solid var(--line);padding:8px 10px}.result-strip>div:not(.divider):not(.result-message){text-align:center}.result-strip span{display:block;font-size:12px;color:var(--muted);font-weight:700}.result-strip strong{font-size:24px}.divider{width:1px;height:42px;background:var(--line)}.result-message{font-weight:850;font-size:18px;padding-left:8px}
.control-card{padding:12px}.pane{height:100%;display:flex;flex-direction:column;gap:12px}.pane-title{text-align:center;font-weight:950;font-size:22px;padding:4px 0 2px}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tool-choice{border:1px solid var(--line);background:var(--panel2);border-radius:16px;height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:850;padding:8px 4px}.tool-choice .mini{height:50px;display:flex;align-items:flex-end;justify-content:center}.tool-choice .tool-name{display:block;line-height:1.05}.tool-choice small{display:block;font-size:11px;color:var(--muted);font-weight:800;line-height:1}.tool-choice.active{border:2px solid var(--blue);background:linear-gradient(135deg,rgba(55,104,232,.09),rgba(32,185,191,.09));box-shadow:inset 0 0 0 2px rgba(55,104,232,.08)}.primary,.ghost,.measure-btn{border-radius:15px;border:0;font-weight:900}.primary{margin-top:auto;min-height:54px;background:linear-gradient(135deg,var(--blue),#3158cc);color:#fff}.primary.secondary{background:linear-gradient(135deg,var(--cyan),#1499a2)}.ghost{min-height:48px;background:var(--panel2);border:1px solid var(--line)}.stepper{display:grid;grid-template-columns:62px 1fr 62px;gap:10px;align-items:center;margin-top:34px}.stepper button{height:62px;border-radius:16px;border:1px solid var(--line);background:var(--panel2);font-size:30px;font-weight:900}.stepper strong{height:100px;border-radius:20px;background:linear-gradient(135deg,rgba(55,104,232,.12),rgba(32,185,191,.11));display:grid;place-items:center;font-size:58px}.unit-label{text-align:center;color:var(--muted);font-weight:800;font-size:18px}.measure-btn{margin-top:56px;min-height:150px;background:linear-gradient(135deg,#28c48a,#13a867);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:22px;box-shadow:0 18px 36px rgba(24,173,102,.22)}.measure-btn span{font-size:42px}.measure-btn:disabled{opacity:.5;cursor:not-allowed}.live-count{margin-top:10px;border:1px solid var(--line);background:var(--panel2);border-radius:16px;padding:14px;display:flex;justify-content:space-between;align-items:center}.live-count span{color:var(--muted);font-weight:800}.live-count strong{font-size:32px}.judge-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:30px}.judge{height:78px;border-radius:18px;border:1px solid var(--line);background:var(--panel2);font-size:26px;font-weight:950;display:flex;align-items:center;justify-content:center;gap:14px}.judge span{font-size:20px}.judge.correct{border-color:#28b573;background:rgba(40,181,115,.13);color:#0c8b52}.judge.wrong{border-color:#df6a6a;background:rgba(223,106,106,.12);color:#c83d3d}.finish-mark{margin:48px auto 0;width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:rgba(24,173,102,.14);color:var(--green);font-size:54px;font-weight:950}.finish-pane strong,#finishTitle{text-align:center;font-size:28px}.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:#10253a;color:#fff;padding:12px 18px;border-radius:14px;font-weight:800;z-index:20;box-shadow:var(--shadow)}footer{display:flex;align-items:center;justify-content:space-between;padding:0 4px;color:#64809b;font-size:12px;font-weight:750}
.mini svg{width:66px;height:52px}.token-cup{transform-origin:center bottom}.token-enter{animation:tokenPop .34s ease-out}@keyframes tokenPop{0%{transform:scale(.35);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}.cup-pulse{animation:cupPulse .55s ease}@keyframes cupPulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 12px rgba(32,185,191,.7))}}
@media(max-width:1100px){.content{grid-template-columns:minmax(0,1fr) 290px}.brand{font-size:20px}.questionbar h1{font-size:22px}.control-card{padding:10px}.tool-choice{height:92px}.measure-btn{margin-top:30px}}
@media(max-width:850px){.app{grid-template-rows:58px 56px minmax(0,1fr) 26px}.topbar{grid-template-columns:1fr auto}.code{display:none}.brand strong{font-size:18px}.fullscreen-btn{padding:0 10px}.content{grid-template-columns:minmax(0,1fr) 255px}.questionbar{padding:0 10px}.status-pill{display:none}.tool-grid{grid-template-columns:1fr 1fr}.tool-choice{height:88px;font-size:12px}.tool-choice .mini{height:35px}.tool-choice small{font-size:10px}.mini svg{height:34px}.pane-title{font-size:18px}.measure-btn{min-height:110px;font-size:18px}.stepper{grid-template-columns:50px 1fr 50px;margin-top:12px}.stepper strong{height:76px;font-size:42px}.result-strip{grid-template-columns:80px 1px 80px 1fr}.result-message{font-size:14px}}

[hidden]{display:none!important}

#streamGroup{transition:opacity .12s ease}

.tool-choice img{max-width:76px;max-height:52px;object-fit:contain;display:block;pointer-events:none}
.tool-choice small{margin-top:2px}
#toolPhotoStage,#jugPhoto{pointer-events:none}
/* v4.2.1 — gerçekçi dökme hizası */
#jugGroup{transform-box:fill-box;transform-origin:50% 52%}
#jugGroup.jug-pour{animation:jugPourTilt .88s ease-in-out}
@keyframes jugPourTilt{0%,100%{transform:rotate(0deg)}24%,78%{transform:rotate(2.4deg)}}
#streamGroup{filter:drop-shadow(0 0 4px rgba(32,185,191,.30))}
#cupSurfaceFill{pointer-events:none}

/* v4.3.0 refined realism */
#jugGroup.jug-pour{animation:jugPourTilt .92s ease-in-out}
@keyframes jugPourTilt{0%,100%{transform:rotate(0deg)}28%,78%{transform:rotate(5deg)}}

/* v5 dynamic fluid canvas */
.tool-choice{height:110px}
.tool-choice img{max-width:88px;max-height:60px;object-fit:contain;display:block;pointer-events:none}
.tool-choice small{display:none}
#pourAudio{display:none}


/* v5.3.0 — compact header + large scene + left result panel */
.app{
  padding:7px;
  grid-template-rows:46px 48px minmax(0,1fr) 22px;
  gap:6px;
}
.topbar{border-radius:15px;padding:0 12px}
.brand{gap:9px;font-size:clamp(18px,1.35vw,24px)}
.brand-icon{width:34px;height:34px;border-radius:11px;font-size:18px}
.code{padding:7px 14px;border-radius:11px;font-size:15px}
.icon-btn,.fullscreen-btn{height:34px;border-radius:11px}
.icon-btn{width:38px;font-size:18px}
.fullscreen-btn{padding:0 13px;font-size:14px}
.questionbar{border-radius:15px;gap:11px;padding:0 13px}
.phase-dot{width:30px;height:30px;font-size:14px}
.questionbar h1{font-size:clamp(20px,1.72vw,29px)}
.status-pill{padding:7px 13px;font-size:14px}

.content{grid-template-columns:minmax(0,1fr) 310px;gap:7px}
.stage-card{
  padding:7px;
  display:grid;
  grid-template-columns:205px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  gap:8px;
  overflow:hidden;
}
.summary-panel{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:11px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-radius:17px;
}
.summary-title{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  font-weight:950;
  letter-spacing:.09em;
  padding:2px 0 1px;
}
.summary-card{
  min-height:155px;
  border-radius:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.summary-card span{
  font-size:13px;
  font-weight:950;
  letter-spacing:.06em;
}
.summary-card strong{
  display:block;
  margin:5px 0 2px;
  font-size:58px;
  line-height:1;
  font-weight:950;
}
.summary-card small{
  font-size:14px;
  font-weight:850;
  opacity:.78;
  text-align:center;
}
.prediction-summary{
  color:#234dcf;
  background:linear-gradient(145deg,#eaf0ff,#dfe9ff);
  border-color:#bdcdfb;
}
.measurement-summary{
  color:#087f76;
  background:linear-gradient(145deg,#e1fbf7,#d2f5ef);
  border-color:#afe5dc;
}
html[data-theme="dark"] .prediction-summary{color:#a9bcff;background:linear-gradient(145deg,#1b2d55,#203a67);border-color:#39517f}
html[data-theme="dark"] .measurement-summary{color:#88ebe0;background:linear-gradient(145deg,#123d39,#174a45);border-color:#2c625d}
.summary-message{
  margin-top:auto;
  padding:13px 11px;
  border-radius:14px;
  background:var(--panel2);
  border:1px solid var(--line);
  text-align:center;
  font-size:15px;
  line-height:1.25;
  font-weight:900;
}
.scene{border-radius:17px}

.control-card{padding:10px;border-radius:17px}
.pane{gap:10px}
.pane-title{font-size:20px;padding:2px 0}
.tool-grid{gap:8px}
.tool-choice{height:104px;border-radius:14px}
.primary{min-height:49px}
.ghost{min-height:43px}
.stepper{margin-top:20px;grid-template-columns:56px 1fr 56px}
.stepper button{height:56px}
.stepper strong{height:88px;font-size:52px}
.measure-btn{margin-top:38px;min-height:138px}
footer{font-size:11px;padding:0 3px}

@media(max-width:1150px){
  .content{grid-template-columns:minmax(0,1fr) 285px}
  .stage-card{grid-template-columns:175px minmax(0,1fr)}
  .summary-card{min-height:135px}
  .summary-card strong{font-size:50px}
  .summary-card small{font-size:12px}
}
@media(max-width:900px){
  .stage-card{grid-template-columns:150px minmax(0,1fr)}
  .summary-panel{padding:8px;gap:8px}
  .summary-card{min-height:118px}
  .summary-card strong{font-size:44px}
  .summary-message{font-size:13px;padding:10px 8px}
}