/* Original one-page flow; readable type and industrial black glass surfaces. */
.jukebox-area{padding:8px max(12px,calc((100% - 920px)/2)) 32px;background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 4px),radial-gradient(ellipse at 0 0,#9333ea0a,transparent 60%),#030304;font-size:16px;scroll-padding-top:130px}.jukebox-area>*{flex-shrink:0}
.now-playing-card,.balance-card,.jukebox-how-to,.jukebox-result,.jukebox-queue-item,.jukebox-advanced-panel{border-radius:2px;border:1px solid #ffffff1a;background:linear-gradient(115deg,#151319c9,#08080be6);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #ffffff06}
.now-playing-card{margin:8px 0 0;padding:14px 16px;border-left:2px solid #a855f7;border-top-color:#9333ea55;animation:none;gap:14px}.now-playing-card img{width:60px;height:60px;border-radius:1px;box-shadow:none}.now-playing-title{font-size:21px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}.now-playing-artist{font-size:16px;line-height:1.45;color:#b2b4bf;white-space:normal;margin-top:4px}.now-playing-label{font-size:12px;line-height:1.5;color:#c084fc;letter-spacing:1.5px;margin-bottom:5px}.now-playing-bar-wrap{height:3px;border-radius:0;margin-top:10px}.now-playing-bar{border-radius:0}
.balance-card{margin:8px 0 0;padding:10px 16px;background:#0b0b0dcc;gap:12px}.balance-icon{width:34px;height:34px;border-radius:1px;font-size:18px}.balance-label{font-size:12px;color:#a8a5b2}.balance-num{font-size:22px}.balance-unit{font-size:15px}.balance-values{gap:24px}.jukebox-cooldown{margin:8px 0 0;font-size:16px;border-radius:2px}.jukebox-how-to{margin:8px 0 0}.jukebox-how-to summary{font-size:15px;min-height:44px;border-radius:2px!important}.jukebox-how-to-row,.jukebox-how-to-row .label{font-size:16px}.jukebox-how-to-row .value{font-size:15px}
.jukebox-search-section{margin:16px 0 0;padding:12px 0 8px;position:sticky;top:0;z-index:3;background:linear-gradient(180deg,#060608 85%,#060608f5);border:0;border-top:1px solid #9333ea66;border-radius:0;box-shadow:0 6px 12px #0007}.jukebox-search-label{font-size:13px;letter-spacing:1.3px;color:#c084fc;margin-bottom:8px}#jukebox-search-input{min-height:54px;padding:12px 52px 12px 14px;font-size:18px;border-radius:2px;background:#0d0c10;border-color:#7b429c;box-shadow:inset 0 1px 5px #000a}#jukebox-search-input::placeholder{color:#aaa5b5}#jukebox-search-input:focus{border-color:#c084fc;box-shadow:inset 0 1px 5px #000a,0 0 10px #9333ea12}.jukebox-search-clear{min-width:44px;min-height:44px;border-radius:2px}
.jukebox-advanced-toggle{min-height:44px;font-size:14px;margin-top:4px;border-radius:2px}.jukebox-advanced-panel{max-height:40vh;overflow-y:auto;border-radius:2px}.jukebox-advanced-panel input,.jukebox-advanced-panel select{font-size:16px!important;min-height:44px;border-radius:2px!important}.jukebox-advanced-panel button{min-height:44px;font-size:14px!important;border-radius:2px!important}.jukebox-advanced-panel .jap-row label,.jukebox-advanced-panel .jap-section-title{font-size:14px}.jukebox-advanced-panel .jap-presets{flex-wrap:wrap}
.jukebox-results{padding:4px 0 0;gap:8px;overflow:visible;max-height:none}.jukebox-result{display:grid;grid-template-columns:48px minmax(0,1fr) 210px;align-items:center;gap:12px;padding:14px;border-left-color:#9333ea55;transition:none}.jukebox-result img{width:48px;height:48px;border-radius:1px}.jukebox-result-title{font-size:20px;font-weight:650;line-height:1.25;white-space:normal;overflow-wrap:anywhere}.jukebox-result-artist{font-size:16px;line-height:1.4;white-space:normal;color:#b2b4bf;margin-top:3px}.jukebox-pay-btns{display:flex;flex-direction:row;gap:8px}.jukebox-pay-btn{flex:1;min-height:46px;font-size:16px;font-weight:650;padding:10px 12px;border-radius:2px;background:linear-gradient(135deg,#9333ea26,#7c3aed0c);border:1px solid #a855f78c;color:#e9d5ff;box-shadow:inset 0 1px 0 #c084fc18}.jukebox-pay-btn.token{background:linear-gradient(135deg,#fbbf241c,#f59e0b08);border-color:#fbbf2480;color:#fde68a;box-shadow:inset 0 1px 0 #fbbf2418}.jukebox-pay-btn:active:not(:disabled){transform:none;background:#9333ea44}.jukebox-pay-btn.token:active:not(:disabled){background:#fbbf242e}.jukebox-pay-btn:disabled{opacity:.4}
.jukebox-divider{margin:16px 0 0;background:#ffffff12}.loyalty-redeem-tiers{padding:0;margin-top:10px}.loyalty-tier-row{min-height:48px;border-radius:2px;font-size:15px;background:#9333ea0d}.loyalty-tier-label{white-space:normal}.loyalty-tier-cta{font-size:14px;border-radius:2px}.jukebox-up-next-label{padding:18px 0 10px;font-size:16px;color:#c084fc;letter-spacing:1.5px}.jukebox-queue-list{padding:0;gap:8px}.jukebox-queue-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:14px;align-items:center}.jukebox-queue-item img{width:48px;height:48px;border-radius:1px;grid-row:1}.jukebox-queue-info{grid-column:2/4;min-width:0}.jukebox-queue-title{font-size:20px;line-height:1.25;white-space:normal;overflow-wrap:anywhere}.jukebox-queue-artist{font-size:16px;color:#b2b4bf;white-space:normal;line-height:1.4;margin-top:3px}.jukebox-queue-by{grid-column:1/3;max-width:none;font-size:14px;color:#aaa5b5;white-space:normal;overflow-wrap:anywhere}.jbx-vote-cell{grid-column:3;min-height:44px;justify-content:flex-end}.jbx-vote-btn,.jbx-cancel-btn{font-size:15px;min-height:44px;padding:10px 12px;border-radius:2px}.jbx-vote-btn{background:linear-gradient(135deg,#fbbf2426,#f59e0b12);border:1px solid #fbbf2480;color:#fde68a}.jbx-vote-count,.jbx-next-tag{font-size:13px;border-radius:1px}.jbx-next-tag{color:#c084fc;border-color:#9333ea55;background:#9333ea0d}.jbx-vote-self,.jbx-vote-locked,.jbx-vote-capped{font-size:13px;border-radius:2px;white-space:normal}.jukebox-empty{font-size:16px;color:#aaa5b5;padding:22px 12px}
#jukebox-barcode-section{margin:8px 0 0!important}#jukebox-barcode-section input{font-size:18px!important;border-radius:2px!important;min-height:48px}.barcode-modal{border-radius:2px;max-height:calc(var(--jbx-height,100dvh) - 24px);overflow:auto;background:linear-gradient(135deg,#17131c,#0a090d)}.barcode-modal input{font-size:22px;border-radius:2px;min-height:54px}.barcode-modal h3{font-size:21px}.barcode-modal p,.barcode-modal-error{font-size:16px}.barcode-modal button{font-size:17px;min-height:48px;border-radius:2px}.barcode-modal-backdrop{top:var(--jbx-top,0px);bottom:auto;height:var(--jbx-height,100dvh)}.app-toast{border-radius:2px;font-size:16px}.jukebox-area button:focus-visible{outline:2px solid #e9d5ff;outline-offset:3px}
@media(max-width:760px){.jukebox-area{padding:4px 12px 24px}.jukebox-result{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:12px}.jukebox-result img{width:44px;height:44px}.jukebox-pay-btns{grid-column:1/-1;margin-top:2px}.jukebox-pay-btn{min-height:46px;font-size:16px;padding:10px}.now-playing-card{padding:12px;gap:12px}.now-playing-card img{width:52px;height:52px}.balance-card{padding:8px 12px}.balance-icon,.balance-label{display:none}.balance-values{margin:0}.jukebox-queue-item{padding:12px}.jbx-search-focus .top-bar,.jbx-search-focus #now-playing-card,.jbx-search-focus #balance-card,.jbx-search-focus #jukebox-how-to,.jbx-search-focus #jukebox-barcode-section{display:none!important}.jbx-search-focus .jukebox-search-label,.jbx-search-focus .jukebox-advanced-toggle,.jbx-search-focus .jukebox-advanced-panel{display:none!important}.jbx-search-focus .jukebox-search-section{margin-top:0;padding:8px 0;border-top:0}.jbx-search-focus .jukebox-area{scroll-padding-top:76px}.jbx-search-focus .app-container{position:fixed;left:0;right:0;top:var(--jbx-top,0px);height:var(--jbx-height,100dvh)!important}.top-bar .lang-toggle,.top-bar .lang-toggle button{border-radius:2px}}
@media(prefers-reduced-motion:reduce){.jukebox-area *{animation:none!important;scroll-behavior:auto!important}}