/* TheExpo T2.0 — Broker-grade UI (XM-style) · themes: dark / light / yellow / red */

/* ============ THEME TOKENS ============ */
:root, :root[data-theme="dark"] {
  --bg-deep: #0B0D12; --bg-elev: #12151C; --bg-card: #151922; --bg-card-2: #171B24;
  --line: rgba(255,255,255,0.08); --text: #EAECEF; --muted: #94A0B3;
  --accent: #1E6BFF; --accent-2: #0B4FE0; --accent-soft: rgba(30,107,255,0.16);
  --brand: #E4002B; --up: #16C784; --down: #EA3943;
  --shadow: 0 22px 50px -26px rgba(0,0,0,0.6);
}
:root[data-theme="light"] {
  --bg-deep: #EEF2F8; --bg-elev: #FFFFFF; --bg-card: #FFFFFF; --bg-card-2: #F7F9FC;
  --line: rgba(15,23,42,0.10); --text: #0B1220; --muted: #64748B;
  --accent: #1E6BFF; --accent-2: #0B4FE0; --accent-soft: rgba(30,107,255,0.10);
  --brand: #E4002B; --up: #12A868; --down: #E23744;
  --shadow: 0 18px 44px -24px rgba(15,23,42,0.22);
}
:root[data-theme="yellow"] {
  --bg-deep: #FBF6E9; --bg-elev: #FFFFFF; --bg-card: #FFFFFF; --bg-card-2: #FFFBF0;
  --line: rgba(120,90,0,0.14); --text: #1E1707; --muted: #8A7638;
  --accent: #E0A400; --accent-2: #B98500; --accent-soft: rgba(224,164,0,0.14);
  --brand: #E4002B; --up: #12A868; --down: #E23744;
  --shadow: 0 18px 44px -24px rgba(120,90,0,0.22);
}
:root[data-theme="red"] {
  --bg-deep: #FCF1F2; --bg-elev: #FFFFFF; --bg-card: #FFFFFF; --bg-card-2: #FFF6F6;
  --line: rgba(120,0,20,0.12); --text: #1A0B0D; --muted: #8A585E;
  --accent: #E4002B; --accent-2: #B00020; --accent-soft: rgba(228,0,43,0.10);
  --brand: #E4002B; --up: #12A868; --down: #E23744;
  --shadow: 0 18px 44px -24px rgba(120,0,20,0.22);
}
/* light-family = every theme except dark */
:root:not([data-theme="dark"]) { color-scheme: light; }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--bg-deep); color: var(--text); transition: background-color .3s, color .3s; }
.font-display { font-family: 'Sora', 'Outfit', sans-serif; letter-spacing: -0.01em; }
.font-mono, .font-mono-t { font-family: 'JetBrains Mono', monospace; }
::selection { background: var(--accent-soft); color: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120,130,150,0.4); border-radius: 6px; }
a { text-decoration: none; }
input, select, textarea, button { font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: none; }
select option { background: var(--bg-card); color: var(--text); }

.aurora-bg {
  background:
    radial-gradient(1100px 520px at 10% -12%, var(--accent-soft), transparent 55%),
    radial-gradient(900px 480px at 100% 0%, rgba(228,0,43,0.05), transparent 52%),
    var(--bg-deep);
}
.grain::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root:not([data-theme="dark"]) .grain::before { opacity: 0; }

.glass { background: var(--bg-elev); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); }
:root[data-theme="dark"] .glass { background: rgba(18,21,28,0.82); }
:root:not([data-theme="dark"]) .glass { background: rgba(255,255,255,0.9); }

.card-lux { background: var(--bg-card); border: 1px solid var(--line); border-radius: 18px; transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
:root[data-theme="dark"] .card-lux { background: linear-gradient(165deg, #171B24 0%, #12151C 100%); }
.card-lux:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: var(--shadow); }

.gold-text { background: linear-gradient(92deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 60%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn-gold { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff 12%), var(--accent)); color:#fff; font-weight:700; border:none; cursor:pointer; transition: transform .18s, box-shadow .3s, filter .18s; box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); color:#fff; }
.btn-gold:active { transform: translateY(0); }
.btn-buy { background: linear-gradient(180deg,#1fd68a,#16C784); color:#04150d; font-weight:800; border:none; cursor:pointer; transition:filter .18s, transform .18s; }
.btn-buy:hover { filter:brightness(1.06); transform:translateY(-1px); }
.btn-sell { background: linear-gradient(180deg,#f2515d,#EA3943); color:#fff; font-weight:800; border:none; cursor:pointer; transition:filter .18s, transform .18s; }
.btn-sell:hover { filter:brightness(1.06); transform:translateY(-1px); }
.text-up { color: var(--up) !important; }
.text-down { color: var(--down) !important; }

.portfolio-hero { background: radial-gradient(600px 200px at 10% -40%, rgba(255,255,255,0.18), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #fff 22%) 0%, var(--accent) 45%, var(--accent-2) 120%); border-radius: 20px; color:#fff; position:relative; overflow:hidden; }
.portfolio-hero, .portfolio-hero * { color:#fff !important; }
.portfolio-hero::after { content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%); }

.coin-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background: var(--bg-card-2); border:1px solid var(--line); color:var(--text); font-weight:600; font-size:13px; transition: all .2s; cursor:pointer; white-space:nowrap; }
.coin-chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.coin-chip.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
.coin-dot { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff !important; }

.market-strip { width:100%; }
.ticker { width:100%; overflow:hidden; white-space:nowrap; }
.ticker-track { display:flex; width:max-content; animation:ticker-scroll 32s linear infinite; will-change:transform; }
.ticker-group { display:flex; align-items:center; gap:30px; padding:9px 30px 9px 0; flex:none; }
.ticker-item { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-family:'JetBrains Mono',monospace; }
.ticker-label { color:var(--muted); }
.ticker-price { color:var(--text); font-weight:700; }
.ticker-change { font-weight:700; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state:paused; }
@keyframes ticker-scroll { from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@media (max-width:640px){ .ticker-track{animation-duration:24s}.ticker-group{gap:22px;padding-right:22px}.ticker-item{font-size:12px} }
@media (prefers-reduced-motion:reduce){ .ticker-track{animation:none} }

.seg { display:flex; gap:4px; padding:4px; border-radius:14px; background: var(--bg-deep); border:1px solid var(--line); }
.seg > button { flex:1; padding:10px 12px; border-radius:11px; font-weight:700; font-size:13px; color:var(--muted); background:transparent; border:none; cursor:pointer; transition:all .2s; }
.seg > button.active { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff 12%), var(--accent)); color:#fff; }

.bottom-nav { position:fixed; bottom:0; left:0; right:0; width:100%; z-index:45; background: var(--bg-elev); backdrop-filter: blur(16px); border-top:1px solid var(--line); display:flex; justify-content:space-around; align-items:stretch; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); box-sizing:border-box; }
.bottom-nav a { flex:1 1 20%; min-width:0; display:flex !important; flex-direction:column !important; align-items:center; justify-content:center; gap:3px; padding:6px 1px; color:var(--muted); font-size:10px; line-height:1.15; font-weight:600; text-decoration:none !important; transition:color .2s; }
.bottom-nav a > span:last-child { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bottom-nav a.active { color: var(--accent); }
.bottom-nav a.center { position:relative; }
.bottom-nav a.center .fab { width:46px; height:46px; margin-top:-22px; border-radius:16px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff 12%), var(--accent)); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
@media (min-width:1024px){ .bottom-nav{display:none;} .has-bottom-nav{padding-bottom:0 !important;} }
.has-bottom-nav { padding-bottom: 84px; }

.glow-ring { box-shadow: 0 0 0 1px var(--accent-soft), 0 0 30px -6px color-mix(in srgb, var(--accent) 40%, transparent); }

/* theme picker */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:var(--bg-card); color:var(--text); cursor:pointer; transition:all .2s; }
.theme-toggle:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.theme-menu-wrap { position:relative; }
.theme-menu { position:absolute; right:0; top:46px; z-index:60; min-width:170px; padding:6px; border-radius:14px; background:var(--bg-card); border:1px solid var(--line); box-shadow:var(--shadow); }
.theme-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:none; background:transparent; color:var(--text); font-size:13px; font-weight:600; border-radius:9px; cursor:pointer; text-align:left; }
.theme-menu button:hover { background: var(--accent-soft); }
.theme-menu .sw { width:16px; height:16px; border-radius:5px; border:1px solid var(--line); }

@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes fade-up { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.animate-fade-up { animation: fade-up 0.5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.35} }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--up); display:inline-block; animation: pulse-dot 1.4s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* Toast */
#toast-wrap { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast { min-width: 260px; max-width: 380px; padding: 12px 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--line); color: var(--text); box-shadow: var(--shadow); font-size: 14px; animation: fade-up 0.3s ease both; }
.toast .toast-title { font-weight: 600; }
.toast .toast-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.toast.success .toast-title { color: var(--up); }
.toast.error .toast-title { color: var(--down); }
.toast.info .toast-title { color: var(--accent); }

/* ============ LIGHT-FAMILY UTILITY OVERRIDES (all themes except dark) ============ */
:root:not([data-theme="dark"]) .text-white { color: var(--text) !important; }
:root:not([data-theme="dark"]) .text-slate-300 { color: color-mix(in srgb, var(--text) 78%, transparent) !important; }
:root:not([data-theme="dark"]) .text-slate-400 { color: var(--muted) !important; }
:root:not([data-theme="dark"]) .text-slate-500 { color: color-mix(in srgb, var(--muted) 85%, transparent) !important; }
:root:not([data-theme="dark"]) .bg-black\/40,
:root:not([data-theme="dark"]) .bg-black\/30,
:root:not([data-theme="dark"]) .bg-black\/25,
:root:not([data-theme="dark"]) .bg-black\/20 { background-color: var(--bg-card-2) !important; }
:root:not([data-theme="dark"]) .border-white\/10,
:root:not([data-theme="dark"]) .border-white\/5 { border-color: var(--line) !important; }
:root:not([data-theme="dark"]) input::placeholder,
:root:not([data-theme="dark"]) textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent) !important; }
/* accent-driven Tailwind gold utilities follow the active theme */
.text-gold { color: var(--accent) !important; }
.bg-gold\/10 { background-color: var(--accent-soft) !important; }
.border-gold\/10,.border-gold\/20,.border-gold\/25,.border-gold\/30 { border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.from-gold { --tw-gradient-from: var(--accent) !important; }
.to-gold-dark { --tw-gradient-to: var(--accent-2) !important; }
.accent-gold { accent-color: var(--accent); }
/* keep text light on intentionally-dark surfaces */
:root:not([data-theme="dark"]) .on-dark .text-white,
:root:not([data-theme="dark"]) .on-dark h1,
:root:not([data-theme="dark"]) .on-dark .font-display { color:#fff !important; }
:root:not([data-theme="dark"]) .on-dark .text-slate-300 { color: rgba(255,255,255,0.72) !important; }
:root:not([data-theme="dark"]) .on-dark .text-slate-400 { color: rgba(255,255,255,0.6) !important; }
:root:not([data-theme="dark"]) .portfolio-hero .bg-black\/25,
:root:not([data-theme="dark"]) .portfolio-hero .bg-black\/35,
:root:not([data-theme="dark"]) .portfolio-hero .bg-black\/20,
:root:not([data-theme="dark"]) .on-dark .bg-black\/20,
:root:not([data-theme="dark"]) .on-dark .bg-black\/25 { background-color: rgba(255,255,255,0.16) !important; }
:root:not([data-theme="dark"]) .portfolio-hero .border-white\/20,
:root:not([data-theme="dark"]) .portfolio-hero .border-white\/15 { border-color: rgba(255,255,255,0.35) !important; }