/* ================================================================ */
/* 公共样式 - 所有页面共用                                          */
/* ----------------------------------------------------------------
   设计令牌体系（四层架构）
     L1 原子令牌 Primitive  --space-12 / --fs-400 / --radius-lg / --ink
     L2 语义别名 Semantic   --card-padding / --fs-body / --radius-card
     L3 公共组件类 Component .card / .btn / .toast-item / .empty-state
     L4 页面覆盖 Page        各页 <style> 仅保留页面独有样式

   阶段一（本次）规约：
     · L1「名即值」，页面里的字面量一律替换为 **同值** L1 令牌 → 像素级零变化
     · L2 别名本阶段「只定义、不使用」，是阶段二做尺度收敛的旋钮
     · ⚠️ CSS 规范不允许在 @media 条件中使用 var()，
       故 768px / 480px / 769px 等断点值 **必须保留字面量**，不可令牌化
   ---------------------------------------------------------------- */
/* ================================================================ */

/* ================================================================ */
/* ===== L1 + L2 设计令牌（唯一真源） ===== */
/* ================================================================ */
:root {
    /* ---------- L1 · 颜色：基础中性色（既有，勿改值） ---------- */
    --bg: #fafafa;
    --paper: #fff;
    --ink: #0a0a0a;
    --ink-weak: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;

    /* ---------- L1 · 颜色：品牌与语义状态色（D1 已批准，取现网原值，无损） ---------- */
    --brand: #f5b342;        /* 品牌金 */
    --danger: #ef4444;       /* 错误主色 */
    --danger-ink: #991b1b;   /* 错误文字 */
    --danger-bg: #fef2f2;    /* 错误底色 */
    --success: #22c55e;      /* 成功主色 */
    --success-ink: #166534;  /* 成功文字 */
    --warning-ink: #92400e;  /* 警告文字 */
    --warning-bg: #fef3c7;   /* 警告底色 */
    --info: #1677ff;         /* 链接 / 信息态 */

    /* ---------- L1 · 圆角 ---------- */
    --radius-xs: 4px;        /* 滚动条滑块、微标签 */
    --radius-sm: 6px;        /* logo 图标、小按钮、关闭键 */
    --radius-md: 8px;        /* 输入框、下拉、表格容器 */
    --radius-lg: 12px;       /* 卡片主流 */
    --radius-xl: 16px;       /* 大模块容器 */
    --radius-pill: 40px;     /* 按钮 / 胶囊，全站最高频（D5：取 40px，非 999px） */
    --radius-circle: 50%;    /* 头像、圆形图标 */

    /* ---------- L1 · 间距（名即值，机械映射零歧义） ---------- */
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;          /* 非 4 倍数档，D3 决议：建档保留 */
    --space-8: 8px;          /* 最高频 */
    --space-10: 10px;        /* 非 4 倍数档，D3 决议：建档保留 */
    --space-12: 12px;
    --space-14: 14px;        /* 非 4 倍数档，D3 决议：建档保留 */
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;

    /* ---------- L1 · 字号（rem 制；html{font-size:.875rem} → 1rem = 14px） ---------- */
    --fs-100: 0.7rem;        /*  9.8px 角标、极小注释 */
    --fs-200: 0.75rem;       /* 10.5px 表格辅助文字 */
    --fs-300: 0.8rem;        /* 11.2px 状态标签 */
    --fs-400: 0.85rem;       /* 11.9px 标签、按钮文字（最高频） */
    --fs-500: 0.9rem;        /* 12.6px 次级正文 */
    --fs-600: 0.95rem;       /* 13.3px 正文 */
    --fs-700: 1rem;          /* 14.0px 基准正文 */
    --fs-750: 1.05rem;       /* 14.7px 强调正文 */
    --fs-800: 1.1rem;        /* 15.4px 小标题 */
    --fs-900: 1.2rem;        /* 16.8px 模块标题 */
    --fs-1000: 1.5rem;       /* 21.0px 页面标题 */
    --fs-1100: 2rem;         /* 28.0px 展示级大标题 */

    /* ---------- L1 · 阴影 / 效果 ---------- */
    --shadow-soft: 0 1px 0 #0a0a0a0a, 0 12px 32px #0a0a0a0f;
    --shadow-hover: 0 1px 0 #0a0a0a0a, 0 16px 40px #0a0a0a14;
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);    /* 弹窗容器 */
    --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.25); /* 浮层 / 抽屉 */
    --focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.08);       /* 聚焦环（.06/.08 归一取 .08） */

    /* ---------- L1 · 字体 ---------- */
    --font-sans: "Geist Variable", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", "Fira Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* ---------- L1 · 布局 ---------- */
    --nav-height: 72px;              /* 公开页导航高 */
    --dash-nav-height: 64px;         /* ⚠️ dashboard 导航高，与 --nav-height 值不同且必须并存 */
    --dash-sidebar-width: 240px;     /* dashboard 侧栏宽 */
    --container-max: 1280px;         /* footer / 内容页最大宽 */
    --container-narrow: 480px;       /* 表单 / 窄容器 */

    /* ================================================================ */
    /* L2 · 语义别名（收敛旋钮 + 新代码规范）                          */
    /* ⚠️ 阶段一「只定义、不使用」：做无损替换时一律用 L1。            */
    /*    现网卡片内边距实为 12/14/16/20/24px 五种，统一到              */
    /*    --card-padding 属阶段二收敛，会引入视觉位移。                */
    /* ================================================================ */

    /* 圆角语义 */
    --radius-card: var(--radius-lg);      /* 12px 卡片 */
    --radius-panel: var(--radius-xl);     /* 16px 大模块容器 */
    --radius-btn: var(--radius-pill);     /* 40px 按钮 */
    --radius-input: var(--radius-md);     /*  8px 表单控件 */
    --radius-avatar: var(--radius-circle);/*  50% 头像 */

    /* 间距语义 */
    --gap-inline: var(--space-8);         /* 图标 + 文字行内间距 */
    --gap-card: var(--space-16);          /* 卡片栅格间距 */
    --card-padding: var(--space-16);      /* 卡片内边距（新代码基准） */
    --panel-padding: var(--space-24);     /* 大容器内边距 */
    --space-section: var(--space-32);     /* 区块纵向间距 */

    /* 字号语义 */
    --fs-caption: var(--fs-300);          /* 0.80rem 注释 */
    --fs-label: var(--fs-400);            /* 0.85rem 标签（全站最高频） */
    --fs-body: var(--fs-600);             /* 0.95rem 正文 */
    --fs-title: var(--fs-900);            /* 1.20rem 模块标题 */
    --fs-display: var(--fs-1100);         /* 2.00rem 大标题 */

    /* 控件尺寸（实测主流 32px(4) > 40px(2)） */
    --avatar-size: 32px;
    --avatar-size-lg: 40px;
    --icon-size: 20px;

    /* 动效（阶段二备用，阶段一不替换 transition 时长） */
    --t-fast: .2s;
    --t-base: .3s;
}

/* ===== 重置样式 ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 0.875rem; /* 根字号基准：1rem = 14px，勿令牌化（--fs-* 依赖此基准） */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--ink);
    min-height: 100vh;
    background-image: radial-gradient(circle at .25rem .25rem, rgba(17, 24, 39, 0.06) 1px, transparent 0),
                      radial-gradient(circle at .75rem .75rem, rgba(17, 24, 39, 0.04) 1px, transparent 0);
    background-size: 1rem 1rem;
    line-height: 1.5;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

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

/* ===== 导航栏 ===== */
.navbar-wrapper {
    height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(245, 245, 245, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0 var(--space-24);
    flex-shrink: 0;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.navbar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px; /* 孤例宽度，无对应令牌，保留字面量 */
    margin: 0 auto;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    font-weight: 700;
    font-size: var(--fs-1000);
    letter-spacing: -0.5px;
    color: #1a1a1a; /* ≠ --ink(#0a0a0a)，替换会改色，保留 */
    flex-shrink: 0;
    cursor: pointer;
}

.nav-left .logo-img {
    height: 32px;
    width: 32px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.nav-left span {
    color: var(--brand);
}

.nav-center {
    display: flex;
    align-items: center;
    gap: var(--space-32);
    flex: 1;
    justify-content: center;
    flex-wrap: nowrap; /* 桌面菜单整体不折行，窄屏已由≤768px汉堡兜底 */
}

.nav-center a {
    color: var(--muted);
    font-size: 1.125rem; /* 低频字号，无对应令牌，保留字面量 */
    font-weight: 400;
    transition: color 0.2s;
    white-space: nowrap; /* 单个菜单项文字不折行（如「招生赚佣金」） */
    flex-shrink: 0; /* 防止被压缩导致文字溢出裁切 */
}

.nav-center a:hover {
    color: var(--ink);
}

.nav-center a.active {
    color: var(--ink);
    font-weight: 600;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    flex-shrink: 0;
}

.btn-signup {
    background: transparent;
    color: #1a1a1a; /* ≠ --ink，保留 */
    padding: var(--space-8) var(--space-20);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-800);
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.btn-signup:hover {
    color: #000; /* ≠ --ink，保留 */
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.3);
}

.btn-login {
    background: #000; /* ≠ --ink，保留 */
    color: var(--paper);
    padding: var(--space-8) var(--space-20);
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: var(--fs-800);
    border: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.btn-login:hover {
    color: var(--paper);
    background: #272727;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.hamburger {
    display: none;
    background: transparent;
    border: none;
    font-size: 1.8rem; /* 低频字号，保留字面量 */
    color: #1a1a1a;
    cursor: pointer;
    padding: var(--space-4);
}

/* ===== 移动端侧边栏 ===== */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100%;
    width: 100%;
    background: var(--paper);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: right 0.3s ease;
    padding: var(--space-24) var(--space-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

.mobile-sidebar.open {
    right: 0;
}

.mobile-sidebar .close-sidebar {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: 1.8rem; /* 低频字号，保留字面量 */
    color: var(--muted);
    cursor: pointer;
}

.mobile-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    font-size: var(--fs-1000);
    font-weight: 700;
    color: #1a1a1a;
    cursor: pointer;
}

.mobile-sidebar .sidebar-brand img {
    height: 32px;
    width: 32px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.mobile-sidebar .sidebar-brand span {
    color: var(--brand);
}

.mobile-sidebar a {
    font-size: var(--fs-800);
    color: #1a1a1a;
    font-weight: 400;
    padding: var(--space-8) 0;
    border-bottom: 1px solid #f0f0f0; /* ≠ --border，保留 */
}

.mobile-sidebar .mobile-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin-top: var(--space-12);
}

.mobile-sidebar .mobile-actions .btn-signup,
.mobile-sidebar .mobile-actions .btn-login {
    width: 100%;
    text-align: center;
}

/* ===== Footer ===== */
.site-footer {
    width: 100%;
    padding: var(--space-40) var(--space-24) var(--space-20) var(--space-24);
    border-top: 1px solid var(--border);
    background: var(--paper);
    flex-shrink: 0;
}

.footer-content {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-40);
    padding-bottom: 80px; /* 无对应令牌档，保留字面量 */
    border-bottom: 1px solid var(--border);
    max-width: var(--container-max);
    margin: 0 auto;
}

.footer-brand {
    flex: 1 1 33%;
    min-width: 200px;
}

.footer-brand h2 {
    font-size: var(--fs-1000);
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.footer-brand h2 .logo-img {
    height: 32px;
    width: 32px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.footer-brand h2 span {
    color: var(--brand);
}

.footer-brand p {
    color: var(--muted);
    font-size: var(--fs-700);
    line-height: 1.6;
}

.footer-links {
    flex: 2 1 66%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-32);
}

.footer-links .link-group {
    flex: 1 1 100px;
}

.footer-links h4 {
    font-size: var(--fs-700);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-12);
}

.footer-links a {
    display: block;
    color: var(--muted);
    font-size: var(--fs-600);
    margin-bottom: var(--space-8);
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--ink);
}

.footer-bottom {
    text-align: left;
    padding-top: var(--space-16);
    color: var(--muted);
    font-size: var(--fs-600);
    max-width: var(--container-max);
    margin: 0 auto;
}

/* ================================================================ */
/* ===== 响应式 ===== */
/* ⚠️ @media 条件中的 768px / 769px 为字面量：CSS 规范禁止在媒体查询 */
/*    条件里使用 var()，无构建链下技术上不可参数化。规则体内照常令牌化。 */
/* ================================================================ */

@media (max-width: 768px) {
    body {
        font-size: var(--fs-700);
    }
    p, a, li, .btn, .region-item, .project-item, .why-card p, .testimonial-bubble p {
        font-size: var(--fs-700);
    }
    h2 {
        font-size: 1.4rem; /* 低频字号，保留字面量 */
    }
    h3 {
        font-size: var(--fs-900);
    }
    h4 {
        font-size: var(--fs-800);
    }

    .nav-center,
    .nav-right .btn-signup,
    .nav-right .btn-login {
        display: none;
    }
    .hamburger {
        display: block;
    }
    .nav-right {
        gap: var(--space-8);
    }

    .navbar-wrapper {
        padding: 0 var(--space-16);
    }

    .navbar {
        max-width: none; /* 移动端导航栏铺满，消除桌面限宽居中的视觉差异 */
        margin: 0;
    }

    .btn-signup,
    .btn-login {
        font-size: var(--fs-700);
    }

    .footer-content {
        flex-wrap: wrap;
        gap: var(--space-24);
    }
    .footer-links {
        gap: var(--space-20);
    }
    .footer-links .link-group {
        flex: 1 1 40%;
    }
    .footer-brand h2 {
        font-size: 1.3rem; /* 低频字号，保留字面量 */
    }
    .footer-brand p {
        font-size: var(--fs-600);
    }
    .footer-links h4 {
        font-size: var(--fs-700);
    }
    .footer-links a {
        font-size: var(--fs-500);
    }
    .footer-bottom {
        font-size: var(--fs-400);
        text-align: left;
    }

    .mobile-sidebar {
        width: 100%;
        right: -100%;
    }
}

@media (min-width: 769px) {
    .hamburger {
        display: none;
    }
}

/* ===== 工具类 ===== */
.text-sm {
    font-size: 0.875rem; /* = 根字号，非 --fs-* 档，保留字面量 */
}
.text-muted {
    color: var(--muted);
}

/* ================================================================ */
/* ===== L3 · 公共组件类（中央化打底） ===== */
/* ----------------------------------------------------------------
   阶段一原则：**零视觉影响**。
   本节所有规则的属性集均为「现网既有定义的安全子集」：

   · .dashboard-main / .module-header / .toast-container / .toast-item
     仅出现在 dashboard 生态（dashboard.php + pages/*.php），这些页面
     都会加载 finance.css。finance.css 在 common.css **之后** 载入，
     且同特异度下后者胜出 → 此处声明必被 finance.css 完全覆盖，
     属「基线登记」，不产生任何渲染差异。

   · .empty-state 跨 dashboard 与公开页两个生态，两侧现网定义 **不一致**
     （finance.css 版带 background/border/border-radius/padding，
       index.php / announce-policy.php / business-docs.php 版不带）。
     故此处仅登记「所有现网定义都会重新声明」的交集属性，
     绝不引入任何一方未声明的属性，避免公开页凭空长出边框与底色。

   阶段二（P2）再做真正的收敛：补全属性 + 逐页删除重复定义。
   ---------------------------------------------------------------- */

/* ---------- Dashboard 主内容区（基线；finance.css 以 !important 覆盖） ---------- */
.dashboard-main {
    padding: var(--space-24) var(--space-32);
}

/* ---------- 模块头部（基线；finance.css 完整覆盖同名属性） ---------- */
.module-header {
    margin-bottom: var(--space-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.module-header .header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-12);
}

.module-header .header-top .title-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.module-header .header-top .actions {
    display: flex;
    gap: var(--space-10);
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ---------- Toast 全局提示（基线；finance.css 完整覆盖同名属性） ---------- */
.toast-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    pointer-events: none;
    max-width: 90%;
}

.toast-item {
    background: #1a1a1a; /* ≠ --ink，保留原值 */
    color: var(--paper);
    padding: var(--space-12) 28px; /* 28px 无对应令牌档，保留字面量 */
    border-radius: var(--radius-lg);
    font-size: var(--fs-700);
    font-weight: 500;
    box-shadow: var(--shadow-modal);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--space-10);
    white-space: nowrap;
}

.toast-item.success i {
    color: #52c41a; /* ≠ --success(#22c55e)，保留原值 */
}

.toast-item.error i {
    color: var(--danger);
}

.toast-item.info i {
    color: var(--info);
}

/* ---------- 空状态（跨生态基线，⚠️ 见下方说明） ----------
   现网 .empty-state 存在 **两套互不兼容的实现**：
     A. flex 居中式（finance.css / index.php / announce-policy.php /
        business-docs.php / pages/{students,projects,my-projects,
        commission,orders}.php）
     B. text-align 块式（assets/css/admin.css）
   两者属性集的交集只有 color 一项。若在此处补齐 A 版的
   background / border / border-radius / padding，公开页与 admin 端
   会凭空长出白底虚线框；若补 display:flex 系列，admin 端空状态布局会变形。
   → 阶段一（视觉零变化）**只登记 color**；
     真正的组件收敛（统一为 A 版 + 逐页删除重复定义）列入 P2，需视觉签字。 */
.empty-state {
    color: var(--muted);
}