:root {
  color-scheme:dark;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#0c1018;
  color:#f0f3fa;
  --muted:#8390a5;
  --accent:#97bfff;
  --border:#ffffff0d
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:radial-gradient(ellipse at 80% 0%,#17243977,transparent 55%),#0c1018;
  min-height:100svh
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}
button:disabled {
  cursor:default;
  opacity:.4
}
button:not(:disabled):active {
  transform:scale(.96)
}
[hidden] {
  display:none!important
}
.deck {
  max-width:460px;
  margin:auto;
  padding:calc(26px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom))
}
header {
  margin-bottom:28px
}
.identity {
  display:flex;
  gap:12px;
  align-items:center
}
.mark {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  font-size:25px;
  font-weight:800;
  border:1px solid #829abe45;
  border-radius:13px;
  background:linear-gradient(135deg,#283952,#152030);
  color:#c3d9ff;
  box-shadow:inset 0 1px #ffffff17
}
h1 {
  font-size:19px;
  letter-spacing:2.5px;
  margin:0;
  font-weight:750
}
h1 span {
  font-size:11px;
  letter-spacing:2px;
  color:#7e91ad;
  font-weight:500
}
.identity p {
  font-size:11px;
  color:var(--muted);
  margin:5px 0 0
}
.connection {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:11px;
  color:var(--muted);
  margin:16px 0 0 3px
}
.connection i,.footer-dot {
  height:5px;
  width:5px;
  border-radius:50%;
  background:#758096
}
.connection.online i {
  background:#77dfb1;
  box-shadow:0 0 8px #77dfb166
}
.connection.online {
  color:#a6c5b7
}
.notice {
  border:1px solid #ffffff10;
  background:#ffffff05;
  border-radius:12px;
  padding:12px;
  font-size:12px;
  line-height:1.5;
  color:#afbcd0;
  margin-bottom:20px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin:0 1px 12px
}
h2 {
  margin:0;
  font-size:11px;
  letter-spacing:1.8px;
  font-weight:650;
  text-transform:uppercase;
  color:#a4b1c4
}
.section-heading>span {
  color:#74839a;
  font-size:10px
}
.grid {
  display:grid;
  gap:10px
}
.three {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.tile {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  border-radius:18px;
  min-height:106px;
  background:linear-gradient(155deg,#202b3b,#151d29);
  border:1px solid #ffffff0e;
  box-shadow:inset 0 1px #ffffff08,0 4px 12px #00000019;
  transition:background .18s,box-shadow .18s,transform .1s
}
.ratio {
  font-size:28px;
  font-weight:650;
  letter-spacing:-1.5px;
  line-height:36px
}
.tile-name {
  font-size:9px;
  letter-spacing:1.8px;
  color:#8998ae;
  margin-top:8px
}
.indicator {
  width:15px;
  height:3px;
  border-radius:3px;
  background:#354156;
  margin-top:12px
}
.sun {
  font-size:32px;
  line-height:36px;
  color:#b7c4d6
}
.tile.active {
  background:linear-gradient(145deg,#2b4b73,#1d2b42);
  border-color:#87baff77;
  box-shadow:inset 0 1px #c4e1ff33,0 0 22px #629efd16
}
.tile.active .ratio,.tile.active .tile-name {
  color:#d3e6ff
}
.active .indicator {
  background:#a7cfff;
  box-shadow:0 0 9px #99c4ff
}
.gamma.active {
  background:linear-gradient(145deg,#594626,#30281f);
  border-color:#e5bd6266;
  box-shadow:0 0 20px #cba05815
}
.gamma.active .sun {
  color:#ffda8e
}
.gamma.active .indicator {
  background:#ffd986;
  box-shadow:0 0 9px #ffd986
}
.display-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:10px 0 0;
  gap:4px
}
.display-footer button {
  background:transparent;
  border:0;
  padding:6px 3px;
  font-size:10px;
  color:#91a1b9;
  min-height:30px
}
.display-footer span {
  font-size:9px;
  color:#778499
}
section {
  margin-bottom:24px
}
.music-brand {
  display:flex;
  gap:5px;
  align-items:center
}
.music-brand i {
  font-style:normal;
  color:#edc24f;
  font-size:14px
}
.transport .tile {
  min-height:74px;
  border-radius:16px
}
.media-icon {
  font-size:27px;
  line-height:1
}
.transport .play {
  background:linear-gradient(145deg,#2d3b50,#202c3d);
  border-color:#879bb92e
}
.empty {
  background:#ffffff03;
  border:1px solid var(--border);
  border-radius:16px;
  padding:26px 10px;
  text-align:center;
  font-size:12px;
  color:var(--muted)
}
.open-music {
  width:100%;
  min-height:74px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:16px;
  border-radius:16px;
  background:linear-gradient(135deg,#302a1d,#1d222d);
  border:1px solid #e9c35724;
  font-size:12px;
  font-weight:550
}
.open-music small {
  display:block;
  font-size:10px;
  color:#a29883;
  font-weight:400;
  margin-top:5px
}
.launch-icon {
  font-size:21px;
  color:#eac363
}
.arrow {
  margin-left:auto;
  color:#b3a88a;
  font-size:20px
}
.volume-bar {
  display:grid;
  grid-template-columns:52px 52px 1fr 52px;
  align-items:center;
  padding:5px;
  background:#161f2c;
  border:1px solid var(--border);
  border-radius:16px;
  gap:3px
}
.volume-bar button {
  background:transparent;
  border:0;
  border-radius:11px;
  min-height:46px;
  font-size:24px;
  color:#abbad0
}
.volume-bar #mixer-toggle {
  border-right:1px solid #ffffff0c;
  border-radius:0;
  color:#9babc2;
  font-size:25px
}
.volume-bar #mixer-toggle[aria-expanded="true"] {
  color:#ffbaac;
  background:#ea98751a;
  border-radius:10px
}
.volume-bar output {
  text-align:center;
  font-size:23px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}
.volume-bar output small {
  font-size:12px;
  color:#7c8ca4;
  margin-left:3px
}
.music-track { display:flex; align-items:center; gap:14px; margin-bottom:12px; min-width:0; padding:10px 12px; border:1px solid var(--border); border-radius:15px; background:#161f2c; }
.track-text { flex:1; min-width:0; }
#track-title { margin:0; font-size:13px; font-weight:600; line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
#track-artist { margin:5px 0 0; font-size:11px; color:#8f9db2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-art { flex:0 0 62px; width:62px; height:62px; border-radius:12px; overflow:hidden; display:grid; place-items:center; background:#302a1d; color:#eac363; font-size:28px; }
.track-art img { width:100%; height:100%; object-fit:cover; }
.mixer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease; }
.mixer.open { grid-template-rows:1fr; }
.mixer-clip { overflow:hidden; min-height:0; }
.mixer-content { margin-top:6px; padding:10px 14px; border:1px solid var(--border); border-radius:16px; background:#161f2c; }
.mixer-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#7c8ca4; font-size:10px; }
.mixer-heading button { background:transparent; border:1px solid var(--border); border-radius:10px; min-width:44px; min-height:40px; color:#9babc2; }
.mixer-heading button.active { color:#ffbaac; }
.audio-row { display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; padding:12px 0 3px; }
.audio-row + .audio-row { border-top:1px solid #ffffff08; }
.audio-icon { position:relative; padding:6px; width:44px; height:44px; border:1px solid var(--border); border-radius:12px; background:#161f2c; color:#9babc2; font-size:21px; }
.audio-icon img { width:30px; height:30px; display:block; border-radius:5px; }
.audio-icon[aria-pressed="true"] { border-color:#cf9380; }
.audio-icon[aria-pressed="true"]::after { content:"×"; position:absolute; right:-3px; bottom:-3px; width:17px; height:17px; background:#bd765f; color:#fff; border-radius:50%; font-size:14px; line-height:16px; }
.audio-info { min-width:0; }
.audio-label { display:flex; gap:8px; align-items:baseline; font-size:12px; }
.audio-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1; }
.audio-percent { font-variant-numeric:tabular-nums; color:#b5c5dc; }
.audio-mixed { display:block; color:#8d9db2; font-size:9px; margin-top:4px; }
.audio-slider { display:block; width:100%; margin:0; height:38px; accent-color:#b6cff6; cursor:pointer; touch-action:pan-y; }
@media (prefers-reduced-motion:reduce) { .mixer { transition:none; } }
.power-section {
  margin-top:30px;
  margin-bottom:24px;
  padding-top:21px;
  border-top:1px solid var(--border)
}
.power {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:58px;
  padding:13px 16px;
  border-radius:15px;
  border:1px solid #d094861c;
  background:linear-gradient(120deg,#2a2228,#1c1d28);
  font-size:12px;
  color:#e2b1ad
}
.power-icon {
  font-size:24px;
  line-height:1
}
.power-hint {
  margin-left:auto;
  font-size:9px;
  color:#957d81
}
footer {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:8px;
  color:#627087;
  letter-spacing:1px
}
.footer-dot {
  width:4px;
  height:4px;
  background:#607289
}
.footer-line {
  flex:1
}
dialog {
  width:calc(100% - 36px);
  max-width:370px;
  border:1px solid #ffffff14;
  border-radius:24px;
  background:#17202e;
  padding:28px;
  color:#f0f3fa;
  box-shadow:0 28px 100px #000a
}
dialog::backdrop {
  background:#03070ecc;
  backdrop-filter:blur(8px)
}
dialog h2 {
  font-size:19px;
  text-transform:none;
  letter-spacing:-.5px;
  color:#fff;
  margin-top:18px
}
dialog p {
  font-size:12px;
  line-height:1.7;
  color:#9caabe
}
.dialog-icon {
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:16px;
  background:#ce716224;
  color:#ed9e93;
  font-size:32px
}
.dialog-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:24px
}
.dialog-actions button {
  border:1px solid #ffffff12;
  border-radius:12px;
  min-height:46px;
  background:#263244;
  font-size:12px
}
.dialog-actions .danger {
  background:#cb786d;
  color:#150c0a;
  border-color:#ed9c90;
  font-weight:650
}
.close {
  position:absolute;
  right:15px;
  top:12px;
  width:38px;
  height:38px;
  font-size:24px;
  background:transparent;
  border:0;
  color:#8292a8
}
#toast {
  position:fixed;
  bottom:calc(22px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 40px);
  max-width:410px;
  background:var(--tg-theme-secondary-bg-color,#283448);
  border:1px solid #8599b444;
  border-radius:14px;
  padding:15px 18px;
  box-shadow:0 10px 40px #0008;
  font-size:12px;
  line-height:1.5;
  z-index:10
}
.pending {
  position:relative
}
.pending::after {
  content:"";
  position:absolute;
  width:15px;
  height:15px;
  border:2px solid #bcd9ff33;
  border-top-color:#bcd9ff;
  border-radius:50%;
  right:7px;
  top:7px;
  animation:spin .65s linear infinite
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    animation-duration:1.5s!important
  }
}
@media(max-width:350px) {
  .deck {
    padding-left:15px;
    padding-right:15px
  }
  .ratio {
    font-size:25px
  }
  .tile {
    min-height:98px
  }
  .volume-bar {
    grid-template-columns:46px 46px 1fr 46px
  }
  .power-hint {
    font-size:8px
  }
}
@media(max-height:700px) {
  .deck {
    padding-top:calc(16px + env(safe-area-inset-top))
  }
  header {
    margin-bottom:20px
  }
  section {
    margin-bottom:18px
  }
  .power-section {
    margin-top:22px;
    padding-top:16px;
    margin-bottom:18px
  }
  .tile {
    min-height:100px
  }
}