/* 组件库：按钮 / 卡片 / 表格 / 表单 / 侧边栏 / 徽章 / 图标盒（依赖 tokens.css） */

/* 布局：容器 / 区块 / 区块标题 / 眉标 */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.section-head h2 { font-size: var(--fs-2xl); font-weight: 800; color: var(--c-ink); letter-spacing: -.3px; margin: 0 0 12px; }
.section-head p { font-size: var(--fs-md); color: var(--c-muted); margin: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary-ink); background: var(--c-primary-weak); padding: 6px 14px; border-radius: var(--r-pill); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); }

/* 品牌标识：单色简洁 Logo */
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; color: var(--c-ink); letter-spacing: -.4px; }
.brand .mark { width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-strong) 100%); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 800; box-shadow: var(--sh-sm); }

/* 按钮：主按钮 / 描边 / 幽灵 / 危险 / 尺寸 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1; padding: 11px 20px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; transition: var(--transition); white-space: nowrap; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--c-primary); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,.25); }
.btn-primary:hover { background: var(--c-primary-strong); box-shadow: 0 6px 18px rgba(79,70,229,.30); }
.btn-outline { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); }
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-ghost { background: transparent; color: var(--c-muted); }
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { filter: brightness(.95); }
.btn-lg { font-size: var(--fs-md); padding: 14px 28px; border-radius: var(--r-md); }
.btn-sm { font-size: var(--fs-sm); padding: 8px 14px; }
.btn-block { width: 100%; }

/* 卡片：基础卡片与悬浮卡片 */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.card-pad { padding: 24px; }
.card-hover { transition: var(--transition); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--c-border-strong); }

/* 图标盒：多彩功能图标（借鉴旧版每类一色） */
.icon-box { width: 46px; height: 46px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-box svg { width: 24px; height: 24px; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ic-purple { background: var(--i-purple-bg); color: var(--i-purple); } .ic-purple svg { stroke: var(--i-purple); }
.ic-blue   { background: var(--i-blue-bg);   color: var(--i-blue); }   .ic-blue svg   { stroke: var(--i-blue); }
.ic-teal   { background: var(--i-teal-bg);   color: var(--i-teal); }   .ic-teal svg   { stroke: var(--i-teal); }
.ic-amber  { background: var(--i-amber-bg);  color: var(--i-amber); }  .ic-amber svg  { stroke: var(--i-amber); }
.ic-pink   { background: var(--i-pink-bg);   color: var(--i-pink); }   .ic-pink svg   { stroke: var(--i-pink); }
.ic-green  { background: var(--i-green-bg);  color: var(--i-green); }  .ic-green svg  { stroke: var(--i-green); }
.ic-cyan   { background: var(--i-cyan-bg);   color: var(--i-cyan); }   .ic-cyan svg   { stroke: var(--i-cyan); }
.ic-primary{ background: var(--c-primary-weak); color: var(--c-primary); } .ic-primary svg { stroke: var(--c-primary); }

/* 徽章：状态与分类标签 */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); line-height: 1.5; }
.badge-success { background: var(--c-success-weak); color: var(--c-success); }
.badge-warning { background: var(--c-warning-weak); color: var(--c-warning); }
.badge-danger  { background: var(--c-danger-weak);  color: var(--c-danger); }
.badge-info    { background: var(--c-info-weak);    color: var(--c-info); }
.badge-primary { background: var(--c-primary-weak); color: var(--c-primary-ink); }
.badge-neutral { background: var(--c-surface-3); color: var(--c-muted); }

/* 表单：输入框 / 标签 / 校验提示 */
.field { margin-bottom: 18px; }
.label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); margin-bottom: 7px; }
.input { width: 100%; font-family: inherit; font-size: var(--fs-base); color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); padding: 11px 14px; transition: var(--transition); outline: none; }
.input::placeholder { color: var(--c-faint); }
.input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(99,91,255,.15); }
.input-group { display: flex; gap: 10px; }
.input-group .input { flex: 1; }
.form-error { color: var(--c-danger); font-size: var(--fs-sm); margin-top: 6px; min-height: 18px; }

/* 表格：列表数据展示 */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th { text-align: left; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--c-faint); padding: 12px 14px; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.table td { padding: 14px; color: var(--c-text); border-bottom: 1px solid var(--c-surface-3); }
.table tbody tr:hover td { background: var(--c-surface-2); }
.table tbody tr:last-child td { border-bottom: none; }
.table .mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* 工具类与滚动条样式 */
.muted { color: var(--c-muted); }
.faint { color: var(--c-faint); }
.mono { font-family: var(--font-mono); }
.divider { height: 1px; background: var(--c-border); border: none; margin: 0; }
.grid { display: grid; gap: 20px; }
.flex { display: flex; }
.spread { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #CBD3E0; border-radius: 8px; border: 2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: #AEB8C9; }