/* ==========================================================================
   瑞亿播放器 · 设计令牌与主题引擎
   所有皮肤通过覆盖以下 CSS 变量实现外观定制。
   ========================================================================== */

:root {
  /* ---- 品牌主色（可被主题/皮肤覆盖） ---- */
  --ry-accent: #22d3ee;
  --ry-accent-2: #3b82f6;
  --ry-accent-ink: #04121a;

  /* ---- 背景与表面 ---- */
  --ry-base: #0b1220;
  --ry-bg-image: radial-gradient(120% 90% at 50% 0%, #16233d 0%, #0b1220 55%, #070b14 100%);
  --ry-surface: rgba(255, 255, 255, 0.045);
  --ry-surface-2: rgba(255, 255, 255, 0.075);
  --ry-surface-3: rgba(255, 255, 255, 0.11);
  --ry-border: rgba(255, 255, 255, 0.09);
  --ry-border-strong: rgba(255, 255, 255, 0.16);

  /* ---- 文本 ---- */
  --ry-text: #e8eefb;
  --ry-text-dim: #9fb0cc;
  --ry-text-mute: #6b7d99;

  /* ---- 形状 ---- */
  --ry-radius-sm: 8px;
  --ry-radius: 14px;
  --ry-radius-lg: 20px;
  --ry-radius-pill: 999px;
  --ry-blur: 18px;

  /* ---- 阴影 ---- */
  --ry-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  --ry-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.3);
  --ry-glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 40px rgba(0, 0, 0, 0.5);

  /* ---- 字体 ---- */
  --ry-font: "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC",
    "Source Han Sans SC", "Noto Sans CJK SC", "Segoe UI", system-ui, sans-serif;
  --ry-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  /* ---- 布局（由皮肤覆盖） ---- */
  --ry-side-w: 336px;
  --ry-topbar-h: 60px;
  --ry-controlbar-h: 76px;
  --ry-gap: 16px;
  --ry-stage-radius: var(--ry-radius-lg);
  --ry-accent-grad: linear-gradient(135deg, var(--ry-accent), var(--ry-accent-2));

  color-scheme: dark;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--ry-font);
  color: var(--ry-text);
  background: var(--ry-bg-image);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

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

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ry-surface-3);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ry-border-strong); background-clip: padding-box; }

:focus-visible {
  outline: 2px solid var(--ry-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==========================================================================
   内置主题预设
   每套主题定义：主色、辅色、底色、背景构造方式、明暗倾向
   ========================================================================== */

/* 暗夜黑（默认） */
[data-theme="midnight"] {
  --ry-accent: #22d3ee;
  --ry-accent-2: #6366f1;
  --ry-base: #0b1220;
  --ry-bg-image: radial-gradient(120% 90% at 50% 0%, #16233d 0%, #0b1220 55%, #070b14 100%);
  --ry-text: #e8eefb;
  --ry-text-dim: #9fb0cc;
  --ry-text-mute: #6b7d99;
  --ry-surface: rgba(255, 255, 255, 0.045);
  --ry-surface-2: rgba(255, 255, 255, 0.075);
  --ry-border: rgba(255, 255, 255, 0.09);
  --ry-accent-ink: #04121a;
}

/* 简约白 */
[data-theme="paper"] {
  --ry-accent: #0ea5e9;
  --ry-accent-2: #2563eb;
  --ry-base: #eef1f6;
  --ry-bg-image: linear-gradient(180deg, #f7f9fc 0%, #e9edf4 100%);
  --ry-text: #10182a;
  --ry-text-dim: #4a5a72;
  --ry-text-mute: #7a8aa3;
  --ry-surface: rgba(15, 30, 55, 0.045);
  --ry-surface-2: rgba(15, 30, 55, 0.075);
  --ry-surface-3: rgba(15, 30, 55, 0.11);
  --ry-border: rgba(15, 30, 55, 0.1);
  --ry-border-strong: rgba(15, 30, 55, 0.2);
  --ry-shadow: 0 18px 48px rgba(20, 35, 60, 0.14);
  --ry-shadow-sm: 0 6px 18px rgba(20, 35, 60, 0.1);
  --ry-accent-ink: #ffffff;
  color-scheme: light;
}

/* 透明毛玻璃 */
[data-theme="glass"] {
  --ry-accent: #7dd3fc;
  --ry-accent-2: #a78bfa;
  --ry-base: #101a2b;
  --ry-bg-image:
    radial-gradient(80% 60% at 15% 10%, rgba(125, 211, 252, 0.22), transparent 60%),
    radial-gradient(70% 60% at 85% 25%, rgba(167, 139, 250, 0.22), transparent 62%),
    radial-gradient(90% 70% at 50% 100%, rgba(34, 197, 94, 0.14), transparent 65%),
    linear-gradient(160deg, #131f33 0%, #0a1120 100%);
  --ry-surface: rgba(255, 255, 255, 0.07);
  --ry-surface-2: rgba(255, 255, 255, 0.12);
  --ry-surface-3: rgba(255, 255, 255, 0.18);
  --ry-border: rgba(255, 255, 255, 0.14);
  --ry-blur: 26px;
}

/* 彩色渐变 */
[data-theme="vivid"] {
  --ry-accent: #fbbf24;
  --ry-accent-2: #f43f5e;
  --ry-base: #1a0f2e;
  --ry-bg-image:
    radial-gradient(70% 55% at 12% 8%, rgba(244, 63, 94, 0.3), transparent 60%),
    radial-gradient(70% 55% at 88% 18%, rgba(251, 191, 36, 0.24), transparent 60%),
    radial-gradient(80% 60% at 50% 105%, rgba(139, 92, 246, 0.3), transparent 62%),
    linear-gradient(150deg, #231442 0%, #120a24 100%);
}

/* 莫兰迪低饱和 */
[data-theme="morandi"] {
  --ry-accent: #a3b8a0;
  --ry-accent-2: #c2a49a;
  --ry-base: #2b2f33;
  --ry-bg-image: linear-gradient(165deg, #343a40 0%, #26292d 55%, #1e2124 100%);
  --ry-text: #e6e2dc;
  --ry-text-dim: #a8a49d;
  --ry-text-mute: #7d7a75;
  --ry-surface: rgba(255, 255, 255, 0.05);
  --ry-surface-2: rgba(255, 255, 255, 0.085);
  --ry-border: rgba(255, 255, 255, 0.08);
  --ry-accent-ink: #1c2024;
}

/* 深海（额外内置） */
[data-theme="abyss"] {
  --ry-accent: #38bdf8;
  --ry-accent-2: #14b8a6;
  --ry-base: #04121c;
  --ry-bg-image: radial-gradient(110% 80% at 50% 0%, #0a2c3d 0%, #04121c 60%, #010a10 100%);
}

/* 樱绯（额外内置） */
[data-theme="sakura"] {
  --ry-accent: #fb7185;
  --ry-accent-2: #c084fc;
  --ry-base: #1c1220;
  --ry-bg-image:
    radial-gradient(75% 55% at 18% 12%, rgba(251, 113, 133, 0.26), transparent 60%),
    linear-gradient(160deg, #22162a 0%, #140d1a 100%);
}

/* 极光（额外内置，渐变特色） */
[data-theme="aurora"] {
  --ry-accent: #4ade80;
  --ry-accent-2: #22d3ee;
  --ry-base: #061a18;
  --ry-bg-image:
    radial-gradient(60% 50% at 20% 10%, rgba(74, 222, 128, 0.24), transparent 60%),
    radial-gradient(60% 50% at 80% 20%, rgba(34, 211, 238, 0.24), transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(129, 140, 248, 0.2), transparent 62%),
    linear-gradient(160deg, #07231f 0%, #041210 100%);
}

/* 石墨（额外内置，纯色系） */
[data-theme="graphite"] {
  --ry-accent: #eab308;
  --ry-accent-2: #f97316;
  --ry-base: #15171a;
  --ry-bg-image: linear-gradient(180deg, #1b1e22 0%, #101214 100%);
}

/* ---------- 自定义纯色 / 渐变背景（由设置面板注入） ---------- */
[data-bgmode="solid"] {
  background-image: var(--ry-solid);
}
[data-bgmode="gradient"] {
  background-image: var(--ry-gradient);
}

/* 背景图模式：背景图 + 主题色蒙版 */
[data-bgmode="image"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--ry-bgphoto);
  background-size: cover;
  background-position: center;
  z-index: -2;
}
[data-bgmode="image"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--ry-photo-veil, linear-gradient(180deg, rgba(6, 10, 18, 0.72), rgba(6, 10, 18, 0.88)));
  z-index: -1;
  pointer-events: none;
}

/* 背景图 + 模糊玻璃质感 */
[data-bgmode="image"][data-photo-blur="on"] body::before {
  filter: blur(26px) saturate(130%);
  transform: scale(1.08);
}