/* ==========================================================================
   Stake bet analyzer + P&L calculator — redesign on the casino-originals
   system. Loads after crash-tracker.css (.crx tokens, head, cards, KPI tiles,
   tables, note). Adds the analyser layout (azx-) and styles the widgets the
   parent's analyse-stake.js / analyse-stake-pnl.js render (cd-az-coin,
   cd-az-game, cd-az-vol, cd-pnl-banner, is-up / is-down / is-over /
   is-ready), all scoped under .azx.
   ========================================================================== */

/* ---------- head extras ---------- */
.azx .crx-live.azx-local{background:rgba(79,199,234,.1);color:var(--cyan,#4FC7EA);border-color:rgba(79,199,234,.3)}
.azx .crx-live.azx-local i{box-shadow:0 0 0 3px rgba(79,199,234,.18);animation:none}

.azx .is-up{color:var(--up,#2ED47F)}
.azx .is-down{color:#FF7A94}

/* ---------- app shell ---------- */
.azx-app{display:grid;gap:16px;margin-bottom:22px}
.azx-results,.azx-setup{display:grid;gap:16px;min-width:0}

/* ---------- toolbar: view tabs + session actions ---------- */
.azx-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.azx-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--card);border:1px solid var(--hair)}
.azx-tabs a{display:inline-flex;align-items:center;padding:8px 15px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:background .14s,color .14s}
.azx-tabs a:hover{color:#fff;background:var(--card-2)}
.azx-tabs a.is-on{color:#fff;background:var(--grad,linear-gradient(115deg,#4FC7EA,#2F97EE 45%,#7B4DF2));box-shadow:0 6px 16px -8px rgba(79,150,242,.8)}
.azx-tabs a:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:-2px}
.azx-actions{display:flex;gap:8px;flex-wrap:wrap}
.azx .crx-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- drop zones ---------- */
.azx-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:52px 28px;border:1px dashed var(--hair-2);border-radius:var(--rad);background:linear-gradient(180deg,rgba(123,77,242,.07),transparent 60%),var(--card);cursor:pointer;transition:border-color .18s,background .18s}
.azx-drop:hover,.azx-drop.is-over,.azx-drop:focus-visible{border-color:var(--cyan,#4FC7EA);background:linear-gradient(180deg,rgba(79,199,234,.09),transparent 60%),var(--card-2)}
.azx-drop.is-over{border-style:solid}
.azx-drop-icon{width:52px;height:52px;color:var(--hi,#A78BFA)}
.azx-drop-icon svg{width:52px;height:52px}
.azx-drop strong{font-family:var(--font-display,"Sora","Inter",sans-serif);font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff}
.azx-drop p{max-width:54ch;color:var(--ink-3);font-size:14px;line-height:1.6}
.azx-drop-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:2px}
.azx-drop.is-ready{border-color:rgba(46,212,127,.45);background:linear-gradient(180deg,rgba(46,212,127,.08),transparent 60%),var(--card)}
.azx-drop.is-ready strong{color:var(--up,#2ED47F)}
.azx-drop.is-ready .azx-drop-icon{color:var(--up,#2ED47F)}

/* ---------- progress + error ---------- */
.azx-progress{padding:20px 20px 16px;border:1px solid var(--hair);border-radius:var(--rad);background:var(--card)}
.azx-progress-bar{height:8px;border-radius:999px;background:var(--surface-3,#293046);overflow:hidden}
.azx-progress-bar span{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad,linear-gradient(115deg,#4FC7EA,#7B4DF2));transition:width .2s}
.azx-progress p{margin:10px 0 0;color:var(--ink-3);font-size:13.5px}
.azx-error{padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.55;color:#FFB3C0;background:rgba(255,92,122,.08);border:1px solid rgba(255,92,122,.32)}

/* ---------- cards ---------- */
.azx-card{padding:0;overflow:hidden}
.azx-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding:13px 16px 11px;border-bottom:1px solid var(--hair)}
.azx-card-head h2{font-size:15.5px;font-weight:700}
.azx-card-head .sub{font-size:12.5px;color:var(--ink-3);min-width:0}
.azx-body{padding:14px 16px 16px;display:grid;gap:12px}
.azx-meta{font-size:13.5px;color:var(--ink-3)}

/* ---------- session board ---------- */
.azx-hero{display:flex;flex-direction:column;gap:3px;padding:16px 18px 14px;border-radius:12px;background:var(--card-2);border:1px solid var(--hair)}
.azx-hero-lbl{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.azx-hero-lbl span{color:var(--ink-4);font-weight:600}
.azx-hero>b{font-family:var(--font-display,"Sora",sans-serif);font-size:clamp(34px,3vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.azx-hero>b.is-up{color:var(--up,#2ED47F)}
.azx-hero>b.is-down{color:#FF7A94}
.azx-hero>em{font-style:normal;font-size:13px;color:var(--ink-3)}
.azx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.azx-kpis .crx-kpi{padding:12px 12px 10px}
.azx-kpis .crx-kpi>b{font-size:21px;font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.azx-kpis .crx-kpi>b.is-up{color:var(--up,#2ED47F)}
.azx-kpis .crx-kpi>b.is-down{color:#FF7A94}
.azx-kpis .crx-kpi .lbl{margin-top:6px}
.azx-kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.azx-facts{list-style:none;margin:0;padding:10px 2px 0;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:6px 0;font-size:13px;color:var(--ink-3)}
.azx-facts li{white-space:nowrap;display:inline-flex;align-items:baseline;gap:6px}
.azx-facts li+li::before{content:"·";margin:0 10px;color:var(--ink-4)}
.azx-facts .lbl{font-weight:600;color:var(--ink-4)}
.azx-facts b{font-weight:700;color:var(--ink);font-size:13.5px}

/* ---------- charts ---------- */
.azx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.azx-chart{position:relative;height:280px;padding:8px 8px 10px}
.azx-chart canvas{display:block;width:100%;height:100%}
.azx-watermark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:var(--font-display,"Sora",sans-serif);font-weight:800;letter-spacing:.18em;font-size:clamp(20px,3vw,36px);color:rgba(255,255,255,.04)}
.azx-tip{position:absolute;z-index:5;padding:7px 10px;border-radius:9px;background:#0F1220;border:1px solid var(--hair-2);color:var(--ink);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;box-shadow:0 12px 30px -12px rgba(0,0,0,.8)}

/* ---------- tables ---------- */
.azx-cols{display:grid;grid-template-columns:minmax(0,8fr) minmax(280px,4fr);gap:16px;align-items:start}
.azx-side{display:grid;gap:16px;min-width:0}
.azx-scroll{max-height:560px}
.azx-scroll-mults{max-height:480px}
.azx-table{min-width:600px}
.azx-table th{padding-inline:11px}
.azx-table td{padding-inline:11px}
.azx-table th:first-child,.azx-table td:first-child{padding-left:16px}
.azx-table th:last-child,.azx-table td:last-child{padding-right:16px}
.azx-table td[colspan]{text-align:center;color:var(--ink-3);padding:26px 16px;white-space:normal}
.azx-sort{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:.01em}
.azx-sort::after{content:"↕";opacity:.35;font-size:11px}
th[data-cd-az-sort]{cursor:pointer}
th[data-cd-az-sort]:hover .azx-sort{color:#fff}
th[data-cd-az-sort]:hover .azx-sort::after{opacity:.8;color:var(--cyan,#4FC7EA)}

/* numeric columns right-aligned; the renderers emit plain tds, so the column
   sets here are fixed by the JS, not by a feed — nth-child is safe. */
.azx-games td:nth-child(n+2):not(:last-child){text-align:right}
.azx-mults td:nth-child(n+3):not(:last-child){text-align:right}
.azx-assets td:nth-child(n+2){text-align:right}
.azx-assets td:first-child{font-weight:600;color:#fff}
.azx-mults td:first-child{color:var(--ink-4);font-size:12.5px}
.azx-mults td:last-child{color:var(--ink-4);font-size:13px}
.azx-mults td:nth-child(3){font-weight:700;color:var(--max,#F5C451)}

/* game cell (rendered by analyse-stake.js) */
.azx .cd-az-game{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:#fff}
.azx .cd-az-game i{width:20px;height:20px;flex:0 0 auto;border-radius:6px;background:linear-gradient(135deg,var(--mid,#4FC7EA),var(--hi,#A78BFA));opacity:.85}

/* volatility chip (rendered by analyse-stake.js) */
.azx .cd-az-vol{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;background:var(--card-2);color:var(--ink-3);border:1px solid var(--hair-2)}
.azx .cd-az-vol.is-high{color:#FFB3C0;background:rgba(255,92,122,.1);border-color:rgba(255,92,122,.3)}
.azx .cd-az-vol.is-medium{color:var(--max,#F5C451);background:rgba(245,196,81,.1);border-color:rgba(245,196,81,.3)}
.azx .cd-az-vol.is-low{color:var(--up,#2ED47F);background:rgba(46,212,127,.08);border-color:rgba(46,212,127,.25)}

/* currency rows (rendered by analyse-stake.js) */
.azx-coins{padding:4px 0}
.azx-coins:empty::before{content:"Coins appear after an archive is read.";display:block;padding:22px 16px;font-size:13px;color:var(--ink-3);text-align:center}
.azx .cd-az-coin{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px}
.azx .cd-az-coin+.cd-az-coin{border-top:1px solid var(--hair)}
.azx .cd-az-coin__id{display:flex;flex-direction:column;gap:1px;min-width:0}
.azx .cd-az-coin__id b{font-size:14px;font-weight:700;color:#fff}
.azx .cd-az-coin span{color:var(--ink-3);font-size:12.5px}
.azx .cd-az-coin__n{text-align:right}
.azx .cd-az-coin__n strong{display:block;font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ---------- help ---------- */
.azx-help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.azx-helpcard .azx-body{gap:10px;font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.azx-helpcard ol,.azx-helpcard ul{margin:0;padding-left:20px;display:grid;gap:7px}
.azx-helpcard li::marker{color:var(--ink-4)}
.azx-helpcard p{color:var(--ink-3)}
.azx-helpcard a{color:var(--cyan,#4FC7EA);font-weight:600}

/* ---------- P&L view ---------- */
.azx-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:22px;padding:24px 24px 22px}
.azx-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan,#4FC7EA);margin-bottom:9px}
.azx-intro h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.03em;color:#fff;margin-bottom:10px}
.azx-intro p{color:var(--ink-3);font-size:14px;line-height:1.65;max-width:58ch}
.azx-intro-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.azx-intro-facts>div{padding:12px 13px 11px;border-radius:12px;background:var(--card-2);border:1px solid var(--hair)}
.azx-intro-facts b{display:block;font-size:13px;font-weight:700;color:#fff}
.azx-intro-facts span{display:block;margin-top:3px;color:var(--ink-3);font-size:12px;line-height:1.45}
.azx-drops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.azx-drop-sm{padding:34px 20px 26px;min-height:230px}
.azx-drop-sm strong{font-size:16.5px}
.azx-drop-sm p{font-size:13.5px}
.azx-dl{margin-top:4px;font-size:12.5px;color:var(--ink-4);text-decoration:none}
.azx-drop .azx-dl:hover{color:var(--cyan,#4FC7EA)}
.azx-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:2px}
.azx-resultbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* banner — analyse-stake-pnl.js overwrites className with
   "cd-pnl-banner is-up|is-down", so the base class must be styled as-is. */
.azx .cd-pnl-banner{padding:12px 16px;border-radius:12px;font-size:13.5px;line-height:1.55}
.azx .cd-pnl-banner.is-up{background:rgba(46,212,127,.08);border:1px solid rgba(46,212,127,.3);color:#C9F3DB}
.azx .cd-pnl-banner.is-down{background:rgba(255,92,122,.08);border:1px solid rgba(255,92,122,.3);color:#FFB3C0}

.azx-about{border:1px solid var(--hair);border-radius:var(--rad);background:var(--card)}
.azx-about summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;padding:14px 18px;font-size:14px;font-weight:600;color:var(--ink-2)}
.azx-about summary::-webkit-details-marker{display:none}
.azx-about summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .16s;flex:0 0 auto}
.azx-about[open] summary::before{transform:rotate(45deg)}
.azx-about summary:hover{color:#fff}
.azx-about>div{padding:0 18px 14px;display:grid;gap:8px}
.azx-about p{color:var(--ink-3);font-size:13.5px;line-height:1.65;max-width:96ch}

/* ---------- responsive ---------- */
@media (max-width:1320px){
	.azx-cols{grid-template-columns:1fr}
}
@media (max-width:1240px){
	.azx-two{grid-template-columns:1fr}
}
@media (max-width:900px){
	.azx-help{grid-template-columns:1fr}
	.azx-intro{grid-template-columns:1fr;padding:20px 18px}
	.azx-drops{grid-template-columns:1fr}
	.azx-kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
	.azx-toolbar{align-items:stretch}
	.azx-tabs{width:100%}
	.azx-tabs a{flex:1;justify-content:center}
	.azx-actions{width:100%}
	.azx-actions .crx-btn{flex:1;justify-content:center}
	.azx-drop{padding:36px 18px}
	.azx-hero>b{font-size:32px}
	.azx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
	.azx-kpis .crx-kpi>b{font-size:19px}
	.azx-kpis-3{grid-template-columns:1fr 1fr}
	.azx-chart{height:220px}
	.azx-facts{flex-direction:column;gap:7px}
	.azx-facts li+li::before{content:none}
	.azx-facts li{display:flex;justify-content:space-between;white-space:normal}
}