/* ==========================================================================
   views.css — 视图共享布局辅助（Design_System 视图层）
   ==========================================================================
   仅消费 tokens.css 中登记的设计令牌（R6.1/R6.7），不出现硬编码原始值。
   依赖加载顺序：tokens.css → base.css → layout.css → components.css → views.css。

   本层提供跨视图复用的「页面级」结构骨架（页头、工具栏、卡片网格、分区间距、
   异步状态机容器等）。各具体 View / Workspace_View 的细节标记由后续任务
   （14–17）填充；此处先铺设精简、可组合的共享类，避免视图内联硬编码。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 视图页头：标题 + 描述 + 右侧操作区
   -------------------------------------------------------------------------- */
.view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.view-heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.view-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--fg-default);
}

.view-subtitle {
  font-size: var(--fs-md);
  color: var(--fg-subtle);
  line-height: var(--lh-snug);
}

/* 页头右侧动作组（按钮、筛选器等） */
.view-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   2. 视图工具栏（筛选、搜索、批量操作的横向容器）
   -------------------------------------------------------------------------- */
.view-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.view-toolbar-spacer {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   3. 视图主体与分区
   -------------------------------------------------------------------------- */
.view-body {
  display: block;
}

.view-section {
  margin-bottom: var(--sp-6);
}

.view-section:last-child {
  margin-bottom: 0;
}

.view-section-title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-default);
}

/* Section_Tab 内容面板（与组件层 .tabs/.tab 配套） */
.view-tabpanel {
  padding-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   4. 自适应卡片 / 指标网格
   -------------------------------------------------------------------------- */
.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.view-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--sp-4);
}

/* 指标卡：大数字 + 标签 */
.metric {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.metric-value {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--fg-default);
}

.metric-label {
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
}

/* --------------------------------------------------------------------------
   5. 主从 / 分栏布局（如列表 + 详情）
   -------------------------------------------------------------------------- */
.view-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .view-split {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   6. 异步状态机容器（loading / empty / error 的居中承载，R8.2）
   具体 .skeleton / .empty-state / .error-state 视觉见 components.css。
   -------------------------------------------------------------------------- */
.view-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

/* 加载骨架列表的统一间距 */
.view-loading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
}

/* --------------------------------------------------------------------------
   7. 响应式收敛：小屏下页头动作换行靠左
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .view-title {
    font-size: var(--fs-xl);
  }

  .view-actions {
    width: 100%;
  }
}

/* ==========================================================================
   8. 火山代抢视图（volc-sniper）专用样式
   ========================================================================== */

/* 工具栏：总览计数 + 流水线操作 */
.sniper-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background-color: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.sniper-counts { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.sniper-count { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--fg-muted); }
.sniper-count b { color: var(--fg-default); font-weight: var(--fw-semibold); }
.sniper-count small { color: var(--fg-subtle); font-size: var(--fs-xs); }
/* 可点击筛选的统计 chip */
.snipe-filter { cursor: pointer; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); border: 1px solid transparent; transition: background-color .12s, border-color .12s; }
.snipe-filter:hover { background-color: var(--bg-surface); }
.snipe-filter-active { background-color: var(--bg-accent-subtle, #e8f0fe); border-color: var(--accent-default, #3b82f6); color: var(--fg-default); }
.snipe-filter-active b { color: var(--accent-default, #3b82f6); }
.sniper-proxy-chip { cursor: pointer; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
.sniper-proxy-chip:hover { background-color: var(--bg-surface); }

/* 定时启动 chip + 设置行 */
.sniper-schedule-chip { cursor: default; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
.sniper-schedule-chip.active { border-color: var(--success-muted); background-color: var(--success-muted); }
.sniper-activity-chip { padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
.sniper-activity-chip.fallback { border-color: var(--warning-muted); background-color: var(--warning-muted); }
.sniper-probe-chip { padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); }
.sniper-probe-chip.sniping { border-color: var(--success-muted); background-color: var(--success-muted); }
.sniper-schedule-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; width: 100%; padding-top: var(--sp-2); margin-top: var(--sp-2); border-top: 1px dashed var(--border-subtle); }
.sniper-schedule-row label { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--fg-muted); }
.sniper-schedule-row input[type=time] { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: var(--fs-sm); background-color: var(--bg-base); color: var(--fg-default); }
.sniper-schedule-hint { font-size: var(--fs-xs); color: var(--fg-subtle); }

/* 代理池面板 */
.sniper-proxy-panel { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); background-color: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.sniper-proxy-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--fg-muted); }
.sniper-proxy-panel-header b { color: var(--fg-default); }
.sniper-proxy-table .cell-mono { font-size: var(--fs-xs); }
.sniper-count .dot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; }
.dot-draft    { background-color: var(--fg-subtle); }
.dot-active   { background-color: var(--info); }
.dot-sniping  { background-color: var(--success); box-shadow: 0 0 0 0 var(--success-muted); animation: sniper-pulse 1.5s infinite; }
.dot-acquired { background-color: var(--warning); }
.dot-done     { background-color: var(--success); }
.dot-cancelled { background-color: var(--fg-subtle); opacity: 0.5; }
.dot-error    { background-color: var(--danger); }
@keyframes sniper-pulse {
  0%   { box-shadow: 0 0 0 0 var(--success-muted); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.sniper-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sniper-action-divider { width: 1px; height: 24px; background-color: var(--border-subtle); margin: 0 var(--sp-1); }

/* 订单表格 */
.sniper-table-wrap { overflow-x: auto; }
.sniper-table { border-collapse: separate; border-spacing: 0; }
.sniper-table th, .sniper-table td { white-space: nowrap; }
.sniper-table .col-actions { width: 1%; text-align: right; }
/* 操作列 + 复选框列 sticky：左右滚动时钉住，避免要拖到最右才点得到按钮。
   需要不透明背景（否则滚动的单元格从底下透出来）。z-index 分层：thead 在体之上。 */
.sniper-table th.col-check, .sniper-table td.col-check { position: sticky; left: 0; z-index: 2; background-color: var(--bg-base); }
.sniper-table th.col-actions, .sniper-table td.col-actions { position: sticky; right: 0; z-index: 2; background-color: var(--bg-base); }
/* 选中行/警告行的 sticky 单元格要继承行背景，否则 sticky 列会出现透色。 */
.sniper-table tr.row-selected .col-check, .sniper-table tr.row-selected .col-actions { background-color: var(--info-muted, #e6f4ff); }
.sniper-table tr.row-warning .col-check, .sniper-table tr.row-warning .col-actions { background-color: var(--warning-muted); }
.sniper-table thead th { z-index: 3; background-color: var(--bg-raised, var(--bg-base)); }
.cell-primary { font-weight: var(--fw-medium); color: var(--fg-default); }
.cell-secondary { font-size: var(--fs-xs); color: var(--fg-muted); display: flex; align-items: center; gap: var(--sp-1); }
.cell-mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-muted); }
.cell-tag { display: inline-block; padding: 0 var(--sp-1); font-size: var(--fs-xs); border-radius: var(--radius-sm); background-color: var(--bg-raised); border: 1px solid var(--border-subtle); }
.cell-tag.tag-warn { color: var(--warning); border-color: var(--warning-muted); background-color: var(--warning-muted); }
.cell-warning { font-size: var(--fs-xs); color: var(--warning); margin-top: var(--sp-1); }
.sniper-table tr.row-warning { background-color: var(--warning-muted); }
.table-sm th, .table-sm td { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }

/* 抢购中徽章脉冲 */
.badge-pulse { animation: sniper-pulse 1.5s infinite; }

/* 补充按钮变体（components.css 已有 .btn / .btn-danger）*/
.btn-success { color: var(--accent-fg); background-color: var(--success); border-color: var(--success); }
.btn-success:hover { filter: brightness(1.08); }
.btn-success:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-link { padding: 0 var(--sp-1); min-height: 0; background: none; border: none; color: var(--accent); cursor: pointer; font-size: var(--fs-sm); }
.btn-link:hover { text-decoration: underline; }
.btn-link.btn-danger { color: var(--danger); background: none; border: none; }
.btn-link.btn-success { color: var(--success); background: none; border: none; }
.btn-xs { font-size: var(--fs-xs); padding: 0 var(--sp-1); min-height: var(--sp-5); }

/* 模态框（通用）*/
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-6) var(--sp-4); overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: 100%; max-width: 640px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.sniper-modal { max-width: 720px; }
.sniper-modal-wide { max-width: 920px; }
/* 批量付款 / 完成核对 等新增元素的轻样式 */
.sniper-table .col-check { width: 28px; text-align: center; }
.sniper-table tr.row-selected { background-color: var(--info-muted, #e6f4ff); }
.sniper-count-pill { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--warning-strong, #d97706); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
/* 产品切换器（Coding Plan / Agent Plan tab），复用一套订单 UI 按 product 过滤 */
.product-switcher { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-muted, #f1f5f9); border-radius: var(--radius-md); }
.product-tab { border: 1px solid transparent; background: transparent; color: var(--fg-muted); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.product-tab:hover { color: var(--fg-default); }
.product-tab-active { background: var(--bg-default, #fff); color: var(--accent-default, #3b82f6); border-color: var(--border-subtle, #e2e8f0); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
/* Agent Plan 实时库存面板 */
.agentplan-stock-panel { margin: var(--sp-3) 0; padding: var(--sp-3); background: var(--bg-muted, #f8fafc); border: 1px solid var(--border-subtle, #e2e8f0); border-radius: var(--radius-md); }
.agentplan-stock-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); }
.agentplan-stock-head h4 { margin: 0; font-size: var(--fs-base); }
.agentplan-stock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.stock-card { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--border-subtle, #e2e8f0); background: var(--bg-default, #fff); text-align: center; }
.stock-card-name { font-weight: var(--fw-semibold); color: var(--fg-default); }
.stock-card-status { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 6px 0 2px; }
.stock-card-avail { font-size: var(--fs-sm); color: var(--fg-muted); }
.stock-card-err { font-size: var(--fs-xs); color: var(--fg-subtle); }
.stock-card-fuel { font-size: var(--fs-xs); color: var(--fg-muted); margin-top: 6px; }
.stock-card-price { font-size: var(--fs-sm); color: var(--accent-default, #3b82f6); font-weight: var(--fw-medium); }
.stock-card-price { font-size: var(--fs-sm); color: var(--accent-default, #3b82f6); font-weight: var(--fw-medium); }
/* 探测结果色:acquired(有货,真抢了)=红(醒目待处理) / out_of_stock=灰 / err=橙 */
.probe-acquired { border-color: var(--danger-default, #ef4444); background: var(--danger-muted, rgba(239,68,68,0.08)); }
.probe-acquired .stock-card-status { color: var(--danger-strong, #dc2626); }
.probe-out { border-color: var(--border-subtle, #e2e8f0); background: var(--bg-muted, #f8fafc); }
.probe-out .stock-card-status { color: var(--fg-subtle, #94a3b8); }
.probe-err { border-color: var(--warning-default, #f59e0b); background: var(--warning-muted, rgba(245,158,11,0.08)); }
.probe-err .stock-card-status { color: var(--warning-strong, #d97706); }
.probe-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.cell-warning { color: var(--warning-strong, #d97706); font-size: var(--fs-sm); }
@media (max-width: 720px) { .agentplan-stock-grid { grid-template-columns: repeat(2, 1fr); } }
.completion-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.completion-batch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); padding: var(--sp-2); background: var(--warning-muted, rgba(210,153,34,0.15)); border-radius: var(--radius-sm); }
.completion-compare { margin-bottom: var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); }
.completion-compare > summary { cursor: pointer; padding: var(--sp-1) 0; }
.completion-h { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-sm); }
.completion-h-ok { color: var(--success-strong, #16a34a); }
.completion-h-warn { color: var(--warning-strong, #d97706); }
.completion-h-mute { color: var(--fg-muted); }
.sniper-batch-results { margin-top: var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--sp-3); background: var(--bg-subtle); }
.sniper-batch-results-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.modal-header h2 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.modal-close { background: none; border: none; font-size: 24px; line-height: 1; color: var(--fg-muted); cursor: pointer; padding: 0 var(--sp-1); }
.modal-close:hover { color: var(--fg-default); }
.modal-body { padding: var(--sp-4); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4); border-top: 1px solid var(--border-subtle); }

/* 表单网格 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-field { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); }
.form-field > span { color: var(--fg-muted); font-weight: var(--fw-medium); }
.form-field input, .form-field select { padding: var(--sp-2) var(--sp-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: var(--fs-sm); background-color: var(--bg-base); color: var(--fg-default); }
.form-field input:disabled { background-color: var(--bg-raised); color: var(--fg-muted); cursor: not-allowed; }
.form-field small { font-size: var(--fs-xs); color: var(--fg-subtle); }
.form-field-wide { grid-column: 1 / -1; }
.form-proxy { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--sp-2); }
.form-proxy legend { font-size: var(--fs-sm); color: var(--fg-muted); padding: 0 var(--sp-1); }
.form-proxy { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.form-proxy label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--fg-muted); }
.form-proxy input, .form-proxy select { padding: var(--sp-1); font-size: var(--fs-xs); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background-color: var(--bg-base); }
.form-hint { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0 0 var(--sp-3); }

/* 导入预览 */
.import-summary { padding: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--fg-default); }
.import-summary .warn { color: var(--warning); }
.import-error { color: var(--danger); font-size: var(--fs-sm); margin-top: var(--sp-2); }

@media (max-width: 767px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-proxy { grid-template-columns: 1fr 1fr; }
}

/* ── 抢购日志小窗口（右下角浮动）── */
.guard-log-fab { position: fixed; right: 16px; bottom: 16px; width: 420px; max-width: calc(100vw - 32px); background: var(--bg-surface, #fff); border: 1px solid var(--border-default, #ddd); border-radius: var(--radius-md, 8px); box-shadow: 0 4px 16px rgba(0,0,0,.12); z-index: 100; font-size: var(--fs-xs, 12px); }
.guard-log-header { display: flex; align-items: center; gap: var(--sp-2, 6px); padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border-subtle, #eee); font-weight: var(--fw-semibold, 600); user-select: none; }
.guard-log-header:hover { background: var(--bg-subtle, #f6f8fa); border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0; }
.guard-log-toggle { margin-left: auto; color: var(--fg-muted, #666); }
.guard-log-body { max-height: 240px; overflow-y: auto; padding: 6px 12px; font-family: var(--font-mono, 'Consolas', monospace); }
.guard-log-line { padding: 2px 0; line-height: 1.5; word-break: break-all; }
.guard-log-msg { color: var(--fg-muted, #555); }
.guard-log-line.log-warn .guard-log-msg { color: #c77d00; }
.guard-log-line.log-error .guard-log-msg { color: #d1242f; }
.guard-log-line.log-info .guard-log-msg { color: var(--fg-default, #333); }
.guard-log-empty { color: var(--fg-subtle, #999); padding: 12px 0; text-align: center; }
@media (max-width: 640px) { .guard-log-fab { width: calc(100vw - 16px); right: 8px; bottom: 8px; } }

/* ── 登录页 / 落地页（鉴权，2026-07-19）────────────────────────── */
/* 居中卡片式登录/落地页，仅消费 tokens.css 令牌。 */
.auth-page {
  min-height: calc(100vh - var(--sp-8, 32px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5, 20px);
  background: radial-gradient(circle at 30% 20%, var(--accent-subtle, rgba(31,111,235,.08)), transparent 60%);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface, #161b22);
  border: 1px solid var(--border-subtle, #30363d);
  box-shadow: var(--shadow-2, 0 4px 16px rgba(0,0,0,.2));
}
.auth-brand {
  text-align: center;
  margin-bottom: var(--sp-5, 20px);
  color: var(--accent, #1f6feb);
}
.auth-title {
  margin: var(--sp-3, 12px) 0 var(--sp-1, 4px);
  font-size: var(--fs-xl, 20px);
  font-weight: var(--fw-bold, 700);
  color: var(--fg-default, #e6edf3);
}
.auth-subtitle {
  margin: 0;
  font-size: var(--fs-sm, 13px);
  color: var(--fg-muted, #b1bac4);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
}
.auth-error {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  background: var(--danger-muted, rgba(248,81,73,.15));
  color: var(--danger, #f85149);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--fs-sm, 13px);
}
.auth-submit { margin-top: var(--sp-2, 8px); }
.auth-footer {
  margin-top: var(--sp-4, 16px);
  text-align: center;
}

/* 落地页（landing）—— hero + 特性卡片 + footer */
.landing-page {
  min-height: calc(100vh - var(--sp-8, 32px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6, 24px) var(--sp-5, 20px);
  text-align: center;
  background: radial-gradient(circle at 50% 30%, var(--accent-subtle, rgba(31,111,235,.08)), transparent 60%);
}
.landing-hero { max-width: 720px; margin-bottom: var(--sp-6, 24px); }
.landing-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3, 12px);
  color: var(--accent, #1f6feb);
  margin-bottom: var(--sp-3, 12px);
}
.landing-title {
  margin: 0;
  font-size: var(--fs-2xl, 24px);
  font-weight: var(--fw-bold, 700);
  color: var(--fg-default, #e6edf3);
}
.landing-tagline {
  margin: 0 0 var(--sp-3, 12px);
  font-size: var(--fs-md, 16px);
  color: var(--accent, #1f6feb);
  font-weight: var(--fw-semibold, 600);
}
.landing-desc {
  margin: 0 0 var(--sp-5, 20px);
  font-size: var(--fs-base, 14px);
  line-height: var(--lh-normal, 1.5);
  color: var(--fg-muted, #b1bac4);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.landing-actions { margin-top: var(--sp-4, 16px); }
.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4, 16px);
  width: 100%;
  max-width: 900px;
  margin: var(--sp-5, 20px) 0;
}
.landing-feature .card-body {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}
.landing-feature svg {
  color: var(--accent, #1f6feb);
}
.landing-feature h3 {
  margin: 0;
  font-size: var(--fs-md, 16px);
  color: var(--fg-default, #e6edf3);
}
.landing-feature p {
  margin: 0;
  font-size: var(--fs-sm, 13px);
  color: var(--fg-muted, #b1bac4);
  line-height: var(--lh-normal, 1.5);
}
.landing-footer {
  margin-top: var(--sp-5, 20px);
  font-size: var(--fs-xs, 12px);
  color: var(--fg-subtle, #8b949e);
}

/* 侧栏用户区（退出按钮所在） */
.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2, 8px);
  padding-top: var(--sp-2, 8px);
  margin-top: var(--sp-2, 8px);
  border-top: 1px solid var(--border-subtle, #30363d);
}