/* css/04-features.css — phase progress, get funded, settings, acca, live buttons, live match, ref & earn */
/* ===================== PHASE PROGRESS (profile menu) ==================== */
.ph-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin:12px 0}
.ph-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.ph-head b{font-size:13px}
.ph-forfeit{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--neg);
  border:1px solid rgba(239,77,90,.35);border-radius:6px;padding:3px 8px;transition:.15s}
.ph-forfeit:hover{background:rgba(239,77,90,.14);border-color:var(--neg)}
.ph-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--txt-3);margin:9px 0 4px}
.ph-row b{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums}
.ph-bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.ph-bar i{display:block;height:100%;border-radius:4px;transition:width .3s;
  background:linear-gradient(90deg,var(--green-2),var(--gold))}
.ph-seg{display:flex;gap:3px}
.ph-seg i{flex:1;height:5px;border-radius:2px;background:var(--line)}
.ph-seg i.on{background:var(--green-2)}
.ph-empty{font-size:12px;color:var(--txt-3);text-align:center;padding:4px 0 10px}
.modal-btn.ghost{background:var(--panel-3);color:var(--txt);border:1px solid var(--line)}
.modal-btn.danger{background:linear-gradient(180deg,#ef4d5a,#c9303c)}
.modal-row{display:flex;gap:10px;margin-top:18px}

/* ========================= GET FUNDED (phases) ========================= */
.modal.wide{max-width:660px}
.gf-table{width:100%;border-collapse:collapse;font-size:12.5px;margin:14px 0}
.gf-table th{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt-3);
  font-weight:700;text-align:center;padding:0 6px 8px}
.gf-table th:first-child{text-align:left}
.gf-table td{text-align:center;padding:8px 6px;border-top:1px solid var(--line);font-weight:700;
  font-variant-numeric:tabular-nums}
.gf-table td.rl{text-align:left;color:var(--txt-2);font-weight:500}
.gf-table td em{display:block;font-style:normal;font-size:10.5px;color:var(--txt-3);font-weight:600;margin-top:1px}
.gf-table tr td:last-child{color:var(--green-2)}
.gf-note{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  font-size:12px;color:var(--txt-2);line-height:1.6;margin-bottom:10px}
.gf-note b{color:var(--txt)}
.amt-grid.four{grid-template-columns:repeat(4,1fr)}
.gf-launch{display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;padding:4px 11px;border-radius:20px;
  border:1px solid rgba(34,160,109,.4);background:rgba(34,160,109,.1);color:var(--green-2);font-size:11px;font-weight:700}
.gf-launch .dot{width:5px;height:5px;border-radius:50%;background:var(--green-2);flex:none}
.amt-opt{position:relative}
.amt-opt .pop{position:absolute;top:-7px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--gold);color:#1a1a1a;font-size:8.5px;font-weight:800;letter-spacing:.3px;
  padding:2px 6px;border-radius:8px;text-transform:uppercase}
.amt-opt .sz{font-size:15px;font-weight:800}
.amt-opt .fee{display:flex;align-items:baseline;justify-content:center;gap:5px;margin-top:6px}
.amt-opt .fee b{font-size:17px;font-weight:800;color:var(--green-2)}
.amt-opt .fee s{font-size:11px;color:var(--txt-2);font-weight:600}
.amt-opt .off{font-size:9px;font-weight:800;color:var(--green-2);background:rgba(34,160,109,.14);
  border-radius:4px;padding:1px 5px;display:inline-block;margin-top:5px}
/* light theme: the mid green reads at ~2.7:1 on its own tint — go darker */
html[data-theme="light"] .amt-opt .fee b,
html[data-theme="light"] .amt-opt .off,
html[data-theme="light"] .amt-opt.sel,
html[data-theme="light"] .gf-launch{color:#0b6e46}

/* ========================== SITE SETTINGS ============================= */
.set-row{padding:14px 0;border-top:1px solid var(--line)}
.set-row:first-child{border-top:none;padding-top:4px}
.set-lbl{font-size:13px;font-weight:700;margin-bottom:3px}
.set-hint{font-size:11.5px;color:var(--txt-3);margin-bottom:9px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:64px;background:var(--panel);border:1.5px solid var(--line);border-radius:8px;
  padding:9px 6px;font-size:12.5px;font-weight:600;color:var(--txt-2);transition:.15s}
.seg button:hover{border-color:var(--green-2)}
.seg button.on{border-color:var(--green-2);background:rgba(34,160,109,.12);color:var(--green-2)}

/* ============================ ACCA BONUS ============================== */
.acca{margin-top:9px;border-top:1px solid var(--line);padding-top:9px}
.acca-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700}
.acca-row .pct{color:var(--gold)}
.acca-hint{font-size:10.5px;color:var(--txt-3);margin-top:3px;display:flex;align-items:center;gap:5px}
.acca-i{width:14px;height:14px;border-radius:50%;border:1px solid var(--line-2);color:var(--txt-3);
  font-size:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.acca-i:hover{border-color:var(--gold);color:var(--gold)}
.acca-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:12px}
.acca-tbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt-3);padding:0 0 8px;text-align:left}
.acca-tbl td{padding:6px 0;border-top:1px solid var(--line);font-weight:700;font-variant-numeric:tabular-nums}
.acca-tbl td:last-child{text-align:right;color:var(--gold)}
.acca-tbl tr.on td{color:var(--green-2)}
.acca-tbl tr.on td:last-child{color:var(--green-2)}

/* ================= LIVE ROW BUTTONS (graphic + stats) ================= */
.col-head.lv,.match-main.lv{grid-template-columns:1fr 32px repeat(3,72px) 26px 26px}
.col-head.lv.asian2,.match-main.lv.asian2{grid-template-columns:1fr 32px 122px 122px 26px 26px}
.col-head.lv.stk3,.match-main.lv.stk3{grid-template-columns:1fr 32px repeat(3,86px) 26px 26px}
/* 1st half — 1 X 2 as single cells, then a stacked Over/Under column */
.col-head.lv.h4,.match-main.lv.h4{grid-template-columns:1fr 32px repeat(3,58px) 86px 26px 26px}
.col-head.lv.h4 span:nth-child(6){text-align:center;font-size:10px}
/* The row's first cell carries min-width:0, so its 1fr can shrink past the
   label's min-content. The head's must shrink identically or the two grids
   resolve 1fr differently and every odds column drifts out of line. */
.col-head.lv span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-gfx{display:flex;align-items:center;justify-content:center;color:var(--txt-3);
  border-radius:5px;padding:3px;transition:.15s;cursor:pointer}
.match-gfx:hover{color:var(--txt);background:var(--panel-3)}
.match-gfx.on{color:var(--green-2);background:rgba(34,160,109,.14)}
.match-gfx .ic-svg{width:15px;height:15px}
.qs-btn{display:inline-flex;align-items:center;justify-content:center;color:var(--txt-3);
  border-radius:4px;padding:1px 3px;transition:.15s;cursor:pointer}
.qs-btn:hover,.qs-btn.on{color:var(--green-2);background:rgba(34,160,109,.14)}
.qs-btn .ic-svg{width:12px;height:12px}
.qs-pop{position:absolute;z-index:120;background:var(--panel-2);border:1px solid var(--line-2);
  border-radius:9px;padding:8px 10px;box-shadow:0 10px 30px var(--shadow)}
.qs-pop table{border-collapse:collapse;font-size:11.5px;font-variant-numeric:tabular-nums}
.qs-pop th{color:var(--txt-3);font-size:10px;font-weight:700;padding:0 7px 5px;text-align:center}
.qs-pop td{padding:3px 7px;text-align:center;font-weight:700}
.qs-pop td.nm{padding-right:9px}
.qs-pop .tail{position:absolute;bottom:-5px;left:22px;width:9px;height:9px;background:var(--panel-2);
  border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);transform:rotate(45deg)}
.qs-pop .cd{display:inline-block;width:7px;height:10px;border-radius:1px;vertical-align:middle}
.qs-pop .cd.y{background:var(--gold)} .qs-pop .cd.r{background:var(--neg)}
@media(max-width:700px){
  .col-head.lv,.match-main.lv{grid-template-columns:1fr 22px repeat(3,50px) 18px 16px}
  .col-head.lv.asian2,.match-main.lv.asian2{grid-template-columns:1fr 20px 1fr 1fr 18px 14px}
  .col-head.lv.stk3,.match-main.lv.stk3{grid-template-columns:1fr 22px repeat(3,62px) 18px 16px}
  .col-head.lv.h4,.match-main.lv.h4{grid-template-columns:1fr 20px repeat(3,38px) 56px 18px 16px}
}

/* =========================== LIVE MATCH PAGE ========================== */
.mp-head{display:flex;align-items:center;gap:12px;padding:4px 0 14px}
.mp-back{width:32px;height:32px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);
  color:var(--txt-2);font-size:15px;flex:none;transition:.15s}
.mp-back:hover{background:var(--panel-3);color:var(--txt)}
.mp-titles{flex:1;min-width:0;text-align:center}
.mp-comp{font-size:11.5px;color:var(--txt-3);font-weight:600;display:flex;align-items:center;gap:5px;justify-content:center}
.mp-titles h1{font-size:19px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-clock{display:flex;align-items:center;gap:5px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:6px;padding:4px 9px;font-size:12px;font-weight:700;color:var(--gold);flex:none}
.mp-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:12px}
.mp-tabs::-webkit-scrollbar{display:none}
.mp-tab{padding:7px 13px;border-radius:16px;font-size:12.5px;font-weight:600;color:var(--txt-2);
  background:var(--panel-2);border:1px solid var(--line);white-space:nowrap;transition:.15s}
.mp-tab:hover{color:var(--txt)}
.mp-tab.active{background:var(--green);border-color:var(--green);color:#fff}
.mp-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r,10px);margin-bottom:9px;overflow:hidden}
.mp-ph{display:flex;align-items:center;gap:8px;padding:11px 13px;cursor:pointer;background:var(--panel-2)}
.mp-ph h4{flex:1;font-size:13px;font-weight:700}
.mp-ph .bb{font-size:9px;font-weight:800;color:#04342c;background:var(--green-2);border-radius:3px;padding:1px 4px}
.mp-ph .arrow{color:var(--txt-3);transform:rotate(90deg);transition:.2s;font-size:13px}
.mp-panel.closed .mp-ph .arrow{transform:rotate(0)}
.mp-panel.closed .mp-pb{display:none}
.mp-pb{padding:11px 13px}
.ou-head{display:grid;grid-template-columns:70px 1fr 1fr;gap:8px;font-size:10.5px;color:var(--txt-3);
  font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding-bottom:7px;text-align:center}
.ou-row{display:grid;grid-template-columns:70px 1fr 1fr;gap:8px;align-items:center;padding:4px 0}
.ou-row .ln{font-size:12.5px;font-weight:700;color:var(--txt-2);text-align:center;font-variant-numeric:tabular-nums}

/* ============================= REF & EARN ============================= */
.ref-wrap{max-width:900px;margin:0 auto;padding:26px 20px 60px}
.ref-hero h1{font-size:26px;font-weight:800}
.ref-hero p{color:var(--txt-2);font-size:13.5px;margin-top:6px;line-height:1.6}
.ref-link{display:flex;gap:8px;margin:18px 0 22px}
.ref-link input{flex:1;background:var(--input);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;color:var(--txt);font-size:13px}
.ref-link button{background:var(--green);color:#fff;font-weight:700;border-radius:9px;padding:0 18px;font-size:13px}
.ref-link button:hover{filter:brightness(1.1)}
.ref-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.ref-stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px}
.ref-stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--txt-3);font-weight:700}
.ref-stat .v{font-size:20px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.ref-h2{font-size:15px;font-weight:800;margin:0 0 4px}
.ref-sub{font-size:12px;color:var(--txt-3);margin-bottom:12px}
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:26px}
.tier{background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:15px 13px;text-align:center;position:relative}
.tier.on{border-color:var(--gold);background:rgba(253,214,46,.07)}
.tier .nm{font-size:13px;font-weight:800;letter-spacing:.3px}
.tier .rate{font-size:24px;font-weight:800;margin:7px 0 2px;font-variant-numeric:tabular-nums}
.tier .rng{font-size:11px;color:var(--txt-3)}
.tier .badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--gold);color:#1a1a1a;
  font-size:9px;font-weight:800;letter-spacing:.4px;padding:2px 8px;border-radius:10px;text-transform:uppercase}
.tier.bronze .rate{color:#c08457} .tier.silver .rate{color:#9fa8b5}
.tier.gold .rate{color:var(--gold)} .tier.platinum .rate{color:#7fe3d0}
.split{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.split-vals{display:flex;justify-content:space-between;margin-bottom:14px}
.split-val .k{font-size:11px;color:var(--txt-3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.split-val .v{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.split-val.you .v{color:var(--gold)} .split-val.them{text-align:right} .split-val.them .v{color:var(--green-2)}
.split input[type=range]{width:100%;accent-color:var(--green-2);height:5px;cursor:pointer}
.split-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--txt-3);margin-top:5px;font-weight:600}
.split-foot{display:flex;align-items:center;gap:10px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--txt-2);line-height:1.6}
.split-foot button{margin-left:auto;flex:none;font-size:11px;font-weight:700;color:var(--txt-3);
  border:1px solid var(--line);border-radius:7px;padding:5px 10px}
.split-foot button:hover{color:var(--txt);border-color:var(--line-2)}
@media(max-width:760px){.ref-stats,.tier-grid{grid-template-columns:repeat(2,1fr)}}

/* LIGHT THEME: same problem the odds have — gold on white is unreadable
   (the gold tier rate sat on a gold-tinted card at 1:1 contrast, i.e.
   invisible). Reuse the established dark-amber, and darken platinum's teal. */
html[data-theme="light"] .tier.gold .rate,
html[data-theme="light"] .split-val.you .v,
html[data-theme="light"] .mp-clock,
html[data-theme="light"] .acca-row .pct,
html[data-theme="light"] .acca-tbl td:last-child,
html[data-theme="light"] .hl-gold{color:#8a6d00}
.hl-gold{color:var(--gold)} .hl-green{color:var(--green-2)}
html[data-theme="light"] .tier.platinum .rate{color:#12806c}
html[data-theme="light"] .tier.silver .rate{color:#5f6875}
html[data-theme="light"] .ph-bar i{background:linear-gradient(90deg,var(--green-2),#c9a200)}