@font-face {
  font-family: "Great Vibes";
  src: url("fonts/GreatVibes-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg-image: url("bg.jpg");
  --bg-blur: 0px;
  --bg-dim: 0;
  --bg-scale: 1.05;
  --bg-saturate: 1.05;
  --bg-brightness: 1.02;
  --text: rgba(255,255,255,0.96);
  --text-2: rgba(255,255,255,0.84);
  --text-3: rgba(255,255,255,0.74);
  --icon: #ffffff;
  --glass: rgb(20 16 14 / calc(0.18 + var(--bg-dim) * 0.10));
  --glass-border: rgba(255,255,255,0.40);
  --glass-shadow: none;
  --play-bg: rgb(20 16 14 / 0.18);
  --play-border: rgba(255,255,255,0.42);
  --play-shadow: none;
  --bar-track: rgba(255,255,255,0.32);
  --bar-fill: rgba(255,255,255,0.95);
  --tag-bg: rgba(255,255,255,0.18);
  --live-bg: rgb(20 16 14 / 0.22);
  --live-border: rgba(255,255,255,0.40);
  --chip-text: rgba(255,255,255,0.94);
  --station: rgba(255,255,255,0.80);
  --line: rgba(255,255,255,0.16);
  --nav: 0px;
}
body.dark {
  --bg-saturate: 0.92;
  --bg-brightness: 0.62;
  --text: rgba(255,255,255,0.94);
  --text-2: rgba(255,255,255,0.68);
  --text-3: rgba(255,255,255,0.46);
  --icon: #f5f5f7;
  --glass: rgb(28 24 22 / calc(0.46 + var(--bg-dim) * 0.3));
  --glass-border: rgba(255,255,255,0.16);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.14);
  --play-bg: rgba(255,255,255,0.16);
  --play-border: rgba(255,255,255,0.22);
  --play-shadow: 0 12px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
  --bar-track: rgba(255,255,255,0.18);
  --bar-fill: rgba(255,255,255,0.88);
  --tag-bg: rgba(255,255,255,0.12);
  --live-bg: rgba(12,10,10,0.5);
  --live-border: rgba(255,255,255,0.18);
  --chip-text: rgba(255,255,255,0.9);
  --station: rgba(255,255,255,0.52);
  --line: rgba(255,255,255,0.12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "MiSans", "HarmonyOS Sans", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: #111;
  overflow: hidden;
  text-shadow: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea { -webkit-user-select: text; user-select: text; }
.hidden { display: none !important; }
.phone {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  background: #161311;
}
.bg, #water, .veil { position: absolute; inset: 0; }
.bg {
  background: var(--bg-image) center/cover no-repeat;
  transform: scale(var(--bg-scale));
  filter: saturate(var(--bg-saturate)) brightness(var(--bg-brightness)) blur(var(--bg-blur));
}
#water { z-index: 0; width: 100%; height: 100%; display: none; }
.veil {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 28%, rgba(255,255,255,0.08) 55%, rgba(30,20,18,0.28) 100%),
    rgba(22, 16, 18, var(--bg-dim));
}
body.dark .veil {
  background:
    linear-gradient(180deg, rgba(8,6,6,0.42) 0%, rgba(8,6,6,0.22) 30%, rgba(6,4,4,0.28) 55%, rgba(4,3,3,0.55) 100%),
    rgba(0, 0, 0, var(--bg-dim));
}
body.login-mode .veil {
  background: linear-gradient(180deg, rgba(16,12,14,0.07) 0%, rgba(16,12,14,0.02) 30%, rgba(16,12,14,0.04) 70%, rgba(16,12,14,0.14) 100%);
}
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}
.screen { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; }
.status {
  flex: none;
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 22px 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-shadow: none;
}
.status .icons { display: flex; gap: 5px; align-items: center; color: var(--icon); }
.status svg, .icon-btn svg, .ctrl svg, .play svg, .tab svg { filter: none; }
.nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 18px 4px;
}
.nav.center { height: 44px; justify-content: center; padding: 0 12px; position: relative; }
.nav h1 { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; text-shadow: none; }
.nav .back {
  position: absolute; left: 10px; top: 0; bottom: 0;
  display: inline-flex; align-items: center; gap: 2px;
  background: none; border: none; color: var(--text);
  font-size: 17px; font-weight: 450; padding: 0 8px; text-shadow: none;
}
.chip, .icon-btn {
  border: none;
  color: var(--chip-text);
  text-shadow: none;
}
.chip {
  height: 34px; padding: 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 500;
}
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--icon);
}
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: 2px 24px;
}
.vinyl-stage { position: relative; width: 268px; height: 236px; flex: none; }
.vinyl-disc { position: absolute; left: 16px; top: 0; width: 236px; height: 236px; }
.vinyl {
  width: 236px; height: 236px; border-radius: 50%; position: relative; overflow: hidden;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1.5px solid rgba(255,255,255,0.78);
  box-shadow: none;
}
.vinyl.playing { animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.grooves {
  position: absolute; inset: 8px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0) 0 4.6px,
    rgba(255,255,255,0.28) 4.9px 5.4px,
    rgba(255,255,255,0) 5.8px 9.2px);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 62px, #000 63px);
  mask: radial-gradient(circle at 50% 50%, transparent 62px, #000 63px);
}
.label {
  position: absolute; top: 50%; left: 50%; width: 118px; height: 118px;
  transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255,255,255,0.82); box-shadow: none;
}
.label img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spindle {
  position: absolute; top: 50%; left: 50%; width: 11px; height: 11px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(28,24,22,0.72) 0 42%, rgba(28,24,22,0.4) 62%, rgba(255,255,255,0.2) 100%);
  border: 2px solid rgba(255,255,255,0.9); box-shadow: none;
}
.sheen {
  position: absolute; left: 16px; top: 0; width: 236px; height: 236px; border-radius: 50%;
  pointer-events: none; z-index: 3; box-shadow: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.14) 14%, transparent 32%, transparent 64%, rgba(255,255,255,0.10) 80%, transparent 100%);
}
.tonearm {
  position: absolute; top: -2px; right: 10px; width: 22px; height: 168px;
  transform-origin: 11px 11px; transform: rotate(16deg); z-index: 4; pointer-events: none;
}
.tonearm .pivot {
  position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.85); box-shadow: none;
}
.tonearm .pivot::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.75);
}
.tonearm .shaft {
  position: absolute; top: 19px; left: 7.5px; width: 7px; height: 118px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0.82) 40%, rgba(255,255,255,0.50));
  border: 1px solid rgba(255,255,255,0.72); box-shadow: none;
}
.tonearm .head {
  position: absolute; bottom: 16px; left: 3px; width: 16px; height: 22px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.48));
  border: 1px solid rgba(255,255,255,0.8); box-shadow: none; transform: rotate(-12deg);
}
.live {
  position: absolute; top: 6px; left: 0; z-index: 5;
  height: 26px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px; color: #fff;
  background: var(--live-bg); border: 1px solid var(--live-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-shadow: none;
}
.live i {
  width: 7px; height: 7px; border-radius: 50%; background: #ff5a5f;
  box-shadow: 0 0 0 3px rgba(255,90,95,0.28);
}
.notes { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.note {
  position: absolute; color: rgba(255,255,255,0.92); opacity: 0;
  filter: drop-shadow(0 0 2.5px rgba(255,255,255,0.9)) drop-shadow(0 0 1px rgba(255,255,255,0.75));
}
.note svg { display: block; width: 100%; height: 100%; }
.vinyl.playing ~ .notes .note,
.vinyl-stage:has(.playing) .note {
  animation: note-breathe var(--dur, 4s) ease-in-out var(--del, 0s) infinite;
}
@keyframes note-breathe {
  0% { opacity: 0.2; transform: translateY(0) scale(0.9) rotate(var(--r, 0deg)); }
  40% { opacity: 0.8; transform: translateY(-10px) scale(1.05) rotate(var(--r, 0deg)); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.96) rotate(var(--r, 0deg)); }
}
.meta { width: 100%; text-align: center; flex: none; text-shadow: none; }
.meta .station {
  font-size: 12px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--station); margin-bottom: 4px;
}
.meta h1 { font-size: 24px; font-weight: 650; letter-spacing: -0.3px; line-height: 1.25; text-shadow: none; }
.meta .artist { margin-top: 4px; font-size: 15px; color: var(--text-2); text-shadow: none; }
.lyrics {
  width: 100%; height: 66px; position: relative; flex: none; margin-top: 6px; overflow: hidden; pointer-events: none;
}
.lyrics p {
  position: absolute; left: 0; right: 0; top: 0; height: 22px; margin: 0; padding: 0 8px;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #fff; text-shadow: none; line-height: 22px; font-size: 13.5px; font-weight: 450;
  opacity: 0; transition: transform .7s ease, opacity .7s ease, font-size .7s ease;
}
.lyrics p.on-prev { transform: translateY(0); opacity: 0.45; }
.lyrics p.on-now { transform: translateY(22px); opacity: 1; font-size: 16px; font-weight: 500; }
.lyrics p.on-next { transform: translateY(44px); opacity: 0.45; }
.progress { width: 100%; flex: none; position: relative; padding-top: 13px; }
.eq {
  position: absolute; left: 0; right: 0; top: 0; height: 11px;
  display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none;
}
.eq i {
  display: block; width: 1.7px; height: 11px; border-radius: 999px; flex: none;
  background: rgba(255,255,255,0.72); transform-origin: center bottom; transform: scaleY(0.28);
}
.phone:has(.vinyl.playing) .eq i { animation: var(--eq, eq-a) var(--dur, .7s) ease-in-out var(--del, 0s) infinite; }
@keyframes eq-a { 0%,100% { transform: scaleY(.22) } 30% { transform: scaleY(.88) } 58% { transform: scaleY(.36) } 78% { transform: scaleY(1) } }
@keyframes eq-b { 0%,100% { transform: scaleY(.3) } 42% { transform: scaleY(1) } 68% { transform: scaleY(.42) } }
@keyframes eq-c { 0%,100% { transform: scaleY(.18) } 22% { transform: scaleY(.7) } 48% { transform: scaleY(.32) } 74% { transform: scaleY(.95) } }
.bar { height: 4px; border-radius: 999px; background: var(--bar-track); overflow: hidden; position: relative; z-index: 1; }
.bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--bar-fill); }
.times {
  margin-top: 6px; display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; text-shadow: none;
}
.controls { width: 100%; display: flex; align-items: center; justify-content: center; gap: 28px; flex: none; }
.ctrl {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  color: var(--icon); border: 1px solid var(--glass-border); background: var(--glass);
  box-shadow: none; backdrop-filter: blur(20px);
}
.ctrl svg { width: 22px; height: 22px; }
.play {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--play-bg); border: 1px solid var(--play-border); box-shadow: var(--play-shadow);
  color: var(--icon); backdrop-filter: blur(20px);
}
.play svg { width: 26px; height: 26px; }
.queue-hint {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 0 4px; color: var(--text-3); background: none; border: none; opacity: 0.85;
}
.queue-hint .grab { width: 32px; height: 4px; border-radius: 999px; background: currentColor; opacity: 0.7; }
.queue-hint .txt { font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; gap: 2px; text-shadow: none; }
.dj-card {
  flex: none; margin: 0 20px 8px; border-radius: 22px; padding: 11px 16px 12px; text-align: left; text-shadow: none;
}
.dj-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.dj-top .name { font-size: 13px; font-weight: 600; }
.dj-top .tag { font-size: 11px; color: var(--text-2); padding: 3px 8px; border-radius: 999px; background: var(--tag-bg); }
.dj-card p {
  font-size: 13px; line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dock {
  flex: none; margin: 6px 28px calc(18px + var(--nav)) ; height: 58px; border-radius: 999px;
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 0 6px; z-index: 7;
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 500; color: var(--text-3); background: none; border: none; text-shadow: none;
}
.tab.active { color: var(--text); }
.tab svg { width: 20px; height: 20px; }
.dim {
  position: absolute; inset: 0; z-index: 4;
  background: linear-gradient(180deg, rgba(20,16,14,0.10), rgba(20,16,14,0.40));
}
.sheet {
  --text: rgba(20,18,16,0.95);
  --text-2: rgba(28,28,30,0.62);
  --text-3: rgba(28,28,30,0.48);
  --icon: #1c1c1e;
  color: var(--text);
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  border-radius: 28px 28px 0 0;
  background: rgba(248,246,244,0.80);
  border: 1px solid rgba(255,255,255,0.55);
  border-bottom: none;
  box-shadow: 0 -16px 48px rgba(20,15,10,0.16);
  backdrop-filter: blur(40px) saturate(170%);
  -webkit-backdrop-filter: blur(40px) saturate(170%);
  display: flex; flex-direction: column;
  padding: 8px 0 calc(96px + var(--nav));
  max-height: 88%;
  text-shadow: none;
}
#sheet-queue { height: 68%; }
body.dark .sheet {
  --text: rgba(255,255,255,0.94);
  --text-2: rgba(255,255,255,0.68);
  --text-3: rgba(255,255,255,0.46);
  background: rgba(28,24,22,0.78);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 -16px 48px rgba(0,0,0,0.4);
}
.sheet .grabber {
  width: 40px; height: 5px; border-radius: 999px; background: rgba(28,28,30,0.18);
  margin: 4px auto 10px; border: none; flex: none;
}
body.dark .sheet .grabber { background: rgba(255,255,255,0.22); }
.sheet-head { padding: 0 22px 10px; flex: none; }
.sheet-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.sheet-head .sub { margin-top: 4px; font-size: 12px; color: var(--text-3); }
.queue { flex: 1; min-height: 0; overflow: auto; padding: 0 14px 8px; }
.queue::-webkit-scrollbar { width: 0; }
.q-song, .q-dj { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: none; border: none; width: 100%; text-align: left; color: inherit; }
.q-song.now { background: rgba(255,255,255,0.38); }
body.dark .q-song.now { background: rgba(255,255,255,0.08); }
.thumb { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.q-meta { flex: 1; min-width: 0; }
.q-meta .t { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-meta .a { margin-top: 2px; font-size: 11px; color: var(--text-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.src-tag { flex: none; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: rgba(28,28,30,0.08); color: var(--text-3); }
body.dark .src-tag { background: rgba(255,255,255,0.10); }
.dur { flex: none; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mini-eq { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 12px; width: 11px; }
.mini-eq i { width: 2px; height: 12px; border-radius: 999px; background: currentColor; transform-origin: bottom; animation: eqb .8s ease-in-out infinite; }
@keyframes eqb { 0%,100% { transform: scaleY(.28) } 40% { transform: scaleY(1) } 70% { transform: scaleY(.45) } }
.q-dj { background: rgba(255,236,228,0.62); }
body.dark .q-dj { background: rgba(90,58,48,0.50); }
.ava { border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none; }
.ava.keke { background: #161412; }
.ava.kupa { background: #3a3d4a; }
.ava svg { width: 100%; height: 100%; display: block; }
.sheet-body { padding: 0 20px; overflow: auto; }
.section { margin-bottom: 16px; }
#page-settings .section { margin-bottom: 6px; }
#page-settings .label { margin-bottom: 4px; font-size: 11px; }
.sec-label, .label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.6px; color: var(--text-3); margin: 0 4px 8px;
}
.voices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.voice {
  border-radius: 20px; padding: 14px 12px; text-align: left;
  background: rgba(255,255,255,0.50); border: 1px solid rgba(255,255,255,0.62);
  color: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  box-shadow: none;
}
.voice.on { background: rgba(28,28,30,0.90); color: #fff; border-color: rgba(28,28,30,0.92); }
.voice .t { font-size: 15px; font-weight: 650; }
.voice .d { margin-top: 3px; font-size: 11px; opacity: 0.62; }
.voice .ava { width: 48px; height: 48px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topic {
  height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.52); color: rgba(28,28,30,0.82);
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
}
.topic .tick { display: none; }
.topic.on { background: rgba(28,28,30,0.88); color: #fff; border-color: transparent; }
.topic.on .tick { display: block; }
.seg {
  display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 3px; border-radius: 14px;
  background: rgba(28,28,30,0.08); border: 1px solid rgba(255,255,255,0.45);
}
.seg.two { grid-template-columns: 1fr 1fr; width: 148px; border-radius: 9px; padding: 2px; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); }
.seg-item {
  height: 36px; border: none; border-radius: 11px; background: transparent;
  color: rgba(28,28,30,0.56); font-size: 13px; font-weight: 560;
}
.seg.two .seg-item { height: 26px; border-radius: 7px; color: var(--text-3); }
.seg-item.on { background: rgba(255,255,255,0.88); color: rgba(20,18,16,0.92); font-weight: 650; }
.seg.two .seg-item.on { background: #fff; color: rgba(20,18,16,0.92); }
#screen-login:has(#login-overlay:not(.hidden)) .login-bottom,
#screen-login:has(#login-overlay:not(.hidden)) .agree { visibility: hidden; }
.cta {
  margin: 8px 20px 0; height: 52px; border-radius: 999px; border: none;
  background: rgba(28,28,30,0.92); color: #fff; font-size: 16px; font-weight: 600;
}
body.dark .voice { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); color: #fff; }
body.dark .voice.on { background: #fff; color: #1c1c1e; }
body.dark .topic { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: #fff; }
body.dark .topic.on { background: #fff; color: #1c1c1e; }
body.dark .seg { background: rgba(255,255,255,0.08); }
body.dark .seg-item { color: rgba(255,255,255,0.7); }
body.dark .seg-item.on { background: #fff; color: #1c1c1e; }
body.dark .cta { background: #fff; color: #1c1c1e; }
.content { flex: 1; min-height: 0; overflow: auto; padding: 2px 16px 6px; }
.content::-webkit-scrollbar { width: 0; }
.content .label { margin: 0 10px 6px; font-size: 12px; }
.group {
  border-radius: 18px; overflow: hidden; margin-bottom: 8px;
  background: var(--glass); border: 1px solid var(--glass-border);
  box-shadow: none; backdrop-filter: blur(28px) saturate(160%);
}
.me-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.ava-lily {
  width: 64px; height: 64px; border-radius: 50%; background: #f0c9ce;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.45); box-shadow: none;
}
.ava-lily svg { width: 54px; height: 54px; }
.who .t { font-size: 20px; font-weight: 650; }
.who .d { margin-top: 3px; font-size: 13px; color: var(--text-3); }
.row, .gh, .mcp, .add, .acct, .tone-row, .bg-head {
  background: none; color: inherit; border-left: none; border-right: none; border-bottom: none;
  width: 100%; text-align: left;
}
.row {
  display: flex; align-items: center; min-height: 42px; padding: 8px 16px; gap: 12px;
  border-top: 1px solid var(--line);
}
.group .row:first-child, .me-head + .row { border-top: 1px solid var(--line); }
.row .k { flex: none; font-size: 14px; font-weight: 500; }
.settings-group .row { min-height: 24px; padding: 2px 14px; }
.settings-group .row .k { width: 92px; font-size: 13px; }
.settings-group .gh { padding: 6px 14px 0; font-size: 12px; font-weight: 600; border-top: 1px solid var(--line); }
.settings-group .gh:first-child { border-top: none; }
.row .v { flex: 1; text-align: right; font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .v.ph { color: var(--text-3); }
.row .v.mask { letter-spacing: 1.5px; }
.dj-item { display: flex; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); align-items: flex-start; }
.dj-item:first-child { border-top: none; }
.dj-item .ava { width: 48px; height: 48px; }
.dj-body { flex: 1; min-width: 0; }
.dj-item .name { font-size: 16px; font-weight: 650; }
.today-flag {
  font-size: 11px; font-weight: 600; color: #fff; border: 1px solid rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.16); padding: 2px 7px; border-radius: 999px; margin-left: 8px;
}
.src { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.persona-k { margin-top: 6px; font-size: 11px; color: var(--text-3); }
.persona { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.edit, .btn, .logout {
  flex: none; height: 28px; padding: 0 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; box-shadow: none; text-shadow: none;
}
.edit, .btn { border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.16); color: #fff; }
.logout { border: 1px solid rgba(255,180,170,0.4); background: rgba(255,80,70,0.18); color: #ffc4c0; }
.add {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px;
  border-top: 1px solid var(--line); color: var(--text-2); font-size: 15px;
}
.plus {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); color: #fff;
}
.mcp { display: flex; align-items: center; gap: 12px; min-height: 34px; padding: 6px 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #7ddea0; flex: none; }
.dot.off { background: rgba(255,255,255,0.35); }
.mcp .t { font-size: 14px; font-weight: 600; }
.mcp .d { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.badge { font-size: 11px; color: #b8f0c8; background: rgba(52,199,89,0.22); border: 1px solid rgba(125,222,160,0.35); padding: 2px 8px; border-radius: 999px; }
.badge.off { color: var(--text-2); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.acct { display: flex; align-items: center; gap: 12px; padding: 8px 14px; }
.acct .avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35);
}
.acct .d { margin-top: 2px; font-size: 12px; color: #b8f0c8; display: flex; align-items: center; gap: 5px; }
.acct .d i { width: 6px; height: 6px; border-radius: 50%; background: #7ddea0; }
.tone-row, .bg-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px; gap: 12px; }
.tone-row { border-bottom: 1px solid var(--line); }
.bg-head .info { flex: 1; }
.bg-head .t { font-size: 14px; font-weight: 600; }
.bg-head .d { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.bg-thumb { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.35); background: var(--bg-image) center/cover no-repeat; flex: none; }
.slider-block { padding: 4px 14px 6px; border-top: 1px solid var(--line); }
.slider-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.slider-top .val { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0.92) var(--p, 0%), rgba(255,255,255,0.28) var(--p, 0%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; margin-top: -7px; border: none; box-shadow: none; }
.device-only { display: none; }
body.device .device-only { display: flex; }
body.device .device-only.gh { display: block; }
#screen-login { justify-content: space-between; padding: 0 40px 42px; background: transparent; }
.login-title {
  padding-top: 168px; text-align: center;
  font-family: "Great Vibes", cursive; font-weight: 400; font-size: min(72px, 18vw); line-height: 1.2; color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.70), 0 0 16px rgba(255,255,255,0.35), 0 0 32px rgba(255,255,255,0.16);
  animation: fade-up 1.15s ease both;
}
.login-bottom { display: flex; flex-direction: column; gap: 12px; animation: fade-up 1.15s ease .28s both; }
.login-btn {
  width: 100%; height: 52px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.42);
  background: rgb(20 16 14 / 0.22); color: #fff; font-size: 16px; font-weight: 600;
  box-shadow: none; text-shadow: none; backdrop-filter: blur(28px) saturate(160%);
}
.login-btn.primary { background: rgb(255 255 255 / 0.22); border-color: rgba(255,255,255,0.52); }
.agree { margin-top: 14px; text-align: center; font-size: 11px; color: rgba(255,255,255,0.90); text-shadow: none; animation: fade-up 1.2s ease .48s both; }
.login-setup {
  display: none; margin: 8px auto 0; background: none; border: none;
  color: rgba(255,255,255,0.88); font-size: 13px; text-shadow: none;
}
body.device .login-setup { display: block; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.shot .login-title, body.shot .login-bottom, body.shot .agree { animation: none; opacity: 1; transform: none; }
body.shot .note { opacity: 0.72; }
.login-overlay, .toast-layer {
  position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
}
.login-overlay { background: rgba(16,12,14,0.28); }
.toast-dim { position: absolute; inset: 0; background: rgba(16,12,14,0.38); }
.toast, .modal-card, .login-card {
  position: relative; width: min(300px, calc(100% - 48px));
  padding: 22px 20px 18px; border-radius: 20px; text-align: center;
  background: rgb(20 16 14 / 0.34); border: 1px solid rgba(255,255,255,0.42);
  backdrop-filter: blur(28px) saturate(160%); box-shadow: none; text-shadow: none; color: #fff;
}
.toast-msg { font-size: 14.5px; font-weight: 500; line-height: 1.55; white-space: pre-line; }
.toast-btn, .modal-card button.ok, .login-card button.ok {
  margin-top: 16px; min-width: 96px; height: 36px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.50); background: rgb(255 255 255 / 0.20);
  color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: none;
}
.modal-card h3, .login-card h3 { font-size: 17px; font-weight: 650; margin-bottom: 12px; }
.modal-card label, .login-card label { display: block; text-align: left; font-size: 12px; margin: 10px 0 6px; color: rgba(255,255,255,0.8); }
.modal-card input, .modal-card textarea, .login-card input, .modal-card select {
  width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12); color: #fff; padding: 10px 12px; font-size: 15px; outline: none; box-shadow: none;
}
.modal-card textarea { min-height: 72px; resize: none; }
.modal-actions { display: flex; gap: 8px; justify-content: center; }
.qr-img { width: 196px; height: 196px; border-radius: 12px; background: #fff; margin: 4px auto 12px; display: block; }
.qr-status { font-size: 13px; color: rgba(255,255,255,0.84); min-height: 1.4em; }
.linkish { margin-top: 12px; background: none; border: none; color: rgba(255,255,255,0.8); font-size: 13px; }
#screen-app.sheet-open .status,
#screen-app.sheet-open .page { filter: blur(8px) brightness(0.86); transform: scale(1.03); transform-origin: center top; }
#screen-app.sheet-open .dock { position: relative; }
body.sheet-queue .dock {
  background: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.72);
  --text: rgba(20,18,16,0.92);
  --text-3: rgba(28,28,30,0.48);
  --icon: #1c1c1e;
}
body.dark.sheet-queue .dock {
  background: rgba(28,24,22,0.72);
  --text: #fff; --text-3: rgba(255,255,255,0.5); --icon: #fff;
  border-color: rgba(255,255,255,0.16);
}
.dock { position: relative; }
#screen-app { pointer-events: none; }
#screen-app > * { pointer-events: auto; }