/* ===========================================================
   TickAtlas Market Monitor — monitor.css
   Palette matches website global.css design tokens
   =========================================================== */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --bg:        #0a0b0f;
  --bg2:       #12141c;
  --bg-card:   #161922;
  --bg-hover:  #1c2030;
  --border:    #2a2f3e;
  --border-2:  #3d4458;
  --text:      #ffffff;
  --text-2:    #a0a6b8;
  --text-3:    #6b7280;
  --green:     #00d4aa;
  --green-d:   rgba(0,212,170,0.12);
  --red:       #ff6b6b;
  --red-d:     rgba(255,107,107,0.12);
  --purple:    #6c5ce7;
  --purple-d:  rgba(108,92,231,0.12);
  --orange:    #fdcb6e;
  --orange-d:  rgba(253,203,110,0.12);
  --blue:      #74b9ff;
  --blue-d:    rgba(116,185,255,0.12);

  --topbar-h:  48px;
  --sb-w:      220px;
  --radius:    8px;
  --radius-sm: 4px;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-ui:   'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #app { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  color-scheme: dark;
}
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
input { font-family: var(--font-ui); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Layout ────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; }

#topbar {
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  z-index: 100;
}

#main {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* ── Top Bar ────────────────────────────────────────────────── */
.tb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.tb-logo { display: flex; align-items: center; }
.tb-wordmark {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.08em;
}
.tb-page {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.08em;
}
.tb-sep { color: var(--border-2); }
.tb-symbol {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.05em;
}

.tb-context { display: flex; align-items: center; gap: 8px; }

.tb-tfs { display: flex; gap: 2px; }
.tb-tfs .tf {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  transition: all 0.15s;
}
.tb-tfs .tf:hover { background: var(--bg-hover); color: var(--text-2); }
.tb-tfs .tf.active {
  background: var(--green-d);
  color: var(--green);
  border: 1px solid rgba(0,212,170,0.25);
}

.tb-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  transition: background 0.3s;
  flex-shrink: 0;
}
.status-dot.live    { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.stale   { background: var(--orange); }
.status-dot.error   { background: var(--red); }
.status-txt { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.next-poll  { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); white-space: nowrap; }

.tb-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tb-btn {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  transition: all 0.15s;
  white-space: nowrap;
}
.tb-btn:hover { border-color: var(--border-2); color: var(--text); background: var(--bg-hover); }
.tb-btn.primary { border-color: var(--green); color: var(--green); background: var(--green-d); }
.tb-btn.primary:hover { background: rgba(0,212,170,0.2); }
.tb-btn.icon { padding: 5px 8px; }
.tb-btn.icon:hover { color: var(--text); }
.tb-btn.paused { color: var(--orange); border-color: var(--orange); background: var(--orange-d); }

/* ── Sidebar ────────────────────────────────────────────────── */
#sidebar {
  width: var(--sb-w);
  min-width: var(--sb-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sb-search {
  position: relative;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sb-search-icon {
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
#sb-search {
  width: 100%;
  padding: 5px 8px 5px 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  outline: none;
}
#sb-search:focus { border-color: var(--green); }

#sb-groups {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.sb-loading {
  padding: 20px 12px;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

.sb-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px 6px;
  background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.sb-group-head:hover { background: #111; }
.sb-group-arrow { transition: transform 0.2s; font-size: 8px; }
.sb-group.collapsed .sb-group-arrow { transform: rotate(-90deg); }
.sb-group.collapsed .sb-group-items { display: none; }

.sb-sym {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.12s;
}
.sb-sym:hover { background: #252d42; border-left-color: var(--border-2); }
.sb-sym.active {
  background: var(--green-d);
  border-left-color: var(--green);
}
.sb-sym-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}
.sb-sym.active .sb-sym-name { color: var(--green); }
.sb-sym-price {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  text-align: right;
}
/* Tick colors are applied via inline styles in updateSidebarPrice() for
   maximum specificity.  This transition makes the color change smooth. */
.sb-sym-bid { transition: color 0.2s, background-color 0.3s; }
.sb-sym-chg {
  font-family: var(--font-mono);
  font-size: 10px;
  display: block;
}
.sb-sym-chg.pos { color: var(--green); }
.sb-sym-chg.neg { color: var(--red); }

/* Sidebar resizer */
#sb-resizer {
  width: 4px;
  background: transparent;
  cursor: col-resize;
  transition: background 0.2s;
  flex-shrink: 0;
}
#sb-resizer:hover, #sb-resizer.dragging { background: var(--green); }

/* ── Workspace ──────────────────────────────────────────────── */
#workspace {
  flex: 1;
  overflow: auto;
  padding: 8px;
  background: var(--bg);
  min-width: 0;
}

/* ── GridStack Overrides ────────────────────────────────────── */
.grid-stack { min-height: 100%; }
.grid-stack-item-content {
  overflow: hidden !important;
  border-radius: var(--radius) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  transition: border-color 0.2s !important;
}
.grid-stack-item:hover > .grid-stack-item-content { border-color: var(--border-2) !important; }
.grid-stack-item-content .ui-resizable-handle { z-index: 5; }

/* ── Widget Structure ───────────────────────────────────────── */
.widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Widget header */
.w-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 32px;
  cursor: move;
  user-select: none;
}

/* macOS traffic lights */
.tl { display: flex; gap: 5px; flex-shrink: 0; }
.tl span {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.tl .r { background: #ff5f57; }
.tl .y { background: #febc2e; }
.tl .g { background: #28c840; }
.tl .r:hover { background: #e64b42; cursor: pointer; }

.w-title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-ctrl { flex-shrink: 0; }

/* Widget body (chart area) */
.w-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.w-body-split {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.w-body-top { flex: 0 0 60%; min-height: 0; }
.w-body-bot { flex: 0 0 40%; min-height: 0; border-top: 1px solid var(--border); }

/* Widget footer stats bar */
.w-ft {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 28px;
  flex-wrap: wrap;
}

.w-stat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
}
.w-stat strong {
  color: var(--green);
  font-weight: 600;
}
.w-stat.dim strong { color: var(--text); }
.w-updated {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  white-space: nowrap;
}

/* Signal badges */
.sig {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.sig.bull  { background: var(--green-d); color: var(--green);  border: 1px solid rgba(0,212,170,0.3); }
.sig.bear  { background: var(--red-d);   color: var(--red);    border: 1px solid rgba(255,107,107,0.3); }
.sig.warn  { background: var(--orange-d); color: var(--orange); border: 1px solid rgba(253,203,110,0.3); }
.sig.neutral { background: rgba(107,114,128,0.12); color: var(--text-3); border: 1px solid rgba(107,114,128,0.2); }
.sig.info  { background: var(--blue-d);  color: var(--blue);   border: 1px solid rgba(116,185,255,0.3); }

/* ── Specific Widget Styles ─────────────────────────────────── */

/* Live Price widget */
.price-widget { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.price-main { display: flex; flex-direction: column; gap: 2px; }
.price-sym  { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); font-weight: 500; }
.price-bid  {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.5px;
}
.price-bid .price-big { color: var(--text); }
.price-bid .price-small { color: var(--green); font-size: 20px; }
.price-ask-row { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 12px; }
.price-ask-row .label { color: var(--text-3); }
.price-ask-row .val   { color: var(--text); }
.price-spread { color: var(--orange); }
.price-ohlc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.price-ohlc .lbl { color: var(--text-3); }
.price-ohlc .val { color: var(--text-2); }
.price-change.up   { color: var(--green); }
.price-change.down { color: var(--red); }
.price-empty { color: var(--text-3); font-size: 12px; text-align: center; padding: 20px; }

/* Signal board */
.sigboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 5px;
  padding: 8px;
  overflow-y: auto;
  height: 100%;
  align-content: start;
}
.sigboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.sigboard-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  font-weight: 500;
}
.sigboard-loading { color: var(--text-3); font-size: 12px; text-align: center; padding: 20px; }

/* AI Summary widget */
.ai-widget { padding: 10px 12px; overflow-y: auto; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.ai-bias {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ai-bias-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.ai-bias-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.ai-confidence { display: flex; align-items: center; gap: 8px; }
.ai-conf-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.ai-conf-fill {
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  transition: width 0.4s;
}
.ai-conf-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); flex-shrink: 0; }
.ai-signals { display: flex; flex-direction: column; gap: 3px; }
.ai-signal {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 1.4;
}
.ai-signal .dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.ai-signal.bull .dot { background: var(--green); }
.ai-signal.bear .dot { background: var(--red); }
.ai-recs { border-top: 1px solid var(--border); padding-top: 8px; }
.ai-recs-title { font-size: 10px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.ai-rec { font-size: 11px; color: var(--text-2); padding: 2px 0; }
.ai-rec::before { content: '→ '; color: var(--text-3); }
.ai-empty { color: var(--text-3); font-size: 12px; text-align: center; padding: 20px; }
.ai-loading { animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Screener / table widgets */
.screener {
  overflow-y: auto;
  height: 100%;
}
.screener table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}
.screener th {
  padding: 5px 10px;
  text-align: left;
  color: var(--text-3);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-card);
}
.screener td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(42,47,62,0.5);
  color: var(--text-2);
}
.screener tr:last-child td { border-bottom: none; }
.screener tr:hover td { background: var(--bg-hover); }
.screener .sym-cell { color: var(--text); font-weight: 500; }
.screener .val-bull { color: var(--green); }
.screener .val-bear { color: var(--red); }
.screener .val-warn { color: var(--orange); }

/* Gauge / Big-number widgets */
.gauge-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 12px;
}
.gauge-arc-wrap { position: relative; width: 120px; height: 70px; overflow: hidden; }
.gauge-arc-wrap svg { width: 120px; height: 120px; margin-top: -2px; }
.gauge-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  margin-top: -12px;
}
.gauge-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); text-align: center; }
.gauge-zones {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
}

/* Chart placeholder/loading states */
.chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-3);
  font-size: 11px;
  font-family: var(--font-mono);
  flex-direction: column;
  gap: 6px;
}
.chart-building::after {
  content: ' ';
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0%  { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}
.chart-error { color: var(--red); }

/* ── Modals ─────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.hidden { display: none; }
.modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}
.modal-box {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  width: 420px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  overflow: hidden;
}
.modal-wide { width: 720px; }
.modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.modal-hd h2 { font-size: 15px; font-weight: 600; }
.modal-x {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  font-size: 18px;
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.modal-x:hover { background: var(--bg-hover); color: var(--text); }
.modal-bd { padding: 20px; }
.modal-desc { color: var(--text-2); font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.modal-hint { font-size: 12px; color: var(--text-3); margin-top: 12px; }

.key-input-row { display: flex; gap: 8px; }
.key-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
}
.key-input:focus { border-color: var(--green); }
.btn-primary {
  padding: 8px 16px;
  background: var(--green);
  color: #0a0b0f;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13px;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.key-error {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--red-d);
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 12px;
}
.key-error.hidden { display: none; }

/* Widget picker */
.pick-cats {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.pick-cat {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.pick-cat:hover { border-color: var(--border-2); color: var(--text); }
.pick-cat.active { border-color: var(--green); color: var(--green); background: var(--green-d); }
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}
.pick-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}
.pick-item:hover { border-color: var(--green); background: var(--green-d); }
.pick-item-icon { font-size: 20px; }
.pick-item-name { font-size: 12px; font-weight: 600; }
.pick-item-desc { font-size: 10px; color: var(--text-3); line-height: 1.3; }

/* ── Toast Notifications ─────────────────────────────────────── */
#toasts {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  min-width: 220px;
  max-width: 360px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  pointer-events: all;
  animation: slideIn 0.25s ease;
}
@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.toast.success { border-color: rgba(0,212,170,0.3); }
.toast.error   { border-color: rgba(255,107,107,0.3); }
.toast.warn    { border-color: rgba(253,203,110,0.3); }
.toast-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.toast.success .toast-dot { background: var(--green); }
.toast.error   .toast-dot { background: var(--red); }
.toast.warn    .toast-dot { background: var(--orange); }
.toast-msg { flex: 1; color: var(--text-2); line-height: 1.4; }

/* ── Misc helpers ────────────────────────────────────────────── */
.mono { font-family: var(--font-mono); }
.hidden { display: none !important; }

/* ── Account Pill ─────────────────────────────────────────────── */
.acct-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 3px 9px;
  background: rgba(108,92,231,0.10);
  border: 1px solid rgba(108,92,231,0.25);
  border-radius: 12px;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.ap-plan {
  color: var(--purple);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ap-quota { font-size: 9px; }

/* ── Layouts Dropdown ────────────────────────────────────────── */
.tb-dd { position: relative; }
.lm-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 4px 0;
  min-width: 160px;
  z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.lm-item {
  padding: 8px 14px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-2);
  white-space: nowrap;
  font-family: var(--font-ui);
}
.lm-item:hover { background: var(--bg-hover); color: var(--text); }
.lm-divider {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
  color: var(--text-3);
  font-style: italic;
}
.lm-divider:hover { color: var(--text); }
.lm-my-saved { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lm-my-label { flex: 1; }
.lm-save-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--bg-hover); color: var(--text-2);
  font-size: 10px; font-family: var(--font-ui); cursor: pointer;
  white-space: nowrap; line-height: 1.4;
}
.lm-save-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Currency Strength Widget ────────────────────────────────── */
.cs-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 14px;
  height: 100%;
  overflow-y: auto;
}
.cs-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-ccy {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  width: 32px;
  flex-shrink: 0;
}
.cs-bar-wrap {
  flex: 1;
  background: var(--border);
  border-radius: 3px;
  height: 8px;
  overflow: hidden;
}
.cs-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
  min-width: 4px;
}
.cs-val {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Economic Calendar Widget ────────────────────────────────── */
.ec-wrap {
  height: 100%;
  overflow-y: auto;
  padding: 4px;
}
.ec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 9.5px;
}
.ec-table thead tr {
  border-bottom: 1px solid var(--border);
}
.ec-table th {
  padding: 5px 6px;
  text-align: left;
  color: var(--text-3);
  font-weight: 500;
  white-space: nowrap;
}
.ec-table tbody tr {
  border-bottom: 1px solid rgba(42,47,62,0.4);
}
.ec-table tbody tr:hover { background: var(--bg-hover); }
.ec-table td { padding: 5px 6px; }
.ec-time { color: var(--text-2); white-space: nowrap; }
.ec-ccy  { font-weight: 600; color: var(--blue); }
.ec-name { color: var(--text); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-val  { color: var(--text-3); text-align: right; }
.ec-actual { color: var(--green); font-weight: 600; }

/* ── Precious Metals Widget ──────────────────────────────────── */
.pm-wrap {
  height: 100%;
  overflow-y: auto;
}
.pm-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  height: 100%;
}
.pm-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.pm-gold   { border-color: rgba(253,203,110,0.35); }
.pm-silver { border-color: rgba(116,185,255,0.25); }
.pm-sym {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.pm-price {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--green);
  line-height: 1;
}
.pm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-3);
}
.pm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 2px;
}
.pm-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pm-stat-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pm-stat-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.pm-levels {
  font-family: var(--font-mono);
  font-size: 9.5px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  color: var(--text-3);
  line-height: 1.6;
}
.pm-lvl-label {
  font-weight: 600;
}
.pm-narrative {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  font-style: italic;
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.text-green { color: var(--green); }
.text-red   { color: var(--red); }
.text-muted { color: var(--text-3); }