/* IHC quantification pages (nuclear, membrane/cytoplasm): layout shared by /ihc/app.js */
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px 16px; align-items: end; }
.stat { display: grid; gap: 2px; }
.stat b { font-size: 24px; font-weight: 600; line-height: 1.1; }
.stat.big b { font-size: 34px; color: var(--accent); }
.totals .warn { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--warn); }
.totals .interp { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.totals .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.work { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: start; }
@media (max-width: 760px) { .work { grid-template-columns: 1fr; } }
.stage { display: grid; gap: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar select { width: auto; padding: 8px 10px; }
.toolbar input[type="text"] { width: 130px; padding: 8px 10px; }
.file-btn { display: inline-flex; align-items: center; }
.canvas-wrap { position: relative; background: var(--tile); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; min-height: 160px; display: grid; place-items: center; }
.canvas-wrap canvas { display: block; max-width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.canvas-wrap canvas[hidden] { display: none; }
.empty { margin: 0; padding: 32px 16px; color: var(--tile-ink); font-size: 14px; text-align: center; }
.chk { font-size: 14px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--line); vertical-align: -1px; margin-right: 4px; }
.adv summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.adv .row { display: grid; gap: 10px; padding-top: 10px; }
.adv label { display: grid; grid-template-columns: 150px 1fr 96px; gap: 10px; align-items: center; font-size: 14px; }
.adv label .mono { font-size: 13px; white-space: nowrap; }
@media (max-width: 520px) { .adv label { grid-template-columns: 1fr 80px; } .adv label input[type="range"] { grid-column: 1 / -1; } }
.adv input[type="range"] { width: 100%; }
.adv .chk label { display: inline; grid-template-columns: none; }
.adv .note { margin: 0; font-size: 13px; color: var(--muted); }
.fstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px 12px; font-size: 14px; }
.fstats b { display: block; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.fstats .fname { grid-column: 1 / -1; }
.fstats .fname b { font-size: 15px; }
.fstats .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.side h2 { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fields { display: grid; gap: 8px; }
@media (max-width: 760px) { .fields { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }
.fld { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); cursor: pointer; text-align: left; color: inherit; }
.fld.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fld canvas { width: 100%; height: auto; border-radius: 4px; display: block; }
.fld .n { font-size: 12px; color: var(--muted); }
.foot { color: var(--muted); font-size: 13px; }
.foot a { color: var(--accent); }