/* ============================================================================
   星光 · 全站统一设计令牌与通用顶栏   css/star-ui.css
   ----------------------------------------------------------------------------
   设计原则（刻意保守）：
     · 只新增"变量 + 通用类"，不改任何页面原有的选择器和配色习惯；
     · 各页面自己的 <style> 在它后面加载，权重更高，视觉细节仍由页面自己做主；
     · 因此这个文件是"托底 + 统一"，不是重写。

   统一的核心是这几件事：
     1. 字体栈统一成一套（原来全站有 6 种写法）；
     2. 品牌色统一取渐变两端 #2563eb / #7c3aed（原本散落的 #2563eb 保留不变）；
     3. 文字/背景/描边的深浅两套取值集中在这里，页面只需写 var(...)；
     4. 顶部栏统一成 .star-bar 一个组件（原来 nav / top-bar / 裸返回链接三种并存）；
     5. 圆角、间距、内容宽度给一套刻度，方便以后逐步收敛。
   ============================================================================ */

:root {
    /* ---- 字体：全站唯一一套 ---- */
    --star-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
                 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

    /* ---- 品牌色 ---- */
    --star-brand: #2563eb;          /* 主色，与原有的商店/下载页一致 */
    --star-brand-2: #7c3aed;        /* 渐变另一端 */
    --star-brand-grad: linear-gradient(135deg, #2563eb, #7c3aed);
    --star-success: #10b981;
    --star-warn: #f59e0b;
    --star-danger: #ef4444;

    /* ---- 浅色主题 ---- */
    --star-bg: #faf9f8;
    --star-bg-soft: #f1f5f9;
    --star-card: #ffffff;
    --star-text: #1a1a1a;
    --star-text-soft: #4b5563;
    --star-text-mute: #94a3b8;
    --star-border: rgba(0, 0, 0, 0.08);
    --star-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --star-shadow-lg: 0 20px 30px -12px rgba(0, 0, 0, 0.15);

    /* ---- 圆角刻度（对应各页现有的 2rem / 1.5rem / 1rem / 3rem） ---- */
    --star-r-xs: 10px;
    --star-r-sm: 16px;
    --star-r-md: 24px;
    --star-r-lg: 32px;
    --star-r-pill: 60px;

    /* ---- 内容宽度刻度（收敛原来 14 种取值） ---- */
    --star-w-page: 1200px;          /* 首页 / 商店列表 */
    --star-w-narrow: 900px;         /* 规则 / 日志 */
    --star-w-form: 640px;           /* 表单类 */

    /* ---- 顶栏 ---- */
    --star-bar-h: 60px;
}

/* 深色主题：一套变量，两种触发方式都支持
   —— 页面老代码用的是 body.dark，系统偏好用的是 prefers-color-scheme */
body.dark,
html.star-dark body {
    --star-bg: #0a0c10;
    --star-bg-soft: #1e1f2c;
    --star-card: #1e1f2c;
    --star-text: #eef2ff;
    --star-text-soft: #cbd5e1;
    --star-text-mute: #94a3b8;
    --star-border: rgba(255, 255, 255, 0.10);
    --star-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    --star-shadow-lg: 0 20px 30px -12px rgba(0, 0, 0, 0.45);
}

/* 统一的换肤过渡，避免切换时生硬跳变 */
body {
    transition: background-color .3s, color .3s;
}


/* ============================================================================
   主题变量（写在 <html> 元素自身上）
   ----------------------------------------------------------------------------
   为什么必须写在 html 上：
     原来的写法是 `html.preload-dark body { --bg-page: ... }`，变量只落在 body。
     但页面里普遍是 `body { background: var(--bg-page) }`，而 :root 也定义了
     同名变量 —— 解析 var() 时会先取到根上的浅色值，导致"预置类加上了、
     变量也确实改写了，背景却纹丝不动"（实测复现）。
     变量落到 html 这一层，body 通过普通继承就能拿到正确值，不再依赖选择器比较。
   ============================================================================ */
html.preload-dark,
html.star-dark,
html[data-star-theme="dark"] {
    --bg-page: #0a0c10;
    --star-bg: #0a0c10;
    --text-primary: #eef2ff;
    --star-text: #eef2ff;
}
html.preload-light,
html[data-star-theme="light"] {
    --bg-page: #faf9f8;
    --star-bg: #faf9f8;
    --text-primary: #1e293b;
    --star-text: #1e293b;
}

/* html 上的预置类：由 js/star-theme.js 在 <head> 里第一时间写入。
   作用是在页面渲染前就定好底色，避免"浅色用户先看到一闪的深色"。

   修复记录（重要）：
   原来这里只写 background-color，结果首页切深色时背景纹丝不动 ——
   因为 index.html 内联的 `body { background: var(--bg-page) }` 在本文件之后加载，
   简写属性把 background-color 覆盖掉了。
   现在改为同时改写 CSS 变量，这样任何用 var(--bg-page) / var(--star-bg) 的地方
   都会跟着变，不再依赖谁先谁后。 */
html.preload-dark body {
    --bg-page: #0a0c10;
    --star-bg: #0a0c10;
    --text-primary: #eef2ff;
    --star-text: #eef2ff;
    background-color: #0a0c10;
}
html.preload-light body {
    --bg-page: #faf9f8;
    --star-bg: #faf9f8;
    --text-primary: #1e293b;
    --star-text: #1e293b;
    background-color: #faf9f8;
}

/* 兼容分支：有的页面把深色写成 @media (prefers-color-scheme: dark)，
   访客如果没有手动切过主题，js/star-theme.js 会跟随系统并写一个提示属性，
   这里据此同步变量与底色（有自己深色方案的页面由它们自己的规则优先接管）。 */
html[data-star-theme="dark"] body {
    --bg-page: #0a0c10;
    --star-bg: #0a0c10;
    --text-primary: #eef2ff;
    --star-text: #eef2ff;
    background-color: #0a0c10;
}
html[data-star-theme="light"] body {
    --bg-page: #faf9f8;
    --star-bg: #faf9f8;
    --text-primary: #1e293b;
    --star-text: #1e293b;
    background-color: #faf9f8;
}

/* ============================================================================
   给"没有自己深色方案"的页面兜底配色（修复条款页看不清的问题）
   ----------------------------------------------------------------------------
   rules.html 这类页面是深底设计、正文写成浅灰；一旦进入深色主题，
   页面背景仍是浅色，浅灰字配浅底变成 1.05:1，几乎看不见。
   由 js/star-theme.js 给这些页面加 html.no-dark-native 标记，
   这里统一把底色压深、并保证文字有足够对比度（正文 >= 4.5:1）。
   ============================================================================ */

/* 给 body 加 .dark 的页面兜底一份变量（index.html 原来定义在 body.dark 上，
   其它页面没有；统一在这里补一份，避免"同一个类在不同页面效果不同"） */
body.dark {
    --bg-page: #0a0c10;
    --star-bg: #0a0c10;
    --text-primary: #eef2ff;
    --star-text: #eef2ff;
}

html.no-dark-native body {
    background-color: #0a0c10 !important;
    color: #e8edf5;
}

/* ============================================================================
   背景兜底（修复"首页切主题背景不变"）
   ----------------------------------------------------------------------------
   根因：index.html 的 body 用的是简写属性 `background: var(--bg-page)`。
   简写里 background-color 的最终生效值会压过本文件里的 background-color 声明 ——
   即使本文件的后代选择器优先级更高也一样（实测：变量已是 #0a0c10，背景仍是浅色）。
   这里用 :where() 把选择器权重压到 0，同时声明带 !important，于是：
     · 首页这类用 var(--bg-page) 的页面 → 跟着主题走 ✓
     · 自己写了渐变背景并用 !important 保护的页面（维护 / 支持 / 活动 …）→ 不受影响 ✓
   前提：这些页面必须带 html.preload-* / html.star-dark 标记，
   由 js/star-theme.js 在 <head> 里第一时间写入。
   ============================================================================ */
:where(html.preload-dark, html.star-dark, html[data-star-theme="dark"]) body {
    background-color: #0a0c10 !important;
}
/* 浅色兜底要排除"深色设计"的页面（条款页这类深底浅字、底色写死的页面）：
   否则浅底会把它们的浅色正文盖住，变成浅字配浅底看不清。
   标记 html.star-dark-page 由 js/star-theme.js 判定后加上。 */
:where(html.preload-light) body,
html.preload-light:not(.star-dark-page) body {
    background-color: #faf9f8 !important;
}

/* 最终兜底：给 body 同时加了 .dark 的页面（首页 / 商店 / 聊天室等）
   把深色背景直接定死在 body 上。
   这里刻意用 [class~="dark"] 代替 .dark：选择器权重从 (0,2,1) 降到 (0,1,1)，
   于是"保护渐变的 !important 规则"（维护 / 支持 / 活动 …，权重 (0,2,1)）
   依旧优先，不会被这一条改掉。 */
html[class~="preload-dark"] body[class~="dark"],
html[class~="star-dark"] body[class~="dark"] {
    background-color: #0a0c10 !important;
}
html.no-dark-native h1,
html.no-dark-native h2,
html.no-dark-native h3,
html.no-dark-native h4,
html.no-dark-native h5,
html.no-dark-native h6,
html.no-dark-native p,
html.no-dark-native li,
html.no-dark-native span,
html.no-dark-native div,
html.no-dark-native a,
html.no-dark-native b,
html.no-dark-native strong,
html.no-dark-native small {
    color: #e8edf5;
}
html.no-dark-native .back-link,
html.no-dark-native .back-btn {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .22);
    color: #e8edf5;
}
html.no-dark-native input,
html.no-dark-native select,
html.no-dark-native textarea {
    background: #1e1f2c;
    color: #e8edf5;
    border-color: rgba(255, 255, 255, .18);
}

/* ============================================================================
   统一顶栏 .star-bar
   ----------------------------------------------------------------------------
   原来每个页面自己造一个顶部：<nav class="nav-links">、<div class="top-bar">、
   或者干脆只有一句"← 返回主页"。这里统一成一个组件，由 js/star-theme.js 自动插入，
   所以页面源码里不需要加东西（也就不需要动任何原有注释）。
   ============================================================================ */
.star-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--star-bar-h);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    font-family: var(--star-font);
    background: var(--star-brand-grad);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    color: #fff;
}
body.dark .star-bar,
html.star-dark .star-bar {
    background: rgba(15, 23, 42, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.star-bar__brand {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .3px;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #fff, #e0e7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.dark .star-bar__brand,
html.star-dark .star-bar__brand {
    background: linear-gradient(135deg, #a5f3fc, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.star-bar__links {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    list-style: none;
    margin-block: 0;
    padding: 0;
}
.star-bar__links a {
    display: block;
    padding: .34rem .8rem;
    border-radius: var(--star-r-pill);
    font-size: .88rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.star-bar__links a:hover,
.star-bar__links a:focus-visible {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    text-decoration: none;
}
.star-bar__links a[aria-current="page"] {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* 换肤按钮：统一成同一个胶囊，原来各页文案是 🌙 深色 / ☀️ 浅色 */
.star-theme-btn {
    margin-left: .2rem;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--star-r-pill);
    color: #fff;
    font-family: var(--star-font);
    font-size: .82rem;
    font-weight: 500;
    padding: .34rem .8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
}
.star-theme-btn:hover { background: rgba(255, 255, 255, .3); }

/* 顶栏是 fixed 的，页面内容要给它让出高度。
   各页面原来用各自的方式留白（body padding-top / margin-top:60px / 无），
   这里只对"还没有自己顶栏"的页面生效，避免和页面原有布局打架。 */
body.star-has-bar { padding-top: var(--star-bar-h); }

/* 手机端：链接收进一行，横向可滑，不再挤成两行 */
.star-bar__toggle { display: none; }
@media (max-width: 768px) {
    .star-bar { gap: .5rem; padding: 0 .7rem; }
    .star-bar__brand { font-size: .95rem; }
    .star-bar.no-collapse .star-bar__links { overflow-x: auto; }
    .star-bar:not(.no-collapse) .star-bar__links {
        position: absolute;
        top: var(--star-bar-h);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        padding: .6rem .7rem .8rem;
        margin: 0;
        background: var(--star-brand-grad);
        box-shadow: 0 18px 28px -14px rgba(0, 0, 0, .45);
    }
    body.dark .star-bar:not(.no-collapse) .star-bar__links,
    html.star-dark .star-bar:not(.no-collapse) .star-bar__links {
        background: rgba(15, 23, 42, .97);
    }
    .star-bar.open .star-bar__links { display: flex; }
    .star-bar:not(.no-collapse) .star-bar__links a {
        padding: .6rem 1rem;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .1);
        text-align: center;
    }
    .star-bar__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        background: rgba(255, 255, 255, .16);
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: var(--star-r-pill);
        color: #fff;
        line-height: 1;
        padding: .3rem .6rem;
        cursor: pointer;
    }
    .star-bar__toggle svg { display: block; }
    .star-bar.open .star-bar__toggle { background: rgba(255, 255, 255, .3); }
}

/* ============================================================================
   通用小工具（页面可以选用，不强制）
   ============================================================================ */
.star-card {
    background: var(--star-card);
    border-radius: var(--star-r-lg);
    box-shadow: var(--star-shadow);
    border: 1px solid var(--star-border);
}
.star-muted { color: var(--star-text-mute); }

/* 统一"返回主页"链接的外观：原来 8 个页面各写各的，大小、底色、间距都不同。
   页面自己已经定义过的 padding / font-size 仍然优先生效。 */
.back-link,
.back-btn {
    display: inline-block;
    padding: 8px 20px;
    border-radius: var(--star-r-pill);
    background: var(--star-bg-soft);
    border: 1px solid var(--star-border);
    color: var(--star-text-soft);
    text-decoration: none;
    font-family: var(--star-font);
    transition: background .2s, color .2s, border-color .2s;
}
.back-link:hover,
.back-btn:hover {
    background: var(--star-brand);
    border-color: var(--star-brand);
    color: #fff;
    text-decoration: none;
}

/* 统一顶部栏/返回栏里的链接与按钮字体，避免同一组件在不同页字体不同 */
.top-bar,
.back-nav {
    font-family: var(--star-font);
}