:root { color-scheme: dark; font-family: "Segoe UI", Tahoma, sans-serif; color: #f7f9fb; background: #020c10; font-synthesis: none; --green: #00ee91; --muted: #92a1bb; --u: clamp(.35px, .1172333vw, 1px); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(ellipse at 15% 8%, #00492c30, transparent 38%), radial-gradient(ellipse at 80% 70%, #00322420, transparent 50%), #020c10; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button, a, input, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button, a { cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.icon { display: block; flex-shrink: 0; width: 1.3em; height: 1.3em; }
.app-shell { max-width: 853px; margin: 0 auto; padding: calc(26 * var(--u)); }
.brandbar { height: calc(124 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--u)); padding: 0 calc(24 * var(--u)); margin-bottom: calc(24 * var(--u)); }
.brand { display: flex; align-items: center; gap: calc(28 * var(--u)); }
.brand-wave { width: calc(96 * var(--u)); height: calc(88 * var(--u)); color: #00e892; filter: drop-shadow(0 0 12px #00ee9120); }
.brand-name { font-size: calc(68 * var(--u)); line-height: 1.08; font-weight: 750; letter-spacing: calc(-2 * var(--u)); }
.brand-name span { color: var(--green); }
.brand-tagline { margin-top: calc(7 * var(--u)); color: #8595af; font-size: calc(24 * var(--u)); line-height: 1.3; font-weight: 600; letter-spacing: calc(4.5 * var(--u)); }
.settings-button { display: grid; place-items: center; color: #91a3c1; width: calc(50 * var(--u)); height: calc(56 * var(--u)); }
.settings-button .icon { width: 100%; height: 100%; }
.view-tabs { display: grid; grid-template-columns: 1fr 1fr; height: calc(104 * var(--u)); border: calc(2 * var(--u)) solid #2e4351; border-radius: calc(60 * var(--u)); margin: 0 calc(6 * var(--u)) calc(36 * var(--u)); }
.view-tabs a { display: flex; align-items: center; justify-content: center; gap: calc(27 * var(--u)); border: calc(2 * var(--u)) solid transparent; margin: calc(-2 * var(--u)); border-radius: calc(60 * var(--u)); text-decoration: none; color: var(--muted); font-size: calc(34 * var(--u)); font-weight: 650; }
.view-tabs .icon { width: calc(45 * var(--u)); height: calc(45 * var(--u)); }
.view-tabs .selected { border-color: #00dc8b88; background: linear-gradient(110deg, #0b483b, #00af66); color: #f7ffff; box-shadow: inset 0 0 18px #00ee9112; }
.control-card { padding: calc(38 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u)); border: calc(2 * var(--u)) solid #07544699; border-radius: calc(43 * var(--u)); background: linear-gradient(135deg, #06171952, #06101466); }
#songForm { margin: 0; }
.card-heading { margin-bottom: calc(38 * var(--u)); }
h1 { margin: 0; font-size: calc(56 * var(--u)); font-weight: 750; line-height: 1.2; letter-spacing: calc(-1 * var(--u)); }
.card-heading h1 { position: relative; display: flex; align-items: center; gap: calc(15 * var(--u)); padding-left: calc(34 * var(--u)); white-space: nowrap; }
.card-heading h1::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: calc(8 * var(--u)); height: calc(56 * var(--u)); border-radius: 10px; background: linear-gradient(#00f69a,#00ce80); }
.card-heading h1 > span:first-child { color: #35efad; }
.heading-note { display: grid; place-items: center; width: calc(57 * var(--u)); height: calc(58 * var(--u)); margin-left: calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: #18383c9c; color: #b9cbe3; font-size: calc(29 * var(--u)); }
.heading-details { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); margin-top: calc(20 * var(--u)); }
.subtitle { color: var(--muted); margin: 0; font-size: calc(29 * var(--u)); line-height: 1.6; font-weight: 400; }
.master-badge { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); flex-shrink: 0; color: var(--green); border: calc(2.5 * var(--u)) solid var(--green); border-radius: calc(36 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); font-weight: 650; font-size: calc(27 * var(--u)); line-height: 1.3; }
.master-badge .icon { width: calc(31 * var(--u)); height: calc(31 * var(--u)); fill: currentColor; stroke-width: 1.2; }
.field { margin-bottom: calc(39 * var(--u)); min-width: 0; }
label { display: block; color: #f4f6f9; font-size: calc(39 * var(--u)); line-height: 1.5; font-weight: 600; margin-bottom: calc(10 * var(--u)); }
.input-wrap { display: flex; align-items: center; position: relative; height: calc(120 * var(--u)); border: calc(2 * var(--u)) solid #3e5363; border-radius: calc(48 * var(--u)); background: linear-gradient(110deg, #10212a33, #0d1c254d); }
.input-wrap:focus-within { border-color: #00e991; box-shadow: 0 0 0 2px #00e99112; }
input, select { width: 100%; min-width: 0; height: calc(120 * var(--u)); border: calc(2 * var(--u)) solid #3e5363; border-radius: calc(48 * var(--u)); background: #10202a44; color: #f6f7fa; padding: 0 calc(24 * var(--u)); font-size: calc(41 * var(--u)); line-height: 1.3; font-weight: 600; }
.input-wrap input, .input-wrap select { height: 100%; border: 0; background: transparent; border-radius: inherit; padding-left: calc(116 * var(--u)); padding-right: calc(92 * var(--u)); }
input::placeholder { color: #76869e; opacity: 1; font-weight: 500; }
input:disabled { opacity: .4; }
input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field-icon { position: absolute; left: calc(36 * var(--u)); width: calc(48 * var(--u)); height: calc(48 * var(--u)); color: #9baecb; pointer-events: none; }
.clear-field { display: grid; place-items: center; position: absolute; right: calc(23 * var(--u)); width: calc(56 * var(--u)); height: calc(56 * var(--u)); border: 0; border-radius: 50%; background: #1a2e38bd; color: #8091ab; padding: calc(10 * var(--u)); }
.clear-field .icon { width: 100%; height: 100%; }
.clear-field:disabled { opacity: .3; }
.field-row { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: calc(38 * var(--u)); }
.field-row .field { margin-bottom: 0; }
.field-row label { font-size: calc(30 * var(--u)); white-space: nowrap; }
.field-row .input-wrap { height: calc(118 * var(--u)); }
.field-row input, .field-row select { padding-left: calc(116 * var(--u)); padding-right: calc(68 * var(--u)); }
.field-row input { padding-right: calc(83 * var(--u)); }
.key-wrap select { appearance: none; }
select option { color: #f3f8fa; background: #0b1c23; }
.select-chevron { position: absolute; right: calc(26 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); pointer-events: none; }
.tempo-toggle { display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--u)); margin: calc(40 * var(--u)) calc(4 * var(--u)) calc(42 * var(--u)); color: #b3bfd6; font-size: calc(32 * var(--u)); font-weight: 500; cursor: pointer; }
.tempo-toggle input { appearance: none; position: relative; flex: 0 0 calc(112 * var(--u)); width: calc(112 * var(--u)); height: calc(65 * var(--u)); padding: 0; border: calc(2 * var(--u)) solid #526272; border-radius: 99px; background: #23323f; cursor: pointer; transition: background .15s; }
.tempo-toggle input::before { content: ""; position: absolute; width: calc(55 * var(--u)); height: calc(55 * var(--u)); top: calc(3 * var(--u)); left: calc(3 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 1px 5px #0003; transition: transform .15s; }
.tempo-toggle input:checked { border-color: #00ee91; background: linear-gradient(100deg,#00cf79,#00e98d); }
.tempo-toggle input:checked::before { transform: translateX(calc(47 * var(--u))); }
.send-button, .clear-button { display: flex; align-items: center; justify-content: center; gap: calc(33 * var(--u)); width: 100%; min-height: calc(127 * var(--u)); border-radius: calc(58 * var(--u)); font-weight: 750; font-size: calc(42 * var(--u)); line-height: 1.3; }
.send-button { background: linear-gradient(105deg,#00dd86,#13eb91); border: calc(2 * var(--u)) solid #1aee9a; color: #000e0c; }
.send-button .icon { width: calc(53 * var(--u)); height: calc(53 * var(--u)); fill: currentColor; }
.button-divider { height: calc(51 * var(--u)); width: calc(2 * var(--u)); background: #006c4c88; }
.clear-button { margin-top: calc(28 * var(--u)); min-height: calc(121 * var(--u)); background: linear-gradient(110deg,#142832b3,#15242eaa); color: #b8c6df; border: calc(2 * var(--u)) solid #3b5263; font-size: calc(36 * var(--u)); font-weight: 650; }
.clear-button .icon { width: calc(48 * var(--u)); height: calc(53 * var(--u)); }
.operator-footer { display: flex; justify-content: space-between; align-items: center; gap: calc(16 * var(--u)); border-top: calc(2 * var(--u)) solid #18303b; padding-top: calc(40 * var(--u)); margin-top: calc(61 * var(--u)); color: var(--green); font-size: calc(30 * var(--u)); line-height: 1.5; }
#connectionLabel { display: flex; align-items: center; gap: calc(17 * var(--u)); }
#connectionLabel::before { content: ""; flex-shrink: 0; width: calc(23 * var(--u)); height: calc(23 * var(--u)); background: #00cb81; border: calc(3 * var(--u)) solid #3ef3b3; border-radius: 50%; }
#connectionLabel.offline { color: #dda970; }
#connectionLabel.offline::before { background: #be8245; border-color: #edb373; }
.text-button { display: flex; align-items: center; gap: calc(18 * var(--u)); border: 0; background: transparent; padding: 0; color: #8fa1bc; font-size: calc(30 * var(--u)); }
.text-button .icon { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.notice { margin: calc(18 * var(--u)) calc(25 * var(--u)); color: #9fb9cb; font-size: max(14px, calc(23 * var(--u))); overflow-wrap: anywhere; }
.notice:empty { display: none; }
.login-card { margin-top: calc(20 * var(--u)); }
.login-card h1 { font-size: calc(42 * var(--u)); }
.login-card .subtitle { margin: calc(14 * var(--u)) 0 calc(30 * var(--u)); }
.login-card label { margin-top: calc(28 * var(--u)); font-size: calc(30 * var(--u)); }
.login-card .send-button { margin-top: calc(36 * var(--u)); }
.demo-accounts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; font-size: max(13px, calc(22 * var(--u))); color: var(--muted); }
.demo-accounts button { border: 1px solid #355361; border-radius: 20px; background: transparent; color: #c8d7e1; padding: 8px 16px; }
.monitor { padding: calc(38 * var(--u)) calc(32 * var(--u)); border: calc(2 * var(--u)) solid #07544699; border-radius: calc(43 * var(--u)); background: #06131899; }
.monitor-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid #243f49; padding-bottom: calc(38 * var(--u)); color: #92a6ba; font-size: max(12px, calc(23 * var(--u))); font-weight: 600; }
.connection { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-weight: 400; }
.connection i { width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%; position: relative; }
.connection i::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; }
.connection.offline { color: #e3b56f; }
.song { text-align: center; padding: calc(65 * var(--u)) 0; }
.song .label { color: #94a3b8; font-size: max(14px, calc(25 * var(--u))); margin: 0 0 calc(22 * var(--u)); }
.song h1 { font-size: max(32px, calc(64 * var(--u))); overflow-wrap: anywhere; }
.artist { margin: calc(18 * var(--u)) 0 0; color: #b2c4d7; font-size: max(22px, calc(36 * var(--u))); overflow-wrap: anywhere; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: calc(22 * var(--u)); }
.metrics.tempo-hidden { grid-template-columns: 1fr; }
.metric { display: flex; flex-direction: column; align-items: center; min-height: calc(190 * var(--u)); border-radius: calc(22 * var(--u)); padding: calc(25 * var(--u)) 12px; border: 1px solid #264451; background: #10232dbb; }
.metric h2 { margin: 0 0 calc(20 * var(--u)); color: #94a9bc; font-size: max(15px, calc(28 * var(--u))); }
.metric strong { font-size: max(30px, calc(52 * var(--u))); font-weight: 650; line-height: 1.2; }
.metric .key { color: #32efab; }
.unit { margin-top: calc(12 * var(--u)); color: #94a3b8; font-size: max(12px, calc(20 * var(--u))); }
.monitor footer { margin-top: calc(35 * var(--u)); text-align: center; color: #718ba0; font-size: max(12px, calc(21 * var(--u))); }
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; } }
@media (max-width: 370px) { .heading-details { flex-wrap: wrap; } .master-badge { margin-left: auto; } }
/* Display reference: fixed song and metric slots keep every update in place. */
.display-page .view-tabs { margin-inline: calc(6 * var(--u)); margin-bottom: calc(48 * var(--u)); }
.display-page .monitor { margin-inline: calc(6 * var(--u)); padding: calc(58 * var(--u)) calc(30 * var(--u)) calc(52 * var(--u)); border-color: #304c5d; background: linear-gradient(140deg,#07121f88,#07152277); border-radius: calc(46 * var(--u)); }
.display-page .monitor-header { height: calc(104 * var(--u)); padding-bottom: 0; align-items: flex-start; color: #8ca4c2; font-size: calc(32 * var(--u)); line-height: 1.5; border-bottom: calc(2 * var(--u)) solid #233b4b; }
.display-page .connection { gap: calc(22 * var(--u)); font-weight: 650; }
.display-page .connection i { width: calc(37 * var(--u)); height: calc(37 * var(--u)); border-width: calc(3 * var(--u)); margin-top: calc(3 * var(--u)); }
.display-page .connection i::after { inset: calc(5 * var(--u)); }
.display-page .song { height: calc(580 * var(--u)); display: grid; grid-template-rows: calc(70 * var(--u)) calc(250 * var(--u)) calc(140 * var(--u)); padding: calc(80 * var(--u)) 0 calc(40 * var(--u)); text-align: center; }
.display-page .song .label { display: flex; justify-content: center; align-items: center; margin: 0; color: #8da6c7; font-weight: 650; font-size: calc(46 * var(--u)); line-height: 1; }
.display-page .song h1, .display-page .song .artist { display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; overflow: hidden; overflow-wrap: anywhere; text-align: center; margin: 0; padding: 0 calc(8 * var(--u)); }
.display-page .song h1 { height: calc(250 * var(--u)); color: #fafbff; font-size: calc(196 * var(--u)); font-weight: 800; line-height: 1.25; letter-spacing: calc(-5 * var(--u)); }
.display-page .song .artist { height: calc(140 * var(--u)); font-size: calc(80 * var(--u)); color: #8aa4c6; font-weight: 700; line-height: 1.4; }
.display-page .metrics { height: calc(465 * var(--u)); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: calc(22 * var(--u)); transition: grid-template-columns .25s ease, gap .25s ease; }
.display-page .metrics.tempo-hidden { grid-template-columns: minmax(0,1fr) minmax(0,0fr); gap: 0; }
.display-page .metric { height: 100%; min-height: 0; min-width: 0; overflow: hidden; padding: calc(50 * var(--u)) calc(15 * var(--u)) calc(30 * var(--u)); border: calc(2 * var(--u)) solid #253d53; border-radius: calc(46 * var(--u)); background: linear-gradient(120deg,#142536,#152638); }
.display-page .metric h2 { flex: 0 0 calc(65 * var(--u)); margin: 0; color: #8da7c9; font-size: calc(52 * var(--u)); font-weight: 650; line-height: 1.25; }
.display-page .metric strong { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; font-size: calc(144 * var(--u)); font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.display-page .metric .key { color: #21d5f1; }
.display-page .tempo-hidden .key { font-size: calc(216 * var(--u)); }
.display-page .unit { font-size: calc(28 * var(--u)); margin: 0; }
.display-page .monitor footer { display: flex; justify-content: center; align-items: center; height: calc(48 * var(--u)); margin: calc(52 * var(--u)) 0 0; color: #819dbd; font-size: calc(32 * var(--u)); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .display-page .metrics { transition: none; } }
.display-page .metric .key { transition: font-size .25s ease; }
@media (prefers-reduced-motion: reduce) { .display-page .metric .key { transition: none; } }