/* ============================================================
   ProfitData — Common styles
   ============================================================ */
:root, [data-theme="black"] {
  --bg:       #0a0a0a;
  --bg2:      #212121;
  --bg3:      #2a2a2a;
  --bg4:      #333333;
  --border:   rgba(255,255,255,.08);
  --text:     #e8e8e8;
  --text2:    #9e9e9e;
  --text3:    #555555;
  --green:    #17c784;
  --red:      #ea3a4b;
  --yellow:   #e8b84b;
  --blue:     #1255cc;
  --accent:   #3b82f6;
  --accent-hover: #2563eb;
  --radius:   8px;
  --font:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --header-h: 42px;
}
[data-theme="black"] .app-header { background: #0f0f0f; border-bottom-color: rgba(255,255,255,.06); }
[data-theme="black"] #platformToolbar { background: #0f0f0f; }
[data-theme="black"] .wl-sym img { opacity: .7; }
[data-theme="black"] .wl-price { color: var(--text2); }
[data-theme="black"] .wl-vol { color: var(--text3); }
[data-theme="black"] .ws-panel { border-color: rgba(255,255,255,.06); background: #0a0a0a; }
[data-theme="black"] .panel-hd { background: #0a0a0a; }
[data-theme="black"] .panel-body { background: #0a0a0a; }
[data-theme="black"] .panel-body:has(.wl-wrap),
[data-theme="black"] .panel-body:has(.screener-wrap) { background: #151515; }
[data-theme="black"] .ws-panel:has(.wl-wrap) .panel-hd,
[data-theme="black"] .ws-panel:has(.screener-wrap) .panel-hd { background: #131313; }

/* ── Dark theme ── */
[data-theme="dark"] {
  --bg:       #060810;
  --bg2:      #09090f;
  --bg3:      #111827;
  --bg4:      #1c2030;
  --border:   rgba(255,255,255,.06);
  --text:     #e2e6f0;
  --text2:    #9ca8ba;
  --text3:    #4a5568;
  --green:    #2dd8a3;
  --red:      #f75a5a;
  --yellow:   #f9c74f;
  --accent:   #1a6cf5;
  --accent-hover: #1555cc;
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:       #f5f6f8;
  --bg2:      #ebedf2;
  --bg3:      #dfe2e8;
  --bg4:      #cdd1da;
  --border:   rgba(0,0,0,.1);
  --text:     #1a1d26;
  --text2:    #2d3342;
  --text3:    #7a8294;
  --green:    #089981;
  --red:      #f23645;
  --yellow:   #d4960a;
  --accent:   #2563eb;
  --accent-hover: #1d4fd8;
}
[data-theme="light"] .app-header { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
[data-theme="light"] .btn { border-color: rgba(0,0,0,.12); }
[data-theme="light"] .btn-primary { background: rgba(0,0,0,.05); color: var(--text); }
[data-theme="light"] .btn-primary:hover { background: rgba(0,0,0,.1); }
[data-theme="light"] .u-under { background: var(--bg); }
[data-theme="light"] .u-cursor-x { border-right: 1px solid rgba(0,0,0,.12); }
[data-theme="light"] .u-cursor-y { border-bottom: 1px solid rgba(0,0,0,.12); }

/* Theme toggle group */
.theme-group {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg3); border-radius: 6px; padding: 2px;
}
.theme-toggle {
  width: 26px; height: 26px; border: none; border-radius: 4px;
  background: transparent; color: var(--text3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.theme-toggle:hover { color: var(--text2); }
.theme-toggle.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
/* theme group visible on all screen sizes */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
button { cursor: pointer; font-family: var(--font); }

.green  { color: var(--green)  !important; }
.red    { color: var(--red)    !important; }
.yellow { color: var(--yellow) !important; }
.muted  { color: var(--text2)  !important; }
.up     { color: var(--green) !important; }
.down   { color: var(--red)   !important; }

/* ── HEADER ── */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--header-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.header-inner {
  width: 100%; display: flex; align-items: center; padding: 0 12px; gap: 0;
}
.logo {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; letter-spacing: -.3px;
  color: var(--text); white-space: nowrap; margin-right: 16px;
}
.logo-img { height: 24px; width: auto; display: block; }
.app-nav { display: flex; gap: 1px; flex: 1; }
.nav-link {
  padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 500;
  color: var(--text2); transition: all .12s; white-space: nowrap;
  border: none; background: none;
}
.nav-link:hover { color: var(--text); }
.nav-link.active { color: var(--accent); font-weight: 600; }
.header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.badge-live {
  font-size: 10px; font-weight: 600; color: var(--green);
  letter-spacing: .4px; animation: pulse 2s infinite;
}
.btn { border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 4px 14px; font-size: 11px; font-weight: 500; }
.btn-primary { background: rgba(255,255,255,.08); color: var(--text); }
.btn-primary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }

/* ── TICKER BAR ── */
.ticker-bar {
  position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 199;
  height: 28px; background: var(--bg2); border-bottom: 1px solid var(--border);
  overflow: hidden; display: flex; align-items: center;
}
.ticker-track {
  display: flex; gap: 24px; white-space: nowrap;
  animation: scroll-ticker 38s linear infinite; padding: 0 12px;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes scroll-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tick { font-size: 11px; color: var(--text2); }
.tick b { color: var(--text); font-weight: 600; margin: 0 2px; }
.tick.up  small { color: var(--green); }
.tick.down small { color: var(--red); }

/* ── ANIMATIONS ── */
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }
@keyframes fadeIn { from { opacity:0; background: rgba(41,98,255,.12) } to { opacity:1; background: transparent } }

/* ── Burger menu ── */
.mob-burger {
  width: 40px; height: 40px; border: none; background: none;
  color: var(--text); cursor: pointer; display: none;
  align-items: center; justify-content: center;
  order: -1; margin-right: 2px;
}
.mob-burger-menu {
  position: fixed; top: var(--header-h); left: 0; right: 0;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 8px 16px; z-index: 300;
  display: none; flex-direction: column; gap: 8px;
}
.mob-burger-menu.open { display: flex; }
.mob-burger-menu-row {
  display: flex; align-items: center; justify-content: space-between;
  font: 500 14px var(--font); color: var(--text);
}
.mob-burger-link {
  display: block; padding: 10px 0; color: var(--text); text-decoration: none;
  font: 500 15px var(--font); border: none; background: none; text-align: left;
  cursor: pointer; width: 100%;
}
.mob-burger-link:hover { color: var(--accent); }
.mob-burger-sep { height: 1px; background: var(--border); margin: 4px 0; }
.mob-burger-user { font: 400 12px var(--font); color: var(--text2); padding: 4px 0; }

/* ── MOBILE ── */
@media (max-width: 768px) {
  .app-nav     { display: none !important; }
  .btn-primary { display: none !important; }
  .logo { margin-right: 0; }
  :root { --header-h: 48px; }
  .header-inner { padding: 0 10px; }
  .theme-toggle { width: 32px; height: 32px; }
  .app-header .nav-link { font-size: 13px; padding: 6px 12px; }
  .app-header .btn-primary { padding: 6px 16px; font-size: 13px; }
  .platform-page .mob-burger, .chart-page .mob-burger { display: flex; }
  .theme-group { display: none; }
  .platform-page .badge-live, .chart-page .badge-live { display: none; }
}

/* ── AUTH MODAL ── */
.auth-overlay {
  display: none; position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.auth-overlay.open { display: flex; }
.auth-dialog {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; width: 400px; max-width: 92vw;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  position: relative; overflow: hidden;
}
.auth-logo {
  display: flex; justify-content: center; padding: 28px 28px 6px;
}
.auth-logo img { height: 32px; width: auto; }
.auth-tabs { display: flex; gap: 6px; padding: 8px 28px 16px; }
.auth-tab {
  flex: 1; padding: 9px; border: 1px solid var(--border); border-radius: 20px;
  background: none; font: 500 13px var(--font); color: var(--text3);
  cursor: pointer; transition: all .12s; text-align: center;
}
.auth-tab:hover { color: var(--text2); background: var(--bg3); }
.auth-tab.active { color: var(--text); background: var(--bg3); border-color: var(--text3); }
.auth-body { padding: 0 28px 24px; display: flex; flex-direction: column; gap: 10px; }
.auth-input {
  width: 100%; padding: 11px 16px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg); color: var(--text);
  font: 400 13px var(--font); transition: border-color .12s;
}
.auth-input:focus { outline: none; border-color: var(--accent); }
.auth-input::placeholder { color: var(--text3); }
.auth-submit {
  padding: 11px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255,255,255,.08); color: var(--text);
  font: 500 13px var(--font); cursor: pointer;
  transition: all .12s; margin-top: 2px;
}
.auth-submit:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.2); }
.auth-submit:disabled { opacity: .5; cursor: wait; }
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  font: 400 11px var(--font); color: var(--text3); padding: 2px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.auth-social {
  padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: none; color: var(--text); font: 500 13px var(--font);
  cursor: pointer; transition: all .12s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-social:hover { background: var(--bg3); border-color: var(--text3); }
.auth-social svg { flex-shrink: 0; }
.auth-error { color: var(--red); font-size: 12px; min-height: 16px; text-align: center; }
.auth-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: var(--text3);
  font-size: 20px; cursor: pointer; line-height: 1;
}
.auth-close:hover { color: var(--text); }

/* Header user display */
.header-user { display: flex; align-items: center; gap: 6px; }
.header-user-name { font: 500 11px var(--font); color: var(--text); }
.header-user-logout {
  width: 24px; height: 24px; border: none; border-radius: 50%;
  background: none; color: var(--text3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.header-user-logout:hover { background: var(--bg3); color: var(--red); }

/* Light theme */
[data-theme="light"] .auth-dialog { background: #fff; }
[data-theme="light"] .auth-input { background: var(--bg); }
[data-theme="light"] .auth-submit { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); }
[data-theme="light"] .auth-submit:hover { background: rgba(0,0,0,.1); }
[data-theme="light"] .auth-tab.active { background: var(--bg3); border-color: rgba(0,0,0,.15); }
[data-theme="light"] .ws-col-empty button { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .ws-col-empty button:hover { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.15); }

/* ── SHARED MicroPlot BASE STYLES ── */
.u-over   { cursor: crosshair; }
.u-under  { background: var(--bg); }
.u-select { background: rgba(26,108,245,.08); border: 1px solid rgba(26,108,245,.25); }
.u-cursor-x { border-right: 1px solid rgba(74,85,104,.8); }
.u-cursor-y { border-bottom: 1px solid rgba(74,85,104,.8); }
.u-legend { display: none !important; }

/* mob-hamburger is styled per-page (chart.css), hidden by default */
.mob-hamburger { display: none; }

/* Google Identity Services button container (auth modal) */
.auth-gsi { display: flex; justify-content: center; margin-bottom: 6px; min-height: 0; }
.auth-gsi:empty { display: none; }