/* ACE Stock Bots v2 — brand theme matched to the bull/bear logo.
   GREEN = bullish (and the brand primary), PURPLE = bearish,
   RED = errors only, GOLD = premium only. Dark neon-on-black base. */

:root {
  --bg:        #101318;
  --bg-darker: #0a0c10;
  --card:      #1a1e26;
  --card-2:    #20242e;
  --border:    #2a2e39;
  --primary:   #58e021;       /* neon bull green (brand) */
  --primary-2: #2fae0e;
  --primary-hover: #74f23c;
  --bear:  #a259ff;           /* bearish purple */
  --bear-hover: #b87aff;
  --gold:  #f5c842;           /* premium only */
  --buy:   #58e021;
  --hold:  #ffdd65;
  --sell:  #a259ff;
  --info:  #5965f9;
  --text:  #f5f5f5;
  --muted: #b0b8d1;
  --dim:   #7d87a3;
  /* aliases so ported original (legacy) CSS works site-wide */
  --dark-bg: #101318; --darker-bg: #0a0c10; --card-bg: #1a1e26;
  --border-color: #2a2e39; --text-light: #f5f5f5; --text-muted: #b0b8d1; --text-dim: #7d87a3;
  --success: #58e021; --warning: #ffba00; --danger: #ff5252; --info-hover: #7a84fa;
  --primary-gradient: linear-gradient(45deg, #58e021, #2fae0e); --font-heading: 'Teko', sans-serif;
}

/* ---- base ---- */
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: clip;   /* allow the full-bleed hero without a sideways scrollbar */
}

/* Wider content on large screens — was capped near 1140px, leaving big side margins.
   Brings the whole site closer to screen width (like acesportsbots.com). */
@media (min-width: 1200px) {
  .container { max-width: 1480px; }
}
.ace-container { max-width: 1480px !important; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
.text-muted, .text-secondary { color: var(--muted) !important; }
.text-dim { color: var(--dim) !important; }

h1, h2, h3, h4, h5, h6, .display-font { font-family: 'Inter', sans-serif; font-weight: 700; }

/* Brand / hero display font */
.brand-font { font-family: 'Teko', sans-serif; letter-spacing: 1px; }
.cyber-font { font-family: 'Orbitron', monospace; }

/* ---- navbar ---- */
.navbar {
  background-color: var(--bg-darker) !important;
  border-bottom: 1px solid var(--border);
  padding-top: .5rem; padding-bottom: .5rem;
}
.navbar .navbar-brand {
  font-family: 'Teko', sans-serif;
  font-size: 1.85rem;
  letter-spacing: 1.5px;
}
.navbar .navbar-brand .brand-accent { color: var(--primary); }
/* wordmark mirrors the logo: ACE green / Stock silver / Bots purple */
.navbar .navbar-brand span.brand-accent {
  background: linear-gradient(45deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.navbar .navbar-brand .brand-stock {
  background: linear-gradient(180deg, #f4f6f8, #9aa3ad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.navbar .navbar-brand .brand-bots {
  background: linear-gradient(45deg, var(--bear-hover), var(--bear));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.navbar .navbar-brand { display: inline-flex; align-items: center; white-space: nowrap; }
.navbar .navbar-brand .brand-logo {
  height: 72px; width: 72px; border-radius: 50%; object-fit: cover;
  vertical-align: middle; margin-right: 0;
  border: 2px solid rgba(88,224,33,.55);
  box-shadow: 0 0 14px rgba(88,224,33,.55), 0 0 4px rgba(88,224,33,.8);
  transition: transform .2s ease, box-shadow .2s ease;
}
.navbar .navbar-brand:hover .brand-logo {
  transform: scale(1.04);
  box-shadow: 0 0 20px rgba(88,224,33,.7), 0 0 6px rgba(162,89,255,.6);
}
@media (max-width: 575px) {
  .navbar .navbar-brand .brand-logo { height: 52px; width: 52px; }
}

/* ---- live ticker tape (pinned to screen bottom, stays on scroll) ---- */
.ace-ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  background: var(--bg-darker);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(0,0,0,.45);
}
.ace-ticker .tradingview-widget-container,
.ace-ticker .tradingview-widget-container__widget { background: var(--bg-darker); }
/* the widget iframe paints white before/while loading — force it dark */
.ace-ticker iframe { background-color: var(--bg-darker) !important; }
/* hide TradingView's own attribution row inside the tape for a cleaner strip */
.ace-ticker .tradingview-widget-copyright { display: none !important; }
/* keep page content clear of the pinned ticker (adaptive tape is ~73px) */
body { padding-bottom: 82px; }

/* ---- footer payment / trust badges ---- */
.footer-pay {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  border-top: 1px solid var(--border);
  padding: 1rem 0 .25rem; margin-top: .5rem;
}
.footer-pay-label { color: var(--dim); font-size: .85rem; }
.footer-pay-logos { display: flex; align-items: center; gap: 1rem; }
.footer-pay-logos i {
  font-size: 2.1rem; color: var(--muted);
  transition: color .2s ease, transform .2s ease;
}
.footer-pay-logos i:hover { color: var(--text); transform: translateY(-2px); }
@media (max-width: 575px) {
  .footer-pay { justify-content: center; text-align: center; }
  .footer-pay-logos { justify-content: center; }
}
.navbar .nav-link {
  color: var(--muted) !important;
  border-radius: 6px;
  padding: .4rem .6rem !important;
  white-space: nowrap;
  transition: all .2s ease;
}
.navbar .navbar-nav { gap: .15rem; }
.navbar .nav-link:hover { background: rgba(88,224,33,.1); color: var(--primary) !important; }
.navbar .nav-link.active { color: var(--primary) !important; font-weight: 600; }
/* keep the login / user button on one line */
.navbar #authArea .btn, .navbar #authArea .user-name { white-space: nowrap; }

/* ---- cards ---- */
.card, .panel {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,.2); }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-family: 'Teko', sans-serif;
  letter-spacing: 1px;
  font-size: 1.3rem;
  background-image: linear-gradient(90deg, var(--primary), var(--bear));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.card-header i { -webkit-text-fill-color: var(--primary); color: var(--primary); }

/* Section titles (Bungee, green→purple gradient w/ underline) — the signature heading */
.section-title {
  font-family: 'Teko', sans-serif;
  letter-spacing: 1px;
  font-size: 1.8rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  background-image: linear-gradient(90deg, var(--primary), var(--bear));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* keep icons solid (green) so they don't get clipped into the gradient */
.section-title i { -webkit-text-fill-color: var(--primary); color: var(--primary); }

/* Highlight stat boxes — cyan top border, Orbitron value */
.highlight-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}
.highlight-box .hb-value { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 1.7rem; }
.highlight-box .hb-label { color: var(--dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; }

/* Feature CTA buttons (dashboard) — ported from original: icon + title + desc */
.feature-button {
  display: block; background-color: var(--bg-darker);
  border: 1px solid var(--border); border-radius: 12px; padding: 25px;
  text-align: center; transition: all .3s ease; text-decoration: none;
  color: var(--text); height: 100%;
}
.feature-button:hover {
  transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,.2);
  border-color: var(--primary); color: var(--text);
}
.feature-button i { font-size: 40px; margin-bottom: 15px; color: var(--primary); display: block; }
.feature-button h3 { font-family: 'Teko', sans-serif; letter-spacing: 1px; margin-bottom: 10px; }
.feature-button p { color: var(--muted); font-size: 14px; margin: 0; }
.feature-button.fb-yellow i { color: var(--hold); }
/* Solid-colour feature buttons (match original): dark text/icon on the fill */
.feature-button.fb-solid { color: #131722; }
.feature-button.fb-solid i { color: #131722; }
.feature-button.fb-solid h3 { color: #131722; }
.feature-button.fb-solid p { color: #1a1f2b; }
.feature-button.fb-solid:hover { color: #131722; filter: brightness(1.04); }
.feature-button.fb-gold { background: var(--hold); border-color: var(--hold); }
.feature-button.fb-cyan { background: var(--primary-hover); border-color: var(--primary-hover); }
/* purple (bear) fill — light text since the fill is dark */
.feature-button.fb-purple { background: var(--bear); border-color: var(--bear); }
.feature-button.fb-purple, .feature-button.fb-purple i,
.feature-button.fb-purple h3 { color: #fff; }
.feature-button.fb-purple p { color: rgba(255,255,255,.85); }
.feature-button.fb-purple:hover { color: #fff; }

/* ---- dashboard: world exchanges map + TradingView widget sizing ---- */
#worldExchangesMap { height: 500px; margin-bottom: 16px; }
.exchange-time { font-size: 12px; color: var(--muted); margin-top: 5px; }
.exchange-open { color: var(--buy); }
.exchange-closed { color: var(--sell); }
/* Force TradingView iframes to fill their cards so they're actually readable */
#tvHeatmap, #tvHeatmap .tradingview-widget-container__widget { height: 500px; }
#tvHeatmap iframe { height: 500px !important; width: 100% !important; }
#tvEvents, #tvNews,
#tvEvents .tradingview-widget-container__widget, #tvNews .tradingview-widget-container__widget { height: 450px; }
#tvEvents iframe, #tvNews iframe { height: 450px !important; width: 100% !important; }

/* ---- analysis page ---- */
.ind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .5rem; }
.ind-grid .form-check { margin-bottom: .15rem; }
.cost-panel {
  background: var(--bg-darker); border: 1px solid var(--border);
  border-top: 3px solid var(--primary); border-radius: 10px;
  padding: .75rem 1rem; font-size: .9rem;
}
.conf-track { height: 8px; background: var(--bg-darker); border-radius: 4px; overflow: hidden; }
.conf-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
#hzTabs .btn.active, .horizon-tab.active { background: var(--primary); border-color: var(--primary); color: #0b2305; }

/* ---- footer (ported from original site) ---- */
.ace-footer { background: linear-gradient(135deg, var(--darker-bg), var(--dark-bg)); border-top: 1px solid var(--border-color); margin-top: 60px; position: relative; z-index: 10; }
.footer-content { padding: 50px 0 20px; }
.footer-section { margin-bottom: 30px; }
.footer-title { color: var(--primary); font-family: var(--font-heading); font-size: 1.5rem; letter-spacing: 1px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.footer-logo { height: 34px; width: 34px; border-radius: 50%; object-fit: cover; }
.footer-subtitle { color: var(--text-light); font-weight: 600; margin-bottom: 15px; font-size: 1.05rem; }
.footer-description { color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; font-size: .95rem; }
.social-links { display: flex; gap: 12px; margin-top: 16px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--primary-gradient); color: #0b2305; border-radius: 50%; text-decoration: none; transition: all .3s ease; font-size: 1rem; }
.social-link:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(88,224,33,.4); color: #0b2305; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: var(--text-muted); text-decoration: none; transition: color .3s ease; font-size: .95rem; }
.footer-links a:hover { color: var(--primary); }
.contact-info p { color: var(--text-muted); margin-bottom: 8px; font-size: .95rem; }
.contact-info i { color: var(--primary); margin-right: 8px; width: 16px; }
.contact-info a { color: var(--text-muted); text-decoration: none; }
.contact-info a:hover { color: var(--primary); }
.footer-bottom { border-top: 1px solid var(--border-color); padding-top: 20px; margin-top: 30px; }
.copyright, .disclaimer-text { color: var(--text-dim); margin: 0; font-size: .9rem; }
@media (max-width: 768px){ .footer-content{padding:40px 0 20px} .social-links{justify-content:flex-start} .footer-bottom .text-md-end{text-align:left!important;margin-top:10px} }

/* Token packages (purchase page) */
.token-package { background: var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; transition: all .3s ease; height:100%; }
.token-package:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,.2); }
.token-package.popular { border-color: var(--primary); box-shadow: 0 0 26px rgba(88,224,33,.25); }
.package-header { padding:1.5rem; text-align:center; border-bottom:1px solid var(--border); position:relative; }
.token-package.popular .package-header { background: rgba(88,224,33,.08); }
.popular-badge { position:absolute; top:10px; right:10px; background:var(--primary); color:#0b2305; font-weight:700; font-size:.7rem; padding:.25rem .6rem; border-radius:999px; text-transform:uppercase; letter-spacing:.5px; }
.package-name { font-family:'Teko',sans-serif; font-size:1.6rem; letter-spacing:1px; color:var(--text); }
.package-tokens { font-family:'Orbitron',monospace; font-size:2.2rem; font-weight:700; color:var(--primary); line-height:1.1; }
.package-tokens span { font-size:.85rem; color:var(--dim); font-family:'Inter',sans-serif; }
.package-price { font-size:1.8rem; font-weight:700; margin-top:.4rem; }
.package-price .cur { color:var(--dim); font-size:1rem; vertical-align:super; }
.package-body { padding:1.25rem 1.5rem 1.5rem; }
.benefits-card { background: var(--card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; height:100%; transition: all .3s ease; }
.benefits-card:hover { transform: translateY(-5px); border-color: var(--primary); }
.benefits-card i { font-size:2rem; color: var(--primary); margin-bottom:.75rem; }
.benefits-card h3 { font-family:'Teko',sans-serif; letter-spacing:1px; font-size:1.4rem; margin-bottom:.5rem; }
.benefits-card p { color: var(--muted); font-size:.9rem; margin:0; }
.package-features { list-style:none; padding:0; margin:0; }
.package-features li { padding:.4rem 0; color: var(--muted); }
.package-features li::before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--buy); margin-right:.6rem; }
.bg-body-tertiary, .bg-dark-panel { background-color: var(--card) !important; }
.bg-darker { background-color: var(--bg-darker) !important; }

/* ---- buttons ---- */
.btn-primary, .btn-ace {
  background: linear-gradient(45deg, var(--primary), var(--primary-2));
  border: none; color: #fff; font-weight: 600; border-radius: 8px;
  transition: all .2s ease;
}
.btn-primary:hover, .btn-ace:hover {
  background: linear-gradient(45deg, var(--primary-hover), #74f23c);
  transform: translateY(-2px); color: #fff;
  box-shadow: 0 0 20px rgba(88,224,33,.35);
}
.btn-outline-primary, .btn-outline-ace {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; font-weight: 600;
}
.btn-outline-primary:hover, .btn-outline-ace:hover {
  background: rgba(88,224,33,.08); border-color: var(--primary); color: var(--primary);
}
.btn-outline-success { color: var(--buy); border-color: var(--buy); }
.btn-outline-success:hover { background: var(--buy); color: #04231d; }

/* ---- forms ---- */
.form-control, .form-select {
  background-color: var(--bg-darker);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
}
.form-control:focus, .form-select:focus {
  background-color: var(--bg-darker);
  border-color: var(--primary);
  color: var(--text);
  box-shadow: 0 0 0 .2rem rgba(88,224,33,.18);
}
.form-control::placeholder { color: var(--dim); }
.form-label { color: var(--muted); font-weight: 500; }

/* ---- tables ---- */
.table { color: var(--text); border-color: var(--border); }
.table > thead th {
  color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase; font-size: .72rem; letter-spacing: .5px;
}
.table > tbody > tr { border-color: rgba(255,255,255,.05); }
.table > tbody > tr:hover { background: rgba(88,224,33,.05); }
.table-dark { --bs-table-bg: var(--card); }

/* ---- signal colors / badges ---- */
.signal-buy, .text-buy   { color: var(--buy)  !important; }
.signal-hold, .text-hold { color: var(--hold) !important; }
.signal-sell, .text-sell { color: var(--sell) !important; }
.badge-buy  { background: rgba(88, 224, 33,.15);  color: var(--buy);  border: 1px solid var(--buy); }
.badge-hold { background: rgba(255,221,101,.15); color: var(--hold); border: 1px solid var(--hold); }
.badge-sell { background: rgba(255,82,82,.15);   color: var(--sell); border: 1px solid var(--sell); }
.badge-ace  { background: rgba(88,224,33,.15);   color: var(--primary); border: 1px solid var(--primary); }
.badge-pill { padding: .35em .7em; border-radius: 999px; font-weight: 600; font-size: .78rem; }

/* ---- market selector in nav ---- */
#marketSelector {
  background-color: var(--bg-darker);
  border: 1px solid var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* Prominent ASX/US segmented market toggle */
.market-toggle {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--bg-darker); border: 1px solid var(--primary);
  border-radius: 999px; padding: 3px; box-shadow: 0 0 14px rgba(88,224,33,.18);
}
.market-toggle .mt-opt {
  border: none; background: transparent; color: var(--muted);
  font-family: 'Teko', sans-serif; letter-spacing: 1.5px; font-size: 1rem;
  padding: .3rem 1rem; border-radius: 999px; cursor: pointer; transition: all .2s ease; line-height: 1.2;
}
.market-toggle .mt-opt:hover:not(.active) { color: var(--primary); }
.market-toggle .mt-opt.active {
  background: linear-gradient(45deg, var(--primary), var(--primary-2));
  color: #0b2305; box-shadow: 0 0 16px rgba(88,224,33,.45);
}

/* User profile dropdown (ported from original) */
.user-profile { display:flex; align-items:center; cursor:pointer; padding:5px 10px; border-radius:8px; transition: all .3s ease; }
.user-profile:hover { background-color: rgba(88,224,33,.1); }
.user-profile::after { display:none; }
.user-avatar {
  width:34px; height:34px; border-radius:50%; background: var(--primary);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#0b2305;
}
.user-name { font-weight:500; color: var(--text); }
.dropdown-menu {
  background-color: var(--card); border:1px solid var(--border); border-radius:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.dropdown-item { color: var(--muted); }
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(88,224,33,.1); color: var(--primary); }
.dropdown-header { color: var(--dim); font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; }
.dropdown-divider { border-color: var(--border); }

/* ---- misc ---- */
.glow { box-shadow: 0 0 30px rgba(88,224,33,.35); }
.text-glow { text-shadow: 0 0 12px rgba(88,224,33,.5); }
.divider { height: 1px; background: var(--border); margin: 1.5rem 0; }
.stat-value { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 1.6rem; }
.confidence-bar { height: 8px; border-radius: 4px; background: var(--bg-darker); overflow: hidden; }
.confidence-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--buy)); }
hr { border-color: var(--border); }
.card-title { color: var(--text); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-darker); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-2); }

/* =====================================================================
   Site polish layer — subtle, consistent micro-interactions site-wide
   ===================================================================== */

/* Cards gain quiet depth on hover (no bounce — TV widgets stay put) */
.card { transition: box-shadow .25s ease, border-color .25s ease; }
.card:hover { border-color: rgba(88,224,33,.32); box-shadow: 0 14px 34px rgba(0,0,0,.32); }

/* Stat / highlight boxes lift a touch */
.highlight-box { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.highlight-box:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.28); border-color: rgba(88,224,33,.3); }
.highlight-box .hb-ic { font-size: 1.05rem; color: var(--primary); margin-bottom: .4rem; display: block; opacity: .9; }

/* Crisp, accessible keyboard focus rings */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* Smooth interactive transitions */
.btn, .badge, .feature-button, .social-link, .footer-links a, .mt-opt { transition: all .2s ease; }
.table > tbody > tr { transition: background .15s ease; }

/* Loading skeleton — replaces bare "—" / "Loading…" placeholders */
.skel { position: relative; overflow: hidden; background: var(--card-2); border-radius: 6px; color: transparent !important; min-height: 1em; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); animation: skelshine 1.3s ease infinite; }
@keyframes skelshine { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* Coloured % pill for movers / signal tables (green up, purple down) */
.chg-pill { display: inline-block; font-weight: 700; font-size: .8rem; padding: .12rem .55rem; border-radius: 100px; }
.chg-pill.up   { color: var(--buy);  background: rgba(88,224,33,.12); }
.chg-pill.down { color: var(--sell); background: rgba(162,89,255,.14); }