/* ============================================================
   洛雪音乐网页版 — base.css
   主题变量体系：对齐 lx-music-desktop 主题规格
   （默认主题"绿意盎然" green primary #4DAF7C / 深色"黑灯瞎火"）
   ============================================================ */

:root {
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
  --font: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
  --dur: .3s;
  --dur-fast: .2s;
  --ease: ease;
  --sidebar-w: 76px;
  --toolbar-h: 54px;
  --playerbar-h: 66px;
}

/* ---- 主题色板（对齐 LX createThemes.js 主色） ---- */
[data-accent="green"]  { --primary: #4DAF7C; --primary-deep: #459E70; }
[data-accent="blue"]   { --primary: #3498DB; --primary-deep: #2E86C1; }
[data-accent="blue2"]  { --primary: #4F62D0; --primary-deep: #4454B8; }
[data-accent="orange"] { --primary: #F5AB35; --primary-deep: #DE9A2E; }
[data-accent="red"]    { --primary: #D64541; --primary-deep: #C03E3A; }
[data-accent="pink"]   { --primary: #F1828D; --primary-deep: #DA7580; }
[data-accent="purple"] { --primary: #9B59B6; --primary-deep: #8A4FA3; }
[data-accent="grey"]   { --primary: #6C7A89; --primary-deep: #606D7A; }

/* ---- 亮色主题（默认，对齐 LX green 派生值） ---- */
:root, [data-theme="light"] {
  --color-primary: var(--primary);
  --color-primary-font: var(--primary);
  --color-primary-dark: var(--primary-deep);
  /* primary 派生 light 色阶（light-100..1000，每级 +20% 亮度） */
  --color-primary-light-100: color-mix(in srgb, var(--primary) 83%, white);
  --color-primary-light-300: color-mix(in srgb, var(--primary) 49%, white);
  --color-primary-light-400: color-mix(in srgb, var(--primary) 40%, white);
  --color-primary-light-600: color-mix(in srgb, var(--primary) 16%, white);
  --color-primary-light-700: color-mix(in srgb, var(--primary) 8%, white);
  --color-primary-light-1000: #ffffff;
  --color-primary-alpha-100: color-mix(in srgb, var(--primary) 90%, transparent);
  --color-primary-alpha-300: color-mix(in srgb, var(--primary) 70%, transparent);
  --color-primary-alpha-600: color-mix(in srgb, var(--primary) 40%, transparent);
  --color-primary-alpha-900: color-mix(in srgb, var(--primary) 10%, transparent);

  --color-app-background: color-mix(in srgb, var(--color-primary-light-600) 70%, transparent);
  --color-main-background: #ffffff;
  --color-content-background: #ffffff;
  --color-nav-font: var(--primary);

  --color-font: #424242;
  --color-font-label: #9b9b9b;
  --color-font-hover: #212121;

  --color-button-background: color-mix(in srgb, var(--color-primary-light-400) 70%, transparent);
  --color-button-background-hover: color-mix(in srgb, var(--color-primary-light-300) 40%, transparent);
  --color-button-font: #424242;

  --color-list-hover: color-mix(in srgb, var(--color-primary-light-400) 30%, transparent);
  --color-list-active: color-mix(in srgb, var(--color-primary-light-300) 20%, transparent);
  --color-list-header-border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  --color-border: color-mix(in srgb, var(--primary) 14%, transparent);

  --badge-primary: var(--primary);
  --badge-secondary: #4baed5;
  --badge-tertiary: #e7aa36;

  --shadow: 0 0 4px rgba(0, 0, 0, .1);
  --shadow-pop: 0 1px 6px rgba(0, 0, 0, .18);
  --scroll-thumb: color-mix(in srgb, var(--primary) 40%, transparent);
  --mask: rgba(0, 0, 0, .4);
  color-scheme: light;
}

/* ---- 深色主题（对齐 LX black"黑灯瞎火"） ---- */
[data-theme="dark"] {
  --color-primary: var(--primary);
  --color-primary-font: color-mix(in srgb, var(--primary) 80%, white);
  --color-primary-dark: color-mix(in srgb, var(--primary) 60%, white);
  --color-primary-light-100: color-mix(in srgb, var(--primary) 90%, black);
  --color-primary-light-300: color-mix(in srgb, var(--primary) 65%, black);
  --color-primary-light-400: color-mix(in srgb, var(--primary) 55%, black);
  --color-primary-light-600: color-mix(in srgb, var(--primary) 35%, #2b2b2b);
  --color-primary-light-700: color-mix(in srgb, var(--primary) 22%, #242424);
  --color-primary-light-1000: #313131;
  --color-primary-alpha-100: color-mix(in srgb, var(--primary) 90%, transparent);
  --color-primary-alpha-300: color-mix(in srgb, var(--primary) 70%, transparent);
  --color-primary-alpha-600: color-mix(in srgb, var(--primary) 40%, transparent);
  --color-primary-alpha-900: color-mix(in srgb, var(--primary) 10%, transparent);

  --color-app-background: #131313;
  --color-main-background: rgba(19, 19, 19, .95);
  --color-content-background: #313131;
  --color-nav-font: color-mix(in srgb, var(--primary) 75%, white);

  --color-font: rgb(219, 219, 219);
  --color-font-label: rgb(146, 146, 146);
  --color-font-hover: #ffffff;

  --color-button-background: color-mix(in srgb, var(--color-primary-light-400) 55%, transparent);
  --color-button-background-hover: color-mix(in srgb, var(--color-primary-light-300) 30%, transparent);
  --color-button-font: rgb(219, 219, 219);

  --color-list-hover: rgba(255, 255, 255, .07);
  --color-list-active: rgba(255, 255, 255, .12);
  --color-list-header-border-bottom: 1px solid rgba(255, 255, 255, .1);
  --color-border: rgba(255, 255, 255, .12);

  --shadow: 0 0 4px rgba(0, 0, 0, .5);
  --shadow-pop: 0 1px 8px rgba(0, 0, 0, .45);
  --scroll-thumb: rgba(255, 255, 255, .25);
  --mask: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--font);
  background: var(--color-app-background);
  color: var(--color-font);
  font-size: 14px;
  line-height: 1.55;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { opacity: .8; }

::selection { background: var(--color-primary-alpha-600); }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }

/* 启动屏 */
.boot-splash {
  position: fixed; inset: 0; z-index: 999;
  background: var(--color-app-background);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .35s var(--ease), visibility .35s;
}
.boot-splash img { width: 72px; height: 72px; animation: bootPulse 1.4s var(--ease) infinite; }
.boot-bar { width: 150px; height: 3px; border-radius: 3px; background: var(--color-list-active); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; border-radius: 3px; background: var(--color-primary); animation: bootSlide 1.1s var(--ease) infinite; }
.boot-splash.hide { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes bootPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes bootSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}