/* ============================================================
   夏冰服务中心 · 设计令牌（Design Tokens）v1.0
   风格：智谱 BigModel 官网实景风（2026-09-24 选定）
   参照原型：design-preview/8-bigmodel.html
   用法：门户（WP 主题）与用户中心（Vue3）共用此变量与基础组件
   ============================================================ */

:root {
  /* ---- 色彩 ---- */
  --blue:        #134cff;  /* 主强调色（按钮、链接、选中态） */
  --blue-dark:   #0746ff;  /* 主色 hover */
  --ink:         #0a0a0a;  /* 主文字/黑胶囊按钮/页脚 */
  --ink-2:       #5e5e66;  /* 次级文字 */
  --ink-3:       #909399;  /* 弱化文字/占位符 */
  --line:        #ededf0;  /* 分割线/卡片细边 */
  --bg:          #ffffff;  /* 页面底色（永远纯白） */
  --bg-soft:     #fbfbfc;  /* 表头等极浅底 */
  --card:        #ffffff;
  --success:     #0e9f6e;  /* 状态点绿 */

  /* 功能渐变（仅高亮卡用，克制） */
  --grad-hot:    linear-gradient(135deg, #0dc8c8 0%, #3b82f6 100%);
  /* pastel 家族卡（浅蓝紫，大面积功能入口可用） */
  --pastel-1:    linear-gradient(135deg, #eaf1ff 0%, #f5f0ff 100%);
  --pastel-2:    linear-gradient(135deg, #e8f9ff 0%, #eef4ff 100%);

  /* ---- 圆角 ---- */
  --radius-card: 12px;
  --radius-btn:  99px;     /* 胶囊按钮（本风格的标志） */
  --radius-input:99px;

  /* ---- 阴影（轻） ---- */
  --shadow-box:   0 6px 24px rgba(19, 76, 255, .07);   /* 胶囊输入框 */
  --shadow-hover: 0 12px 32px rgba(10, 10, 10, .08);   /* 卡片悬浮 */

  /* ---- 字体与排版 ---- */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --fs-hero: 38px;   /* Hero 大标题 800 重 */
  --fs-sec:  26px;   /* 区块标题 800 重 */
  --fs-body: 15px;
  --fs-sub:  13.5px;
  --fs-cap:  12.5px; /* 辅助说明文字 */

  /* ---- 布局 ---- */
  --wrap: 1120px;    /* 内容最大宽度 */
  --nav-h: 56px;
}

/* ================= 基础组件 ================= */

body { font-family: var(--font); background: var(--bg); color: var(--ink);
       font-size: var(--fs-body); line-height: 1.65; margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* 按钮：胶囊为标志形态 */
.btn { border: none; cursor: pointer; font-weight: 600; border-radius: var(--radius-btn);
       font-size: var(--fs-sub); transition: all .2s; padding: 8px 20px; }
.btn-black { background: var(--ink); color: #fff; }
.btn-black:hover { background: #2a2a2a; }
.btn-blue  { background: var(--blue); color: #fff; padding: 11px 30px; font-size: 14px; }
.btn-blue:hover { background: var(--blue-dark); }
.btn-plain { background: none; color: var(--ink-2); padding: 8px 12px; }
.btn-plain:hover { color: var(--ink); }

/* 胶囊输入组合（Hero 标志控件） */
.pillbox { display: flex; align-items: center; background: #fff;
           border: 1px solid #eef0f4; border-radius: var(--radius-input);
           padding: 7px 7px 7px 26px; box-shadow: var(--shadow-box); }
.pillbox input { flex: 1; border: none; outline: none; height: 42px;
                 font-size: 14.5px; background: transparent; color: var(--ink); }
.pillbox input::placeholder { color: #b6bcc7; }
.pillbox .send { width: 46px; height: 42px; border-radius: 99px; background: var(--ink);
                 color: #fff; display: flex; align-items: center; justify-content: center;
                 font-size: 17px; border: none; cursor: pointer; }

/* 普通表单输入（非 Hero 场景用方角小圆角） */
.input { height: 42px; border: 1px solid #e3e6ea; border-radius: 10px;
         padding: 0 14px; font-size: 14px; outline: none; background: #fff; width: 100%; }
.input:focus { border-color: var(--blue); }

/* 卡片 */
.card { background: var(--card); border: 1px solid var(--line);
        border-radius: var(--radius-card); padding: 24px; transition: all .25s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.card-hot { background: var(--grad-hot); border: none; color: #fff; }
.pastel-1 { background: var(--pastel-1); border: 1px solid transparent; border-radius: var(--radius-card); padding: 26px; }
.pastel-2 { background: var(--pastel-2); border: 1px solid transparent; border-radius: var(--radius-card); padding: 26px; }

/* 状态点标签 */
.tag { display: inline-flex; align-items: center; gap: 5px;
       font-size: 12.5px; font-weight: 600; color: var(--success); }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* 表格（极简白卡式） */
.table-card { border: 1px solid var(--line); border-radius: var(--radius-card);
              overflow: hidden; background: #fff; }
.table-card table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-card th { text-align: left; color: var(--ink-3); font-weight: 500;
                 padding: 12px 24px; background: var(--bg-soft);
                 border-bottom: 1px solid var(--line); font-size: 12.5px; }
.table-card td { padding: 14px 24px; border-bottom: 1px solid #f7f8fa; }
.table-card tr:last-child td { border-bottom: none; }
.link { color: var(--blue); cursor: pointer; font-weight: 600; text-decoration: none; }

/* 顶部导航（白底细字 + 黑胶囊登录） */
.topbar { background: #fff; }
.topbar .bar { display: flex; align-items: center; height: var(--nav-h);
               gap: 26px; border-bottom: 1px solid var(--line); }
.topbar .logo { font-size: 15.5px; font-weight: 800; }
.topbar nav { display: flex; gap: 22px; font-size: var(--fs-sub); }
.topbar nav a { color: var(--ink-2); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); }

/* 页脚（黑色大视觉） */
.footer { background: var(--ink); color: #fff; padding: 72px 0 0; }
.footer a { color: #8d8e99; text-decoration: none; font-size: 12.5px; }
.footer a:hover { color: #fff; }