/* ==========================================================================
   design-tokens.css —— 全站唯一设计令牌层
   本文件分四段：
     A. :root 设计令牌（唯一来源）
     B. .ds-* 页面外壳与版式骨架 / 通用组件
     C. 响应式
     D. 废弃值与迁移说明（注释）
   所有 .ds-* 规则只允许引用段 A 的令牌，不得写死颜色 / 圆角 / 阴影数值。
   ========================================================================== */

/* --------------------------------------------------------------------------
   段 A：:root 设计令牌（唯一来源）
   -------------------------------------------------------------------------- */
:root {
  /* 品牌与渐变 */
  --tech-accent: #0ea5e9;
  --tech-accent-2: #6366f1;
  --tech-accent-strong: #0284c7;
  --tech-accent-soft: rgba(14, 165, 233, .10);
  --tech-accent-line: rgba(14, 165, 233, .30);
  --tech-accent-glow: rgba(14, 165, 233, .28);
  --tech-grad: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  --tech-grad-bar: linear-gradient(180deg, #0ea5e9 0%, #6366f1 100%);
  --tech-grad-line: linear-gradient(90deg, #0ea5e9 0%, #6366f1 100%);

  /* 表面 / 文本 / 线条 */
  --tech-bg: #f4f7fb;
  --tech-panel: #ffffff;
  --tech-panel-2: #f8fafc;
  --tech-line: #e2e8f0;
  --tech-text: #0f172a;
  --tech-text-2: #64748b;
  --tech-text-3: #94a3b8;

  /* 语义色 */
  --tech-success: #10b981;
  --tech-success-soft: rgba(16, 185, 129, .12);
  --tech-warning: #f59e0b;
  --tech-warning-soft: rgba(245, 158, 11, .12);
  --tech-danger: #f43f5e;
  --tech-danger-soft: rgba(244, 63, 94, .10);
  --tech-info: #64748b;
  --tech-info-soft: rgba(100, 116, 139, .12);
  --tech-vip-grad: linear-gradient(90deg, #f59e0b, #f97316);

  /* 题型色 */
  --tech-type-single: #0369a1;
  --tech-type-multi: #6d28d9;
  --tech-type-judge: #047857;
  --tech-type-fill: #b45309;
  --tech-type-programming: #be123c;
  --tech-type-combination: #334155;

  /* 圆角阶（本系统核心）
     - 用途：xs 用于小徽章/输入内部，sm 用于小按钮，md 用于按钮/卡片级小容器，
       lg 用于主面板/列表项，xl 用于页面头，pill 用于胶囊标签，circle 用于圆形元素。
     - 嵌套同心圆角规则：内层圆角 = 外层圆角 − 外层到内层的间距，保证同心。 */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* 阴影阶 */
  --shadow-xs: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .08);
  --shadow-hover: 0 16px 32px rgba(15, 23, 42, .10);
  --shadow-brand: 0 8px 18px rgba(14, 165, 233, .28);

  /* 间距阶 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* 字号阶与字体 */
  --font-xs: 12px;
  --font-sm: 13px;
  --font-md: 14px;
  --font-lg: 15px;
  --font-xl: 18px;
  --font-2xl: 22px;
  --font-3xl: 26px;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* 动效 */
  --dur-fast: .2s;
  --dur-base: .25s;
  --ease: ease;
  --lift: -3px;

  /* 层次 */
  --z-sticky: 10;
  --z-float: 20;
  --z-mask: 40;
  --z-loading: 50;
  --z-overlay: 100;

  /* 补充说明：
     - 断点为 1024px / 768px / 640px（见段 C）。
     - 已废弃的圆角值（4px / 10px / 14px / 18px）与已废弃主色
       （#409eff / #165dff / #1677ff / #3370ff / #3498db / #3b82f6 / #2c6fbb / #1f2d3d）
       不得用于新代码。 */
}

/* --------------------------------------------------------------------------
   段 B：.ds-* 页面外壳与版式骨架 / 通用组件
   -------------------------------------------------------------------------- */

/* 1. 应用外壳 */
.ds-app {
  min-height: 70vh;
  padding: 32px 0 56px;
  box-sizing: border-box;
  color: var(--tech-text);
  background-color: var(--tech-bg);
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(14, 165, 233, .12), transparent 60%),
    radial-gradient(760px 420px at 88% 0%, rgba(99, 102, 241, .12), transparent 62%),
    linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;

  /* 在 .ds-app 作用域内覆盖 Element Plus 主色（全站唯一口径） */
  --el-color-primary: var(--tech-accent);
  --el-color-primary-light-3: #38bdf8;
  --el-color-primary-light-5: #7dd3fc;
  --el-color-primary-light-7: #bae6fd;
  --el-color-primary-light-8: #e0f2fe;
  --el-color-primary-light-9: #f0f9ff;
  --el-color-primary-dark-2: var(--tech-accent-strong);
}
.ds-app *,
.ds-app *::before,
.ds-app *::after {
  box-sizing: border-box;
}
.ds-app [v-cloak] {
  display: none;
}
[v-cloak] {
  display: none;
}

/* 2. 容器 */
.ds-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.ds-container--wide {
  max-width: 1280px;
}
.ds-container--narrow {
  max-width: 1120px;
}

/* 3. 页面头 */
.ds-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding: 26px 28px;
  background: var(--tech-panel);
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.ds-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--tech-grad-line);
}
.ds-hero-main {
  min-width: 0;
}
.ds-hero-title {
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: .2px;
  margin: 0;
}
.ds-hero-title::before {
  content: "";
  width: 5px;
  height: 26px;
  border-radius: 3px;
  background: var(--tech-grad-bar);
}
.ds-hero-sub {
  margin: 8px 0 0 17px;
  font-size: var(--font-md);
  color: var(--tech-text-2);
}

/* 4. 双 Tab */
.ds-tabs {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  background: var(--tech-panel-2);
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.ds-tab {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--tech-text-2);
  background: transparent;
  padding: 10px 22px;
  border-radius: 9px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ds-tab:hover {
  color: var(--tech-accent-strong);
}
.ds-tab.is-active {
  color: #fff;
  background: var(--tech-grad);
  box-shadow: var(--shadow-brand);
}

/* 5. 两栏骨架 */
.ds-body {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.ds-side {
  background: var(--tech-panel);
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  position: sticky;
  top: 16px;
  min-height: 200px;
}
.ds-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--tech-line);
}
.ds-side-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--tech-text);
}
.ds-side-total {
  font-size: 12px;
  color: var(--tech-accent-strong);
  background: var(--tech-accent-soft);
  border: 1px solid var(--tech-accent-line);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
}
.ds-cat-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 62vh;
  overflow-y: auto;
}
.ds-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ds-cat-item:hover {
  background: var(--tech-panel-2);
}
.ds-cat-item.is-active {
  background: linear-gradient(135deg, rgba(14, 165, 233, .12) 0%, rgba(99, 102, 241, .12) 100%);
  border-color: rgba(14, 165, 233, .38);
}
.ds-cat-name {
  flex: 1;
  min-width: 0;
  font-size: var(--font-md);
  color: var(--tech-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-cat-item.is-active .ds-cat-name {
  font-weight: 700;
  color: var(--tech-accent-strong);
}
.ds-cat-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--tech-text-2);
  background: var(--tech-panel-2);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}
.ds-cat-item.is-active .ds-cat-count {
  color: #fff;
  background: var(--tech-grad);
}
.ds-side-empty {
  padding: 28px 0;
  text-align: center;
  font-size: var(--font-sm);
  color: var(--tech-text-2);
}
.ds-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ds-sub {
  background: var(--tech-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px 18px;
}
.ds-sub-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--tech-text-2);
  margin-bottom: var(--space-3);
  letter-spacing: .5px;
}
.ds-sub-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tech-text-2);
  background: var(--tech-panel-2);
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ds-chip:hover {
  color: var(--tech-accent-strong);
  border-color: rgba(14, 165, 233, .40);
}
.ds-chip.is-active {
  color: #fff;
  background: var(--tech-grad);
  border-color: transparent;
  box-shadow: var(--shadow-brand);
}
.ds-chip-count {
  font-size: 12px;
  font-weight: 600;
  opacity: .75;
}

/* 6. 列表与内容 */
.ds-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
  gap: var(--space-3);
}
.ds-list-title {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--tech-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-list-total {
  font-size: var(--font-sm);
  color: var(--tech-text-2);
  flex-shrink: 0;
}
.ds-list {
  position: relative;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ds-item {
  background: var(--tech-panel);
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.ds-item:hover {
  transform: translateY(var(--lift));
  border-color: rgba(14, 165, 233, .40);
  box-shadow: var(--shadow-hover);
}
.ds-item-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.ds-no {
  font-size: 12px;
  font-weight: 700;
  color: var(--tech-text-2);
  font-family: var(--font-mono);
}
.ds-meta {
  font-size: 12px;
  color: var(--tech-text-2);
}
.ds-meta.is-accent {
  color: var(--tech-accent-strong);
  font-weight: 600;
}
.ds-panel {
  background: var(--tech-panel);
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5);
}
.ds-card {
  background: var(--tech-panel);
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.ds-card:hover {
  transform: translateY(var(--lift));
  border-color: rgba(14, 165, 233, .40);
  box-shadow: var(--shadow-hover);
}
.ds-section-title {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--tech-text-2);
  letter-spacing: .5px;
  margin-bottom: var(--space-3);
}
.ds-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-4);
  font-size: var(--font-sm);
}
.ds-crumb a {
  color: var(--tech-text-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.ds-crumb a:hover {
  color: var(--tech-accent-strong);
}
.ds-crumb-sep {
  color: var(--tech-text-3);
}

/* 7. 标签与徽章 */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tech-text-2);
  background: var(--tech-panel-2);
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  text-decoration: none;
}
.ds-tag:hover {
  color: var(--tech-accent-strong);
  border-color: rgba(14, 165, 233, .40);
}
/* 知识点标签容器与标签（题目卡片底部） */
.ds-kp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.ds-kp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tech-text-2);
  background: var(--tech-panel-2);
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ds-kp-tag:hover {
  color: var(--tech-accent-strong);
  border-color: rgba(14, 165, 233, .40);
}
.ds-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tech-type-single);
  background: rgba(14, 165, 233, .10);
  border: 1px solid rgba(14, 165, 233, .28);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  text-decoration: none;
}
.ds-type-single {
  color: var(--tech-type-single);
  background: rgba(14, 165, 233, .10);
  border-color: rgba(14, 165, 233, .28);
}
.ds-type-multi {
  color: var(--tech-type-multi);
  background: rgba(99, 102, 241, .10);
  border-color: rgba(99, 102, 241, .28);
}
.ds-type-judge {
  color: var(--tech-type-judge);
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .30);
}
.ds-type-fill {
  color: var(--tech-type-fill);
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .30);
}
.ds-type-programming {
  color: var(--tech-type-programming);
  background: rgba(244, 63, 94, .10);
  border-color: rgba(244, 63, 94, .26);
}
.ds-type-combination {
  color: var(--tech-type-combination);
  background: rgba(100, 116, 139, .12);
  border-color: rgba(100, 116, 139, .28);
}
.ds-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  white-space: nowrap;
}
.ds-badge-free {
  color: var(--tech-text-2);
  background: var(--tech-line);
}
.ds-badge-org {
  color: #1d4ed8;
  background: #dbeafe;
}
.ds-badge-level {
  color: #fff;
  background: var(--tech-vip-grad);
  box-shadow: 0 2px 6px rgba(245, 158, 11, .4);
}

/* 8. 按钮 */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: var(--font-md);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
}
.ds-btn-primary {
  color: #fff;
  background: var(--tech-grad);
  box-shadow: var(--shadow-brand);
}
.ds-btn-primary:hover {
  filter: brightness(1.05);
}
.ds-btn-ghost {
  color: var(--tech-text-2);
  background: var(--tech-panel);
  border-color: var(--tech-line);
}
.ds-btn-ghost:hover {
  color: var(--tech-accent-strong);
  border-color: rgba(14, 165, 233, .40);
}
.ds-btn-sm {
  padding: 8px 12px;
  font-size: var(--font-sm);
  border-radius: var(--radius-sm);
}

/* 9. 状态 */
.ds-empty {
  padding: 60px 0;
  text-align: center;
  background: var(--tech-panel);
  border: 1px solid var(--tech-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ds-empty-icon {
  font-size: 40px;
  line-height: 1;
  color: #cbd5e1;
  margin-bottom: var(--space-3);
}
.ds-empty-text {
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--tech-text);
}
.ds-empty-tip {
  margin-top: 6px;
  font-size: var(--font-sm);
  color: var(--tech-text-2);
}
.ds-loading {
  position: absolute;
  inset: 0;
  z-index: var(--z-loading);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--font-sm);
  color: var(--tech-text-2);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  border-radius: var(--radius-lg);
}
.ds-loading-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(14, 165, 233, .25);
  border-top-color: var(--tech-accent);
  border-radius: var(--radius-circle);
  animation: ds-spin .8s linear infinite;
}
@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}
.ds-pager {
  margin-top: var(--space-3);
  display: flex;
  justify-content: center;
}
.ds-pager.is-end {
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   段 C：响应式（断点 1024px / 768px / 640px）
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ds-body {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
  }
  .ds-side {
    padding: var(--space-3);
  }
  .ds-container {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 768px) {
  .ds-app {
    padding: 16px 0 40px;
  }
  .ds-hero {
    padding: 20px 18px;
    flex-direction: column;
    align-items: stretch;
  }
  .ds-hero-title {
    font-size: var(--font-2xl);
  }
  .ds-hero-title::before {
    height: 22px;
  }
  .ds-hero-sub {
    font-size: var(--font-sm);
  }
  .ds-tabs {
    width: 100%;
  }
  .ds-tab {
    flex: 1;
    padding: 10px 12px;
  }
  .ds-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .ds-side {
    position: relative;
    padding: var(--space-3);
  }
  .ds-cat-list {
    flex-direction: row;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .ds-cat-item {
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 9px 13px;
    background: var(--tech-panel-2);
    border-color: var(--tech-line);
  }
  .ds-cat-name {
    font-size: var(--font-sm);
  }
  .ds-item {
    padding: var(--space-3);
  }
  .ds-list-title {
    font-size: var(--font-lg);
  }
  .ds-empty {
    padding: 40px 0;
  }
}

@media (max-width: 640px) {
  .ds-container {
    padding-left: 14px;
    padding-right: 14px;
  }
  .ds-hero {
    padding: 16px 14px;
  }
  .ds-btn-block {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   段 D：废弃值与迁移说明
   --------------------------------------------------------------------------
   已废弃圆角（映射关系）：
     4px  → 6px  (--radius-xs)
     10px → 12px (--radius-md)
     14px → 16px (--radius-lg)
     18px → 20px (--radius-xl)
     2px / 3px / 11px / 22px 一并废弃，统一改用上面的圆角阶。
   已废弃主色：
     #409eff / #165dff / #1677ff / #3370ff
     #3498db / #3b82f6 / #2c6fbb / #1f2d3d
     上述颜色不得出现在新代码中，统一使用 --tech-accent 系列令牌。
   嵌套同心圆角规则：
     内层圆角 = 外层圆角 − 外层到内层的间距（保证内层与外层视觉同心）。
   -------------------------------------------------------------------------- */