/* ==========================================================================
   狗狗云 · 会员中心首页主题（gougou）
   作用域：public/home/template/pc/gougou/
   说明：本文件只覆盖视觉（卡片、数据块、列表、日历与公告观感），
        不包含任何业务逻辑，删除本文件即可完全回到官方外观。
   ========================================================================== */

:root {
  --gg-brand: #0052d9;
  --gg-brand-light: #ecf2fe;
  --gg-bg: #f7f9fd;
  --gg-card: #ffffff;
  --gg-line: #e7e8ea;
  --gg-line-soft: #f0f1f3;
  --gg-text: #181818;
  --gg-text-2: #5e646e;
  --gg-text-3: #8a9099;
  --gg-price: var(--color-price-text, #e5484d);
  --gg-r: 8px;
  --gg-r-sm: 4px;
  --gg-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

body {
  background: var(--gg-bg);
  color: var(--gg-text);
}

/* ---------- 布局底色 ---------- */
.main-content {
  background: transparent;
  column-gap: 16px;
}

.left-box {
  row-gap: 16px;
}

/* ---------- 顶部问候条 ---------- */
.info-box {
  background: linear-gradient(120deg, #ffffff 0%, #f7faff 100%);
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-r);
  box-shadow: var(--gg-shadow);
  padding: 22px 24px;
}

.hello,
.name {
  color: var(--gg-text);
  font-weight: 600;
}

.name-first {
  color: var(--gg-text);
}

/* ---------- 数据卡片（订购产品 / 待办 / 消费） ---------- */
.money-box,
.order-box,
.WorkOrder-box,
.product-list-box,
.recommend-box,
.notice-box {
  background: var(--gg-card);
  border: 1px solid var(--gg-line);
  border-radius: var(--gg-r);
  box-shadow: var(--gg-shadow);
}

.money-box,
.order-box {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.money-box:hover,
.order-box:hover {
  border-color: #c9d8ff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.money-top,
.WorkOrder-title,
.notice-title {
  color: var(--gg-text-2);
  font-weight: 600;
}

.money-order,
.money-top .num,
.recommend-money-num {
  color: var(--gg-text);
  font-weight: 700;
}

.recommend-money-num {
  color: var(--gg-brand);
}

.more {
  color: var(--gg-brand);
  font-weight: 500;
}

/* ---------- 待办 / 工单列表 ---------- */
.WorkOrder-item,
.notice-item {
  border-bottom: 1px solid var(--gg-line-soft);
  padding: 12px 4px;
  transition: background 0.15s ease;
}

.WorkOrder-item:last-child,
.notice-item:last-child {
  border-bottom: none;
}

.WorkOrder-item:hover,
.notice-item:hover {
  background: #fafcff;
}

.notice-time {
  color: var(--gg-text-3);
}

.notice-type {
  background: var(--gg-brand-light);
  color: var(--gg-brand);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
}

/* ---------- 产品表 ---------- */
.product-list-box table,
.product-list-box .el-table {
  border-radius: var(--gg-r-sm);
  overflow: hidden;
}

.el-table th.el-table__cell {
  background: #f8fafe !important;
  color: var(--gg-text-2) !important;
  font-weight: 600;
}

.el-table td.el-table__cell {
  border-bottom: 1px solid var(--gg-line-soft) !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: #fafcff !important;
}

/* ---------- 金额 ---------- */
.total-price,
.price,
.money-num {
  color: var(--gg-price);
  font-weight: 700;
}

/* ---------- 按钮 ---------- */
.el-button--primary {
  border: none !important;
  border-radius: var(--gg-r-sm) !important;
  background: linear-gradient(90deg, #3d7bff, var(--gg-brand)) !important;
  box-shadow: 0 4px 12px rgba(0, 82, 217, 0.20) !important;
}

.el-button--primary:hover {
  opacity: 0.94;
}

.el-button--default {
  border-radius: var(--gg-r-sm) !important;
  border-color: var(--gg-line) !important;
  color: var(--gg-text-2) !important;
}

/* ---------- 弹窗 ---------- */
.el-dialog,
.dialog-form {
  border-radius: 14px !important;
}

/* ---------- 空状态 ---------- */
.no-product,
.no-recommend {
  color: var(--gg-text-3);
}

/* ==========================================================================
   本次新增（v7）：三色统计卡统一 + 空状态引导
   ========================================================================== */

/* ---------- 统计卡：紫/蓝/绿 → 品牌蓝三段阶梯 ---------- */
.order-box .order-item {
  border-radius: 0.12rem;
  padding: 0.18rem 0.14rem 0.16rem;
  box-shadow: 0 6px 18px rgba(0, 82, 217, 0.16);
  transition: transform .2s ease, box-shadow .2s ease;
}
.order-box .order-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 82, 217, 0.26);
}
.order-box .order-box-1 {
  background: linear-gradient(140deg, #0052d9 0%, #002ab1 100%);
}
.order-box .order-box-2 {
  background: linear-gradient(140deg, #1466ed 0%, #0052d9 100%);
}
.order-box .order-box-3 {
  background: linear-gradient(140deg, #287aff 0%, #1466ed 100%);
}
.order-box .order-title {
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.2px;
}
.order-box .order-nums {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* ---------- 空状态：两行灰字 → 插画引导卡 ---------- */
.no-product {
  margin-top: 0.3rem;
  padding: 0.56rem 0.24rem 0.62rem;
  background: #ffffff;
  border: 1px dashed #dfe8f6;
  border-radius: var(--gg-r);
}
.no-product::before {
  content: "";
  display: block;
  width: 1.15rem;
  height: 0.96rem;
  margin: 0 auto 0.16rem;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20100%27%20fill%3D%27none%27%3E%3Crect%20x%3D%2716%27%20y%3D%278%27%20width%3D%2788%27%20height%3D%2730%27%20rx%3D%279%27%20stroke%3D%27%23cfdcf5%27%20stroke-width%3D%272.5%27%2F%3E%3Crect%20x%3D%2716%27%20y%3D%2746%27%20width%3D%2788%27%20height%3D%2730%27%20rx%3D%279%27%20stroke%3D%27%23cfdcf5%27%20stroke-width%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%2723%27%20r%3D%273.2%27%20fill%3D%27%232b6bff%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%2761%27%20r%3D%273.2%27%20fill%3D%27%23cfdcf5%27%2F%3E%3Crect%20x%3D%2742%27%20y%3D%2720%27%20width%3D%2734%27%20height%3D%276%27%20rx%3D%273%27%20fill%3D%27%23e8eefa%27%2F%3E%3Crect%20x%3D%2742%27%20y%3D%2758%27%20width%3D%2734%27%20height%3D%276%27%20rx%3D%273%27%20fill%3D%27%23e8eefa%27%2F%3E%3Ccircle%20cx%3D%2794%27%20cy%3D%2780%27%20r%3D%2715%27%20fill%3D%27%23eef4ff%27%20stroke%3D%27%232b6bff%27%20stroke-width%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M94%2073v14M87%2080h14%27%20stroke%3D%27%232b6bff%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.no-product h2 {
  font-size: 0.18rem;
  font-weight: 600;
  color: var(--gg-text);
  letter-spacing: -0.2px;
}
.no-product p {
  margin: 0.08rem 0 0.24rem;
  color: var(--gg-text-3);
  font-size: 0.13rem;
  line-height: 1.6;
}
.no-product .el-button--primary {
  border: 0;
  border-radius: 0.08rem;
  padding: 0.13rem 0.28rem;
  font-size: 0.13rem;
  box-shadow: 0 6px 16px rgba(0, 82, 217, 0.24);
}
.no-product .el-button--primary:hover {
  box-shadow: 0 10px 22px rgba(0, 82, 217, 0.32);
}