/* ==========================================================================
   Dream · 全站基线样式（base.css）
   --------------------------------------------------------------------------
   定位：这是整站的"地基"。所有页面（index / shopindex / tail / projects/*）
        都应最先引入本文件，再引入各自的局部样式。
   原则：同构不同色 —— 结构、字体、间距、圆角、阴影、动效、栅格全站统一，
        只放开 --accent 一个令牌让产品页有个性。
   约束：本文件只提供"令牌 + 基础重置 + 通用骨架组件"，
        不写任何页面专属的东西，避免把 base 写成大杂烩。
   引入顺序：base.css → detail.css（详情页） → 页内 <style>
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌（Design Tokens）
   ==========================================================================
   命名约定：
     --brand-*    站点主色，永不随产品变（导航/页脚/全局按钮用它）
     --accent-*   强调色，唯一允许按产品变化的家族
     --ink-*      文字色阶（深 → 浅）
     --bg-*       页面底色
     --space-*    间距阶（4 的倍数）
     --fs-*       字号阶
     --radius-*   圆角阶
     --shadow-*   阴影
     --ease-*     动效曲线
   ========================================================================== */
:root {
    /* ---------- 主色（站点身份，全站统一） ---------- */
    --brand-blue: #4A90E2;
    --brand-blue-bright: #5BA0F5;
    --brand-blue-light: #7BB8F5;
    --brand-blue-dark: #2D6BA8;
    --brand-blue-pale: rgba(74, 144, 226, 0.08);
    --brand-blue-line: rgba(74, 144, 226, 0.15);

    /* ---------- 强调色（唯一可变令牌；默认回落站点蓝） ---------- */
    --accent: var(--brand-blue);
    --accent-bright: var(--brand-blue-bright);
    --accent-dark: var(--brand-blue-dark);
    --accent-pale: var(--brand-blue-pale);
    --accent-line: var(--brand-blue-line);

    /* ---------- 文字色阶 ---------- */
    /* --ink-deep：比 --ink 更深一档，只给"巨大标题"用。
       原因：大字号笔画粗、视觉重量大，用 --ink 会显得发灰；
            再深一档才能压住画面，形成封面应有的分量感。 */
    --ink-deep: #0F1B33;

    --ink: #1A2A4A;
    --ink-soft: #4A5A7A;
    --ink-mute: #5A6A8A;
    --ink-faint: #7A8AA8;
    --ink-ghost: #94A3B8;

    /* ---------- 页面底色 ---------- */
    --bg-start: #F8FAFF;
    --bg-end: #F0F5FF;

    /* ---------- 面（玻璃拟态） ---------- */
    --glass: rgba(255, 255, 255, 0.75);
    --glass-strong: rgba(255, 255, 255, 0.92);
    --glass-weak: rgba(255, 255, 255, 0.40);
    --line-soft: rgba(74, 144, 226, 0.06);
    --line-base: rgba(74, 144, 226, 0.10);

    /* ---------- 间距阶（4 的倍数） ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ---------- 字号阶 ---------- */
    --fs-xs: 0.70rem;
    --fs-sm: 0.80rem;
    --fs-base: 0.92rem;
    --fs-md: 1.05rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.50rem;
    --fs-2xl: 2.00rem;

    /* ---------- 圆角阶 ---------- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 20px;
    --radius-pill: 30px;
    --radius-full: 50%;

    /* ---------- 阴影 ---------- */
    --shadow-soft: rgba(74, 144, 226, 0.06);
    --shadow-hover: rgba(74, 144, 226, 0.14);
    --shadow-lift: 0 8px 36px var(--shadow-hover);

    /* ---------- 动效曲线 ---------- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 0.2s;
    --dur-base: 0.35s;
    --dur-slow: 0.5s;

    /* ---------- 版心 ---------- */
    --content-max: 1100px;
    --content-wide: 1240px;

    /* ---------- 字体栈 ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Noto Sans SC', 'Segoe UI',
                 Roboto, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* ==========================================================================
   2. 强调色变体（同构不同色）
   ==========================================================================
   用法：<body class="product-theme" data-accent="green">
   不写 data-accent 即使用站点蓝。
   ========================================================================== */
.product-theme[data-accent="blue"] {
    --accent: #4A90E2;
    --accent-bright: #5BA0F5;
    --accent-dark: #2D6BA8;
    --accent-pale: rgba(74, 144, 226, 0.08);
    --accent-line: rgba(74, 144, 226, 0.15);
}

.product-theme[data-accent="green"] {
    --accent: #43A047;
    --accent-bright: #66BB6A;
    --accent-dark: #2E7D32;
    --accent-pale: rgba(67, 160, 71, 0.08);
    --accent-line: rgba(67, 160, 71, 0.15);
}

.product-theme[data-accent="violet"] {
    --accent: #6e46ff;
    --accent-bright: #9070ff;
    --accent-dark: #5530d0;
    --accent-pale: rgba(110, 70, 255, 0.08);
    --accent-line: rgba(110, 70, 255, 0.14);
}

.product-theme[data-accent="amber"] {
    --accent: #FFB300;
    --accent-bright: #FFCA28;
    --accent-dark: #C88A00;
    --accent-pale: rgba(255, 179, 0, 0.10);
    --accent-line: rgba(255, 179, 0, 0.20);
}

/* ==========================================================================
   3. 基础重置
   ==========================================================================
   注意：这里只做"安全"的重置 —— 不设 body 的 overflow-x: hidden！
   position: sticky 要求所有祖先的 overflow 都是 visible，
   在 body 上写 overflow-x: hidden 会让所有吸顶导航失效。
   若某页确实需要裁剪横向溢出，请写在 html 上（html { overflow-x: hidden }），
   且务必确认吸顶仍然工作。
   ========================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    background: linear-gradient(145deg, var(--bg-start) 0%, var(--bg-end) 100%);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* ==========================================================================
   4. 通用骨架组件（.dw-* 前缀）
   ==========================================================================
   所有页面共用同一套结构与 class 名，颜色一律走 var(--accent-*)，
   于是"同构不同色"自动成立。
   ========================================================================== */

/* ---------- 4.1 顶部导航 ---------- */
.dw-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid var(--accent-line);
    padding: var(--space-3) var(--space-6);
    display: flex;
    align-items: center;
    /* 导航链接与品牌同侧靠左（少主：右侧那排要挪到左边，跟主页对应） */
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px var(--space-6);
}

.dw-nav__brand {
    display: inline-flex;
    align-items: baseline;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-dark);
    flex-shrink: 0;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    font-feature-settings: "kern" 1, "liga" 1;
    animation: dw-brand-in .55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* D 方块 = Dream 首字母 D 的"图标化"版本，与 ream 同字号同基线 */
.dw-nav__brand .mark {
    width: 1em;
    height: 1em;
    display: block;
    flex-shrink: 0;
    margin-right: 0.06em;                                  /* 1.5px 呼吸：让 D 与 r 各占自己空间 */
    border-radius: 0.18em 0.26em 0.18em 0.18em;            /* 不对称圆角：右边更大，"软"地指向 ream */
    transform: translateY(0.16em);                          /* 基线微调：D 方块底部与 ream 底部齐平 */
    transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow .4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 6px rgba(74, 144, 226, .18);
}

.dw-nav__brand .text {
    background: linear-gradient(180deg, var(--accent-dark) 0%, var(--accent-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: filter .35s cubic-bezier(0.22, 1, 0.36, 1);
    animation: dw-brand-in .6s cubic-bezier(0.22, 1, 0.36, 1) .08s both;
}

.dw-nav__brand small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ink-mute);
    margin-left: 0.4em;
    animation: dw-brand-in .65s cubic-bezier(0.22, 1, 0.36, 1) .16s both;
}

/* hover / 键盘 focus 时 D 方块与 ream 联动 */
.dw-nav__brand:hover .mark,
.dw-nav__brand:focus-visible .mark {
    transform: translateY(0.16em) translateX(2px) rotate(-3deg) scale(1.06);
    box-shadow:
        0 4px 14px rgba(74, 144, 226, .32),
        6px 0 14px -2px rgba(74, 144, 226, .45);           /* 右侧"色彩桥"：D 色域渗到 ream 区域 */
}

.dw-nav__brand:hover .text,
.dw-nav__brand:focus-visible .text {
    filter: brightness(1.1) saturate(1.05);
}

/* 首次进入：水平轻滑入（错峰） */
@keyframes dw-brand-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

/* 减动效用户：进入动画 + 交互过渡全部关掉，但保留基线 translateY */
@media (prefers-reduced-motion: reduce) {
    .dw-nav__brand,
    .dw-nav__brand .text,
    .dw-nav__brand small {
        animation: none;
    }
    .dw-nav__brand .mark,
    .dw-nav__brand .text,
    .dw-nav__brand:hover .mark,
    .dw-nav__brand:focus-visible .mark,
    .dw-nav__brand:hover .text,
    .dw-nav__brand:focus-visible .text {
        transition: none;
    }
    .dw-nav__brand:hover .mark,
    .dw-nav__brand:focus-visible .mark {
        transform: translateY(0.16em);
    }
    .dw-nav__brand:hover .text,
    .dw-nav__brand:focus-visible .text {
        filter: none;
    }
}

.dw-nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.dw-nav__links a {
    position: relative;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 4px 0;
    transition: color var(--dur-base) var(--ease);
}

.dw-nav__links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transition: width var(--dur-base) var(--ease);
}

.dw-nav__links a:hover,
.dw-nav__links a.active {
    color: var(--accent);
}

.dw-nav__links a:hover::after,
.dw-nav__links a.active::after {
    width: 100%;
}

/* ---------- 4.2 版心 ---------- */
.dw-container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.dw-container--wide {
    max-width: var(--content-wide);
}

/* ---------- 4.3 区块标题 ---------- */
.dw-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.dw-section-sub {
    font-size: 0.85rem;
    color: var(--ink-ghost);
    margin-bottom: var(--space-6);
}

/* ---------- 4.4 卡片 ---------- */
.dw-card {
    position: relative;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line-base);
    border-radius: var(--radius);
    box-shadow: 0 4px 24px var(--shadow-soft);
    padding: var(--space-5);
    transition: box-shadow var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}

.dw-card:hover {
    box-shadow: var(--shadow-lift);
    border-color: var(--accent-line);
}

/* ---------- 4.5 网格 ---------- */
.dw-grid {
    display: grid;
    gap: var(--space-4);
}

.dw-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dw-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dw-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 4.6 按钮 ---------- */
.dw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px var(--space-6);
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background var(--dur-base) var(--ease),
                transform var(--dur-fast) var(--ease),
                box-shadow var(--dur-base) var(--ease);
}

.dw-btn:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px var(--accent-line);
}

.dw-btn--ghost {
    background: var(--accent-pale);
    color: var(--accent);
    border-color: transparent;
}

.dw-btn--ghost:hover {
    background: var(--accent-line);
    color: var(--accent-dark);
}

/* ---------- 4.7 徽标 ---------- */
.dw-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    background: var(--accent-pale);
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- 4.8 页脚 ---------- */
.dw-footer {
    position: relative;
    text-align: center;
    padding: var(--space-6) var(--space-5);
    margin-top: var(--space-8);
    border-top: 1px solid var(--line-soft);
    color: var(--ink-ghost);
    font-size: var(--fs-sm);
}

.dw-footer a {
    color: var(--accent);
}

.dw-footer a:hover {
    color: var(--accent-dark);
}

/* 页脚顶部渐变线：用 ::before 压在 1px 实线边框上 */
.dw-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg,
                rgba(0, 0, 0, 0), var(--accent) 22%, var(--accent-line) 58%, rgba(0, 0, 0, 0));
}

/* 版权行 */
.dw-footer__cr {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-ghost);
}
.dw-footer__cr strong {
    color: var(--ink-soft);
}

/* 友情链接（由 softwares.js 的 friendLinks 动态填充） */
.friends {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.friends a {
    font-size: var(--fs-sm);
    color: var(--ink-faint);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-base);
    transition: color .25s, border-color .25s, background .25s;
}
.friends a:hover {
    color: var(--accent);
    border-color: var(--accent-line);
    background: var(--accent-pale);
}
.friends__label {
    font-size: var(--fs-sm);
    color: var(--ink-ghost);
    align-self: center;
    letter-spacing: .08em;
}

/* ---------- 4.9 占位/空态 ---------- */
.dw-empty {
    padding: var(--space-8) var(--space-5);
    text-align: center;
    color: var(--ink-ghost);
    font-size: var(--fs-sm);
}

/* ==========================================================================
   5. 响应式（三档）
   ==========================================================================
   768px：导航收窄、多列栅格降为 1-2 列
   480px：导航链接换行、全部降为 1 列
   ========================================================================== */
@media (max-width: 768px) {
    .dw-nav {
        padding: var(--space-2) var(--space-4);
        gap: 6px var(--space-4);
    }
    .dw-nav__brand { font-size: 1.15rem; }
    .dw-nav__links { gap: var(--space-4); font-size: 0.85rem; }
    .dw-container { padding: 0 var(--space-4); }
    .dw-section-title { font-size: 1.15rem; }
    .dw-grid--3,
    .dw-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .dw-nav__links {
        width: 100%;
        justify-content: flex-start;
        gap: var(--space-3);
    }
    .dw-grid--2,
    .dw-grid--3,
    .dw-grid--4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. 无障碍：尊重"减少动效"系统偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}