/* ── RESET & ROOT VARIABLES ─────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:            #000000;
  --panel-bg:      #060606;
  --panel-border:  #1c1c1c;
  --panel-accent:  #ff8c00;      /* Bloomberg orange */
  --title-bg:      #0d0800;
  --title-text:    #ff9900;
  --hdr-bg:        #050505;
  --col-hdr:       #555;
  --sym:           #ffe600;      /* bright yellow – identifier colour */
  --price:         #ffffff;
  --up:            #00e676;      /* green */
  --down:          #ff1744;      /* red */
  --flat:          #cccccc;
  --dim:           #3a3a3a;
  --vol:           #7a7a7a;
  --footer-bg:     #050505;
  --font:          'Consolas', 'Courier New', monospace;
}

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  font-family: var(--font);
  font-size: 11px;
  color: var(--flat);
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

/* ── TOP HEADER BAR ─────────────────────────────────── */
#header {
  flex-shrink: 0;
  height: 38px;
  min-height: 38px;
  background: var(--hdr-bg);
  border-bottom: 1px solid #0044aa;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 0;
  overflow: hidden;
}

.logo {
  color: var(--panel-accent);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  white-space: nowrap;
  padding-right: 16px;
  border-right: 1px solid #1a3a5a;
}

/* ── LOGO / USER-MENU ───────────────────────────────────── */
#logo-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
#logo-btn {
  cursor: pointer;
  padding: 0 10px 0 0;
  user-select: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
#logo-btn:hover { opacity: 0.75; }
#logo-menu {
  display: none;
  position: fixed;
  top: 38px;
  left: 0;
  background: #080808;
  border: 1px solid #1a3a5a;
  border-top: none;
  z-index: 9999;
  min-width: 150px;
}
.lmenu-item {
  display: block;
  padding: 9px 16px;
  color: #888;
  text-decoration: none;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.lmenu-item:hover { color: var(--panel-accent); background: #0d1a2a; }
.lmenu-btn { background: transparent; border: none; text-align: left; }
.lmenu-sep { border-top: 1px solid #1a3a5a; margin: 3px 0; }
.logo-text {
  color: var(--panel-accent);
  font-size: 8.5px;
  font-weight: bold;
  letter-spacing: 0.8px;
  white-space: nowrap;
  padding-right: 12px;
  border-right: 1px solid #1a2a3a;
  opacity: 0.85;
}
#idx-config-btn {
  background: transparent;
  border: none;
  color: #2a4060;
  font-size: 11px;
  cursor: pointer;
  padding: 0 6px;
  flex-shrink: 0;
  line-height: 38px;
}
#idx-config-btn:hover { color: #446688; }
.idx-check-row {
  display: flex;
  align-items: center;
  padding: 5px 2px;
  cursor: pointer;
  font-size: 11px;
  color: #aaa;
  gap: 6px;
}
.idx-modal-lbl  { flex: 1; }
.idx-modal-price { font-size: 10px; color: #ccc; white-space: nowrap; }
.idx-modal-price.dim { color: #444; }
.idx-modal-chg  { font-size: 9px; white-space: nowrap; }
.idx-modal-chg.up   { color: var(--up); }
.idx-modal-chg.down { color: var(--down); }
.idx-check-row:hover { color: var(--panel-accent); }
.idx-check-row input { margin-right: 2px; accent-color: var(--panel-accent); flex-shrink: 0; }

/* ── IDX MODAL HEADER (title + manage button) ───────────────── */
.idx-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.idx-modal-header h3 { margin: 0; }
.idx-mode-btn {
  background: none;
  border: 1px solid #1e3a5a;
  color: #5090c0;
  font-size: 9px;
  letter-spacing: 0.8px;
  padding: 3px 7px;
  cursor: pointer;
  border-radius: 2px;
}
.idx-mode-btn:hover { background: #0a1c30; color: #70b0e0; }

/* ── IDX MANAGE ROWS ─────────────────────────────────────────── */
.idx-manage-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}
.idx-m-label  { flex: 1.6; min-width: 0; background: #0a0a0a; border: 1px solid #1e3a5a; color: #ccc; font-size: 10px; padding: 3px 5px; border-radius: 2px; }
.idx-m-ticker { flex: 1; min-width: 0; background: #0a0a0a; border: 1px solid #1e3a5a; color: #7cb8e0; font-size: 10px; padding: 3px 5px; font-family: monospace; border-radius: 2px; }
.idx-m-del { background: none; border: none; color: #553; font-size: 11px; cursor: pointer; padding: 0 4px; flex-shrink: 0; }
.idx-m-del:hover { color: #c84; }
.idx-add-row {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  margin-bottom: 4px;
  border-top: 1px solid #111;
  padding-top: 8px;
}
.idx-add-row input { flex: 1; min-width: 0; background: #050505; border: 1px solid #1e3a5a; color: #ccc; font-size: 10px; padding: 3px 5px; border-radius: 2px; }
.idx-add-row button { background: #0a1c30; border: 1px solid #1e3a5a; color: #7cb8e0; font-size: 9px; padding: 3px 8px; cursor: pointer; border-radius: 2px; white-space: nowrap; }

/* ── STOCK AUTOCOMPLETE DROPDOWN ────────────────────────────── */
.add-suggest-wrap { position: relative; display: flex; }
.stock-dd {
  display: none;
  position: fixed;
  background: #060606;
  border: 1px solid #1a3a5a;
  z-index: 9999;
  min-width: 220px;
  max-height: 200px;
  overflow-y: auto;
}
.stock-dd::-webkit-scrollbar { width: 4px; }
.stock-dd::-webkit-scrollbar-thumb { background: #1a3a5a; }
.ss-item { display: flex; gap: 10px; padding: 5px 10px; cursor: pointer; align-items: baseline; }
.ss-item:hover { background: #0d1a2a; }
.ss-loading { padding: 6px 12px; color: #334; font-size: 10px; letter-spacing: 2px; }
.ss-error { padding: 8px 12px; color: #c33; font-size: 10px; letter-spacing: 1px; font-weight: 600; }
.ss-sym { color: var(--panel-accent); font-size: 12px; font-weight: bold; min-width: 70px; flex-shrink: 0; }
.ss-name { color: #555; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── MODAL OVERLAY ──────────────────────────────────────────── */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.modal-bg.open { display: flex; background: rgba(0,0,0,0.72); }
.modal {
  background: #0a0a0a;
  border: 1px solid #1a2535;
  padding: 20px 22px 16px;
  min-width: 300px;
  max-width: 400px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--panel-accent);
  text-transform: uppercase;
  flex-shrink: 0;
}
#idx-check-list, #idx-manage-list {
  overflow-y: auto;
  flex: 1;
  padding-right: 6px;
}
#idx-check-list::-webkit-scrollbar, #idx-manage-list::-webkit-scrollbar { width: 4px; }
#idx-check-list::-webkit-scrollbar-track, #idx-manage-list::-webkit-scrollbar-track { background: #0d0d0d; }
#idx-check-list::-webkit-scrollbar-thumb, #idx-manage-list::-webkit-scrollbar-thumb { background: #1a3a5a; }
.modal-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  border-top: 1px solid #1a2a3a;
  padding-top: 12px;
}
.modal-actions button {
  background: #0a1e35;
  border: 1px solid #2255aa;
  color: #4488dd;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 14px;
  cursor: pointer;
  text-transform: uppercase;
}
.modal-actions button:hover { background: #112844; color: #66aaff; }
.modal-actions button:first-child { color: var(--panel-accent); border-color: #884400; }
.modal-actions button:first-child:hover { background: #1a0e00; }

#indices {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.idx-chip {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 10px;
  border-right: 1px solid #0a1e35;
  flex-shrink: 1;
  min-width: 0;
}
.idx-name  { color: var(--panel-accent); font-size: 7.5px; white-space: nowrap; letter-spacing: 0.3px; }
.idx-price { color: #fff; font-size: 11px; font-weight: bold; white-space: nowrap; }
.idx-chg   { font-size: 8.5px; white-space: nowrap; }

/* ── FOOTER STATUS (right cluster) ───────────────────── */
#footer-status {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid #0d2030;
}

#market-badge {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 2px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.open   { background: #002215; color: #00dd77; border: 1px solid #007744; }
.closed { background: #220000; color: #dd3333; border: 1px solid #880000; }

#clock { color: var(--panel-accent); font-size: 10px; white-space: nowrap; letter-spacing: 0.5px; }
#data-age          { color: #445566; font-size: 8px; white-space: nowrap; }
#data-age.stale    { color: #aa7700; }
#data-age.very-stale { color: #cc3300; font-weight: bold; }
.data-age-hover    { cursor: help; border-bottom: 1px dotted currentColor; }
.data-age-hover:hover { text-decoration: underline; }
#market-indicator  { font-weight: bold; font-size: 9px; margin-right: 2px; }

#btn-refresh {
  cursor: pointer;
  background: transparent;
  color: #334455;
  border: 1px solid #1a2a35;
  padding: 1px 4px;
  font-family: var(--font);
  font-size: 11px;
  border-radius: 2px;
  line-height: 1;
}
#btn-refresh:hover { color: #66aaff; border-color: #2255aa; }
#btn-bhav {
  cursor: pointer;
  background: transparent;
  color: #334455;
  border: 1px solid #1a2a35;
  padding: 1px 5px;
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.5px;
  border-radius: 2px;
  line-height: 1;
}
#btn-bhav:hover  { color: #66aaff; border-color: #2255aa; }
#btn-bhav:disabled { opacity: 0.5; cursor: wait; }

/* ── PAGE NAV BAR ─────────────────────────────────────── */
#page-nav {
  flex-shrink: 0;
  height: 26px;
  background: #050505;
  border-bottom: 1px solid #0a1e35;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
}
.page-btn {
  cursor: pointer;
  background: #0a1020;
  color: #446688;
  border: 1px solid #1a2a40;
  padding: 2px 10px;
  font-family: var(--font);
  font-size: 9px;
  border-radius: 2px;
  white-space: nowrap;
}
.page-btn:hover  { background: #112233; color: #88bbdd; }
.page-btn.active { background: #001830; color: var(--panel-accent); border-color: var(--panel-accent); }
.page-btn-wrap { display: flex; align-items: center; gap: 1px; position: relative; }
.page-btn-wrap.pg-drag-over > .page-btn { border-color: var(--panel-accent) !important; color: var(--panel-accent) !important; }
.page-btn-del {
  cursor: pointer; background: transparent; color: #3a2020;
  border: 1px solid #2a1515; padding: 2px 5px;
  font-family: var(--font); font-size: 8px; border-radius: 0 2px 2px 0;
  margin-left: -1px; white-space: nowrap;
}
.page-btn-del:hover { background: #1a0000; color: #cc3333; border-color: #aa2222; }
.page-label { color: #334455; font-size: 9px; margin-left: 8px; }
.page-rename-input {
  font-family: var(--font); font-size: 9px; background: #001020;
  color: var(--panel-accent); border: 1px solid var(--panel-accent);
  padding: 1px 5px; border-radius: 2px; width: 90px; outline: none;
}
/* new-sector inline form inside page-nav */
#new-sector-form {
  display: flex; align-items: center; gap: 4px;
  overflow: hidden; max-width: 0; opacity: 0;
  transition: max-width .2s ease, opacity .15s ease;
}
#new-sector-form.open { max-width: 280px; opacity: 1; }
#new-sector-input {
  background: #0a0a0a; color: var(--title-text);
  border: 1px solid var(--panel-accent); font-family: var(--font);
  font-size: 9px; font-weight: bold; text-transform: uppercase;
  letter-spacing: 1px; padding: 2px 6px; width: 160px; outline: none;
}
#new-sector-input::placeholder { color: #3a2000; font-weight: normal; text-transform: none; letter-spacing: 0; }
.btn-new-sector {
  cursor: pointer; background: #0a1a00; color: #44aa44;
  border: 1px solid #1a4400; padding: 2px 8px;
  font-family: var(--font); font-size: 9px; border-radius: 2px; white-space: nowrap;
  margin-left: auto;
}
.btn-new-sector:hover { background: #132800; color: #66cc66; border-color: #44aa44; }
.btn-ns-hint { background: #002244 !important; color: #44aaff !important; border-color: #2266aa !important;
  animation: ns-hint-pulse 0.6s ease 2; }
@keyframes ns-hint-pulse { 0%,100%{ opacity:1 } 50%{ opacity:0.55 } }
.btn-ns-ok {
  cursor: pointer; background: #0a2000; color: var(--up);
  border: 1px solid #1a4400; padding: 2px 7px;
  font-family: var(--font); font-size: 8px; border-radius: 1px; white-space: nowrap;
}
.btn-ns-ok:hover { background: #132800; }
.btn-ns-cancel {
  cursor: pointer; background: transparent; color: #444;
  border: 1px solid #222; padding: 2px 5px;
  font-family: var(--font); font-size: 9px; border-radius: 1px;
}
.btn-ns-cancel:hover { color: var(--down); border-color: var(--down); }

/* ── 4×3 PANEL GRID ─────────────────────────────────── */
#grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 2px;
  background: #000;
  padding: 2px;
  overflow: hidden;
  min-height: 0;
}

/* ── WIDGET SHELL ─────────────────────────────────────── */
.widget {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-top: 2px solid var(--panel-accent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* ── WIDGET HEADER ───────────────────────────────────── */
.widget-header {
  background: var(--title-bg);
  padding: 3px 6px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #1a1a1a; flex-shrink: 0; gap: 4px;
}
.widget-title {
  color: var(--title-text); font-size: 9px; font-weight: bold;
  text-transform: uppercase; letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
  min-width: 0;
  cursor: pointer;
}
.widget-title:hover { color: #ffbb44; }
/* inline rename input */
.rename-input {
  background: #1a0800; color: var(--title-text);
  border: 1px solid var(--panel-accent); font-family: var(--font);
  font-size: 9px; font-weight: bold; text-transform: uppercase;
  letter-spacing: 1px; padding: 1px 4px; flex: 1; min-width: 0;
  outline: none;
}
.widget-ctrl  { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.sum-up   { color: var(--up);      font-size: 8px; white-space: nowrap; }
.sum-down { color: var(--down);    font-size: 8px; white-space: nowrap; }
.sum-flat { color: var(--col-hdr); font-size: 8px; white-space: nowrap; }

/* ── + ADD BUTTON ───────────────────────────────────── */
.btn-add {
  cursor: pointer; background: #1a0a00; color: var(--panel-accent);
  border: 1px solid #3a1a00; padding: 1px 6px;
  font-family: var(--font); font-size: 8px; border-radius: 2px;
  white-space: nowrap; transition: background .1s, border-color .1s;
}
.btn-add:hover  { background: #2a1200; border-color: var(--panel-accent); color: #ffbb44; }
.btn-add.active { background: #220500; color: #ff5500; border-color: #ff5500; }

/* ── WIDGET OPTIONS MENU BUTTON ─────────────────────── */
.btn-widget-menu {
  cursor: pointer; background: transparent; border: 1px solid transparent;
  color: #3a5a6a; padding: 0px 5px; font-family: var(--font); font-size: 12px;
  border-radius: 2px; white-space: nowrap; line-height: 1; flex-shrink: 0;
}
.btn-widget-menu:hover { color: #88bbcc; border-color: #1a3a55; background: #050f18; }
/* ── WIDGET DROPDOWN POPUP ─────────────────────────── */
.widget-menu-popup {
  position: fixed; z-index: 6000; background: #06111a;
  border: 1px solid #1a3a55; box-shadow: 0 4px 20px rgba(0,0,0,.92);
  border-radius: 2px; min-width: 148px; padding: 3px 0;
}
.wmenu-item {
  display: block; width: 100%; text-align: left; background: transparent;
  border: none; cursor: pointer; color: #8899aa;
  font-family: var(--font); font-size: 9px; padding: 5px 13px; white-space: nowrap;
}
.wmenu-item:hover:not(:disabled) { background: #0a1e35; color: #ccddee; }
.wmenu-item:disabled { opacity: 0.28; cursor: default; }
.wmenu-item.wmenu-danger { color: #664444; }
.wmenu-item.wmenu-danger:hover { background: #1a0808; color: #cc5555; }
.wmenu-sep { border-top: 1px solid #1a2a3a; margin: 2px 0; }
.wmenu-label { padding: 4px 13px 1px; font-family: var(--font); font-size: 7px;
  color: #2a4050; letter-spacing: 1px; pointer-events: none; }

/* ── GLOBAL PANEL (indices, futures, commodities) ─────── */
.widget.global-panel { border-top-color: #0066cc; }
.widget.global-panel .widget-header { background: #00060f; }
.widget.global-panel .widget-title  { color: #55aadd; }
.badge-global {
  font-size: 7px; color: #3377aa; border: 1px solid #1a3a55;
  background: #000810; padding: 0px 3px; border-radius: 1px;
  white-space: nowrap; flex-shrink: 0; letter-spacing: 0.5px;
}
/* Mode toggle in new-sector form */
.btn-mode-toggle { cursor: pointer; border: 1px solid #1a3a1a; padding: 2px 7px;
  font-family: var(--font); font-size: 9px; border-radius: 2px; white-space: nowrap;
  background: #0a1a0a; color: #33aa33; }
.btn-mode-toggle.bse    { background: #100500; color: #cc7700; border-color: #553300; }
.btn-mode-toggle.global { background: #000810; color: #3399cc; border-color: #1a3a55; }
/* Global presets quick-pick row inside add-form */
.add-form-global.open { max-height: 54px; }
.gpre-row { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; padding-top: 2px; }
.gpre-chip { cursor: pointer; color: #224466; border: 1px solid #1a3050; background: #00060f;
  padding: 1px 4px; font-size: 7px; border-radius: 2px; white-space: nowrap; flex-shrink: 0; }
.gpre-chip:hover { color: #55aadd; border-color: #336688; background: #000d1a; }

.move-popup {
  position: fixed; z-index: 5000;
  background: #06111a; border: 1px solid var(--panel-accent);
  box-shadow: 0 4px 20px rgba(0,0,0,.9);
  min-width: 130px; padding: 3px 0; border-radius: 2px;
}
.move-popup-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  color: #8899aa; font-family: var(--font); font-size: 9px;
  padding: 5px 12px; white-space: nowrap;
}
.move-popup-item:hover { background: #0a1e35; color: var(--panel-accent); }
.move-popup-sep { border-top: 1px solid #1a2a3a; margin: 3px 0; }

/* ── STOCK ROW RIGHT-CLICK CONTEXT MENU ────────────── */
#ctx-menu { position: fixed; z-index: 9000; background: #06111a;
  border: 1px solid #1a3a55; box-shadow: 0 4px 20px rgba(0,0,0,.92);
  border-radius: 2px; min-width: 160px; padding: 3px 0; display: none; }
.ctx-item { padding: 5px 14px; font-family: var(--font); font-size: 9px;
  color: #8899aa; cursor: pointer; white-space: nowrap; letter-spacing: 0.4px; }
.ctx-item:hover { background: #0d1e2a; color: #ccddee; }
.ctx-label { padding: 3px 14px 2px; font-family: var(--font); font-size: 8px;
  color: #2a4a5a; letter-spacing: 1px; pointer-events: none; }
.ctx-sep   { border-top: 1px solid #1a2a3a; margin: 2px 0; }

/* ── ADD FORM (collapsible) ─────────────────────────── */
.add-form {
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px; background: #050505;
  border-bottom: 1px solid var(--panel-accent);
  flex-shrink: 0; overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height .18s ease, opacity .15s ease, padding .18s ease;
}
.add-form.open { max-height: 26px; opacity: 1; padding: 3px 6px; }
.add-input {
  flex: 1; min-width: 0; background: #0a0a0a; color: var(--sym);
  border: 1px solid #2a2a2a; font-family: var(--font); font-size: 9px;
  padding: 1px 5px; outline: none; border-radius: 1px;
}
.add-input:focus        { border-color: var(--panel-accent); }
.add-input::placeholder { color: #333; }
.btn-add-ok {
  cursor: pointer; background: #0a2000; color: var(--up);
  border: 1px solid #1a4400; padding: 1px 7px;
  font-family: var(--font); font-size: 8px; border-radius: 1px; white-space: nowrap;
}
.btn-add-ok:hover    { background: #132800; }
.btn-add-ok:disabled { opacity: .5; cursor: wait; }
.btn-cancel {
  cursor: pointer; background: transparent; color: #444;
  border: 1px solid #222; padding: 1px 5px;
  font-family: var(--font); font-size: 9px; border-radius: 1px;
}
.btn-cancel:hover { color: var(--down); border-color: var(--down); }
.add-err {
  color: var(--down); font-size: 8px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 120px;
  opacity: 0; transition: opacity .2s;
}
.add-err.show { opacity: 1; }

/* ── SHARED COLUMN HEADER STRIP ───────────────────────── */
#shared-col-hdr {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: #000;
  padding: 0 2px;
  border-bottom: 1px solid #131313;
}
.shared-hdr-cell {
  display: grid;
  grid-template-columns: 2fr 1.8fr 1.5fr 1.1fr 1.4fr;
  padding: 2px 4px;
  background: #070707;
  border-top: 1px solid #131313;
}
/* ── COLUMN HEADERS (sortable) ──────────────────────── */
.col-hdr-row {
  display: grid;
  grid-template-columns: 2fr 1.8fr 1.5fr 1.1fr 1.4fr;
  padding: 2px 4px; background: #090909;
  border-bottom: 1px solid #1a1a1a; flex-shrink: 0;
}
.col-hdr {
  color: var(--col-hdr); font-size: 8px; text-transform: uppercase;
  display: flex; align-items: center; gap: 2px; white-space: nowrap;
}
.col-hdr.sortable          { cursor: pointer; user-select: none; }
.col-hdr.sortable:hover    { color: #888; }
.col-hdr + .col-hdr        { justify-content: flex-end; }
.sort-icon                 { color: #2a2a2a; font-size: 9px; }
.sort-icon.active          { color: var(--panel-accent); }

/* ── WIDGET BODY ────────────────────────────────────── */
.widget-body { 
  flex: 0 1 auto;
  overflow-y: auto; 
  overflow-x: hidden; 
  min-height: 0;
  max-height: 600px;
}
.widget-body::-webkit-scrollbar       { width: 3px; }
.widget-body::-webkit-scrollbar-track { background: transparent; }
.widget-body::-webkit-scrollbar-thumb { background: #1e1e1e; }

/* ── STOCK ROW ──────────────────────────────────────── */
.stock-row {
  display: grid;
  grid-template-columns: 2fr 1.8fr 1.5fr 1.1fr 1.4fr;
  padding: 1px 4px; border-bottom: 1px solid #0e0e0e;
  align-items: center; transition: background .12s;
  height: 14px;
  min-height: 14px;
  font-size: 9px;
}
.stock-row:hover { background: #111; }

/* sym cell: relative so rm-btn/ed-btn can overlay */
.cell-sym {
  position: relative; color: var(--sym); font-weight: bold; font-size: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 26px;
}
/* × remove button – hidden until row is hovered */
.rm-btn {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  color: var(--down); font-size: 10px; cursor: pointer;
  opacity: 0; transition: opacity .1s; line-height: 1; padding: 0 2px;
}
.stock-row:hover .rm-btn  { opacity: 1; }
.rm-btn:hover              { color: #ff5555; }

/* ✎ edit button – shows on hover, to the right of × */
.ed-btn {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #888; font-size: 9px; cursor: pointer; line-height: 1;
  opacity: 0; transition: opacity .1s; padding: 0 2px; user-select: none;
}
.stock-row:hover .ed-btn { opacity: 1; }
.ed-btn:hover            { color: #ffaa33; }

/* inline edit overlay that replaces the sym cell text */
.sym-edit-wrap {
  display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  align-items: center; background: #0d0d0d; z-index: 10; padding: 0 2px;
}
.sym-edit-wrap.open { display: flex; }
.sym-edit-inp {
  flex: 1; min-width: 0; background: #1a1a1a; border: 1px solid #ffaa33;
  color: #ffaa33; font-size: 10px; font-weight: bold; padding: 1px 4px;
  border-radius: 2px; outline: none; text-transform: uppercase;
}
.sym-edit-ok  { color: #00e676; font-size: 10px; cursor: pointer; padding: 0 3px; flex-shrink:0; }
.sym-edit-cl  { color: #888;    font-size: 10px; cursor: pointer; padding: 0 2px; flex-shrink:0; }

.cell-price { color: var(--price); text-align: right; font-size: 10px; }
.cell-chg   { text-align: right; font-size: 10px; font-weight: bold; }
.cell-vol   { color: var(--vol);  text-align: right; font-size: 9px; }
.cell-mcap  { color: #6699cc;    text-align: right; font-size: 9px; }
.up   { color: var(--up);   }
.down { color: var(--down); }
.flat { color: var(--flat); }
.na   { color: var(--dim);  }

@keyframes fUp   { 0%{ background: rgba(0,230,118,.22); } 100%{ background: transparent; } }
@keyframes fDown { 0%{ background: rgba(255,23, 68,.22); } 100%{ background: transparent; } }
.flash-up   { animation: fUp   1s ease-out forwards; }
.flash-down { animation: fDown 1s ease-out forwards; }

/* ── DRAG-AND-DROP ─────────────────────────────────── */
.widget                { cursor: default; }
.widget-header         { cursor: grab; user-select: none; }
.widget.is-dragging    { opacity: 0.35; border-color: var(--panel-accent) !important; cursor: grabbing; }
.widget.drag-over      { border: 2px dashed var(--panel-accent); background: #0e0900;
                         box-shadow: inset 0 0 12px rgba(255,140,0,.12); }
.drag-handle           { color: #2a2a2a; font-size: 11px; cursor: grab; padding: 0 5px 0 0;
                         flex-shrink: 0; user-select: none; line-height: 1; }
.drag-handle:hover     { color: #666; }
.widget.is-dragging .drag-handle { cursor: grabbing; }
/* stock-row symbol drag */
.stock-row.sym-dragging  { opacity: .35; }
.widget.sym-drop-target  { border: 2px dashed #44aaff !important;
                           box-shadow: inset 0 0 12px rgba(68,170,255,.15); }
/* page-nav becomes a cross-page drop zone while dragging */
#page-nav.drag-active .page-btn { border-color: #1a3050; color: #5588aa; }
#page-nav.drag-active .page-btn.active { border-color: #995500; color: #cc7700; }
.page-btn.drop-target  { background: #001830 !important; border-color: var(--panel-accent) !important;
                         color: var(--panel-accent) !important;
                         box-shadow: 0 0 10px rgba(255,140,0,.35); }
#page-nav.drag-active::after { content: '← DROP ON PAGE TO MOVE WIDGET THERE';
                         color: #334455; font-size: 8px; margin-left: 10px; white-space: nowrap; }

/* ── SKELETON ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,#0d0d0d 25%,#181818 50%,#0d0d0d 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
  height: 12px; border-radius: 2px; margin: 2px 4px; grid-column: 1/-1;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── FOOTER ──────────────────────────────────────────── */
#footer {
  flex-shrink: 0; height: 22px; background: var(--footer-bg);
  border-top: 1px solid #0a1e35;
  display: flex; align-items: center; padding: 0 8px; gap: 10px; overflow: hidden;
}

.footer-label {
  color: var(--panel-accent);
  font-size: 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

#ticker-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
}

#ticker-inner {
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  animation: tickerScroll 180s linear infinite;
}

@keyframes tickerScroll {
  0%   { left:  100%; }
  100% { left: -5000px; }
}

.ti { display: inline-block; margin-right: 28px; font-size: 9px; }
.tsep { color: #222; margin-right: 28px; }

#footer-date { color: #334; font-size: 8px; white-space: nowrap; }