*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d0d0d;
  --bg2: #141414;
  --bg3: #1a1a1a;
  --border: #2a2a2a;
  --text: #e0e0e0;
  --text-dim: #666;
  --green: #26a69a;
  --red: #ef5350;
  --accent: #2962ff;
  --nav-w: 200px;
  --topbar1-h: 36px;
  --header-h: 44px;
  --bars-h: calc(var(--topbar1-h) + var(--header-h));
  --sidebar-search-h: 52px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  overflow: hidden;
}

/* ── Topbar 1 — layout selector ── */
#topbar1 {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar1-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  z-index: 200;
}

.tb1-label {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tb1-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

.layout-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.layout-btn:hover     { background: var(--bg3); color: var(--text); }
.layout-btn.active    { background: var(--accent); border-color: var(--accent); color: #fff; }
.layout-btn.ss-active { background: #0d2420; border-color: var(--green); color: var(--green); }
.layout-btn.ss-active:hover { background: #102c22; }

#version-label {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  font-family: monospace;
  letter-spacing: 0.3px;
}

.tb1-select {
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, color 0.15s;
}
.tb1-select:hover  { border-color: #444; color: var(--text); }
.tb1-select.active { border-color: var(--accent); color: var(--accent); }

/* ── Header (topbar 2) ── */
header {
  position: fixed;
  top: var(--topbar1-h);
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  z-index: 199;
}

header h1 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

#index-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
#index-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.tab-btn:hover { background: var(--bg3); color: var(--text); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tab-divider { width: 1px; background: var(--border); margin: 3px 6px; flex-shrink: 0; align-self: stretch; }

.market-drop-wrap { position: relative; flex-shrink: 0; }
.market-drop-panel {
  display: none; position: fixed;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px; z-index: 1000; min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.65);
  max-height: 70vh; overflow-y: auto;
}
.market-drop-panel.open { display: block; }
.market-drop-group-label {
  font-size: 9px; font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 8px 8px 3px;
}
.market-drop-item {
  display: block; width: 100%; text-align: left;
  padding: 5px 10px; border-radius: 4px; border: none;
  background: none; color: var(--text-dim, #888);
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .1s, color .1s;
}
.market-drop-item:hover { background: var(--bg3); color: var(--text); }
.market-drop-item.active { color: var(--accent, #2962ff); }

#last-updated {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── Sidebar search ── */
#sidebar-search-wrap {
  position: fixed;
  top: var(--bars-h);
  left: 0;
  width: var(--nav-w);
  height: var(--sidebar-search-h);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5px 8px 4px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#sidebar-search {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12px;
  outline: none;
}

#stock-count {
  font-size: 10px;
  color: var(--text-dim);
  font-family: monospace;
  text-align: right;
  line-height: 1;
}
#sidebar-search:focus { border-color: var(--accent); }
#sidebar-search::placeholder { color: var(--text-dim); }

/* ── Sidebar ── */
aside#stock-list {
  position: fixed;
  top: calc(var(--bars-h) + var(--sidebar-search-h));
  left: 0;
  bottom: 0;
  width: var(--nav-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
}

aside#stock-list::-webkit-scrollbar { width: 4px; }
aside#stock-list::-webkit-scrollbar-track { background: transparent; }
aside#stock-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.stock-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 8px 8px 8px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.stock-btn:hover { background: var(--bg3); }
.stock-btn.active { background: #1e2a3a; border-left: 2px solid var(--accent); }

.stock-btn-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.stock-btn .sname {
  font-weight: 600;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stock-btn .ticker {
  font-size: 10px;
  color: var(--text-dim);
}
.stock-btn .change {
  font-size: 11px;
  margin-top: 2px;
}
.stock-btn .change.up   { color: var(--green); }
.stock-btn .change.down { color: var(--red); }

.fav-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 4px 4px 6px;
  line-height: 1;
  opacity: 0.25;
  transition: opacity 0.15s, color 0.15s;
}
.stock-btn:hover .fav-btn { opacity: 0.55; }
.fav-btn:hover            { opacity: 1 !important; color: #f59e0b; }
.fav-btn.fav-active       { opacity: 1; color: #f59e0b; }

/* ── Single-mode chart area ── */
#main {
  position: fixed;
  top: var(--bars-h);
  left: var(--nav-w);
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#chart-container { flex: 1; min-height: 0; position: relative; }

/* ── Timeframe strip ── */
#tf-strip {
  display: flex;
  height: 26px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  z-index: 5;
}

.tf-btn {
  padding: 2px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  transition: background .15s, color .15s;
}
.tf-btn:hover  { background: var(--bg3); color: var(--text); }
.tf-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── On-chart stock info overlay ── */
#chart-price-label {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  background: #1e1e1e;
  color: #e0e0e0;
  font-size: 11px;
  font-family: monospace;
  padding: 1px 5px;
  border: 1px solid #333;
  border-right: none;
  border-radius: 3px 0 0 3px;
  pointer-events: none;
  z-index: 20;
  display: none;
}
#chart-price-label.visible { display: block; }

#chart-overlay {
  position: absolute;
  top: 10px;
  left: 72px;
  z-index: 10;
  pointer-events: none;
  line-height: 1.35;
}
.ov-name  { font-size: 11px; font-weight: 600; color: rgba(200,200,200,0.65); letter-spacing: 0.3px; }
.ov-sym   { font-weight: 400; color: rgba(255,255,255,0.3); margin-left: 5px; font-family: monospace; }
.ov-badge { display: inline-block; font-size: 9px; background: #2a2a2a; color: #aaa;
            border-radius: 3px; padding: 1px 5px; margin-left: 6px;
            vertical-align: middle; font-weight: 700; letter-spacing: .04em; }
.ov-price { font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.88); margin-top: 3px; }
.ov-chg   { font-size: 12px; margin-top: 2px; }

.chart-fav-btn {
  position: absolute; top: 10px; right: 62px; z-index: 10;
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: rgba(255,255,255,0.2); padding: 2px 4px; line-height: 1;
  transition: color .15s;
}
.chart-fav-btn:hover, .chart-fav-btn.fav-active { color: #e0b840; }

.chart-share-btn {
  position: absolute; top: 12px; right: 92px; z-index: 10;
  background: none; border: none; font-size: 12px; cursor: pointer;
  color: rgba(255,255,255,0.2); padding: 2px 4px; line-height: 1;
  transition: color .15s; font-family: monospace;
}
.chart-share-btn:hover { color: rgba(255,255,255,0.7); }
.chart-share-btn.copied { color: #26a69a; }

.ind-header { position: relative; }
.ind-fav-btn {
  position: absolute; top: 0; right: 0;
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: rgba(255,255,255,0.2); padding: 0; line-height: 1;
  transition: color .15s;
}
.ind-fav-btn:hover, .ind-fav-btn.fav-active { color: #e0b840; }

/* ── Quad-mode (2×2) layout ── */
#main-quad {
  position: fixed;
  top: var(--bars-h);
  left: var(--nav-w);
  right: 0;
  bottom: 0;
  display: none;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

.quad-cell {
  background: var(--bg);
  position: relative;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.quad-label {
  position: absolute;
  top: 6px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  z-index: 10;
  pointer-events: none;
}

/* ── Indicators panel (q-indicators) ── */
#q-indicators {
  overflow-y: auto;
  padding: 16px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.ind-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.ind-name   { font-size: 15px; font-weight: 700; color: #fff; }
.ind-sym    { font-size: 11px; color: var(--text-dim); margin-top: 2px; font-family: monospace; }
.ind-isin   { margin-left: 8px; font-size: 10px; color: var(--border); letter-spacing: 0.5px; }
.ind-price  { font-size: 22px; font-weight: 700; color: #fff; margin-top: 10px; line-height: 1; }
.ind-chg    { font-size: 13px; margin-top: 4px; }
.ind-mcap   { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
.ind-mcap span { font-family: monospace; color: var(--text); }

.ind-section { margin-bottom: 14px; }
.ind-sec-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  margin-bottom: 7px;
  font-weight: 600;
}
.ind-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  margin-bottom: 6px;
}
.ind-lbl { color: var(--text-dim); }
.ind-val  { font-family: monospace; font-size: 11px; text-align: right; }

.ind-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ind-link {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  background: var(--bg3);
  color: var(--text-dim);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.ind-link:hover { color: var(--text); border-color: #555; }

.ind-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.ind-pill.fired  { background: #1c1500; color: #f59e0b; border: 1px solid #3a2800; }
.ind-pill.ath    { background: #130d20; color: #a78bfa; border: 1px solid #2a1a40; }
.ind-pill.off    { background: var(--bg3); color: var(--text-dim); border: 1px solid var(--border); }

.range-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: monospace;
  margin-bottom: 6px;
}
.range-tbl th {
  color: var(--text-dim);
  font-weight: 400;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 10px;
  text-align: right;
  padding: 0 4px 4px;
}
.range-tbl th:first-child { text-align: left; }
.range-tbl td {
  text-align: right;
  padding: 1px 4px;
  white-space: nowrap;
}
.range-tbl td:first-child {
  text-align: left;
  color: var(--text-dim);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 10px;
  width: 28px;
}
.range-tbl .rg { color: #26a69a; }
.range-tbl .rr { color: #ef5350; }

/* ── Indicator tab colours ──────────────────────────────────────────────────
   Group 1 — Alerts + Signals  →  amber  #f59e0b
   Group 2 — Tops + Bottoms    →  purple #a78bfa
   Group 3 — Favs + History    →  teal   #26a69a
   ── */
.tab-alerts,
.tab-signal  { border-color: #f59e0b !important; color: #f59e0b !important; }
.tab-alerts:hover,
.tab-signal:hover  { background: #1c1500 !important; }
.tab-alerts.active,
.tab-signal.active { background: #f59e0b !important; color: #000 !important; border-color: #f59e0b !important; }

.tab-tops,
.tab-bottoms { border-color: #a78bfa !important; color: #a78bfa !important; }
.tab-tops:hover,
.tab-bottoms:hover { background: #130d20 !important; }
.tab-tops.active,
.tab-bottoms.active { background: #a78bfa !important; color: #000 !important; border-color: #a78bfa !important; }

.tab-favs,
.tab-hist  { border-color: #26a69a !important; color: #26a69a !important; }
.tab-favs:hover,
.tab-hist:hover  { background: #061a14 !important; }
.tab-favs.active,
.tab-hist.active { background: #26a69a !important; color: #000 !important; border-color: #26a69a !important; }

.signal-stock { border-left: 2px solid #f59e0b33; }
.signal-stock.active { border-left-color: #f59e0b; background: #1c1500; }

.tops-stock { border-left: 2px solid #a78bfa33; }
.tops-stock.active { border-left-color: #a78bfa; background: #130d20; }

.sig-meta { font-size: 10px; color: #f59e0b; margin-top: 2px; }
.tops-stock .sig-meta { color: #a78bfa; }

.sidebar-empty {
  padding: 16px 12px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}

/* ── Mobile layout ────────────────────────────────────────────────────────────── */
:root { --mob-bar-h: 52px; }

/* Mobile elements: hidden in desktop mode */
#mob-bar        { display: none; }
#mob-indicators { display: none; }
#mob-backdrop   {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 350;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.mob-drawer {
  display: none;
  position: fixed;
  bottom: var(--mob-bar-h); left: 0; right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 400;
  flex-direction: column;
  transform: translateY(calc(100% + var(--mob-bar-h)));
  transition: transform .25s ease;
}

/* ── body.mobile overrides ── */
body.mobile #topbar1          { display: none; }
body.mobile header            { display: none; }
body.mobile #main-quad        { display: none !important; }
/* sidebar elements hidden at original position; JS moves them into the drawer */
body.mobile #sidebar-search-wrap,
body.mobile aside#stock-list  { display: none; }

body.mobile #main {
  top: 0; left: 0; bottom: auto;
  height: 55vh;
  z-index: 1;
}

body.mobile #mob-indicators {
  display: block;
  position: fixed;
  top: 55vh; left: 0; right: 0;
  bottom: var(--mob-bar-h);
  overflow-y: auto;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
body.mobile #mob-indicators #q-indicators {
  overflow-y: visible;
  height: auto;
}

body.mobile #mob-bar {
  display: flex;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--mob-bar-h);
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 300;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}

#mob-tabs {
  flex: 1;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 4px;
  align-items: center;
  min-width: 0;
}
#mob-tabs::-webkit-scrollbar { display: none; }

.mob-icon-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  padding: 0;
}
.mob-icon-btn:hover  { background: var(--bg3); color: var(--text); }
.mob-icon-btn.active { background: var(--bg3); color: var(--green); border-color: var(--green); }

body.mobile .mob-drawer       { display: flex; }
body.mobile .mob-drawer.open  { transform: translateY(0); }
body.mobile #mob-backdrop     { display: block; }
body.mobile #mob-backdrop.open { opacity: 1; pointer-events: auto; }

#mob-drawer-stocks { height: 72vh; }
#mob-drawer-view   { max-height: 65vh; overflow-y: auto; }

/* Sidebar elements inside the mob drawer */
#mob-drawer-stocks #sidebar-search-wrap { display: flex !important; }
#mob-drawer-stocks aside#stock-list     { display: block !important; }

.mob-view-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.mob-view-lbl { font-size: 13px; color: var(--text-dim); }
.mob-view-sel {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 13px;
  outline: none;
  min-width: 120px;
}