/* Six code boxes (9 Nov 2026), see public/js/code-boxes.js. Each look sets its own colours and corners below. */
.c6{display:grid;gap:8px;--c6-ink:#0e1124;--c6-line:#c9ccd6;--c6-bad:#8a1a2b;--c6-bad-soft:#fdecee;--c6-r:0;--c6-focus:#0e1124;--c6-soft:#5b6072}
.c6-row{display:grid;grid-template-columns:repeat(6,minmax(0,54px));gap:8px}
.c6 .c6i{width:100%;min-width:0;height:60px;box-sizing:border-box;margin:0;padding:0;border:1px solid var(--c6-line);border-radius:var(--c6-r);background:#fff;color:var(--c6-ink);text-align:center;font:700 26px/1 inherit;font-family:inherit;font-variant-numeric:tabular-nums;caret-color:var(--c6-focus);transition:border-color .12s,background-color .12s,opacity .2s}
.c6 .c6i:focus{outline:0;border-color:var(--c6-focus);box-shadow:inset 0 0 0 1px var(--c6-focus)}
.c6 .c6i.on{border-color:var(--c6-ink);animation:c6-pop .16s ease-out}
.c6.checking .c6i{opacity:.45}
.c6.checking:after{content:"Checking…";font-size:14px;font-weight:600;color:var(--c6-soft)}
.c6.wrong .c6i{border-color:var(--c6-bad);background:var(--c6-bad-soft)}
.c6.wrong .c6-row{animation:c6-shake .32s ease-in-out}
.c6 .c6-backup{height:56px;font-size:20px;letter-spacing:.06em;text-align:center}
@keyframes c6-pop{40%{transform:scale(1.07)}}
@keyframes c6-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.c6 .c6i.on,.c6.wrong .c6-row{animation:none}}
@media (max-width:360px){.c6-row{gap:6px}.c6 .c6i{height:54px;font-size:23px}}
/* Ops (staff): Ops colours, 8px corners, blue focus ring */
.guest-card .c6,.card .c6{--c6-ink:var(--ink);--c6-line:#b9c6d4;--c6-bad:var(--red);--c6-bad-soft:var(--red-soft);--c6-r:var(--r-ctl);--c6-focus:var(--focus);--c6-soft:var(--muted)}
.card .c6-row{grid-template-columns:repeat(6,48px)}
/* Website, pub store, rep apps: square corners, ink focus */
.fpp .c6,.bs .c6{--c6-ink:var(--fp-ink,#0e1124);--c6-line:#c9ccd6;--c6-bad:var(--bad,#8a1a2b);--c6-bad-soft:#fdecee;--c6-focus:var(--fp-ink,#0e1124);--c6-soft:var(--fp-soft,#5b6072)}