/* =========================
   THEME TOKENS
========================= */
:root{
  --accent:#00c97e; --danger:#ff3b3b; --radius:14px;
}
html[data-theme="dark"]{
  --bg:#0b0f14; --layer:#0e141c; --card:#111822; --line:#182435;
  --text:#e5eaf1; --muted:#94a3b8; --chip:#0c141f;
  --shadow:0 18px 38px rgba(0,0,0,.45); --soft:rgba(255,255,255,.06);
}
html[data-theme="light"]{
  --bg:#f7f9fc; --layer:#fff; --card:#fff; --line:#e6ecf5;
  --text:#0b1524; --muted:#5b6b82; --chip:#f2f6fb;
  --shadow:0 12px 30px rgba(5,30,55,.08); --soft:rgba(5,30,55,.06);
}

/* Base */
html,body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
a{color:var(--accent);text-decoration:none} a:hover{opacity:.92}
.muted{color:var(--muted)!important}

/* Logo tint */
html[data-theme="dark"]{--logo:#fff} html[data-theme="light"]{--logo:#000}
.navbar .navbar-brand .logo-text,.footer .logo-text{color:var(--logo)!important}

/* Navbar – translucent glass in dark + light */

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar.is-solid {
  background: rgba(11, 15, 20, 0.60);               /* more transparent */
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

html[data-theme="light"] .navbar,
html[data-theme="light"] .navbar.is-solid {
  background: rgba(255, 255, 255, 0.70);            /* more transparent */
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.nav-link{color:var(--muted)}
.navbar .nav-link{position:relative;padding:.5rem .8rem;border-radius:999px;transition:color .15s,background-color .15s,box-shadow .15s}
.navbar .nav-link:hover{color:var(--text)}
html[data-theme="dark"] .navbar .nav-link.active,
html[data-theme="light"] .navbar .nav-link.active{color:var(--text)!important;background:var(--soft);box-shadow:inset 0 0 0 0 var(--line)}
.navbar .nav-link::after{content:'';position:absolute;left:.8rem;right:.8rem;bottom:.25rem;height:2px;background:var(--accent);transform:scaleX(0);opacity:0;transition:transform .18s,opacity .18s}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{transform:scaleX(1);opacity:1}
.navbar .nav-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}

/* Buttons */
.btn-accent{background:var(--accent);border:none;color:#012114;font-weight:800;border-radius:10px}
.btn-accent:hover{filter:brightness(.95)}
.btn-outline-accent{border:1px solid var(--accent);color:var(--accent);font-weight:700;border-radius:10px}
.btn-outline-accent:hover{background:var(--accent);color:#012114}

/* Chips & common UI */
.chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--chip);border:1px solid var(--line);color:var(--muted);padding:.35rem .6rem;border-radius:999px;font-weight:600;font-size:.85rem}
.hero{padding:120px 0 80px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.grid-bg{position:absolute;inset:0;pointer-events:none;background-image:
 radial-gradient(900px 400px at 80% -10%,rgba(0,201,126,.12),transparent 55%),
 radial-gradient(700px 260px at 10% 0,rgba(255,59,59,.10),transparent 60%);opacity:.55}
.card-dark{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.section{padding:90px 0}
.kpi{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas}
.divider{height:1px;background:var(--line);margin:1.25rem 0}
.icon-circle{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--chip);border:1px solid var(--line)}
.table-clean{--bs-table-bg:var(--card);--bs-table-striped-bg:var(--layer);border-color:var(--line);color:var(--text)}
.cta-fixed{position:fixed;right:16px;bottom:16px;z-index:1030;background:linear-gradient(180deg,#00c97e,#00b472);color:#012114;padding:.85rem 1.05rem;border-radius:999px;font-weight:800}
.cta-fixed:hover{transform:translateY(-2px);color:#012114}
.spark{height:54px!important}
.theme-toggle{border:1px solid var(--line);background:var(--chip);color:var(--text)}
.theme-toggle:hover{background:var(--soft)}
.footer{border-top:1px solid var(--line);padding:40px 0 70px}

/* =========================
   MARKETS (Index-style)
========================= */

/* Page + table sizing */
.page-hero{padding-top:96px;padding-bottom:16px}
.market-table{table-layout:fixed;width:100%}
.market-table th:nth-child(1),.market-table td:nth-child(1){width:220px}
.market-table th:nth-child(2),.market-table td:nth-child(2){width:140px} /* Price */
.market-table th:nth-child(3),.market-table td:nth-child(3){width:100px}  /* % */
.market-table th:nth-child(4),.market-table td:nth-child(4){width:140px}  /* Spark */
.market-table th:nth-child(5),.market-table td:nth-child(5){width:120px}  /* Vol */
.market-table th:nth-child(6),.market-table td:nth-child(6){width:150px}  /* Actions */
.market-section{margin-bottom:1.25rem}

/* Card */
.card-market{border-radius:16px;border:1px solid;box-shadow:0 6px 18px rgba(0,0,0,.06)}
html[data-theme="light"] .card-market{background:#fff;border-color:#e7eaee}
html[data-theme="dark"] .card-market{background:var(--card);border-color:var(--line);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.card-market .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.card-market .section-head .title{font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:.8rem;opacity:.85}
.card-market .section-head .source{font-size:.75rem;opacity:.6}

/* Table rhythm */
.card-market .table{--cell-py:.65rem;--cell-px:.75rem;  --bs-table-bg: var(--card); --bs-table-color: var(--text); }
.card-market thead th{font-weight:700;font-size:.82rem;text-transform:uppercase;padding:.5rem var(--cell-px)}
.card-market tbody td{padding:var(--cell-py) var(--cell-px);vertical-align:middle}

/* Borders + hover */
html[data-theme="light"] .card-market .table{
  --bs-table-border-color:#eef1f5;--bs-table-striped-bg:#fafbfc;--bs-table-hover-bg:#f6f8fa
}
html[data-theme="dark"] .card-market .table{
  --bs-table-border-color:var(--line);--bs-table-striped-bg:rgba(255,255,255,.02);--bs-table-hover-bg:rgba(255,255,255,.04)
}
html[data-theme="dark"] .card-market .table-hover tbody tr:hover{background-color:rgba(255,255,255,.05)!important;color:inherit}
html[data-theme="dark"] .card-market .table-hover tbody tr:hover td,
html[data-theme="dark"] .card-market .table-hover tbody tr:hover th{color:inherit!important}

/* Instrument cell */
.instrument-name{display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden}
.instrument-name .label-wrap{overflow:hidden}
.instrument-name .label-wrap>div{overflow:hidden;text-overflow:ellipsis}
.instrument-badge{border:1px solid currentColor;opacity:.25;font-size:.7rem;padding:.05rem .35rem;border-radius:999px}

/* Status dot + sparkline */
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;transform:translateY(-1px);margin-right:6px}
.status-dot.green{background:#198754}.status-dot.red{background:#dc3545}
.sparkline-wrapper{height:36px}
canvas.sparkline{display:block;margin:0 auto}

/* Price column */
.price{position:relative;text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.price-line{padding-right:22px;font-weight:600}
.price-time{padding-right:22px;opacity:.6}
.price::after{content:attr(data-dir);position:absolute;right:0;top:.1rem;width:22px;text-align:center;font-size:.9rem;line-height:1;opacity:.9}
.price[data-dir="▲"]::after{color:#198754}.price[data-dir="▼"]::after{color:#dc3545}

/* Change colors */
.change-positive{color:var(--accent,#00c97e)} .change-negative{color:#dc3545} .change-zero{color:#999}

/* Disabled actions (keep red/green) */
.btn-login-required{pointer-events:none}
.btn-pill{border-radius:999px}
.btn-outline-success:disabled,.btn-outline-danger:disabled{opacity:1!important}

.runtime-small { font-size: 0.7em; }

/* PRICING (compact) */
.pricing-card{border-radius:18px;border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.08);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
html[data-theme="dark"] .pricing-card{box-shadow:0 14px 36px rgba(0,0,0,.42)}
.pricing-card:hover{transform:translateY(-6px);border-color:rgba(0,201,126,.35);box-shadow:0 18px 46px rgba(0,0,0,.12)}
html[data-theme="dark"] .pricing-card:hover{box-shadow:0 18px 46px rgba(0,0,0,.55)}
.pricing-popular{border:2px solid rgba(0,201,126,.45);transform:translateY(-4px)}
.pricing-popular:hover{transform:translateY(-10px)}
.pricing-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:rgba(0,201,126,.14);border:1px solid rgba(0,201,126,.35);padding:.25rem .8rem;border-radius:999px;font-size:.8rem;font-weight:900}
.pricing-price{display:flex;align-items:baseline;gap:.5rem}
.pricing-amount{font-size:clamp(1.9rem,2.4vw,2.3rem);font-weight:900;letter-spacing:-.02em}
.pricing-unit{font-size:1rem;color:var(--muted)}
.pricing-beta{margin-top:.25rem;color:#e53935;font-weight:800}
.pricing-list{list-style:none;padding-left:0;margin:1.2rem 0 1.5rem}
.pricing-list li{display:flex;gap:.6rem;align-items:flex-start;margin:.55rem 0}
.pricing-list i{margin-top:.2rem;opacity:.9}
.pricing-is-beta .pricing-amount{text-decoration:line-through;text-decoration-thickness:.14em;text-decoration-color:#e53935;opacity:.75}
.pricing-yearly{display:flex;align-items:center;gap:.6rem;margin-top:.65rem;color:var(--muted);font-size:.95rem}
.pricing-yearly-label{opacity:.9}
.pricing-yearly-price{font-weight:900;color:var(--text)}
.pricing-yearly-save{margin-left:auto;background:rgba(0,201,126,.14);border:1px solid rgba(0,201,126,.35);color:var(--accent);padding:.12rem .6rem;border-radius:999px;font-size:.78rem;font-weight:900}
.pricing-is-beta .pricing-yearly-price{text-decoration:line-through;text-decoration-thickness:.12em;;text-decoration-color:#e53935;opacity:.8}
/* Buttons (Bootstrap-safe) */
.btn-pricing{--bs-btn-color:var(--text);--bs-btn-bg:rgba(255,255,255,.06);--bs-btn-border-color:var(--line);--bs-btn-hover-color:var(--text);--bs-btn-hover-bg:rgba(255,255,255,.10);--bs-btn-hover-border-color:rgba(0,201,126,.35);--bs-btn-active-color:var(--text);--bs-btn-active-bg:rgba(255,255,255,.14);--bs-btn-active-border-color:rgba(0,201,126,.45);border-radius:14px;padding:.9rem 1rem;font-weight:900;opacity:1;text-decoration:none;transition:transform .18s ease,filter .18s ease}
.btn-pricing:hover,.btn-pricing:focus{opacity:1;text-decoration:none;transform:translateY(-1px)}
.btn-pricing.btn-pricing-popular{--bs-btn-color:var(--bg);--bs-btn-bg:var(--text);--bs-btn-border-color:transparent;--bs-btn-hover-color:var(--bg);--bs-btn-hover-bg:var(--text);--bs-btn-hover-border-color:transparent;--bs-btn-active-color:var(--bg);--bs-btn-active-bg:var(--text);--bs-btn-active-border-color:transparent}
.btn-pricing.btn-pricing-popular:hover{filter:brightness(1.05)}