/* ==========================================================================
   會員端 — Esports HUD / Member esports HUD
   參考 Galactic eSports template 嘅視覺語言：深靛紫底、紫→藍漸變、
   斜切幾何形狀、標題下短漸變橫線、大寫紫色小標籤。

   ⚠️ 只喺會員頁載入。後台批出款、對帳嗰邊維持專業財務控制台嘅樣。
   配色分工：紫／藍 = 介面框架同進度；金色 = 只留畀真金白銀（jackpot、佣金）。
   ========================================================================== */

.hud, .esp{
  --void:#0A0620;
  --deep:#120B33;
  --panel:#1A1145;
  --panel-2:#221657;
  --edge:#31215E;
  --edge-hi:#4A2F8C;

  --txt:#EDE9FF;
  --txt-2:#A99BD6;
  --txt-3:#9080C4;

  --g1:#C13AFF;          /* 品牌漸變 紫 */
  --g2:#6B4BFF;          /* 中段 藍紫 */
  --g3:#3AA0FF;          /* 藍 */
  --grad:linear-gradient(100deg,var(--g1),var(--g2) 55%,var(--g3));

  --gold:#FFC24A;        /* 錢 */
  --gold-glow:rgba(255,194,74,.4);
  --live:#25E5C0;        /* 進行中 */
  --hot:#FF4D8D;         /* 差少少 */
  --lock:#5A4B87;
}

/* 斜切角 —— template 最標誌性嘅形狀 */
.cut{clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%)}
.cut-sm{clip-path:polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%)}

/* ---------- HUD 外框 ---------- */
.hud{
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(193,58,255,.20), transparent 62%),
    radial-gradient(760px 380px at 95% 0%, rgba(58,160,255,.16), transparent 60%),
    linear-gradient(180deg,var(--deep),var(--void));
  color:var(--txt);
  border:1px solid var(--edge);
  border-radius:10px;
  padding:1.5rem;
  margin-bottom:1.5rem;
  font-variant-numeric:tabular-nums;
  position:relative; overflow:hidden;
}
/* 頂邊漸變線 */
.hud::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad);
}

/* ---------- 區段標題（短漸變橫線）---------- */
.esp-h{
  font-size:1.02rem; font-weight:800; letter-spacing:.01em; color:var(--txt);
  margin:0 0 1rem; padding-bottom:.55rem; position:relative; text-transform:uppercase;
}
.esp-h::after{
  content:''; position:absolute; left:0; bottom:0; width:46px; height:3px;
  background:var(--grad); border-radius:2px;
}
.esp-eyebrow{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--g1); font-weight:800;
}

/* ---------- Jackpot ---------- */
.jackpot{
  position:relative; overflow:hidden; text-align:center;
  background:
    radial-gradient(460px 180px at 50% -30%, rgba(255,194,74,.26), transparent 70%),
    linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid rgba(255,194,74,.32);
  border-radius:8px; padding:1.2rem 1rem 1.05rem; margin-bottom:1.3rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 32px rgba(255,194,74,.10);
}
.jackpot .jk{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:800;
}
.jackpot .jv{
  font-family:ui-monospace,Menlo,monospace; font-weight:800;
  font-size:clamp(2.4rem,9vw,3.6rem); line-height:1; letter-spacing:-.03em;
  color:var(--gold); margin:.35rem 0 .12rem;
  text-shadow:0 0 36px var(--gold-glow), 0 0 10px rgba(255,194,74,.35);
}
.jackpot .jsub{font-size:.76rem; color:var(--txt-2)}
.jackpot .jsub b{color:var(--txt); font-family:ui-monospace,Menlo,monospace}
.jackpot .jmine,.jackpot .jlocked{
  display:inline-block; margin-top:.6rem; padding:.3rem .85rem;
  font-size:.78rem; font-weight:700; border:1px solid;
}
.jackpot .jmine{
  background:rgba(37,229,192,.12); border-color:rgba(37,229,192,.35); color:var(--live);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.jackpot .jlocked{
  background:rgba(90,75,135,.2); border-color:var(--edge-hi); color:var(--txt-2);
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
@keyframes jkPulse{0%,100%{opacity:.45} 50%{opacity:1}}
.jackpot::after{
  content:''; position:absolute; left:50%; top:-90px; width:330px; height:180px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,194,74,.22), transparent 70%);
  animation:jkPulse 4.5s ease-in-out infinite;
}

/* ---------- 稱號列 ---------- */
.hud-top{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-bottom:1.1rem; margin-bottom:1.25rem; border-bottom:1px solid var(--edge);
}
.hud-rank{
  display:flex; align-items:center; justify-content:center;
  width:58px; height:58px; flex:none;
  background:var(--grad); color:#fff;
  font-weight:900; font-size:1.3rem; font-family:ui-monospace,Menlo,monospace;
  clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);
  box-shadow:0 0 26px rgba(193,58,255,.45);
}
.hud-id{flex:1 1 auto; min-width:150px}
.hud-id .name{font-size:1.15rem; font-weight:800; line-height:1.25}
.hud-id .tier{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; margin-top:.15rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hud-score{text-align:right}
.hud-score .v{
  font-size:1.95rem; font-weight:900; line-height:1; color:var(--gold);
  text-shadow:0 0 20px var(--gold-glow); font-family:ui-monospace,Menlo,monospace;
}
.hud-score .k{
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-3); font-weight:800; margin-top:.3rem;
}

/* ---------- 任務卡 ---------- */
.missions{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:.85rem}
.mission{
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge); padding:.95rem 1rem;
  position:relative; overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.mission::before{content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--lock)}
.mission.is-live::before{background:var(--live); box-shadow:0 0 14px rgba(37,229,192,.5)}
.mission.is-done::before{background:var(--grad); box-shadow:0 0 14px rgba(193,58,255,.5)}
.mission.is-close::before{background:var(--hot); box-shadow:0 0 14px rgba(255,77,141,.5)}

.mission .m-head{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem}
.mission .m-name{font-size:.9rem; font-weight:800}
.mission .m-state{
  font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; font-weight:900;
  padding:.18rem .5rem; white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%);
}
.is-done  .m-state{background:rgba(193,58,255,.18); color:var(--g1)}
.is-live  .m-state{background:rgba(37,229,192,.15); color:var(--live)}
.is-close .m-state{background:rgba(255,77,141,.15); color:var(--hot)}
.mission:not(.is-done):not(.is-live):not(.is-close) .m-state{background:rgba(90,75,135,.22); color:var(--lock)}

.mission .m-desc{font-size:.78rem; color:var(--txt-2); margin:.4rem 0 .7rem; line-height:1.55}
.mission .m-reward{color:var(--gold); font-weight:800}

.m-bar{height:6px; background:rgba(255,255,255,.07); overflow:hidden; border-radius:99px}
.m-fill{height:100%; background:var(--lock); border-radius:99px; transition:width .55s cubic-bezier(.2,.8,.2,1)}
.is-live  .m-fill{background:linear-gradient(90deg,var(--live),#7BF5DF); box-shadow:0 0 12px rgba(37,229,192,.5)}
.is-done  .m-fill{background:var(--grad); box-shadow:0 0 12px rgba(193,58,255,.5)}
.is-close .m-fill{background:linear-gradient(90deg,var(--hot),#FF8FB6)}
.m-meta{display:flex; justify-content:space-between; margin-top:.45rem; font-size:.72rem; color:var(--txt-3)}
.m-meta b{color:var(--txt); font-family:ui-monospace,Menlo,monospace}

/* ---------- 8 代階梯 ---------- */
.ladder{display:flex; gap:5px; margin-top:.55rem}
.rung{
  flex:1; height:27px; display:flex; align-items:center; justify-content:center;
  font-size:.64rem; font-weight:900; font-family:ui-monospace,Menlo,monospace;
  background:rgba(255,255,255,.05); color:var(--txt-3); border:1px solid var(--edge);
  clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
.rung.on{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 0 10px rgba(193,58,255,.4)}

/* ---------- 數值列 ---------- */
.hud-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.7rem;
  margin-top:1.25rem; padding-top:1.15rem; border-top:1px solid var(--edge);
}
.hud-stat .k{font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--txt-3); font-weight:800}
.hud-stat .v{font-size:1.22rem; font-weight:800; margin-top:.2rem; font-family:ui-monospace,Menlo,monospace}
.hud-stat .v.gold{color:var(--gold)}
.hud-stat .v.live{color:var(--live)}

/* ==========================================================================
   排行榜 / Leaderboard
   ========================================================================== */
.esp{
  background:
    radial-gradient(800px 380px at 12% -10%, rgba(193,58,255,.16), transparent 60%),
    linear-gradient(180deg,var(--deep),var(--void));
  border:1px solid var(--edge); border-radius:10px; padding:1.4rem;
  color:var(--txt); position:relative; overflow:hidden;
  font-variant-numeric:tabular-nums;
}
.esp::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad)}

/* 前三名頒獎台 */
.podium{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-bottom:1.4rem}
.pod{
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge); padding:1rem .8rem; text-align:center; position:relative;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.pod .medal{
  width:38px; height:38px; margin:0 auto .55rem; display:flex; align-items:center; justify-content:center;
  font-weight:900; font-family:ui-monospace,Menlo,monospace; font-size:1rem; color:#fff;
  clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);
}
.pod-1 .medal{background:linear-gradient(140deg,#FFD86B,#E5A100); box-shadow:0 0 22px var(--gold-glow)}
.pod-2 .medal{background:linear-gradient(140deg,#D8DEF0,#8E9AB8)}
.pod-3 .medal{background:linear-gradient(140deg,#E0A06A,#A96A33)}
.pod-1{border-color:rgba(255,194,74,.45)}
.pod .who{font-size:.88rem; font-weight:800; line-height:1.3}
.pod .code{font-size:.68rem; color:var(--txt-3); font-family:ui-monospace,Menlo,monospace}
.pod .metric{
  margin-top:.5rem; font-size:1.28rem; font-weight:900; color:var(--gold);
  font-family:ui-monospace,Menlo,monospace;
}
.pod .unit{font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3); font-weight:800}

/* 排行榜列 */
.lb{display:flex; flex-direction:column; gap:5px}
.lb-row{
  display:flex; align-items:center; gap:.85rem; padding:.6rem .85rem;
  background:rgba(255,255,255,.03); border:1px solid var(--edge);
  clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%);
}
.lb-row.me{
  background:linear-gradient(90deg,rgba(193,58,255,.18),rgba(58,160,255,.08));
  border-color:var(--edge-hi);
}
.lb-rank{
  width:30px; flex:none; text-align:center; font-family:ui-monospace,Menlo,monospace;
  font-weight:900; font-size:.9rem; color:var(--txt-3);
}
.lb-row.me .lb-rank{color:var(--g1)}
.lb-who{flex:1 1 auto; min-width:0}
.lb-who .n{font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb-who .c{font-size:.68rem; color:var(--txt-3); font-family:ui-monospace,Menlo,monospace}
.lb-badge{
  font-size:.6rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  padding:.14rem .45rem; background:rgba(193,58,255,.16); color:var(--g1); flex:none;
}
.lb-val{
  font-family:ui-monospace,Menlo,monospace; font-weight:800; font-size:.95rem;
  color:var(--gold); flex:none; text-align:right; min-width:88px;
}
.lb-empty{text-align:center; color:var(--txt-3); padding:2rem 0; font-size:.86rem}

/* 分類切換 */
.lb-tabs{display:flex; gap:.4rem; margin-bottom:1.1rem; flex-wrap:wrap}
.lb-tab{
  font-size:.75rem; font-weight:800; letter-spacing:.04em; padding:.38rem .9rem;
  background:rgba(255,255,255,.05); border:1px solid var(--edge); color:var(--txt-2);
  text-decoration:none; clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.lb-tab:hover{color:var(--txt); text-decoration:none; border-color:var(--edge-hi)}
.lb-tab.on{background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 0 16px rgba(193,58,255,.35)}

/* ---------- 動畫 ---------- */
@keyframes hudIn{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.hud .mission,.pod{animation:hudIn .34s ease both}
.hud .mission:nth-child(2),.pod:nth-child(2){animation-delay:.06s}
.hud .mission:nth-child(3),.pod:nth-child(3){animation-delay:.12s}
@media (prefers-reduced-motion:reduce){
  .hud .mission,.pod{animation:none}
  .m-fill{transition:none}
  .jackpot::after{animation:none; opacity:.7}
}
@media (max-width:576px){
  .hud,.esp{padding:1.1rem; border-radius:7px}
  .jackpot .jv{font-size:2rem}
  .podium{grid-template-columns:1fr; gap:.6rem}
  .lb-val{min-width:70px; font-size:.86rem}
}

/* ==========================================================================
   全頁主題 / Full-page esports theme
   member.css 只喺會員頁載入，所以呢度可以放心覆蓋 Bootstrap 元件；
   後台唔會受影響（後台只載 app.css）。
   ========================================================================== */

body, body.bg-light{
  --void:#0A0620; --deep:#120B33; --panel:#1A1145; --panel-2:#221657;
  --edge:#31215E; --edge-hi:#4A2F8C;
  --txt:#EDE9FF; --txt-2:#A99BD6; --txt-3:#9080C4;
  --g1:#C13AFF; --g2:#6B4BFF; --g3:#3AA0FF;
  --grad:linear-gradient(100deg,var(--g1),var(--g2) 55%,var(--g3));
  --gold:#FFC24A; --live:#25E5C0; --hot:#FF4D8D;

  background:
    radial-gradient(1000px 520px at 10% -8%, rgba(193,58,255,.13), transparent 62%),
    radial-gradient(880px 460px at 92% 4%, rgba(58,160,255,.10), transparent 60%),
    var(--void) !important;
  background-attachment:fixed;
  color:var(--txt);
  min-height:100vh;
}

/* ---------- 導航列 ---------- */
body .navbar{
  background:linear-gradient(180deg,rgba(26,17,69,.96),rgba(18,11,51,.96))!important;
  border-bottom:1px solid var(--edge);
  backdrop-filter:blur(8px);
  position:relative;
}
body .navbar::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--grad);
}
body .navbar-brand{
  color:#fff!important; font-weight:900; letter-spacing:.04em; text-transform:uppercase;
  border-right-color:var(--edge)!important;
}
body .navbar .nav-link{color:var(--txt-2)!important; font-weight:700}
body .navbar .nav-link:hover{color:#fff!important; background:rgba(193,58,255,.14)}
body .navbar .nav-link.active{color:#fff!important; background:rgba(193,58,255,.2)}
body .navbar .nav-link.active::after{background:var(--grad); box-shadow:0 0 10px rgba(193,58,255,.6)}
body .navbar-text{color:var(--txt-2)!important}
body .navbar .btn-outline-light{border-color:var(--edge-hi); color:var(--txt-2)}
body .navbar .btn-outline-light:hover{background:var(--grad); border-color:transparent; color:#fff}

/* ---------- 卡片 ---------- */
body .card{
  background:linear-gradient(165deg,var(--panel-2),var(--panel))!important;
  border:1px solid var(--edge)!important; color:var(--txt);
  border-radius:0; box-shadow:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
body .card-header{
  background:transparent!important; border-bottom:1px solid var(--edge)!important;
  color:var(--txt-2)!important; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  font-size:.7rem;
}
body h4,body h5,body h6,body strong{color:var(--txt)}
/* 頁面主標題加返 template 嗰條漸變橫線 */
body .container > h4:first-of-type{
  position:relative; padding-bottom:.6rem; margin-bottom:1.2rem;
  text-transform:uppercase; font-weight:900; letter-spacing:.01em;
}
body .container > h4:first-of-type::after{
  content:''; position:absolute; left:0; bottom:0; width:48px; height:3px;
  background:var(--grad); border-radius:2px;
}

/* ---------- 表格 ---------- */
/* ⚠️ Bootstrap 5.3 嘅表格用 CSS 變數 + box-shadow 上色：
     .table > * > * { color: var(--bs-table-color); box-shadow: inset ... var(--bs-table-accent-bg) }
   所以直接寫 color / background 係蓋唔到嘅（實測內文變咗純黑，對比度只有 1.06）。
   一定要覆寫返 Bootstrap 嗰堆 --bs-table-* 變數先得。 */
body .table{
  --bs-table-color:var(--txt);
  --bs-table-bg:transparent;
  --bs-table-accent-bg:transparent;
  --bs-table-border-color:var(--edge);
  --bs-table-striped-color:var(--txt);
  --bs-table-striped-bg:rgba(255,255,255,.028);
  --bs-table-hover-color:var(--txt);
  --bs-table-hover-bg:rgba(193,58,255,.10);
  --bs-table-active-color:var(--txt);
  --bs-table-active-bg:rgba(193,58,255,.12);
  --bs-emphasis-color:var(--txt);
  color:var(--txt);
  border-color:var(--edge);
}
body .table > :not(caption) > * > *{
  color:var(--txt);
  border-bottom-color:var(--edge);
}
/* 表頭：用 --bs-table-bg 上色（background 會畀 box-shadow 蓋過）*/
body .table thead th,
body .table > thead > tr > th{
  --bs-table-bg:rgba(193,58,255,.13);
  color:var(--txt-2)!important;
  border-bottom:1px solid var(--edge)!important;
  font-weight:800; letter-spacing:.08em;
}
body .table tfoot td,
body .table > tfoot > tr > td{
  --bs-table-bg:rgba(193,58,255,.13);
  color:var(--txt)!important; border-top:1px solid var(--edge)!important;
}
/* 表身次要欄（時間、備註）唔好太暗 —— 之前 #7C6BAE 只有 4.3:1 */
body .table td.text-muted,
body .table td .text-muted,
body .table small{color:var(--txt-3)!important}
/* 金額欄要突出 */
body .table td.text-end{color:var(--txt); font-variant-numeric:tabular-nums}
body .table td.text-end strong,
body .table td.fw-bold{color:var(--gold)}
/* .table-light（Bootstrap 淺色列）喺深色主題要反轉 */
body .table-light,
body .table-light > *{
  --bs-table-color:var(--txt);
  --bs-table-bg:rgba(193,58,255,.13);
  color:var(--txt)!important;
}

/* ---------- 表單 ---------- */
body .form-control,body .form-select{
  background:rgba(10,6,32,.6); border:1px solid var(--edge); color:var(--txt); border-radius:0;
}
body .form-control:focus,body .form-select:focus{
  background:rgba(10,6,32,.8); border-color:var(--g1); color:var(--txt);
  box-shadow:0 0 0 3px rgba(193,58,255,.18);
}
body .form-control::placeholder{color:var(--txt-3)}
body .form-label{color:var(--txt-2); font-weight:700}
body .form-check-input{background-color:rgba(10,6,32,.6); border-color:var(--edge)}
body .form-check-input:checked{background-color:var(--g1); border-color:var(--g1)}
body .form-check-label{color:var(--txt-2)}

/* ---------- 按鈕 ---------- */
body .btn{
  border-radius:0; font-weight:800; letter-spacing:.02em;
  clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%);
}
body .btn-primary,body .btn-success{
  background:var(--grad); border:none; color:#fff;
  box-shadow:0 0 16px rgba(193,58,255,.3);
}
body .btn-primary:hover,body .btn-success:hover{filter:brightness(1.15); color:#fff}
body .btn-outline-primary,body .btn-outline-secondary,body .btn-outline-success{
  background:rgba(255,255,255,.04); border:1px solid var(--edge); color:var(--txt-2);
}
body .btn-outline-primary:hover,body .btn-outline-secondary:hover,body .btn-outline-success:hover{
  background:var(--grad); border-color:transparent; color:#fff;
}
body .btn-outline-danger{background:rgba(255,77,141,.08); border-color:rgba(255,77,141,.4); color:var(--hot)}
body .btn-outline-danger:hover{background:var(--hot); color:#fff; border-color:transparent}

/* ---------- 徽章／提示 ---------- */
body .badge{border-radius:0; font-weight:800; clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)}
body .badge.bg-success{background:rgba(37,229,192,.16)!important; color:var(--live)!important}
body .badge.bg-primary{background:rgba(193,58,255,.18)!important; color:var(--g1)!important}
body .badge.bg-warning{background:rgba(255,194,74,.16)!important; color:var(--gold)!important}
body .badge.bg-secondary{background:rgba(124,107,174,.2)!important; color:var(--txt-2)!important}
body .badge.bg-light{background:rgba(255,255,255,.06)!important; color:var(--txt-2)!important; border:none}
body .badge.bg-danger{background:rgba(255,77,141,.16)!important; color:var(--hot)!important}

body .alert{
  border-radius:0; border:1px solid var(--edge); border-left-width:3px;
  background:var(--panel); color:var(--txt);
}
body .alert-info{border-left-color:var(--g3)}
body .alert-success{border-left-color:var(--live)}
body .alert-warning{border-left-color:var(--gold)}
body .alert-danger{border-left-color:var(--hot)}

/* ---------- 其他 ---------- */
body .progress{background:rgba(255,255,255,.07)}
body .progress-bar{background:var(--grad)}
body .progress-bar.bg-warning{background:linear-gradient(90deg,var(--gold),#FFE09A)!important}
body .text-muted{color:var(--txt-3)!important}
body a{color:var(--g3)}
body hr{border-color:var(--edge); opacity:1}
body code{background:rgba(193,58,255,.14); color:var(--g1)}
body .text-primary{color:var(--g3)!important}
body .text-success{color:var(--live)!important}
body .text-warning{color:var(--gold)!important}
body .text-danger{color:var(--hot)!important}

/* 推薦樹 */
body .node-row{background:var(--panel)!important; border-color:var(--edge)!important; border-radius:0}
body .gen-badge{background:rgba(193,58,255,.18)!important; color:var(--g1)!important; border:none}
body .ref-tree ul{border-left-color:var(--edge)!important}

/* 登入頁：唔要斜切（會切走圓角睇落怪） */
body > .container.py-5 .card{clip-path:none}

/* ---------- 推薦樹：國籍章 ---------- */
.ctry{
  font-family:ui-monospace,Menlo,monospace; font-size:.64rem; font-weight:800;
  letter-spacing:.06em; padding:.12rem .38rem; margin-left:.3rem;
  background:rgba(58,160,255,.16); color:var(--g3);
  clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%);
}
/* 受限管轄區：紅色 + 邊框，一眼睇到條線喺呢度斷 */
.ctry-x{
  background:rgba(255,77,141,.18); color:var(--hot);
  border:1px solid rgba(255,77,141,.45); cursor:help;
}

/* ==========================================================================
   頭像 / Avatars — 斜切外框 + 階級光環
   冇上載圖片就用漸變底 + 首字，唔會出現爛圖 icon。
   ========================================================================== */
.av{
  display:inline-flex; align-items:center; justify-content:center;
  flex:none; overflow:hidden; position:relative;
  background:linear-gradient(150deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge);
  clip-path:polygon(12% 0,100% 0,88% 100%,0 100%);
  font-family:ui-monospace,Menlo,monospace; font-weight:900; color:#fff;
  line-height:1; user-select:none;
}
.av img{width:100%; height:100%; object-fit:cover; display:block}
/* 冇圖：用名嘅 hash 揀色相，同一個人永遠同一隻色 */
.av-ph{
  background:linear-gradient(150deg,
    hsl(var(--av-h) 70% 46%), hsl(calc(var(--av-h) + 42) 72% 34%));
  border-color:transparent;
}
.av-xs{width:26px;  height:26px;  font-size:.72rem}
.av-sm{width:34px;  height:34px;  font-size:.9rem}
.av-md{width:52px;  height:52px;  font-size:1.25rem}
.av-lg{width:88px;  height:88px;  font-size:2.1rem}
.av-xl{width:116px; height:116px; font-size:2.8rem}

/* 階級光環：同 HUD 嘅 I / II / III 一致 */
.av-t1{box-shadow:0 0 0 1px var(--edge-hi)}
.av-t2{box-shadow:0 0 0 1px rgba(193,58,255,.6), 0 0 18px rgba(193,58,255,.35)}
.av-t3{box-shadow:0 0 0 1px rgba(255,194,74,.7), 0 0 22px var(--gold-glow)}

/* 上載區 */
.av-edit{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.av-edit .av{cursor:pointer; transition:filter .15s ease}
.av-edit .av:hover{filter:brightness(1.15)}
.av-file{display:none}

/* HUD 稱號列用頭像取代純文字階級章 */
.hud-rank.has-av{background:none; box-shadow:none; clip-path:none; width:auto; height:auto}

/* 排行榜 */
.pod .av{margin:0 auto .55rem}
.lb-row .av{margin-right:.1rem}

/* 推薦樹節點 */
.node-row .av{margin-right:.15rem}

/* 語言下拉（會員端）*/
body .navbar .lang-pick{
  background:rgba(255,255,255,.07); border-color:var(--edge-hi); color:var(--txt-2);
}
body .navbar .lang-pick option{background:var(--panel); color:var(--txt)}

/* ==========================================================================
   排行榜稱號 / Leaderboard tiers
   五個等級各有專屬質感：至尊金光、王者亮金、鑽石冰藍、白金銀、黃金暗金。
   ========================================================================== */
.tier{
  display:inline-block; font-size:.6rem; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; padding:.16rem .5rem; white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%);
  border:1px solid transparent;
}
.t-sov{                                   /* #1 至尊 */
  background:linear-gradient(100deg,#FFE9A8,#FFC24A 55%,#E09B12);
  color:#3A2500; box-shadow:0 0 16px var(--gold-glow);
}
.t-cham{                                  /* #2–3 王者 */
  background:rgba(255,194,74,.18); color:var(--gold); border-color:rgba(255,194,74,.5);
}
.t-dia{                                   /* #4–10 鑽石 */
  background:rgba(53,210,196,.16); color:var(--live); border-color:rgba(53,210,196,.45);
}
.t-plat{                                  /* #11–20 白金 */
  background:rgba(214,222,240,.14); color:#D6DEF0; border-color:rgba(214,222,240,.35);
}
.t-gold{                                  /* #21–30 黃金 */
  background:rgba(193,150,74,.16); color:#D6A757; border-color:rgba(193,150,74,.4);
}
.t-chal{                                  /* 31+ 挑戰者 */
  background:rgba(124,107,174,.16); color:var(--txt-3); border-color:var(--edge);
}
.pod .tier{margin-bottom:.4rem}

/* 稱號說明 */
.tier-legend{
  display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--edge);
  font-size:.72rem;
}
.tier-legend .k{
  color:var(--txt-3); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  margin-right:.35rem;
}
.tier-legend .band{color:var(--txt-3); font-family:ui-monospace,Menlo,monospace; margin-right:.7rem}

/* 頒獎台國家全名 */
.pod .ctry-full{
  font-size:.68rem; color:var(--txt-3); margin-top:.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── MiniMax 生成嘅標誌圖 ──
   256px PNG 已經做咗圓形柔邊，所以直接擺落深色面板都唔會見到方框。 */
.esp-title{ display:flex; align-items:center; gap:.7rem; }
.esp-title .esp-h{ margin-top:0 !important; }
.esp-icon{
  width:56px; height:56px; flex:0 0 56px;
  filter:drop-shadow(0 0 10px rgba(139,92,246,.55));
}
.jackpot{ position:relative; }
.jk-icon{
  position:absolute; top:50%; right:1.1rem; transform:translateY(-50%);
  width:96px; height:96px; pointer-events:none;
  filter:drop-shadow(0 0 14px rgba(250,204,21,.45));
  animation:jk-breathe 3.2s ease-in-out infinite;
}
@keyframes jk-breathe{
  0%,100%{ transform:translateY(-50%) scale(1);    opacity:.92 }
  50%    { transform:translateY(-50%) scale(1.06); opacity:1   }
}
/* 窄螢幕收細，唔好壓住金額 */
@media (max-width:560px){
  .jk-icon{ width:52px; height:52px; right:.6rem; opacity:.55 }
  .esp-icon{ width:44px; height:44px; flex-basis:44px }
}
/* 減少動態偏好：唔郁 */
@media (prefers-reduced-motion:reduce){ .jk-icon{ animation:none } }

/* ==========================================================================
   門面 — 首頁 + 登入 / Landing + auth
   同會員端一套視覺語言。呢兩版係未登入嘅人第一眼睇到嘅嘢，
   所以擺明車馬講返個方案：每手幾錢、幾多代、點樣分。
   ========================================================================== */

/* 整版深色。呢兩版唔會載 Bootstrap 嘅 .bg-light，所以直接寫喺 body。 */
body.land-body{
  margin:0; min-height:100vh;
  background:
    radial-gradient(1100px 560px at 12% -8%,  rgba(193,58,255,.22), transparent 60%),
    radial-gradient(900px  480px at 92% 4%,   rgba(58,160,255,.18), transparent 58%),
    radial-gradient(700px  420px at 50% 108%, rgba(107,75,255,.16), transparent 62%),
    linear-gradient(180deg,#120B33,#0A0620 70%);
  color:#EDE9FF;
  font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC","Noto Sans KR",
              "Noto Sans JP","Noto Sans Thai",sans-serif;
}
.land{
  --void:#0A0620; --panel:#1A1145; --panel-2:#221657;
  --edge:#31215E; --edge-hi:#4A2F8C;
  --txt:#EDE9FF; --txt-2:#A99BD6; --txt-3:#9080C4;
  --g1:#C13AFF; --g2:#6B4BFF; --g3:#3AA0FF;
  --grad:linear-gradient(100deg,var(--g1),var(--g2) 55%,var(--g3));
  --gold:#FFC24A;
  max-width:1080px; margin:0 auto; padding:1.6rem 1.1rem 3.5rem;
}

/* ---------- 頂列 ---------- */
.land-top{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:3.2rem}
.land-brand{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.02em}
.land-brand .dot{
  width:11px; height:11px; border-radius:3px; background:var(--grad);
  box-shadow:0 0 14px rgba(193,58,255,.7);
}
.land select.form-select{
  background:rgba(26,17,69,.85); color:var(--txt);
  border:1px solid var(--edge); border-radius:7px; width:auto;
}

/* ---------- 主視覺 ---------- */
.land-hero{text-align:center; margin-bottom:3rem}
.land-eyebrow{
  display:inline-block; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:800; color:var(--g1); border:1px solid var(--edge-hi);
  border-radius:99px; padding:.32rem .95rem; margin-bottom:1.3rem;
}
.land-h1{
  font-size:clamp(1.85rem,5.2vw,3.15rem); font-weight:900; line-height:1.18;
  margin:0 0 1rem; letter-spacing:-.01em;
}
.land-h1 em{
  font-style:normal;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.land-sub{
  font-size:clamp(.92rem,1.9vw,1.06rem); color:var(--txt-2);
  max-width:640px; margin:0 auto 2rem; line-height:1.75;
}

/* ---------- CTA ---------- */
.land-cta{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.btn-hero{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:1rem; font-weight:800; text-decoration:none;
  padding:.92rem 2.1rem; border-radius:8px; border:1px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.btn-hero-1{background:var(--grad); color:#fff; box-shadow:0 0 26px rgba(193,58,255,.42)}
.btn-hero-1:hover{color:#fff; transform:translateY(-2px); box-shadow:0 0 38px rgba(193,58,255,.6)}
.btn-hero-2{background:rgba(26,17,69,.7); color:var(--txt-2); border-color:var(--edge)}
.btn-hero-2:hover{color:var(--txt); border-color:var(--edge-hi); transform:translateY(-2px)}
.land-cta-hint{font-size:.78rem; color:var(--txt-3); margin-top:1.1rem}

/* ---------- 數字帶 ---------- */
.land-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;
  background:var(--edge); border:1px solid var(--edge);
  border-radius:10px; overflow:hidden; margin:0 0 3rem;
}
.land-stat{background:linear-gradient(180deg,var(--panel),#150E3A); padding:1.15rem .8rem; text-align:center}
.land-stat .v{
  font-size:1.5rem; font-weight:900; font-family:ui-monospace,Menlo,monospace;
  color:var(--gold); letter-spacing:-.02em;
}
.land-stat .k{
  font-size:.63rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-3); font-weight:800; margin-top:.3rem;
}

/* ---------- 賣點卡 ---------- */
.land-feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin-bottom:3rem}
.land-feat{
  background:linear-gradient(180deg,var(--panel),#150E3A);
  border:1px solid var(--edge); border-radius:10px; padding:1.5rem 1.35rem;
  position:relative; overflow:hidden;
}
.land-feat::before{content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--grad)}
.land-feat .n{
  font-size:.66rem; letter-spacing:.16em; font-weight:800; color:var(--g1);
  font-family:ui-monospace,Menlo,monospace;
}
.land-feat h3{font-size:1rem; font-weight:800; margin:.5rem 0 .55rem}
.land-feat p{font-size:.82rem; color:var(--txt-2); line-height:1.7; margin:0}
.land-feat b{color:var(--gold)}

/* ---------- 代數階梯 ---------- */
.land-ladder{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:1rem}
.land-rung{
  min-width:62px; padding:.6rem .3rem; text-align:center;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge); border-radius:6px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.land-rung .g{font-size:.6rem; letter-spacing:.1em; color:var(--txt-3); font-weight:800}
.land-rung .a{
  font-size:.88rem; font-weight:800; color:var(--gold);
  font-family:ui-monospace,Menlo,monospace; margin-top:.15rem;
}
.land-rung.is-bonus{border-color:rgba(255,194,74,.45); box-shadow:0 0 16px rgba(255,194,74,.18)}

.land-note{
  font-size:.76rem; color:var(--txt-3); text-align:center; line-height:1.8;
  border-top:1px solid var(--edge); padding-top:1.5rem; margin-top:2.5rem;
}

/* ---------- 登入 / 註冊卡 ---------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.2rem}
.auth{width:100%; max-width:410px}
.auth-card{
  background:linear-gradient(180deg,var(--panel),#150E3A);
  border:1px solid var(--edge); border-radius:12px;
  padding:2rem 1.75rem; position:relative; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.auth-card::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad)}
.auth-h{font-size:1.3rem; font-weight:900; margin:0 0 .4rem; text-align:center}
.auth-sub{font-size:.8rem; color:var(--txt-2); text-align:center; margin-bottom:1.6rem; line-height:1.65}
.auth-lbl{
  display:block; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:800; color:var(--txt-3); margin-bottom:.4rem;
}
.auth-in{
  width:100%; background:rgba(10,6,32,.75); color:var(--txt);
  border:1px solid var(--edge); border-radius:7px;
  padding:.72rem .85rem; font-size:.95rem; margin-bottom:1.1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.auth-in::placeholder{color:#6B5B9E}
.auth-in:focus{
  outline:none; border-color:var(--g2); box-shadow:0 0 0 3px rgba(107,75,255,.22);
}
.auth-btn{
  width:100%; border:0; color:#fff; font-weight:800; font-size:.98rem;
  padding:.85rem 1rem; border-radius:8px; background:var(--grad); cursor:pointer;
  box-shadow:0 0 24px rgba(193,58,255,.38);
  clip-path:polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  transition:transform .16s ease, box-shadow .16s ease;
}
.auth-btn:hover{transform:translateY(-1px); box-shadow:0 0 34px rgba(193,58,255,.55)}
.auth-err{
  background:rgba(255,77,141,.12); border:1px solid rgba(255,77,141,.4);
  color:#FFB3CD; font-size:.83rem; border-radius:7px; padding:.65rem .8rem; margin-bottom:1.1rem;
}
.auth-foot{text-align:center; font-size:.76rem; color:var(--txt-3); margin-top:1.4rem; line-height:1.8}
.auth-foot a{color:var(--g1); text-decoration:none}
.auth-foot a:hover{text-decoration:underline}
.auth-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem}

@media (max-width:576px){
  .land{padding-top:1.1rem}
  .land-top{margin-bottom:2.2rem}
  .btn-hero{width:100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .btn-hero:hover,.auth-btn:hover{transform:none}
}

/* ---------- 三步流程（真係一個次序，所以先用編號）---------- */
.land-h2{
  font-size:1.15rem; font-weight:800; text-align:center; margin:0 0 1.5rem;
  letter-spacing:.01em;
}
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1rem; margin-bottom:3rem; counter-reset:step;
}
.step{
  background:linear-gradient(180deg,var(--panel),#150E3A);
  border:1px solid var(--edge); border-radius:10px; padding:1.5rem 1.35rem;
  position:relative;
}
.step .num{
  width:30px; height:30px; display:grid; place-items:center; margin-bottom:.9rem;
  background:var(--grad); color:#fff; font-weight:800; font-size:.86rem;
  font-family:ui-monospace,Menlo,monospace;
  clip-path:polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.step h3{font-size:.98rem; font-weight:800; margin:0 0 .5rem}
.step p{font-size:.82rem; color:var(--txt-2); line-height:1.75; margin:0}
/* 步與步之間嘅箭嘴，窄螢幕唔出 */
.step:not(:last-child)::after{
  content:'→'; position:absolute; right:-.72rem; top:2.1rem;
  color:var(--edge-hi); font-size:1.05rem; z-index:1;
}
@media (max-width:719px){.step::after{display:none!important}}

/* ---------- 要做 / 唔使做 ---------- */
.work{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1rem; margin-bottom:3rem}
.work-col{
  border:1px solid var(--edge); border-radius:10px; padding:1.3rem 1.35rem;
  background:linear-gradient(180deg,var(--panel),#150E3A);
}
.work-col.yes{border-color:rgba(37,229,192,.35)}
.work-h{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  margin-bottom:.9rem;
}
.work-col.yes .work-h{color:var(--live)}
.work-col.no  .work-h{color:var(--txt-3)}
.work-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.work-col li{
  font-size:.84rem; line-height:1.65; display:grid;
  grid-template-columns:1.15rem 1fr; gap:.5rem; align-items:start;
}
.work-col.yes li{color:var(--txt)}
.work-col.no  li{color:var(--txt-3)}
.work-col li::before{font-weight:800; line-height:1.5}
.work-col.yes li::before{content:'✓'; color:var(--live)}
.work-col.no  li::before{content:'✕'; color:var(--lock)}

/* ---------- 風險聲明：唔收埋，畀人一眼睇到 ---------- */
.land-risk{
  border:1px solid rgba(255,194,74,.3); border-left:3px solid var(--gold);
  background:rgba(255,194,74,.05); border-radius:8px;
  padding:1rem 1.2rem; margin:0 0 1.6rem;
  font-size:.8rem; line-height:1.8; color:var(--txt-2);
}

/* ---------- 「兩個數字」：3 同 8 就係全部要求 ---------- */
.twonum{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem; margin-bottom:1rem;
}
.numcard{
  background:linear-gradient(180deg,var(--panel),#150E3A);
  border:1px solid var(--edge); border-radius:10px;
  padding:1.6rem 1.4rem; display:flex; align-items:flex-start; gap:1.2rem;
  position:relative; overflow:hidden;
}
.numcard::before{content:''; position:absolute; inset:0 auto 0 0; width:3px; background:var(--grad)}
.numcard .big{
  font-size:3.6rem; font-weight:900; line-height:.9; letter-spacing:-.04em;
  font-family:ui-monospace,Menlo,monospace;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  flex:0 0 auto;
}
.numcard .txt h3{font-size:.95rem; font-weight:800; margin:.25rem 0 .4rem}
.numcard .txt p{font-size:.8rem; color:var(--txt-2); line-height:1.7; margin:0}
.numcard.is-gold::before{background:linear-gradient(180deg,var(--gold),#E5A100)}
.numcard.is-gold .big{
  background:linear-gradient(140deg,#FFD86B,var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 被動：收入同工時脫鈎 ---------- */
.passive{
  border:1px solid var(--edge); border-radius:10px;
  background:
    radial-gradient(600px 200px at 15% 0%, rgba(193,58,255,.14), transparent 65%),
    linear-gradient(180deg,var(--panel),#150E3A);
  padding:2rem 1.6rem; margin-bottom:3rem; text-align:center;
}
.passive .pq{
  font-size:clamp(1.05rem,2.6vw,1.5rem); font-weight:800; line-height:1.55;
  margin:0 0 .9rem; letter-spacing:-.005em;
}
.passive .pq em{
  font-style:normal;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.passive .pd{font-size:.84rem; color:var(--txt-2); line-height:1.8; margin:0 auto; max-width:52ch}
.passive .clock{
  display:inline-flex; gap:.4rem; margin-bottom:1.2rem;
  font-family:ui-monospace,Menlo,monospace; font-size:.66rem; letter-spacing:.14em;
  color:var(--txt-3); font-weight:800;
}
.passive .clock b{color:var(--live); font-weight:800}

/* ---------- 圖示卡（點解揀黃金 / 三件事）---------- */
.icards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; margin-bottom:1rem}
.icard{
  background:linear-gradient(180deg,var(--panel),#150E3A);
  border:1px solid var(--edge); border-radius:10px; padding:1.5rem 1.35rem;
}
.icard .ic{font-size:1.7rem; line-height:1; margin-bottom:.85rem; display:block}
.icard h3{font-size:.96rem; font-weight:800; margin:0 0 .5rem}
.icard p{font-size:.82rem; color:var(--txt-2); line-height:1.75; margin:0}

.principle{
  border:1px solid var(--edge); border-left:3px solid var(--live);
  background:rgba(37,229,192,.06); border-radius:8px;
  padding:.85rem 1.1rem; margin-bottom:3rem;
  font-size:.82rem; color:var(--txt-2); line-height:1.75;
}

/* ---------- 資金：四格 + 收窄嘅結論句 ---------- */
.fundgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px;
  background:var(--edge); border:1px solid var(--edge); border-radius:10px;
  overflow:hidden; margin-bottom:1rem;
}
.fundgrid > div{background:linear-gradient(180deg,var(--panel),#150E3A); padding:1.35rem 1.25rem}
.fundgrid h3{
  font-size:.85rem; font-weight:800; margin:0 0 .5rem;
  display:flex; align-items:center; gap:.45rem;
}
.fundgrid h3::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--live); box-shadow:0 0 10px rgba(37,229,192,.7); flex:0 0 auto;
}
.fundgrid p{font-size:.79rem; color:var(--txt-2); line-height:1.75; margin:0}
.fund-note{
  text-align:center; font-size:.88rem; font-weight:700; color:var(--txt);
  margin-bottom:3rem; line-height:1.8;
}

/* ---------- 返佣示範計算機 ---------- */
.calc{
  border:1px solid var(--edge); border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),#150E3A); margin-bottom:1rem;
}
.calc-in{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.4rem;
         padding:1.6rem 1.5rem; border-bottom:1px solid var(--edge)}
.calc-f label{
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-3); font-weight:800; margin-bottom:.7rem;
}
.calc-f label b{
  font-size:1.15rem; letter-spacing:0; text-transform:none; color:var(--txt);
  font-family:ui-monospace,Menlo,monospace;
}
.calc-f input[type=range]{
  width:100%; appearance:none; height:5px; border-radius:99px; background:var(--edge);
  outline:none; cursor:pointer;
}
.calc-f input[type=range]::-webkit-slider-thumb{
  appearance:none; width:19px; height:19px; border-radius:50%;
  background:var(--grad); box-shadow:0 0 12px rgba(193,58,255,.55); cursor:pointer;
}
.calc-f input[type=range]::-moz-range-thumb{
  width:19px; height:19px; border:0; border-radius:50%;
  background:#8E44FF; box-shadow:0 0 12px rgba(193,58,255,.55); cursor:pointer;
}
.calc-f input[type=range]:focus-visible{outline:2px solid var(--g1); outline-offset:3px}

.calc-out{padding:1.6rem 1.5rem; text-align:center}
.calc-out .k{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-3); font-weight:800;
}
.calc-out .v{
  font-size:clamp(2.1rem,6vw,3.1rem); font-weight:900; line-height:1.1; margin:.35rem 0 .2rem;
  font-family:ui-monospace,Menlo,monospace; letter-spacing:-.03em;
  color:var(--gold); text-shadow:0 0 34px var(--gold-glow);
}
.calc-out .sub{font-size:.8rem; color:var(--txt-2); line-height:1.7}
.calc-lock{
  display:inline-block; margin-top:.9rem; font-size:.74rem; font-weight:800;
  padding:.3rem .8rem; border-radius:99px;
}
.calc-lock.on{background:rgba(37,229,192,.15); color:var(--live); border:1px solid rgba(37,229,192,.4)}
.calc-lock.off{background:rgba(90,75,135,.22); color:var(--txt-3); border:1px solid var(--edge)}
.calc-note{font-size:.78rem; color:var(--txt-3); line-height:1.8; margin-bottom:3rem}

/* ---------- 收尾 CTA ---------- */
.endcta{
  text-align:center; border:1px solid var(--edge); border-radius:10px;
  background:
    radial-gradient(620px 220px at 50% 0%, rgba(193,58,255,.18), transparent 65%),
    linear-gradient(180deg,var(--panel),#150E3A);
  padding:2.4rem 1.5rem; margin-bottom:2.4rem;
}
.endcta h2{font-size:clamp(1.2rem,3.2vw,1.7rem); font-weight:900; margin:0 0 .6rem; letter-spacing:-.01em}
.endcta p{font-size:.85rem; color:var(--txt-2); margin:0 auto 1.5rem; max-width:46ch; line-height:1.75}
.calc-derived{
  font-size:.74rem; color:var(--live); font-weight:700; margin-top:.6rem;
  font-family:ui-monospace,Menlo,monospace;
}

/* ---------- 滿員推算表 ---------- */
.mx-tabs{display:flex; gap:.5rem; justify-content:center; margin-bottom:1.1rem; flex-wrap:wrap}
.mx-tab{
  border:1px solid var(--edge); background:rgba(26,17,69,.7); color:var(--txt-2);
  font-size:.84rem; font-weight:800; padding:.6rem 1.3rem; border-radius:7px; cursor:pointer;
  clip-path:polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  transition:color .15s ease, border-color .15s ease;
}
.mx-tab:hover{color:var(--txt); border-color:var(--edge-hi)}
.mx-tab.on{background:var(--grad); color:#fff; border-color:transparent;
           box-shadow:0 0 18px rgba(193,58,255,.38)}
.mx-tab:focus-visible{outline:2px solid var(--g1); outline-offset:2px}
.mx-hint{
  text-align:center; font-size:.76rem; color:var(--live); font-weight:700;
  margin-bottom:1.1rem; min-height:1.2em;
}
.mx-wrap{overflow-x:auto; border:1px solid var(--edge); border-radius:10px; margin-bottom:.9rem}
table.mx{
  width:100%; border-collapse:collapse; font-size:.82rem;
  font-variant-numeric:tabular-nums; font-family:ui-monospace,Menlo,monospace;
}
table.mx th{
  background:var(--panel-2); color:var(--txt-3); font-weight:800; text-align:right;
  padding:.6rem .9rem; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
}
table.mx th:first-child{text-align:left}
table.mx td{
  text-align:right; padding:.5rem .9rem; color:var(--txt-2);
  border-top:1px solid var(--edge); white-space:nowrap;
}
table.mx td:first-child{text-align:left; color:var(--txt); font-weight:700}
table.mx td.amt{color:var(--gold); font-weight:700}
table.mx tr.tot td{
  border-top:2px solid var(--edge-hi); background:rgba(34,22,87,.6);
  color:var(--txt); font-weight:800; font-size:.9rem;
}
table.mx tr.tot td.amt{color:var(--gold); text-shadow:0 0 20px var(--gold-glow)}
.mx-team{
  text-align:center; font-size:.82rem; color:var(--txt-2); font-weight:700;
  font-family:ui-monospace,Menlo,monospace; margin-bottom:1rem;
}
.mx-real{
  border:1px solid rgba(255,194,74,.34); border-left:3px solid var(--gold);
  background:rgba(255,194,74,.06); border-radius:8px;
  padding:1rem 1.2rem; margin-bottom:1rem;
  font-size:.79rem; line-height:1.85; color:var(--txt-2);
}
table.mx td.pct{color:var(--txt-3); font-size:.76rem}
table.mx td.real{color:var(--live); font-weight:700}
table.mx tr.tot td.real{color:var(--live); text-shadow:0 0 18px rgba(37,229,192,.45)}