:root{
  --bg:#05070d; --panel:#0b1220; --line:#1f2a44; --dim:#94a3b8; --txt:#e6f0ff;
  --neon:#4fd5ff; --neon2:#7c3aed; --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --r:14px; --shadow:0 40px 120px rgb(0 0 0 /.9);
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 20% 0%, #0f2138 0%, #05070d 50%, #05070d 100%) fixed;
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Microsoft JhengHei","Segoe UI",Roboto,Arial,sans-serif
}

/* ===== Topbar ===== */
.topbar{position:sticky;top:0;z-index:5;background:#0d1320cc;border-bottom:1px solid #183154;backdrop-filter:blur(8px);box-shadow:0 30px 80px rgb(0 0 0 /.8)}
.nav{max-width:1200px;margin:0 auto;padding:8px 16px;display:flex;gap:8px;justify-content:center}
.btn{display:inline-block;padding:8px 12px;border-radius:10px;border:1px solid #2b5d83;color:#e6f0ff;text-decoration:none;background:#10233b;box-shadow:inset 0 0 16px #133a5c, 0 10px 40px rgb(0 0 0 /.6)}
.btn:hover{filter:brightness(1.1)}

/* ===== Layout ===== */
.wrap{max-width:1200px;margin:20px auto 72px;padding:0 16px}
.page-title{margin:0 0 10px;font-size:22px;letter-spacing:.05em;text-shadow:0 0 18px rgba(79,213,255,.6)}

/* ============================================================
   🌌 會員中心：上三欄美化（圓角 + 縮小 + 勳章圖長條化）
   檔案位置：C:\inetpub\an16888\account\account.css
   ============================================================ */

/* === 佈局設定：三欄同排、手機自動換行 === */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;                 /* 卡片間距，預設14px，可改 10~20 */
  align-items: stretch;
}
@media (max-width: 980px) {
  .cards-grid { grid-template-columns: 1fr; }
}

/* === 卡片外觀 === */
.cards-grid .card {
  min-height: 60px;         /* 卡片高度（縮小後），可改 80~120 */
  border-radius: 18px;       /* 🌈 邊角圓弧半徑（可改 10~24） */
  border: 1px solid rgba(79, 213, 255, .25);
  background: linear-gradient(160deg, rgba(15,23,42,.9) 0%, rgba(2,6,23,.8) 100%);
  box-shadow: 0 0 0 1px rgba(79,213,255,.18),
              0 14px 40px rgba(0,0,0,.55);
  overflow: hidden;
}

/* === 卡片標題（電子郵件 / 累計消費 / 等級勳章） === */
.cards-grid .card .card-hd {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6px 10px;          /* 縮小內距：越小越扁，可改 4~10 */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  /* ⬇⬇⬇ 只變更這一條漸層色：粉橘 → 柔和過渡 → 天空藍（更細膩） */
  background: linear-gradient(90deg,
    #F0ADA0 0%,
    #F5B7B1 22%,
    #E7C9CF 50%,
    #BFDCEC 78%,
    #9EE2F0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px rgba(120,200,255,.22),
               0 0 20px rgba(120,180,255,.14);
}

/* === 卡片內容（值） === */
.cards-grid .card .card-bd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 8px 10px 12px;     /* 內距：縮小整體高度 */
}

/* === Email / 金額 / 距離下一級 文本銀白漸層 === */
#uEmail, #uSpent, #barTip {
  font-weight: 400;
  /* ⬇⬇⬇ 銀白改為 5 段更細膩 */
  background: linear-gradient(180deg,
    #f7fbff 0%,
    #eef5ff 22%,
    #e6efff 42%,
    #dbe6f6 68%,
    #cbd7ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 8px rgba(255,255,255,.25),
    0 0 18px rgba(120,200,255,.14);
}

/* ============================================================
   ✨ 勳章圖清晰化調整
   提升銳利度、對比與光暈平衡
   ============================================================ */
#badgeImg {
  width: 70px;              /* 🟦 可改寬度 100~140 */
  height: 22px;              /* 🟦 可改高度 36~50（建議略扁） */
  display: block;
  margin: 6px auto 4px;
  object-fit: contain;       /* 保留比例不變形 */
  image-rendering: -webkit-optimize-contrast; /* 🔹 Chrome 銳化 */
  image-rendering: crisp-edges;               /* 🔹 Firefox 銳化 */
  image-rendering: high-quality;              /* 🔹 Safari */
  filter:
    drop-shadow(0 0 6px rgba(79,213,255,.45))
    drop-shadow(0 0 10px rgba(79,213,255,.25))
  transition: transform .2s ease, filter .2s ease;
}
#badgeImg:hover {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 10px rgba(79,213,255,.6))
    brightness(1.25) contrast(1.2);
}


/* === 進度條（在勳章圖下方） === */
#barWrap {
  width: 88%;                 /* 進度條長度，可改 70%~100% */
  max-width: 520px;
  height: 8px;                /* 條高（更扁）可改 4~10 */
  border-radius: 999px;
  border: 1px solid rgba(79,213,255,.35);
  background: rgba(12,18,34,.55);
  margin: 2px auto 0;
  overflow: hidden;
  position: relative;
}
#barFill {
  height: 100%;
  border-radius: 999px;
  /* ⬇⬇⬇ 藍系多段色停，過渡更柔順 */
  background: linear-gradient(90deg,
    #36d1ff 0%,
    #4abfff 28%,
    #69acff 55%,
    #8ea1ff 78%,
    #9aa4ff 100%);
  box-shadow: 0 0 18px rgba(80,182,255,.4) inset,
              0 0 20px rgba(80,182,255,.28);
  transition: width .3s ease;
}
#barTip {
  margin-top: 6px;
  font-size: 13px;
  text-align: center;
}

/* === KPI 值（Email / 金額）可再放大一點 === */
.kpi-value, .kpi .value, .metric, .metric-value {
  font-size: 17px;           /* 可調整 15~20 */
  font-weight: 500;
}

/* === 下方訂單表格亮化（保持一致風格） === */
.order-table td:not(.status),
.order-table th {
  color: #e6eefc;
  text-shadow: 0 0 8px rgba(180,210,255,.14);
}


/* ===== Badge & Progress ===== */
.badge-row{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.badge-row img{width:56px;height:56px;border-radius:12px;border:1px solid rgba(79,213,255,.6);box-shadow:0 0 22px rgba(79,213,255,.45)}
/* 長度加長=滿版，高度縮小=8px */
.progress{width:100%;height:8px;background:#0b1629;border:1px solid #1e335a;border-radius:8px;overflow:hidden}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#22d3ee,#3b82f6,#a78bfa);box-shadow:0 0 14px rgba(79,213,255,.6)}
.progress-tip{font-size:12px}

/* ===== Orders Panel ===== */
.panel{border:1px solid #1f2a44;background:linear-gradient(160deg,rgba(15,23,42,.86)0%,rgba(2,6,23,.78)100%);border-radius:var(--r);box-shadow:var(--shadow)}
.panel-hd{padding:12px 14px;border-bottom:1px solid #1d2b48}
.panel-bd{padding:0}

/* 表格區域 */
.table-wrap{max-height:520px;overflow:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.tbl thead th{position:sticky;top:0;background:#0e1728;color:#a6b8d6;border-bottom:1px solid #1e2a47}
.muted{color:var(--dim)}

/* 銀白色發亮（除「狀態」第 5 欄外全部套用） */
.tbl td{
  color:#e9f2ff;
  text-shadow:
    0 0 6px rgba(230,240,255,.25),
    0 0 14px rgba(79,213,255,.10);
}
.tbl td:nth-child(5){ /* 狀態欄位：取消銀白光，交給膠囊顏色 */
  color:inherit;
  text-shadow:none;
}

/* 狀態膠囊 */
.status{padding:3px 8px;border-radius:999px;font-size:12px;border:1px solid #334155;display:inline-block}
.st-paid{background:#052d25; border-color:#065f46; color:#34d399}
.st-pending{background:#2a1a02; border-color:#a16207; color:#fbbf24}
.st-failed{background:#3b0a0a; border-color:#b91c1c; color:#fca5a5}
.st-dev{background:#111827; border-color:#4b5563; color:#a3a3a3}

@media (max-width: 960px){
  .cards-grid{grid-template-columns:1fr}
}