/* ============================================================
   星海音乐 Web · base.css（v6.21 · 从 style.css 结构化拆分）
   内容：主题变量 / 全局重置 / 滚动条 / 基础图标
   ⚠ 级联顺序即加载顺序（app.html 按本文件在链中的位置引入），
     调整 @media / 覆盖关系时请保持文件间相对顺序不变。
   ============================================================ */

/* ============================================================
   星海音乐 Web - 样式（深色 · 星海主题）
   ============================================================ */
:root {
  /* 【v6.15】深色主题声明：让浏览器以深色模式渲染原生表单控件（select 弹层、
     光标、滚动条），避免 Android Chrome 把下拉框渲染成系统深灰、与主题脱节 */
  color-scheme: dark;
  --bg: #0a0e1a;
  --bg-2: #0e1424;
  --panel: rgba(17, 24, 39, 0.82);
  --panel-solid: #121a2b;
  --card: #16203a;
  --hover: #1a2540;
  --border: #233049;
  --text: #e8edf7;
  --sub: #8e9ab3;
  --accent: #7c8cff;
  --accent-2: #43d9e6;
  /* 【v6.31 阶段四】主题强调色支撑：rgba(var(--accent-rgb), x) 形态引用。
     theme.js 热切换时同步覆写这四个变量（localStorage: xinghai_theme） */
  --accent-rgb: 124, 140, 255;
  --accent-2-rgb: 67, 217, 230;
  --danger: #ff5d73;
  --grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --pb-h: 86px;
  --radius: 12px;
}

/* 【v6.11】全局关闭移动端默认点击高亮 —— 系统默认的半透明灰色矩形就是
   按钮按下瞬间的"淡方块"，深色玻璃主题下极其明显，且无法被 JS 拦截 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 560px at 85% -10%, rgba(var(--accent-rgb), 0.16), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, rgba(var(--accent-2-rgb), 0.10), transparent 55%),
    var(--bg);
  overflow: hidden;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #2a3550; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #3a4767; }
::-webkit-scrollbar-track { background: transparent; }

.icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }

/* ============================================================
   【v6.24 无障碍】键盘焦点光环 + 跳转主内容链接
   · :focus-visible 全局主题光环（accent 描边 + 光晕）：鼠标点击不出现
     （:focus-visible 只对键盘聚焦生效），Tab 导航时每个按钮/输入/滑杆
     都有清晰可见的焦点位置——深色主题下浏览器默认焦点环几乎不可见；
   · .skip-link 键盘用户直达主内容，跳过侧栏/顶栏的长列表 Tab 链；
     平时收在屏幕外（视觉隐藏），聚焦时滑入左上角。
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.22);
}
/* range 滑杆自绘轨道较窄，焦点环收紧 */
input[type="range"]:focus-visible { outline-offset: 1px; }
/* 跳转主内容（app.html 首元素，href="#main"） */
.skip-link {
  position: fixed;
  left: 12px;
  top: -56px;
  z-index: 300;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--panel-solid);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  border: 1px solid var(--accent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  transition: top 0.18s ease;
}
.skip-link:focus { top: 12px; }