/* =========================================================
   Joomla 5.3.3 Cassiopeia 用 CSS（貼到 user.css）
   只作用於 .j53-golden-commission 區塊，安全不影響全站
   ========================================================= */

/* 基本變數與字型 */
.j53-golden-commission{--brand:#21a360;--brand-dark:#12814c;--mint:#e8f7ef;--ink:#1a1a1a;--muted:#5b6b66;--border:#e5e8eb;--card:#ffffff;--pill:#dff5e9}
.j53-golden-commission{font-family: var(--cassiopeia-font-family, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif);color:var(--ink)}
.j53-golden-commission .wrap{max-width:980px;margin-inline:auto;padding:20px 16px 56px}

/* ====== 層級修正（避免 hero 光暈覆蓋下方） ====== */
.j53-golden-commission{position:relative;isolation:isolate}
.j53-golden-commission .wrap{position:relative;z-index:0}
.j53-golden-commission .hero{position:relative;z-index:1}
.j53-golden-commission .hero:after{z-index:0;pointer-events:none}
.j53-golden-commission .tagline,
.j53-golden-commission .ratio-row{position:relative;z-index:10}
/* 若仍有覆蓋情形，於外層加 no-orb 類別可關閉光暈 */
.j53-golden-commission.no-orb .hero:after{display:none}

/* ====== 頂部標題條 ====== */
.j53-golden-commission .hero{position:relative;border-radius:18px;padding:28px 18px;background:linear-gradient(135deg,#f5ffee 0%,#c0f0cf 40%,#92e0b3 70%,#6dce9b 100%);overflow:hidden}
.j53-golden-commission .hero:after{content:"";position:absolute;inset:-40px -60px auto auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), rgba(255,255,255,0) 60%);filter:blur(2px)}
.j53-golden-commission .title-pill{display:inline-block;background:linear-gradient(90deg,#ffda3a,#ffc400);color:#2a2a2a;font-weight:800;letter-spacing:.1em;border-radius:10px;padding:8px 14px;font-size:20px;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.j53-golden-commission .hero h1{margin:14px 0 6px;font-size:26px;line-height:1.35;font-weight:800;color:#213b2f}
.j53-golden-commission .hero p{margin:0;color:#2f4a3b;font-size:15px}

/* ====== 膠囊段落 ====== */
.j53-golden-commission .tagline{margin:18px auto 8px;display:flex;justify-content:center}
.j53-golden-commission .tagline .pill{background:var(--pill);color:#2b6e53;border:1px solid #cfeee0;padding:8px 16px;border-radius:999px;font-weight:700}

/* ====== 五大比例列（避免重疊） ====== */
.j53-golden-commission .ratio-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:18px 0 8px}
.j53-golden-commission .ratio{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:72px}
.j53-golden-commission .ratio strong{display:block;font-size:22px;line-height:1;margin:0 0 2px;color:var(--brand-dark);font-weight:800;font-variant-numeric:tabular-nums}
.j53-golden-commission .ratio span{display:block;font-size:12px;line-height:1.2;color:var(--muted)}

/* ====== 主體：流程＋代數＋事業體 ====== */
.j53-golden-commission .grid{display:grid;grid-template-columns:2.1fr 1.2fr;gap:16px;margin-top:10px}

/* 左：組織分配（階梯） */
.j53-golden-commission .ladder{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 16px 16px 56px;position:relative}
.j53-golden-commission .ladder-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.j53-golden-commission .badge{background:var(--mint);padding:6px 10px;border:1px solid #cfeee0;border-radius:999px;font-weight:700;color:#246e4d}
.j53-golden-commission .ladder-note{margin-left:auto;color:#5b6b66;font-size:12px}
.j53-golden-commission .step{position:relative;border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:8px 0;background:#fff;display:flex;align-items:center;gap:10px}
.j53-golden-commission .step + .step:before{content:"";position:absolute;top:-14px;left:24px;width:2px;height:14px;background:linear-gradient(#bfe7d2, #7fd4a9)}
.j53-golden-commission .rank{font-weight:800;letter-spacing:.1em;color:#2a4236;min-width:48px}
.j53-golden-commission .pct{margin-left:auto;font-size:20px;font-weight:800;color:var(--brand-dark)}
.j53-golden-commission .between{display:flex;justify-content:flex-end;margin:-2px 0 6px}
.j53-golden-commission .gap-pill{background:#f5fff9;border:1px dashed #cfeee0;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800;color:#2e6b52}

/* 備註列 */
.j53-golden-commission .side-notes{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.j53-golden-commission .side-note{font-size:12px;color:#3b6c5d;background:#f3fbf6;border:1px solid #d8efdf;border-radius:10px;padding:6px 10px}

/* 視覺強化：向上箭頭 */
.j53-golden-commission .arrow-up{position:absolute;left:22px;top:70px;bottom:70px;width:8px;background:linear-gradient(180deg,#bfe7d2,var(--brand));border-radius:8px}
.j53-golden-commission .arrow-up:before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:14px solid var(--brand);filter:drop-shadow(0 1px 0 rgba(0,0,0,.05))}

/* 右：代數與事業體 */
.j53-golden-commission .right{display:grid;gap:12px;align-content:start}
.j53-golden-commission .card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.j53-golden-commission .card h3{margin:4px 0 10px;font-size:16px;color:#24493b}
/* 代數：盒狀流程（免 table） */
.j53-golden-commission .vflow{display:flex;flex-direction:column;gap:10px}
.j53-golden-commission .box{border:2px solid var(--brand-dark);background:#fff;border-radius:8px;padding:8px}
.j53-golden-commission .box-hd{font-weight:800;color:#2a4236;margin:0 0 6px}
.j53-golden-commission .rates{list-style:none;margin:0;padding:6px 0 2px;border-top:2px solid #2a4236}
.j53-golden-commission .rates li{padding:2px 0;text-align:center;font-weight:800;color:var(--brand-dark)}
.j53-golden-commission .arrow-down{align-self:center;position:relative;width:2px;height:18px;background:linear-gradient(#bfe7d2,#7fd4a9);border-radius:2px}
.j53-golden-commission .arrow-down:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #7fd4a9}

.j53-golden-commission .biz{display:flex;align-items:center;gap:10px}
.j53-golden-commission .biz .pct-big{margin-left:auto;font-size:28px;font-weight:900;color:var(--brand-dark)}

/* 底部標語 */
.j53-golden-commission .cta{margin-top:20px;background:linear-gradient(90deg,#2cb66f,#15935a);color:#fff;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 20px rgba(34,140,90,.15)}
.j53-golden-commission .cta-title{font-size:18px;font-weight:900;letter-spacing:.05em}
.j53-golden-commission .cta ul{margin:6px 0 0 18px;padding:0}
.j53-golden-commission .cta li{margin:.2em 0}

/* RWD */
@media (max-width:880px){.j53-golden-commission .grid{grid-template-columns:1fr}}
@media (max-width:720px){.j53-golden-commission .ratio-row{grid-template-columns:repeat(3,1fr)}.j53-golden-commission .hero h1{font-size:24px}}
@media (max-width:480px){.j53-golden-commission .ratio-row{grid-template-columns:repeat(2,1fr)}.j53-golden-commission .pct{font-size:18px}.j53-golden-commission .biz .pct-big{font-size:24px}.j53-golden-commission .ladder{padding-left:44px}.j53-golden-commission .arrow-up{left:16px;top:74px;bottom:74px;width:6px}}

/* 暗色模式（如站台啟用） */
@media (prefers-color-scheme: dark){
  .j53-golden-commission{--ink:#e6e6e6;--muted:#a7b5af;--border:#2c3a35;--card:#1d2623;--pill:#244a3b;--mint:#163f33}
  .j53-golden-commission .ratio,
  .j53-golden-commission .ladder,
  .j53-golden-commission .card{background:var(--card)}
}

/* ====== 2025-09-05 補丁：比例列在窄寬時自動換欄，避免側欄擠壓 ====== */
#golden-commission .ratio-row{
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  justify-content: center; /* 置中對齊 */
}
#golden-commission .ratio{
  min-height: 84px; /* 再加高一點，窄寬下更穩 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
#golden-commission .ratio strong{ line-height:1; margin-bottom:2px; }
#golden-commission .ratio span{ line-height:1.2; }

/* 視覺穩定：限制比例列最大寬度並置中（可依需要調整） */
#golden-commission .ratio-row{ max-width: 860px; margin-left:auto; margin-right:auto; }

/* 可選：當主內容寬度≤1100px時固定為 3 欄，避免過窄仍硬塞 4~5 欄 */
@media (max-width:1100px){
  #golden-commission .ratio-row{ grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}
/* 反制 Bootstrap 5 .ratio，僅限此元件 */
#golden-commission .ratio {
  position: static !important;   /* 取消 Bootstrap 的相對定位 */
  --bs-aspect-ratio: initial !important;
}
#golden-commission .ratio::before {  /* 移除用來撐高的假元素 */
  content: none !important;
  display: none !important;
}
#golden-commission .ratio > * {      /* 讓內部元素恢復正常排版 */
  position: static !important;
  inset: auto !important;
}
/* 強制把這顆模組（加了 live-dark 後綴的）文字全設成深色系 */
.live-dark,
.live-dark .mod-liveonline__label {
  color: #e6e6e6 !important;
}
.live-dark .mod-liveonline__label {
  color: #9aa0a6 !important;
}
.live-dark .mod-liveonline__total .mod-liveonline__value {
  color: #ffffff !important;
}