:root {
  --cc-box-color: #F59E0B;
  --cc-empty-color: #9CA3AF;
  --cc-warning-color: #EF4444;
  --cc-wireframe-color: #3B82F6;
  --cc-recommend-color: #10B981;
}

/* 骨架屏 */
.result-card.skeleton .count-display,
.result-card.skeleton .volume-display,
.result-card.skeleton .utilization-display,
.result-card.skeleton .cost-display {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  color: transparent !important;
  border-radius: 4px;
  min-height: 1.2em;
}
.result-card.skeleton .status-badge {
  background: #e5e7eb !important;
  color: transparent !important;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Canvas */
#containerCanvas {
  display: block;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 0.5rem;
}

/* 结果卡片 */
.result-card {
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.result-card.active {
  border-color: var(--cc-recommend-color);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.result-card.warning {
  border-color: var(--cc-warning-color);
  animation: shake 0.5s ease-in-out 3;
}
.result-card .status-badge {
  font-size: 0.7rem;
}
.result-card.warning .status-badge {
  background: #fee2e2;
  color: #991b1b;
}
.result-card.active .status-badge {
  background: #d1fae5;
  color: #065f46;
}

/* quantity 模式详情 */
.quantity-detail {
  border-top: 1px dashed #e5e7eb;
}

/* 历史记录 */
#historyPanel .list-group-item {
  border: none;
  border-bottom: 1px solid #f3f4f6;
}
#historyPanel .list-group-item:last-child {
  border-bottom: none;
}

/* 柜型切换按钮 */
.container-tab {
  transition: all 0.2s;
}
.container-tab.active {
  background: var(--cc-wireframe-color);
  color: #fff;
  border-color: var(--cc-wireframe-color);
}

/* 快速选择箱规 */
.quick-spec {
  font-size: 0.8rem;
}

/* 震动动画 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.box-warning {
  animation: shake 0.5s ease-in-out 3;
}

/* 响应式 */
@media (max-width: 767px) {
  #containerCanvas {
    height: 300px !important;
  }
  .result-card .card-body {
    padding: 0.75rem;
  }
  .count-display {
    font-size: 1.5rem !important;
  }
  #inputTabs .nav-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }
}

/* 装柜顾问 */
#advisorPanel .border-bottom {
  border-color: #e5e7eb !important;
}
#advisorPanel .border-bottom:last-child {
  border-bottom: none !important;
}

/* 黄金箱规 */
#goldenPanel .border.rounded {
  transition: all 0.2s ease;
}
#goldenPanel .border.rounded:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

/* 填仓推荐 */
#fillerPanel .border.rounded {
  transition: all 0.2s ease;
}
#fillerPanel .border.rounded:hover {
  border-color: #22c55e !important;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
}

/* 模式切换 */
#modeSwitch .btn-check:checked + .btn {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

/* 剩余空间显示 */
.remaining-display {
  font-size: 0.75rem;
}

/* Toast */
#ccToast {
  border: none;
}
#ccToast .toast-body {
  font-size: 0.9rem;
}