:root {
  --bg: #080d1a;
  --bg-2: #0e1528;
  --bg-grad-1: #080d1a;
  --bg-grad-2: #0c1427;
  --bg-grad-3: #111b32;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.12);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --accent: #00d6b2;
  --accent-2: #38bdf8;
  --accent-3: #a78bfa;
  --danger: #fb7185;
  --warning: #fcd34d;
  --success: #00d6b2;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.35);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --blur: 22px;
  --container: 1180px;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --aurora-1: rgba(0, 214, 178, 0.08);
  --aurora-2: rgba(56, 189, 248, 0.06);
  --aurora-3: rgba(167, 139, 250, 0.06);
  --grid-line: rgba(255, 255, 255, 0.015);
  --constellation-color: rgba(255, 255, 255, 0.25);
  --spotlight-glow: 0 12px 36px rgba(0, 214, 178, 0.05);
}

[data-theme="light"] {
  --bg: #f5f8ff;
  --bg-2: #ffffff;
  --bg-grad-1: #f8faff;
  --bg-grad-2: #f0f6ff;
  --bg-grad-3: #e6f0ff;
  --surface: rgba(255, 255, 255, 0.65);
  --surface-2: rgba(255, 255, 255, 0.88);
  --line: rgba(15, 23, 42, 0.06);
  --line-2: rgba(15, 23, 42, 0.12);
  --text: #0f172a;
  --muted: #475569;
  --muted-2: #64748b;
  --accent: #10b981;
  --accent-2: #0284c7;
  --accent-3: #8b5cf6;
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #10b981;
  --shadow: 0 24px 64px rgba(15, 23, 42, 0.06);
  --shadow-soft: 0 16px 32px rgba(15, 23, 42, 0.04);
  --aurora-1: rgba(16, 185, 129, 0.14);
  --aurora-2: rgba(2, 132, 199, 0.15);
  --aurora-3: rgba(139, 92, 246, 0.12);
  --grid-line: rgba(15, 23, 42, 0.035);
  --constellation-color: rgba(15, 23, 42, 0.12);
  --spotlight-glow: 0 12px 36px rgba(16, 185, 129, 0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }

/* Premium Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.01);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
  border: 2px solid transparent;
  background-clip: padding-box;
}

[data-theme="light"] ::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.01);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.12);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.24);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, canvas, svg { display: block; max-width: 100%; }
button, a, input, select, textarea, .chip-btn, .range-btn { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(100, 244, 197, .24); color: var(--text); }

.container { width: min(var(--container), 92%); margin-inline: auto; position: relative; z-index: 2; }
.section { padding: 92px 0; position: relative; content-visibility: auto; contain-intrinsic-size: 680px; }
.section-tight { padding: 62px 0; }
.section-dark { background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012)); border-block: 1px solid rgba(255,255,255,.05); }
.text-gradient { background: linear-gradient(135deg, #fff 0%, var(--accent) 48%, var(--accent-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.ambient-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -3;
  background:
    radial-gradient(circle at 50% 0%, var(--aurora-1), transparent 36%),
    linear-gradient(135deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 46%, var(--bg-grad-3) 100%);
}
.ambient-bg::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 90px);
  transform: perspective(980px) rotateX(64deg) translateY(-14%);
  animation: gridCruise 20s linear infinite;
  opacity: .54;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, transparent 76%);
}
.ambient-bg::after {
  content: "";
  position: absolute;
  inset: -300px;
  background-image:
    radial-gradient(circle, var(--constellation-color) 0 1px, transparent 1.6px),
    radial-gradient(circle, var(--aurora-2) 0 1px, transparent 1.8px);
  background-size: 96px 96px, 150px 150px;
  animation: starCruise 34s linear infinite;
  opacity: .34;
  will-change: transform;
}
.aurora {
  position: absolute;
  width: 58vw;
  height: 58vw;
  border-radius: 999px;
  filter: blur(92px);
  opacity: .32;
  mix-blend-mode: screen;
  animation: auroraFloat 18s var(--ease) infinite alternate;
  will-change: transform;
}
.aurora-1 { left: -18vw; top: -18vw; background: var(--aurora-1); }
.aurora-2 { right: -24vw; top: 8vh; background: var(--aurora-2); animation-delay: -6s; }
.aurora-3 { left: 34vw; bottom: -30vw; background: var(--aurora-3); animation-delay: -11s; }
.noise-layer { position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(120deg, transparent, rgba(255,255,255,.15), transparent); animation: sheenSweep 11s ease-in-out infinite; }
.float-orb { position: fixed; border-radius: 999px; pointer-events: none; z-index: -1; border: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), rgba(100,244,197,.07), transparent 64%); box-shadow: inset 0 0 30px rgba(255,255,255,.08); animation: orbFloat 12s var(--ease) infinite; will-change: transform; }
.float-orb.o1 { width: 160px; height: 160px; left: 6%; top: 18%; }
.float-orb.o2 { width: 210px; height: 210px; right: 8%; top: 54%; animation-delay: -5s; }
.float-orb.o3 { width: 120px; height: 120px; left: 18%; bottom: 12%; animation-delay: -8s; }
.cursor-glow { position: fixed; width: 320px; height: 320px; border-radius: 999px; pointer-events: none; z-index: -1; left: 0; top: 0; opacity: .33; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(100,244,197,.18), rgba(99,167,255,.08), transparent 65%); transition: opacity .25s ease; }
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 90; background: transparent; }
.scroll-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 22px rgba(100,244,197,.8); will-change: transform; }

.site-header { position: sticky; top: 12px; z-index: 80; padding: 12px 0; }
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 28px; background: rgba(8, 14, 28, .92); backdrop-filter: blur(24px) saturate(1.5); box-shadow: 0 16px 54px rgba(0,0,0,.22); }
[data-theme="light"] .nav-shell { background: rgba(255,255,255,.94); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 900; letter-spacing: -.7px; }
.logo-icon {
  width: auto;
  min-width: 40px;
  height: 40px;
  padding-inline: 8px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #07111f;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 32px rgba(100,244,197,.22);
}
.nav-links { display: flex; align-items: center; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.055); }
.nav-links a { color: var(--muted); font-size: 13px; font-weight: 800; padding: 11px 14px; border-radius: 999px; transition: .25s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,.09); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.mobile-menu-btn { display: none; width: 42px; height: 42px; border-radius: 15px; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.theme-toggle-mobile { display: none !important; }

.btn, .icon-btn, .pill, .chip-btn { border: 1px solid transparent; transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 900; position: relative; overflow: hidden; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active, .icon-btn:active, .chip-btn:active, .range-btn:active, .pill-btn:active { transform: translateY(1.5px) scale(0.94); transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1); }
.btn-primary { color: #06101d; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 18px 48px rgba(99,167,255,.24); }
.btn-secondary, .btn-glass, .btn-ghost { color: var(--text); border-color: var(--line); background: var(--surface); backdrop-filter: blur(18px); }
.btn-ghost { min-height: 40px; padding: 10px 14px; }
.btn-danger { color: #fff; background: linear-gradient(135deg, #fb7185, #f43f5e); }
.icon-btn { width: 42px; height: 42px; border-radius: 15px; border-color: var(--line); color: var(--text); background: var(--surface); display: grid; place-items: center; }
.icon-btn:hover { transform: translateY(-2px) scale(1.02); background: var(--surface-2); }

.hero-section { padding: 90px 0 92px; position: relative; min-height: 760px; display: flex; align-items: center; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr); gap: 56px; align-items: center; }
.hero-copy h1 { font-size: clamp(45px, 6vw, 82px); line-height: .96; letter-spacing: -4px; margin: 18px 0 24px; }
.hero-copy p { color: var(--muted); font-size: 17px; line-height: 1.78; max-width: 650px; margin-bottom: 30px; }
.badge, .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.badge { padding: 9px 13px; border: 1px solid rgba(100,244,197,.22); border-radius: 999px; background: rgba(100,244,197,.09); }
.badge span { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 18px var(--accent); animation: blink 1.5s ease-in-out infinite; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.trust-row { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 12px; max-width: 690px; }
.trust-row div, .metric-card { padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); backdrop-filter: blur(var(--blur)); }
.trust-row strong { display: block; font-size: 23px; letter-spacing: -1px; }
.trust-row span { color: var(--muted); font-size: 12px; font-weight: 700; }
.glass-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045)); backdrop-filter: blur(var(--blur)) saturate(1.35); box-shadow: var(--shadow); }
.glass-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.11) 45%, transparent 68%); transform: translateX(-120%); animation: shimmer 8s ease-in-out infinite; }
.hero-panel { border-radius: 38px; padding: 24px; transform-style: preserve-3d; }
.panel-top, .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.panel-top span, .mini-label, .muted { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .55px; }
.panel-top h2 { font-size: 34px; letter-spacing: -1.4px; margin-top: 4px; }
.pill-btn, .chip-btn, .range-btn { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.065); border-radius: 999px; padding: 9px 12px; font-size: 12px; font-weight: 900; transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease); }
.pill-btn:hover, .chip-btn:hover, .range-btn:hover, .range-btn.active { background: rgba(100,244,197,.13); border-color: rgba(100,244,197,.32); }
.chart-frame { position: relative; height: 210px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.16); border-radius: 28px; overflow: hidden; }
.chart-frame.large { height: 290px; }
.chart-frame canvas { width: 100%; height: 100%; }
.chart-loader, .chart-error { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 18px; color: var(--muted); font-size: 13px; font-weight: 800; background: radial-gradient(circle at 50% 0%, rgba(100,244,197,.1), transparent 50%); }
.chart-loader::after { content: ""; width: 42px; height: 3px; border-radius: 999px; margin-top: 38px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: loaderSweep 1.15s ease-in-out infinite; }
.chart-error { color: var(--danger); border: 0; cursor: pointer; }
.chart-error:hover { background: radial-gradient(circle at 50% 0%, rgba(255,123,147,.12), transparent 54%); }
.market-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.market-summary div { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.055); }
.market-summary span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; }
.market-summary strong { font-size: 16px; }

.section-header { max-width: 780px; margin: 0 auto 42px; text-align: center; }
.section-header h2, .section-mini h2, .content-block h2 { font-size: clamp(31px, 4vw, 52px); line-height: 1.04; letter-spacing: -2px; margin: 12px 0 14px; }
.section-header p, .content-block p { color: var(--muted); line-height: 1.75; }
.feature-grid, .insight-grid, .pricing-grid, .tools-grid, .news-grid, .stock-grid, .stats-grid, .home-market-grid { display: grid; gap: 18px; }
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.feature-card, .tool-card, .news-card, .price-card, .stock-card, .insight-card, .update-card { border: 1px solid var(--line); border-radius: 28px; padding: 24px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); box-shadow: var(--shadow-soft); transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.feature-card:hover, .tool-card:hover, .news-card:hover, .price-card:hover, .stock-card:hover, .insight-card:hover, .update-card:hover { transform: translateY(-6px); border-color: rgba(100,244,197,.34); background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.05)); box-shadow: var(--spotlight-glow), var(--shadow-soft); }
.feature-card > div:first-child, .tool-icon { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; font-size: 24px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(100,244,197,.18), rgba(99,167,255,.14)); }
.feature-card h3, .tool-card h3, .news-card h3, .stock-card h3, .insight-card h3, .update-card h3 { font-size: 19px; letter-spacing: -.5px; margin-bottom: 10px; }
.feature-card p, .tool-card p, .news-card p, .price-card p, .stock-card p, .insight-card p, .update-card p { color: var(--muted); line-height: 1.65; font-size: 14px; }
.feature-card button, .feature-card a { margin-top: 18px; display: inline-flex; font-size: 13px; font-weight: 900; color: var(--accent); background: none; border: 0; }
.feature-card button:hover, .feature-card a:hover { color: var(--accent-2); }

.split-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 42px; align-items: center; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
label { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .45px; }
input, select, textarea { width: 100%; margin-top: 8px; min-height: 46px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.065); color: var(--text); padding: 12px 14px; outline: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
input:focus, select:focus, textarea:focus { border-color: rgba(100,244,197,.45); box-shadow: 0 0 0 4px rgba(100,244,197,.08); background: rgba(255,255,255,.09); }
select option { color: #07111f; }
.calculator-card { border-radius: 32px; padding: 26px; }
.result-box { margin-top: 18px; padding: 22px; border-radius: 24px; border: 1px solid rgba(100,244,197,.22); background: linear-gradient(135deg, rgba(100,244,197,.13), rgba(99,167,255,.1)); }
.result-box span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; margin-bottom: 8px; }
.result-box strong { display: block; font-size: clamp(28px, 4vw, 40px); letter-spacing: -1.4px; color: var(--accent); }
.result-box small { color: var(--muted); }
.check-list { display: grid; gap: 13px; margin-top: 22px; }
.check-list div { display: flex; gap: 10px; color: var(--text); font-weight: 800; }
.check-list span { color: var(--accent); }

.home-market-grid { grid-template-columns: repeat(4, 1fr); }
.mini-stock-card { border: 1px solid var(--line); border-radius: 24px; padding: 18px; background: var(--surface); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; }
.mini-stock-card:hover { transform: translateY(-4px); border-color: rgba(100,244,197,.34); background: var(--surface-2); box-shadow: var(--spotlight-glow), var(--shadow-soft); }
.mini-stock-card .chart-frame { height: 130px; border-radius: 18px; margin-top: 12px; }

.page-hero { padding: 74px 0 40px; }
.page-title { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: end; }
.page-title h1 { font-size: clamp(42px, 6vw, 76px); letter-spacing: -3px; line-height: .96; margin: 12px 0; }
.page-title p { color: var(--muted); line-height: 1.75; max-width: 760px; }
.toolbar { display: grid; grid-template-columns: 1.15fr .7fr .7fr .7fr auto; gap: 12px; align-items: end; margin-top: 30px; padding: 16px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); backdrop-filter: blur(var(--blur)); }
.range-group, .chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.range-btn.active { color: #06101d; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.stats-grid { grid-template-columns: repeat(4, 1fr); margin-top: 22px; }
.metric-card strong { display: block; font-size: 26px; letter-spacing: -1px; margin-top: 6px; }
.metric-card span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.stock-grid { display: flex !important; flex-direction: column !important; gap: 38px !important; }
.stock-card { padding: 18px; min-height: 390px; }
.stock-card.loading { opacity: .88; }
.stock-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.stock-title h3 { margin-bottom: 3px; }
.stock-title span { color: var(--muted); font-size: 12px; font-weight: 800; }
.stock-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 14px; }
.stock-price div { padding: 11px; border-radius: 15px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07); }
.stock-price span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 900; margin-bottom: 5px; }
.stock-price strong { font-size: 13px; }
.positive { color: var(--success) !important; }
.negative { color: var(--danger) !important; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.compare-drawer { position: sticky; bottom: 88px; z-index: 50; margin-top: 18px; border: 1px solid var(--line); border-radius: 28px; padding: 14px; background: rgba(8,14,28,.74); backdrop-filter: blur(22px); display: none; box-shadow: var(--shadow); }
.compare-drawer.active { display: block; }
.compare-layout { display: grid; grid-template-columns: 1fr minmax(280px, 520px); gap: 16px; align-items: center; }
.compare-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.compare-tags span { padding: 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 900; }
.sector-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 22px; }
.sector-item { min-height: 90px; padding: 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.sector-item strong { display: block; margin-top: 8px; font-size: 22px; }

.news-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items: start; }
.featured-news { min-height: 420px; border-radius: 34px; padding: 30px; background: radial-gradient(circle at 0 0, rgba(100,244,197,.16), transparent 42%), linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); }
.news-grid { grid-template-columns: repeat(3, 1fr); }
.news-card { min-height: 240px; display: flex; flex-direction: column; }
.news-card .tag { align-self: flex-start; }
.news-card p { margin: 10px 0 18px; flex: 1; }
.tag { display: inline-flex; padding: 7px 10px; border-radius: 999px; border: 1px solid rgba(100,244,197,.2); background: rgba(100,244,197,.08); color: var(--accent); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.tag.tag-accent {
  background: rgba(0, 255, 208, 0.06);
  border-color: rgba(0, 255, 208, 0.2);
  color: var(--accent);
}
[data-theme="light"] .tag.tag-accent {
  background: rgba(16, 185, 129, 0.06) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
  color: var(--accent) !important;
}
.tag.tag-blue {
  background: rgba(0, 162, 255, 0.06);
  border-color: rgba(0, 162, 255, 0.2);
  color: var(--accent-2);
}
[data-theme="light"] .tag.tag-blue {
  background: rgba(2, 132, 199, 0.06) !important;
  border-color: rgba(2, 132, 199, 0.2) !important;
  color: var(--accent-2) !important;
}
.tag.tag-pink {
  background: rgba(255, 101, 132, 0.06);
  border-color: rgba(255, 101, 132, 0.2);
  color: var(--danger);
}
[data-theme="light"] .tag.tag-pink {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: var(--danger) !important;
}
.news-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 800; flex-wrap: wrap; }
.side-panel { display: grid; gap: 14px; }

.tools-grid { grid-template-columns: repeat(3, 1fr); }
.tool-card .mini-result { margin-top: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.055); color: var(--accent); font-weight: 900; }
.feature-list-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.feature-pill { min-height: 58px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 850; }
.update-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.update-card { padding: 18px; border-radius: 22px; }
.update-card strong { color: var(--accent); }

.cta-section { padding-bottom: 120px; }
.cta-box { text-align: center; border-radius: 36px; padding: 54px 26px; background: radial-gradient(circle at 50% 0%, rgba(100,244,197,.22), transparent 38%), linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cta-box h2 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -2.4px; line-height: 1; margin-bottom: 14px; }
.cta-box p { color: var(--muted); max-width: 700px; line-height: 1.7; margin: 0 auto 24px; }
.footer { padding: 32px 0 32px; color: var(--muted); border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }

.ios-dock { display: none !important; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 85; display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 28px; border: 1px solid var(--line); background: rgba(8,14,28,.72); backdrop-filter: blur(24px) saturate(1.4); box-shadow: var(--shadow); }
[data-theme="light"] .ios-dock { background: rgba(255,255,255,.74); }
.ios-dock a, .ios-dock button { min-width: 58px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; gap: 2px; padding: 8px 10px; border-radius: 20px; font-weight: 900; transition: transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease); }
.ios-dock a:active, .ios-dock button:active { transform: translateY(1px) scale(0.94); transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1); }
.ios-dock span { font-size: 10px; }
.ios-dock .active, .ios-dock a:hover, .ios-dock button:hover { color: var(--text); background: rgba(255,255,255,.09); }

.app-modal { width: min(660px, 92vw); max-height: min(82vh, 720px); border: 0; padding: 0; background: transparent; color: var(--text); margin: auto; overflow: visible; }
.app-modal::backdrop { background: rgba(0,0,0,.58); backdrop-filter: blur(8px); }
.modal-card { max-height: min(82vh, 720px); overflow: auto; border-radius: 30px; border: 1px solid var(--line); background: rgba(8,14,28,.92); backdrop-filter: blur(28px); padding: 26px; box-shadow: var(--shadow); animation: modalIn .28s var(--ease); }
[data-theme="light"] .modal-card { background: rgba(255,255,255,.94); }
.modal-close { float: right; }
.toast-wrap { position: fixed; top: 86px; right: 18px; z-index: 120; display: grid; gap: 10px; }
.toast { padding: 13px 15px; border-radius: 16px; border: 1px solid var(--line); background: rgba(8,14,28,.86); color: var(--text); backdrop-filter: blur(18px); box-shadow: var(--shadow-soft); font-size: 13px; font-weight: 800; animation: toastIn .32s var(--ease); }
[data-theme="light"] .toast { background: rgba(255,255,255,.92); }

.skeleton { position: relative; overflow: hidden; color: transparent !important; border-radius: 10px; background: rgba(255,255,255,.08); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); animation: skeleton 1.4s ease-in-out infinite; }
.empty-state { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 26px; background: rgba(255,255,255,.035); }
.watchlist-panel { display: grid; gap: 12px; margin-top: 16px; }
.watch-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.055); }
.watch-row span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; margin-bottom: 4px; }
.watch-row strong { font-size: 15px; }
.modal-actions { margin: 18px 0 0; }
.modal-empty { margin-top: 16px; }
.hidden { display: none !important; }
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

main {
  animation: pageEntrance 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  will-change: opacity, transform;
}

@keyframes pageEntrance {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes auroraFloat { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(7vw, 5vh, 0) scale(1.14) rotate(12deg); } 100% { transform: translate3d(-4vw, 8vh, 0) scale(.98) rotate(-10deg); } }
@keyframes gridCruise { from { transform: perspective(980px) rotateX(64deg) translateY(-14%); } to { transform: perspective(980px) rotateX(64deg) translateY(8%); } }
@keyframes starCruise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(300px, 300px, 0); } }
@keyframes orbFloat { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(22px,-28px,0) rotate(5deg); } }
@keyframes shimmer { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes blink { 0%,100% { opacity: .42; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.22); } }
@keyframes sheenSweep { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes skeleton { to { transform: translateX(100%); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes loaderSweep { 0%, 100% { transform: translateX(-28px); opacity: .35; } 50% { transform: translateX(28px); opacity: 1; } }

@media (max-width: 1080px) {
  .hero-grid, .split-grid, .news-layout { grid-template-columns: 1fr; }
  .stock-grid, .feature-grid, .tools-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .home-market-grid, .stats-grid, .sector-strip, .update-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-list-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 780px) {
  :root { --blur: 14px; }
  .cursor-glow, .float-orb, .aurora-3 { display: none; }
  .site-header { top: 0; padding-top: calc(8px + env(safe-area-inset-top)); }
  .nav-shell { border-radius: 22px; }
  .nav-links { position: fixed; left: 4%; right: 4%; top: calc(80px + env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: stretch; padding: 12px; border-radius: 24px; background: rgba(8,14,28,.94); backdrop-filter: blur(22px); box-shadow: var(--shadow); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(.98); transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s var(--ease); }
  [data-theme="light"] .nav-links { background: rgba(255,255,255,.94); }
  .menu-open .nav-links { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
  .mobile-menu-btn { display: grid; place-items: center; }
  .mobile-menu-btn.active { border-color: rgba(100,244,197,.34); background: rgba(100,244,197,.12); }
  .nav-actions .btn-ghost { display: none; }
  .hero-section { min-height: auto; padding: 62px 0 72px; }
  .hero-grid { gap: 34px; }
  .hero-copy h1 { font-size: clamp(39px, 13vw, 58px); }
  .hero-copy h1, .page-title h1 { letter-spacing: -2px; }
  .section { padding: 42px 0 !important; }
  .section-tight { padding: 30px 0 !important; }
  .section-header { margin-bottom: 20px !important; }
  
  .form-grid, .compare-layout { grid-template-columns: 1fr; }
  .trust-row { grid-template-columns: repeat(2, 1fr) !important; }
  .market-summary, .stock-price { grid-template-columns: repeat(3, 1fr) !important; }
  
  .stock-grid, .feature-grid, .tools-grid, .news-grid, .pricing-grid, .feature-list-grid, .update-grid { grid-template-columns: 1fr; }
  .home-market-grid, .stats-grid, .sector-strip { grid-template-columns: repeat(2, 1fr); }
  .page-title { grid-template-columns: 1fr; }
  .chart-frame.large { height: 240px; }
  
  .feature-card, .tool-card, .news-card, .price-card, .stock-card, .insight-card, .update-card, .glass-card {
    padding: 16px !important;
    border-radius: 18px !important;
  }
  
  .toolbar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }
  .toolbar label:first-child {
    grid-column: span 2;
  }
  .toolbar > div:last-child {
    grid-column: span 2;
  }
  
  .ios-dock { display: flex !important; width: min(96vw, 460px); justify-content: space-between; bottom: max(8px, env(safe-area-inset-bottom)); padding: 6px; gap: 2px; }
  .ios-dock a, .ios-dock button { min-width: 0; flex: 1; padding: 6px 2px; font-size: 9px; }
  .ios-dock a.active, .ios-dock button.active {
    color: var(--accent) !important;
    background: rgba(100, 244, 197, 0.08) !important;
    border-radius: 14px;
  }
  [data-theme="light"] .ios-dock a.active, [data-theme="light"] .ios-dock button.active {
    color: #0284c7 !important;
    background: rgba(2, 132, 199, 0.08) !important;
    border-radius: 14px;
  }
  
  .theme-toggle-mobile {
    display: inline-flex !important;
    min-height: 44px;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    font-weight: 800;
    width: 100%;
    align-items: center;
    justify-content: center;
    color: var(--text);
  }
  
  .toast-wrap { left: 12px; right: 12px; top: calc(16px + env(safe-area-inset-top)); }
  .toast { width: 100%; }
  .app-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 85vh !important;
    margin: auto auto 0 auto !important;
    border-radius: 28px 28px 0 0 !important;
    border-bottom: 0 !important;
  }
  .modal-card {
    border-radius: 28px 28px 0 0 !important;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom)) 20px !important;
    border-bottom: 0 !important;
    animation: bottomSheetIn 0.35s cubic-bezier(0.32, 0.94, 0.6, 1) forwards !important;
  }
  .modal-card::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--line-2);
    border-radius: 99px;
    margin: -12px auto 16px auto;
  }
  .watch-row { grid-template-columns: 1fr; }
  .btn { white-space: normal; text-align: center; }
  [style*="overflow-x: auto"] { -webkit-overflow-scrolling: touch; }
}

@keyframes bottomSheetIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

.chip-btn.active { color: #06101d; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
input[type="radio"], input[type="checkbox"] { width: auto; min-height: auto; margin: 0 8px 0 0; accent-color: var(--accent); }
#riskQuiz { display: grid; gap: 10px; margin-top: 12px; }
#riskQuiz label { display: flex; align-items: center; text-transform: none; letter-spacing: 0; color: var(--text); font-size: 13px; font-weight: 750; }


/* ==============================
   SIKAYA v4 Luxury+ Optimized UI
   Tambahan visual banyak, tapi dibuat low-cost. Karena GPU juga punya harga diri.
============================== */
.mesh-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.constellation-layer {
  position: absolute;
  inset: -300px;
  pointer-events: none;
  will-change: transform;
}

.mesh-layer {
  background:
    radial-gradient(circle at 18% 28%, var(--aurora-1), transparent 30%),
    radial-gradient(circle at 86% 18%, var(--aurora-2), transparent 34%),
    radial-gradient(circle at 55% 88%, var(--aurora-3), transparent 35%);
  filter: blur(18px);
  opacity: .78;
  animation: meshBreath 12s ease-in-out infinite alternate;
}

.constellation-layer {
  background-image:
    radial-gradient(circle, var(--constellation-color) 0 1px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 44%, var(--line) 45%, transparent 46% 100%);
  background-size: 120px 120px, 240px 240px;
  opacity: .22;
  animation: constellationDrift 32s linear infinite;
}

.luxury-ribbon-bg {
  position: fixed;
  inset: auto -10vw 8vh -10vw;
  height: 36vh;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--aurora-1), var(--aurora-2), transparent);
  filter: blur(28px);
  transform: rotate(-4deg);
  animation: ribbonFloat 10s ease-in-out infinite alternate;
  opacity: 0.35;
  will-change: transform, opacity;
}

.section-luxury {
  background:
    radial-gradient(circle at 10% 0%, rgba(100,244,197,.08), transparent 32%),
    radial-gradient(circle at 90% 20%, rgba(99,167,255,.07), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}

.luxury-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.luxury-tile,
.fix-row,
.compact-news {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045)),
    radial-gradient(circle at 100% 0%, rgba(100,244,197,.12), transparent 30%);
  box-shadow: 0 22px 70px rgba(0,0,0,.20);
  backdrop-filter: blur(18px);
}

.luxury-tile {
  min-height: 190px;
  border-radius: 30px;
  padding: 24px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.luxury-tile::after,
.fix-row::after,
.news-card::after,
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.10) 48%, transparent 62% 100%);
  transform: translateX(-130%);
  transition: transform .75s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.luxury-tile:hover::after,
.fix-row:hover::after,
.news-card:hover::after,
.feature-card:hover::after {
  transform: translateX(130%);
}

.luxury-tile:hover {
  transform: translateY(-8px);
  border-color: rgba(100,244,197,.34);
  box-shadow: var(--spotlight-glow), 0 22px 70px rgba(0,0,0,.20);
}

.luxury-tile span {
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .08em;
}

.luxury-tile h3 {
  margin: 16px 0 10px;
  font-size: 18px;
  letter-spacing: -.5px;
}

.luxury-tile p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 13px;
}

.fix-list {
  display: grid;
  gap: 12px;
}

.fix-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: center;
  border-radius: 22px;
  padding: 18px 20px;
  transition: transform .25s ease, border-color .25s ease;
}

.fix-row:hover {
  transform: translateX(8px);
  border-color: rgba(99,167,255,.34);
}

.fix-row strong {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: .12em;
}

.fix-row span {
  color: var(--text);
  font-weight: 800;
}

.compact-news h3 {
  font-size: 18px;
  line-height: 1.25;
}

.news-card a.chip-btn {
  text-decoration: none;
}

.feature-card .chip-btn {
  margin-top: 14px;
}

.site-header {
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 18px 60px rgba(0,0,0,.18);
}

.glass-card,
.feature-card,
.metric-card,
.tool-card,
.news-card,
.stock-card,
.price-card,
.security-card,
.road-item,
.luxury-tile {
  transform: translateZ(0);
  will-change: transform;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
.range-btn:focus-visible,
.chip-btn:focus-visible,
.pill-btn:focus-visible {
  outline: 3px solid rgba(100,244,197,.42);
  outline-offset: 4px;
}

.feature-card,
.tool-card,
.news-card,
.stock-card,
.metric-card,
.luxury-tile,
.update-card,
.fix-row,
.trust-row div,
.watch-row {
  min-width: 0;
}

.feature-card h3,
.tool-card h3,
.news-card h3,
.stock-card h3,
.luxury-tile h3,
.update-card h3,
.metric-card strong {
  overflow-wrap: anywhere;
}

@keyframes meshBreath {
  from { transform: scale(1) translate3d(0,0,0); opacity:.62; }
  to { transform: scale(1.06) translate3d(1.5vw,-1vh,0); opacity:.9; }
}

@keyframes constellationDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(240px, 240px, 0); }
}

@keyframes ribbonFloat {
  from { transform: rotate(-4deg) translate3d(0, 0, 0); opacity:.55; }
  to { transform: rotate(-2deg) translate3d(0, -18px, 0); opacity:.88; }
}

@media (max-width: 980px) {
  .luxury-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .luxury-grid { grid-template-columns: 1fr; }
  .fix-row { grid-template-columns: 46px 1fr; padding: 16px; }
  .mesh-layer { filter: blur(30px); opacity:.5; }
  .constellation-layer { opacity:.12; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh-layer,
  .constellation-layer,
  .luxury-ribbon-bg { animation: none !important; }
}

/* =========================================================
   SIKAYA v5 Background Motion Pack
   Applied: Aurora Liquid Flow, Stock Pulse Wave, Floating Market Tickers,
   Luxury Light Sweep, Magnetic Glow Cursor, Noise Grain Overlay.
   ========================================================= */
.ambient-bg {
  background:
    radial-gradient(circle at 18% 8%, var(--aurora-1), transparent 30%),
    radial-gradient(circle at 82% 14%, var(--aurora-2), transparent 34%),
    linear-gradient(135deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 46%, var(--bg-grad-3) 100%);
}

.aurora {
  filter: blur(108px) saturate(1.28);
  opacity: .38;
  animation-name: auroraLiquidV5;
  animation-duration: 24s;
}

.aurora-1 {
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle at 30% 30%, var(--aurora-1), transparent 68%);
}

.aurora-2 {
  width: 66vw;
  height: 66vw;
  background: radial-gradient(circle at 45% 35%, var(--aurora-2), transparent 70%);
}

.aurora-3 {
  width: 56vw;
  height: 56vw;
  background: radial-gradient(circle at 40% 40%, var(--aurora-3), transparent 72%);
}

.stock-wave-bg {
  position: absolute;
  inset: 8% -10% auto -10%;
  height: 44vh;
  min-height: 300px;
  pointer-events: none;
  overflow: hidden;
  animation: waveBreathV5 5.5s ease-in-out infinite;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  will-change: transform;
}

.stock-wave-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% + 1400px);
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg width='1440' height='420' viewBox='0 0 1440 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 290 C90 245 134 265 218 226 C308 184 354 222 428 178 C512 128 564 150 640 116 C738 72 778 118 860 92 C944 66 1004 112 1086 88 C1196 56 1280 88 1440 42' fill='none' stroke='rgba(100,244,197,0.72)' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M0 330 C130 300 210 315 310 272 C410 228 455 260 552 214 C650 168 730 198 810 158 C920 104 1014 146 1108 112 C1230 68 1320 106 1440 82' fill='none' stroke='rgba(99,167,255,0.52)' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M0 210 C90 198 150 178 220 192 C320 212 370 138 462 150 C566 164 610 98 720 112 C830 126 894 70 990 82 C1100 96 1190 54 1440 94' fill='none' stroke='rgba(255,255,255,0.24)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 1400px 420px;
  background-repeat: repeat-x;
  animation: stockWaveSlideV5 18s linear infinite;
  will-change: transform;
}

.stock-wave-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(100,244,197,.18) 42%, rgba(99,167,255,.18) 50%, transparent 62%);
  transform: translateX(-70%);
  animation: waveScannerV5 7.5s ease-in-out infinite;
}

.market-ticker-bg {
  position: absolute;
  inset: auto 0 9vh 0;
  height: 118px;
  pointer-events: none;
  overflow: hidden;
  opacity: .18;
  transform: rotate(-3deg);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 18px;
  white-space: nowrap;
  will-change: transform;
}

.ticker-track span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: rgba(239,248,255,.76);
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 900;
  letter-spacing: .12em;
  box-shadow: 0 16px 46px rgba(0,0,0,.18);
}

.ticker-track-a { animation: tickerLeftV5 28s linear infinite; }
.ticker-track-b { margin-top: 14px; animation: tickerRightV5 34s linear infinite; opacity: .76; }

.luxury-light-sweep {
  position: absolute;
  inset: -30% -20%;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 31%, rgba(255,255,255,.08) 43%, rgba(100,244,197,.095) 50%, rgba(99,167,255,.07) 56%, transparent 68%);
  transform: translateX(-58%) rotate(0deg);
  animation: luxurySweepV5 12s cubic-bezier(.22,1,.36,1) infinite;
  mix-blend-mode: screen;
  opacity: .68;
}

.grain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .105;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.12) 0 1px, transparent 1.7px),
    radial-gradient(circle at 40% 80%, rgba(100,244,197,.14) 0 1px, transparent 1.8px);
  background-size: 92px 92px, 128px 128px, 160px 160px;
  animation: grainShiftV5 2.8s steps(4) infinite;
}

.cursor-glow {
  width: 420px;
  height: 420px;
  opacity: .28;
  background:
    radial-gradient(circle, var(--aurora-1) 0%, var(--aurora-2) 40%, transparent 70%);
  filter: blur(6px) saturate(1.15);
  mix-blend-mode: screen;
  transition: width 0.4s var(--ease), height 0.4s var(--ease), opacity 0.4s ease, background 0.4s ease;
}

.cursor-glow.hovering {
  width: 580px;
  height: 580px;
  opacity: .45;
  background:
    radial-gradient(circle, var(--aurora-1) 0%, var(--aurora-3) 50%, transparent 70%);
}

.glass-card,
.feature-card,
.update-card,
.metric-card,
.calculator-card,
.stock-card,
.news-card,
.tool-card,
.price-card,
.road-item,
details {
  box-shadow: 0 24px 75px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07);
}

.hero-section::after,
.page-hero::after,
.section-luxury::after {
  content: "";
  position: absolute;
  inset: 10% 6% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100,244,197,.28), rgba(99,167,255,.24), transparent);
  box-shadow: 0 0 36px rgba(100,244,197,.18);
  animation: sectionLightPulseV5 4.8s ease-in-out infinite;
  pointer-events: none;
}

.text-gradient {
  background-size: 220% auto;
  animation: gradientTextShiftV5 7s ease-in-out infinite;
}

@keyframes auroraLiquidV5 {
  0% { transform: translate3d(0,0,0) scale(1) rotate(0deg); border-radius: 46% 54% 57% 43% / 45% 44% 56% 55%; }
  35% { transform: translate3d(6vw,4vh,0) scale(1.12) rotate(16deg); border-radius: 58% 42% 43% 57% / 52% 62% 38% 48%; }
  70% { transform: translate3d(-3vw,8vh,0) scale(.98) rotate(-12deg); border-radius: 42% 58% 61% 39% / 59% 45% 55% 41%; }
  100% { transform: translate3d(4vw,-2vh,0) scale(1.08) rotate(10deg); border-radius: 55% 45% 49% 51% / 42% 57% 43% 58%; }
}

@keyframes stockWaveSlideV5 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-1400px, 0, 0); }
}

@keyframes waveBreathV5 {
  0%, 100% { opacity: .18; transform: translate3d(0, 0, 0); }
  50% { opacity: .32; transform: translate3d(0, -8px, 0); }
}

@keyframes waveScannerV5 {
  0%, 12% { transform: translateX(-80%); opacity: 0; }
  30%, 62% { opacity: .62; }
  100% { transform: translateX(95%); opacity: 0; }
}

@keyframes tickerLeftV5 {
  from { transform: translateX(2%); }
  to { transform: translateX(-52%); }
}

@keyframes tickerRightV5 {
  from { transform: translateX(-48%); }
  to { transform: translateX(2%); }
}

@keyframes luxurySweepV5 {
  0%, 16% { transform: translateX(-64%); opacity: 0; }
  36%, 64% { opacity: .7; }
  100% { transform: translateX(64%); opacity: 0; }
}

@keyframes grainShiftV5 {
  0% { transform: translate(0,0); }
  25% { transform: translate(-1.5%,1%); }
  50% { transform: translate(1%,-1.5%); }
  75% { transform: translate(1.5%,1.5%); }
  100% { transform: translate(0,0); }
}

@keyframes sectionLightPulseV5 {
  0%, 100% { opacity: .28; transform: scaleX(.88); }
  50% { opacity: .86; transform: scaleX(1); }
}

@keyframes gradientTextShiftV5 {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 780px) {
  .stock-wave-bg { height: 260px; opacity: .18; }
  .market-ticker-bg { display: none; }
  .luxury-light-sweep { opacity: .36; animation-duration: 15s; }
  .grain-overlay { opacity: .07; }
}

@media (prefers-reduced-motion: reduce) {
  .stock-wave-bg,
  .stock-wave-bg::after,
  .luxury-light-sweep,
  .ticker-track,
  .grain-overlay,
  .text-gradient {
    animation: none !important;
  }
}

/* Calm motion pass: keep the interface premium without flicker. */
.ambient-bg::before,
.ambient-bg::after,
.noise-layer,
.glass-card::before,
.luxury-light-sweep,
.grain-overlay,
.hero-section::after,
.page-hero::after,
.section-luxury::after,
.text-gradient {
  animation: none !important;
}

.badge span {
  animation: none !important;
  opacity: .9;
  transform: none;
}

.aurora {
  animation-duration: 46s !important;
  opacity: .24;
}

.mesh-layer {
  animation-duration: 34s !important;
  opacity: .48;
}

.constellation-layer {
  animation-duration: 80s !important;
  opacity: .12;
}

.float-orb,
.luxury-ribbon-bg {
  animation-duration: 42s !important;
  opacity: .36;
}

.stock-wave-bg {
  animation: stockWaveSlideV5 56s linear infinite !important;
  opacity: .14;
}

.stock-wave-bg::after {
  animation: none !important;
  opacity: 0;
}

.ticker-track-a {
  animation-duration: 72s !important;
}

.ticker-track-b {
  animation-duration: 86s !important;
}

.chart-loader::after {
  animation-duration: 2.4s;
  opacity: .7;
}

.hero-copy h1 {
  max-width: 520px;
}

/* Background performance pass: static premium depth, no flicker, lower GPU cost. */
:root {
  --blur: 14px;
}

.ambient-bg {
  background:
    radial-gradient(circle at 14% 10%, rgba(100,244,197,.18), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(99,167,255,.16), transparent 31%),
    radial-gradient(circle at 52% 86%, rgba(124,58,237,.12), transparent 36%),
    linear-gradient(135deg, var(--bg) 0%, #071120 48%, #040713 100%) !important;
}

.ambient-bg::before {
  display: block !important;
  inset: 0 !important;
  opacity: .18 !important;
  transform: none !important;
  animation: none !important;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%) !important;
}

.ambient-bg::after {
  display: block !important;
  inset: 0 !important;
  opacity: .42 !important;
  animation: none !important;
  background:
    radial-gradient(circle at 28% 24%, rgba(100,244,197,.13) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 38%, rgba(99,167,255,.11) 0 1px, transparent 1.8px),
    linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.035) 42%, transparent 44% 100%) !important;
  background-size: 140px 140px, 190px 190px, 360px 360px !important;
}

.mesh-layer {
  display: block !important;
  opacity: .34 !important;
  filter: blur(10px) !important;
  animation: none !important;
  background:
    radial-gradient(circle at 12% 38%, rgba(100,244,197,.2), transparent 25%),
    radial-gradient(circle at 88% 30%, rgba(99,167,255,.18), transparent 28%),
    radial-gradient(circle at 54% 92%, rgba(168,85,247,.13), transparent 34%) !important;
}

.stock-wave-bg {
  display: block !important;
  opacity: .10 !important;
  animation: none !important;
  transform: none !important;
}

.stock-wave-bg::after,
.aurora,
.market-ticker-bg,
.constellation-layer,
.noise-layer,
.grain-overlay,
.luxury-light-sweep,
.luxury-ribbon-bg,
.float-orb,
.cursor-glow {
  display: none !important;
  animation: none !important;
}

[data-theme="light"] .ambient-bg {
  background:
    radial-gradient(circle at 14% 10%, rgba(20,184,166,.16), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(37,99,235,.12), transparent 34%),
    radial-gradient(circle at 50% 90%, rgba(124,58,237,.08), transparent 40%),
    linear-gradient(135deg, #eef6ff 0%, #f8fbff 52%, #edf5ff 100%) !important;
}

[data-theme="light"] .ambient-bg::before {
  opacity: .32 !important;
  background:
    linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px) !important;
}

[data-theme="light"] .ambient-bg::after {
  opacity: .34 !important;
}

[data-theme="light"] .mesh-layer {
  opacity: .28 !important;
}

[data-theme="light"] .stock-wave-bg {
  opacity: .08 !important;
}

/* ==========================================
   SIKAYA Premium Light Mode Style Overrides
   ========================================== */

/* Form Control Contrast Adjustments */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.09) !important;
  color: #0f172a !important;
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12) !important;
}
[data-theme="light"] select option {
  color: #0f172a !important;
  background: #ffffff !important;
}

/* Glassmorphism Navigation Indicator */
[data-theme="light"] .nav-links {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .nav-links a {
  color: #475569 !important;
}
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

/* Frosted Cards & Containers Overrides */
[data-theme="light"] .feature-card,
[data-theme="light"] .tool-card,
[data-theme="light"] .news-card,
[data-theme="light"] .price-card,
[data-theme="light"] .stock-card,
[data-theme="light"] .insight-card,
[data-theme="light"] .update-card,
[data-theme="light"] .mini-stock-card,
[data-theme="light"] .calculator-card,
[data-theme="light"] .glass-card,
[data-theme="light"] .luxury-tile,
[data-theme="light"] .fix-row,
[data-theme="light"] .compact-news {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

[data-theme="light"] .feature-card:hover,
[data-theme="light"] .tool-card:hover,
[data-theme="light"] .news-card:hover,
[data-theme="light"] .price-card:hover,
[data-theme="light"] .stock-card:hover,
[data-theme="light"] .insight-card:hover,
[data-theme="light"] .update-card:hover,
[data-theme="light"] .mini-stock-card:hover,
[data-theme="light"] .luxury-tile:hover,
[data-theme="light"] .fix-row:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow: var(--spotlight-glow), 0 16px 36px rgba(15, 23, 42, 0.06) !important;
}

/* Visual Components & Subtleties */
[data-theme="light"] .chart-frame {
  background: rgba(15, 23, 42, 0.02) !important;
  border-color: rgba(15, 23, 42, 0.05) !important;
}
[data-theme="light"] .market-summary div,
[data-theme="light"] .stock-price div,
[data-theme="light"] .watch-row,
[data-theme="light"] .tool-card .mini-result {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .compare-drawer {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .compare-tags span {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

/* Badges & Tags Overrides */
[data-theme="light"] .badge {
  border-color: rgba(16, 185, 129, 0.2) !important;
  background: rgba(16, 185, 129, 0.06) !important;
  color: #10b981 !important;
}
[data-theme="light"] .tag {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.16) !important;
  color: #10b981 !important;
}

/* Other UI Components overrides */
[data-theme="light"] .tab-btn {
  color: #475569 !important;
}
[data-theme="light"] .tab-btn:hover {
  color: #0f172a !important;
}
[data-theme="light"] .tab-btn.active {
  color: #ffffff !important;
}

[data-theme="light"] .sector-item {
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease) !important;
}
[data-theme="light"] .sector-item:hover {
  transform: translateY(-2px) !important;
  border-color: var(--sector-color, rgba(16, 185, 129, 0.3)) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 24px var(--sector-glow, rgba(15, 23, 42, 0.04)) !important;
}

[data-theme="light"] .cta-box {
  background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.12), transparent 38%),
              linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.4)) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

.nav-shell,
.ios-dock,
.modal-card,
.compare-drawer {
  backdrop-filter: blur(14px) saturate(1.12);
}

.glass-card,
.trust-row div,
.metric-card,
.toolbar,
.btn-secondary,
.btn-glass,
.btn-ghost,
.toast,
.luxury-tile,
.fix-row,
.compact-news {
  backdrop-filter: blur(10px);
}

.glass-card,
.feature-card,
.update-card,
.metric-card,
.calculator-card,
.stock-card,
.news-card,
.tool-card,
.price-card,
.road-item,
details {
  box-shadow: 0 18px 46px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
}

@media (max-width: 780px) {
  :root {
    --blur: 10px;
  }

  .ambient-bg::before {
    background-size: 54px 54px !important;
    opacity: .12 !important;
  }

  .ambient-bg::after {
    opacity: .22 !important;
  }

  .mesh-layer {
    opacity: .22 !important;
    filter: blur(8px) !important;
  }

  .stock-wave-bg {
    display: none !important;
  }

  .nav-shell,
  .ios-dock,
  .modal-card,
  .compare-drawer,
  .glass-card,
  .trust-row div,
  .metric-card,
  .toolbar,
  .btn-secondary,
  .btn-glass,
  .btn-ghost,
  .toast,
  .luxury-tile,
  .fix-row,
  .compact-news {
    backdrop-filter: none;
  }
}

/* IDX motion layer: subtle stock-market animation without flicker. */
.stock-wave-bg {
  display: block !important;
  opacity: .18 !important;
  transform: translate3d(0,0,0) !important;
}

.stock-wave-bg::before {
  animation: idxWaveDrift 42s linear infinite !important;
}

.stock-wave-bg::after {
  display: block !important;
  opacity: .28 !important;
  animation: idxScannerSoft 18s ease-in-out infinite !important;
  background: linear-gradient(90deg, transparent 0%, rgba(100,244,197,.10) 44%, rgba(99,167,255,.11) 50%, transparent 62%) !important;
}

.market-ticker-bg {
  display: block !important;
  opacity: .13 !important;
  height: 92px;
  animation: idxTickerFloat 16s ease-in-out infinite !important;
  will-change: transform;
}

.ticker-track-a {
  animation: tickerLeftV5 78s linear infinite !important;
}

.ticker-track-b {
  animation: tickerRightV5 92s linear infinite !important;
}

.ticker-track span {
  border-color: rgba(100,244,197,.18);
  background: rgba(7,17,32,.22);
  box-shadow: 0 10px 34px rgba(0,0,0,.13);
}

.ambient-bg::after {
  animation: idxMarketDots 58s linear infinite !important;
  will-change: transform;
}

.mesh-layer {
  animation: idxMeshBreath 24s ease-in-out infinite alternate !important;
  will-change: opacity, transform;
}

[data-theme="light"] .ticker-track span {
  color: rgba(8,17,31,.62);
  background: rgba(255,255,255,.32);
  border-color: rgba(37,99,235,.15);
}

@keyframes idxWaveDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-1400px, 0, 0); }
}

@keyframes idxScannerSoft {
  0%, 18% { transform: translateX(-72%); opacity: 0; }
  34%, 62% { opacity: .28; }
  100% { transform: translateX(86%); opacity: 0; }
}

@keyframes idxTickerFloat {
  0%, 100% { transform: rotate(-3deg) translate3d(0,0,0); }
  50% { transform: rotate(-3deg) translate3d(0,-6px,0); }
}

@keyframes idxMarketDots {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(480px, 300px, 0); }
}

@keyframes idxMeshBreath {
  from { opacity: .26; transform: scale(1); }
  to { opacity: .38; transform: scale(1.025); }
}

@media (max-width: 780px) {
  .stock-wave-bg {
    display: block !important;
    opacity: .10 !important;
    height: 220px;
  }
  .stock-wave-bg::before {
    animation-duration: 62s !important;
  }

  .stock-wave-bg::after,
  .market-ticker-bg {
    display: none !important;
  }

  .ambient-bg::after,
  .mesh-layer {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stock-wave-bg,
  .stock-wave-bg::after,
  .market-ticker-bg,
  .ticker-track,
  .ambient-bg::after,
  .mesh-layer {
    animation: none !important;
  }
}

/* Theme Switching and Glow Hover Animations */
body, header, nav, main, section, footer,
.glass-card, .feature-card, .tool-card, .news-card, .update-card, .fix-row,
input, select, textarea, button, .ios-dock, .logo-icon, .nav-shell {
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.3s ease, box-shadow 0.4s ease;
}

/* Enhancing hover animation timing for cards */
.feature-card, .tool-card, .news-card, .price-card, .stock-card, .insight-card, .update-card, .luxury-tile {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.4s ease,
              background 0.4s ease,
              box-shadow 0.4s ease;
}

/* Diagnostics Tabbed Panel styles */
.tab-btn {
  border: 0;
  background: transparent;
  padding: 10px 16px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.tab-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
[data-theme="light"] .tab-btn:hover {
  background: rgba(0,0,0,0.04);
}
.tab-btn.active {
  color: #06101d !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 24px rgba(99,167,255,0.2);
}
.diag-panel {
  display: none;
  animation: tabFadeIn 0.4s var(--ease) forwards;
}
.diag-panel.active {
  display: block;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Home Watchlist Styles */
.home-watchlist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 780px) {
  .home-watchlist-grid {
    grid-template-columns: 1fr;
  }
}
.watchlist-empty-card {
  padding: 38px 24px;
  text-align: center;
  border-radius: 24px;
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] .watchlist-empty-card {
  background: rgba(0,0,0,0.01);
}
.watchlist-empty-card h4 {
  font-size: 18px;
  margin-bottom: 8px;
}
.watchlist-empty-card p {
  color: var(--muted);
  font-size: 14px;
  max-width: 480px;
  margin: 0 auto 16px;
}

/* ==========================================
   SIKAYA news page & IDX logo styled pack
   ========================================== */
.idx-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: transform 0.3s var(--ease);
}
.idx-logo-wrapper:hover {
  transform: rotate(15deg) scale(1.08);
  filter: drop-shadow(0 0 10px rgba(0, 255, 208, 0.5));
}
.idx-logo-svg, .idx-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Impact Badge Colors */
.impact-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.impact-high {
  background: rgba(255, 101, 132, 0.1);
  border: 1px solid rgba(255, 101, 132, 0.2);
  color: var(--danger);
  box-shadow: 0 0 10px rgba(255, 101, 132, 0.1);
}
.impact-medium {
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.2);
  color: var(--warning);
}
.impact-low {
  background: rgba(0, 255, 208, 0.1);
  border: 1px solid rgba(0, 255, 208, 0.2);
  color: var(--success);
}

/* Sentiment meter styles */
.sentiment-panel {
  box-shadow: var(--shadow);
}
@media (max-width: 780px) {
  .sentiment-panel {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center;
  }
  .sentiment-panel div:last-child {
    align-items: center !important;
    text-align: center !important;
  }
}

.news-card-read {
  filter: grayscale(0.2);
  border-color: rgba(255,255,255,0.04) !important;
}

/* Modal text size adjustment */
#newsModalBodyText {
  transition: font-size 0.2s ease;
}

/* ==========================================
   SIKAYA 10 Market Page Upgrades Styling
   ========================================== */

/* Search Auto-Suggestions Dropdown */
.autocomplete-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(8, 14, 28, 0.94);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  padding: 6px;
  scrollbar-width: thin;
}
[data-theme="light"] .autocomplete-suggestions {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
}
.suggestion-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  color: var(--text);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.suggestion-item:hover, .suggestion-item.highlighted {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}
[data-theme="light"] .suggestion-item:hover, [data-theme="light"] .suggestion-item.highlighted {
  background: rgba(15, 23, 42, 0.04);
  color: #10b981;
}
.suggestion-item span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

/* Watchlist Badge Counters */
.watchlist-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  background: linear-gradient(135deg, #ff6584, #f43f5e);
  color: #ffffff !important;
  font-size: 10px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: badgePop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.watchlist-badge.dock-badge {
  top: 3px;
  right: 12px;
}
@keyframes badgePop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Active Sector Badge Glow */
.sector-item {
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.sector-item:hover {
  transform: translateY(-2px) !important;
  border-color: var(--sector-color, var(--line)) !important;
  box-shadow: 0 8px 24px var(--sector-glow, rgba(0, 0, 0, 0.1)) !important;
}
.sector-item.active {
  border-color: var(--sector-color, rgba(100, 244, 197, 0.5)) !important;
  background: var(--sector-fill, rgba(100, 244, 197, 0.08)) !important;
  box-shadow: 0 12px 36px var(--sector-glow, rgba(0, 255, 208, 0.16)), inset 0 0 10px var(--sector-glow, rgba(0, 255, 208, 0.06)) !important;
}
[data-theme="light"] .sector-item.active {
  border-color: var(--sector-color, rgba(16, 185, 129, 0.5)) !important;
  background: var(--sector-fill, rgba(16, 185, 129, 0.08)) !important;
  box-shadow: 0 12px 36px var(--sector-glow, rgba(16, 185, 129, 0.12)), inset 0 0 10px var(--sector-glow, rgba(16, 185, 129, 0.06)) !important;
}

/* Keyboard Outline Focus & Hover States */
.stock-card, .mini-stock-card {
  outline: none;
}
.stock-card:hover, .mini-stock-card:hover {
  border-color: var(--sector-color, rgba(100, 244, 197, 0.34)) !important;
  box-shadow: 0 12px 36px var(--sector-glow, rgba(0, 255, 208, 0.16)), var(--shadow-soft) !important;
}
.stock-card:focus-visible, .mini-stock-card:focus-visible {
  border-color: var(--sector-color, var(--accent)) !important;
  box-shadow: 0 0 0 4px var(--sector-glow, rgba(100, 244, 197, 0.22)), 0 12px 36px var(--sector-glow, rgba(0, 255, 208, 0.16)) !important;
  transform: translateY(-4px);
}
[data-theme="light"] .stock-card:focus-visible, [data-theme="light"] .mini-stock-card:focus-visible {
  border-color: var(--sector-color, var(--accent)) !important;
  box-shadow: 0 0 0 4px var(--sector-glow, rgba(16, 185, 129, 0.18)), 0 12px 36px var(--sector-glow, rgba(16, 185, 129, 0.12)) !important;
}

/* ==========================================
   SIKAYA Portfolio Simulator & Analytics Page
   ========================================== */
.portfolio-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) {
  .portfolio-layout {
    grid-template-columns: 1fr;
  }
}
.holding-table th {
  padding: 12px 10px;
  color: var(--muted);
  border-bottom: 1.5px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.holding-table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.holding-table tbody tr {
  transition: background 0.25s var(--ease);
}
.holding-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}
[data-theme="light"] .holding-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.02);
}

.donut-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.donut-legend-item:hover {
  transform: translateX(4px);
  border-color: var(--sector-color, var(--line));
}
[data-theme="light"] .donut-legend-item {
  background: rgba(15, 23, 42, 0.02);
}
.donut-legend-color {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

.trade-panel label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.btn-danger {
  background: linear-gradient(135deg, #ff6584, #ff4c70);
  color: #fff !important;
  border: none;
  box-shadow: 0 8px 24px rgba(255, 101, 132, 0.25);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
}
.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 101, 132, 0.4);
}

.pnl-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 11px;
}
.pnl-badge.positive {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--success);
}
.pnl-badge.negative {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

/* Stretched Dashboard Cards & Layout Spacing */
.portfolio-layout {
  align-items: stretch !important;
}
.portfolio-panel-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.portfolio-panel-left .tool-card:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.portfolio-panel-left .tool-card:last-child > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.portfolio-panel-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.portfolio-panel-right .tool-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  .portfolio-panel-left, .portfolio-panel-right {
    height: auto !important;
  }
  .portfolio-panel-left .tool-card:last-child {
    flex: none !important;
  }
  .portfolio-panel-right .tool-card {
    flex: none !important;
  }
}

/* ==========================================
   SIKAYA Tycoon Mode Dramatic Enhancements CSS
   ========================================== */

/* Anomaly Screen Shake Animation */
.anomaly-shake {
  animation: anomalyShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes anomalyShake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); }
  20%, 80% { transform: translate3d(3px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 2px, 0); }
  40%, 60% { transform: translate3d(5px, -1px, 0); }
}

/* Pulsing Dot for Live Sentiment Status */
.pulsing-dot {
  box-shadow: 0 0 0 0 rgba(0, 214, 178, 0.35);
  animation: pulsingDot 1.6s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulsingDot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 214, 178, 0.4);
  }
  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 10px rgba(0, 214, 178, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 214, 178, 0);
  }
}

/* Specific Sentiment Color States */
.sentiment-bullish {
  color: var(--success) !important;
  text-shadow: 0 0 6px rgba(0, 214, 178, 0.25) !important;
}
.sentiment-bearish {
  color: var(--danger) !important;
  text-shadow: 0 0 6px rgba(251, 113, 133, 0.25) !important;
}
.sentiment-volatile {
  color: var(--warning) !important;
  text-shadow: 0 0 6px rgba(252, 211, 77, 0.25) !important;
  animation: textFlicker 2s infinite alternate;
}
.sentiment-stable {
  color: #00a2ff !important;
  text-shadow: 0 0 10px rgba(0, 162, 255, 0.5) !important;
}
.sentiment-sideways {
  color: #94a3b8 !important;
  text-shadow: 0 0 8px rgba(148, 163, 184, 0.4) !important;
}

@keyframes textFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.85;
  }
}

/* ==========================================
   SIKAYA Study Hub Premium Additions CSS
   ========================================== */

/* 3D Flip Glossary Carousel & Cards */
.glossary-carousel-wrapper {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.glossary-carousel-wrapper::-webkit-scrollbar {
  height: 6px;
}
.glossary-carousel-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.glossary-carousel-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}
.glossary-carousel-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

.glossary-card-container {
  width: 280px;
  height: 290px;
  perspective: 1200px;
}

.glossary-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.glossary-card.flipped {
  transform: rotateY(180deg);
}

.glossary-card-front,
.glossary-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.015);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glossary-card-front:hover {
  border-color: rgba(0, 255, 208, 0.3);
  box-shadow: 0 10px 30px rgba(0, 255, 208, 0.05);
}

.glossary-card-back {
  transform: rotateY(180deg);
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(0, 255, 208, 0.25);
  box-shadow: 0 10px 30px rgba(0, 255, 208, 0.05);
}

.glossary-card-front .click-hint {
  transition: transform 0.3s ease;
}
.glossary-card-container:hover .glossary-card-front .click-hint {
  transform: translateX(4px);
}

/* Compounding Slider Inputs Styling */
.form-group input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  height: 6px;
  border-radius: 99px;
  outline: none;
  transition: background 0.3s ease;
}
.form-group input[type="range"]:hover {
  background: rgba(255, 255, 255, 0.12);
}
.form-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.form-group input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 15px var(--accent);
}

/* Custom Responsive Styles for Compounding Lab */
@media (max-width: 768px) {
  .compounding-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .comp-results-summary {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .glossary-card-container {
    width: 250px;
    height: 270px;
  }
}

/* Luxury visual sweeps/glows on hovering cards */
.tilt-card {
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  will-change: transform;
}
.tilt-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 255, 208, 0.06);
  border-color: rgba(0, 255, 208, 0.25);
}

/* Valuation Comparison Table Styles */
.sikaya-comparison-table th {
  padding: 10px 6px;
  border-bottom: 2px solid var(--line);
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.sikaya-comparison-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}
.sikaya-comparison-table input[type="number"] {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 4px 6px;
  width: 70px;
  font-size: 11px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.sikaya-comparison-table input[type="number"]:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}
.sikaya-comparison-table input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
  width: 14px;
  height: 14px;
}

/* Radar Layout & Responsiveness */
@media (max-width: 768px) {
  .comparison-layout, .radar-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* =========================================================
   SIKAYA Premium Light Theme Overrides & Component Styling
   ========================================================= */

/* Breaking News Badge styling */
.breaking-badge {
  font-weight: 800;
  color: var(--danger);
  font-size: 11px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 101, 132, 0.3);
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 101, 132, 0.06);
  flex-shrink: 0;
}
[data-theme="light"] .breaking-badge {
  border-color: rgba(239, 68, 68, 0.3) !important;
  background: rgba(239, 68, 68, 0.06) !important;
}

/* Compounding projection tooltip */
.comp-chart-tooltip {
  position: absolute;
  pointer-events: none;
  padding: 10px 14px;
  font-size: 11px;
  display: none;
  z-index: 10;
  border: 1px solid var(--accent);
  border-radius: 12px;
  line-height: 1.5;
  background: rgba(8, 14, 28, 0.95);
  color: var(--text);
  box-shadow: var(--shadow);
}
[data-theme="light"] .comp-chart-tooltip {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  border-color: var(--accent) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

/* Reinvestment tile for DCA and Leaderboard */
.comp-reinvest-tile {
  padding: 12px;
  background: rgba(0, 255, 208, 0.04) !important;
  border: 1px solid rgba(0, 255, 208, 0.2) !important;
  border-radius: 14px;
}
.comp-reinvest-tile span {
  color: var(--accent) !important;
}
.comp-reinvest-tile strong {
  color: var(--accent) !important;
  text-shadow: 0 0 10px rgba(0, 255, 208, 0.3);
}

[data-theme="light"] .comp-reinvest-tile {
  background: rgba(16, 185, 129, 0.04) !important;
  border-color: rgba(16, 185, 129, 0.15) !important;
}
[data-theme="light"] .comp-reinvest-tile strong {
  text-shadow: none !important;
}

.comparison-leaderboard {
  background: rgba(0, 255, 208, 0.03);
  border: 1px solid rgba(0, 255, 208, 0.15);
  border-radius: 12px;
  padding: 12px;
  font-size: 11px;
  line-height: 1.4;
}
[data-theme="light"] .comparison-leaderboard {
  background: rgba(16, 185, 129, 0.04) !important;
  border-color: rgba(16, 185, 129, 0.15) !important;
}

/* Case Study box */
.case-study-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  font-size: 10px;
  color: var(--text);
}
[data-theme="light"] .case-study-box {
  background: rgba(15, 23, 42, 0.03) !important;
}

/* Light Mode Card and Sentiment overrides */
[data-theme="light"] .sentiment-bullish {
  color: #047857 !important;
  text-shadow: none !important;
}
[data-theme="light"] .sentiment-bearish {
  color: #b91c1c !important;
  text-shadow: none !important;
}
[data-theme="light"] .sentiment-volatile {
  color: #d97706 !important;
  text-shadow: none !important;
  animation: none !important;
}
[data-theme="light"] .sentiment-stable {
  color: #0284c7 !important;
  text-shadow: none !important;
}
[data-theme="light"] .sentiment-sideways {
  color: #475569 !important;
  text-shadow: none !important;
}

/* Glossary card design polish in Light theme */
[data-theme="light"] .glossary-card-front {
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .glossary-card-front:hover {
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.08) !important;
}
[data-theme="light"] .glossary-card-back {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .glossary-card-back h4 {
  color: var(--accent) !important;
}

/* ========================================================
   CROSS-PLATFORM & MOBILE DEVICE OPTIMIZATIONS (iOS & Android)
   ======================================================== */
:root {
  --vh: 1vh; /* Dynamic viewport height variable */
}

/* Ensure smooth system font rendering & smooth scrolling globally */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Safe area configurations for reader page components */
.reader-card {
  height: calc(var(--vh, 1vh) * 75) !important;
}

@media (max-width: 780px) {
  /* Ensure interactive touch target sizes (Apple/Google min 44px/48px standard) */
  .btn, 
  .lib-tab, 
  .tab-btn, 
  .chip-btn, 
  .nav-links a, 
  input, 
  select {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Tap highlight override (Removes gray selection overlay on iOS Safari) */
  a, button, select, input, .lib-tab, .tab-btn, .chip-btn, .stock-card {
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent text highlights when double-tapping buttons */
  .btn, .lib-tab, .tab-btn, .chip-btn, .nav-links a {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Mobile scroll containers momentum scrolling (Smooth iOS inertia) */
  .reader-body, 
  .reader-sidebar, 
  #sectorHeatmapContainer, 
  .watch-scroll, 
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

/* Disables desktop hover transforms on touch screens to prevent "stuck hover" state */
@media (hover: none) {
  .stock-card:hover,
  .btn:hover,
  .btn-ghost:hover,
  .nav-links a:hover,
  .chip-btn:hover,
  .lib-tab:hover,
  .glossary-card-front:hover {
    transform: none !important;
    background: initial;
    border-color: initial;
    box-shadow: none !important;
  }
  
  /* Custom active tap spring feedback for tactile touch response */
  .stock-card:active,
  .btn:active,
  .lib-tab:active,
  .chip-btn:active {
    opacity: 0.85;
    transform: scale(0.97) !important;
    transition: transform 0.1s ease;
  }
}

/* Custom Visibility and Overlap Fix for Market Tickers */
body:not([data-page="home"]):not([data-page="market"]) .market-ticker-bg {
  display: none !important;
}

@media (max-width: 780px) {
  .market-ticker-bg {
    display: none !important;
  }
}

/* Flash Animations for Trading Impacts */
.chart-frame.flash-green {
  animation: chartFlashGreen 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.chart-frame.flash-red {
  animation: chartFlashRed 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes chartFlashGreen {
  0% { box-shadow: 0 0 0px rgba(0, 214, 178, 0); border-color: var(--line); }
  25% { box-shadow: 0 0 15px rgba(0, 214, 178, 0.25); border-color: var(--success); }
  100% { box-shadow: 0 0 0px rgba(0, 214, 178, 0); border-color: var(--line); }
}

@keyframes chartFlashRed {
  0% { box-shadow: 0 0 0px rgba(251, 113, 133, 0); border-color: var(--line); }
  25% { box-shadow: 0 0 15px rgba(251, 113, 133, 0.25); border-color: var(--danger); }
  100% { box-shadow: 0 0 0px rgba(251, 113, 133, 0); border-color: var(--line); }
}

/* Glowing text animation for Bandar events */
.bandar-glow-gold {
  animation: textGlowGold 1.2s infinite alternate;
  font-weight: 900;
  text-shadow: 0 0 4px rgba(255, 209, 102, 0.4);
}

.bandar-glow-red {
  animation: textGlowRed 1.2s infinite alternate;
  font-weight: 900;
  text-shadow: 0 0 4px rgba(255, 101, 132, 0.4);
}

@keyframes textGlowGold {
  from { color: #ffd166; text-shadow: 0 0 4px rgba(255, 209, 102, 0.4); }
  to { color: #ffffff; text-shadow: 0 0 12px rgba(255, 209, 102, 0.8), 0 0 20px #ffd166; }
}

@keyframes textGlowRed {
  from { color: #ff6584; text-shadow: 0 0 4px rgba(255, 101, 132, 0.4); }
  to { color: #ffffff; text-shadow: 0 0 12px rgba(255, 101, 132, 0.8), 0 0 20px #ff6584; }
}

/* Live Stream indicator and styling */
.pulse-dot-green {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--success);
  display: inline-block;
  box-shadow: 0 0 8px var(--success);
  animation: pulseGreen 1.6s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(0, 255, 208, 0.6); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(0, 255, 208, 0); }
  100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(0, 255, 208, 0); }
}

.stream-post {
  padding: 10px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  animation: slideInDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stream-post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.stream-username {
  font-weight: 800;
  color: var(--accent);
}

.stream-username.user {
  color: #ffb703 !important;
  text-shadow: 0 0 6px rgba(255, 183, 3, 0.3);
}

.stream-time {
  color: var(--muted);
  font-size: 10px;
}

.stream-content {
  line-height: 1.4;
  color: var(--text);
}

.stream-tag {
  display: inline-block;
  padding: 2px 6px;
  background: rgba(0, 255, 208, 0.08);
  color: var(--success);
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  margin-right: 4px;
  text-transform: uppercase;
}

.stream-tag.danger {
  background: rgba(255, 101, 132, 0.08);
  color: var(--danger);
}

.stream-tag.warning {
  background: rgba(255, 209, 102, 0.08);
  color: var(--warning);
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth and gentle transitions for the portfolio page to prevent canvas layout lag */
body[data-page="portfolio"] .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
body[data-page="portfolio"] .reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* Custom smooth scrollbars for portfolio elements */
#tycoonStreamFeed::-webkit-scrollbar,
.holding-table::-webkit-scrollbar,
.portfolio-panel-left::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
#tycoonStreamFeed::-webkit-scrollbar-track,
.holding-table::-webkit-scrollbar-track {
  background: transparent;
}
#tycoonStreamFeed::-webkit-scrollbar-thumb,
.holding-table::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
}
#tycoonStreamFeed::-webkit-scrollbar-thumb:hover,
.holding-table::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ========================================================
   CRYPTO RADAR MODULE STYLING
   ======================================================== */
.crypto-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 30px;
}
@media (max-width: 1080px) {
  .crypto-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .crypto-grid {
    grid-template-columns: 1fr;
  }
}
.crypto-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
@media (max-width: 780px) {
  .crypto-card {
    padding: 16px !important;
    border-radius: 18px !important;
  }
}
.crypto-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--spotlight-glow), var(--shadow-soft);
}
.crypto-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.05);
}
.crypto-card.flash-up {
  animation: cryptoFlashUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.crypto-card.flash-down {
  animation: cryptoFlashDown 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes cryptoFlashUp {
  0% { box-shadow: 0 0 0px rgba(0, 255, 208, 0); }
  25% { box-shadow: 0 0 20px rgba(0, 255, 208, 0.45); }
  100% { box-shadow: 0 0 0px rgba(0, 255, 208, 0); }
}
@keyframes cryptoFlashDown {
  0% { box-shadow: 0 0 0px rgba(255, 101, 132, 0); }
  25% { box-shadow: 0 0 20px rgba(255, 101, 132, 0.45); }
  100% { box-shadow: 0 0 0px rgba(255, 101, 132, 0); }
}

/* ==========================================
   SIKAYA 7 HOMEPAGE PREMIUM UPDATES CSS
   ========================================== */

/* Timeframe buttons for IHSG */
.ihsg-range-selector {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px;
  border-radius: 99px;
  border: 1px solid var(--line);
}
[data-theme="light"] .ihsg-range-selector {
  background: rgba(0, 0, 0, 0.03);
}
.ihsg-range-selector button {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  min-height: auto !important; /* override touch target padding if needed */
}
.ihsg-range-selector button.active, 
.ihsg-range-selector button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
[data-theme="light"] .ihsg-range-selector button.active {
  background: rgba(0, 0, 0, 0.08);
}

/* Market Status Badge */
.market-status-badge {
  font-size: 10px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
}
.market-status-badge.open {
  background: rgba(0, 255, 208, 0.08);
  color: var(--success);
  border: 1px solid rgba(0, 255, 208, 0.2);
}
.market-status-badge.closed {
  background: rgba(255, 101, 132, 0.08);
  color: var(--danger);
  border: 1px solid rgba(255, 101, 132, 0.2);
}

/* Watchlist & Sentiment Grid Layout */
.watchlist-and-sentiment-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 28px;
  margin-bottom: 32px;
}
@media (max-width: 1024px) {
  .watchlist-and-sentiment-grid {
    grid-template-columns: 1fr;
  }
}
.sentiment-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="light"] .sentiment-card {
  background: linear-gradient(180deg, rgba(15,23,42,0.03), rgba(15,23,42,0.01));
}

/* Autocomplete Watchlist Search */
.watchlist-search-wrapper {
  position: relative;
  width: 100%;
}
.suggestions-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 6px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
}
[data-theme="light"] .suggestions-dropdown {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
}
.suggestion-item {
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s, padding-left 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
[data-theme="light"] .suggestion-item {
  border-bottom-color: rgba(0, 0, 0, 0.03);
}
.suggestion-item:last-child {
  border-bottom: none;
}
.suggestion-item:hover {
  background: rgba(255, 255, 255, 0.05);
  padding-left: 20px;
}
[data-theme="light"] .suggestion-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
.suggestion-item .sym {
  font-weight: 800;
  color: var(--accent);
}
.suggestion-item .name {
  font-size: 12px;
  color: var(--muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.suggestion-item .sect {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
[data-theme="light"] .suggestion-item .sect {
  background: rgba(0,0,0,0.05);
}

/* Quiz styling */
.quiz-card {
  transition: all 0.3s ease;
}
.quiz-option {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
[data-theme="light"] .quiz-option {
  background: rgba(0, 0, 0, 0.01);
}
.quiz-option:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--muted);
  transform: translateX(4px);
}
[data-theme="light"] .quiz-option:hover {
  background: rgba(0, 0, 0, 0.03);
}
.quiz-option.correct {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: var(--success) !important;
  color: var(--success) !important;
  font-weight: 700;
}
.quiz-option.incorrect {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

/* Ambient Control Panel */
.ambient-control-panel {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  pointer-events: none;
}
.ambient-control-panel.show {
  display: block !important;
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.color-dot:hover {
  transform: scale(1.15);
}
.color-dot.active {
  border-color: var(--text);
  transform: scale(1.1);
}
.ambient-bg.hide-grid .mesh-layer {
  display: none !important;
}

/* Responsive Scaling for Stock Cards to prevent desktop grid overflow */
@media (min-width: 1081px) and (max-width: 1340px) {
  .mini-stock-card {
    padding: 12px !important;
    border-radius: 20px !important;
  }
  .mini-stock-card .chart-frame {
    height: 110px !important;
    margin-top: 8px !important;
  }
  .market-summary {
    gap: 6px !important;
    margin-top: 10px !important;
  }
  .market-summary div {
    padding: 8px 6px !important;
    border-radius: 12px !important;
  }
  .market-summary strong {
    font-size: 12px !important;
  }
  .market-summary span {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }
}

/* ==========================================
   SIKAYA PREMIUM ANIMATION & UI EXTENSIONS
   ========================================== */

/* 1. Liquid Aurora Gradient Transitions using CSS Houdini */
@property --aurora-1 {
  syntax: '<color>';
  initial-value: rgba(0, 255, 208, 0.28);
  inherits: true;
}
@property --aurora-2 {
  syntax: '<color>';
  initial-value: rgba(0, 162, 255, 0.25);
  inherits: true;
}
@property --aurora-3 {
  syntax: '<color>';
  initial-value: rgba(189, 92, 255, 0.25);
  inherits: true;
}

:root {
  transition: --aurora-1 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              --aurora-2 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              --aurora-3 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Mouse-Spotlight Reflector for Tilt Cards */
.tilt-card {
  position: relative;
}
.tilt-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.08) 0%, transparent 80%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
  border-radius: inherit;
}
.tilt-card:hover::after {
  opacity: 1;
}
[data-theme="light"] .tilt-card::after {
  background: radial-gradient(circle 200px at var(--mx, 50%) var(--my, 50%), rgba(0, 0, 0, 0.03) 0%, transparent 80%);
}

/* 3. Smooth suggestions dropdown animation */
.suggestions-dropdown {
  display: block !important; /* override inline display: none */
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  overflow-y: auto;
  pointer-events: none;
}
.suggestions-dropdown.show {
  max-height: 240px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 4. Price Flash Ticks */
@keyframes pricePulseUp {
  0% { transform: scale(1.06); text-shadow: 0 0 10px rgba(0, 255, 208, 0.8); color: var(--success); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes pricePulseDown {
  0% { transform: scale(1.06); text-shadow: 0 0 10px rgba(255, 101, 132, 0.8); color: var(--danger); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.price-tick-up {
  display: inline-block;
  animation: pricePulseUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.price-tick-down {
  display: inline-block;
  animation: pricePulseDown 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 5. Liquid Scroll Progress Bar */
.scroll-progress span {
  position: relative;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 200% auto;
  animation: liquidFlow 4s linear infinite;
}
@keyframes liquidFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ========================================================
   STOCK DETAIL METRICS & DESIGN LAYOUT
   ======================================================== */
.stock-detail-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 14px;
}

.stock-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-badge {
  font-size: 10px;
  padding: 4px 10px;
  font-weight: 800;
  border-radius: 8px;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.detail-badge.tag-sec {
  border-color: rgba(0, 255, 208, 0.2);
  color: var(--success);
  background: rgba(0, 255, 208, 0.03);
}

.detail-badge.tag-qual {
  border-color: rgba(0, 162, 255, 0.2);
  color: var(--accent);
  background: rgba(0, 162, 255, 0.03);
}

.detail-badge.tag-risk.risk-low {
  border-color: rgba(0, 255, 208, 0.2);
  color: var(--success);
  background: rgba(0, 255, 208, 0.03);
}

.detail-badge.tag-risk.risk-medium {
  border-color: rgba(255, 209, 102, 0.2);
  color: var(--warning);
  background: rgba(255, 209, 102, 0.03);
}

.detail-badge.tag-risk.risk-high {
  border-color: rgba(255, 101, 132, 0.2);
  color: var(--danger);
  background: rgba(255, 101, 132, 0.03);
}

.stock-detail-desc {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  line-height: 1.5;
  font-size: 12.5px;
}

[data-theme="light"] .stock-detail-desc {
  background: rgba(0, 0, 0, 0.015);
}

.stock-detail-desc p {
  margin: 0;
  color: var(--text);
  opacity: 0.9;
}

.stock-detail-heading {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 6px;
  margin-top: 8px;
}

.stock-detail-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 600px) {
  .stock-detail-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.metric-detail-box {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-detail-box:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 255, 208, 0.05);
}

.metric-detail-box span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.metric-detail-box strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

/* Rentang Harga */
.detail-range-container {
  padding: 16px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.detail-range-track-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-range-val {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  min-width: 70px;
}

.detail-range-val:first-child {
  text-align: right;
}

.detail-range-track {
  position: relative;
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}

[data-theme="light"] .detail-range-track {
  background: rgba(0, 0, 0, 0.1);
}

.detail-range-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(0, 255, 208, 0.3), rgba(0, 162, 255, 0.3));
}

.detail-range-pointer {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
  transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Lot Calc */
.detail-calc-card {
  margin-top: 4px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
}

[data-theme="light"] .detail-calc-card {
  background: rgba(0, 0, 0, 0.01);
}

/* ========================================================
   DEDICATED STOCK DETAIL PAGE STYLING
   ======================================================== */
.detail-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  margin-top: 24px;
}

@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.detail-chart-card {
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="light"] .detail-chart-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.03), rgba(15, 23, 42, 0.01));
}

.detail-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}

.detail-price-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-price {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--text);
}

.detail-info-card {
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="light"] .detail-info-card {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.03), rgba(15, 23, 42, 0.01));
}

.detail-metrics-list {
  display: flex;
  flex-direction: column;
}

.detail-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.2s;
}

.detail-metric-row:hover {
  padding-left: 6px;
  padding-right: 6px;
}

.detail-metric-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-metric-row span {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-metric-row strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* Watchlist active button styling */
.btn-secondary.active {
  background: var(--accent) !important;
  color: #080e1c !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px var(--accent);
}

/* Custom details page extensions */
.ticker-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}
[data-theme="light"] .ticker-stats-grid {
  background: rgba(0, 0, 0, 0.01);
}
.ticker-stat-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ticker-stat-box span {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ticker-stat-box strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.detail-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 28px;
}
@media (max-width: 1024px) {
  .detail-grid-3 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Indicators */
.indicator-btn {
  border: 1px solid transparent !important;
  color: var(--muted) !important;
  transition: all 0.2s ease !important;
}
.indicator-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="light"] .indicator-btn:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}
.indicator-btn.active#toggleGridBtn {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(0, 255, 208, 0.05) !important;
  box-shadow: 0 0 8px rgba(0, 255, 208, 0.15);
}
.indicator-btn.active#toggleMA20Btn {
  border-color: #ffd166 !important;
  color: #ffd166 !important;
  background: rgba(255, 209, 102, 0.05) !important;
  box-shadow: 0 0 8px rgba(255, 209, 102, 0.15);
}
[data-theme="light"] .indicator-btn.active#toggleMA20Btn {
  border-color: #d97706 !important;
  color: #d97706 !important;
  background: rgba(217, 119, 6, 0.05) !important;
}
.indicator-btn.active#toggleMA50Btn {
  border-color: #bd5cff !important;
  color: #bd5cff !important;
  background: rgba(189, 92, 255, 0.05) !important;
  box-shadow: 0 0 8px rgba(189, 92, 255, 0.15);
}
[data-theme="light"] .indicator-btn.active#toggleMA50Btn {
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.05) !important;
}

/* Timeline */
.corp-timeline::-webkit-scrollbar {
  width: 4px;
}
.corp-timeline::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}
.timeline-item {
  display: flex;
  gap: 12px;
  position: relative;
  padding-bottom: 12px;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.timeline-item:last-child::before {
  display: none;
}
.timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line);
  margin-top: 3px;
  flex-shrink: 0;
  z-index: 2;
  border: 2px solid var(--body-bg, #090f1d);
}
.timeline-dot.dividend { background: var(--success); }
.timeline-dot.rupst { background: var(--warning); }
.timeline-dot.ipo { background: var(--accent); }
.timeline-dot.report { background: var(--accent-2); }
.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.timeline-date {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
}
.timeline-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
.timeline-desc {
  font-size: 11px;
  color: var(--muted);
}

/* Peers Table */
.peers-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.peers-comparison-table th {
  padding: 12px 16px;
  text-align: left;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11px;
  border-bottom: 1.5px solid var(--line);
}
.peers-comparison-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.peers-comparison-table tbody tr {
  transition: background 0.2s ease;
}
.peers-comparison-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
}
[data-theme="light"] .peers-comparison-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.015);
}
.peers-comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.peers-comparison-table .peer-sym-badge {
  font-weight: 900;
  color: var(--accent);
  padding: 4px 10px;
  background: rgba(0, 255, 208, 0.05);
  border: 1px solid rgba(0, 255, 208, 0.15);
  border-radius: 8px;
  font-size: 11px;
}

/* Detail News */
.detail-news-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.detail-news-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform 0.2s, border-color 0.2s;
  cursor: pointer;
}
.detail-news-item:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.detail-news-tag-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
}
.detail-news-tag {
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.detail-news-impact {
  font-weight: 800;
  text-transform: uppercase;
}
.detail-news-impact.high { color: var(--danger); }
.detail-news-impact.medium { color: var(--warning); }
.detail-news-impact.low { color: var(--muted); }
.detail-news-title {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
}
.detail-news-summary {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-news-footer {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: auto;
}

.detail-inner-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 768px) {
  .detail-inner-grid-2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ==========================================================================
   SIKAYA Home Page Modern UI & Smooth Animations
   ========================================================================== */

/* Typography & Heading spacing */
.hero-copy h1 {
  letter-spacing: -0.04em;
  font-weight: 900;
  background: linear-gradient(135deg, #ffffff 30%, var(--accent) 70%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 80px rgba(0, 214, 178, 0.15);
}

.hero-actions .btn {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-actions .btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 214, 178, 0.25);
}

/* Trust row modernization */
.trust-row {
  margin-top: 24px;
}
.trust-row div {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.trust-row div:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(100, 244, 197, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), var(--spotlight-glow);
}

/* Panel top alignment and layout */
.panel-top-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.panel-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.panel-title-group h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.panel-title-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Market status badge modern style */
.market-status-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.market-status-badge.open {
  background: rgba(0, 214, 178, 0.1);
  color: var(--success);
  border: 1px solid rgba(0, 214, 178, 0.2);
}
.market-status-badge.closed {
  background: rgba(251, 113, 133, 0.1);
  color: var(--danger);
  border: 1px solid rgba(251, 113, 133, 0.2);
}

/* Segmented selector like iOS / Tailwind */
.ihsg-range-selector {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  padding: 3px;
  gap: 2px;
}
.ihsg-range-selector .range-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 99px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.ihsg-range-selector .range-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.ihsg-range-selector .range-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06101d;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(100, 244, 197, 0.25);
}

/* Feature cards */
.feature-card-icon-emoji {
  font-size: 32px;
  margin-bottom: 12px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-block;
}
.feature-card:hover .feature-card-icon-emoji {
  transform: scale(1.2) rotate(8deg);
}
.feature-card-btn {
  margin-top: 18px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Watchlist search bar */
.watchlist-search-container {
  max-width: 480px;
  margin: 0 auto 32px auto;
  position: relative;
}

.watchlist-search-input {
  width: 100%;
  padding: 14px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.watchlist-search-input:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(100, 244, 197, 0.4);
  box-shadow: 0 0 0 4px rgba(100, 244, 197, 0.08), 0 8px 24px rgba(0, 0, 0, 0.15);
}

.suggestions-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(8, 14, 28, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  margin-top: 8px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.suggestions-dropdown.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.suggestion-item {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.2s ease;
}
.suggestion-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.suggestion-item:last-child {
  border-bottom: none;
}
.suggestion-item .sym {
  font-weight: 800;
  color: var(--accent);
}
.suggestion-item .name {
  color: var(--muted);
  font-size: 12px;
}
.suggestion-item .sect {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-2);
  background: rgba(56, 189, 248, 0.08);
  padding: 2px 6px;
  border-radius: 6px;
}

/* Watchlist & Sentiment Grid layout */
.watchlist-and-sentiment-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) {
  .watchlist-and-sentiment-grid {
    grid-template-columns: 1fr;
  }
}

.sentiment-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  min-height: 300px;
  height: fit-content;
  max-width: 100%;
  overflow: hidden;
  border-radius: 28px;
}

.sentiment-eyebrow {
  margin-bottom: 8px;
}

.sentiment-gauge-wrapper {
  position: relative;
  width: 180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sentiment-gauge-canvas {
  width: 180px;
  height: 100px;
  display: block;
}

.sentiment-value-label {
  margin-top: 12px;
  font-weight: 900;
  font-size: 18px;
  color: var(--text);
  transition: color 0.3s ease;
}

.sentiment-description {
  font-size: 11px;
  color: var(--muted);
  margin: 6px 0 0 0;
  max-width: 190px;
  line-height: 1.4;
}

.preview-section-header {
  margin-top: 54px;
  margin-bottom: 24px;
}

/* Simulator Results */
.simulator-result-box {
  margin-top: 18px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(100, 244, 197, 0.2);
  background: linear-gradient(135deg, rgba(100, 244, 197, 0.06), rgba(56, 189, 248, 0.04));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  transition: all 0.3s ease;
}

.simulator-result-content {
  flex: 1;
  min-width: 150px;
}

.simulator-chart-wrapper {
  width: 80px;
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.simulator-pie-canvas {
  width: 80px;
  height: 80px;
  display: block;
}

/* Quiz UI layout */
.quiz-split-grid {
  align-items: center;
  gap: 40px;
}

.quiz-stat-card {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}
.quiz-stat-card div {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  flex: 1;
  text-align: center;
}

.quiz-streak-value {
  color: var(--success);
  font-size: 20px;
  display: block;
  font-weight: 900;
}
.quiz-score-value {
  color: var(--accent);
  font-size: 20px;
  display: block;
  font-weight: 900;
}

.quiz-card-container {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  border-radius: 28px;
  transition: all 0.3s ease;
}

.quiz-loading-text {
  color: var(--muted);
  text-align: center;
}

.quiz-question-title {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.quiz-option-btn {
  text-align: left;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
  font-size: 13.5px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}
.quiz-option-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(100, 244, 197, 0.3);
  transform: translateX(4px);
}
.quiz-option-btn.correct {
  background: rgba(0, 214, 178, 0.15) !important;
  border-color: var(--success) !important;
  color: var(--success) !important;
  box-shadow: 0 0 15px rgba(0, 214, 178, 0.15);
}
.quiz-option-btn.incorrect {
  background: rgba(251, 113, 133, 0.15) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
  box-shadow: 0 0 15px rgba(251, 113, 133, 0.15);
}

.news-more-btn-container {
  text-align: center;
  margin-top: 32px;
}

/* Ambient Control Panel */
.ambient-control-wrapper {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 999;
}

.ambient-control-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  color: var(--text);
  outline: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ambient-control-btn:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 12px 40px rgba(0, 214, 178, 0.2);
}

.ambient-control-panel {
  display: none;
  position: absolute;
  bottom: 56px;
  right: 0;
  width: 240px;
  background: rgba(14, 21, 40, 0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
  transform: scale(0.95) translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom right;
}
.ambient-control-panel.show {
  display: block;
  transform: scale(1) translateY(0);
}

.ambient-control-title {
  margin: 0 0 14px 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ambient-control-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ambient-control-label-text {
  font-size: 10px;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 800;
}

.ambient-control-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0;
}

.ambient-control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pointer-cursor {
  cursor: pointer;
}

.ambient-select-input {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  outline: none;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.ambient-select-input:focus {
  border-color: var(--accent);
}

.color-dots-group {
  display: flex;
  gap: 10px;
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.color-dot:hover {
  transform: scale(1.15);
}
.color-dot.active {
  border-color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 0 10px currentColor;
}
.color-dot[data-color="blue"] { background: #00ffd0; }
.color-dot[data-color="purple"] { background: #bd5cff; }
.color-dot[data-color="green"] { background: #10b981; }

/* Mini stock card modifications for home watchlist */
.home-watchlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.mini-stock-card {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(14px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.mini-stock-card:hover {
  transform: translateY(-5px);
  border-color: var(--sector-color, rgba(100, 244, 197, 0.3));
  background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 30px var(--sector-glow, rgba(100, 244, 197, 0.05));
}
.mini-stock-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--sector-color, var(--accent));
  opacity: 0.8;
}

/* Modern inputs in forms */
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-transform: uppercase;
}

.form-grid input {
  margin-top: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-grid input:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(100, 244, 197, 0.4);
  box-shadow: 0 0 0 4px rgba(100, 244, 197, 0.06);
}

/* Dynamic reveal animation curves */
.reveal {
  transform: translateY(30px) scale(0.97);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.show {
  transform: translateY(0) scale(1);
}

/* ========================================================
   ANDROID & IOS MOBILE UI/UX PERFECTION & SAFE AREA PATCH
   ======================================================== */
@media (max-width: 780px) {
  /* Fix safe area bottom spacing so ios-dock doesn't cut off page contents */
  body {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  /* Prevent page-wide horizontal scroll due to elements leaking past margins */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Prevent Safari and Chrome automatic zoom-on-focus shift by enforcing font size */
  input, select, textarea,
  .watchlist-search-input,
  .toolbar select,
  .toolbar input[type="search"],
  .ambient-select-input,
  .reader-select,
  .form-grid input,
  .form-grid select {
    font-size: 16px !important;
  }

  /* Make sure ios-dock buttons have a comfortable touch area (min-height 44px) */
  .ios-dock a, .ios-dock button {
    min-height: 46px !important;
    padding: 8px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    touch-action: manipulation;
  }

  /* Prevent table column squishing and text wrapping on mobile */
  .holding-table th, .holding-table td,
  .peers-comparison-table th, .peers-comparison-table td,
  .sikaya-comparison-table th, .sikaya-comparison-table td {
    white-space: nowrap !important;
  }

  /* Smooth scroll for native mobile scrollable panels */
  .table-responsive,
  div[style*="overflow-x: auto"],
  .toc-scroll,
  .watch-scroll,
  .autocomplete-suggestions,
  .suggestions-dropdown {
    -webkit-overflow-scrolling: touch !important;
    overflow-x: auto !important;
  }

  /* Compounding sliders: Increase slider thumb size for touch-friendly dragging */
  .form-group input[type="range"]::-webkit-slider-thumb {
    width: 24px !important;
    height: 24px !important;
  }
  .form-group input[type="range"]::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
  }
  .form-group input[type="range"] {
    height: 8px !important;
  }

  /* Position bottom sheet modal dialogs edge-to-edge reliably on iOS & Android */
  .app-modal {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    outline: none !important;
  }

  /* Make suggestions dropdown items larger for clean touch targets */
  .suggestion-item {
    padding: 12px 16px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
  
  /* Tap action manipulation to remove 300ms delay */
  button, a, input, select, textarea,
  .chip-btn, .range-btn, .lib-tab, .tab-btn, .color-dot {
    touch-action: manipulation !important;
  }
}

/* Specific fix for viewports under 400px (like iPhone SE) to prevent card overlaps */
@media (max-width: 400px) {
  .market-summary, .stock-price {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .trust-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .quiz-stat-card {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
  .donut-container {
    flex-direction: column !important;
    align-items: center !important;
  }
}