/* 樂乐 LeYue MusicMotion */
:root {
  --bg: #07060d; --bg2: #0d0b17; --panel: #110f1d; --panel2: #171428; --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.13);
  --tx: #ece9f7; --tx2: #a19cb8; --tx3: #6c6787;
  --cy: #22e4ff; --mg: #ff3cac; --gd: #ffd23f; --vi: #8b5cff; --gn: #2bff9e; --rd: #ff3d5a;
  --r: 12px; --display: 'Chakra Petch', 'Noto Sans SC', system-ui, sans-serif; --body: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--tx); font: 13px/1.45 var(--body); touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body { overflow: hidden; -webkit-tap-highlight-color: transparent; user-select: none; }
input, select, textarea, button { font: inherit; color: inherit; touch-action: manipulation; }
button { cursor: pointer; }
[hidden] { display: none !important; }
a { color: var(--cy); }

/* ---------- header ---------- */
.top { height: 58px; display: flex; align-items: center; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(34,228,255,.06), rgba(255,60,172,.05) 50%, rgba(255,210,63,.04)), var(--bg2); }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand .zh { font: 700 26px/1 'Noto Serif SC', 'Noto Sans SC', serif; background: linear-gradient(120deg, var(--cy), var(--mg) 55%, var(--gd)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255,60,172,.35)); }
.brand div { font: 500 15px/1.1 var(--display); letter-spacing: .04em; }
.brand div b { font-weight: 700; }
.brand small { display: block; color: var(--tx3); font: 500 10px var(--body); letter-spacing: .08em; }
.chips { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.chip { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line2); color: var(--tx2); font: 500 11px var(--display); letter-spacing: .04em; white-space: nowrap; }
.chip.on { color: var(--gn); border-color: rgba(43,255,158,.35); background: rgba(43,255,158,.07); }
.chip.rec { color: #fff; background: var(--rd); border-color: var(--rd); animation: blink 1s steps(2) infinite; }
.chip.dim { color: var(--tx3); }
.top-btns { display: flex; gap: 8px; }
@keyframes blink { 50% { opacity: .55; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--line2); background: var(--panel2); font: 600 12px var(--display); letter-spacing: .05em; text-decoration: none; color: var(--tx); transition: .15s; white-space: nowrap; }
.btn:hover { border-color: rgba(255,255,255,.28); background: #1f1b35; }
.btn.primary { background: linear-gradient(135deg, var(--cy), #4f8bff); color: #031018; border: 0; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.ghost { background: transparent; }
.btn.live { background: linear-gradient(135deg, var(--gn), #10c8a0); color: #021a10; }
.btn.rec, .btn.on { background: var(--rd); border-color: var(--rd); color: #fff; }
.btn.sm { height: 26px; padding: 0 9px; font-size: 11px; }
.btn.danger { color: var(--rd); }
.btn.pulse { box-shadow: 0 0 0 0 rgba(255,210,63,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(255,210,63,0); } 100% { box-shadow: 0 0 0 0 rgba(255,210,63,0); } }
.row-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }

/* ---------- layout ---------- */
.grid { display: grid; grid-template-columns: 290px minmax(0, 1fr) 370px; height: calc(100dvh - 58px); }
.panel { background: var(--bg2); overflow-y: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: #2a2540 transparent; }
.panel.left { border-right: 1px solid var(--line); }
.panel.right { border-left: 1px solid var(--line); padding-top: 0; }
h4 { margin: 0 0 10px; font: 600 11px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--tx2); }
h5 { margin: 16px 0 8px; font: 600 10.5px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--tx3); }
.hint { margin-top: 14px; padding: 10px; border: 1px dashed var(--line2); border-radius: 10px; color: var(--tx3); font-size: 11.5px; }
.hint kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line2); color: var(--tx); font: 600 10px var(--display); text-align: center; }

.center { display: flex; flex-direction: column; gap: 12px; padding: 14px; overflow-y: auto; min-width: 0; }
.stage-wrap { display: flex; justify-content: center; }
.stage { position: relative; width: min(100%, calc(56dvh * 16 / 9)); aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line2);
  box-shadow: 0 30px 80px -30px rgba(34,228,255,.25), 0 0 0 1px rgba(0,0,0,.6); }
.stage canvas { width: 100%; height: 100%; display: block; object-fit: contain; }
.stage.paused::after { content: 'Preview paused — LED output still running'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,4,10,.85); color: var(--tx2); font: 500 13px var(--display); letter-spacing: .06em; }
.stage-tag { position: absolute; left: 12px; top: 10px; padding: 3px 10px; border-radius: 99px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); font: 600 11px var(--display); letter-spacing: .08em; color: #fff; pointer-events: none; }

.master { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mbtn { height: 46px; min-width: 84px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line2); background: var(--panel); font: 700 12px var(--display); letter-spacing: .1em; transition: .1s; }
.mbtn:active, .mbtn.on { transform: scale(.96); }
.mbtn.flash { color: var(--gd); } .mbtn.flash:active { background: var(--gd); color: #1a1300; }
.mbtn.strobe { color: var(--cy); } .mbtn.strobe.on { background: var(--cy); color: #021015; }
.mbtn.burst { color: var(--mg); } .mbtn.burst:active { background: var(--mg); color: #fff; }
.mbtn.black { color: var(--tx2); } .mbtn.black.on { background: #000; border-color: var(--rd); color: var(--rd); }
.master .grow { flex: 1; }
.xf { display: flex; align-items: center; gap: 8px; color: var(--tx2); font-size: 11.5px; }
.xf input { width: 110px; }
.toggle-l { display: flex; align-items: center; gap: 6px; color: var(--tx2); font-size: 11.5px; }

.pads { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pad { text-align: left; padding: 10px 12px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); transition: .15s; position: relative; overflow: hidden; }
.pad:hover { border-color: var(--line2); transform: translateY(-1px); }
.pad.on { border-color: transparent; background: linear-gradient(var(--panel2), var(--panel2)) padding-box, linear-gradient(120deg, var(--cy), var(--mg), var(--gd)) border-box; border: 1.5px solid transparent; box-shadow: 0 8px 30px -10px rgba(255,60,172,.5); }
.pad b { display: block; font: 600 13px var(--display); letter-spacing: .03em; margin-top: 7px; }
.pad small { color: var(--tx3); font-size: 10.5px; }
.sw5 { display: flex; gap: 3px; }
.sw5 i { width: 16px; height: 6px; border-radius: 3px; }

/* ---------- input strips ---------- */
.add-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.add-row .btn { height: 32px; font-size: 11px; padding: 0 8px; }
.demo-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--tx2); font-size: 11.5px; }
.demo-row input { flex: 1; }
.form { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line2); display: grid; gap: 8px; }
.form label { display: grid; gap: 4px; color: var(--tx2); font-size: 11px; }
.form-title { font: 600 12px var(--display); letter-spacing: .06em; }
select, input[type=text], input[type=password], input[type=number], input:not([type]) { height: 32px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line2); background: #0a0914; outline: none; min-width: 0; }
select:focus, input:focus { border-color: var(--cy); }
#channels { display: grid; gap: 8px; margin-top: 12px; }
.strip { padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); transition: border-color .08s; }
.strip.hot { border-color: rgba(255,255,255,.35); }
.strip-h { display: flex; align-items: center; gap: 7px; }
.strip-h b { font: 600 12px var(--display); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-h .type { color: var(--tx3); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.strip-h .x { background: none; border: 0; color: var(--tx3); font-size: 18px; line-height: 1; padding: 0 2px; }
.led { width: 8px; height: 8px; border-radius: 50%; background: #2a2540; transition: .05s; }
.strip.hot .led { background: var(--gn); box-shadow: 0 0 10px var(--gn); }
.meter { height: 6px; border-radius: 3px; background: #0a0914; margin: 8px 0; overflow: hidden; }
.meter i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--cy), var(--gd) 70%, var(--rd)); }
.strip-c { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; align-items: center; }
.strip-c select { height: 28px; font-size: 11px; grid-column: 1 / -1; }
.mini { display: flex; align-items: center; gap: 5px; color: var(--tx3); font-size: 10px; }
.mini input { flex: 1; min-width: 0; }
.tog { height: 24px; border-radius: 6px; border: 1px solid var(--line2); background: transparent; color: var(--tx3); font: 700 10px var(--display); }
.tog.on { background: var(--rd); color: #fff; border-color: var(--rd); }
.keys { display: flex; gap: 4px; }
.key { flex: 1; height: 38px; border-radius: 7px; border: 1px solid var(--line2); background: linear-gradient(#1d1932, #110f1d); font: 700 12px var(--display); color: var(--tx2); }
.key:nth-child(odd) { color: var(--cy); } .key.sp { flex: 1.5; color: var(--gd); }
.key:active { background: var(--cy); color: #021015; }

/* ---------- tabs / mixer ---------- */
.tabs { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 12px 0 10px; background: var(--bg2); }
.tabs button { height: 32px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--tx2); font: 600 11px var(--display); letter-spacing: .08em; }
.tabs button.on { background: var(--panel2); color: var(--tx); border-color: var(--line2); }
.fx { border-radius: 12px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 7px; padding: 9px 10px; transition: .15s; }
.fx.active { border-color: rgba(34,228,255,.28); background: linear-gradient(135deg, rgba(34,228,255,.05), rgba(255,60,172,.04)), var(--panel); }
.fx-h { display: flex; align-items: center; gap: 8px; }
.fx-h b { flex: 1; font: 600 12.5px var(--display); letter-spacing: .02em; cursor: pointer; }
.fx-h b em { color: var(--tx3); font-style: normal; }
.fx-h .ic { font-size: 15px; }
.fx-c { display: grid; grid-template-columns: 1fr 116px; gap: 8px; margin-top: 7px; align-items: center; }
.fx-c select { height: 28px; font-size: 11px; }
.fx-body { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.desc { margin: 0 0 8px; color: var(--tx3); font-size: 11.5px; }
.ctl { display: grid; grid-template-columns: 112px 1fr 36px; align-items: center; gap: 8px; min-height: 28px; color: var(--tx2); font-size: 11.5px; }
.ctl select, .ctl input[type=color] { grid-column: 2 / 4; }
.ctl .sw { grid-column: 2; justify-self: start; }
.ctl-v { text-align: right; color: var(--tx3); font: 500 10.5px var(--display); }

input[type=range] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--cy), var(--mg)); opacity: .55; }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--cy), var(--mg)); opacity: .55; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(34,228,255,.25); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.sw { -webkit-appearance: none; appearance: none; width: 34px; height: 19px; border-radius: 99px; background: #2a2540; position: relative; cursor: pointer; transition: .2s; flex: none; margin: 0; }
.sw::after { content: ''; position: absolute; width: 15px; height: 15px; top: 2px; left: 2px; border-radius: 50%; background: #8d87a8; transition: .2s; }
.sw:checked { background: linear-gradient(90deg, var(--cy), var(--mg)); }
.sw:checked::after { left: 17px; background: #fff; }
input[type=color] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; border: 1px solid var(--line2); border-radius: 8px; background: none; padding: 2px; cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } input[type=color]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.pal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.qp { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); padding: 0; background: none; }
.qp i { flex: 1; } .qp:hover { border-color: #fff; }

.card { padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 10px; display: grid; gap: 8px; }
.card .ttl { font: 600 12px var(--display); letter-spacing: .06em; display: flex; justify-content: space-between; align-items: center; }
.card .sub { color: var(--tx3); font-size: 11.5px; }
.card label.f { display: grid; gap: 4px; color: var(--tx2); font-size: 11px; }
.transport { display: flex; gap: 6px; align-items: center; }
.transport .t { margin-left: auto; color: var(--tx2); font: 500 11px var(--display); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- modal / toast ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(3,2,8,.75); backdrop-filter: blur(10px); }
.modal-card { width: min(340px, 92vw); padding: 26px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line2); display: grid; gap: 12px; text-align: center; box-shadow: 0 40px 100px -20px rgba(139,92,255,.4); }
.modal-card h3 { margin: 0; font: 600 16px var(--display); }
.modal-card .err { color: var(--rd); min-height: 1em; font-size: 12px; }
.logo-sm { font: 700 34px 'Noto Serif SC', serif; background: linear-gradient(120deg, var(--cy), var(--mg), var(--gd)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; }
.toast { padding: 10px 14px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 12.5px; max-width: 360px; transition: .4s; }
.toast.err { border-color: var(--rd); } .toast.warn { border-color: var(--gd); }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- admin ---------- */
.admin .grid { grid-template-columns: 190px minmax(0, 1fr); }
.nav { display: grid; gap: 4px; align-content: start; }
.nav button { text-align: left; height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--tx2); font: 600 12px var(--display); letter-spacing: .05em; }
.nav button.on { background: var(--panel2); border-color: var(--line2); color: var(--tx); }
.admin-main { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.pv-bar { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; padding: 14px; border-bottom: 1px solid var(--line); }
.pv-bar .stage { width: min(100%, calc(38dvh * 16 / 9)); }
.pv-ctl { display: grid; gap: 8px; align-content: start; }
.view { overflow-y: auto; padding: 14px; }
.cols { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; }
.pitem { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 6px; cursor: pointer; }
.pitem.on { border-color: var(--cy); background: var(--panel2); }
.pitem div { flex: 1; min-width: 0; } .pitem b { display: block; font: 600 12.5px var(--display); } .pitem small { color: var(--tx3); font-size: 10.5px; }
.pitem .sw5 { flex-direction: column; } .pitem .sw5 i { width: 10px; height: 5px; }
.pbtns button { background: none; border: 0; color: var(--tx3); padding: 2px 4px; }
.ed-top { display: grid; grid-template-columns: 1fr 180px; gap: 10px; }
.ed-top label { display: grid; gap: 4px; color: var(--tx2); font-size: 11px; }
details.glob { margin: 14px 0 4px; padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
details.glob summary { cursor: pointer; font: 600 12px var(--display); color: var(--tx2); margin-bottom: 6px; }
.bar { height: 6px; border-radius: 3px; background: #0a0914; overflow: hidden; } .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cy), var(--mg), var(--gd)); transition: width .2s; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; }
th { color: var(--tx3); font: 600 10.5px var(--display); letter-spacing: .1em; text-transform: uppercase; }
td small { color: var(--tx3); } td.acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } td.empty { color: var(--tx3); text-align: center; padding: 24px; }
ul.media { list-style: none; margin: 0; padding: 0; } ul.media li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); } ul.media li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ul.media small { color: var(--tx3); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

/* ---------- output ---------- */
body.output { background: #000; cursor: default; }
body.output canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; object-fit: contain; }
body.output.idle { cursor: none; }
body.output.idle #hint { opacity: 0; pointer-events: none; }
#hint { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 18px; border-radius: 99px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.15); color: #fff; font: 500 12px var(--display); letter-spacing: .06em; transition: opacity .6s; cursor: pointer; backdrop-filter: blur(8px); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  body { overflow: auto; }
  .grid { grid-template-columns: 1fr; height: auto; }
  .panel.left, .panel.right { border: 0; border-top: 1px solid var(--line); }
  .center { order: -1; }
  .stage { width: 100%; }
  .admin .grid { grid-template-columns: 1fr; } .admin-main { overflow: visible; } .nav { grid-auto-flow: column; }
  .pv-bar, .cols, .two { grid-template-columns: 1fr; }
  .chips { display: none; }
}
@media (max-width: 560px) { .top { gap: 8px; padding: 0 10px; } .brand div { display: none; } .top-btns .btn { padding: 0 9px; font-size: 11px; } }

/* ---------- art & audience (v1.1) ---------- */
.styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.style-b { height: 64px; border-radius: 10px; border: 1px solid var(--line2); padding: 8px; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; font: 600 11px var(--display); letter-spacing: .03em; position: relative; overflow: hidden; }
.style-b::after { content: ''; position: absolute; right: -10px; top: -10px; width: 46px; height: 46px; border-radius: 50%; background: var(--ink, #000); filter: blur(6px); opacity: .85; }
.style-b.on { outline: 2px solid var(--cy); outline-offset: 1px; }
.aud-box { display: grid; grid-template-columns: 116px 1fr; gap: 10px; align-items: center; }
.aud-box img { width: 116px; height: 116px; border-radius: 8px; background: #fff; padding: 4px; grid-row: span 2; }
.aud-box label, .aud-box button { grid-column: 1 / -1; }
.aud-code { font: 700 28px var(--display); letter-spacing: .18em; color: var(--gd); }
.aud-stats { color: var(--gn); font: 500 11px var(--display); }
#qrOverlay { position: fixed; right: 3vw; bottom: 4vh; display: flex; align-items: center; gap: 1.4vw; padding: 1.2vw 1.6vw; border-radius: 1.2vw; background: rgba(8,6,16,.78); border: 1px solid rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(10px); transition: opacity .6s, transform .6s; }
#qrOverlay.off { opacity: 0; transform: translateY(20px); pointer-events: none; }
#qrOverlay img { width: 9vw; min-width: 90px; aspect-ratio: 1; background: #fff; border-radius: .6vw; padding: .3vw; }
#qrOverlay b { display: block; font: 700 2.2vw var(--display); letter-spacing: .14em; color: #ffd23f; }
#qrOverlay span { font: 500 1.1vw var(--display); letter-spacing: .06em; opacity: .85; }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gal-i { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel2); display: grid; }
.gal-i img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.gal-i div { padding: 8px 10px 0; } .gal-i b { display: block; font: 600 12px var(--display); } .gal-i small { color: var(--tx3); font-size: 10.5px; }
.gal-i button { margin: 8px 10px 10px; justify-self: start; }