/* Large, symbol + text result; no dependence on colour alone. */
body #selfCheckTerminalOverlay.self-check-terminal-overlay { color: #fff; background: #14212e; padding: clamp(10px, 1.5vw, 22px); }
#selfCheckTerminalOverlay .self-check-terminal-content { box-sizing: border-box; width: min(1120px, 100%); max-height: 100%; overflow-y: auto; padding: clamp(8px, 1vw, 16px); gap: 8px; }
#selfCheckTerminalOverlay .self-check-terminal-icon { font-size: clamp(40px, 6vh, 72px); width: auto; height: auto; line-height: 1; margin: 0 auto 8px; }
#selfCheckTerminalOverlay h3 { color: #fff; font-size: clamp(28px, 4vw, 54px); line-height: 1.1; margin: 8px 0; }
#selfCheckTerminalEmployee { color: #cbdfe8; font-size: clamp(20px, 2.4vw, 32px); }
#selfCheckTerminalConclusion { color: #e1e9ee; font-size: clamp(17px, 1.7vw, 24px); line-height: 1.3; }
#selfCheckTerminalOverlay.is-problem .self-check-terminal-icon { background: #bf1534; box-shadow: none; min-width: 58px; min-height: 58px; }
#selfCheckTerminalOverlay .self-check-terminal-stage { color: #e1e9ee; background: #243b4c; border-color: #435c6e; }
#selfCheckTerminalOverlay .self-check-terminal-stage.is-pass { color: #9bffd5; }
#selfCheckTerminalOverlay .self-check-terminal-stage.is-review { color: #ff9ba5; }
#selfCheckTerminalDefects { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; text-align: center; }
#selfCheckTerminalDefects[hidden] { display: none; }
.hygiene-defect-card { color: #fff; background: #392127; border: 2px solid #ff747f; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hygiene-defect-card strong { font-size: clamp(19px, 1.9vw, 27px); line-height: 1.15; }
.hygiene-defect-card > span { font-size: clamp(14px, 1.3vw, 18px); line-height: 1.3; }
.hygiene-defect-photo { display: block; width: 100%; height: auto; max-height: min(38vh, 340px); object-fit: contain; background: #eee; border-radius: 10px; }
.hygiene-example-label { color: #ddd; font-size: 12px; }
#selfCheckTerminalDefects:has(.has-photo-example) { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.hygiene-defect-picture { position: relative; width: clamp(76px, 12vh, 126px); height: clamp(72px, 12vh, 120px); }
.hygiene-defect-picture svg { width: 100%; height: 100%; color: #fff; }
.hygiene-defect-cross { position: absolute; right: -8px; top: -5px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #bf1534; border: 3px solid white; color: white; font: 900 38px/1 sans-serif; }
.hygiene-defect-card.is-technical { border-color: #f4c361; background: #3c3321; }
.is-technical .hygiene-defect-cross { background: #8b6100; font-size: 30px; }
#selfCheckTerminalOverlay .self-check-terminal-timer::after { display: none; }
.hygiene-comparison-labels { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 12px; font-size: 16px; font-weight: 700; }
.hygiene-comparison-labels span:first-child { color: #ffbdc3; }
.hygiene-comparison-labels span:last-child { color: #a6efd4; }
.hygiene-defect-card { background: #273343; border: 1px solid #708095; text-align: left; align-items: stretch; }
.hygiene-defect-card.is-speaking { border-color: #fff; box-shadow: 0 0 0 3px #afbbff80; }
#selfCheckTerminalDefects:has(.has-photo-example) { grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); }
#selfCheckTerminalOverlay .self-check-terminal-icon { display: none; }
body.hygiene-self-check-mode #selfCheckGuideTitle { font-size: clamp(24px, 2.7vw, 38px); line-height: 1.15; }
body.hygiene-self-check-mode #selfCheckGuideText { font-size: clamp(19px, 2vw, 28px); line-height: 1.3; }
body.hygiene-self-check-mode #selfCheckActiveStageHint { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.25; }
@media (max-height: 680px) { #selfCheckTerminalOverlay .self-check-terminal-stages { display: none; } #selfCheckTerminalOverlay .self-check-terminal-icon { font-size: 36px; } .hygiene-defect-picture { height: 66px; width: 72px; } }
@media (prefers-reduced-motion: reduce) { #selfCheckTerminalOverlay .self-check-terminal-timer::after { animation: none; } }