/*
   FLAME FINANCE ADVISOR — Global Stylesheet
   "Obsidian Ember" · Private-desk dark glass · Fraunces + Inter + JetBrains Mono
*/

/* 1. CSS VARIABLES — DARK MODE (DEFAULT) */
:root {
  /* Backgrounds — warm obsidian scale (neutral char-black, faint ember undertone) */
  --bg-primary:        #0c0b0a;
  --bg-secondary:      #141210;
  --bg-card:           #1a1815;
  --bg-hover:          #211e19;
  --bg-active:         #2b2721;
  --bg-input:          #0c0b0a;

  /* Accents */
  --accent-green:      #1fdf94;
  --accent-green-dim:  rgba(31, 223, 148, 0.14);
  --accent-red:        #ff5c74;
  --accent-red-dim:    rgba(255, 92, 116, 0.14);
  --accent-blue:       #5b9dff;
  --accent-blue-dim:   rgba(91, 157, 255, 0.14);
  --accent-gold:       #d4af37;
  --accent-gold-dim:   rgba(212, 175, 55, 0.16);
  --accent-purple:     #a78bfa;
  --accent-orange:     #ff9152;

  /* Gold system — the signature accent. Used for premium, primary actions, brand. */
  --gold-bright:       #f0d878;
  --gold-deep:         #a3791f;
  --gold-gradient:     linear-gradient(135deg, var(--gold-bright) 0%, var(--accent-gold) 52%, var(--gold-deep) 100%);

  /* Text — warm ivory scale */
  --text-primary:      #f2ede3;
  --text-secondary:    #948b7c;
  --text-muted:        #58524a;
  --text-inverse:      #0c0b0a;

  /* Borders — solid warm charcoal for structure; gold reserved for accent/hover */
  --border-color:      #322c24;
  --border-bright:     #4a4136;
  --border-accent:     rgba(212, 175, 55, 0.4);

  /* Glass */
  --glass-bg:          rgba(19, 17, 15, 0.86);
  --glass-border:      rgba(212, 175, 55, 0.14);
  --glass-blur:        blur(16px);

  /* Shadows */
  --shadow:            0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-sm:         0 2px 10px rgba(0, 0, 0, 0.38);
  --shadow-lg:         0 22px 64px rgba(0, 0, 0, 0.65);
  --shadow-green:      0 0 20px rgba(31, 223, 148, 0.22);
  --shadow-red:        0 0 20px rgba(255, 92, 116, 0.22);
  --shadow-gold:       0 0 26px rgba(212, 175, 55, 0.32);

  /* Layout */
  --sidebar-width:     248px;
  --sidebar-collapsed: 60px;
  --topbar-height:     44px;
  --radius:            10px;
  --radius-sm:         6px;
  --radius-lg:         16px;

  /* Typography */
  --font-sans:         'Inter', -apple-system, sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', monospace;
  --font-display:      'Fraunces', 'Georgia', serif;

  /* Transitions */
  --transition:        0.2s cubic-bezier(.4,0,.2,1);
  --transition-slow:   0.35s cubic-bezier(.4,0,.2,1);
}

/* 2. LIGHT MODE OVERRIDES — "Ivory Ember" */
.light-mode {
  --bg-primary:        #f7f4ee;
  --bg-secondary:      #ffffff;
  --bg-card:           #ffffff;
  --bg-hover:          #f0eae0;
  --bg-active:         #e6ddd0;
  --bg-input:          #ffffff;

  --accent-gold:       #a9791d;
  --accent-gold-dim:   rgba(169, 121, 29, 0.13);

  --text-primary:      #1d1811;
  --text-secondary:    #6b6255;
  --text-muted:        #a89c8a;
  --text-inverse:      #ffffff;

  --border-color:      #e6ddd0;
  --border-bright:     #d2c4ae;

  --glass-bg:          rgba(255, 255, 255, 0.86);
  --glass-border:      rgba(169, 121, 29, 0.18);

  --shadow:            0 8px 32px rgba(40, 28, 10, 0.10);
  --shadow-sm:         0 2px 10px rgba(40, 28, 10, 0.07);
  --shadow-lg:         0 22px 60px rgba(40, 28, 10, 0.16);
}

/* 3. RESET & BASE */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  overflow: hidden;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

a {
  color: var(--accent-blue);
  text-decoration: none;
  cursor: pointer;
}
a:hover { text-decoration: underline; }

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

input, select, textarea {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  outline: none;
  transition: border-color var(--transition);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px var(--accent-gold-dim);
}

/* 4. CUSTOM SCROLLBAR */
::-webkit-scrollbar           { width: 6px; height: 6px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: var(--border-bright); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent-gold); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--border-bright) transparent; }

/* 5. APP LAYOUT GRID */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  /* FIX: 100vh di Chrome mobile dihitung seolah navbar browser sudah
     hilang, jadi bagian bawah konten ketutup navbar & gak ke-scroll
     sampai habis. Diisi berlapis: vh (fallback lama) -> --app-vh
     (px asli dari JS, lihat index.html) -> dvh (unit modern, otomatis
     ikut tinggi navbar browser). Baris terakhir yang valid yang menang. */
  height: 100vh;
  height: var(--app-vh, 100vh);
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  transition: grid-template-columns var(--transition-slow);
}

.app-layout.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed) 1fr;
}

/* 6. SIDEBAR */
.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  overflow: hidden;
  transition: width var(--transition-slow);
  width: var(--sidebar-width);
  z-index: 100;
  position: relative;
}

/* Collapsed state */
.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .session-widget,
.sidebar.collapsed .dm-label,
.sidebar.collapsed .sidebar-version,
.sidebar.collapsed .session-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-upgrade-divider {
  display: none;
  opacity: 0;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 10px 0;
}

.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 12px 0;
}

.sidebar.collapsed .logo-icon {
  margin: 0;
}

.sidebar.collapsed .collapse-btn {
  display: none;
}

.sidebar.collapsed .dark-mode-toggle {
  justify-content: center;
  padding: 10px 0;
}

/* Sidebar header */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  min-height: var(--topbar-height);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(212,175,55,0.05), transparent 70%);
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.logo-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: #ffffff;
  border-radius: 100px;
  padding: 0px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(212,175,55,0.5),
    0 0 0 4px rgba(212,175,55,0.08),
    0 4px 14px rgba(0,0,0,0.45);
  transition: box-shadow var(--transition-slow);
}

.logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
}

.logo-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  font-optical-sizing: auto;
  color: var(--text-primary);
  letter-spacing: 0.005em;
}

.logo-sub {
  font-size: 0.62rem;
  color: var(--accent-gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-top: 1px;
  opacity: 0.85;
}

.collapse-btn {
  color: var(--text-secondary);
  padding: 4px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}
.collapse-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Sidebar Nav */
.sidebar-nav {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.nav-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 10px 16px 4px;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin: 1px 6px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  user-select: none;
}

.nav-item:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
  text-decoration: none;
}

.nav-item.active {
  color: var(--accent-gold);
  background: linear-gradient(90deg, rgba(212,175,55,0.14), rgba(212,175,55,0.03));
  border: 1px solid rgba(212, 175, 55, 0.22);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--gold-gradient);
  box-shadow: 0 0 8px rgba(212,175,55,0.6);
}

.nav-item.active .nav-icon svg path,
.nav-item.active .nav-icon svg rect,
.nav-item.active .nav-icon svg line,
.nav-item.active .nav-icon svg polyline,
.nav-item.active .nav-icon svg circle {
  stroke: var(--accent-gold);
}

.nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-label {
  font-size: 0.82rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 10px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.nav-badge.live {
  background: var(--accent-red-dim);
  color: var(--accent-red);
  border: 1px solid rgba(255,92,116,0.25);
  animation: blink 2s infinite;
}

.nav-badge.pro {
  background: linear-gradient(135deg, rgba(212,175,55,0.22), rgba(255,145,82,0.12));
  color: var(--accent-gold);
  border: 1px solid rgba(212,175,55,0.35);
  text-shadow: 0 0 12px rgba(212,175,55,0.35);
}

/* Badge "EXCLUSIVE" — khusus fitur andalan BLAZE FUTURE (AI Trade Copilot PRO),
   sengaja dibuat lebih menonjol dari badge PRO biasa (animasi shimmer halus)
   supaya terasa sebagai fitur paling premium di antara menu premium lainnya. */
.nav-badge.exclusive {
  background: linear-gradient(135deg, #d4af37, #ff5c74, #ff9152);
  background-size: 200% 100%;
  color: #1a1300;
  border: none;
  font-weight: 800;
  animation: exclusiveShimmer 3s linear infinite;
}

@keyframes exclusiveShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Upgrade ke Premium — menu tersendiri di paling bawah, sengaja dibuat
   menonjol (background gold gradient) supaya user gak bingung lagi cari
   tombol upgrade. */
.nav-upgrade-divider {
  height: 1px;
  margin: 10px 14px 8px;
  background: linear-gradient(90deg, transparent, var(--border-color) 50%, transparent);
}

.nav-item-upgrade {
  margin: 4px 6px 8px;
  background: linear-gradient(90deg, rgba(212,175,55,0.16), rgba(255,145,82,0.06));
  border: 1px solid rgba(212,175,55,0.3);
  color: var(--accent-gold);
}

.nav-item-upgrade:hover {
  background: linear-gradient(90deg, rgba(212,175,55,0.26), rgba(255,145,82,0.1));
  border-color: rgba(212,175,55,0.5);
  color: var(--accent-gold);
}

.nav-item-upgrade .nav-icon svg path,
.nav-item-upgrade .nav-icon svg rect {
  stroke: var(--accent-gold);
}

.nav-item-upgrade .nav-label {
  font-weight: 700;
}

.nav-badge.upgrade-badge {
  background: var(--gold-gradient);
  color: #1a1408;
  border: none;
  font-weight: 800;
}

/* Session Widget */
.session-widget {
  padding: 12px 14px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.session-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.session-list { display: flex; flex-direction: column; gap: 5px; }

.session-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
}

.session-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background var(--transition);
}

.session-item.active .session-dot {
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
  animation: pulse 2s infinite;
}

.session-name {
  color: var(--text-secondary);
  flex: 1;
  font-weight: 500;
}

.session-item.active .session-name { color: var(--text-primary); }

.session-time {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

/* =================================================================== */
/* Sosial Media — Radial Dot Navigation ("analog dial") + blur hidup    */
/* =================================================================== */
.nav-item.nav-social { position: relative; }

@keyframes socialBgDrift {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.12) rotate(3deg); }
  100% { transform: scale(1.04) rotate(-2deg); }
}

@keyframes socialRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes socialPing {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.3); opacity: 0; }
}

.social-dot-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: opacity 0.3s cubic-bezier(.4,0,.2,1), visibility 0.3s;
}

.social-dot-overlay.open { opacity: 1; visibility: visible; }

/* Lapisan blur berwarna yang "bernapas" pelan-pelan — biar hidup */
.social-dot-overlay::before {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(circle at 28% 28%, rgba(0, 208, 132, 0.20), transparent 42%),
    radial-gradient(circle at 74% 68%, rgba(77, 171, 247, 0.16), transparent 46%),
    radial-gradient(circle at 50% 85%, rgba(184, 146, 255, 0.10), transparent 50%),
    rgba(13, 17, 23, 0.72);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  animation: socialBgDrift 9s ease-in-out infinite alternate;
  z-index: 0;
}

.social-dot-nav {
  position: relative;
  z-index: 1;
  width: 300px;
  height: 300px;
  --radius: 118px;
}

/* Cincin dial dekoratif ala jam analog / radar */
.social-dot-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease 0.15s;
}

.social-dot-overlay.open .social-dot-rings { opacity: 1; }

.ring-dash {
  fill: none;
  stroke: var(--accent-green);
  stroke-width: 1;
  stroke-dasharray: 3 9;
  opacity: 0.5;
  transform-origin: 150px 150px;
  animation: socialRingSpin 26s linear infinite;
}

.ring-solid {
  fill: none;
  stroke: var(--border-bright);
  stroke-width: 1;
  opacity: 0.35;
}

.ring-tick {
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Slot posisi — statis, menempatkan tiap dot di titik mata angin (12/3/6/9) */
.social-dot-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.social-dot-slot.slot-top    { transform: translate(-50%, calc(-50% - var(--radius))); }
.social-dot-slot.slot-right  { transform: translate(calc(-50% + var(--radius)), -50%); }
.social-dot-slot.slot-bottom { transform: translate(-50%, calc(-50% + var(--radius))); }
.social-dot-slot.slot-left   { transform: translate(calc(-50% - var(--radius)), -50%); }

/* Dot bulat — animasi muncul memantul halus dari tengah */
.social-dot {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  text-decoration: none;
  cursor: pointer;
  transform: scale(0.15);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(.34,1.56,.64,1),
    opacity 0.3s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.social-dot-overlay.open .social-dot {
  transform: scale(1);
  opacity: 1;
  transition-delay: calc(var(--i) * 0.08s);
}

.social-dot:hover { transform: scale(1.14) !important; box-shadow: 0 10px 26px rgba(0,0,0,0.5); }

.social-dot.wa:hover     { border-color: #25d366; color: #25d366; background: rgba(37, 211, 102, 0.1); }
.social-dot.ig:hover     { border-color: #e1306c; color: #e1306c; background: rgba(225, 48, 108, 0.1); }
.social-dot.exness:hover { border-color: var(--accent-green); color: var(--accent-green); background: var(--accent-green-dim); }
.social-dot.gh:hover     { border-color: var(--text-primary); background: rgba(230, 237, 243, 0.08); }

/* Label teks — selalu tampil (bukan cuma saat hover) */
.dot-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.2s ease;
}

.social-dot-overlay.open .dot-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i) * 0.08s + 0.08s);
}

.social-dot-slot:hover .dot-label { color: var(--text-primary); }

/* Tombol silang (X) di pusat — penutup navigasi */
.social-dot-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 71, 87, 0.12);
  border: 1px solid rgba(255, 71, 87, 0.4);
  color: var(--accent-red);
  cursor: pointer;
  padding: 0;
  transform: translate(-50%, -50%) scale(0.2) rotate(-135deg);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(.34,1.56,.64,1) 0.05s,
    opacity 0.3s ease 0.05s,
    background 0.2s ease,
    border-color 0.2s ease;
}

.social-dot-overlay.open .social-dot-center {
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 1;
}

.social-dot-center:hover {
  background: rgba(255, 71, 87, 0.24);
  border-color: var(--accent-red);
  transform: translate(-50%, -50%) scale(1.12) rotate(90deg);
}

/* Cincin ping berdenyut pelan di sekitar tombol X — kesan "hidup" */
.social-dot-center::before,
.social-dot-center::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 71, 87, 0.4);
  opacity: 0;
  pointer-events: none;
}

.social-dot-overlay.open .social-dot-center::before { animation: socialPing 2.8s ease-out 0.5s infinite; }
.social-dot-overlay.open .social-dot-center::after  { animation: socialPing 2.8s ease-out 1.9s infinite; }

@media (max-width: 640px) {
  .social-dot-nav { width: 240px; height: 240px; --radius: 84px; }
  .social-dot { width: 54px; height: 54px; }
  .social-dot-center { width: 46px; height: 46px; }
  .dot-label { font-size: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) {
  .social-dot-overlay::before,
  .ring-dash,
  .social-dot-center::before,
  .social-dot-center::after { animation: none; }
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 10px 8px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.dark-mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 8px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  transition: all var(--transition);
  font-size: 0.78rem;
}

.dark-mode-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.sidebar-version {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-align: center;
  padding-top: 6px;
  font-family: var(--font-mono);
}

/* 7. TOPBAR */
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  height: var(--topbar-height);
  overflow: hidden;
  position: relative;
  z-index: 50;
}

.hamburger-btn {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.hamburger-btn span {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: var(--transition);
  display: block;
}

/* Ticker Tape */
.ticker-wrap {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.ticker-tape {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: ticker-scroll 40s linear infinite;
  padding: 0 20px;
}

.ticker-tape:hover { animation-play-state: paused; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.ticker-sep {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.ticker-sym {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.72rem;
}

.ticker-price { color: var(--text-primary); }

.ticker-up   .ticker-chg { color: var(--accent-green); font-size: 0.68rem; }
.ticker-down .ticker-chg { color: var(--accent-red);   font-size: 0.68rem; }
.ticker-loading { color: var(--text-muted); font-size: 0.75rem; padding: 0 16px; }

/* Topbar Right */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-color);
}

.clock-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.clock-utc, .clock-wib {
  display: flex;
  align-items: center;
  gap: 4px;
}

.clock-label {
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clock-time { color: var(--text-secondary); font-weight: 500; }
.clock-divider { color: var(--border-bright); }

.notif-btn {
  position: relative;
  color: var(--text-secondary);
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.notif-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: var(--accent-red);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Notification Panel */
.notif-panel {
  position: absolute;
  top: calc(var(--topbar-height) + 4px);
  right: 12px;
  width: 300px;
  max-height: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  overflow: hidden;
  animation: fadeIn 0.15s ease;
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.82rem;
  font-weight: 600;
}

.notif-header button {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.notif-header button:hover { color: var(--accent-red); background: var(--accent-red-dim); }

.notif-list {
  overflow-y: auto;
  max-height: 300px;
}

.notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.notif-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.78rem;
  transition: background var(--transition);
}
.notif-item:hover { background: var(--bg-hover); }
.notif-item:last-child { border-bottom: none; }

.notif-msg { color: var(--text-primary); line-height: 1.4; }
.notif-time { color: var(--text-muted); font-size: 0.68rem; }

.notif-success .notif-msg::before { content: '✓ '; color: var(--accent-green); }
.notif-error   .notif-msg::before { content: '✕ '; color: var(--accent-red); }
.notif-warning .notif-msg::before { content: '⚠ '; color: var(--accent-gold); }
.notif-info    .notif-msg::before { content: 'ℹ '; color: var(--accent-blue); }

/* 8. MAIN CONTENT */
.main-content {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-primary);
  padding: 20px;
  position: relative;
}

/* Caps content width on large/ultra-wide desktop screens so cards, forms,
   and rows don't stretch edge-to-edge into huge empty gaps. Targets only the
   known per-page root wrappers (not modal overlays/tooltips/toasts, which
   are position:fixed and must stay full-viewport). Pages that already ship
   their own max-width (.ec, .rp, .rh, .sa, .mt5a, .ofa) are unaffected since
   their own rule is more specific/later in the cascade.
   No effect on laptops/1080p (available width there is already under the
   cap); only kicks in on big monitors (1440p/ultra-wide). */
.main-content > .dashboard-root,
.main-content > .chart-page,
.main-content > .analysis-page,
.main-content > .devcom-page,
.main-content > .np,
.main-content > .fsc-page {
  max-width: 1760px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* 9. CARD — GLASSMORPHISM */
.card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  transition: border-color var(--transition-slow), box-shadow var(--transition-slow), transform var(--transition-slow);
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-lg);
}

.card:hover::before {
  opacity: 1;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.card-body { padding: 16px 18px; }

/* 10. BADGES — UP / DOWN */
.badge-up, .badge-down {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-mono);
  line-height: 1;
}

.badge-up {
  background: var(--accent-green-dim);
  color: var(--accent-green);
  border: 1px solid rgba(31,223,148,0.25);
}

.badge-down {
  background: var(--accent-red-dim);
  color: var(--accent-red);
  border: 1px solid rgba(255,92,116,0.25);
}

.badge-neutral {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.badge-up.pulse   { animation: pulse-green 2s infinite; }
.badge-down.pulse { animation: pulse-red 2s infinite; }

/* 11. SKELETON LOADER */
.skeleton-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
  animation: fadeIn 0.2s ease;
}

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

.skeleton-row:last-child {
  grid-template-columns: 2fr 1fr;
}

.skeleton-header,
.skeleton-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.skeleton-header { height: 52px; }
.skeleton-card   { height: 120px; }
.skeleton-card.tall { height: 280px; }

.skeleton-header::after,
.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.03) 50%,
    transparent 100%
  );
  animation: shimmer 1.8s infinite;
}

/* 12. TOAST NOTIFICATIONS */
.toast-container {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  max-width: 420px;
  margin: 0 auto;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  animation: toast-drop-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  position: relative;
  overflow: hidden;
}

.toast.dismissing {
  animation: toast-drop-out 0.22s ease forwards;
}

.toast-success { border-color: rgba(31,223,148,0.28); box-shadow: var(--shadow-lg), 0 8px 24px rgba(31,223,148,0.10); }
.toast-error   { border-color: rgba(255,92,116,0.28); box-shadow: var(--shadow-lg), 0 8px 24px rgba(255,92,116,0.10); }
.toast-warning { border-color: rgba(212,175,55,0.32); box-shadow: var(--shadow-lg), 0 8px 24px rgba(212,175,55,0.10); }
.toast-info    { border-color: rgba(91,157,255,0.28); box-shadow: var(--shadow-lg), 0 8px 24px rgba(91,157,255,0.10); }

.toast-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast-success .toast-icon { background: var(--accent-green-dim); }
.toast-error   .toast-icon { background: var(--accent-red-dim); }
.toast-warning .toast-icon { background: var(--accent-gold-dim); }
.toast-info    .toast-icon { background: var(--accent-blue-dim); }

.toast-body { flex: 1; padding-top: 2px; min-width: 0; }
.toast-msg  { font-size: 0.82rem; color: var(--text-primary); line-height: 1.45; font-weight: 500; }
.toast-time { font-size: 0.68rem; color: var(--text-muted); margin-top: 3px; letter-spacing: 0.02em; }

.toast-close {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
  padding: 2px;
  margin-top: -1px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.toast-close:hover { color: var(--text-primary); background: var(--bg-hover); }

@keyframes toast-drop-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-drop-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-10px) scale(0.96); }
}

/* 13. BUTTONS */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
}

.btn-primary {
  background: var(--gold-gradient);
  background-size: 160% 160%;
  background-position: 0% 0%;
  color: #14110a;
  border-color: transparent;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  background-position: 100% 100%;
  box-shadow: var(--shadow-gold);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn-secondary:hover {
  background: var(--bg-active);
  border-color: var(--border-accent);
}

.btn-danger {
  background: var(--accent-red-dim);
  color: var(--accent-red);
  border-color: rgba(255,92,116,0.35);
}
.btn-danger:hover {
  background: var(--accent-red);
  color: #fff;
  box-shadow: var(--shadow-red);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-color);
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn-sm { padding: 5px 10px; font-size: 0.72rem; }
.btn-lg { padding: 11px 22px; font-size: 0.88rem; }

.btn-primary:active, .btn-secondary:active { transform: translateY(0); }

/* 14. DATA TABLE */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-secondary);
}

.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition);
}

.data-table th:hover { color: var(--accent-gold); }

.data-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  white-space: nowrap;
  transition: background var(--transition);
}

.data-table tbody tr:hover td { background: var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* 15. GAUGE CONTAINER */
.gauge-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gauge-svg { overflow: visible; }

.gauge-track {
  fill: none;
  stroke: var(--bg-hover);
  stroke-width: 10;
  stroke-linecap: round;
}

.gauge-fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s ease;
}

.gauge-label {
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--font-mono);
  font-weight: 700;
  fill: var(--text-primary);
}

.gauge-sublabel {
  text-anchor: middle;
  font-family: var(--font-sans);
  font-size: 10px;
  fill: var(--text-secondary);
}

/* 16. ERROR STATE */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60vh;
  text-align: center;
  padding: 40px;
  animation: fadeIn 0.3s ease;
}

.error-icon { margin-bottom: 4px; }
.error-title { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
.error-msg   { font-size: 0.82rem; color: var(--text-secondary); }
.error-detail {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  background: var(--bg-card);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

/* 17. SECTION PAGE HEADER */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 18px;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

/* Aksen gold pendek menempel di ujung kiri border-bottom — pengganti garis
   pemisah abu-abu polos dgn anchor visual premium. Konsisten di semua
   halaman yg pakai .page-header (dashboard & riwayat). */
.page-header::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 56px;
  height: 1px;
  background: var(--gold-gradient);
}

.page-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  font-optical-sizing: auto;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.page-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 5px;
}

/* ============================================================
   MARKET OVERVIEW HEADER (.mo-*) — dashboard.html "Market Overview"
   Obsidian Ember treatment: eyebrow + live pulse, gold title rule,
   inline bullish/bearish pulse, refined update badge & refresh action.
   ============================================================ */
.mo-header { padding-bottom: 20px; overflow: hidden; }

/* Ambient ember glow — subtle radial wash, pojok kiri atas saja. */
.mo-header::before {
  content: '';
  position: absolute;
  top: -50px; left: -50px;
  width: 260px; height: 170px;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.10), transparent 72%);
  pointer-events: none;
}

.mo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 7px;
  position: relative;
}

.mo-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-gold);
  animation: moPulseDot 2.2s ease-out infinite;
}

@keyframes moPulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(212,175,55,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}

.mo-title-rule {
  width: 42px; height: 2px;
  background: var(--gold-gradient);
  border-radius: 2px;
  margin-top: 10px;
}

.mo-sep { color: var(--text-muted); margin: 0 7px; }
.mo-pulse-up   { font-family: var(--font-mono); color: var(--accent-green); font-weight: 600; }
.mo-pulse-down { font-family: var(--font-mono); color: var(--accent-red); font-weight: 600; margin-left: 9px; }

.mo-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.mo-update-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.7rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.mo-update-badge svg { flex-shrink: 0; color: var(--text-muted); }
.mo-update-badge b { font-family: var(--font-mono); font-weight: 600; color: var(--text-secondary); }

/* Refresh — varian gold di atas .btn-ghost (dideklarasikan setelah .btn-ghost
   di stylesheet ini, jadi menang tanpa perlu !important). Outline gold saat
   idle, solid gold-gradient saat hover, ikon berputar nyata selama fetch. */
.mo-refresh-btn {
  border-color: var(--border-accent);
  color: var(--accent-gold);
}
.mo-refresh-btn:hover {
  background: var(--gold-gradient);
  color: var(--text-inverse);
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}
.mo-refresh-btn.mo-refreshing svg { animation: moSpin 0.7s linear infinite; }

@keyframes moSpin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
  .mo-header-right { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-live-dot { animation: none; }
  .mo-refresh-btn.mo-refreshing svg { animation: none; }
}

/* 18. TABS */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 3px;
}

.tab-btn {
  flex: 1;
  padding: 6px 12px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition);
  white-space: nowrap;
}

.tab-btn.active {
  background: var(--bg-card);
  color: var(--accent-gold);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(212,175,55,0.25);
}

.tab-btn:hover:not(.active) { color: var(--text-primary); background: var(--bg-hover); }

/* 19. MOBILE OVERLAY */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
  backdrop-filter: blur(2px);
}

.sidebar-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* 20. MISC UTILITY CLASSES */
.text-green  { color: var(--accent-green); }
.text-red    { color: var(--accent-red); }
.text-blue   { color: var(--accent-blue); }
.text-gold   { color: var(--accent-gold); }
.text-muted  { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-mono   { font-family: var(--font-mono); }
.text-sm     { font-size: 0.75rem; }
.text-xs     { font-size: 0.68rem; }

.d-flex      { display: flex; }
.align-center{ align-items: center; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }

.divider {
  height: 1px;
  background: var(--border-color);
  margin: 12px 0;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.dot-green  { background: var(--accent-green); }
.dot-red    { background: var(--accent-red); }
.dot-blue   { background: var(--accent-blue); }
.dot-gold   { background: var(--accent-gold); }
.dot-gray   { background: var(--text-muted); }

/* 21. KEYFRAME ANIMATIONS */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.15); }
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,208,132,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(0,208,132,0); }
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,71,87,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(255,71,87,0); }
}

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

@keyframes fadeInFast {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-right {
  from { transform: translateX(calc(100% + 24px)); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(calc(100% + 24px)); opacity: 0; }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes price-flash-up {
  0%   { background: var(--accent-green-dim); }
  100% { background: transparent; }
}

@keyframes price-flash-down {
  0%   { background: var(--accent-red-dim); }
  100% { background: transparent; }
}

.flash-up   { animation: price-flash-up 0.8s ease; }
.flash-down { animation: price-flash-down 0.8s ease; }

/* 22. RESPONSIVE — TABLET (max 1024px) */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 200px;
  }

  .main-content { padding: 16px; }

  .skeleton-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .skeleton-row:last-child {
    grid-template-columns: 1fr;
  }
}

/* 23. RESPONSIVE — MOBILE (max 768px) */
@media (max-width: 768px) {
  .app-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: var(--app-vh, 100vh);
    height: 100dvh;
    width: var(--sidebar-width) !important;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .hamburger-btn { display: flex; }
  .clock-wrap    { display: none; }

  .topbar { padding-right: 8px; }
  .main-content { padding: 12px; }

  .page-header { flex-direction: column; align-items: flex-start; }
}

/* 23b. INSTALL APP MODAL */
.install-app-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: installModalFadeIn 0.18s ease-out;
}

@keyframes installModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.install-app-modal {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 380px;
  width: 100%;
  padding: 28px 24px 24px;
  text-align: center;
}

.install-app-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s);
}

.install-app-modal-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.install-app-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(255, 159, 67, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.install-app-modal-title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.install-app-modal-subtitle {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0 0 18px;
  line-height: 1.5;
}

.install-steps {
  text-align: left;
  margin: 0;
  padding-left: 22px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--text-primary);
  line-height: 1.7;
}

.install-steps li { margin-bottom: 8px; }
.install-steps li:last-child { margin-bottom: 0; }

.install-step-icon { font-size: 0.9em; }

.install-fallback-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: left;
}

/* 24. RESPONSIVE — SMALL MOBILE (max 480px) */
@media (max-width: 480px) {
  html { font-size: 13px; }

  .main-content { padding: 10px; }

  .ticker-tape { animation-duration: 25s; }

  .toast {
    min-width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  .toast-container {
    right: 12px;
    left: 12px;
    bottom: 12px;
  }

  .notif-panel {
    width: calc(100vw - 24px);
    right: 12px;
  }
}