.iag {
  --iag-accent:#3157d5;
  --iag-ink:#172033;
  --iag-muted:#667085;
  --iag-grid:rgba(70,116,180,.28);
  --iag-paper:#fffef8;
  --iag-danger:#b42318;
  --iag-ok:#067647;
  --iag-cell:44px;
  --iag-shell-height:650px;
  position:relative;
  display:flex;
  flex-direction:column;
  height:var(--iag-shell-height);
  min-height:var(--iag-shell-height);
  max-height:var(--iag-shell-height);
  overflow:hidden;
  padding:12px 12px 12px 58px;
  color:var(--iag-ink);
  font-family:ui-rounded,"SF Pro Rounded",Inter,system-ui,sans-serif;
  container-type:inline-size;
}
.iag *, .iag *::before, .iag *::after { box-sizing:border-box; }
.iag h2 { margin:0 0 8px; font-size:clamp(20px,2.4vw,28px); line-height:1.15; font-weight:850; }
.iag button, .iag input { font:inherit; touch-action:manipulation; }
.iag button { min-height:42px; cursor:pointer; }
.iag button:disabled { opacity:.45; cursor:default; }
.iag :where(button,input):focus-visible { outline:3px solid var(--iag-accent); outline-offset:2px; }
.iag-panel { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; }
.iag-work { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }

/* Stages reuse shared .ng-progress from notebook-game.css */
.iag .ng-progress button {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  padding: 0;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.iag .ng-progress button[data-state="done"] {
  color: #067647;
  background: #ecfdf3;
  border-color: #12b76a;
  box-shadow: 0 0 0 4px #fff;
  transform: none;
}
.iag .ng-progress button[data-state="todo"] { opacity: .55; }
.iag[data-admin="1"] .ng-progress button:disabled { opacity: 1; }
.iag[data-admin="1"] .ng-progress button[data-state="todo"] { opacity: 1; }

.iag-problem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 14px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #dbe4ff;
  border-radius: 16px;
  background: #f8faff;
}
.iag-problem-label { color: var(--iag-muted); font-size: 14px; font-weight: 750; }
.iag-problem-example {
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--iag-ink);
}

.iag-stage-now { min-height:20px; margin:0 0 10px; color:var(--iag-muted); font-size:13px; font-weight:800; }

.iag-toolbar { display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 8px; }
.iag-icon {
  flex:0 0 44px; width:44px; min-height:44px; padding:0;
  border:1px solid #d8dfec; border-radius:12px; background:#fff; color:#243451;
  display:grid; place-items:center; font-size:20px;
}
.iag-icon:hover:not(:disabled) { border-color:#3157d5; background:#f5f7ff; }
.iag-icon[aria-pressed="true"] { background:#eef6f2; border-color:#d8e9df; }
.iag-repeat { padding:0 8px; white-space:nowrap; font-size:12px; min-height:44px; border:1px solid #d8dfec; border-radius:12px; background:#fff; color:#243451; font-weight:750; }
.iag-skip { margin-left:auto; white-space:nowrap; font-size:12px; padding:0 10px; min-height:44px; border:1px solid #d8dfec; border-radius:12px; background:#fff; color:#475467; }
.iag-tool {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:6px 12px 6px 6px;
  border:0;
  border-radius:13px;
  background:#fff;
  color:#1d2939;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 0 0 1px rgba(16,24,40,.04);
  font-size:13px;
  font-weight:750;
}
.iag-tool:hover:not(:disabled) { background:#f8fafc; box-shadow:0 4px 10px rgba(16,24,40,.08),0 0 0 1px rgba(49,87,213,.16); }
.iag-tool-icon { display:grid; width:30px; height:30px; flex:0 0 auto; place-items:center; border-radius:10px; background:#eef2ff; color:#3538cd; }
.iag-tool[aria-pressed="true"] .iag-tool-icon { background:#d1fadf; color:var(--iag-ok); }
.iag-tool-ghost { padding:6px 12px; background:transparent; box-shadow:none; color:#475467; font-weight:650; }
.iag-admin-scrub { display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:4px 8px; border:1px dashed #9db4f3; border-radius:12px; background:#f5f8ff; }
.iag-admin-scrub button { min-width:42px; min-height:36px; border:1px solid #d8dfec; border-radius:10px; background:#fff; font-weight:900; }
.iag-admin-slide { min-width:4.5em; text-align:center; font-size:12px; font-weight:800; color:#2448b8; font-variant-numeric:tabular-nums; }

.iag-guide { min-height:24px; margin:8px 0; color:#1d4ed8; font-size:15px; font-weight:800; line-height:1.35; }
.iag-paper {
  height:305px;
  min-height:305px;
  max-height:305px;
  padding:12px;
  border:1px solid #d8e2f1;
  border-radius:18px;
  overflow:auto;
  background:var(--iag-paper);
  box-shadow:inset 0 0 0 1px rgba(70,116,180,.08);
}
.iag-sheet {
  --iag-cols: 8;
  width: calc(var(--iag-cell) * var(--iag-cols));
  margin: 0 auto;
  position: relative;
  background-image: linear-gradient(var(--iag-grid) 1px, transparent 1px), linear-gradient(90deg, var(--iag-grid) 1px, transparent 1px);
  background-size: var(--iag-cell) var(--iag-cell);
  box-shadow: inset 0 0 0 1px var(--iag-grid);
}
.iag-place-labels, .iag-annotation-row, .iag-number-row, .iag-result-row {
  display: grid;
  grid-template-columns: repeat(var(--iag-cols), var(--iag-cell));
  align-items: stretch;
  width: calc(var(--iag-cell) * var(--iag-cols));
  height: var(--iag-cell);
  margin: 0;
  position: relative;
}
.iag-place-label { display: grid; place-items: center; padding: 2px; color: var(--iag-muted); font-size: 9px; font-weight: 750; line-height: 1.05; text-align: center; }
.iag-place-label[data-spot="target"] { color: #175cd3; background: #eff8ff; }
.iag-cell {
  width: 100%; height: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; text-align: center;
  font-size: calc(var(--iag-cell) * .58); line-height: 1; font-weight: 700; color: var(--iag-ink);
  caret-color: var(--iag-accent); appearance: textfield; -moz-appearance: textfield;
}
.iag-cell::-webkit-outer-spin-button, .iag-cell::-webkit-inner-spin-button { appearance: none; margin: 0; }
input.iag-cell:disabled { opacity: 1; -webkit-text-fill-color: var(--iag-ink); }
.iag-cell[data-active="true"] { box-shadow: inset 0 0 0 3px var(--iag-accent); background: #f4f6ff; }
.iag-cell[data-error="true"] { box-shadow: inset 0 0 0 3px var(--iag-danger); background: #fff4f2; }
.iag-cell[data-correct="true"] { background: #ecfdf3; box-shadow: inset 0 0 0 2px #75c9a5; }
.iag-annotation-row [data-carry-mark="true"] { color: #a15c00; font-size: calc(var(--iag-cell) * .42); font-weight: 850; }
.iag-operation-row { position: relative; box-shadow: 0 2px 0 0 var(--iag-ink); }
.iag-sign {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 0;
  line-height: 0;
  overflow: visible;
}
.iag-sign::before {
  content: "+";
  position: absolute;
  right: 2px;
  bottom: calc(var(--iag-cell) - 0.38em);
  font-size: calc(var(--iag-cell) * 0.78);
  font-weight: 800;
  line-height: 1;
  color: var(--iag-ink);
}
.iag-primary {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--iag-accent);
  border-radius: 12px;
  background: var(--iag-accent);
  color: #fff;
  font-weight: 800;
}
.iag-primary:hover:not(:disabled) { background: #2448b8; border-color: #2448b8; }

.iag-hint { display:none !important; }
.iag-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.iag-actions button { flex:1 1 auto; min-height:42px; padding:8px 14px; border:1px solid #d8dfec; border-radius:12px; background:#fff; color:#243451; }
.iag-actions .iag-primary { background:var(--iag-accent); color:#fff; border-color:var(--iag-accent); font-weight:800; }
.iag-actions .iag-secondary { background:#fff; color:#243451; font-weight:750; }
.iag-result-banner { margin-top:10px; padding:12px 14px; border:1px solid #9fe3c6; border-radius:16px; background:#ecfdf3; color:#05603a; text-align:center; }
.iag-result-banner strong { font-size:18px; }
.iag-hidden { display:none !important; }

@media(max-width:720px){
  .iag { --iag-cell:clamp(28px,calc((100cqw - 64px) / 8),44px); padding:10px 8px 10px 46px; }
  .iag .ng-progress { left:7px; top:58px; bottom:10px; width:30px; gap:8px; }
  .iag .ng-progress button { flex-basis:28px; width:28px; height:28px; min-height:28px; }
  .iag-paper { height:305px; min-height:305px; max-height:305px; padding:8px; }
  .iag-toolbar { gap:6px; }
  .iag-tool { padding-right:8px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce){.iag *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}