/* ==========================================================
   JR杰瑞 · 衣橱生态签名组件  eco-wardrobe.181000.css
   ------------------------------------------------------------
   挂在 [data-eco="wardrobe"]
   签名组件：**造型卡片墙**
   - .look-grid   造型卡片墙（自适应网格，卡片带大图 + 标签）
   - .look-slots  搭配槽位（上装/下装/外套/配饰…）
   - .wardrobe-grid / .wardrobe-stats  衣橱陈列 + 数据条
   生态主色：松绿 #2F5D50（暗底提亮 #5A9A88）
   ========================================================== */

/* ---- 生态变量 ---- */
[data-eco="wardrobe"] {
  --eco: #2F5D50;
  --eco-soft: rgba(47, 93, 80, .10);
  --eco-line: rgba(47, 93, 80, .28);
  --eco-glow: rgba(47, 93, 80, .22);
}
[data-theme][data-eco="wardrobe"] {
  --eco: #5A9A88;
  --eco-soft: rgba(90, 154, 136, .12);
  --eco-line: rgba(90, 154, 136, .32);
}

/* ---- 签名组件 1：造型卡片墙 ---- */
[data-eco="wardrobe"] .look-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
[data-eco="wardrobe"] .look-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(232,225,213,.10);
  background: #16130F;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
[data-eco="wardrobe"] .look-card:hover {
  border-color: var(--eco-line);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
[data-eco="wardrobe"] .look-card.is-active {
  border-color: var(--eco);
  box-shadow: 0 0 0 2px var(--eco-glow);
}
[data-eco="wardrobe"] .look-card__media {
  aspect-ratio: 3 / 4;
  background: #0E0C0A;
  display: grid; place-items: center;
}
[data-eco="wardrobe"] .look-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
[data-eco="wardrobe"] .look-card__body { padding: 12px 13px 14px; }
[data-eco="wardrobe"] .look-card__name {
  font-size: 13.5px; font-weight: 700; color: #E8E1D5; line-height: 1.4;
}
[data-eco="wardrobe"] .look-card__meta {
  font-size: 11.5px; color: #8C8377; margin-top: 4px;
}

/* 造型标签 */
[data-eco="wardrobe"] .look-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px; letter-spacing: .08em;
  background: var(--eco-soft);
  color: var(--eco);
  border: 1px solid var(--eco-line);
}

/* ---- 签名组件 2：搭配槽位 ---- */
[data-eco="wardrobe"] .look-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
[data-eco="wardrobe"] .look-slot {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px dashed rgba(232,225,213,.16);
  background: rgba(232,225,213,.03);
  display: grid; place-items: center;
  font-size: 11px; color: #8C8377;
  transition: border-color .2s, background .2s, color .2s;
}
[data-eco="wardrobe"] .look-slot:hover {
  border-color: var(--eco-line);
  background: var(--eco-soft);
  color: var(--eco);
}
[data-eco="wardrobe"] .look-slot.is-filled {
  border-style: solid;
  border-color: var(--eco-line);
  background: var(--eco-soft);
}
[data-eco="wardrobe"] .look-slot.is-filled img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
}

/* ---- 签名组件 3：衣橱陈列 + 数据条 ---- */
[data-eco="wardrobe"] .wardrobe-grid {
  gap: 18px;
}
[data-eco="wardrobe"] .wardrobe-stats {
  border: 1px solid rgba(232,225,213,.09);
  border-radius: 16px;
  background: #16130F;
}
[data-eco="wardrobe"] .wardrobe-stats .stat-v,
[data-eco="wardrobe"] .wardrobe-stats b {
  color: var(--eco);
}

/* ---- 主操作按钮：松绿（深底浅字）---- */
[data-eco="wardrobe"] .btn--primary,
[data-eco="wardrobe"] .primary {
  background: #2F5D50;
  color: #F2ECE1;
  border-color: #2F5D50;
}
[data-eco="wardrobe"] .btn--primary:hover,
[data-eco="wardrobe"] .primary:hover {
  background: #3A7263;
  border-color: #3A7263;
}

/* ---- 进度条 ---- */
[data-eco="wardrobe"] .node-progress-fill,
[data-eco="wardrobe"] .generation-progress-bar {
  background: linear-gradient(90deg, #2F5D50, #5A9A88) !important;
}

/* ---- 侧栏激活 ---- */
[data-eco="wardrobe"] .nav-item.active {
  color: var(--eco);
  background: var(--eco-soft);
  box-shadow: inset 2px 0 0 var(--eco);
}