/* ============================================================
   DeepReview 服务器页面 — 统一样式系统
   所有订阅/支付/信息页面的设计令牌集中管理于此。
   修改颜色/字号/圆角只需改一处，各页面自动跟随。
   ============================================================ */

:root {
  /* ── 页面底色层次 ── */
  --dr-bg-page:  #0f172a;          /* 页面底色（最深） */
  --dr-bg-card:  #1e293b;          /* 卡片/面板底色 */
  --dr-bg-input: #0f172a;          /* 输入框底色（与页面同色） */
  --dr-bg-elevated: #334155;       /* 悬浮/选中态底色 */

  /* ── 边框层次 ── */
  --dr-border:        #334155;     /* 默认边框 */
  --dr-border-hover:  #475569;     /* 悬停边框 */
  --dr-border-focus:  #3b82f6;     /* 焦点边框（与主色同） */

  /* ── 主色 —— 按钮 / 链接 / 高亮统一 —— */
  --dr-accent:        #3b82f6;     /* 主色（蓝） */
  --dr-accent-hover:  #2563eb;     /* 主色悬停 */
  --dr-accent-shadow: rgba(59, 130, 246, 0.3);  /* 主色阴影 */

  /* ── 辅助色 —— 档位 / 状态 —— */
  --dr-basic:       #5b9cf5;       /* 基础版蓝 */
  --dr-basic-bg:    #1c2e48;
  --dr-pro:         #9578e6;       /* 专业版紫 */
  --dr-pro-bg:      #201c3a;
  --dr-team:        #e8b422;       /* 团队版金 */
  --dr-team-bg:     #3d2a00;

  --dr-success:     #7acc7a;       /* 成功绿 */
  --dr-warning:     #e0c840;       /* 警告黄 */
  --dr-error:       #f48771;       /* 错误红 */
  --dr-info:        #7ab8d4;       /* 信息蓝 */

  /* ── 文字色层次 ── */
  --dr-fg-strong:    #f8fafc;      /* 最强强调（卡片标题/主标题） */
  --dr-fg-heading:   #e2e8f0;      /* 标题/区块头 */
  --dr-fg-body:      #cbd5e1;      /* 正文 */
  --dr-fg-secondary: #94a3b8;      /* 辅助描述文字 */
  --dr-fg-muted:     #64748b;      /* 最弱提示/占位 */

  /* ── 圆角 —— 统一尺度 ── */
  --dr-radius-card:  12px;         /* 卡片/面板 */
  --dr-radius-btn:   10px;         /* 按钮 */
  --dr-radius-input:  6px;         /* 表单控件 */
  --dr-radius-sm:     4px;         /* 标签/徽标 */

  /* ── 字体 —— 统一字号层级 ── */
  --dr-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --dr-font-cjk: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --dr-fs-xl:     32px;            /* 超大标题 */
  --dr-fs-lg:     24px;            /* 大标题 */
  --dr-fs-md:     18px;            /* 中标题 */
  --dr-fs-base:   16px;            /* 正文基准 */
  --dr-fs-page:   15px;            /* 页面正文 */
  --dr-fs-caption: 14px;           /* 辅助说明 */
  --dr-fs-small:  13px;            /* 脚注/标签 */

  /* ── 顶部导航统一高度（登录/游客切换时布局稳定） ── */
  --dr-navbar-h: 50px;

  /* ── 间距 —— 统一节奏 ── */
  --dr-space-xs:   4px;
  --dr-space-sm:   8px;
  --dr-space-md:  12px;
  --dr-space-lg:  16px;
  --dr-space-xl:  20px;
  --dr-space-2xl: 24px;
  --dr-space-3xl: 32px;
}

/* ═══════════════════════════════════════════════════════════
   全局重置
   ═══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════
   基础排版
   ═══════════════════════════════════════════════════════════ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--dr-font);
  background: var(--dr-bg-page);
  color: var(--dr-fg-body);
  line-height: 1.6;
}

.main-grow { flex: 1; }

/* ═══════════════════════════════════════════════════════════
   共享卡片基底
   各页面可通过额外 class 扩展（如 .card.selected）
   ═══════════════════════════════════════════════════════════ */
.card {
  background: var(--dr-bg-card);
  border: 1px solid var(--dr-border);
  border-radius: var(--dr-radius-card);
}

/* ═══════════════════════════════════════════════════════════
   共享按钮基底
   页面按需加 .btn-primary / .btn-outline / .btn-danger
   ═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-block;
  font-weight: 600;
  border: none;
  border-radius: var(--dr-radius-btn);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}
.btn-primary {
  background: var(--dr-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--dr-accent-hover); }

.btn-outline {
  background: var(--dr-bg-card);
  color: var(--dr-accent);
  border: 2px solid var(--dr-accent);
}
.btn-outline:hover { background: var(--dr-border); }

/* ═══════════════════════════════════════════════════════════
   共享表单控件基底
   ═══════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select {
  font-size: var(--dr-fs-page);
  background: var(--dr-bg-input);
  color: var(--dr-fg-body);
  border: 1px solid var(--dr-border);
  border-radius: var(--dr-radius-input);
  padding: 10px 12px;
}
input:focus,
select:focus {
  outline: none;
  border-color: var(--dr-border-focus);
}

/* ═══════════════════════════════════════════════════════════
   响应式宽度容器
   ═══════════════════════════════════════════════════════════ */
.wide-container {
  width: 100%;
  max-width: 90rem;          /* 1440px */
  margin: 0 auto;
  padding: 0 max(24px, 3vw);  /* 小屏 24px，大屏按比例 */
}

.narrow-container {
  width: 100%;
  max-width: 40rem;           /* 640px */
  margin: 0 auto;
  padding: 0 20px;
}

/* ═══════════════════════════════════════════════════════════
   卡片增强 — 略微提升背景对比度
   ═══════════════════════════════════════════════════════════ */
.card-raised {
  background: #243049;         /* 比默认 card 亮半级 */
  border: 1px solid var(--dr-border);
  border-radius: var(--dr-radius-card);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   统一页脚 — 所有页面共用
   ═══════════════════════════════════════════════════════════ */
.site-footer {
  text-align: center;
  padding: 28px max(24px, 5vw);
  font-size: var(--dr-fs-small);
  color: var(--dr-fg-secondary);
  line-height: 1.8;
  border-top: 1px solid var(--dr-border);
}
.site-footer a,
.site-footer a:visited,
.site-footer a:link {
  color: inherit;
  text-decoration: none;
  margin: 0 8px;
  transition: color .2s;
  white-space: nowrap;
}
.site-footer a:hover {
  color: var(--dr-fg-secondary);
}
.site-footer .footer-copyright {
  display: block;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   统一顶部导航 — 公开页面（首页/登录/注册等）
   ═══════════════════════════════════════════════════════════ */
.top-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px max(24px, 5vw);
  border-bottom: 1px solid var(--dr-border);
  position: sticky; top: 0; z-index: 100;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: var(--dr-navbar-h);
}
.top-nav .nav-brand {
  font-size: var(--dr-fs-base); font-weight: 700; color: var(--dr-fg-heading);
  text-decoration: none; letter-spacing: -.3px;
}
.top-nav .nav-links { display: flex; align-items: center; gap: 16px; }
.top-nav .nav-links a {
  font-size: var(--dr-fs-page); color: var(--dr-fg-secondary); text-decoration: none;
  transition: color .2s;
}
.top-nav .nav-links a:hover { color: var(--dr-fg-heading); }
.top-nav .nav-links .nav-btn {
  padding: 6px 16px; border-radius: var(--dr-radius-btn);
  background: var(--dr-accent); color: #fff; font-weight: 600;
}
.top-nav .nav-links .nav-btn:hover { background: var(--dr-accent-hover); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   统一登录栏 — 登录页面（订阅/个人中心/结账等）
   ═══════════════════════════════════════════════════════════ */
.login-bar {
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  padding: 6px max(24px, 4vw); font-size: var(--dr-fs-page); color: var(--dr-fg-secondary);
  border-bottom: 1px solid var(--dr-border); margin-bottom: clamp(20px, 3vh, 32px); background: var(--dr-bg-card);
  position: sticky; top: 0; z-index: 100;
  min-height: var(--dr-navbar-h);
}
.login-bar .user-email { color: var(--dr-fg-heading); font-weight: 500; text-decoration: none; }
.login-bar .user-email:hover { text-decoration: underline; }
.login-bar .nav-link { color: var(--dr-fg-secondary); font-size: var(--dr-fs-page); text-decoration: none; margin-right: 8px; }
.login-bar .nav-link:hover { color: var(--dr-fg-heading); text-decoration: underline; }
.login-bar .btn-sm {
  padding: 4px 12px; font-size: 13px; border-radius: var(--dr-radius-sm);
  background: none; border: 1px solid var(--dr-border); color: var(--dr-fg-secondary); cursor: pointer;
}
.login-bar .btn-sm:hover { border-color: var(--dr-border-hover); color: var(--dr-fg-heading); }