/* TweakFC Jukebox (js/jukebox.js) — Flight Deck look: MFD glass, HUD green for information,
   master-caution amber for the one action (PLAY), square corners. */
.jb-launch { display: inline-block; margin: 10px 0 0 8px; background: transparent; border: 1px solid rgba(60, 255, 139, 0.45); color: var(--tfc-accent, #3CFF8B); border-radius: 0; padding: 7px 12px; font: 700 13px var(--display); letter-spacing: .2em; cursor: pointer; }
.jb-launch small { font: 400 11px var(--sans); letter-spacing: 0; color: var(--muted); margin-left: 6px; }

/* HUD mini-player */
.jb-bar { position: fixed; left: 14px; bottom: 14px; z-index: 24; display: flex; align-items: center; gap: 8px; max-width: min(560px, calc(100vw - 28px));
  padding: 6px 8px; background: rgba(5, 9, 12, 0.86); border: 1px solid rgba(60, 255, 139, 0.35); color: #3CFF8B; font: 400 13px var(--sans);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); backdrop-filter: blur(4px); transition: max-width .25s ease, opacity .25s; }
.jb-bar.hidden { display: none; }
.jb-bar button { background: transparent; border: 1px solid rgba(60, 255, 139, 0.35); color: #3CFF8B; font: 600 12px var(--display); letter-spacing: .12em; height: 30px; min-width: 30px; padding: 0 8px; cursor: pointer; border-radius: 0; box-shadow: none; clip-path: none; text-transform: uppercase; }
.jb-bar button:hover { background: rgba(60, 255, 139, 0.12); }
.jb-bar button:disabled { opacity: .35; cursor: default; }
.jb-bar .jb-play.on { background: #FFB020; color: #1A1200; border-color: #FFB020; }
.jb-chip { width: 30px; padding: 0 !important; display: grid; place-items: center; }
.jb-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.jb-eq b { width: 3px; height: 4px; background: currentColor; }
.jb-bar.playing .jb-eq b { animation: jb-eq .9s ease-in-out infinite; }
.jb-bar.playing .jb-eq b:nth-child(2) { animation-delay: -.3s; }
.jb-bar.playing .jb-eq b:nth-child(3) { animation-delay: -.6s; }
@keyframes jb-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.jb-now { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.15; }
.jb-st { font: 600 10px var(--display); letter-spacing: .18em; text-transform: uppercase; color: #8FB8A1; }
.jb-title { font: 600 14px var(--display); letter-spacing: .04em; color: #D3DCE4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-time { font: 400 12px var(--mono); color: #8FB8A1; }
.jb-vol { width: 80px; accent-color: #3CFF8B; }
.jb-bar.tuck { max-width: 260px; opacity: .78; }
.jb-bar.tuck .jb-vol, .jb-bar.tuck .jb-swap, .jb-bar.tuck .jb-next, .jb-bar.tuck .jb-time { display: none; }

/* window */
.jb-win { position: fixed; inset: 0; z-index: 60; background: rgba(4, 6, 8, 0.72); display: grid; place-items: center; }
.jb-win.hidden { display: none; }
.jb-panel { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: #05090C; color: #D3DCE4; border: 2px solid #18212A;
  box-shadow: 0 0 0 6px #10161C, 0 18px 60px rgba(0, 0, 0, .6); padding: 18px 20px 20px; font: 400 14px var(--sans);
  background-image: repeating-linear-gradient(0deg, rgba(60, 255, 139, 0.025) 0 1px, transparent 1px 4px); }
.jb-head { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(60, 255, 139, 0.25); padding-bottom: 12px; }
.jb-head h2 { margin: 0; font: 700 22px var(--display); letter-spacing: .3em; color: #3CFF8B; }
.jb-tabs { display: flex; gap: 6px; flex: 1; }
.jb-tabs button { background: transparent; border: 1px solid rgba(60, 255, 139, 0.3); color: #8FB8A1; padding: 6px 12px; text-align: left; font: 600 13px var(--display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-radius: 0; clip-path: none; box-shadow: none; }
.jb-tabs button small { display: block; font: 400 11px var(--sans); letter-spacing: 0; text-transform: none; color: #66737F; }
.jb-tabs button.on { color: #05090C; background: #3CFF8B; border-color: #3CFF8B; }
.jb-tabs button.on small { color: #0b2a18; }
.jb-x { background: transparent; border: 1px solid #18212A; color: #8E9DAB; width: 34px; height: 34px; font-size: 20px; cursor: pointer; border-radius: 0; clip-path: none; box-shadow: none; }
.jb-np { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(60, 255, 139, 0.15); }
.jb-np-l { flex: 1; min-width: 0; }
.jb-lbl { font: 600 11px var(--display); letter-spacing: .2em; color: #FFB020; }
.jb-np h3 { margin: 4px 0 2px; font: 700 28px var(--display); letter-spacing: .04em; color: #3CFF8B; text-transform: uppercase; }
.jb-meta { font: 400 13px var(--mono); color: #8FB8A1; }
.jb-prog { margin-top: 12px; height: 8px; background: rgba(60, 255, 139, 0.15); cursor: pointer; }
.jb-prog i { display: block; height: 100%; width: 0; background: #3CFF8B; }
.jb-ptime { font: 400 12px var(--mono); color: #8FB8A1; margin-top: 4px; }
.jb-nextup { margin-top: 8px; color: #8E9DAB; font-size: 13px; }
.jb-note, .jb-stale { margin-top: 8px; color: #8E9DAB; font-size: 12px; }
.jb-err { margin-top: 8px; color: #FF6B5B; font-size: 13px; }
.jb-np-r { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.jb-np-r button { min-width: 140px; height: 40px; background: transparent; border: 1px solid rgba(60, 255, 139, 0.4); color: #3CFF8B; font: 700 14px var(--display); letter-spacing: .2em; cursor: pointer; border-radius: 0; clip-path: none; box-shadow: none; }
.jb-np-r button:disabled { opacity: .35; cursor: default; }
.jb-np-r .jb-big { background: #FFB020; border-color: #FFB020; color: #1A1200; height: 48px; }
.jb-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; padding-top: 12px; }
.jb-lib h4, .jb-set h4 { margin: 12px 0 6px; font: 600 12px var(--display); letter-spacing: .2em; color: #8FB8A1; text-transform: uppercase; }
.jb-lib ul { list-style: none; margin: 0; padding: 0; }
.jb-lib li { display: grid; grid-template-columns: 48px 1fr auto 46px; gap: 8px; align-items: baseline; padding: 6px 8px; border-bottom: 1px solid rgba(60, 255, 139, 0.08); cursor: pointer; }
.jb-lib li:hover { background: rgba(60, 255, 139, 0.06); }
.jb-lib li.cur { background: rgba(255, 176, 32, 0.12); }
.jb-lib li.cur b { color: #FFB020; }
.jb-lib li.empty { display: block; color: #66737F; cursor: default; }
.jb-lib .slot, .jb-lib .dur { font: 400 12px var(--mono); color: #8FB8A1; }
.jb-lib b { font-weight: 600; color: #D3DCE4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jb-lib .meta { font-size: 12px; color: #66737F; white-space: nowrap; }
.jb-sl { display: grid; grid-template-columns: 1fr 120px 44px; gap: 8px; align-items: center; font-size: 13px; color: #D3DCE4; margin: 6px 0; }
.jb-sl input { accent-color: #3CFF8B; }
.jb-sl output { font: 400 12px var(--mono); color: #8FB8A1; text-align: right; }
.jb-ck { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: 8px 0; }
.jb-ck input { accent-color: #3CFF8B; }
.jb-small { font-size: 12px; color: #8E9DAB; margin: 6px 0; }
.jb-sw { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; }
.jb-sw span { flex: 1; }
.jb-sw code { font: 400 12px var(--mono); color: #8FB8A1; }
.jb-sw button { background: transparent; border: 1px solid rgba(60, 255, 139, 0.35); color: #3CFF8B; padding: 3px 8px; font: 600 11px var(--display); letter-spacing: .12em; cursor: pointer; border-radius: 0; clip-path: none; box-shadow: none; }
.jb-credit { margin-top: 14px; font-size: 12px; color: #66737F; }
@media (max-width: 760px) { .jb-cols { grid-template-columns: 1fr; } .jb-np { flex-direction: column; } .jb-head { flex-wrap: wrap; } }