:root {
  color-scheme: dark;
  --bg: #05070b;
  --bg-2: #080b11;
  --panel: rgba(12, 17, 24, 0.82);
  --panel-solid: #0c1118;
  --panel-2: #111923;
  --line: rgba(135, 200, 224, 0.11);
  --line-blue: rgba(25, 230, 255, 0.24);
  --text: #edfaff;
  --muted: #7890a2;
  --muted-2: #496173;
  --blue: #19e6ff;
  --blue-2: #00a8ff;
  --violet: #7d7cff;
  --pink: #e963ff;
  --danger: #ff5577;
  --sidebar: 232px;
  --player: 92px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; background: var(--bg); scroll-behavior: smooth; }
body {
  min-height: 100vh; margin: 0; overflow-x: hidden;
  background:
    radial-gradient(circle at 70% -10%, rgba(0, 168, 255, .08), transparent 28%),
    radial-gradient(circle at 18% 75%, rgba(125, 124, 255, .05), transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { border: 0; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.noise-layer { position: fixed; z-index: 500; inset: 0; opacity: .018; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; z-index: -1; width: 440px; height: 440px; border-radius: 50%; background: rgba(25,230,255,.025); filter: blur(80px); transform: translate(-50%,-50%); pointer-events: none; }

.app-shell { display: grid; min-height: calc(100vh - var(--player)); grid-template-columns: var(--sidebar) minmax(0,1fr); }
.sidebar {
  position: fixed; z-index: 50; inset: 0 auto var(--player) 0; display: flex; width: var(--sidebar); flex-direction: column;
  padding: 25px 18px 18px; border-right: 1px solid var(--line); background: rgba(5,7,11,.9); backdrop-filter: blur(26px);
}
.brand { display: flex; align-items: center; gap: 12px; margin: 0 9px 39px; color: inherit; text-decoration: none; }
.brand>span:last-child { display: grid; }
.brand strong { font-size: 17px; font-weight: 730; letter-spacing: .08em; }
.brand small { margin-top: 5px; color: var(--muted-2); font-size: 7px; font-weight: 800; letter-spacing: .18em; }
.brand-symbol {
  position: relative; display: flex; width: 39px; height: 39px; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid rgba(25,230,255,.5); border-radius: 13px; color: var(--blue);
  background: linear-gradient(145deg, rgba(25,230,255,.12), rgba(0,168,255,.03)); box-shadow: 0 0 25px rgba(25,230,255,.13), inset 0 0 18px rgba(25,230,255,.05);
}
.brand-symbol::after { position: absolute; inset: 4px; border: 1px solid rgba(25,230,255,.12); border-radius: 9px; content: ""; }
.brand-symbol i { z-index: 1; display: block; width: 2px; border-radius: 99px; background: currentColor; box-shadow: 0 0 6px currentColor; }
.brand-symbol i:nth-child(1), .brand-symbol i:nth-child(5) { height: 8px; }
.brand-symbol i:nth-child(2), .brand-symbol i:nth-child(4) { height: 17px; }
.brand-symbol i:nth-child(3) { height: 24px; }
.nav-caption { display: block; margin: 0 12px 9px; color: #344858; font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.nav-caption.personal { margin-top: 29px; }
.main-nav { flex: 1; }
.nav-item {
  position: relative; display: flex; width: 100%; height: 43px; align-items: center; gap: 13px; margin: 2px 0; padding: 0 12px;
  border-radius: 11px; background: transparent; color: #658092; text-align: left; transition: .18s ease;
}
.nav-item svg { width: 18px; height: 18px; }
.nav-item b { font-size: 12px; font-weight: 520; }
.nav-item em { min-width: 21px; margin-left: auto; padding: 2px 6px; border: 1px solid var(--line); border-radius: 99px; color: #4b6475; font-size: 7px; font-style: normal; text-align: center; }
.nav-item:hover { background: rgba(25,230,255,.035); color: #b6d8e5; }
.nav-item.active { background: linear-gradient(90deg, rgba(25,230,255,.11), rgba(25,230,255,.025)); color: var(--text); }
.nav-item.active::before { position: absolute; left: -18px; width: 2px; height: 23px; background: var(--blue); box-shadow: 0 0 12px var(--blue); content: ""; }
.nav-item.active>span { color: var(--blue); filter: drop-shadow(0 0 5px rgba(25,230,255,.45)); }
.nav-item.active em { border-color: rgba(25,230,255,.2); color: var(--blue); }
.cloud-dot { min-width: 6px!important; width: 6px; height: 6px; padding: 0!important; border: 0!important; background: var(--blue); box-shadow: 0 0 9px var(--blue); }
.signal-card { display: grid; grid-template-columns: 41px minmax(0,1fr) 27px; gap: 10px; align-items: center; margin: 8px 0 17px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(120deg, rgba(25,230,255,.045), rgba(125,124,255,.025)); }
.signal-card>div:nth-child(2) { display: grid; min-width: 0; }
.signal-card small { color: var(--blue); font-size: 6px; letter-spacing: .1em; }
.signal-card strong { overflow: hidden; margin-top: 4px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.signal-card button { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--blue); color: #031014; }
.signal-card button svg { width: 12px; height: 12px; fill: currentColor; stroke-width: 0; }
.signal-visual { display: flex; width: 41px; height: 41px; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; background: #071821; }
.signal-visual span { width: 2px; border-radius: 2px; background: var(--blue); animation: signal 850ms ease infinite alternate; }
.signal-visual span:nth-child(1),.signal-visual span:nth-child(6){height:8px}.signal-visual span:nth-child(2),.signal-visual span:nth-child(5){height:16px;animation-delay:-.3s}.signal-visual span:nth-child(3),.signal-visual span:nth-child(4){height:25px;animation-delay:-.6s}
@keyframes signal { to { height: 5px; opacity: .45; } }
.account-card { display: flex; align-items: center; padding-top: 15px; border-top: 1px solid var(--line); }
.account-main { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; padding: 0; background: transparent; text-align: left; }
.account-main>span:nth-child(2) { display: grid; min-width: 0; }
.account-main strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-main small { overflow: hidden; margin-top: 3px; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid rgba(25,230,255,.3); border-radius: 50%; background: #0a1720; color: var(--blue); font-size: 11px; font-weight: 800; }
.admin-link { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--muted-2); }
.admin-link svg { width: 14px; height: 14px; }

.main-content { min-width: 0; grid-column: 2; padding: 0 clamp(24px,4.5vw,70px) 45px; }
.topbar {
  position: sticky; z-index: 40; top: 0; display: grid; height: 82px; align-items: center;
  grid-template-columns: minmax(90px,1fr) minmax(320px,510px) minmax(300px,1fr); gap: 22px;
  background: linear-gradient(180deg,rgba(5,7,11,.98) 68%,rgba(5,7,11,0));
}
.nav-history,.top-actions { display: flex; align-items: center; }.nav-history { gap: 5px; }.top-actions { justify-content: flex-end; gap: 10px; }
.round-button,.player-icon {
  display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #5e788a; transition: .16s ease;
}
.round-button:hover,.player-icon:hover { border-color: var(--line); background: rgba(25,230,255,.035); color: var(--blue); }
.round-button svg,.player-icon svg { width: 17px; height: 17px; }.menu-button { display: none; }
.search-box {
  display: flex; height: 43px; align-items: center; gap: 10px; padding-left: 15px; border: 1px solid var(--line); border-radius: 99px;
  background: rgba(11,16,23,.78); box-shadow: inset 0 1px rgba(255,255,255,.02); transition: .2s ease;
}
.search-box:focus-within { border-color: rgba(25,230,255,.42); box-shadow: 0 0 0 4px rgba(25,230,255,.035),0 0 26px rgba(25,230,255,.04); }
.search-box>span { color: #4d6576; }.search-box>span svg { width: 17px; height: 17px; }
.search-box input { min-width: 0; height: 100%; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
.search-box input::placeholder { color: #405563; }
.search-box button { display: flex; height: 29px; align-items: center; gap: 7px; margin-right: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 99px; background: #0d141c; color: #4e687a; font-size: 7px; letter-spacing: .08em; }
.search-box button:hover { border-color: rgba(25,230,255,.22); color: var(--blue); }
.search-box kbd { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: #16202a; font-family: inherit; }
.source-status { display:flex; height:34px; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--line); border-radius:99px; background:#080c12; color:#7894a6; font-size:10px; }
.source-status i { width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px var(--blue); }
.login-pill { display: flex; height: 34px; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid var(--line-blue); border-radius: 99px; background: rgba(25,230,255,.06); color: var(--blue); }
.login-pill svg { width: 14px; height: 14px; }.login-pill b { font-size: 9px; font-weight: 650; }

.view { display: none; min-height: calc(100vh - 170px); animation: view-in .36s var(--ease) both; }.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; margin: 18px 0 23px; }
.page-intro small { color: var(--muted); font-size: 11px; }.page-intro h1 { margin: 5px 0 0; font-size: clamp(27px,3vw,39px); font-weight: 650; letter-spacing: -.055em; }
.page-intro>span { padding: 7px 11px; border: 1px solid var(--line); border-radius: 99px; color: #4d6677; font-size: 8px; letter-spacing: .08em; }
.hero {
  position: relative; isolation: isolate; display: grid; overflow: hidden; min-height: 370px; grid-template-columns: 1.2fr .8fr;
  border: 1px solid rgba(92,172,203,.15); border-radius: 25px; background:
    linear-gradient(112deg,rgba(8,11,16,.98) 10%,rgba(9,18,26,.95) 56%,rgba(14,22,37,.9)),
    #081018; box-shadow: 0 30px 90px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.025);
}
.hero::before { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(25,230,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(25,230,255,.024) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg,#0004,transparent 80%); content: ""; }
.hero::after { position: absolute; z-index: -1; top: 0; bottom: 0; left: 55%; width: 1px; background: linear-gradient(transparent,rgba(25,230,255,.15),transparent); content: ""; }
.hero-aura { position: absolute; z-index: -2; inset: -50px; background-position: center; background-size: cover; filter: blur(80px) saturate(.8); opacity: .12; transition: .4s ease; }
.hero-copy { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; padding: 45px clamp(29px,4vw,62px); }
.live-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.live-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); animation: blink 1.4s ease infinite; }
@keyframes blink { 50% { opacity: .28; } }
.hero h2 { margin: 17px 0 13px; font-size: clamp(38px,4.6vw,62px); font-weight: 680; letter-spacing: -.07em; line-height: .99; }
.hero h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(188,239,255,.73); text-shadow: 0 0 35px rgba(25,230,255,.08); }
.hero-copy>p { max-width: 430px; margin: 0; color: #7891a3; font-size: 11px; line-height: 1.9; }
.hero-actions { display: flex; gap: 10px; margin-top: 24px; }
.neon-button,.glass-button {
  display: inline-flex; height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 19px; border-radius: 99px; font-size: 10px; font-weight: 760; transition: .18s ease;
}
.neon-button { background: var(--blue); color: #031014; box-shadow: 0 0 26px rgba(25,230,255,.18); }
.neon-button:hover { background: #7bf4ff; transform: translateY(-1px); box-shadow: 0 0 35px rgba(25,230,255,.28); }
.glass-button { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: #9cb2c1; }.glass-button:hover { border-color: var(--line-blue); color: var(--blue); }
.neon-button svg,.glass-button svg { width: 15px; height: 15px; }.neon-button svg { fill: currentColor; stroke-width: 0; }
.neon-button.small { height: 38px; }.neon-button.wide { width: 100%; }
.hero-stats { display: flex; gap: 22px; margin-top: 25px; }.hero-stats span { display: grid; color: #3f5869; font-size: 7px; letter-spacing: .1em; }.hero-stats b { margin-bottom: 3px; color: #a2bac8; font-size: 10px; }
.hero-object { position: relative; min-height: 370px; perspective: 800px; }
.album-prism {
  position: absolute; z-index: 3; top: 50%; left: 50%; width: min(224px,22vw); aspect-ratio: 1; border: 1px solid rgba(25,230,255,.3); border-radius: 17px;
  background: linear-gradient(145deg,#19324a,#080d14); background-position: center; background-size: cover;
  box-shadow: 0 28px 65px rgba(0,0,0,.5),0 0 42px rgba(25,230,255,.08); transform: translate(-50%,-50%) rotateY(-10deg) rotateZ(4deg);
}
.album-prism::before,.album-prism::after { position: absolute; inset: -10px 10px 10px -10px; z-index: -1; border: 1px solid rgba(125,124,255,.18); border-radius: inherit; content: ""; }.album-prism::after { inset: -20px 20px 20px -20px; opacity: .4; }
.album-prism i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg,rgba(255,255,255,.16),transparent 25%,transparent 70%,rgba(25,230,255,.09)); }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(25,230,255,.14); border-radius: 50%; transform: translate(-50%,-50%) rotateX(66deg); }
.orbit-one { width: 330px; height: 330px; }.orbit-two { width: 430px; height: 430px; border-style: dashed; opacity: .45; }
.spectrum-ring { position: absolute; z-index: 2; top: 50%; left: 50%; width: 290px; height: 290px; border-radius: 50%; transform: translate(-50%,-50%); animation: rotate 20s linear infinite; }
.spectrum-ring span { position: absolute; width: 3px; height: 22px; border-radius: 5px; background: linear-gradient(var(--blue),transparent); box-shadow: 0 0 9px var(--blue); }.spectrum-ring span:nth-child(1){top:-2px;left:50%}.spectrum-ring span:nth-child(2){right:0;top:50%;transform:rotate(90deg)}.spectrum-ring span:nth-child(3){bottom:-2px;left:50%;transform:rotate(180deg)}.spectrum-ring span:nth-child(4){left:0;top:50%;transform:rotate(-90deg)}
@keyframes rotate { to { transform: translate(-50%,-50%) rotate(360deg); } }
.hero-index { position: absolute; right: 22px; bottom: 18px; color: var(--blue); font-size: 14px; font-weight: 700; }.hero-index span { margin: 0 4px; color: #294554; }.hero-index::after { font-size: 9px; color: #486171; content: "04"; }

.section-block { margin-top: 46px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
.section-head small,.search-heading small,.feature-heading>div>small,.cloud-hero>div>small,.collection-hero>div>small { color: var(--blue); font-size: 8px; font-weight: 800; letter-spacing: .19em; }
.section-head h2 { margin: 6px 0 0; font-size: 20px; font-weight: 640; letter-spacing: -.035em; }
.section-head>button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; background: transparent; color: #526b7c; font-size: 9px; }.section-head>button:hover { color: var(--blue); }.section-head>button svg { width: 13px; height: 13px; }
.album-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: clamp(13px,1.6vw,24px); }
.album-card { min-width: 0; padding: 0; background: transparent; text-align: left; }
.album-art { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 15px; background: #0d151d; box-shadow: 0 18px 35px rgba(0,0,0,.2); }
.album-art::after { position: absolute; inset: 0; background: linear-gradient(150deg,transparent 50%,rgba(0,0,0,.34)); content: ""; }
.album-art img,.track-cover img,.result-cover img,.queue-cover img,.player-cover img,.mini-cover img,.cloud-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-art img { transition: .4s var(--ease); }.album-card:hover img { transform: scale(1.06); filter: saturate(1.15) brightness(.78); }
.album-play { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--blue); color: #031014; box-shadow: 0 0 23px rgba(25,230,255,.25); opacity: 0; transform: translateY(8px); transition: .2s ease; }
.album-play svg { width: 15px; height: 15px; fill: currentColor; stroke-width: 0; }.album-card:hover .album-play { opacity: 1; transform: translateY(0); }
.album-card h3 { overflow: hidden; margin: 12px 0 5px; color: #dbeef5; font-size: 12px; font-weight: 570; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.album-card p { overflow: hidden; margin: 0; color: #4f6879; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(290px,.65fr); gap: clamp(28px,4vw,65px); }
.track-list { border-top: 1px solid var(--line); }
.track-row { display: grid; min-height: 66px; align-items: center; grid-template-columns: 26px 41px minmax(100px,1.25fr) minmax(90px,.8fr) 48px 31px; gap: 11px; border-bottom: 1px solid var(--line); transition: .16s ease; }
.track-row:hover { padding: 0 7px; border-radius: 10px; background: rgba(25,230,255,.025); }
.track-number { color: #324a5a; font-family: "SFMono-Regular",Consolas,monospace; font-size: 9px; }.track-row.playing .track-number { color: var(--blue); text-shadow: 0 0 8px var(--blue); }
.track-cover { overflow: hidden; width: 41px; height: 41px; padding: 0; border-radius: 8px; background: #0e161e; }
.track-copy { display: grid; min-width: 0; gap: 4px; padding: 0; background: transparent; text-align: left; }
.track-copy strong { overflow: hidden; color: #dcecf2; font-size: 11px; font-weight: 570; text-overflow: ellipsis; white-space: nowrap; }.track-row.playing .track-copy strong { color: var(--blue); }
.track-copy small,.track-album,.track-time { overflow: hidden; color: #476070; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.row-action { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: transparent; color: #415969; opacity: 0; }.track-row:hover .row-action,.row-action.active { opacity: 1; }.row-action.active { color: var(--blue); }.row-action.active svg { fill: currentColor; }
.row-action svg { width: 14px; height: 14px; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.portal { position: relative; isolation: isolate; display: flex; overflow: hidden; min-height: 120px; align-items: flex-start; flex-direction: column; justify-content: flex-end; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #101722; text-align: left; transition: .22s var(--ease); }
.portal::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 90% 5%,var(--portal),transparent 54%); opacity: .24; content: ""; }.portal::after { position: absolute; z-index: -1; top: 14px; right: 14px; width: 42px; height: 42px; border: 1px solid color-mix(in srgb,var(--portal) 45%,transparent); border-radius: 50%; box-shadow: 0 0 25px color-mix(in srgb,var(--portal) 15%,transparent); content: ""; }
.portal:hover { border-color: color-mix(in srgb,var(--portal) 40%,transparent); transform: translateY(-3px); }.portal span { position: absolute; top: 14px; left: 14px; color: var(--portal); font-family: monospace; font-size: 8px; }.portal b { font-size: 11px; }.portal small { margin-top: 4px; color: #51697a; font-size: 7px; letter-spacing: .1em; }.p1{--portal:#7d7cff}.p2{--portal:#19e6ff}.p3{--portal:#00a8ff}.p4{--portal:#e963ff}

.search-heading { display: flex; min-height: 180px; align-items: center; justify-content: space-between; padding-top: 25px; }
.search-heading h1 { margin: 9px 0 7px; font-size: clamp(36px,5vw,64px); font-weight: 680; letter-spacing: -.065em; }.search-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.search-visual { display: flex; width: 190px; height: 95px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle,rgba(25,230,255,.1),transparent 65%); transform: rotate(-8deg); }
.search-visual i { width: 3px; border-radius: 5px; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: search-wave 1s ease infinite alternate; }.search-visual i:nth-child(1),.search-visual i:nth-child(5){height:20px}.search-visual i:nth-child(2),.search-visual i:nth-child(4){height:50px;animation-delay:-.35s}.search-visual i:nth-child(3){height:75px;animation-delay:-.6s}
@keyframes search-wave { to { height: 8px; opacity: .4; } }
.result-tabs { display: flex; gap: 7px; margin-bottom: 17px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.result-tabs button { height: 34px; padding: 0 15px; border: 1px solid transparent; border-radius: 99px; background: transparent; color: #587184; font-size: 10px; }.result-tabs button.active { border-color: var(--line-blue); background: rgba(25,230,255,.08); color: var(--blue); }
.result-tabs em { margin-left: 5px; font-size: 7px; font-style: normal; opacity: .65; }
.result-panel { display: none; }.result-panel.active { display: block; }
.result-row { display: grid; min-height: 72px; align-items: center; grid-template-columns: 35px 46px minmax(150px,1.3fr) minmax(110px,.8fr) 66px 108px; gap: 12px; border-bottom: 1px solid var(--line); transition: .16s ease; }
.result-row:hover { padding: 0 9px; border-radius: 11px; background: linear-gradient(90deg,rgba(25,230,255,.035),transparent); }.result-row.playing { background: rgba(25,230,255,.025); }
.result-cover { overflow: hidden; width: 46px; height: 46px; padding: 0; border-radius: 9px; background: #0d151d; }
.result-main { display: grid; min-width: 0; gap: 5px; padding: 0; background: transparent; text-align: left; }.result-main strong { overflow: hidden; color: #e2f3f9; font-size: 12px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }.result-main small,.result-album,.result-time { overflow: hidden; color: #4b6475; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.format-badge { width: fit-content; padding: 3px 7px; border: 1px solid rgba(25,230,255,.15); border-radius: 99px; color: var(--blue); font-size: 7px; }.result-actions { display: flex; justify-content: flex-end; gap: 2px; }
.result-play { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: rgba(25,230,255,.08); color: var(--blue); }.result-play:hover { background: var(--blue); color: #031014; }.result-play svg { width: 13px; height: 13px; fill: currentColor; stroke-width: 0; }
.card-result-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }.card-result-grid.active { display: grid; }
.entity-card { position: relative; overflow: hidden; min-height: 190px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg,#0e161f,#080c12); text-align: left; transition: .2s var(--ease); }.entity-card:hover { border-color: var(--line-blue); transform: translateY(-3px); }
.entity-card::after { position: absolute; right: -25px; bottom: -45px; width: 110px; height: 110px; border: 1px solid rgba(25,230,255,.11); border-radius: 50%; content: ""; }
.entity-art { display: grid; overflow: hidden; width: 88px; height: 88px; place-items: center; border-radius: 13px; background: linear-gradient(145deg,#153447,#0d1621); color: var(--blue); font-size: 27px; font-weight: 800; }.artists-grid .entity-art { border-radius: 50%; }
.entity-art img { width: 100%; height: 100%; object-fit: cover; }.entity-card h3 { overflow: hidden; margin: 16px 0 4px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.entity-card p { margin: 0; color: var(--muted-2); font-size: 8px; }
.load-more { display: flex; min-width: 135px; height: 39px; align-items: center; justify-content: center; gap: 7px; margin: 27px auto 0; padding: 0 18px; border: 1px solid var(--line); border-radius: 99px; background: #090d13; color: #5e7789; font-size: 9px; }.load-more:hover { border-color: var(--line-blue); color: var(--blue); }.load-more svg { width: 13px; height: 13px; }.load-more:disabled { opacity: .4; }
.search-skeleton { display: none; }.search-skeleton.active { display: grid; gap: 10px; }.skeleton-row { height: 64px; border-radius: 10px; background: linear-gradient(100deg,transparent 20%,rgba(25,230,255,.05) 50%,transparent 80%),rgba(255,255,255,.018); background-size: 200% 100%; animation: skeleton 1.3s ease infinite; }@keyframes skeleton { to { background-position:-200% 0; } }
.empty-state { display: grid; min-height: 270px; place-items: center; border: 1px dashed var(--line); border-radius: 20px; text-align: center; }.empty-state>div { display: grid; justify-items: center; }.empty-state span { display: grid; width: 56px; height: 56px; margin-bottom: 14px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); }.empty-state strong { font-size: 13px; }.empty-state p { max-width: 350px; margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }

.feature-heading { display: flex; min-height: 220px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.feature-heading h1 { margin: 12px 0 8px; font-size: clamp(42px,6vw,78px); letter-spacing: -.07em; }.feature-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.radio-tuner { position: relative; display: flex; width: 230px; height: 80px; align-items: center; justify-content: space-between; padding: 0 20px; border: 1px solid var(--line); border-radius: 50%; color: #476171; font-family: monospace; font-size: 9px; transform: rotate(-5deg); }.radio-tuner::before { position:absolute; right:30px; left:30px; height:1px; background:linear-gradient(90deg,transparent,var(--blue),transparent); content:""; }.radio-tuner i { width: 10px; height: 10px; border: 2px solid var(--blue); border-radius: 50%; box-shadow:0 0 14px var(--blue); }
.station-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-top: 30px; }
.station-card { position: relative; isolation: isolate; display: flex; overflow: hidden; min-height: 245px; align-items: flex-start; flex-direction: column; justify-content: flex-end; padding: 20px; border: 1px solid var(--line); border-radius: 19px; background: #0c1219; text-align: left; transition: .25s var(--ease); }
.station-card::before { position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 70% 10%,var(--station),transparent 60%);opacity:.22;content:""}.station-card::after { position:absolute;z-index:-1;top:25px;right:25px;width:90px;height:90px;border:1px solid color-mix(in srgb,var(--station) 45%,transparent);border-radius:50%;box-shadow:0 0 45px color-mix(in srgb,var(--station) 15%,transparent);content:""}.station-card:hover,.station-card.active { border-color:color-mix(in srgb,var(--station) 55%,transparent);transform:translateY(-4px);box-shadow:0 20px 45px rgba(0,0,0,.2)}.station-card>span { position:absolute;top:18px;left:18px;color:var(--station);font-family:monospace;font-size:8px}.station-card h3{margin:0 0 6px;font-size:17px}.station-card p{margin:0;color:#668092;font-size:8px;letter-spacing:.08em}.station-card small{margin-top:15px;color:#50697a;font-size:8px;line-height:1.6}
.on-air-panel { display:grid;min-height:128px;align-items:center;grid-template-columns:80px 1fr auto;gap:22px;margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(90deg,rgba(25,230,255,.045),rgba(125,124,255,.025))}.on-air-art{position:relative;display:grid;width:80px;height:80px;place-items:center;border:1px solid var(--line-blue);border-radius:50%;color:var(--blue)}.on-air-art::before,.on-air-art::after{position:absolute;border:1px solid rgba(25,230,255,.1);border-radius:50%;content:""}.on-air-art::before{inset:8px}.on-air-art::after{inset:17px}.on-air-art i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}.on-air-panel small{color:var(--blue);font-size:7px;letter-spacing:.15em}.on-air-panel h2{margin:7px 0 4px;font-size:18px}.on-air-panel p{margin:0;color:var(--muted);font-size:9px}

.cloud-hero { position:relative;display:grid;min-height:300px;align-items:center;grid-template-columns:180px 1fr 220px;gap:35px;margin:0 calc(clamp(24px,4.5vw,70px)*-1);padding:38px clamp(24px,4.5vw,70px);border-bottom:1px solid var(--line);background:radial-gradient(circle at 18% 50%,rgba(25,230,255,.1),transparent 28%),linear-gradient(100deg,rgba(8,17,25,.85),transparent) }
.cloud-orb { position:relative;display:grid;width:170px;height:170px;place-items:center;border:1px solid var(--line-blue);border-radius:50%;background:radial-gradient(circle,rgba(25,230,255,.13),transparent 68%);color:var(--blue);box-shadow:0 0 70px rgba(25,230,255,.07)}.cloud-orb::before,.cloud-orb::after{position:absolute;border:1px solid rgba(25,230,255,.12);border-radius:50%;content:""}.cloud-orb::before{inset:15px}.cloud-orb::after{inset:31px}.cloud-orb svg{width:48px;height:48px}.cloud-orb i{position:absolute;top:7px;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 14px var(--blue)}
.cloud-hero h1{margin:10px 0;font-size:clamp(34px,4vw,57px);letter-spacing:-.065em}.cloud-hero p{max-width:600px;margin:0 0 20px;color:var(--muted);font-size:10px;line-height:1.8}.storage-meter{align-self:end;margin-bottom:25px}.storage-meter>div{display:flex;justify-content:space-between;color:var(--muted);font-size:8px}.storage-meter b{color:#9bb2c1;font-weight:500}.storage-meter>i{display:block;overflow:hidden;height:3px;margin-top:9px;border-radius:99px;background:#1a2731}.storage-meter>i span{display:block;width:0;height:100%;border-radius:inherit;background:var(--blue);box-shadow:0 0 10px var(--blue)}.cloud-head{margin-top:34px}
.cloud-list { border-top:1px solid var(--line) }.cloud-row { display:grid;min-height:72px;align-items:center;grid-template-columns:47px minmax(140px,1.4fr) minmax(100px,.8fr) 65px 80px 105px;gap:13px;border-bottom:1px solid var(--line)}.cloud-cover{overflow:hidden;width:47px;height:47px;border-radius:9px;background:linear-gradient(145deg,#123144,#0b141c)}.cloud-row .result-main{padding:0}.cloud-format{color:var(--blue);font-family:monospace;font-size:8px;text-transform:uppercase}.cloud-size{color:var(--muted-2);font-size:8px}

.collection-hero { display:flex;min-height:280px;align-items:center;gap:35px;margin:0 calc(clamp(24px,4.5vw,70px)*-1);padding:35px clamp(24px,4.5vw,70px);border-bottom:1px solid var(--line);background:radial-gradient(circle at 15% 50%,rgba(125,124,255,.13),transparent 28%)}
.collection-art{position:relative;display:grid;overflow:hidden;width:170px;height:170px;flex:0 0 170px;place-items:center;border:1px solid rgba(125,124,255,.3);border-radius:21px;background:linear-gradient(145deg,#1a2240,#0b101a);color:#9190ff;box-shadow:0 25px 55px rgba(0,0,0,.3)}.collection-art::before{position:absolute;inset:0;background-image:linear-gradient(rgba(125,124,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(125,124,255,.06) 1px,transparent 1px);background-size:20px 20px;content:""}.collection-art svg{z-index:1;width:55px;height:55px;filter:drop-shadow(0 0 16px rgba(125,124,255,.3))}.scan-line{position:absolute;top:0;right:0;left:0;height:1px;background:#7d7cff;box-shadow:0 0 12px #7d7cff;animation:scan 3s ease infinite}@keyframes scan{50%{top:100%}}
.collection-hero h1{margin:9px 0 8px;font-size:clamp(36px,5vw,63px);letter-spacing:-.065em}.collection-hero p{margin:0 0 20px;color:var(--muted);font-size:10px}.collection-list{margin-top:30px}

.site-footer { display:flex;align-items:center;justify-content:space-between;margin-top:60px;padding:22px 0;border-top:1px solid var(--line);color:#304856;font-size:7px;letter-spacing:.1em }

.player {
  position:fixed;z-index:120;right:0;bottom:0;left:0;display:grid;height:var(--player);align-items:center;
  grid-template-columns:minmax(240px,1fr) minmax(370px,1.4fr) minmax(300px,1fr);gap:25px;padding:0 23px;
  border-top:1px solid rgba(72,136,160,.16);background:rgba(7,10,15,.94);box-shadow:0 -20px 60px rgba(0,0,0,.28);backdrop-filter:blur(28px);
}
.now-playing,.player-controls,.progress-row,.player-tools{display:flex;align-items:center}.now-playing{min-width:0;gap:11px}.player-cover{position:relative;overflow:hidden;width:54px;height:54px;flex:0 0 54px;border:1px solid var(--line);border-radius:11px;background:#0b141c}.player-cover.placeholder{display:grid;place-items:center;color:#365262}.cover-scan{position:absolute;right:0;bottom:0;left:0;height:2px;background:var(--blue);box-shadow:0 0 12px var(--blue);opacity:0}.player.playing .cover-scan{opacity:.8;animation:cover-scan 2s linear infinite}@keyframes cover-scan{from{bottom:100%}}
.track-identity{display:grid;min-width:0;gap:3px}.track-identity small{color:var(--blue);font-size:6px;letter-spacing:.14em}.track-identity strong,.track-identity span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-identity strong{color:#e7f6fb;font-size:11px;font-weight:590}.track-identity span{color:#50697a;font-size:8px}.favorite-button{flex:0 0 auto}.favorite-button.active{color:var(--blue)}.favorite-button.active svg{fill:currentColor}
.player-core{display:grid;gap:8px}.player-controls{justify-content:center;gap:18px}.main-play{position:relative;isolation:isolate;display:grid;width:39px;height:39px;place-items:center;border-radius:50%;background:var(--blue);color:#031014;box-shadow:0 0 25px rgba(25,230,255,.25);transition:.17s ease}.main-play:hover{transform:scale(1.05);box-shadow:0 0 34px rgba(25,230,255,.36)}.main-play::before{position:absolute;z-index:-1;inset:-5px;border:1px solid rgba(25,230,255,.2);border-radius:50%;content:""}.main-play svg{width:16px;height:16px;fill:currentColor;stroke-width:0}.main-play.pause svg{fill:none;stroke:currentColor;stroke-width:2.4}.progress-row{gap:10px}.progress-row>span{width:28px;color:#3e5869;font-family:monospace;font-size:7px;text-align:center}
.range-shell,.volume-shell{position:relative;height:3px;border-radius:99px;background:#1d2a34}.range-shell{flex:1}.range-shell i,.volume-shell i{position:absolute;left:0;width:0;height:100%;border-radius:inherit;background:var(--blue);box-shadow:0 0 7px rgba(25,230,255,.4)}.range-shell input,.volume-shell input{position:absolute;inset:-7px 0;width:100%;height:17px;margin:0;cursor:pointer;opacity:0}
.player-tools{justify-content:flex-end;gap:9px}.tech-pill,.quality-pill{display:flex;height:30px;align-items:center;gap:6px;padding:0 9px;border:1px solid var(--line);border-radius:99px;background:#090e14;color:#587184}.tech-pill i{width:5px;height:5px;border-radius:50%;background:#476171}.tech-pill span,.quality-pill span{font-size:7px}.tech-pill.active{border-color:var(--line-blue);color:var(--blue)}.tech-pill.active i{background:var(--blue);box-shadow:0 0 9px var(--blue)}.quality-pill b{color:var(--blue);font-size:7px}.lyric-button{font-size:11px}.queue-button{position:relative}.queue-button em{position:absolute;top:-2px;right:-4px;min-width:13px;height:13px;padding:0 3px;border-radius:99px;background:var(--blue);color:#031014;font-size:6px;font-style:normal;font-weight:900;line-height:13px}.volume-icon{color:#50697a}.volume-icon svg{width:16px;height:16px}.volume-shell{width:72px}.volume-shell i{width:80%}

.drawer{position:fixed;z-index:110;top:0;bottom:var(--player);width:min(400px,92vw);padding:27px 23px;border-left:1px solid var(--line);background:rgba(8,12,18,.98);box-shadow:-35px 0 90px rgba(0,0,0,.45);backdrop-filter:blur(25px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .36s var(--ease),opacity .24s ease,visibility 0s linear .36s,filter .36s var(--ease)}.drawer header{display:flex;align-items:center;justify-content:space-between}.drawer header small{color:var(--blue);font-size:7px;letter-spacing:.18em}.drawer header h2{display:flex;align-items:center;gap:9px;margin:6px 0 0;font-size:20px}.drawer header h2 em{color:var(--muted-2);font-size:10px;font-style:normal}.queue-drawer{right:0;transform:translateX(calc(100% + 28px));filter:blur(4px)}.lyric-drawer{left:var(--sidebar);transform:translateX(calc(-100% - 28px)) scale(.975);transform-origin:left center;border-right:1px solid var(--line);border-left:0;box-shadow:35px 0 90px rgba(0,0,0,.45);filter:blur(5px)}.drawer.open{transform:translateX(0) scale(1);opacity:1;visibility:visible;pointer-events:auto;filter:blur(0);transition-delay:0s}.drawer.closing{pointer-events:none}.drawer-close-button{border-color:var(--line);background:rgba(25,230,255,.035)}.drawer-close-button:hover{border-color:var(--line-blue);transform:translateX(-2px)}.lyric-origin{display:inline-flex;padding:3px 7px;border:1px solid rgba(25,230,255,.15);border-radius:99px;color:var(--blue)!important;font-size:6px!important;font-weight:700;letter-spacing:.08em}
.drawer[aria-hidden="true"]{display:none}
.drawer-actions{display:flex;align-items:center;justify-content:space-between;margin-top:27px;padding-bottom:10px;border-bottom:1px solid var(--line);color:#4b6576;font-size:7px;letter-spacing:.12em}.drawer-actions button{background:transparent;color:#587183;font-size:8px}.queue-list{overflow-y:auto;max-height:calc(100vh - var(--player) - 135px);padding:8px 0 30px}.queue-item{display:grid;min-height:57px;align-items:center;grid-template-columns:39px minmax(0,1fr) 25px;gap:10px;margin:3px 0;padding:7px;border-radius:10px}.queue-item:hover,.queue-item.active{background:rgba(25,230,255,.035)}.queue-cover{overflow:hidden;width:39px;height:39px;padding:0;border-radius:8px;background:#0e171f}.queue-copy{display:grid;min-width:0;gap:4px;padding:0;background:transparent;text-align:left}.queue-copy strong,.queue-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-copy strong{font-size:10px}.queue-item.active strong{color:var(--blue)}.queue-copy span{color:var(--muted-2);font-size:7px}.queue-remove{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:transparent;color:#425a6b;opacity:0}.queue-item:hover .queue-remove{opacity:1}.queue-remove svg{width:12px;height:12px}
.lyric-track{display:flex;align-items:center;gap:11px;margin:28px 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line);transition:opacity .22s ease,transform .32s var(--ease)}.mini-cover{overflow:hidden;width:46px;height:46px;border-radius:9px;background:#0e171f}.lyric-track>div:last-child{display:grid;min-width:0;gap:4px}.lyric-track strong,.lyric-track span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lyric-track strong{font-size:11px}.lyric-track span{color:var(--muted);font-size:8px}.lyrics{overflow-y:auto;height:calc(100vh - var(--player) - 160px);padding:30vh 0;mask-image:linear-gradient(transparent,#000 23%,#000 77%,transparent);scrollbar-width:none;transition:opacity .2s ease,transform .34s var(--ease)}.lyrics::-webkit-scrollbar{display:none}.lyrics p{margin:0 0 23px;color:#3d5667;font-size:13px;line-height:1.7;transition:color .25s ease,font-size .25s var(--ease),opacity .25s ease,transform .25s var(--ease)}.lyrics p.active{color:var(--text);font-size:20px;font-weight:650;text-shadow:0 0 25px rgba(25,230,255,.15);transform:translateX(7px)}.lyrics p.passed{color:#263d4d}.lyric-drawer.closing .lyrics{opacity:0;transform:translateX(-16px)}.lyric-drawer.closing .lyric-track{opacity:0;transform:translateX(-10px)}
.scrim{position:fixed;z-index:100;inset:0 0 var(--player);background:rgba(0,3,6,.56);opacity:0;pointer-events:none;backdrop-filter:blur(0);transition:opacity .3s ease,backdrop-filter .35s ease}.scrim.active{opacity:1;pointer-events:auto}.scrim.lyric-active{background:linear-gradient(90deg,rgba(0,5,10,.3),rgba(0,3,6,.68));backdrop-filter:blur(3px)}.main-content{transition:transform .38s var(--ease),filter .35s ease,opacity .35s ease}body.lyrics-open .main-content{transform:translateX(12px) scale(.993);filter:saturate(.82) brightness(.82)}body.lyrics-open .lyric-button{border-color:var(--line-blue);background:rgba(25,230,255,.1);color:var(--blue);box-shadow:0 0 15px rgba(25,230,255,.08)}

.modal{width:min(460px,calc(100vw - 28px));padding:28px;border:1px solid var(--line-blue);border-radius:22px;background:rgba(9,14,20,.98);color:var(--text);box-shadow:0 35px 100px rgba(0,0,0,.65),0 0 60px rgba(25,230,255,.06);backdrop-filter:blur(25px)}.modal::backdrop{background:rgba(0,3,6,.74);backdrop-filter:blur(8px)}.modal-close{position:absolute;top:17px;right:17px;display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:transparent;color:#587183}.modal-close svg{width:15px;height:15px}.modal-brand{display:flex;align-items:center;gap:13px;padding-right:30px}.modal-brand>span{display:grid;width:44px;height:44px;place-items:center;border:1px solid var(--line-blue);border-radius:13px;background:rgba(25,230,255,.08);color:var(--blue);font-weight:900}.modal-brand>span svg{width:21px;height:21px}.modal-brand small{color:var(--blue);font-size:7px;letter-spacing:.17em}.modal-brand h2{margin:5px 0 0;font-size:20px;letter-spacing:-.035em}.modal-tabs{display:flex;margin:25px 0 19px;padding:3px;border:1px solid var(--line);border-radius:99px}.modal-tabs button{height:32px;flex:1;border-radius:99px;background:transparent;color:#587183;font-size:9px}.modal-tabs button.active{background:rgba(25,230,255,.1);color:var(--blue)}.auth-form{display:none;gap:13px}.auth-form.active{display:grid}.auth-form label,.upload-form>label,.form-grid label{display:grid;gap:7px;color:#6f899a;font-size:9px}.auth-form input,.upload-form input,.upload-form textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;outline:0;background:#070b10;color:var(--text)}.auth-form input:focus,.upload-form input:focus,.upload-form textarea:focus{border-color:var(--line-blue)}.form-message{min-height:16px;margin:13px 0 0;color:var(--danger);font-size:9px;text-align:center}
.upload-modal{width:min(580px,calc(100vw - 28px))}.upload-form{display:grid;gap:14px;margin-top:23px}.drop-zone{position:relative;min-height:130px;place-items:center;align-content:center;border:1px dashed var(--line-blue);border-radius:15px;background:rgba(25,230,255,.025);text-align:center;cursor:pointer}.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop-zone>span{margin-bottom:9px;color:var(--blue)}.drop-zone strong{color:#acc4d0;font-size:11px}.drop-zone small{margin-top:5px;color:var(--muted-2);font-size:8px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check-label{display:flex!important;align-items:center!important;grid-column:1/-1;grid-template-columns:17px 1fr!important}.check-label input{width:15px;height:15px;padding:0;accent-color:var(--blue)}.upload-form textarea{resize:vertical}.upload-progress{position:relative;overflow:hidden;height:30px;border:1px solid var(--line);border-radius:8px;background:#070b10}.upload-progress i{position:absolute;inset:0 auto 0 0;width:0;background:rgba(25,230,255,.12);transition:.2s ease}.upload-progress span{position:absolute;inset:0;display:grid;place-items:center;color:#597283;font-size:8px}
.toast-region{position:fixed;z-index:200;right:22px;bottom:calc(var(--player) + 17px);display:grid;gap:7px;pointer-events:none}.toast{display:flex;min-width:250px;max-width:350px;min-height:43px;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--line-blue);border-radius:10px;background:rgba(10,18,25,.97);box-shadow:0 15px 40px rgba(0,0,0,.4);color:#b8d2dc;font-size:9px;animation:toast-in .2s ease both}.toast::before{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue);content:""}.toast.error{border-color:rgba(255,85,119,.3)}.toast.error::before{background:var(--danger);box-shadow:0 0 8px var(--danger)}@keyframes toast-in{from{opacity:0;transform:translateY(7px)}}

@media(max-width:1200px){
  :root{--sidebar:205px}.main-content{padding-right:34px;padding-left:34px}.topbar{grid-template-columns:85px minmax(290px,1fr) auto}.album-grid{grid-template-columns:repeat(4,1fr)}.album-card:nth-child(5){display:none}.dashboard-grid{grid-template-columns:1fr}.portal-grid{grid-template-columns:repeat(4,1fr)}.station-grid{grid-template-columns:1fr 1fr}.cloud-hero{grid-template-columns:150px 1fr}.cloud-orb{width:145px;height:145px}.storage-meter{grid-column:2}.player{grid-template-columns:minmax(210px,.8fr) minmax(350px,1.3fr) minmax(230px,.8fr)}.tech-pill span,.quality-pill span,.volume-icon,.volume-shell{display:none}
}
@media(max-width:900px){
  :root{--sidebar:245px}.app-shell{display:block}.sidebar{z-index:140;bottom:0;transform:translateX(-105%);transition:transform .25s var(--ease)}.sidebar.open{transform:translateX(0)}.main-content{padding-right:23px;padding-left:23px}.topbar{grid-template-columns:36px minmax(230px,1fr) auto;gap:11px}.menu-button{display:grid}.desktop-only{display:none}.hero{grid-template-columns:1.25fr .75fr}.hero-copy{padding:38px 34px}.album-prism{width:190px}.hero-object{opacity:.8}.card-result-grid{grid-template-columns:repeat(3,1fr)}.player{grid-template-columns:1fr minmax(320px,1.1fr)}.player-tools{display:none}.lyric-drawer{left:0}.scrim.sidebar-active{z-index:130;inset:0;opacity:1;pointer-events:auto}.cloud-hero{margin-right:-23px;margin-left:-23px;padding-right:23px;padding-left:23px}.collection-hero{margin-right:-23px;margin-left:-23px;padding-right:23px;padding-left:23px}
}
@media(max-width:680px){
  :root{--player:74px}.main-content{padding-right:15px;padding-left:15px}.topbar{height:69px;grid-template-columns:35px minmax(0,1fr)}.top-actions{display:none}.search-box{height:39px}.search-box button span{display:none}.page-intro{margin:12px 0 18px}.page-intro>span{display:none}.hero{display:block;min-height:430px}.hero-copy{position:relative;z-index:3;min-height:430px;justify-content:flex-end;padding:27px 23px;background:linear-gradient(0deg,rgba(5,7,11,.98) 20%,rgba(5,7,11,.4) 70%,transparent)}.hero h2{font-size:37px}.hero-object{position:absolute;inset:-45px -30px auto auto;width:100%;min-height:320px}.album-prism{width:215px}.orbit-one{width:290px;height:290px}.orbit-two{width:360px;height:360px}.spectrum-ring{width:270px;height:270px}.hero-stats,.hero-index{display:none}.album-grid{overflow-x:auto;grid-template-columns:repeat(5,145px);padding-bottom:8px;scrollbar-width:none}.album-card:nth-child(5){display:block}.portal-grid{grid-template-columns:1fr 1fr}.track-row{grid-template-columns:25px 40px minmax(0,1fr) 30px;gap:8px}.track-album,.track-time{display:none}.search-heading{min-height:150px}.search-heading h1{font-size:39px}.search-visual{display:none}.result-row{grid-template-columns:28px 44px minmax(0,1fr) 85px;gap:8px}.result-album,.format-badge{display:none}.result-actions{gap:0}.card-result-grid{grid-template-columns:1fr 1fr}.entity-card{min-height:165px}.entity-art{width:72px;height:72px}.feature-heading{min-height:175px}.feature-heading h1{font-size:48px}.radio-tuner{display:none}.station-grid{grid-template-columns:1fr}.station-card{min-height:190px}.on-air-panel{grid-template-columns:60px 1fr;gap:14px}.on-air-art{width:60px;height:60px}.on-air-panel .neon-button{grid-column:1/-1}.cloud-hero{grid-template-columns:75px 1fr;gap:18px;margin-right:-15px;margin-left:-15px;padding:28px 15px}.cloud-orb{width:75px;height:75px}.cloud-orb::before,.cloud-orb::after{display:none}.cloud-orb svg{width:27px;height:27px}.cloud-hero h1{font-size:30px}.cloud-hero p{font-size:9px}.storage-meter{grid-column:1/-1;margin:0}.cloud-row{grid-template-columns:43px minmax(0,1fr) 73px;gap:9px}.cloud-row .result-album,.cloud-size,.cloud-format{display:none}.collection-hero{gap:19px;min-height:220px;margin-right:-15px;margin-left:-15px;padding-right:15px;padding-left:15px}.collection-art{width:95px;height:95px;flex-basis:95px}.collection-art svg{width:32px;height:32px}.collection-hero h1{font-size:30px}.site-footer{align-items:flex-start;flex-direction:column;gap:7px}.player{grid-template-columns:minmax(0,1fr) auto;gap:7px;padding:0 11px}.player-cover{width:46px;height:46px;flex-basis:46px}.favorite-button{display:none}.player-core{display:flex;flex-direction:row-reverse}.progress-row{position:fixed;right:0;bottom:calc(var(--player) - 1px);left:0}.progress-row>span{display:none}.range-shell{height:2px;border-radius:0}.player-controls{gap:4px}.player-controls>.player-icon{display:none}#nextButton{display:grid}.main-play{width:38px;height:38px}.toast-region{right:11px;left:11px}.toast{width:100%;min-width:0;max-width:none}.form-grid{grid-template-columns:1fr}.check-label{grid-column:auto}.lyrics p.active{font-size:17px}
}
@media(max-width:420px){.hero{min-height:410px}.hero-copy{min-height:410px}.hero h2{font-size:32px}.glass-button{display:none}.hero-actions,.hero-actions .neon-button{width:100%}.portal{min-height:108px}.card-result-grid{grid-template-columns:1fr 1fr;gap:10px}.entity-card{min-height:150px;padding:13px}.collection-art{width:82px;height:82px;flex-basis:82px}}

/* 2.2 — 更克制、可读性更高的主流流媒体视觉 */
[hidden]{display:none!important}
body{font-size:clamp(14px,calc(13px + .18vw),17px)}
.noise-layer{display:none}
.cursor-glow{opacity:.55}
.view-stack,.site-footer{width:min(100%,1500px);margin-right:auto;margin-left:auto}
.sidebar{width:246px;padding:29px 20px 20px;background:rgba(6,9,13,.97)}
:root{--sidebar:246px}
.brand{margin-bottom:42px}
.brand strong{font-size:19px;letter-spacing:.03em}
.brand small{font-size:9px;letter-spacing:.12em}
.nav-caption{font-size:10px;letter-spacing:.12em}
.nav-item{height:47px;padding:0 14px;border-radius:10px}
.nav-item b{font-size:14px;font-weight:540}
.nav-item em{font-size:9px}
.signal-card{padding:13px}
.signal-card small{font-size:8px}.signal-card strong{font-size:11px}
.account-main strong{font-size:13px}.account-main small{font-size:10px}
.topbar{height:88px;grid-template-columns:minmax(90px,1fr) minmax(340px,560px) minmax(270px,1fr)}
.search-box{height:46px;background:#0b1016}
.search-box input{font-size:14px}
.search-box button{font-size:9px}
.source-status{height:37px;font-size:11px}
.login-pill{height:38px;padding:0 14px;font-size:11px}
.login-pill b{max-width:120px;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.login-pill.logged-in{border-color:rgba(25,230,255,.34);background:#0b151d;color:#dffaff}
.top-user-avatar{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;background:var(--blue);color:#031014;font-size:10px;font-weight:850}
.top-user-avatar img,.user-avatar img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.page-intro small{font-size:13px}.page-intro h1{font-size:clamp(34px,3vw,48px)}.page-intro>span{font-size:10px}
.hero{min-height:420px;border-radius:20px;background:linear-gradient(105deg,#0b1017 10%,#0d151e 58%,#102432)}
.hero::before{opacity:.32;background-size:64px 64px}.hero::after{display:none}
.hero-copy{padding:56px clamp(36px,5vw,78px)}
.live-tag{font-size:10px;letter-spacing:.11em}
.hero h2{margin:20px 0 17px;font-size:clamp(48px,5.2vw,72px);line-height:1.02}
.hero h2 em{color:var(--blue);-webkit-text-stroke:0;text-shadow:none}
.hero-copy>p{max-width:500px;color:#91a7b5;font-size:14px;line-height:1.8}
.neon-button,.glass-button{height:46px;padding:0 23px;font-size:13px}
.hero-stats span{font-size:9px}.hero-stats b{font-size:12px}
.hero-object{min-height:420px}
.orbit,.spectrum-ring{display:none}
.album-prism{width:min(275px,25vw);border:0;border-radius:22px;box-shadow:0 35px 80px rgba(0,0,0,.52),0 0 50px rgba(25,230,255,.1);transform:translate(-50%,-50%) rotate(3deg)}
.album-prism::before{inset:12px -16px -12px 16px;border-color:rgba(255,255,255,.08);background:#101923}.album-prism::after{display:none}
.section-head small,.search-heading small,.feature-heading>div>small,.cloud-hero>div>small,.collection-hero>div>small{font-size:10px;letter-spacing:.12em}
.section-head h2{font-size:27px}.section-head>button{font-size:12px}
.album-grid{gap:clamp(16px,1.8vw,27px)}
.album-art{border-radius:12px}
.album-card h3{margin-top:14px;font-size:15px;font-weight:620}.album-card p{font-size:11px}
.dashboard-grid{gap:56px}
.dashboard-grid,.trend-panel,.mood-panel,.track-list{min-width:0;max-width:100%}
.track-row{min-height:74px;grid-template-columns:30px 48px minmax(120px,1.25fr) minmax(100px,.8fr) 52px 34px}
.track-cover{width:48px;height:48px}.track-copy strong{font-size:14px}.track-copy small,.track-album,.track-time{font-size:10px}
.portal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.portal{min-width:0;min-height:142px;padding:19px}.portal b{font-size:14px}.portal small,.portal span{font-size:9px}
.result-tabs button{height:39px;padding:0 18px;font-size:13px}.result-tabs em{font-size:9px}
.result-row{min-height:78px;grid-template-columns:38px 52px minmax(170px,1.3fr) minmax(120px,.8fr) 72px 116px}
.result-cover{width:52px;height:52px}.result-main strong{font-size:14px}.result-main small,.result-album,.result-time{font-size:10px}.format-badge{font-size:9px}
.cloud-row{min-height:80px}.cloud-size,.cloud-format{font-size:10px}
.row-action{opacity:.7}.cloud-row .row-action{opacity:1}
.station-card h3{font-size:20px}.station-card p,.station-card small{font-size:10px}
.player{height:98px;grid-template-columns:minmax(260px,1fr) minmax(390px,1.4fr) minmax(310px,1fr)}
:root{--player:98px}
.player-cover{width:58px;height:58px;flex-basis:58px}.track-identity small{font-size:8px}.track-identity strong{font-size:14px}.track-identity span{font-size:10px}
.tech-pill span,.quality-pill span{font-size:9px}
.upload-progress{height:36px}.upload-progress span{font-size:10px}
.upload-form button:disabled{cursor:wait;opacity:.55}

@media(max-width:1200px){
  :root{--sidebar:216px}.sidebar{width:216px}.source-status{display:none}
  .topbar{grid-template-columns:80px minmax(280px,1fr) auto}
}
@media(max-width:900px){
  :root{--sidebar:255px}.sidebar{width:255px}
  .hero-copy>p{font-size:13px}.album-prism{width:210px}
}
@media(max-width:680px){
  :root{--player:78px}
  .player{height:78px}.player-core{width:76px;min-width:76px}.page-intro h1{font-size:32px}.hero h2{font-size:39px}
  .hero-copy>p{font-size:12px}.album-card h3{font-size:14px}.album-card p{font-size:10px}
  .track-copy strong,.result-main strong{font-size:13px}.nav-item b{font-size:14px}
  .row-action{opacity:1}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}