@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@700&family=IBM+Plex+Mono:wght@500&display=swap');
*{box-sizing:border-box}#app{height:100%}html,body{margin:0;height:100%;background:#000;color:#fff;font-family:Roboto,sans-serif;overflow:hidden;cursor:none}
.center{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:40px}
.center img{height:140px}.code{font:700 140px/1 'Roboto Condensed',sans-serif;letter-spacing:.12em;color:#F2C46B}
.hint{font-size:28px;color:#C9CED4;max-width:1100px}.hint b{color:#fff}
.stage{position:fixed;inset:0;background:#000}.stage img,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s}
.hide{opacity:0}
/* orders board */
.board{height:100%;display:flex;flex-direction:column;background:#14171B}
.bhead{display:flex;align-items:center;gap:24px;padding:14px 28px;background:#fff;color:#1B1E22}
.bhead img{height:56px}.bhead h1{margin:0;font:700 34px 'Roboto Condensed',sans-serif;flex:1}
.bhead .clock{font:500 30px Roboto}.bhead .rd{font:700 22px Roboto;background:linear-gradient(180deg,#B04633,#C39243);color:#fff;padding:8px 16px;border-radius:8px}
.cols{flex:1;display:flex;gap:18px;padding:18px;overflow-x:auto;align-items:flex-start}
.ocard{flex:0 0 440px;background:#1F2429;border:3px solid #2E353D;border-radius:14px;max-height:100%;overflow:hidden;display:flex;flex-direction:column}
.ocard.rush{border-color:#E5484D}
.ohead{padding:14px 16px;border-bottom:1px solid #2E353D;outline:none}
.ohead .t{font:700 30px 'Roboto Condensed',sans-serif}.ohead .s{font-size:19px;color:#AEB6C0;margin-top:4px}
.chip{display:inline-block;font:700 16px Roboto;padding:4px 10px;border-radius:6px;margin-right:8px;text-transform:uppercase;letter-spacing:.04em}
.c-new{background:#2563EB}.c-received{background:#7C3AED}.c-started{background:#C2410C}.c-ready{background:#15803D}.c-rush{background:#E5484D}
.items{overflow-y:auto;padding:8px}
.it{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;font:500 24px/1.25 'IBM Plex Mono',monospace;outline:none}
.it .box{flex:0 0 34px;height:34px;border:3px solid #6C7788;border-radius:8px;display:flex;align-items:center;justify-content:center;font:700 24px Roboto}
.it.done{color:#6C7788;text-decoration:line-through}.it.done .box{background:#15803D;border-color:#15803D;color:#fff}
.it .add{font:700 14px Roboto;background:#F2C46B;color:#1B1E22;padding:2px 8px;border-radius:5px;margin-left:6px;text-decoration:none;display:inline-block}
.focus{box-shadow:0 0 0 5px #F2C46B;background:#2A3038}
.cert{font-size:18px;color:#AEB6C0;padding:4px 16px 14px}
.keys{padding:10px 28px;background:#0E1013;color:#AEB6C0;font-size:20px;display:flex;gap:36px}.keys b{color:#fff}
.empty{flex:1;display:flex;align-items:center;justify-content:center;font-size:40px;color:#6C7788}
.banner{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#B04633,#C39243);padding:40px 70px;border-radius:20px;font:700 64px 'Roboto Condensed',sans-serif;text-align:center;box-shadow:0 20px 80px rgba(0,0,0,.7);animation:pop .4s}
.banner small{display:block;font:500 34px Roboto;margin-top:10px}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.6);opacity:0}}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#fff;color:#1B1E22;padding:14px 26px;border-radius:10px;font:500 24px Roboto}