/* ICC Charts free tools: the shared look of /tools/ (hub and every tool page). Indigo-teal night theme like the rest of
   ICC Charts, a colour per category, our own line icons (deploy/tool_design.py) and a light version for phones and
   computers set to light mode. Loaded after /style.css by every page build_tools.py makes. */
.cat-forex { --c: #2dd4bf; --c-rgb: 45, 212, 191; }
.cat-gold { --c: #f5b942; --c-rgb: 245, 185, 66; }
.cat-stocks { --c: #60a5fa; --c-rgb: 96, 165, 250; }
.cat-crypto { --c: #a78bfa; --c-rgb: 167, 139, 250; }
.cat-macro { --c: #f472b6; --c-rgb: 244, 114, 182; }

/* ---- hub ---------------------------------------------------------------------------------------------------------- */
.t-bar { position: sticky; top: 68px; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 0;
  margin-bottom: 8px; background: linear-gradient(180deg, var(--bg) 80%, transparent); }
.t-search { position: relative; flex: 1 1 300px; display: flex; align-items: center; }
.t-search svg { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.t-search input { width: 100%; padding: 13px 14px 13px 42px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel);
  color: var(--text); font: 500 15.5px var(--font); outline: none; }
.t-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, .18); }
.t-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line2); background: transparent; color: var(--soft); border-radius: 99px; padding: 8px 14px;
  font: 600 13.5px var(--font); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.chip:hover { color: var(--text); border-color: rgba(148, 163, 214, .45); }
.chip.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.chip:focus-visible, .t-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.t-empty { flex-basis: 100%; margin: 0; color: var(--muted); }
.t-sec { margin: 30px 0 8px; scroll-margin-top: 150px; }
.t-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 21px; letter-spacing: -.3px; }
.t-sec h2 small { color: var(--muted); font: 600 13px var(--mono); }
.t-sec-ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--c);
  background: rgba(var(--c-rgb), .12); border: 1px solid rgba(var(--c-rgb), .3); }
.t-sec-sub { margin: 6px 0 14px; color: var(--muted); font-size: 14.5px; }
.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.t-card { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; text-decoration: none;
  color: var(--text); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)), var(--panel);
  border: 1px solid var(--line); transition: border-color .18s, transform .18s, box-shadow .18s; }
.t-card:hover { border-color: rgba(var(--c-rgb), .55); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.t-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--c);
  background: rgba(var(--c-rgb), .12); border: 1px solid rgba(var(--c-rgb), .28); }
.t-txt { min-width: 0; }
.t-txt b { font-size: 15.5px; font-weight: 700; }
.t-txt small { display: block; margin-top: 4px; color: var(--soft); font-size: 13.5px; line-height: 1.5; }
.t-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font: 700 10.5px var(--font); font-style: normal;
  letter-spacing: .4px; text-transform: uppercase; vertical-align: 2px; color: #1a1205; background: #f5b942; }
.t-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 34px; }

/* ---- tool pages --------------------------------------------------------------------------------------------------- */
.tool-hero .wrap { display: flex; flex-direction: column; align-items: center; }
.t-hero-ico { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 14px; border-radius: 16px; color: var(--c);
  background: rgba(var(--c-rgb), .13); border: 1px solid rgba(var(--c-rgb), .35); box-shadow: 0 10px 40px rgba(var(--c-rgb), .18); }
.tp .tool.card { border-top: 3px solid var(--c, var(--accent)); box-shadow: 0 18px 50px rgba(0, 0, 0, .25); }
.tp .tool .res > div.main { background: linear-gradient(135deg, rgba(var(--c-rgb, 45, 212, 191), .16), rgba(139, 92, 246, .08));
  border-color: rgba(var(--c-rgb, 45, 212, 191), .45); padding: 16px 18px; }
.tp .tool .res b.big { color: var(--c, var(--accent)); }
.tp .tool .f { color: var(--soft); letter-spacing: .1px; }
.tp .tool input:not([type=radio]):not([type=checkbox]), .tp .tool select { min-height: 46px; font-size: 16px; }
.tp .tool .seg label:has(input:checked) { border-color: var(--c, var(--accent)); background: rgba(var(--c-rgb, 45, 212, 191), .12); }
.tp .blog-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; padding: 0; list-style: none; }
.tp .blog-more li { margin: 0; }
.tp .blog-more a { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--soft);
  font-size: 14px; }
.tp .blog-more a:hover { border-color: var(--line2); color: var(--text); }
@media (max-width: 640px) {
  .t-bar { top: 60px; }
  .t-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
  .t-chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .t-grid { grid-template-columns: 1fr; }
  .t-hero-ico { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .t-card { transition: none; } .t-card:hover { transform: none; } }

/* ---- light mode (system setting) ----------------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  body.tp { --bg: #f5f7fc; --bg2: #eef1f8; --panel: #ffffff; --panel2: #f3f5fb; --line: rgba(30, 41, 79, .1); --line2: rgba(30, 41, 79, .18);
    --text: #0d1530; --soft: #3b4563; --muted: #566079; --accent: #0f766e; --accent-ink: #ffffff; color-scheme: light; }
  body.tp .cat-forex { --c: #0f766e; --c-rgb: 15, 118, 110; }
  body.tp .cat-gold { --c: #8a5a12; --c-rgb: 138, 90, 18; }
  body.tp .cat-stocks { --c: #1d4ed8; --c-rgb: 29, 78, 216; }
  body.tp .cat-crypto { --c: #6d28d9; --c-rgb: 109, 40, 217; }
  body.tp .cat-macro { --c: #be185d; --c-rgb: 190, 24, 93; }
  body.tp.cat-forex { --c: #0f766e; --c-rgb: 15, 118, 110; } body.tp.cat-gold { --c: #8a5a12; --c-rgb: 138, 90, 18; }
  body.tp.cat-stocks { --c: #1d4ed8; --c-rgb: 29, 78, 216; } body.tp.cat-crypto { --c: #6d28d9; --c-rgb: 109, 40, 217; }
  body.tp.cat-macro { --c: #be185d; --c-rgb: 190, 24, 93; }
  body.tp .nav, body.tp .nav.scrolled { background: rgba(245, 247, 252, .88); }
  body.tp .card, body.tp .t-card { background: var(--panel); box-shadow: 0 1px 2px rgba(13, 21, 48, .05); }
  body.tp .t-card:hover { box-shadow: 0 12px 30px rgba(13, 21, 48, .12); }
  body.tp .tool.card { box-shadow: 0 14px 40px rgba(13, 21, 48, .08); }
  body.tp .tool input:not([type=radio]):not([type=checkbox]), body.tp .tool select { background: #fff; color: var(--text); }
  body.tp .tool .res > div { background: var(--panel2); }
  body.tp .tool .warn { color: #8a1c1a; background: rgba(239, 83, 80, .08); }
  body.tp .tool .ins-note { color: #7a5200; background: rgba(250, 204, 21, .14); }
  body.tp .hero-glow { opacity: .35; }
  body.tp .hero-grid { opacity: .5; }
  body.tp .btn-ghost { background: #fff; }
  body.tp .t-new { color: #fff; background: #8a5a12; }
  body.tp .scan td.hi { color: #8a5a12; } body.tp .scan td.lo { color: #0f766e; }
  body.tp .logo, body.tp .links a { color: var(--text); }
  body.tp .foot-broker { color: #7a4f00; background: rgba(245, 185, 66, .14); border-color: rgba(183, 121, 31, .45); }
  body.tp .partner-note { color: var(--muted); }
}

/* tighter hero on tool pages: the calculator is the point of the page */
.tp .page-hero { padding-bottom: 26px; }
.tp .page-hero + .section-sm { padding-top: 10px; }

/* ---- options profit calculator: the legs table and the payoff chart -------------------------------------------------- */
.opt .legs { display: grid; gap: 8px; }
.opt .leg { display: grid; grid-template-columns: 52px 1fr 1fr 1.2fr 1.1fr .7fr; gap: 8px; align-items: end; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 12px; }
.opt .lg { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.opt .lg span { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.opt .lg-on { align-items: center; }
.opt .lg-on input { width: 22px; height: 22px; margin: 10px 0; accent-color: var(--c, var(--accent)); }
.opt .leg select, .opt .leg input:not([type=checkbox]) { min-height: 42px; padding: 8px 9px; font-size: 15px; }
.payoff { margin: 0; padding: 10px 8px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel2); }
.payoff svg { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }
.payoff .ax { fill: var(--muted); font: 500 11px var(--font); }
.payoff .gl { stroke: var(--line); } .payoff .zl { stroke: var(--line2); stroke-width: 1.5; }
.payoff .sl { stroke: var(--muted); stroke-dasharray: 3 4; }
.payoff .cl { stroke: var(--soft); stroke-width: 1; }
.payoff .exp { fill: none; stroke: var(--c, var(--accent)); stroke-width: 2.5; stroke-linejoin: round; }
.payoff .now { fill: none; stroke: var(--soft); stroke-width: 1.6; stroke-dasharray: 6 5; }
.payoff .be { fill: var(--bg); stroke: var(--text); stroke-width: 2; }
.payoff .dot { fill: var(--c, var(--accent)); stroke: var(--bg); stroke-width: 2; }
.payoff figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; margin-top: 4px;
  color: var(--muted); font-size: 12.5px; }
.payoff figcaption span { display: inline-block; width: 18px; height: 0; margin-right: -8px; border-top: 2.5px solid var(--c, var(--accent)); }
.payoff figcaption .k-now { border-top: 2px dashed var(--soft); }
.payoff figcaption .k-be { width: 9px; height: 9px; border: 2px solid var(--text); border-radius: 50%; }
@media (max-width: 640px) {
  .opt .leg { grid-template-columns: 40px 1fr 1fr 64px; }
  .opt .lg:nth-child(4) { grid-column: 1 / 3; }
  .opt .lg:nth-child(5) { grid-column: 3 / 5; }
  .opt .lg:nth-child(6) { grid-column: 4; grid-row: 1; }
}

/* ---- COT pages: weekly bars, the currency ranking and the one-year lines ---------------------------------------------- */
.payoff .bp { fill: rgba(var(--c-rgb, 45, 212, 191), .55); } .payoff .bn { fill: rgba(239, 68, 68, .55); }
.payoff .bp.last { fill: var(--c, var(--accent)); } .payoff .bn.last { fill: #ef4444; }
.cs-rank { display: grid; gap: 8px; }
.cs-row { display: grid; grid-template-columns: 46px 1fr 40px; gap: 10px; align-items: center; }
.cs-row b { font: 700 14px var(--mono); }
.cs-bar { height: 12px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.cs-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--c-rgb, 45, 212, 191), .45), var(--c, var(--accent))); }
.cs-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dt th small { color: var(--muted); font-weight: 500; }
.spark { width: 100px; height: 28px; display: block; }
.spark path { fill: none; stroke: var(--c, var(--accent)); stroke-width: 1.6; }
.spark .zl { stroke: var(--line2); stroke-dasharray: 2 3; }
.dt.cb th small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: normal; text-transform: none; letter-spacing: 0; }
.dt.cb tbody th { white-space: normal; min-width: 210px; }
.dt.cb .cb-rate { white-space: nowrap; font-size: 17px; font-weight: 800; color: var(--c, var(--accent)); }

/* ---- economic calendar --------------------------------------------------------------------------------------------- */
.ec-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid rgba(var(--c-rgb, 45, 212, 191), .45); background: linear-gradient(135deg, rgba(var(--c-rgb, 45, 212, 191), .14), rgba(139, 92, 246, .06)); }
.ec-next small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.ec-next b { font-size: 16px; }
.ec-cd { font: 800 22px var(--mono); color: var(--c, var(--accent)); font-variant-numeric: tabular-nums; }
.ec-table td, .ec-table th { text-align: left !important; vertical-align: top; }
.ec-table .ec-day th { padding-top: 14px; color: var(--text); font-size: 13.5px; text-transform: none; letter-spacing: 0; background: var(--panel2); }
.ec-t b { display: block; font-variant-numeric: tabular-nums; } .ec-t small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ec-ccy { font: 700 13px var(--mono); }
.ec-imp { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; }
.ec-imp.high { color: #fff; background: #dc2626; } .ec-imp.medium { color: #1a1205; background: #f5b942; } .ec-imp.low { color: var(--soft); background: var(--panel2); border: 1px solid var(--line2); }
.ec-table .ec-n { white-space: normal !important; min-width: 200px; }
.ec-past { opacity: .55; }

/* ---- forex market hours by country ---------------------------------------------------------------------------------- */
.mh h2 { margin: 0; font-size: 19px; }
.mh-hol { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.mh-hol .dt th[colspan] { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 13.5px; }
.mh-hol tbody th { white-space: nowrap; }
.mh-hol td { text-align: left !important; white-space: normal !important; }
.mh-z { font: 800 12px var(--mono); width: auto !important; min-width: 44px; padding: 0 6px; }
.mh-grid { margin-bottom: 4px; }
.tool .clockrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* ---- "Also show money in" ------------------------------------------------------------------------------------------- */
.tool .lc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; padding: 12px; border: 1px dashed var(--line2); border-radius: 12px; }
.tool .lc small { grid-column: 1 / -1; }
@media (max-width: 640px) { .tool .lc { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ec-table thead { display: none; }
  .ec-table tbody tr:not(.ec-day) { display: grid; grid-template-columns: 76px auto 1fr; align-items: center; column-gap: 8px; padding: 8px 4px;
    border-bottom: 1px solid var(--line); }
  .ec-table tbody tr:not(.ec-day) td { border: 0; padding: 2px 4px; }
  .ec-table td.ec-t { grid-row: span 3; align-self: start; }
  .ec-table td.ec-n, .ec-table td.small { grid-column: 2 / 4; min-width: 0; }
  .ec-table .ec-day, .ec-table .ec-day th { display: block; }
}

/* ---- "Pay with USDT / USDC" on the crypto pages (deploy/tool_design.py pay_box) ---------------------------------- */
.pay-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:22px 0;padding:12px 16px;border-radius:12px;border:1px solid rgba(167,139,250,.4);background:rgba(167,139,250,.08)}
.pay-box b{font-size:15px}
.pay-box span{color:var(--soft);font-size:14.5px;flex:1 1 240px}
.pay-box a{font-weight:700;white-space:nowrap}
body.tp .pay-box{border-color:rgba(var(--c-rgb,124,58,237),.4);background:rgba(var(--c-rgb,124,58,237),.08)}
body.tp .pay-box a{color:var(--c,var(--accent))}