/* ==========================================================================
   蚕宝小工具 · 全局主题样式（桑叶青绿主题）
   --------------------------------------------------------------------------
   品牌主色：桑叶青绿 #13c2c2
   设计原则：统一品牌色 · 层次感 · 呼吸感 · WCAG AA
   本文件为 P0-P3 全量设计系统，独立于 style.css，仅做视觉增强与覆盖
   ========================================================================== */

:root {
  /* ── 品牌色（桑叶青绿）── */
  --canbao-primary: #13c2c2;        /* 主色 */
  --canbao-primary-light: #36cfc9;  /* hover / 浅 */
  --canbao-primary-dark: #08979c;   /* active / 深 */
  --canbao-primary-bg: #e6fffb;     /* 主色浅底 */
  --canbao-primary-border: #87e8de; /* 主色浅边框 */

  /* ── 语义色 ── */
  --canbao-success: #52c41a;
  --canbao-success-bg: #f6ffed;
  --canbao-warning: #faad14;
  --canbao-warning-bg: #fffbe6;
  --canbao-danger: #ff4d4f;
  --canbao-danger-bg: #fff1f0;
  --canbao-info: #1890ff;
  --canbao-info-bg: #e6f7ff;

  /* ── 中性色 ── */
  --canbao-text: #2c2c2a;
  --canbao-text-secondary: #5f5e5a;
  --canbao-text-muted: #888780;
  --canbao-border: #dee2e6;
  --canbao-surface: #ffffff;
  --canbao-page-bg: #faf9f6;

  /* ── 圆角 ── */
  --canbao-radius-sm: 6px;
  --canbao-radius-md: 8px;
  --canbao-radius-lg: 12px;

  /* ── 阴影（柔和多层）── */
  --canbao-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --canbao-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --canbao-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);

  /* ── 过渡 ── */
  --canbao-transition: 0.2s ease;
}

/* ==========================================================================
   P0 · 全局底色与排版呼吸感
   ========================================================================== */

body {
  background-color: var(--canbao-page-bg);
  color: var(--canbao-text);
  -webkit-font-smoothing: antialiased;
}

/* 主标题层级 */
h4, .card-header h4, h5 {
  font-weight: 600;
  color: var(--canbao-text);
}

/* 内容区留白提升，页面更透气；底部不设留白，与页脚贴合 */
.content-wrapper {
  padding: 24px 28px 0;
  margin-top: 16px;
}

/* 移动端：收窄内容区横向留白，给卡片/图表留出更多可用宽度（图表在窄屏下依赖这部分空间完整渲染） */
@media (max-width: 768px) {
  .content-wrapper {
    padding: 16px 12px 0;
    margin-top: 12px;
  }
}

/* ==========================================================================
   P1 · 导航栏品牌化
   ========================================================================== */

.navbar {
  background-color: var(--canbao-surface) !important;
  border-bottom: 1px solid var(--canbao-border);
  box-shadow: var(--canbao-shadow-sm);
}

/* 品牌 logo 色块 */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--canbao-text);
}
.navbar-brand i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--canbao-radius-md);
  background: linear-gradient(135deg, var(--canbao-primary), var(--canbao-primary-light));
  color: #fff;
  font-size: 15px;
}

.navbar-nav .nav-link {
  color: var(--canbao-text-secondary);
  transition: color var(--canbao-transition);
}
.navbar-nav .nav-link:hover {
  color: var(--canbao-primary);
}

/* 激活态：主色文字 + 底部下划线（暖金） */
.navbar-nav .nav-item.active > .nav-link {
  color: var(--canbao-primary-dark);
  font-weight: 600;
}
.navbar-nav .nav-item.active > .nav-link::after {
  background-color: var(--canbao-primary);
}

/* ==========================================================================
   P1 · 分组 Tab（资源获取 / 网盘工具）
   ========================================================================== */

.group-tabs .group-tab {
  border-radius: var(--canbao-radius-lg);
  border: 1px solid var(--canbao-border);
  color: var(--canbao-text-secondary);
  transition: all var(--canbao-transition);
}
.group-tabs .group-tab:hover {
  border-color: var(--canbao-primary);
  color: var(--canbao-primary);
  background-color: var(--canbao-primary-bg);
}
.group-tabs .group-tab.active {
  background: linear-gradient(135deg, var(--canbao-primary), var(--canbao-primary-light));
  border-color: var(--canbao-primary);
  color: #fff;
  box-shadow: var(--canbao-shadow-md);
}

/* ==========================================================================
   P2 · 卡片层次
   ========================================================================== */

.card {
  border: 1px solid var(--canbao-border);
  border-radius: var(--canbao-radius-lg);
  box-shadow: var(--canbao-shadow-md);
  transition: box-shadow var(--canbao-transition), transform var(--canbao-transition);
}
.card:hover {
  box-shadow: var(--canbao-shadow-lg);
}

/* 卡片头部：白底 + 底部细线（替代灰底） */
.card-header {
  background-color: var(--canbao-surface) !important;
  border-bottom: 1px solid var(--canbao-border);
}
.card-header h4 i {
  color: var(--canbao-primary);
}

/* ==========================================================================
   P1 · 首页功能卡片图标色块化
   ========================================================================== */

/* 首页卡片图标色块容器 */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--canbao-radius-lg);
  font-size: 24px;
  margin-bottom: 12px;
  transition: transform var(--canbao-transition);
}
.card:hover .feature-icon {
  transform: translateY(-3px);
}

/* 语义色块 */
.feature-icon.is-primary   { background: var(--canbao-primary-bg);   color: var(--canbao-primary-dark); }
.feature-icon.is-success   { background: var(--canbao-success-bg);   color: var(--canbao-success); }
.feature-icon.is-info      { background: var(--canbao-info-bg);      color: var(--canbao-info); }
.feature-icon.is-warning   { background: var(--canbao-warning-bg);   color: var(--canbao-warning); }
.feature-icon.is-danger    { background: var(--canbao-danger-bg);    color: var(--canbao-danger); }

/* 首页功能卡片标题与说明 */
.card.text-center h5 {
  font-weight: 600;
  margin-top: 4px;
}
.card.text-center p.text-muted {
  color: var(--canbao-text-muted) !important;
}

/* ==========================================================================
   P2/P3 · 按钮 · 表格 · 微交互
   ========================================================================== */

/* 主色按钮统一为暖金 */
.btn-primary {
  background-color: var(--canbao-primary);
  border-color: var(--canbao-primary);
  transition: all var(--canbao-transition);
}
.btn-primary:hover {
  background-color: var(--canbao-primary-light);
  border-color: var(--canbao-primary-light);
  box-shadow: 0 4px 10px rgba(19, 194, 194, 0.25);
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(19, 194, 194, 0.25);
}

/* outline 主色按钮 */
.btn-outline-primary {
  color: var(--canbao-primary-dark);
  border-color: var(--canbao-primary);
}
.btn-outline-primary:hover {
  background-color: var(--canbao-primary);
  border-color: var(--canbao-primary);
  color: #fff;
}

/* 表格 hover 行高亮 + 斑马纹 */
.table-hover tbody tr:hover {
  background-color: var(--canbao-primary-bg);
}
.table thead th {
  border-bottom: 2px solid var(--canbao-primary-border);
  color: var(--canbao-text-secondary);
  font-weight: 600;
}

/* 输入框聚焦主色 */
.form-control:focus {
  border-color: var(--canbao-primary);
  box-shadow: 0 0 0 0.2rem rgba(19, 194, 194, 0.15);
}

/* 链接主色 */
a {
  color: var(--canbao-primary-dark);
}
a:hover {
  color: var(--canbao-primary);
}

/* ==========================================================================
   徽章（Bootstrap 4 语义类在 BS5 下缺背景色，导致白字不可见 —— 此处补齐）
   ========================================================================== */
.badge {
  font-weight: 600;
}
.badge-primary {
  background-color: var(--canbao-primary);
  color: #fff;
}
.badge-secondary {
  background-color: #6c757d;
  color: #fff;
}
.badge-success {
  background-color: var(--canbao-success);
  color: #fff;
}
.badge-danger {
  background-color: var(--canbao-danger);
  color: #fff;
}
.badge-warning {
  background-color: var(--canbao-warning);
  color: #212529;
}
.badge-info {
  background-color: var(--canbao-info);
  color: #fff;
}
.badge-light {
  background-color: #e9ecef;
  color: #495057;
}

/* 页脚 */
footer {
  background-color: var(--canbao-surface);
  border-top: 1px solid var(--canbao-border);
  margin-top: 0;
}
/* 页脚文字紧凑：去除段落默认外边距，避免底部多余空白 */
footer p {
  margin: 0;
  padding: 10px 0;
}
footer a {
  color: var(--canbao-text-secondary);
}

/* ==========================================================================
   无障碍：减少动态偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}