:root {
  /* ===== 卡片尺寸 ===== */
  --card-width: 180px;
  --card-height: 180px;
  --card-border-radius: 6px;
  --card-gap: 8px;
  --card-padding: 0;
  
  /* ===== 卡片边框 ===== */
  --card-border-upload: 2px dashed var(--border-color);
  --card-border-content: 1px solid var(--border-color);
  --card-border-hover: 2px solid var(--accent-start);
  --card-border-active: 2px solid var(--accent-start);
  
  /* ===== 字号 ===== */
  --font-title: 14px;
  --font-body: 12px;
  --font-small: 11px;
  --font-mini: 10px;
  --font-icon: 24px;
  --font-icon-large: 32px;
  
  /* ===== 间距 ===== */
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  
  /* ===== 颜色 - 背景 ===== */
  
  /* ===== 颜色 - 文字 ===== */
  
  /* ===== 颜色 - 强调 ===== */
  
  /* ===== 颜色 - 状态 ===== */
  
  /* ===== 颜色 - 边框 ===== */
  --border: #475569;
  
  /* ===== 圆角 ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  
  /* ===== 阴影 ===== */
  
  /* ===== 过渡 ===== */
  /* ===== 侧栏品牌图标 ===== */
  --nav-item-min-height: 48px;
  --nav-item-gap: 10px;
  --nav-icon-box-size: 28px;
  --nav-icon-glyph-size: 20px;
  --nav-icon-radius: 8px;
  --nav-icon-dot-size: 3px;
  --nav-icon-surface: #211b14;
  --nav-icon-surface-deep: #15110d;
  --nav-icon-ivory: #fff4df;
  --nav-icon-gold: #d99a31;
  --nav-icon-border: rgba(255, 255, 255, 0.14);
  --nav-icon-highlight: rgba(255, 255, 255, 0.10);
  --nav-icon-home: #efab3c;
  --nav-icon-materials: #ef6c54;
  --nav-icon-script: #e27a9e;
  --nav-icon-voice: #aa8bea;
  --nav-icon-avatar: #758de6;
  --nav-icon-editor: #63becb;
  --nav-icon-assets: #64b18e;
  --nav-icon-create: #efaa37;
  --nav-icon-motion: 120ms cubic-bezier(.23, 1, .32, 1);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

/* ===== 基础重置 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== 卡片通用样式 ===== */
/* CARDFIX-20260717: 原 height:180px + overflow:hidden 把内容切了99~144px
   (chips标签和「进入→」链接被切没,客户看不到入口)。改为高度跟内容走、保底180。
   已验:全站仅 index.html 的4张卡用 .card,JS无动态生成,不连累素材卡。 */
.card {
  width: auto;            /* CARDFIX2-20260717: 原写死180px导致正文挤成7行、卡高389px。宽度交给grid */
  max-width: 100%;
  height: auto;
  min-height: var(--card-height);
  border-radius: var(--card-border-radius);
  overflow: visible;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.card-upload {
  border: var(--card-border-upload);
  background: var(--bg-tertiary);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-upload:hover {
  border: var(--card-border-hover);
}

.card-content {
  border: var(--card-border-content);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.card-saved {
  border: var(--card-border-content);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-saved:hover {
  border: var(--card-border-hover);
}