/* ============================================================
   ProfitData — Platform workspace styles  (v2 reference)
   ============================================================ */

/* ── LAYOUT ── */
.platform-page { overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.platform-page .ticker-bar { display: none; }
.platform-page body { overflow: hidden; }

#platformWrap {
  display: flex; flex-direction: column;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
}

/* ── TOOLBAR ── */
#platformToolbar {
  height: 36px; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.pt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

/* workspace name input */
.pt-ws-name {
  background: none; border: none; color: var(--text);
  font: 600 12px var(--font); padding: 2px 6px;
  border-radius: 4px; min-width: 80px; max-width: 160px;
}
.pt-ws-name:hover { background: var(--bg3); }
.pt-ws-name:focus { outline: 1px solid var(--accent); background: var(--bg3); }

/* toolbar buttons */
.pt-btn {
  height: 22px; padding: 0 10px; border: none; border-radius: 20px;
  font: 500 10px var(--font); cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  color: var(--text2); background: transparent;
  transition: all .12s;
}
.pt-btn:hover { background: var(--bg3); color: var(--text); }
.pt-btn.primary { background: rgba(255,255,255,.1); color: var(--text); border: 1px solid rgba(255,255,255,.12); }
.pt-btn.primary:hover { background: rgba(255,255,255,.16); }
.pt-btn.active { background: var(--bg4); color: var(--text); }
.pt-btn svg { opacity: .7; }
.pt-btn:hover svg { opacity: 1; }


/* ── WORKSPACE TABS — browser-style ── */
.ws-tabs {
  display: flex; align-items: flex-end; gap: 2px;
  height: 100%; padding: 4px 2px 0;
}
/* Undo/Redo buttons */
.ws-undo-redo { display: flex; gap: 1px; align-items: center; }
.ws-ur-btn {
  width: 26px; height: 22px; border: none; border-radius: 5px;
  background: none; color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s;
}
.ws-ur-btn:hover { background: var(--bg3); color: var(--text); }
.ws-ur-btn:disabled { opacity: .2; cursor: default; }
.ws-ur-btn:disabled:hover { background: none; color: var(--text2); }

.ws-tab {
  display: flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px 0 14px;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0;
  font: 500 11px var(--font); cursor: pointer;
  color: var(--text2); background: transparent;
  white-space: nowrap; position: relative;
  transition: all .12s;
  top: 1px; /* overlap toolbar border */
}
.ws-tab:hover { color: var(--text); background: var(--bg3); }
.ws-tab.active {
  color: #fff;
  background: var(--bg);
  border-color: var(--border);
  z-index: 1;
}
.ws-tab-name { pointer-events: auto; }
.ws-tab-close {
  width: 16px; height: 16px; border: none; background: none;
  color: var(--text3); font-size: 10px; line-height: 1;
  border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all .1s; margin-left: 2px;
}
.ws-tab:hover .ws-tab-close { opacity: .6; }
.ws-tab-close:hover { opacity: 1; background: rgba(255,255,255,.1); color: var(--red); }
.ws-tab-input {
  background: var(--bg3); border: 1px solid var(--accent); color: #fff;
  font: 500 11px var(--font); padding: 0 4px; border-radius: 3px;
  width: 80px; outline: none;
}
.ws-tab-add {
  width: 28px; height: 28px; border: none;
  background: transparent; color: var(--text3);
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px 8px 0 0; transition: all .12s;
  position: relative; top: 1px;
}
.ws-tab-add:hover { color: var(--accent); background: rgba(255,255,255,.04); }

/* ── MARKET OPEN BADGE ── */
.badge-market {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 12px; border-radius: 20px;
  background: rgba(0,200,122,.1);
  font: 600 10px var(--font); color: var(--green);
  letter-spacing: .4px;
}
.badge-market::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); animation: pulse 2s infinite;
}

/* ════════════════════════════════════════════════════════════
   WORKSPACE — canvas area with radial glow
════════════════════════════════════════════════════════════ */
#workspace {
  flex: 1; display: flex; overflow: hidden;
  position: relative;
  background: var(--bg);
}
/* Radial moon-glow orb */
#workspace::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 500px 400px at 5% 0%, rgba(30,50,120,.4) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 95% 0%, rgba(35,55,115,.35) 0%, transparent 70%),
    radial-gradient(ellipse 450px 350px at 50% 0%, rgba(50,70,140,.3) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 0% 100%, rgba(25,45,100,.35) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 100% 100%, rgba(30,50,110,.3) 0%, transparent 70%),
    radial-gradient(ellipse 450px 350px at 50% 100%, rgba(40,60,120,.25) 0%, transparent 65%);
}
[data-theme="black"] #workspace::before { display: none; }
/* Subtle grid lines */
#workspace::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.018) 39px, rgba(255,255,255,.018) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.018) 39px, rgba(255,255,255,.018) 40px);
}
[data-theme="black"] #workspace::after {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.06) 39px, rgba(255,255,255,.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.06) 39px, rgba(255,255,255,.06) 40px);
}
[data-theme="black"] .ws-empty-icon svg { opacity: 1; color: var(--text2); }
[data-theme="black"] .ws-empty h3 { color: #bbb; }
[data-theme="black"] .ws-empty p { color: #888; }

/* ── COLUMNS ── */
.ws-col {
  display: flex; flex-direction: column;
  overflow: hidden; min-width: 100px; position: relative;
  z-index: 1;
}

/* ── COLUMN SEPARATOR ── */
.col-sep {
  width: 6px; flex-shrink: 0;
  background: transparent;
  cursor: col-resize;
  transition: background .15s;
  z-index: 5;
  position: relative;
}
/* Wider invisible hit area */
.col-sep::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: -4px; right: -4px;
}
.col-sep:hover, .col-sep.active { background: var(--accent); }
/* Grip indicators */
.sep-grip {
  position: absolute; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.col-sep:hover .sep-grip, .col-sep.active .sep-grip,
.row-sep:hover .sep-grip, .row-sep.active .sep-grip { opacity: 1; }
.sep-grip-v {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 4px; height: 24px;
  background: repeating-linear-gradient(to bottom, var(--accent) 0, var(--accent) 2px, transparent 2px, transparent 5px);
  border-radius: 2px;
}
.sep-grip-h {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: 4px; width: 24px;
  background: repeating-linear-gradient(to right, var(--accent) 0, var(--accent) 2px, transparent 2px, transparent 5px);
  border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════
   PANELS — the widget containers
════════════════════════════════════════════════════════════ */
.ws-panel {
  display: flex; flex-direction: column;
  overflow: hidden; min-height: 60px; position: relative;
  background: var(--bg2);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  margin: 3px;
}

.panel-hd {
  height: 30px; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px;
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-radius: 10px 10px 0 0;
  user-select: none; cursor: default;
  overflow: hidden;
}
/* Title/toolbar collapses, actions stay pinned right */
.panel-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.cw-hd-toolbar {
  flex: 1; min-width: 0; overflow: hidden;
}
.panel-hd.draggable { cursor: grab; }
.panel-hd.draggable:active { cursor: grabbing; }

.panel-drag-icon {
  color: var(--text3); font-size: 12px; line-height: 1;
  cursor: grab; flex-shrink: 0; opacity: .4;
  transition: all .12s; letter-spacing: 1px;
  padding: 4px 6px; margin: -4px 0 -4px -6px;
  border-radius: 4px;
}
.panel-drag-icon:hover { opacity: 1; background: var(--bg3); }
.panel-hd:hover .panel-drag-icon { opacity: .7; }

.panel-sym {
  font: 700 10px var(--font); color: var(--text);
  padding: 2px 6px; border-radius: 4px;
  background: rgba(255,255,255,.06); flex-shrink: 0;
  cursor: pointer; transition: all .12s;
}
.panel-sym:hover { background: var(--accent); color: #fff; }

.panel-title {
  font: 500 10px var(--font); color: var(--text2);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .2px;
}

.panel-actions { display: flex; gap: 1px; flex-shrink: 0; margin-left: auto; }
.pa-btn {
  width: 22px; height: 22px; border: none; background: none;
  color: var(--text2); display: flex; align-items: center; justify-content: center;
  border-radius: 4px; cursor: pointer; transition: all .1s;
}
.pa-btn:hover { background: var(--bg3); color: var(--text); }

.panel-body {
  flex: 1; overflow: hidden; position: relative;
  background: var(--bg);
}

/* ── ROW SEPARATOR ── */
.row-sep {
  height: 6px; flex-shrink: 0;
  background: transparent;
  cursor: row-resize;
  transition: background .15s;
  position: relative;
}
/* Wider invisible hit area */
.row-sep::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: -4px; bottom: -4px;
}
.row-sep:hover, .row-sep.active { background: var(--accent); }

/* ── DRAG GHOST ── */
#dragGhost {
  position: fixed; pointer-events: none; z-index: 9999;
  border: 2px solid var(--accent); border-radius: 10px;
  background: rgba(59,130,246,0.12);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transition: none;
  display: none;
}

/* ── DROP INDICATOR (4-way directional) ── */
#dropIndicator {
  position: fixed; z-index: 9998;
  pointer-events: none;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(59,130,246,.5), 0 0 20px rgba(59,130,246,.2);
  opacity: 0;
  transition: opacity .1s;
}
#dropIndicator.visible {
  opacity: 1;
}
#dropIndicator.fill {
  background: rgba(59,130,246,.12);
  border: 2px dashed rgba(59,130,246,.35);
  box-shadow: none;
}

/* Dim non-targeted panels slightly during drag */
#workspace.drag-active .ws-panel {
  transition: opacity .15s;
}
#workspace.drag-active .ws-col-empty {
  border-color: rgba(59,130,246,.2);
  background: rgba(59,130,246,.03);
}

/* During resize */
.ws-resizing .ws-panel { pointer-events: none; }
.ws-resizing .cw-canvas { pointer-events: none; }

/* ════════════════════════════════════════════════════════════
   WIDGET PICKER — compact dark popup (reference style)
════════════════════════════════════════════════════════════ */
#widgetPicker {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(6,8,16,.75); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 120px;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
#widgetPicker.open { opacity: 1; pointer-events: auto; }

.wp-dialog {
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; width: 580px; max-width: 92vw;
  max-height: 70vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.wp-head {
  padding: 14px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center;
}
.wp-head h3 { font-size: 15px; font-weight: 700; flex: 1; color: var(--text); }
.wp-head h3::before { content: '+ '; color: var(--accent); }
.wp-close {
  width: 26px; height: 26px; border: none; background: none;
  color: var(--text3); border-radius: 6px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s;
}
.wp-close:hover { background: var(--bg3); color: var(--text); }

.wp-grid {
  display: flex; flex-direction: column; overflow-y: auto; padding: 0;
}
/* Search */
.wp-search-wrap { padding: 10px 14px 0; }
.wp-search {
  width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font: 400 13px var(--font); box-sizing: border-box;
}
.wp-search:focus { outline: none; border-color: var(--accent); }
.wp-search::placeholder { color: var(--text3); }
/* Chips */
.wp-chips {
  display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; flex-shrink: 0;
}
.wp-chips::-webkit-scrollbar { display: none; }
.wp-chip {
  background: var(--bg3); color: var(--text2); border: none; border-radius: 16px;
  padding: 5px 14px; font: 500 12px var(--font); cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.wp-chip:hover { color: var(--text); background: var(--bg4); }
.wp-chip.active { background: var(--accent); color: #fff; }
/* Cards grid */
.wp-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; padding: 8px 14px 14px;
}
.wp-card {
  display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.02);
  transition: all .15s; overflow: hidden;
}
.wp-card:hover {
  border-color: rgba(26,108,245,.4);
  background: rgba(26,108,245,.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.wp-card-preview {
  width: 100%; aspect-ratio: 2 / 1;
  border-bottom: 1px solid rgba(255,255,255,.04); overflow: hidden;
}
.wp-card-preview svg { width: 100%; height: 100%; display: block; }
.wp-card-preview img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; padding: 4px; box-sizing: border-box; }
.wp-card-body { padding: 8px 10px 10px; }
.wp-card-name { font: 600 12px var(--font); color: var(--text); margin-bottom: 2px; }
.wp-card-desc { font: 400 10px var(--font); color: var(--text2); line-height: 1.35; }
.wp-empty { text-align: center; color: var(--text3); padding: 30px; font-size: 13px; grid-column: 1/-1; }
/* Legacy compat */
.wp-item { display: none; }

/* ──────────────────────────────────────
   SHARED WIDGET STYLES
────────────────────────────────────── */

/* Shared scrollable table */
.pw-table-wrap { overflow-y: auto; height: 100%; }
.pw-table {
  width: 100%; border-collapse: collapse; font-size: 11px;
}
.pw-table th {
  position: sticky; top: 0; z-index: 2;
  padding: 5px 8px; font: 600 10px var(--font);
  color: var(--text2); text-align: right; text-transform: uppercase;
  letter-spacing: .3px; background: var(--bg2);
  border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap;
}
.pw-table th:first-child { text-align: left; }
.pw-table th:hover { color: var(--text); }
.pw-table th.sort-asc::after  { content: ' ↑'; }
.pw-table th.sort-desc::after { content: ' ↓'; }
.pw-table td {
  padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.025);
  text-align: right; font-size: 11px; color: var(--text2);
  white-space: nowrap;
}
.pw-table td:first-child { text-align: left; }
.pw-table tr:hover td { background: rgba(255,255,255,.025); }
.pw-table tr.active td { background: rgba(26,108,245,.1); }
.pw-table .sym-cell { font: 700 11px var(--font); color: var(--text); }
.pw-table .up   { color: var(--green); }
.pw-table .down { color: var(--red); }

/* ── CHART WIDGET ── */
.chart-widget { width: 100%; height: 100%; position: relative; background: transparent; display: flex; flex-direction: column; }

/* Header toolbar (merged into panel-title) */
.cw-hd-toolbar {
  display: flex; align-items: center; gap: 2px;
  white-space: nowrap; flex: 1; min-width: 0;
  overflow: hidden; position: relative;
}
/* More (⋯) overflow menu */
.cw-more-wrap { flex-shrink: 0; position: relative; }
.cw-more-btn { padding: 0 4px; }
.cw-more-menu {
  position: fixed; z-index: 9000;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.cw-more-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 12px; border: none; border-radius: 6px;
  background: none; color: var(--text); font: 500 12px var(--font);
  cursor: pointer; text-align: left; transition: all .08s;
}
.cw-more-item:hover { background: var(--bg3); }
.cw-more-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.cw-more-item span { flex: 1; }
[data-theme="light"] .cw-more-menu { background: #fff; }
.cw-sep { width: 1px; height: 14px; background: var(--border); margin: 0 2px; }
.cw-tb-btn {
  height: 22px; padding: 0 7px; border: none; border-radius: 4px;
  font: 600 10px var(--font); cursor: pointer;
  background: transparent; color: var(--text);
  display: flex; align-items: center; gap: 3px;
  transition: all .1s; white-space: nowrap;
}
.cw-tb-btn:hover { background: var(--bg3); }
.cw-tb-btn.active { background: var(--accent); color: #fff; }
.cw-tb-btn svg { opacity: .9; flex-shrink: 0; }
[data-theme="light"] .cw-tb-btn { color: var(--text); }
[data-theme="light"] .cw-tb-btn svg { opacity: .8; }

/* Dropdowns */
.cw-dd { position: relative; }
/* Dropdowns use position:fixed, so header can safely clip overflow */
.cw-dd-menu {
  position: fixed; z-index: 9000;
  background: var(--bg2); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 4px; min-width: 130px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  display: none;
}
.cw-dd.open .cw-dd-menu { display: block; }

/* TF dropdown — grouped layout */
.cw-tf-menu { padding: 6px; min-width: 200px; }
.cw-tf-group { margin-bottom: 4px; }
.cw-tf-label {
  display: block; font: 600 9px var(--font); color: var(--text3);
  text-transform: uppercase; letter-spacing: .5px; padding: 2px 2px 3px;
}
.cw-tf-row { display: flex; flex-wrap: wrap; gap: 3px; }
.cw-tf-btn {
  padding: 4px 8px; border: none; border-radius: 4px;
  font: 500 11px var(--font); cursor: pointer;
  color: var(--text2); background: rgba(255,255,255,.04);
  transition: all .1s;
}
.cw-tf-btn:hover { background: rgba(255,255,255,.1); color: var(--text); }
.cw-tf-btn.active { background: var(--accent); color: #fff; }

/* Custom TF toggle + input */
.cw-tf-custom-toggle {
  display: block; width: 100%; padding: 6px 8px; border: none; border-radius: 4px;
  font: 600 10px var(--font); cursor: pointer; text-align: left;
  color: var(--text2); background: transparent;
  border-top: 1px solid var(--border); margin-top: 3px;
  transition: all .1s;
}
.cw-tf-custom-toggle:hover { color: var(--accent); background: rgba(255,255,255,.03); }
.cw-tf-custom-body { padding: 0 0 2px; }
.cw-tf-custom-row {
  display: flex; align-items: center; gap: 4px; padding: 4px 0 2px;
}
.cw-tf-num {
  width: 44px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); padding: 4px 4px 4px 8px;
  font: 600 11px var(--font); text-align: center;
  -moz-appearance: textfield;
}
.cw-tf-num::-webkit-inner-spin-button,
.cw-tf-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cw-tf-num:focus { outline: none; border-color: var(--accent); }
.cw-tf-units { display: flex; gap: 1px; }
.cw-tf-unit {
  padding: 4px 7px; border: none; border-radius: 3px;
  font: 600 10px var(--font); cursor: pointer;
  color: var(--text3); background: rgba(255,255,255,.04);
  transition: all .1s;
}
.cw-tf-unit:hover { background: rgba(255,255,255,.1); color: var(--text); }
.cw-tf-unit.active { background: var(--accent); color: #fff; }
.cw-tf-apply {
  padding: 3px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px;
  background: rgba(255,255,255,.08); color: var(--text); font: 500 10px var(--font);
  cursor: pointer; margin-left: auto;
}
.cw-tf-apply:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); }

.cw-dd-item {
  display: block; width: 100%; padding: 5px 10px; border: none; border-radius: 5px;
  font: 500 11px var(--font); cursor: pointer;
  color: var(--text2); background: transparent; text-align: left;
  transition: all .08s;
}
.cw-dd-item:hover { background: var(--bg3); color: var(--text); }
.cw-dd-item.active { color: var(--accent); }
.cw-dd-group {
  font: 600 9px var(--font); color: var(--text3); text-transform: uppercase;
  letter-spacing: .4px; padding: 6px 10px 3px;
}

/* (Old indicator dropdown styles removed — replaced by .cw-ind-dialog above) */

/* Chart widget panel — brighter border */
.ws-panel:has(.chart-widget) {
  border: 1px solid rgba(255,255,255,.12);
}
/* All panel headers — consistent color */

/* OHLC legend overlay (top-left of chart canvas) */
.cw-ohlc-legend {
  position: absolute; top: 4px; left: 8px; z-index: 10;
  pointer-events: none;
  font: 500 10px 'JetBrains Mono', monospace;
  white-space: nowrap; display: flex; gap: 4px;
}
.cw-ohlc-legend span { font-size: 10px; }

/* ── COMPARE MODAL ── */
.compare-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  z-index: 600; align-items: center; justify-content: center;
}
.compare-modal-overlay.open { display: flex; }
.compare-modal {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; width: 380px; max-width: 92vw;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.cmp-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font: 600 15px var(--font); color: var(--text);
}
.cmp-modal-close {
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: none; color: var(--text3); font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.cmp-modal-close:hover { background: var(--bg3); color: var(--red); }
.cmp-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.cmp-modal-search {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); padding: 10px 14px;
  font: 400 13px var(--font); transition: border-color .12s;
}
.cmp-modal-search:focus { outline: none; border-color: var(--accent); }
.cmp-modal-search::placeholder { color: var(--text3); }
.cmp-type-row, .cmp-mode-row { display: flex; gap: 6px; }
.ctype-btn, .cmode-btn {
  flex: 1; padding: 8px; border: 1px solid var(--border);
  border-radius: 10px; background: none; color: var(--text2);
  font: 500 12px var(--font);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; transition: all .12s;
}
.ctype-btn:hover, .cmode-btn:hover { background: var(--bg3); color: var(--text); }
.ctype-btn.active, .cmode-btn.active {
  background: var(--bg3); color: var(--text); border-color: var(--text3);
}
.cmp-list { max-height: 260px; overflow-y: auto; margin-top: 4px; }
.cmp-item {
  padding: 10px 12px; cursor: pointer; display: flex;
  justify-content: space-between; align-items: center;
  font: 500 13px var(--font); color: var(--text);
  border-radius: 8px; transition: background .1s;
}
.cmp-item:hover { background: var(--bg3); }
.cmp-item b { font-weight: 700; }

/* Overlay legend chips on chart */
.cw-overlay-legend {
  position: absolute; top: 18px; left: 8px; z-index: 10;
  pointer-events: auto; display: flex; gap: 6px; flex-wrap: wrap;
}
.cw-ov-chip {
  display: flex; align-items: center; gap: 4px;
  font: 600 12px var(--font); color: var(--text2);
}
.cw-ov-chip .ov-dot { width: 8px; height: 8px; border-radius: 50%; }
.cw-ov-remove {
  background: none; border: none; color: var(--text3); font-size: 12px;
  cursor: pointer; padding: 0 1px; line-height: 1;
}
.cw-ov-remove:hover { color: var(--red); }

/* ── PRICE ALERT DIALOG ── */
.cw-alert-dialog {
  position: absolute; top: 4px; right: 4px; z-index: 200;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; width: 300px; max-height: 80%;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; overflow: hidden;
}
.cw-alert-hd {
  display: flex; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font: 600 12px var(--font); color: var(--text);
}
.cw-alert-hd span { flex: 1; }
.cw-alert-close {
  background: none; border: none; color: var(--text3);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.cw-alert-close:hover { color: var(--red); }
.cw-alert-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.cw-alert-form { display: flex; flex-direction: column; gap: 6px; }
.cw-alert-row { display: flex; gap: 4px; }
.cw-alert-select {
  flex: 1; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--bg3); color: var(--text);
  font: 500 11px var(--font); cursor: pointer;
}
.cw-alert-price {
  width: 110px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--bg3); color: var(--text);
  font: 600 11px 'JetBrains Mono', monospace; text-align: right;
}
.cw-alert-input {
  width: 100%; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--bg3); color: var(--text);
  font: 500 10px var(--font);
}
.cw-alert-input::placeholder, .cw-alert-price::placeholder { color: var(--text3); }
.cw-alert-select:focus, .cw-alert-price:focus, .cw-alert-input:focus {
  outline: none; border-color: var(--accent);
}
.cw-alert-create {
  padding: 6px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  background: rgba(255,255,255,.08); color: var(--text);
  font: 500 11px var(--font); cursor: pointer; transition: all .12s;
}
.cw-alert-create:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.2); }
.cw-alert-list { display: flex; flex-direction: column; gap: 4px; }
.cw-alert-empty { text-align: center; padding: 12px; font-size: 11px; color: var(--text3); }
.cw-alert-card {
  padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg);
  display: flex; flex-direction: column; gap: 4px;
}
.cw-alert-card.inactive { opacity: .45; }
.cw-alert-card-top { display: flex; align-items: center; gap: 6px; }
.cw-alert-cond { font: 600 10px var(--font); color: var(--text2); text-transform: capitalize; }
.cw-alert-val { font: 700 12px 'JetBrains Mono', monospace; color: var(--text); }
.cw-alert-freq { font: 500 9px var(--font); color: var(--text3); margin-left: auto; }
.cw-alert-card-bot { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.cw-alert-status { color: var(--text2); }
.cw-alert-channels { color: var(--text3); margin-left: auto; }
.cw-alert-del {
  background: none; border: none; color: var(--text3); font-size: 14px;
  cursor: pointer; padding: 0 2px; line-height: 1;
}
.cw-alert-del:hover { color: var(--red); }

/* Light theme */
[data-theme="light"] .cw-alert-dialog { background: #fff; }
[data-theme="light"] .cw-alert-select { background: var(--bg); }
[data-theme="light"] .cw-alert-price { background: var(--bg); }
[data-theme="light"] .cw-alert-input { background: var(--bg); }
[data-theme="light"] .cw-alert-create { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .cw-alert-create:hover { background: rgba(0,0,0,.1); }
[data-theme="light"] .cw-alert-card { background: var(--bg); }

/* Pat toggle active state */
.cw-pat-toggle.active { background: rgba(59,130,246,.15); color: var(--accent); }

/* ── Indicator full menu (modal) ── */
.cw-ind-fullmenu {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 600; width: 580px; max-width: 94vw; height: 480px; max-height: 80vh;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.6); overflow: hidden;
}
.cw-ind-backdrop {
  position: fixed; inset: 0; z-index: 599;
  background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
}
.cw-ind-hd {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font: 600 13px var(--font); color: var(--text);
}
.cw-ind-search {
  flex: 1; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 400 12px var(--font);
}
.cw-ind-search:focus { outline: none; border-color: var(--accent); }
.cw-ind-search::placeholder { color: var(--text3); }
.cw-ind-close {
  background: none; border: none; color: var(--text3);
  font-size: 18px; cursor: pointer; line-height: 1;
}
.cw-ind-close:hover { color: var(--red); }
.cw-ind-content { display: flex; flex: 1; overflow: hidden; }
.cw-ind-sidebar {
  width: 140px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--border); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.cw-ind-cat-btn {
  padding: 6px 10px; border: none; border-radius: 6px;
  background: none; color: var(--text2); font: 500 11px var(--font);
  cursor: pointer; text-align: left; transition: all .1s;
}
.cw-ind-cat-btn:hover { background: var(--bg3); color: var(--text); }
.cw-ind-cat-btn.active { background: var(--bg3); color: var(--text); font-weight: 600; }
.cw-ind-list { flex: 1; overflow-y: auto; padding: 6px; }
.cw-ind-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background .1s;
}
.cw-ind-row:hover { background: var(--bg3); }
.cw-ind-row-info { flex: 1; min-width: 0; }
.cw-ind-row-name { display: block; font: 500 12px var(--font); color: var(--text); }
.cw-ind-row-params { display: block; font: 400 10px var(--font); color: var(--text3); }
.cw-ind-row-type { font: 500 9px var(--font); color: var(--text3); padding: 1px 5px; border-radius: 3px; background: var(--bg4); flex-shrink: 0; }
.cw-ind-section-label { font: 600 9px var(--font); color: var(--text3); text-transform: uppercase; letter-spacing: .5px; padding: 10px 10px 4px; }
.cw-ind-add-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; transition: background .1s; }
.cw-ind-add-row:hover { background: var(--bg3); }
.cw-ind-add-btn {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: none; color: var(--text2); font: 500 10px var(--font);
  cursor: pointer; flex-shrink: 0; transition: all .1s;
}
.cw-ind-add-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cw-ind-active-row {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 6px; background: var(--bg3); margin-bottom: 2px;
}
.cw-ind-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cw-ind-edit-btn, .cw-ind-del-btn {
  background: none; border: none; color: var(--text3); cursor: pointer;
  font-size: 13px; padding: 0 2px; line-height: 1; transition: color .1s;
}
.cw-ind-edit-btn:hover { color: var(--accent); }
.cw-ind-del-btn:hover { color: var(--red); }
.cw-ind-chip-del { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 12px; padding: 0 1px; line-height: 1; }
.cw-ind-chip-del:hover { color: var(--red); }
.cw-ind-toggle {
  width: 30px; height: 16px; background: var(--bg4);
  border-radius: 8px; position: relative; transition: background .15s;
  flex-shrink: 0; cursor: pointer;
}
.cw-ind-toggle.on { background: var(--accent); }
.cw-ind-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.cw-ind-toggle.on::after { transform: translateX(14px); }

/* Custom JS editor */
.cw-ind-custom { padding: 8px; }
.cw-ind-editor {
  width: 100%; min-height: 120px; padding: 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text);
  font: 400 11px 'JetBrains Mono', monospace; resize: vertical; tab-size: 2;
}
.cw-ind-editor:focus { outline: none; border-color: var(--accent); }
.cw-ind-run {
  margin-top: 6px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg3); color: var(--text); font: 500 11px var(--font);
  cursor: pointer;
}
.cw-ind-run:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.cw-ind-err { margin-top: 4px; font: 400 10px var(--font); color: var(--red); min-height: 14px; }

/* Light theme */
[data-theme="light"] .cw-ind-fullmenu { background: #fff; }
[data-theme="light"] .cw-ind-search { background: var(--bg); }
[data-theme="light"] .cw-ind-editor { background: var(--bg); }

/* ── Drawing tools modal (icon grid) ── */
.cw-draw-modal {
  position: absolute; top: 4px; left: 6px; z-index: 200;
  background: var(--bg2); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; width: 260px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.cw-dm-head {
  display: flex; align-items: center; padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font: 600 11px var(--font); color: var(--text);
}
.cw-dm-head span { flex: 1; }
.cw-dm-close {
  width: 20px; height: 20px; border: none; background: none;
  color: var(--text3); border-radius: 4px; cursor: pointer;
  font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.cw-dm-close:hover { background: var(--bg3); color: var(--text); }
.cw-dm-body { padding: 6px 8px; max-height: 60vh; overflow-y: auto; }
.cw-dm-group-label {
  font: 600 9px var(--font); color: var(--text3); text-transform: uppercase;
  letter-spacing: .3px; padding: 8px 4px 4px;
}
.cw-dm-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
}
.cw-dm-tool-btn {
  width: 36px; height: 32px; border: none; border-radius: 6px;
  background: transparent; color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .1s;
}
.cw-dm-tool-btn:hover { background: var(--bg3); color: var(--text); }
.cw-dm-tool-btn.active { background: var(--accent); color: #fff; }
.cw-dm-sep { height: 1px; background: rgba(255,255,255,.06); margin: 4px 0; }
.cw-dm-clear { color: var(--red) !important; }
.cw-dm-clear:hover { background: rgba(255,61,90,.12) !important; color: var(--red) !important; }

/* ── Chart status bar (bottom) ── */
.cw-statusbar {
  height: 22px; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  font: 500 10px var(--font); color: var(--text2);
  overflow: visible; position: relative;
}
.cw-sb-sep { width: 1px; height: 12px; background: var(--border); flex-shrink: 0; }
.cw-sb-btn {
  display: flex; align-items: center; gap: 3px;
  padding: 2px 5px; border: none; border-radius: 3px;
  background: none; color: var(--text3); font: 500 10px var(--font);
  cursor: pointer; transition: all .1s; white-space: nowrap;
}
.cw-sb-btn:hover { color: var(--text); background: var(--bg3); }
.cw-sb-btn svg { opacity: .6; }
/* Go-to / Range calendar panel */
.cw-goto-panel {
  position: absolute; bottom: 24px; left: 4px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.4); z-index: 10;
  width: 240px;
}
.cw-cal-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.cw-cal-tab {
  flex: 1; padding: 4px; border: 1px solid var(--border); border-radius: 6px;
  background: none; color: var(--text3); font: 500 10px var(--font);
  cursor: pointer; text-align: center; transition: all .1s;
}
.cw-cal-tab:hover { color: var(--text2); }
.cw-cal-tab.active { color: var(--text); background: var(--bg3); border-color: var(--text3); }
.cw-cal-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.cw-cal-mon-sel {
  flex: 1; padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); font: 500 11px var(--font); cursor: pointer;
}
.cw-cal-mon-sel:focus { outline: none; border-color: var(--accent); }
.cw-cal-year-inp {
  width: 52px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); font: 500 11px var(--font); text-align: center;
  -moz-appearance: textfield;
}
.cw-cal-year-inp::-webkit-inner-spin-button { -webkit-appearance: none; }
.cw-cal-year-inp:focus { outline: none; border-color: var(--accent); }
.cw-cal-nav {
  width: 24px; height: 24px; border: none; border-radius: 4px;
  background: none; color: var(--text2); font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cw-cal-nav:hover { background: var(--bg3); color: var(--text); }
.cw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cw-cal-dow { font: 600 8px var(--font); color: var(--text3); text-align: center; padding: 2px; text-transform: uppercase; }
.cw-cal-day {
  text-align: center; padding: 4px 0; font: 400 11px var(--font); color: var(--text2);
  border-radius: 4px; cursor: pointer; transition: all .1s;
}
.cw-cal-day:hover { background: var(--bg3); color: var(--text); }
.cw-cal-day.today { color: var(--accent); font-weight: 700; }
.cw-cal-day.sel-from, .cw-cal-day.sel-to { background: var(--accent); color: #fff; border-radius: 4px; }
.cw-cal-day.sel-between { background: rgba(59,130,246,.15); color: var(--accent); border-radius: 0; }
.cw-cal-time {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 0 2px; font: 500 11px var(--font); color: var(--text2);
}
.cw-cal-hm {
  width: 36px; padding: 3px 4px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); font: 500 11px 'JetBrains Mono', monospace;
  text-align: center; -moz-appearance: textfield;
}
.cw-cal-hm::-webkit-inner-spin-button { -webkit-appearance: none; }
.cw-cal-hm:focus { outline: none; border-color: var(--accent); }
.cw-cal-footer { display: flex; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); margin-top: 6px; }
.cw-cal-sel { flex: 1; font: 400 10px var(--font); color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-cal-apply {
  padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg3); color: var(--text); font: 500 10px var(--font);
  cursor: pointer; transition: all .1s;
}
.cw-cal-apply:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
[data-theme="light"] .cw-goto-panel { background: #fff; }
/* Range buttons */
.cw-sb-ranges { display: flex; gap: 1px; }
.cw-sb-rbtn {
  padding: 2px 6px; border: none; border-radius: 3px;
  background: none; color: var(--text3); font: 500 9px var(--font);
  cursor: pointer; transition: all .1s;
}
.cw-sb-rbtn:hover { color: var(--text); background: var(--bg3); }
.cw-sb-rbtn.active { color: var(--accent); }
.cw-sb-range {
  flex: 1; font: 400 9px var(--font); color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: right;
}
/* Zoom + Go-to-live — floating on chart bottom center */
.cw-chart-zoom {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px; z-index: 10;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  opacity: .25; transition: opacity .15s;
  pointer-events: auto;
}
.cw-chart-zoom:hover { opacity: 1; }
.cw-cz-btn {
  width: 28px; height: 24px; border: none; border-radius: 5px;
  background: none; color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .1s;
}
.cw-cz-btn:hover { background: var(--bg3); color: var(--text); }
.cw-cz-live:hover { background: var(--bg3); }
[data-theme="light"] .cw-chart-zoom { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
/* ── Subpane resize handle ── */
.mp-subpane-handle {
  height: 4px; flex-shrink: 0; cursor: row-resize;
  background: transparent; position: relative;
  transition: background .12s;
}
.mp-subpane-handle::before {
  content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px;
}
.mp-subpane-handle:hover { background: var(--accent); }

/* Light theme */
[data-theme="light"] .cw-statusbar { background: var(--bg); }

/* ── Patterns panel wrap ── */
.cw-patterns-wrap {
  flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.015);
  overflow: hidden;
}
/* Simple patterns fallback styles */
.pp-wrap { padding: 0; }
.pp-header {
  display: flex; align-items: center; padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.pp-title { font: 600 11px var(--font); color: var(--text); display: flex; align-items: center; gap: 6px; }
.pp-count {
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  background: rgba(59,130,246,.15); color: var(--accent); font-weight: 600;
}
.pp-list { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.pp-card {
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  cursor: pointer; transition: all .12s;
}
.pp-card:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.pp-card.pp-selected { border-color: var(--accent); background: rgba(59,130,246,.08); }
.pp-card-name { font: 600 11px var(--font); color: var(--text); margin-bottom: 4px; }
.pp-empty { text-align: center; padding: 16px; font-size: 12px; color: var(--text3); }

/* ── MicroPlot chart integration ── */
.chart-widget .cw-chart-area { display: flex; flex-direction: column; }
.chart-widget .mp-canvas-wrap {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
}
/* Base .u-over/.u-select/.u-cursor-*/.u-legend rules inherited from common.css */
.chart-widget .u-under  { background: var(--bg); }
.chart-widget .mp-subpanes {
  flex-shrink: 0; display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}
.chart-widget .mp-subpane {
  border-top: 1px solid var(--border); position: relative;
  height: 90px; flex-shrink: 0; overflow: hidden; background: var(--bg);
}
/* Subpane inherits base MicroPlot rules from common.css; override bg only */
.chart-widget .mp-subpane .u-under  { background: var(--bg); }
.chart-widget .mp-subpane-close {
  position: absolute; top: 4px; right: 68px; z-index: 10;
  width: 16px; height: 16px; border: none; border-radius: 3px;
  background: transparent; color: var(--text2); font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; opacity: 0; transition: opacity .15s, color .15s;
}
.chart-widget .mp-subpane:hover .mp-subpane-close { opacity: 1; }
.chart-widget .mp-subpane-close:hover { color: var(--text); background: var(--bg3); }

/* ── Multi-chart layout grid ── */
.cw-multi-grid {
  display: grid; width: 100%; height: 100%; gap: 1px;
  background: var(--border); flex: 1; min-height: 0;
}
.cw-multi-cell {
  background: var(--bg); position: relative; overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}
.cw-multi-cell.focused { outline: 1px solid var(--accent); outline-offset: -1px; z-index: 1; }
.cw-multi-cell-overlay {
  position: absolute; top: 4px; left: 6px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  font: 600 10px/1 var(--font); color: var(--text2);
  pointer-events: auto;
}
.cw-multi-cell-sym {
  cursor: pointer; white-space: nowrap;
}
.cw-multi-cell-sym:hover { color: var(--text); }
.cw-multi-cell-tf { color: var(--text3); font-size: 9px; }
.cw-multi-cell-price { margin-left: auto; font-variant-numeric: tabular-nums; }
.cw-multi-cell-canvas { flex: 1; position: relative; overflow: hidden; min-height: 0; }
.cw-multi-cell .mp-subpanes {
  flex-shrink: 0; display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}

.cw-multi-resize-v, .cw-multi-resize-h { background: transparent; }
.cw-multi-resize-v::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px; height: 24px; background: var(--text3); border-radius: 1px;
}
.cw-multi-resize-h::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 2px; background: var(--text3); border-radius: 1px;
}

/* ── WATCHLIST ── */
.wl-wrap { height: 100%; overflow: auto; }
.wl-row {
  display: flex; align-items: center; padding: 12px 10px; cursor: pointer; gap: 8px;
  transition: background .08s;
}
@media (hover: hover) { .wl-row:hover { background: rgba(255,255,255,.03); } }
.wl-row.active { background: rgba(255,255,255,.06); }
/* Watchlist — table-like grid layout */
.wl-header, .wl-row {
  display: grid; align-items: center; padding: 8px 10px; gap: 6px;
  grid-template-columns: var(--wl-cols, auto 50px 1fr 1fr 1fr);
  min-width: max-content;
}
.wl-header {
  padding-top: 4px; padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
  font: 600 9px var(--font); color: var(--text3); text-transform: uppercase; letter-spacing: .3px;
  position: sticky; top: 0; z-index: 2; background: var(--bg);
}
.wl-header > span { cursor: pointer; transition: color .1s; text-align: right; }
.wl-header > span:first-child { text-align: left; } /* Symbol column left-aligned */
.wl-header > span:hover { color: var(--text); }
.wl-header > span.wl-sort-active { color: var(--accent); }
.wl-row { min-height: 32px; cursor: pointer; transition: background .08s; }
@media (hover: hover) { .wl-row:hover { background: var(--bg3); } }
.wl-row.active { background: rgba(255,255,255,.06); }
.wl-sym { font: 600 12px var(--font); color: var(--text); display: flex; align-items: center; gap: 6px; overflow: hidden; }
.wl-sym img, .ws-sl-item img { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; pointer-events: none; -webkit-user-drag: none; }
.wl-price { font: 500 11px var(--font); color: var(--text); text-align: right; }
.wl-chg { font: 600 11px var(--font); text-align: right; }
.wl-last { font: 500 11px var(--font); color: var(--text2); text-align: right; }
.wl-vol { font: 500 11px var(--font); color: var(--text); text-align: right; }
.wl-1h { font: 600 11px var(--font); text-align: right; }
.wl-mcap { font: 500 11px var(--font); color: var(--text2); text-align: right; }
.wl-spark { width: 50px; height: 24px; display: block; }

/* ── SCREENER ── */
/* ── Mini Chart Widget ── */
.mc-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.mc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 4px; flex-shrink: 0; gap: 6px; flex-wrap: wrap;
}
.mc-info { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mc-sym { font: 700 13px var(--font); color: var(--text); }
.mc-price { font: 700 16px var(--font-mono, monospace); }
.mc-chg { font: 600 11px var(--font); }
.mc-controls { display: flex; align-items: center; gap: 4px; }
.mc-tf-sel {
  background: var(--bg2); color: var(--text2); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; font: 500 11px var(--font); cursor: pointer;
}
.mc-canvas { flex: 1; min-height: 80px; width: 100%; display: block; }
.mc-tooltip {
  position: absolute; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 8px; font: 500 10px var(--font); color: var(--text);
  pointer-events: none; white-space: nowrap; z-index: 5;
}

/* ── Multi Timeframe Widget ── */
.mtf-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.mtf-grid { flex: 1; min-height: 0; }
.mtf-cell {
  position: relative; overflow: hidden; background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px; min-height: 90px;
}
.mtf-cell canvas { width: 100%; height: 100%; display: block; }

/* ── Widget Symbol Selector ── */
.ws-sym-sel {
  display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
}
.ws-sym-mode {
  background: var(--bg2); color: var(--text2); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 4px; font: 500 10px var(--font); cursor: pointer;
}
.ws-sym-pick {
  background: var(--bg2); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; font: 500 11px var(--font); cursor: pointer;
}
.ws-sym-current {
  font: 600 11px var(--font); color: var(--accent); padding: 0 4px;
}

.screener-wrap { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.screener-mode-tabs {
  display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.screener-mode-btn {
  flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text2); font: 500 11px var(--font); padding: 8px 12px; cursor: pointer;
  transition: all .15s;
}
.screener-mode-btn:hover { color: var(--text); }
.screener-mode-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.screener-quick, .screener-advanced { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.screener-filters {
  flex-shrink: 0; padding: 6px 8px;
  display: flex; gap: 4px; align-items: center;
  border-bottom: 1px solid var(--border);
}
.screener-filter-btn {
  height: 22px; padding: 0 9px; border: none; border-radius: 4px;
  font: 600 10px var(--font); cursor: pointer;
  color: var(--text2); background: var(--bg3);
  transition: all .1s;
}
.screener-filter-btn:hover { background: rgba(255,255,255,.1); color: var(--text); }
.screener-filter-btn.active { background: var(--accent); color: #fff; }
.screener-body { flex: 1; overflow-y: auto; }

/* ── NOTES ── */
/* ── NOTES WIDGET (v2) ── */
.notes-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.notes-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.notes-tab {
  flex: 1; padding: 8px 0; border: none; background: none;
  font: 600 11px var(--font); color: var(--text3); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all .15s;
}
.notes-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.notes-content { flex: 1; overflow-y: auto; position: relative; }
.notes-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; padding: 8px; align-content: start;
}
.notes-card {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; cursor: pointer; transition: background .12s;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 70px; position: relative;
}
.notes-card:hover { background: var(--bg3); }
.notes-card-title {
  font: 600 12px var(--font); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: normal; word-break: break-word;
}
.notes-card-sub {
  font: 400 11px/1.4 var(--font); color: var(--text2);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word;
  white-space: pre-line;
}
.notes-card-reminder {
  display: flex; align-items: center; gap: 4px; margin-top: auto;
  font: 500 9px var(--font); color: var(--accent);
}
.notes-card-reminder svg { width: 10px; height: 10px; flex-shrink: 0; }
.notes-card-del {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border: none; background: rgba(0,0,0,.2);
  color: var(--text2); font-size: 13px; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.notes-card-del:active { background: rgba(247,90,90,.3); color: var(--red); }
.notes-content { position: relative; }
.notes-fab {
  position: absolute; bottom: 12px; right: 12px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none;
  font-size: 28px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  z-index: 5;
}
.notes-fab:hover { filter: brightness(1.1); }
.notes-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--text3); font: 400 12px var(--font); gap: 6px;
}
/* Note editor overlay */
.notes-editor {
  position: absolute; inset: 0; background: var(--bg);
  display: flex; flex-direction: column; z-index: 10;
  overflow: hidden; overscroll-behavior: none;
}
.notes-editor-body { overscroll-behavior: contain; }
@media (max-width: 768px) {
  .notes-editor {
    position: fixed !important; left: 0 !important; right: 0 !important;
    top: var(--header-h) !important; bottom: 0 !important;
    z-index: 500 !important;
    height: auto !important;
  }
  .notes-editor .notes-tb-btn { width: 44px; height: 40px; }
  .notes-editor .notes-tb-btn svg { width: 18px; height: 18px; }
  .notes-editor .notes-editor-toolbar { padding: 6px 10px; justify-content: space-between; }
}
.notes-editor-head {
  display: flex; align-items: center; padding: 8px 10px;
  border-bottom: 1px solid var(--border); gap: 8px;
}
.notes-editor-back {
  border: none; background: none; color: var(--text); cursor: pointer;
  padding: 4px 8px; display: flex; align-items: center;
}
.notes-editor-undo, .notes-editor-redo {
  border: none; background: none; color: var(--text3); cursor: pointer;
  padding: 4px 6px; opacity: .5;
}
.notes-editor-head-title {
  flex: 1; font: 600 13px var(--font); color: var(--text);
}
.notes-editor-save {
  border: none; border-radius: 14px;
  padding: 6px 16px; font: 600 12px var(--font);
  background: var(--accent); color: #fff; cursor: pointer;
}
.notes-editor-title-wrap {
  flex-shrink: 0; padding: 0 12px 6px;
}
.notes-editor-title {
  width: 100%; border: none; background: none; outline: none;
  font: 600 18px var(--font); color: var(--text);
  padding: 8px 0 4px;
}
.notes-editor-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.notes-editor-sub {
  width: 100%; flex: 1; border: none; background: none; outline: none; resize: none;
  font: 400 13px/1.6 var(--font); color: var(--text2);
  padding: 8px 12px 12px;
}
.notes-editor-sub[contenteditable] { min-height: 60px; }
.notes-editor-sub[contenteditable]:empty::before {
  content: attr(data-placeholder); color: var(--text3);
}
.notes-editor-sub ul, .notes-editor-sub ol {
  padding-left: 24px; margin: 4px 0;
}
.notes-editor-sub li { margin: 2px 0; }
.notes-editor-footer {
  flex-shrink: 0; border-top: 1px solid var(--border);
  background: var(--bg2); position: relative;
}
/* Reminder button row */
.notes-editor-rem-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
}
.notes-rem-clear {
  border: none; background: none; color: var(--text3); cursor: pointer;
  font-size: 18px; padding: 4px;
}
.notes-rem-type {
  font: 11px var(--font); background: var(--bg3);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 5px 8px;
}
.notes-rem-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 18px;
  background: none; color: var(--text2); font: 500 11px var(--font);
  cursor: pointer;
}
.notes-rem-btn:active { background: var(--bg3); }
.notes-rem-btn.has-reminder { border-color: var(--accent); color: var(--accent); }
.notes-rem-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.notes-rem-input {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: 400 11px var(--font); padding: 4px 8px;
}
/* Toolbar above keyboard */
.notes-editor-toolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 8px; border-top: 1px solid var(--border);
  flex-shrink: 0; background: var(--bg2);
}
.notes-tb-btn {
  width: 36px; height: 32px; border: none; border-radius: 6px;
  background: none; color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
.notes-tb-btn:active { background: var(--bg3); }
.notes-tb-btn.active { color: var(--accent); background: rgba(59,130,246,.1); }
/* Dropdown from toolbar button */
.notes-tb-dropdown {
  position: absolute; bottom: 100%; left: 0;
  margin-bottom: 4px;
  display: none; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; min-width: 140px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.3); z-index: 30;
}
.notes-tb-dropdown.open { display: flex; }
.notes-tb-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border: none; background: none;
  color: var(--text2); font: 500 12px var(--font);
  cursor: pointer; text-align: left;
}
.notes-tb-dd-item:active { background: var(--bg3); }
.notes-tb-dd-item svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Color picker */
.notes-color-menu {
  position: absolute; bottom: 100%; right: 0;
  margin-bottom: 4px;
  display: none; flex-wrap: wrap; gap: 6px;
  padding: 10px 12px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.3); z-index: 30;
  min-width: 160px;
}
.notes-color-menu.open { display: flex; }
.notes-nav-btn {
  border: none; background: var(--bg3); color: var(--text2);
  width: 40px; height: 34px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.notes-nav-btn:disabled { opacity: .3; cursor: default; }
.notes-editor-nav-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 4px 12px; border-top: 1px solid var(--border);
}
.notes-color-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer;
}
.notes-color-dot.active { border-color: var(--accent); }
/* Drawing panel */
.notes-draw-panel {
  position: absolute; inset: 0; background: var(--bg);
  display: flex; flex-direction: column; z-index: 20;
}
.notes-draw-head {
  display: flex; align-items: center; padding: 8px 10px; gap: 8px;
  border-bottom: 1px solid var(--border);
}
.notes-draw-head button { border: none; background: none; color: var(--text2); cursor: pointer; font: 600 12px var(--font); padding: 6px 10px; border-radius: 6px; }
.notes-draw-head button:active { background: var(--bg3); }
.notes-draw-head .notes-draw-save { margin-left: auto; color: var(--accent); }
.notes-draw-canvas { flex: 1; cursor: crosshair; display: block; }
/* Nav */
.notes-editor-nav {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 4px 12px;
}
.notes-editor-nav button {
  border: none; background: var(--bg3); color: var(--text2);
  width: 32px; height: 28px; border-radius: 6px; cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.notes-editor-nav button:disabled { opacity: .3; cursor: default; }
.notes-editor-nav button:not(:disabled):active { background: var(--bg4); }
.notes-editor-nav span { font: 500 11px var(--font); color: var(--text3); }
/* Reminders list */
.notes-reminders { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.notes-rem-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border: 1px solid var(--border); border-radius: 8px;
}
.notes-rem-info { flex: 1; min-width: 0; }
.notes-rem-title { font: 600 12px var(--font); color: var(--text); }
.notes-rem-date { font: 400 10px var(--font); color: var(--accent); margin-top: 2px; }

/* ── NEWS WIDGET ── */
.nw-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.nw-filters {
  display: flex; gap: 3px; padding: 6px 8px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.nw-fbtn {
  padding: 3px 10px; border: none; border-radius: 4px;
  background: none; color: var(--text3); font: 500 10px var(--font);
  cursor: pointer; transition: all .1s;
}
.nw-fbtn:hover { color: var(--text); background: var(--bg3); }
.nw-fbtn.active { color: var(--text); background: var(--bg3); }
.nw-list { flex: 1; overflow-y: auto; }
/* nw-list uses .thin-scroll utility class via JS */
[data-theme="light"] .nw-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.08); }
.nw-item {
  display: block; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background .1s; cursor: pointer;
}
.nw-item:hover { background: var(--bg3); }
.nw-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.nw-time { font: 400 10px var(--font); color: var(--text3); }
.nw-impact { font: 700 9px var(--font); text-transform: uppercase; }
.nw-tag {
  font: 600 9px 'JetBrains Mono', monospace; padding: 1px 5px;
  border-radius: 3px; background: rgba(59,130,246,.08); color: var(--accent);
}
.nw-title { font: 600 12px/1.35 var(--font); color: var(--text); }
.nw-desc { font: 400 11px/1.45 var(--font); color: var(--text2); margin-top: 2px; }
.nw-source { font: 400 10px var(--font); color: var(--text3); margin-top: 3px; }

/* ── HEATMAP ── */
.hm-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.hm-pills { display: flex; gap: 4px; padding: 6px 8px; flex-shrink: 0; }
.hm-pill {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 12px;
  background: none; color: var(--text2); font: 500 10px var(--font);
  cursor: pointer;
}
.hm-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.hm-grid { flex: 1; position: relative; overflow: hidden; }
.hm-cell {
  position: absolute; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  padding: 3px 5px; cursor: pointer;
  border: 0.5px solid #ccc;
  overflow: hidden;
  transition: left 0.4s, top 0.4s, width 0.4s, height 0.4s, background 0.4s;
}
.hm-cell:hover { filter: brightness(1.25); z-index: 2; }
.hm-sym { font-weight: 700; color: #fff; line-height: 1.2; white-space: nowrap; }
.hm-pct { font-weight: 600; color: rgba(255,255,255,.85); }
.hm-price { color: rgba(255,255,255,.5); }
.hm-tooltip {
  position: absolute; z-index: 100; pointer-events: none;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
  font: 400 11px var(--font); color: var(--text);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  display: none; max-width: 220px;
}
.hm-tooltip.show { display: block; }
.hm-tip-sym { font: 700 13px var(--font); color: var(--text); }
.hm-tip-name { font: 400 11px var(--font); color: var(--text2); margin-bottom: 4px; }
.hm-tip-price { font: 600 12px var(--font); color: var(--text); margin-bottom: 4px; }
.hm-tip-row { display: flex; gap: 8px; font: 500 10px var(--font); color: var(--text2); }
.hm-tip-row .up { color: var(--green); }
.hm-tip-row .down { color: var(--red); }

/* ── Widget Settings Dialog ── */
.ws-settings-dlg {
  position: absolute; top: 30px; right: 4px; z-index: 200;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; width: 320px; max-height: 80vh; padding: 0;
  overflow-y: auto;
  box-shadow: 0 8px 28px rgba(0,0,0,.4); overflow: hidden;
}
.ws-set-head {
  display: flex; align-items: center; padding: 10px 14px;
  font: 600 12px var(--font); color: var(--text);
  border-bottom: 1px solid var(--border);
}
.ws-set-head span { flex: 1; }
.ws-set-close {
  background: none; border: none; color: var(--text3);
  font-size: 16px; cursor: pointer; line-height: 1;
}
.ws-set-close:hover { color: var(--red); }
.ws-set-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.ws-set-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-set-tf-row { flex-direction: column; align-items: stretch; gap: 6px; }
.ws-set-tfpills { display: flex; flex-wrap: wrap; gap: 4px; }
.ws-set-tfpill {
  flex: 0 0 auto; min-width: 44px; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text2); font: 600 12px var(--font);
  cursor: pointer; transition: all .15s;
}
.ws-set-tfpill:hover { border-color: var(--text3); color: var(--text); }
.ws-set-tfpill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ws-set-label { font: 400 12px var(--font); color: var(--text2); }
.ws-set-input {
  flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 500 12px var(--font);
  -moz-appearance: textfield;
}
.ws-set-input::-webkit-inner-spin-button,
.ws-set-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ws-set-input:focus { outline: none; border-color: var(--accent); }
.ws-set-select {
  flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 500 12px var(--font); cursor: pointer;
}
.ws-set-select:focus { outline: none; border-color: var(--accent); }
.ws-set-toggle {
  width: 32px; height: 18px; background: var(--bg4); border-radius: 9px;
  position: relative; cursor: pointer; transition: background .15s; flex-shrink: 0;
}
.ws-set-toggle.on { background: var(--accent); }
.ws-set-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.ws-set-toggle.on::after { transform: translateX(14px); }
.ws-set-apply {
  margin: 0 14px 10px; padding: 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg3); color: var(--text); font: 500 12px var(--font);
  cursor: pointer; transition: all .1s;
}
.ws-set-apply:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Symbol list editor */
.ws-set-symlist { width: 100%; }
.ws-sl-items {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0;
  max-height: 140px; overflow-y: auto;
}
.ws-sl-item {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 4px; border-radius: 4px;
  background: var(--bg3); font: 500 11px var(--font); color: var(--text);
  cursor: grab;
}
.ws-sl-item:active { cursor: grabbing; }
.ws-sl-grip { color: var(--text3); font-size: 8px; opacity: .5; cursor: grab; }
.ws-sl-dragging { opacity: .3; outline: 1px dashed var(--accent); }
.ws-sl-drop-target { outline: 2px solid var(--accent); outline-offset: 1px; }
.ws-sl-item img { border-radius: 50%; }
.ws-sl-del {
  background: none; border: none; color: var(--text3); font-size: 12px;
  cursor: pointer; padding: 0 1px; line-height: 1;
}
.ws-sl-del:hover { color: var(--red); }
.ws-sl-add-wrap { position: relative; }
.ws-sl-search {
  width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 400 12px var(--font);
}
.ws-sl-search:focus { outline: none; border-color: var(--accent); }
.ws-sl-search::placeholder { color: var(--text3); }
.ws-sl-results {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 10; max-height: 200px; overflow-y: auto;
}
.ws-sl-res-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 10px; border: none; background: none;
  color: var(--text); font: 500 11px var(--font); cursor: pointer; text-align: left;
}
.ws-sl-res-btn:hover { background: var(--bg3); }
.ws-sl-res-btn img { border-radius: 50%; }
.ws-sl-plus { margin-left: auto; color: var(--accent); font-weight: 700; }

[data-theme="light"] .ws-settings-dlg { background: #fff; }
[data-theme="light"] .ws-set-input { background: var(--bg); }
[data-theme="light"] .ws-sl-search { background: var(--bg); }
[data-theme="light"] .ws-sl-results { background: #fff; }

/* ── SPARKLINE ── */
.sparkline { overflow: visible; }

/* ── EMPTY COLUMN ── */
.ws-col-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: #5a6a80; font-size: 12px; flex-direction: column; gap: 10px;
  border: 2px dashed rgba(255,255,255,.06);
  border-radius: 10px; margin: 3px;
  transition: border-color .15s, background .15s;
}
.ws-col-empty button {
  padding: 6px 16px; border: 1px solid var(--border);
  border-radius: 20px; background: rgba(255,255,255,.06); color: var(--text2);
  font: 500 11px var(--font); cursor: pointer; transition: all .12s;
}
.ws-col-empty button:hover { border-color: rgba(255,255,255,.2); color: var(--text); background: rgba(255,255,255,.1); }

/* ── EMPTY WORKSPACE ── */
.ws-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; width: 100%; gap: 14px;
  color: var(--text2); position: relative; z-index: 1;
}
.ws-empty-icon { line-height: 1; color: var(--text3); }
.ws-empty h3 { font: 600 18px var(--font); color: var(--text); letter-spacing: -.3px; margin: 0; }
.ws-empty p { font: 400 13px var(--font); color: var(--text3); margin: 0; }
.ws-empty-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px;
  background: rgba(255,255,255,.06); color: var(--text);
  font: 500 12px var(--font); cursor: pointer;
  transition: all .12s; margin-top: 6px;
}
.ws-empty-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }

/* ── CONTEXT MENU ── */
#ctxMenu {
  position: fixed; z-index: 2000;
  background: var(--bg2); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; min-width: 160px; padding: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: none;
}
#ctxMenu.open { display: block; }
.ctx-item {
  padding: 6px 10px; border-radius: 5px; font-size: 12px; cursor: pointer;
  color: var(--text2); display: flex; align-items: center; gap: 8px;
}
.ctx-item:hover { background: rgba(255,255,255,.05); color: var(--text); }
.ctx-item.danger:hover { background: rgba(255,61,90,.12); color: #ff3d5a; }
.ctx-sep { height: 1px; background: var(--border); margin: 3px 0; }

/* ── SCROLLBARS ── */
/* Utility class — add .thin-scroll to any scrollable container */
.thin-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; }
.thin-scroll::-webkit-scrollbar { width: 4px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

/* Backwards-compat: these selectors inherit .thin-scroll via JS classList.
   Firefox fallback uses scrollbar-width: thin for all scrollable widgets. */
.wl-wrap, .pw-table-wrap, .screener-body, .wp-grid,
.movers-list, .activity-list, .news-list, .overview-wrap,
.cw-ind-dlg-body, .cw-dm-body, .cw-patterns-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}

/* ── LOADER / SPINNER ── */
.pw-loading {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--text3); font-size: 12px; gap: 8px;
}
.pw-spinner {
  width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.06);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── PRICE FLASH ── */
@keyframes flash-up   { 0%,100%{} 30%{color:#00c87a} }
@keyframes flash-down { 0%,100%{} 30%{color:#ff3d5a} }
.flash-up   { animation: flash-up   .4s ease; }
.flash-down { animation: flash-down .4s ease; }

/* ════════════════════════════════════════════════════════════
   WIDGET HEADER — v2 actions
════════════════════════════════════════════════════════════ */
.pa-btn[data-action="maximize"]:hover { color: var(--accent); }
.pa-btn[data-action="duplicate"]:hover { color: var(--green); }
.pa-btn[data-action="close"]:hover { color: var(--red); }

.sync-indicator {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text3); flex-shrink: 0;
  transition: background .2s;
}
.sync-indicator.synced { background: var(--green); box-shadow: 0 0 5px rgba(0,200,122,.4); }

/* ════════════════════════════════════════════════════════════
   MAXIMIZE MODE
════════════════════════════════════════════════════════════ */
#workspace.ws-maximized .ws-col { flex: 1 !important; }
#workspace.ws-maximized .ws-panel {
  flex: 1 !important; margin: 0; border-radius: 0; border: none;
}
#workspace.ws-maximized .panel-hd { border-radius: 0; }

/* ════════════════════════════════════════════════════════════
   MARKET MOVERS WIDGET
════════════════════════════════════════════════════════════ */
.movers-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.movers-tabs {
  flex-shrink: 0; display: flex; gap: 2px; padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.movers-tab {
  height: 22px; padding: 0 9px; border: none; border-radius: 4px;
  font: 600 10px var(--font); cursor: pointer;
  color: var(--text2); background: var(--bg3);
  transition: all .1s;
}
.movers-tab:hover { background: rgba(255,255,255,.1); color: var(--text); }
.movers-tab.active { background: var(--accent); color: #fff; }

/* ════════════════════════════════════════════════════════════
   FEAR & GREED INDEX WIDGET
════════════════════════════════════════════════════════════ */
.fng-wrap {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  align-items: center; padding: 8px 12px;
}
.fng-gauge-area {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0 4px;
}
.fng-gauge { display: block; }
.fng-value {
  font: 800 36px var(--font); margin-top: -12px;
  line-height: 1; letter-spacing: -1px;
}
.fng-label {
  font: 600 14px var(--font); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 1px;
}
.fng-updated {
  font: 400 10px var(--font); color: var(--text3); margin-top: 4px;
}
.fng-tabs {
  display: flex; gap: 2px; margin: 8px 0 4px;
}
.fng-tab {
  height: 22px; padding: 0 12px; border: none; border-radius: 4px;
  font: 600 10px var(--font); cursor: pointer;
  color: var(--text2); background: var(--bg3);
  transition: all .1s;
}
.fng-tab:hover { background: rgba(255,255,255,.1); color: var(--text); }
.fng-tab.active { background: var(--accent); color: #fff; }
.fng-chart-area {
  width: 100%; flex: 1; min-height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.fng-chart { display: block; width: 100%; }
[data-theme="light"] .fng-tab { background: rgba(0,0,0,.05); color: var(--text2); }
[data-theme="light"] .fng-tab:hover { background: rgba(0,0,0,.1); }

/* ════════════════════════════════════════════════════════════
   NEWS SENTIMENT WIDGET (Neuberg-inspired)
════════════════════════════════════════════════════════════ */
.ns-wrap {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
/* Summary header */
.ns-summary {
  flex-shrink: 0; padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.ns-summary-top { display: flex; gap: 12px; align-items: flex-start; }
.ns-meter-col { flex: 1; min-width: 0; }
.ns-trend-col { flex-shrink: 0; }
.ns-trend { display: block; }
.ns-meter {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--bg3);
}
.ns-meter-bar {
  height: 100%; border-radius: 4px;
  background: linear-gradient(to right, #16c784 40%, #9ca8ba 40%, #9ca8ba 70%, #ea3943 70%);
  transition: background .3s;
}
.ns-scores {
  display: flex; justify-content: space-between;
  padding: 6px 0 2px; font: 600 11px var(--font);
}
.ns-score.bull { color: #16c784; }
.ns-score.neut { color: #9ca8ba; }
.ns-score.bear { color: #ea3943; }
.ns-summary-bottom { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ns-ai-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font: 500 9px var(--font); color: var(--text3);
  background: var(--bg3);
}
.ns-ai-badge.done { color: var(--accent); background: rgba(59,130,246,.1); }
/* Reversal alert */
.ns-reversal { flex: 1; }
.ns-rev-badge {
  font: 600 10px var(--font); letter-spacing: .3px;
}
.ns-reversal.pulse .ns-rev-badge {
  animation: ns-pulse 1s ease-in-out 3;
}
@keyframes ns-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
/* Topic chips with sentiment dots */
.ns-topics {
  flex-shrink: 0; display: flex; gap: 4px; padding: 8px 12px;
  overflow-x: auto; border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.ns-topics::-webkit-scrollbar { display: none; }
.ns-chip {
  flex-shrink: 0; height: 24px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 12px;
  background: transparent; color: var(--text2);
  font: 500 10px var(--font); cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  transition: all .15s; white-space: nowrap;
}
.ns-chip:hover { background: var(--bg3); color: var(--text); }
.ns-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.ns-chip-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.ns-chip.active .ns-chip-dot { background: #fff !important; }
.ns-chip-cnt { font-size: 9px; opacity: .7; }
/* News feed — 3-column Neuberg layout */
.ns-feed {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.ns-feed::-webkit-scrollbar { width: 4px; }
.ns-feed::-webkit-scrollbar-track { background: transparent; }
.ns-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.ns-item {
  display: flex; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .1s; align-items: flex-start;
}
.ns-item:hover { background: var(--bg3); }
/* Col 1: time + marker */
.ns-item-time-col {
  flex-shrink: 0; width: 44px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding-top: 1px;
}
.ns-item-time { font: 400 9px var(--font); color: var(--text3); white-space: nowrap; }
.ns-item-marker { font-size: 10px; }
/* Col 2: content */
.ns-item-body { flex: 1; min-width: 0; }
.ns-item-title {
  font: 600 12px var(--font); color: var(--text);
  line-height: 1.35; margin-bottom: 2px;
}
.ns-item-desc {
  font: 400 11px var(--font); color: var(--text2);
  line-height: 1.3; margin-bottom: 4px;
}
.ns-item-footer { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ns-item-tag {
  padding: 1px 6px; border-radius: 3px;
  font: 500 9px var(--font); color: var(--text2);
  background: var(--bg3);
}
.ns-item-src { font: 400 9px var(--font); color: var(--text3); margin-left: auto; }
/* Col 3: signals (tickers + confidence) */
.ns-item-signals {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: flex-end; gap: 3px; min-width: 48px;
}
.ns-item-sent {
  font: 700 11px var(--font); letter-spacing: .3px;
}
.ns-ticker {
  font: 600 10px var(--font); cursor: pointer;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(255,255,255,.04);
  transition: background .1s; white-space: nowrap;
}
.ns-ticker:hover { background: rgba(255,255,255,.1); }
.ns-loading {
  padding: 30px 12px; text-align: center;
  font: 400 12px var(--font); color: var(--text3);
}
/* Light theme */
[data-theme="light"] .ns-chip { border-color: rgba(0,0,0,.1); }
[data-theme="light"] .ns-chip:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .ns-item:hover { background: rgba(0,0,0,.03); }
[data-theme="light"] .ns-item-tag { background: rgba(0,0,0,.05); }
[data-theme="light"] .ns-ticker { background: rgba(0,0,0,.04); }
[data-theme="light"] .ns-ticker:hover { background: rgba(0,0,0,.08); }
[data-theme="light"] .ns-feed::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); }
[data-theme="light"] .ns-feed { scrollbar-color: rgba(0,0,0,.1) transparent; }

/* ════════════════════════════════════════════════════════════
   GEOPOLITICAL RISK MAP WIDGET
════════════════════════════════════════════════════════════ */
.gr-wrap {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
.gr-header {
  flex-shrink: 0; display: flex; align-items: center;
  padding: 5px 10px; border-bottom: 1px solid var(--border);
  height: 32px;
}
.gr-gri { display: flex; align-items: center; gap: 6px; flex: 1; }
.gr-gri-label { font: 500 11px var(--font); color: var(--text2); margin-right: auto; }
.gr-gri-val { font: 800 16px var(--font); letter-spacing: -0.3px; line-height: 1; }
.gr-gri-change { font: 700 11px var(--font); line-height: 1; }
/* gr-refresh removed */
/* Map */
.gr-map-area {
  flex-shrink: 0; position: relative;
  border-bottom: 1px solid var(--border);
  background: var(--bg); overflow: hidden;
  padding: 0; margin: 0; line-height: 0;
}
.gr-map-container { width: 100%; aspect-ratio: 16/9; max-height: 220px; padding: 0; margin: 0; line-height: 0; overflow: hidden; }
.gr-map-svg { width: 100%; height: 100%; display: block; padding: 0; margin: 0; }
.gr-map-container path:hover { opacity: .9 !important; filter: brightness(1.3); }
.gr-tooltip {
  display: none; position: absolute; z-index: 5;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font: 400 12px var(--font); color: rgba(255,255,255,.9);
  box-shadow: 0 4px 16px rgba(0,0,0,.5); pointer-events: none;
  max-width: 240px; white-space: normal; line-height: 1.4;
}
@media (max-width: 768px) {
  .gr-tooltip {
    position: absolute; left: 0 !important; right: 0 !important;
    bottom: 0 !important; top: auto !important;
    max-width: none; border-radius: 0;
    padding: 8px 12px; font-size: 13px;
  }
}
/* Tabs — Telegram-style full-width pills */
.gr-tabs {
  flex-shrink: 0; display: flex; gap: 4px; padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}
.gr-tab {
  flex: 1; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 20px;
  font: 600 11px var(--font); cursor: pointer;
  color: var(--text2); background: transparent; transition: all .15s;
  text-align: center;
}
.gr-tab:hover { border-color: var(--text3); color: var(--text); }
.gr-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(59,130,246,.08); }
/* Content */
.gr-content {
  flex: 1; overflow-y: auto; padding: 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.gr-content::-webkit-scrollbar { width: 4px; }
.gr-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
/* Table */
.gr-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 12px var(--font); }
.gr-table th {
  text-align: left; padding: 5px 10px; font: 600 9px var(--font);
  color: var(--text3); text-transform: uppercase; letter-spacing: .3px;
  border-bottom: 1px solid var(--border); background: var(--bg);
  position: sticky; top: 0; z-index: 2;
}
.gr-table th:first-child { border-radius: 8px 0 0 0; }
.gr-table th:last-child { border-radius: 0 8px 0 0; }
.gr-table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.03); font-size: 12px; }
.gr-table tr:hover td { background: none; }
.gr-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.gr-score-cell { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.gr-score-num { font-size: 13px; }
.gr-score-ch { font-size: 11px; font-weight: 600; }
.gr-bar { height: 3px; background: var(--bg3); border-radius: 2px; margin-top: 3px; }
.gr-bar-fill { height: 100%; border-radius: 2px; transition: width .3s; }
.gr-threat { color: var(--text2); font-size: 11px; max-width: 140px; }
/* Events */
.gr-event {
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.03);
}
.gr-event:hover { background: none; }
.gr-ev-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.gr-ev-sev { font: 700 11px var(--font); text-transform: uppercase; }
.gr-ev-time { font: 400 11px var(--font); color: var(--text2); }
.gr-ev-title { font: 600 13px var(--font); color: var(--text); margin-bottom: 3px; }
.gr-ev-desc { font: 400 12px var(--font); color: var(--text); line-height: 1.35; margin-bottom: 4px; opacity: .85; }
.gr-ev-assets { display: flex; gap: 4px; }
.gr-ev-asset {
  padding: 1px 6px; border-radius: 3px; font: 600 9px var(--font);
  color: var(--text2); background: var(--bg3);
}
.gr-impact-row { cursor: pointer; }
.gr-empty { padding: 30px 12px; text-align: center; font: 400 12px var(--font); color: var(--text3); }
/* Light theme */
[data-theme="light"] .gr-tab { border-color: rgba(0,0,0,.12); }
[data-theme="light"] .gr-tab:hover { border-color: rgba(0,0,0,.25); }
[data-theme="light"] .gr-tab.active { background: rgba(59,130,246,.06); }
[data-theme="light"] .gr-map-area { background: #fff; }
[data-theme="light"] .gr-tooltip { color: rgba(0,0,0,.85); background: #fff; }
/* gr-refresh removed */
[data-theme="light"] .gr-table tr:hover td { background: none; }
[data-theme="light"] .gr-event:hover { background: none; }
[data-theme="light"] .gr-ev-asset { background: rgba(0,0,0,.05); }

/* ════════════════════════════════════════════════════════════
   i18n LANGUAGE SELECTOR
════════════════════════════════════════════════════════════ */
.i18n-sel { position: relative; flex-shrink: 0; }
.i18n-btn {
  height: 26px; padding: 0 8px; border: 1px solid var(--border); border-radius: 5px;
  background: transparent; color: var(--text2); font: 700 10px var(--font);
  cursor: pointer; transition: all .15s; letter-spacing: .5px;
}
.i18n-btn:hover { border-color: var(--accent); color: var(--text); }
.i18n-sel.open .i18n-btn { border-color: var(--accent); color: var(--accent); }
.i18n-menu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  min-width: 140px; z-index: 100; overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.i18n-sel.open .i18n-menu { display: block; }
.i18n-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer; transition: background .1s;
  font: 400 12px var(--font); color: var(--text);
}
.i18n-item:hover { background: var(--bg3); }
.i18n-item.active { color: var(--accent); }
.i18n-flag { font: 700 10px var(--font); width: 22px; color: var(--text2); }
.i18n-item.active .i18n-flag { color: var(--accent); }
/* Light theme */
[data-theme="light"] .i18n-menu { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
[data-theme="light"] .i18n-item:hover { background: rgba(0,0,0,.04); }

/* ════════════════════════════════════════════════════════════
   AI ASSISTANT MODEL SELECTOR
════════════════════════════════════════════════════════════ */
.ai-model-sel {
  display: flex; gap: 3px; margin-left: auto;
}
.ai-model-btn {
  width: 28px; height: 22px; border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--text3); font: 700 9px var(--font);
  cursor: pointer; transition: all .15s; display: flex; align-items: center;
  justify-content: center;
}
.ai-model-btn:hover { border-color: var(--mc); color: var(--mc); background: color-mix(in srgb, var(--mc) 8%, transparent); }
.ai-model-btn.active { border-color: var(--mc); color: #fff; background: var(--mc); }

/* ════════════════════════════════════════════════════════════
   PREDICTION MARKETS WIDGET
════════════════════════════════════════════════════════════ */
.pm-wrap {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
.pm-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.pm-header::-webkit-scrollbar { display: none; }
.pm-cats { display: flex; gap: 3px; flex-shrink: 0; }
.pm-cat {
  height: 22px; padding: 0 9px; border: none; border-radius: 4px;
  font: 600 10px var(--font); cursor: pointer;
  color: var(--text2); background: var(--bg3); transition: all .1s;
  white-space: nowrap;
}
.pm-cat:hover { background: rgba(255,255,255,.1); color: var(--text); }
.pm-cat.active { background: var(--accent); color: #fff; }
.pm-sort { margin-left: auto; flex-shrink: 0; }
.pm-sort-sel {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg2); color: var(--text2); font: 500 10px var(--font);
  cursor: pointer; outline: none;
}
/* Cards */
.pm-cards {
  flex: 1; overflow-y: auto; padding: 4px 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.pm-cards::-webkit-scrollbar { width: 4px; }
.pm-cards::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.pm-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 6px;
  transition: border-color .15s;
}
.pm-card:hover { border-color: var(--accent); }
.pm-card-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.pm-card-img {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  object-fit: cover; background: var(--bg3);
}
.pm-card-title {
  font: 600 12px var(--font); color: var(--text);
  line-height: 1.35; flex: 1;
}
/* Outcomes */
.pm-card-outcomes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pm-outcome { display: flex; align-items: center; gap: 6px; }
.pm-outcome-label { font: 500 10px var(--font); color: var(--text2); width: 28px; flex-shrink: 0; }
.pm-outcome-bar { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.pm-outcome-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.pm-outcome-pct { font: 700 11px var(--font); width: 32px; text-align: right; flex-shrink: 0; }
/* Footer */
.pm-card-footer {
  display: flex; align-items: center; gap: 8px;
  font: 400 10px var(--font); color: var(--text3);
}
.pm-vol { font-weight: 600; color: var(--text2); }
.pm-spark { flex-shrink: 0; }
.pm-end { margin-left: auto; }
.pm-loading {
  padding: 30px 12px; text-align: center;
  font: 400 12px var(--font); color: var(--text3);
}
/* Light theme */
[data-theme="light"] .pm-card { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .pm-card:hover { border-color: var(--accent); }
[data-theme="light"] .pm-cat { background: rgba(0,0,0,.05); }
[data-theme="light"] .pm-cat:hover { background: rgba(0,0,0,.08); }
[data-theme="light"] .pm-sort-sel { background: #fff; }

/* ════════════════════════════════════════════════════════════
   ORDERBOOK HEATMAP WIDGET
════════════════════════════════════════════════════════════ */
.obh-wrap {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: #080a0f;
}
.obh-info {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.obh-sym {
  font: 700 12px var(--font); color: var(--text); cursor: pointer;
}
.obh-sym:hover { color: var(--accent); }
.obh-price { font: 600 12px var(--font); color: var(--text); }
.obh-spread { font: 400 10px var(--font); color: var(--text3); margin-left: auto; }
.obh-canvas { flex: 1; display: block; }
.obh-legend {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; font: 400 9px var(--font); color: var(--text3);
}
.obh-leg-grad {
  flex: 1; max-width: 80px; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, rgba(30,60,120,.3), #0a5530, #16c784, #eab308, #ea3943);
}
.obh-leg-low { flex-shrink: 0; }
.obh-leg-high { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   MICROSTRUCTURE WIDGET
════════════════════════════════════════════════════════════ */
.ms-wrap {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
.ms-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.ms-sym { font: 700 12px var(--font); color: var(--text); cursor: pointer; }
.ms-sym:hover { color: var(--accent); }
.ms-metrics { display: flex; gap: 12px; margin-left: auto; }
.ms-metric { display: flex; flex-direction: column; align-items: flex-end; }
.ms-metric-label { font: 500 8px var(--font); color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.ms-metric-val { font: 700 12px var(--font); }
.ms-charts { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.ms-canvas { flex: 1; display: block; width: 100%; min-height: 0; }
.ms-footer {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-top: 1px solid var(--border);
  font: 600 10px var(--font);
}
.ms-buy-vol { color: #16c784; flex-shrink: 0; }
.ms-sell-vol { color: #ea3943; flex-shrink: 0; }
.ms-vol-bar {
  flex: 1; height: 5px; background: #ea3943; border-radius: 3px;
  overflow: hidden;
}
.ms-vol-fill {
  height: 100%; background: #16c784; border-radius: 3px;
  transition: width .3s;
}

/* ════════════════════════════════════════════════════════════
   LIQUIDATION FEED WIDGET
════════════════════════════════════════════════════════════ */
.liq-wrap {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
.liq-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.liq-stats { display: flex; gap: 14px; flex: 1; }
.liq-stat { display: flex; flex-direction: column; }
.liq-stat-label { font: 500 8px var(--font); color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.liq-stat-val { font: 700 12px var(--font); color: var(--text); }
.liq-stat-val.liq-long { color: #ea3943; }
.liq-stat-val.liq-short { color: #16c784; }
.liq-sound-btn {
  border: none; background: var(--bg3); width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.liq-bar-wrap { flex-shrink: 0; padding: 4px 10px; }
.liq-bar { height: 5px; background: #16c784; border-radius: 3px; overflow: hidden; }
.liq-bar-long { height: 100%; background: #ea3943; transition: width .3s; }
/* Feed */
.liq-feed {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.liq-feed::-webkit-scrollbar { width: 4px; }
.liq-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.liq-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; font: 400 11px var(--font);
  border-bottom: 1px solid rgba(255,255,255,.02);
  opacity: 0; transition: opacity .2s;
}
.liq-item.liq-flash { opacity: 1; }
.liq-item.liq-large { background: rgba(234,185,8,.04); }
.liq-item.liq-whale {
  background: rgba(234,185,8,.08);
  border-left: 2px solid #eab308;
}
.liq-item-time { color: var(--text3); font-size: 10px; width: 56px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.liq-item-side { font: 700 9px var(--font); width: 50px; flex-shrink: 0; text-transform: uppercase; }
.liq-item-side.liq-long { color: #ea3943; }
.liq-item-side.liq-short { color: #16c784; }
.liq-item-sym { color: var(--text); font-weight: 600; width: 40px; flex-shrink: 0; }
.liq-item-price { color: var(--text2); flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
.liq-item-val { font-weight: 700; width: 60px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.liq-item-val.liq-long { color: #ea3943; }
.liq-item-val.liq-short { color: #16c784; }
/* Light theme */
[data-theme="light"] .liq-item.liq-large { background: rgba(234,185,8,.06); }
[data-theme="light"] .liq-item.liq-whale { background: rgba(234,185,8,.1); }

/* ════════════════════════════════════════════════════════════
   FUNDING RATE MONITOR WIDGET
════════════════════════════════════════════════════════════ */
.fr-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.fr-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.fr-tabs { display: flex; gap: 2px; }
.fr-tab {
  height: 22px; padding: 0 9px; border: none; border-radius: 4px;
  font: 600 10px var(--font); cursor: pointer;
  color: var(--text2); background: var(--bg3); transition: all .1s;
}
.fr-tab:hover { background: rgba(255,255,255,.1); color: var(--text); }
.fr-tab.active { background: var(--accent); color: #fff; }
.fr-sort { margin-left: auto; }
.fr-sort-sel {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg2); color: var(--text2); font: 500 10px var(--font);
  cursor: pointer; outline: none;
}
.fr-content {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.fr-content::-webkit-scrollbar { width: 4px; }
.fr-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.fr-table { width: 100%; border-collapse: collapse; font: 400 11px var(--font); }
.fr-table th {
  text-align: left; padding: 5px 8px; font-weight: 600; color: var(--text3);
  font-size: 9px; text-transform: uppercase; border-bottom: 1px solid var(--border);
  background: var(--bg2); position: sticky; top: 0; z-index: 1;
}
.fr-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.02); }
.fr-row { cursor: pointer; transition: background .1s; }
.fr-row:hover td { background: var(--bg3); }
.fr-pair { color: var(--text3); font-weight: 400; font-size: 10px; }
.fr-rate-bar { height: 3px; background: var(--bg3); border-radius: 2px; margin-top: 2px; }
.fr-rate-fill { height: 100%; border-radius: 2px; }
.fr-countdown { color: var(--text3); font-size: 10px; font-variant-numeric: tabular-nums; }
.fr-loading { padding: 30px 12px; text-align: center; font: 400 12px var(--font); color: var(--text3); }
/* History cards */
.fr-history-note { padding: 10px; font: 500 11px var(--font); color: var(--text3); }
.fr-hist-card {
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.03);
}
.fr-hist-head { display: flex; justify-content: space-between; align-items: center; }
.fr-hist-detail { display: flex; justify-content: space-between; font: 400 10px var(--font); color: var(--text3); margin: 4px 0; }
.fr-hist-bar { height: 4px; background: var(--bg3); border-radius: 2px; }
/* Extremes */
.fr-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.fr-sum-item { display: flex; flex-direction: column; }
.fr-sum-label { font: 500 9px var(--font); color: var(--text3); text-transform: uppercase; }
.fr-sum-val { font: 700 14px var(--font); }
.fr-ext-section { padding: 8px 12px; }
.fr-ext-title { font: 600 11px var(--font); margin-bottom: 6px; }
.fr-ext-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  font: 400 11px var(--font); color: var(--text);
}

/* ════════════════════════════════════════════════════════════
   DERIVATIVES DASHBOARD WIDGET
════════════════════════════════════════════════════════════ */
.dv-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; overflow-y: auto; }
.dv-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.dv-sym { font: 700 13px var(--font); color: var(--text); cursor: pointer; }
.dv-sym:hover { color: var(--accent); }
.dv-period { display: flex; gap: 2px; margin-left: auto; }
.dv-pbtn {
  height: 20px; padding: 0 7px; border: none; border-radius: 3px;
  font: 600 9px var(--font); cursor: pointer;
  color: var(--text3); background: var(--bg3); transition: all .1s;
}
.dv-pbtn:hover { color: var(--text); }
.dv-pbtn.active { background: var(--accent); color: #fff; }
.dv-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 8px 10px;
}
.dv-card {
  padding: 8px 10px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px;
}
.dv-card-label { display: block; font: 500 9px var(--font); color: var(--text3); text-transform: uppercase; letter-spacing: .3px; }
.dv-card-val { display: block; font: 700 16px var(--font); margin: 2px 0; }
.dv-card-sub { font: 400 10px var(--font); color: var(--text3); }
.dv-ls-bar { height: 4px; background: #ea3943; border-radius: 2px; overflow: hidden; margin-top: 4px; }
.dv-ls-fill { height: 100%; background: #16c784; border-radius: 2px; transition: width .3s; }
.dv-chart-label { padding: 6px 10px 2px; font: 600 10px var(--font); color: var(--text3); text-transform: uppercase; }
.dv-chart { display: block; width: calc(100% - 8px); margin: 0 4px; }
[data-theme="light"] .dv-card { background: #fff; }

/* ════════════════════════════════════════════════════════════
   BOLLINGER SQUEEZE SCANNER
════════════════════════════════════════════════════════════ */
.bbs-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.bbs-header {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.bbs-title { font: 700 13px var(--font); color: var(--text); }
.bbs-tf { display: flex; gap: 3px; }
.bbs-tfbtn {
  min-width: 44px; height: 28px; padding: 0 10px; border: none; border-radius: 5px;
  font: 600 11px var(--font); cursor: pointer;
  color: var(--text3); background: var(--bg3); transition: all .1s;
}
.bbs-tfbtn:hover { color: var(--text); background: rgba(255,255,255,.08); }
.bbs-tfbtn.active { background: var(--accent); color: #fff; }
.bbs-legend {
  flex-shrink: 0; display: flex; gap: 14px; padding: 6px 12px;
  font: 500 11px var(--font); color: var(--text3);
  border-bottom: 1px solid var(--border);
}
.bbs-leg-item { display: flex; align-items: center; gap: 5px; }
.bbs-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bbs-list {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.bbs-list::-webkit-scrollbar { width: 4px; }
.bbs-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.bbs-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.03);
  cursor: pointer; transition: background .1s;
  min-height: 44px;
}
.bbs-item:hover { background: var(--bg3); }
.bbs-item-left { display: flex; align-items: center; gap: 10px; min-width: 80px; }
.bbs-item-sym { font: 700 13px var(--font); color: var(--text); }
.bbs-item-status { font: 700 9px var(--font); text-transform: uppercase; letter-spacing: .5px; }
.bbs-item-mid { flex: 1; display: flex; align-items: center; gap: 8px; }
.bbs-intensity-bar { flex: 1; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.bbs-intensity-fill { height: 100%; border-radius: 3px; transition: width .3s; min-width: 2px; }
.bbs-item-int { font: 700 11px var(--font); color: var(--text2); width: 32px; text-align: right; }
.bbs-item-right { text-align: right; min-width: 68px; }
.bbs-item-mom { display: block; font: 600 11px var(--font); }
.bbs-item-bw { display: block; font: 400 10px var(--font); color: var(--text3); margin-top: 1px; }
.bbs-spark { flex-shrink: 0; }
.bbs-loading {
  padding: 30px 12px; text-align: center;
  font: 400 13px var(--font); color: var(--text3);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bbs-spinner {
  width: 24px; height: 24px; border: 2px solid var(--bg3);
  border-top-color: var(--accent); border-radius: 50%;
  animation: bbs-spin .8s linear infinite;
}
@keyframes bbs-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   INSTRUMENT OVERVIEW WIDGET
════════════════════════════════════════════════════════════ */
.overview-wrap {
  height: 100%; padding: 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.ov-header {
  display: flex; align-items: baseline; gap: 6px;
}
.ov-sym { font: 700 18px var(--font); color: var(--text); }
.ov-pair { font-size: 12px; color: var(--text2); }
.ov-price-row {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.ov-price {
  font: 700 22px 'JetBrains Mono', monospace; color: var(--text);
}
.ov-change { font: 600 13px var(--font); }
.ov-change.up { color: var(--green); }
.ov-change.down { color: var(--red); }
.ov-metrics {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.ov-metric {
  background: rgba(255,255,255,.04); border-radius: 8px; padding: 10px;
  border: 1px solid rgba(255,255,255,.06);
}
.ov-label {
  font: 500 10px var(--font); color: var(--text3);
  text-transform: uppercase; letter-spacing: .3px;
  margin-bottom: 4px; display: block;
}
.ov-val {
  font: 700 13px 'JetBrains Mono', monospace; color: var(--text); display: block;
}
.ov-val.up { color: var(--green); }
.ov-val.down { color: var(--red); }
.ov-range {
  display: flex; align-items: center; gap: 8px;
}
.ov-range-label { font: 500 10px 'JetBrains Mono', monospace; color: var(--text2); white-space: nowrap; }
.ov-range-bar {
  flex: 1; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden;
}
.ov-range-fill {
  height: 100%; background: linear-gradient(90deg, var(--red), var(--green)); border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════
   ACTIVITY FEED WIDGET
════════════════════════════════════════════════════════════ */
.activity-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.activity-filters {
  flex-shrink: 0; padding: 6px 8px;
  display: flex; gap: 3px; border-bottom: 1px solid var(--border);
}
.activity-filter {
  height: 22px; padding: 0 9px; border: none; border-radius: 4px;
  font: 600 10px var(--font); cursor: pointer;
  color: var(--text2); background: var(--bg3); transition: all .1s;
}
.activity-filter:hover { background: rgba(255,255,255,.1); color: var(--text); }
.activity-filter.active { background: var(--accent); color: #fff; }
.activity-list { flex: 1; overflow-y: auto; }
.activity-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.025);
  transition: background .08s;
}
.activity-item:hover { background: rgba(255,255,255,.025); }
.activity-icon { font-size: 14px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.activity-content { flex: 1; min-width: 0; }
.activity-msg { font: 500 11px var(--font); color: var(--text); line-height: 1.4; }
.activity-time {
  font: 400 10px 'JetBrains Mono', monospace; color: var(--text3);
  margin-top: 3px;
}

/* ════════════════════════════════════════════════════════════
   NEWS & EVENTS WIDGET
════════════════════════════════════════════════════════════ */
.news-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.news-list { flex: 1; overflow-y: auto; }
.news-item {
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.03);
  cursor: pointer; transition: background .08s;
  display: flex; flex-direction: column; gap: 5px;
}
.news-item:hover { background: rgba(255,255,255,.025); }
.news-tag {
  font: 600 9px var(--font); border-radius: 4px;
  padding: 2px 7px; letter-spacing: .3px;
  align-self: flex-start;
}
.news-title {
  font: 500 12px var(--font); color: var(--text); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-time { font: 400 10px var(--font); color: var(--text3); }

/* ════════════════════════════════════════════════════════════
   SYMBOL PICKER v2
════════════════════════════════════════════════════════════ */
.sp2-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
.sp2-overlay:not(.open) { pointer-events: none; opacity: 0; }
.sp2-dialog {
  background: var(--bg); border-radius: 12px;
  width: 520px; max-width: 95vw; max-height: 80vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
@media (max-width: 768px) {
  .sp2-overlay { align-items: flex-end; }
  .sp2-dialog {
    width: 100%; max-width: 100%; max-height: 90dvh;
    border-radius: 16px 16px 0 0;
  }
}
.sp2-head {
  display: flex; align-items: center; padding: 10px 16px 6px;
  border-bottom: 1px solid var(--border);
}
.sp2-head-title { flex: 1; font: 600 15px var(--font); color: var(--text); }
.sp2-close {
  border: none; background: none; color: var(--text3);
  font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1;
}
/* sp2-chips removed — replaced by exchange dropdown */
.sp2-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-bottom: 1px solid var(--border);
}
.sp2-search {
  flex: 1; border: none; background: none; outline: none;
  font: 400 15px var(--font); color: var(--text);
}
.sp2-search::placeholder { color: var(--text3); }
.sp2-filters {
  display: flex; gap: 8px; padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}
.sp2-filter-select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg2); color: var(--text); font: 500 12px var(--font);
  cursor: pointer; outline: none;
  padding-right: 8px;
}
/* Custom exchange dropdown */
.sp2-exdd { position: relative; flex: 1; min-width: 120px; }
.sp2-exdd-sel {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg2); color: var(--text); font: 500 12px var(--font);
  cursor: pointer; user-select: none; transition: border-color .15s;
}
.sp2-exdd.open .sp2-exdd-sel { border-color: var(--accent, #3b82f6); }
.sp2-exdd-arrow { font-size: 9px; color: var(--text3); transition: transform .15s; }
.sp2-exdd.open .sp2-exdd-arrow { transform: rotate(180deg); }
.sp2-exdd-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  max-height: 220px; overflow-y: auto; z-index: 20;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sp2-exdd.open .sp2-exdd-menu { display: block; }
.sp2-exdd-menu::-webkit-scrollbar { width: 4px; }
.sp2-exdd-menu::-webkit-scrollbar-track { background: transparent; }
.sp2-exdd-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.sp2-exdd-menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
.sp2-exdd-item {
  padding: 8px 12px; font: 500 12px var(--font); color: var(--text);
  cursor: pointer; transition: background .1s;
}
.sp2-exdd-item:first-child { border-radius: 7px 7px 0 0; }
.sp2-exdd-item:last-child { border-radius: 0 0 7px 7px; }
.sp2-exdd-item:hover { background: var(--bg3); }
.sp2-exdd-item.active { color: var(--accent, #3b82f6); background: rgba(59,130,246,.08); }
.sp2-list {
  flex: 1; overflow-y: auto; min-height: 200px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sp2-list::-webkit-scrollbar { width: 4px; }
.sp2-list::-webkit-scrollbar-track { background: transparent; }
.sp2-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.sp2-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
.sp2-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .1s;
}
.sp2-row:hover { background: var(--bg3); }
.sp2-row-icon {
  width: 28px; height: 28px; border-radius: 50%;
  flex-shrink: 0; pointer-events: none;
}
.sp2-icon-text {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg3); color: var(--text2); font: 700 10px var(--font);
  flex-shrink: 0;
}
.sp2-row-info { flex: 1; min-width: 0; }
.sp2-row-sym { font: 600 13px var(--font); color: var(--text); }
.sp2-row-desc { font: 400 11px var(--font); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp2-row-right { text-align: right; flex-shrink: 0; }
.sp2-row-exchange { font: 500 11px var(--font); color: var(--text2); }
.sp2-row-type { font: 400 10px var(--font); color: var(--text2); }
.sp2-row-add {
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: transparent; color: var(--text3); font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sp2-row-add:hover { background: var(--bg3); color: var(--text); }
.sp2-empty {
  padding: 40px 16px; text-align: center;
  font: 400 13px var(--font); color: var(--text3);
}
.sp2-coming { opacity: .5; pointer-events: none; }

/* ════════════════════════════════════════════════════════════
   CHART TYPE DROPDOWN — extended items
════════════════════════════════════════════════════════════ */
.cw-ct-icon { display: flex; align-items: center; width: 20px; height: 20px; flex-shrink: 0; }
.cw-ct-icon svg { width: 16px; height: 16px; }
.cw-ct-menu { min-width: 200px; max-height: 380px; overflow-y: auto; }
.cw-ct-menu .cw-dd-item { display: flex; align-items: center; gap: 8px; }
.cw-ct-item-icon { display: flex; align-items: center; width: 20px; flex-shrink: 0; }
.cw-ct-item-icon svg { width: 18px; height: 18px; }
.cw-dd-item-soon { opacity: .4; cursor: default !important; }
.cw-dd-item-soon:hover { background: transparent !important; color: var(--text2) !important; }
.cw-ct-badge {
  font-size: 8px; padding: 1px 4px; border-radius: 3px;
  background: rgba(255,255,255,.06); color: var(--text3);
  margin-left: auto; flex-shrink: 0;
}
.cw-dd-sep { height: 1px; background: rgba(255,255,255,.06); margin: 3px 0; }
/* cw-ct-menu uses .thin-scroll utility class via JS */

/* ════════════════════════════════════════════════════════════
   AI PATTERNS — cTrader Trading Room style
════════════════════════════════════════════════════════════ */
.ptr-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ptr-title {
  display: flex; align-items: center; gap: 6px;
  font: 600 11px var(--font); color: var(--text);
}
.ptr-count {
  font-size: 10px; padding: 1px 7px; border-radius: 10px;
  background: rgba(59,130,246,.15); color: var(--accent); font-weight: 700;
}
.ptr-tf-badge {
  font: 600 9px var(--font); padding: 2px 8px; border-radius: 4px;
  background: rgba(255,255,255,.06); color: var(--text2);
  text-transform: uppercase; letter-spacing: .3px;
}

/* Horizontal scrollable card strip */
.ptr-scroll {
  display: flex; gap: 8px; padding: 10px 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
/* ptr-scroll: horizontal scrollbar, keep height override */
.ptr-scroll { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; }
.ptr-scroll::-webkit-scrollbar { height: 3px; }
.ptr-scroll::-webkit-scrollbar-track { background: transparent; }
.ptr-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }

.ptr-card {
  flex: 0 0 220px; scroll-snap-align: start;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  cursor: pointer; transition: all .12s;
  display: flex; flex-direction: column; gap: 6px;
}
.ptr-card:hover { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.ptr-card.ptr-selected { border-color: var(--accent); background: rgba(59,130,246,.08); }

/* Card top row: symbol + direction badge */
.ptr-card-top {
  display: flex; align-items: center; justify-content: space-between;
}
.ptr-sym {
  font: 700 12px var(--font); color: var(--text);
}
.ptr-dir {
  font: 700 9px var(--font); padding: 2px 8px; border-radius: 4px;
  letter-spacing: .5px; text-transform: uppercase;
}
.ptr-dir.ptr-buy { background: rgba(0,200,122,.15); color: #00c87a; }
.ptr-dir.ptr-sell { background: rgba(255,61,90,.15); color: #ff3d5a; }
.ptr-dir.ptr-neutral { background: rgba(26,108,245,.15); color: var(--accent); }

/* Pattern name */
.ptr-card-name {
  font: 500 11px var(--font); color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Meta row: stars + status + time */
.ptr-card-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ptr-stars {
  font-size: 10px; letter-spacing: 1px;
  color: #f5a623;
}
.ptr-status {
  font: 600 8px var(--font); padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .3px;
}
.ptr-status-active { background: rgba(0,200,122,.15); color: #00c87a; }
.ptr-status-pending { background: rgba(245,166,35,.15); color: #f5a623; }
.ptr-status-expired { background: rgba(255,255,255,.06); color: var(--text3); }
.ptr-status-new { background: rgba(59,130,246,.15); color: var(--accent); }
.ptr-time {
  font: 400 9px var(--font); color: var(--text3);
}

/* Target row */
.ptr-card-target {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 4px; border-top: 1px solid rgba(255,255,255,.04);
}
.ptr-target-label { font: 500 9px var(--font); color: var(--text3); text-transform: uppercase; }
.ptr-target-val { font: 700 11px 'JetBrains Mono', monospace; color: var(--text); }

/* AI explanation */
.ptr-card-desc {
  font: 400 10px var(--font); color: var(--text3); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.ptr-empty {
  text-align: center; padding: 20px 16px;
  font: 400 12px var(--font); color: var(--text3);
}

/* Left border accent for direction */
.ptr-card.ptr-buy { border-left: 2px solid rgba(0,200,122,.5); }
.ptr-card.ptr-sell { border-left: 2px solid rgba(255,61,90,.5); }
.ptr-card.ptr-neutral { border-left: 2px solid rgba(59,130,246,.4); }

/* TF tag on each card */
.ptr-tf-tag {
  font: 700 8px var(--font); padding: 1px 5px; border-radius: 3px;
  background: rgba(255,255,255,.06); color: var(--text3);
  text-transform: uppercase; letter-spacing: .3px;
}
.ptr-tf-tag.ptr-tf-current { background: rgba(59,130,246,.15); color: var(--accent); }

/* Switch hint for other-TF cards */
.ptr-switch-hint {
  font: 500 9px var(--font); color: var(--accent); margin-top: 2px;
  opacity: .7;
}
.ptr-card:hover .ptr-switch-hint { opacity: 1; }

/* Hide-expired toggle in header */
.ptr-expired-toggle {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font: 500 10px var(--font); color: var(--text3);
}
.ptr-expired-toggle:hover { color: var(--text2); }
.ptr-expired-toggle input {
  width: 13px; height: 13px; accent-color: var(--accent);
  cursor: pointer; margin: 0;
}

/* Loading indicator */
.ptr-loading {
  font: 400 9px var(--font); color: var(--text3);
  animation: pulse 1.5s ease infinite;
}

/* Tooltip — fixed-position, shown via JS on hover */
.ptr-tooltip {
  display: none; position: fixed; z-index: 9500;
  background: var(--bg2); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  font: 400 11px/1.5 var(--font); color: var(--text2);
  pointer-events: none; white-space: normal;
  max-width: 280px; min-width: 200px;
}
.ptr-tooltip.visible { display: block; }
.ptr-tooltip-title {
  font-weight: 600; color: var(--text); margin-bottom: 4px; font-size: 11px;
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
════════════════════════════════════════════════════════════ */
[data-theme="light"] .ws-panel {
  background: #fff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
[data-theme="light"] .panel-hd {
  background: var(--bg2);
  border-bottom-color: rgba(0,0,0,.08);
}
[data-theme="light"] .panel-hd {
  background: var(--bg);
}
[data-theme="light"] .panel-body { background: #fff; }
[data-theme="light"] #platformToolbar { background: var(--bg2); }
[data-theme="light"] #workspace { background: var(--bg); }
[data-theme="light"] #workspace::before {
  background:
    radial-gradient(ellipse 500px 400px at 5% 0%, rgba(180,200,240,.3) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 95% 0%, rgba(170,190,235,.25) 0%, transparent 70%),
    radial-gradient(ellipse 450px 350px at 50% 0%, rgba(190,210,250,.2) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 0% 100%, rgba(180,200,240,.2) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 100% 100%, rgba(170,190,230,.15) 0%, transparent 70%),
    radial-gradient(ellipse 450px 350px at 50% 100%, rgba(185,205,245,.12) 0%, transparent 65%);
}
[data-theme="light"] #workspace::after {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,.03) 39px, rgba(0,0,0,.03) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,0,0,.03) 39px, rgba(0,0,0,.03) 40px);
}
[data-theme="light"] .pt-btn:hover { background: rgba(0,0,0,.06); }
[data-theme="light"] .pt-btn.primary { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .pt-btn.primary:hover { background: rgba(0,0,0,.1); }
[data-theme="light"] .ws-tab.active { background: #fff; border-color: rgba(0,0,0,.1); color: var(--text); }
[data-theme="light"] .ws-tab:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .col-sep:hover, [data-theme="light"] .col-sep.active { background: var(--accent); }
[data-theme="light"] .row-sep:hover, [data-theme="light"] .row-sep.active { background: var(--accent); }
[data-theme="light"] .cw-dd-menu { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
[data-theme="light"] .cw-dd-item:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .cw-tf-btn { background: rgba(0,0,0,.04); color: var(--text2); }
[data-theme="light"] .cw-tf-btn:hover { background: rgba(0,0,0,.08); color: var(--text); }
[data-theme="light"] .cw-tf-unit { background: rgba(0,0,0,.04); color: var(--text3); }
[data-theme="light"] .cw-tf-unit:hover { background: rgba(0,0,0,.08); }
[data-theme="light"] .cw-tf-num { background: #fff; border-color: rgba(0,0,0,.12); }
[data-theme="light"] .cw-tf-apply { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); color: var(--text); }
[data-theme="light"] .cw-tf-apply:hover { background: rgba(0,0,0,.1); }
[data-theme="light"] .sp2-exdd-sel { background: #fff; border-color: rgba(0,0,0,.12); }
[data-theme="light"] .sp2-exdd-menu { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
[data-theme="light"] .sp2-exdd-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); }
[data-theme="light"] .sp2-exdd-menu::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.18); }
[data-theme="light"] .sp2-exdd-menu { scrollbar-color: rgba(0,0,0,.1) transparent; }
[data-theme="light"] .sp2-exdd-item:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .sp2-exdd-item.active { background: rgba(37,99,235,.06); }
[data-theme="light"] .cw-ind-dialog { background: #fff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .cw-ind-toggle { background: var(--bg3); }
[data-theme="light"] .cw-draw-modal { background: #fff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .compare-modal { background: #fff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .cmp-modal-search { background: var(--bg); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .ws-empty-btn { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .ws-empty-btn:hover { background: rgba(0,0,0,.1); }
[data-theme="light"] #widgetPicker { background: rgba(255,255,255,.8); }
[data-theme="light"] .wp-dialog { background: #fff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .wp-card { border-color: rgba(0,0,0,.08); background: rgba(0,0,0,.02); }
[data-theme="light"] .wp-card:hover { border-color: var(--accent); background: rgba(37,99,235,.05); }
[data-theme="light"] .wp-chip { background: #f0f1f4; }
[data-theme="light"] .wp-chip.active { background: var(--accent); color: #fff; }
[data-theme="light"] .pw-table th { background: var(--bg2); }
[data-theme="light"] .chart-widget .u-under { background: #fff; }
[data-theme="light"] .chart-widget .mp-subpane { background: #fff; }
[data-theme="light"] .chart-widget .mp-subpane .u-under { background: #fff; }
@media (hover: hover) { [data-theme="light"] .wl-row:hover { background: rgba(0,0,0,.03); } }
[data-theme="light"] .pa-btn { color: var(--text3); }
[data-theme="light"] .pa-btn:hover { background: rgba(0,0,0,.06); color: var(--text); }
[data-theme="light"] #ctxMenu { background: #fff; border-color: rgba(0,0,0,.1); }
[data-theme="light"] .ctx-item:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .pp-card { border-color: rgba(0,0,0,.08); background: rgba(0,0,0,.02); }
[data-theme="light"] .pp-card:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .ptr-card { border-color: rgba(0,0,0,.08); background: rgba(0,0,0,.02); }
[data-theme="light"] .ptr-card:hover { background: rgba(0,0,0,.04); }

/* ════════════════════════════════════════════════════════════
   MOBILE LAYOUT (< 768px) — single widget view + bottom sheet
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hide workspace glow on mobile, keep for light theme */
  #workspace::before { display: none; }
  [data-theme="light"] #workspace::before { display: block; }

  /* ── Toolbar — bottom bar with Widgets button ── */
  #platformToolbar {
    display: none;
  }
  /* Float undo/redo as fixed pill on mobile (outside hidden toolbar) */
  .ws-undo-redo { display: none; }
  .pt-sep { display: none; }
  #btnAddWidget { display: none; } /* moved into bottom sheet */
  .ws-tabs { display: none; } /* replaced by mobile dropdown */
  #platformToolbar > [style*="flex:1"] { display: none; }

  /* Mobile workspace dropdown */
  .mob-ws-dropdown {
    position: relative; flex-shrink: 0;
  }
  .mob-ws-current {
    display: flex; align-items: center; gap: 4px;
    height: 36px; padding: 0 12px;
    background: transparent; border: 1px solid var(--border);
    border-radius: 16px; cursor: pointer;
    font: 600 13px var(--font); color: var(--text);
    white-space: nowrap;
    max-width: 130px; overflow: hidden; text-overflow: ellipsis;
  }
  .mob-ws-current::after {
    content: ''; width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 4px solid var(--text3); margin-left: 2px;
  }
  .mob-ws-menu {
    position: fixed; top: var(--header-h); left: 10px; right: 10px;
    margin-top: 4px;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    display: none; flex-direction: column; z-index: 200;
  }
  .mob-ws-menu.open { display: flex; }
  .mob-ws-menu-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border: none; background: transparent;
    font: 500 14px var(--font); color: var(--text);
    cursor: pointer; text-align: left;
  }
  .mob-ws-menu-item:active { background: var(--bg3); }
  .mob-ws-menu-item.active { color: var(--accent); }
  .mob-ws-menu-item .mob-ws-del {
    width: 24px; height: 24px; border: none; background: transparent;
    color: var(--text3); cursor: pointer; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
  }
  .mob-ws-menu-item .mob-ws-del:active { background: rgba(247,90,90,.15); color: var(--red); }
  .mob-ws-menu-add {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 14px; border: none; background: transparent;
    border-top: 1px solid var(--border);
    font: 500 14px var(--font); color: var(--text2);
    cursor: pointer;
  }
  .mob-ws-menu-add:active { background: var(--bg3); }

  /* ── Platform wrap — toolbar at bottom ── */
  #platformWrap { display: flex; flex-direction: column; }

  /* ── Workspace — single panel view ── */
  #workspace {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; position: relative;
  }

  /* Hide all columns/panels except active */
  .ws-col { display: none !important; }
  .ws-col.mob-active {
    display: flex !important; flex-direction: column;
    min-width: 100% !important; width: 100% !important;
    flex: 1 !important;
    overflow-y: hidden;
  }
  .ws-col.mob-active .ws-panel { flex: 1; overflow: hidden; margin: 4px; border-radius: 8px; }
  .col-sep { display: none; }
  .row-sep { display: none; }

  /* ── Panels — full width, scrollable within column ── */
  .ws-panel {
    margin: 4px; border-radius: 8px;
    min-height: 300px; /* taller for mobile readability */
  }

  /* Panel header — hide for non-chart widgets on mobile */
  .ws-panel:not(:has(.chart-widget)) .panel-hd { display: none; }
  /* Chart panel header — keep but finger-friendly */
  .panel-hd { height: 40px; padding: 0 10px; gap: 4px; }
  .panel-drag-icon { display: none; }
  .panel-hd { height: 38px; padding: 0 10px; }
  .panel-sym { font-size: 14px; padding: 4px 10px; font-weight: 700; }
  .panel-title { font-size: 13px; }
  .panel-actions { display: none; }

  /* Chart dropdowns — bigger on mobile */
  .cw-tf-btn { padding: 8px 14px; font-size: 14px; min-height: 36px; }
  .cw-tf-label { font-size: 11px; }
  .cw-dd-item { padding: 12px 14px; font-size: 15px; min-height: 44px; }
  .cw-dd-menu { min-width: 180px; padding: 6px; }
  .cw-tf-menu { min-width: 260px; padding: 8px; }
  .cw-ct-menu .cw-dd-item { padding: 12px 14px; font-size: 15px; }

  /* Chart toolbar — scrollable, bigger buttons */
  .cw-hd-toolbar {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 4px 6px; gap: 4px;
  }
  .cw-hd-toolbar::-webkit-scrollbar { display: none; }
  .cw-tb-btn { height: 38px; padding: 0 12px; font-size: 13px; min-width: 38px; }
  .cw-tb-btn svg { width: 16px; height: 16px; }
  .cw-sep { height: 24px; margin: 0 3px; }

  /* Status bar — bigger touch targets */
  .cw-statusbar { height: 36px; padding: 0 8px; gap: 4px; }
  .cw-sb-btn { padding: 8px 12px; font-size: 13px; min-height: 36px; }
  .cw-sb-btn svg { width: 14px; height: 14px; }
  .cw-sb-rbtn { font-size: 12px; padding: 6px 12px; min-height: 32px; }
  .cw-sb-range { font-size: 11px; }

  /* Zoom overlay — bigger for fingers */
  .cw-chart-zoom { bottom: 40px; padding: 6px; border-radius: 12px; gap: 6px; }
  .cw-cz-btn { width: 44px; height: 44px; border-radius: 10px; }
  .cw-cz-btn svg { width: 18px; height: 18px; }

  /* OHLC */
  .cw-ohlc-legend { font-size: 13px !important; top: 4px; left: 6px; }
  .cw-ohlc-legend span { font-size: 13px !important; }

  /* Subpanes — taller for visibility */
  .mp-subpane { height: 110px !important; }
  .mp-subpane-handle { height: 10px; }
  .mp-subpane-close { width: 28px; height: 28px; font-size: 20px; right: 8px; top: 6px; }

  /* Row separator — fatter for touch */
  .row-sep { height: 8px; }
  .row-sep::before { top: -6px; bottom: -6px; }

  /* ── Modals — full screen, finger-friendly ── */
  .compare-modal, .cw-alert-dialog {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; max-height: 100vh !important;
    border-radius: 0 !important;
  }

  .cw-ind-fullmenu {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; max-height: 100vh !important;
    border-radius: 0 !important;
    top: 0 !important; left: 0 !important; transform: none !important;
  }
  .cw-ind-sidebar { width: 110px; }
  .cw-ind-cat-btn { padding: 8px 10px; font-size: 11px; }
  .cw-ind-row, .cw-ind-add-row { padding: 10px 12px; }
  .cw-ind-add-btn { padding: 6px 14px; font-size: 11px; }

  #widgetPicker {
    padding-top: 0; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  #widgetPicker.open { opacity: 1; pointer-events: auto; }
  .wp-dialog {
    width: 100% !important; max-width: 100% !important;
    height: calc(100dvh - 56px); max-height: calc(100dvh - 56px);
    border-radius: 16px 16px 0 0;
    overflow-y: auto; background: #0a0a0a;
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.16,.73,0,1);
  }
  #widgetPicker.open .wp-dialog { transform: translateY(0); }
  .wp-head { padding: 16px 18px 12px; }
  .wp-head h3 { font-size: 16px; }
  .wp-close { width: 32px; height: 32px; font-size: 18px; }
  .wp-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; padding: 8px 10px; }
  .wp-card-body { padding: 6px 8px; }
  .wp-card-name { font-size: 11px; }
  .wp-card-desc { font-size: 9px; }
  .wp-chips { padding: 8px 10px; gap: 4px; }
  .wp-chip { font-size: 11px; padding: 4px 10px; }
  .wp-search-wrap { padding: 8px 10px 0; }
  .wp-grid {
    display: flex; flex-direction: column; gap: 0; padding: 0;
  }
  .wp-item {
    flex-direction: row; align-items: center;
    padding: 14px 16px; gap: 14px;
    border-radius: 0; text-align: left;
    background: transparent; border: none;
    border-bottom: 1px solid var(--border);
  }
  .wp-item:hover { transform: none; box-shadow: none; }
  .wp-item:active { background: var(--bg3); }
  .wp-item-preview {
    width: 48px; min-width: 48px; height: 32px; aspect-ratio: auto;
    border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .wp-item-preview svg { width: 100%; height: 100%; }
  .wp-item-info { display: flex; flex-direction: column; gap: 2px; }
  .wp-item-name { padding: 0; font-size: 15px; font-weight: 600; display: block; }
  .wp-item-desc { padding: 0; font-size: 12px; color: var(--text3); display: block; }

  /* Calendar — bottom sheet */
  .cw-goto-panel {
    left: 0; right: 0; bottom: 28px; width: auto;
    border-radius: 12px 12px 0 0; padding: 12px;
  }
  .cw-cal-day { padding: 8px 0; font-size: 13px; }
  .cw-cal-nav { width: 32px; height: 32px; }

  /* Compare */
  .cmp-modal-header { padding: 14px 16px; font-size: 16px; }
  .cmp-item { padding: 12px 14px; font-size: 14px; }
  .cmp-modal-search { padding: 12px 14px; font-size: 14px; }

  /* Alert dialog */
  .cw-alert-dialog { width: 100% !important; top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important; border-radius: 0 !important; }
  .cw-alert-select, .cw-alert-price, .cw-alert-input { padding: 8px 10px; font-size: 13px; }
  .cw-alert-create { padding: 10px; font-size: 13px; }

  /* Empty workspace */
  .ws-empty h3 { font-size: 18px; }
  .ws-empty p { font-size: 13px; }
  .ws-empty-btn { padding: 10px 24px; font-size: 13px; }

  /* Auth modal */
  .auth-dialog { width: 100vw !important; max-width: 100vw !important; border-radius: 0 !important; }
  .auth-input { padding: 14px 16px; font-size: 15px; }
  .auth-submit { padding: 14px; font-size: 15px; }
  .auth-social { padding: 12px 16px; font-size: 14px; }

  /* Drag — disable on mobile */
  #dragGhost { display: none !important; }
  #dropIndicator { display: none !important; }
  .panel-drag-icon { cursor: default; }
  .panel-hd.draggable { cursor: default; }

  /* ── Mobile Widgets button (in toolbar) ── */
  .mob-widgets-btn {
    display: flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px;
    background: rgba(255,255,255,.1); color: var(--text);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    font-size: 13px; font-weight: 600;
    font-family: inherit; cursor: pointer;
    margin-left: auto; flex-shrink: 0;
  }
  [data-theme="light"] .mob-widgets-btn {
    background: rgba(0,0,0,.05); color: var(--text);
    border-color: rgba(0,0,0,.1);
  }
  .mob-widgets-btn svg { flex-shrink: 0; }

  /* ── Mobile active widget label ── */
  .mob-current-label {
    font-size: 13px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-left: 4px; flex-shrink: 1; min-width: 0;
  }

  /* ── Bottom sheet overlay ── */
  .mob-bs-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
  }
  .mob-bs-overlay.open { opacity: 1; pointer-events: auto; }

  /* ── Bottom sheet ── */
  .mob-bs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9001;
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    height: 50vh; max-height: 50vh; display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,.72,0,1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mob-bs-overlay.open .mob-bs { transform: translateY(0); }

  .mob-bs-handle {
    width: 48px; height: 5px; border-radius: 3px;
    background: var(--text2);
    margin: 12px auto 8px;
    cursor: grab;
    touch-action: none;
  }

  .mob-bs-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 16px 10px; border-bottom: 1px solid var(--border);
  }
  .mob-bs-title { font-size: 18px; font-weight: 700; color: var(--text); }
  .mob-bs-add {
    display: flex; align-items: center; gap: 5px;
    height: 36px; padding: 0 14px;
    background: rgba(255,255,255,.1); color: var(--text);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    font-size: 13px; font-weight: 600;
    font-family: inherit; cursor: pointer;
  }
  [data-theme="light"] .mob-bs-add {
    background: rgba(0,0,0,.05); color: var(--text);
    border-color: rgba(0,0,0,.1);
  }

  .mob-bs-list {
    flex: 1; overflow-y: auto; padding: 8px 12px 12px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    align-content: start;
  }

  .mob-bs-item {
    display: flex; flex-direction: column; gap: 0;
    border-radius: 12px;
    background: var(--bg); border: 1px solid var(--border);
    cursor: pointer; transition: background .15s;
    overflow: hidden;
  }
  .mob-bs-item.active { border-color: var(--accent); }

  .mob-bs-item-preview {
    width: 100%; aspect-ratio: 16/10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
  }
  .mob-bs-item-preview svg { width: 75%; height: 65%; opacity: .85; }
  .mob-bs-item-preview .mob-bs-preview-name {
    font-size: 10px; font-weight: 600; color: var(--text2);
    margin-top: 2px;
  }

  .mob-bs-item-icon { display: none; }

  .mob-bs-item-bottom {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px;
  }
  .mob-bs-item-info { flex: 1; min-width: 0; }
  .mob-bs-item-name { font-size: 13px; font-weight: 600; color: var(--text); }
  .mob-bs-item-desc { display: none; }

  .mob-bs-item-menu {
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: transparent;
    color: var(--text3); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .mob-bs-item-menu:active { background: var(--bg3); }

  .mob-bs-item-actions {
    display: flex; flex-direction: column; gap: 1px;
    border-top: 1px solid var(--border);
    background: var(--bg2);
  }
  .mob-bs-act {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; border: none; background: transparent;
    color: var(--text2); font: 500 13px var(--font);
    cursor: pointer; text-align: left;
  }
  .mob-bs-act:active { background: var(--bg3); }
  .mob-bs-act svg { flex-shrink: 0; opacity: .7; }
  .mob-bs-act-danger { color: var(--red); }

  .mob-bs-empty {
    text-align: center; padding: 32px 16px;
    color: var(--text3); font-size: 13px;
  }

  /* ── Chart bottom sheet (watchlist/heatmap tap) ── */
  .mob-chart-bs-overlay {
    position: fixed; inset: 0; z-index: 8000;
    background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
  }
  .mob-chart-bs-overlay.open { opacity: 1; pointer-events: auto; }
  .mob-chart-bs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8001;
    background: var(--bg);
    border-radius: 16px 16px 0 0;
    height: calc(100dvh - var(--header-h)); display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .6s cubic-bezier(.16,.73,0,1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mob-chart-bs-overlay.open .mob-chart-bs { transform: translateY(0); }
  .mob-chart-bs-overlay {
    transition: opacity .5s;
  }
  .mob-chart-bs-handle {
    width: 48px; height: 5px; border-radius: 3px;
    background: var(--text2);
    margin: 12px auto 8px;
    cursor: grab;
    touch-action: none;
  }
  .mob-chart-bs-head {
    display: flex; align-items: center; padding: 8px 14px;
    gap: 10px; flex-shrink: 0;
  }
  .mob-chart-bs-sym { font: 700 16px var(--font); color: var(--text); }
  .mob-chart-bs-price { font: 500 14px var(--font); color: var(--text2); }
  .mob-chart-bs-pct { font: 600 13px var(--font); }
  .mob-chart-bs-pct.up { color: var(--green); }
  .mob-chart-bs-pct.down { color: var(--red); }
  .mob-chart-bs-close {
    margin-left: auto; border: none; background: none;
    color: var(--text3); font-size: 22px; cursor: pointer; padding: 4px 8px;
  }
  .mob-chart-bs-body { flex: 1; position: relative; overflow: hidden; }
  .mob-chart-bs-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 14px; flex-shrink: 0;
  }
  .mob-cbs-dd { position: relative; }
  .mob-cbs-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: none; color: var(--text); font: 600 13px var(--font); cursor: pointer;
    white-space: nowrap;
  }
  .mob-cbs-btn:active { background: var(--bg3); }
  .mob-cbs-menu {
    display: none; flex-direction: column;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: var(--bg2); border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0; padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(0,0,0,.5);
    max-height: 60dvh; overflow-y: auto;
  }
  .mob-cbs-item {
    display: block; width: 100%; text-align: left; padding: 10px 14px;
    border: none; border-radius: 8px; background: none;
    color: var(--text2); font: 500 14px var(--font); cursor: pointer;
  }
  .mob-cbs-item:active { background: var(--bg3); }
  .mob-cbs-item.active { color: var(--accent); }

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

  /* ── Heatmap pills — bigger touch targets ── */
  .hm-pill { padding: 5px 14px; font-size: 12px; }

  /* ── Settings bottom sheet on mobile ── */
  .ws-settings-bs-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,.5);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
  }
  .ws-settings-bs-overlay.open { opacity: 1; pointer-events: auto; }
  .ws-settings-bs {
    position: relative; top: auto; right: auto;
    width: 100%; max-width: 100%;
    background: #0d1117;
    color: #e2e6f0;
    border-radius: 16px 16px 0 0;
    max-height: 85dvh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.16,.73,0,1);
    border-top: 1px solid rgba(255,255,255,.08);
  }
  [data-theme="light"] .ws-settings-bs {
    background: #fff;
    color: #1a1a2e;
    border-top-color: rgba(0,0,0,.08);
  }
  .ws-settings-bs-overlay.open .ws-settings-bs { transform: translateY(0); }
  .ws-settings-bs .ws-sl-items {
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: none; overflow-y: visible;
  }
  .ws-settings-bs .ws-sl-item {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 10px; border-radius: 16px;
    background: var(--bg3); border: 1px solid var(--border);
    font-size: 12px;
  }
  .ws-settings-bs .ws-set-head { padding: 14px 16px; }
  .ws-settings-bs .ws-set-head span { font-size: 16px; }
  .ws-settings-bs .ws-set-close { width: 36px; height: 36px; font-size: 20px; }
  .ws-settings-bs .ws-set-body { padding: 8px 16px; }
  .ws-settings-bs .ws-set-row { padding: 8px 0; }
  .ws-settings-bs .ws-set-toggles-grid {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 16px;
  }
  .ws-settings-bs .ws-set-toggles-grid .ws-set-row {
    flex-direction: row-reverse; justify-content: flex-end; gap: 6px;
    padding: 6px 12px; background: var(--bg3); border-radius: 16px;
    border: 1px solid var(--border); font-size: 12px;
  }
  .ws-settings-bs .ws-set-toggles-grid .ws-set-row:has(.ws-set-toggle.on) {
    background: rgba(59,130,246,.15); border-color: var(--accent);
  }
  .ws-settings-bs .ws-set-toggles-grid .ws-set-toggle {
    width: 24px; height: 14px; border-radius: 7px;
  }
  .ws-settings-bs .ws-set-toggles-grid .ws-set-toggle::after {
    width: 10px; height: 10px; top: 2px; left: 2px;
  }
  .ws-settings-bs .ws-set-toggles-grid .ws-set-toggle.on::after { transform: translateX(10px); }
  .ws-settings-bs .ws-set-symlist { margin-top: 8px; }
  .ws-settings-bs .ws-set-symlist > .ws-set-label { padding: 12px 0 8px; font-size: 16px; font-weight: 600; color: var(--text); }
  .ws-settings-bs .ws-set-label { font-size: 14px; }
  .ws-settings-bs .ws-set-input,
  .ws-settings-bs .ws-set-select { font-size: 14px; padding: 10px 12px; height: 42px; }
  .ws-settings-bs .ws-set-toggle { width: 48px; height: 28px; border-radius: 14px; }
  .ws-settings-bs .ws-set-toggle::after { width: 24px; height: 24px; border-radius: 50%; }
  .ws-settings-bs .ws-set-toggle.on::after { transform: translateX(20px); }
  .ws-settings-bs .ws-sl-search { font-size: 14px; padding: 10px 12px; }
  .ws-settings-bs .ws-sl-results {
    font-size: 14px;
  }
  .ws-settings-bs .ws-sl-results > * {
    padding: 12px 14px; font-size: 14px;
  }

  /* ── Watchlist — bigger text and icons ── */
  .wl-header span { font-size: 11px; }
  .wl-sym { font-size: 13px; }
  .wl-sym img { width: 20px; height: 20px; }
  .wl-price, .wl-chg, .wl-1h, .wl-vol { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   MARKET SCANNER WIDGET
════════════════════════════════════════════════════════════ */
.scanner-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; font-size: 12px; }
.scanner-builder { padding: 8px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-y: auto; max-height: 45%; }
.scanner-top-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.scanner-preset-sel, .scanner-tf { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; font: 400 11px var(--font); }
.scanner-preset-sel { flex: 1; min-width: 120px; }
.scanner-run-btn { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 5px 14px; font: 600 11px var(--font); cursor: pointer; white-space: nowrap; }
.scanner-run-btn:hover { filter: brightness(1.15); }
.scanner-run-btn:disabled { opacity: .5; cursor: default; }
.scanner-auto-lbl { font: 400 11px var(--font); color: var(--text-dim); display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.scanner-logic-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; font: 400 11px var(--font); color: var(--text-dim); }
.scanner-logic { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font: 400 11px var(--font); }
.scanner-conditions { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.scanner-cond-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.scanner-cond-row select { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; font: 400 11px var(--font); }
.scanner-cat-sel { width: 90px; flex-shrink: 0; }
.scanner-type-sel { flex: 1; min-width: 120px; }
.scanner-val { width: 60px; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; font: 400 11px var(--font); text-align: center; }
.scanner-del-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; padding: 0 4px; line-height: 1; }
.scanner-del-btn:hover { color: var(--red, #ff3d5a); }
.scanner-add-btn { background: none; border: 1px dashed var(--border); color: var(--text-dim); border-radius: 4px; padding: 4px 10px; font: 400 11px var(--font); cursor: pointer; width: 100%; }
.scanner-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.scanner-results { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.scanner-status { padding: 6px 10px; font: 400 11px var(--font); color: var(--text-dim); flex-shrink: 0; }
.scanner-tbl { width: 100%; }
.scanner-tbl th { cursor: pointer; user-select: none; white-space: nowrap; }
.scanner-tbl th.sort-asc::after { content: ' \25B2'; font-size: 9px; }
.scanner-tbl th.sort-desc::after { content: ' \25BC'; font-size: 9px; }
.scanner-tbl .spark-cell { padding: 2px 4px; }
.scanner-tbl tr[data-sym]:hover { background: rgba(255,255,255,.04); }
.scanner-save-wl-btn { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 4px; padding: 4px 8px; font: 400 11px var(--font); cursor: pointer; white-space: nowrap; }
.scanner-save-wl-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Smart Watchlist ── */
.wl-dyn-header { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.wl-dyn-icon { font-size: 14px; line-height: 1; }
.wl-dyn-name { font: 600 12px var(--font); color: var(--text); }
.wl-dyn-count { font: 400 11px var(--font); color: var(--text-dim); }
.wl-pin-btn { cursor: pointer; font-size: 10px; opacity: .3; line-height: 1; user-select: none; text-align: center; }
.wl-pin-btn:hover { opacity: .7; }
.wl-pin-btn.pinned { opacity: 1; }
.wl-row.wl-pinned { border-left: 2px solid var(--accent); }

/* ── AVWAP dropdown ── */
.cw-avwap-menu { min-width: 160px; }
.cw-dd-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ════════════════════════════════════════════════════════════
   VISUAL SCRIPTING WIDGET
════════════════════════════════════════════════════════════ */
.vs-widget { height: 100%; overflow: hidden; }
@media (max-width: 768px) {
  .vs-widget { min-height: 400px; touch-action: none; }
  .vs-widget canvas { min-height: 350px; }
  .vs-node { font-size: 12px !important; min-width: 120px !important; }
  .vs-toolbar { font-size: 13px; padding: 8px; }
}
.vs-editor { display: flex; height: 100%; position: relative; }
.vs-palette { width: 150px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; background: var(--bg); }
.vs-search { width: 100%; padding: 6px 8px; border: none; border-bottom: 1px solid var(--border); background: var(--bg2); color: var(--text); font: 400 11px var(--font); outline: none; box-sizing: border-box; }
.vs-palette-list { padding: 4px; }
.vs-pal-cat { font: 600 10px var(--font); color: var(--text-dim); padding: 6px 4px 2px; text-transform: uppercase; letter-spacing: .5px; }
.vs-pal-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; cursor: grab; font: 400 11px var(--font); color: var(--text); }
.vs-pal-item:hover { background: rgba(255,255,255,.06); }
.vs-pal-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.vs-canvas-wrap { flex: 1; position: relative; overflow: hidden; }
.vs-canvas { width: 100%; height: 100%; cursor: crosshair; display: block; }
.vs-toolbar { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; align-items: center; z-index: 2; }
.vs-tb-btn { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font: 400 10px var(--font); cursor: pointer; }
.vs-tb-btn:hover { border-color: var(--accent); color: var(--accent); }
.vs-sep { width: 1px; height: 16px; background: var(--border); }
.vs-deploy-sel { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font: 400 10px var(--font); }
.vs-props { width: 160px; flex-shrink: 0; border-left: 1px solid var(--border); padding: 8px; overflow-y: auto; background: var(--bg); }
.vs-props-title { font: 600 12px var(--font); color: var(--text); margin-bottom: 8px; }
.vs-prop-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; font: 400 10px var(--font); color: var(--text-dim); }
.vs-prop-row input { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 3px 6px; font: 400 11px var(--font); }
.vs-prop-del { width: 100%; margin-top: 8px; background: none; border: 1px solid var(--red, #ff3d5a); color: var(--red, #ff3d5a); border-radius: 4px; padding: 4px; font: 400 10px var(--font); cursor: pointer; }
.vs-prop-del:hover { background: rgba(255,61,90,.1); }

/* ════════════════════════════════════════════════════════════
   SMART CHECKLIST WIDGET
════════════════════════════════════════════════════════════ */
.cl-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.cl-header { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cl-tabs { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.cl-tab { background: none; border: none; color: var(--text-dim); font: 400 11px var(--font); padding: 3px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.cl-tab.active { background: var(--accent); color: #fff; }
.cl-tab:hover:not(.active) { background: rgba(255,255,255,.06); }
.cl-add-tab { background: none; border: 1px dashed var(--border); color: var(--text-dim); border-radius: 4px; padding: 2px 8px; font: 400 12px var(--font); cursor: pointer; flex-shrink: 0; }
.cl-add-tab:hover { border-color: var(--accent); color: var(--accent); }
.cl-sym-sel { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font: 400 11px var(--font); flex-shrink: 0; }
.cl-summary { padding: 4px 8px; flex-shrink: 0; }
.cl-sum-bar { font: 600 11px var(--font); color: var(--text-dim); padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,.04); }
.cl-sum-bar.cl-all-met { background: rgba(0,200,122,.12); color: var(--green, #00c87a); }
.cl-body { flex: 1; overflow-y: auto; padding: 4px 8px; }
.cl-row { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.03); }
.cl-row.cl-pass .cl-icon { color: var(--green, #00c87a); }
.cl-row.cl-fail .cl-icon { color: var(--red, #ff3d5a); }
.cl-row.cl-pending .cl-icon { color: var(--text-dim); }
.cl-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.cl-type-sel { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 2px 4px; font: 400 10px var(--font); flex: 1; min-width: 0; }
.cl-val { width: 45px; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 2px 4px; font: 400 10px var(--font); text-align: center; }
.cl-tf { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 2px 4px; font: 400 10px var(--font); }
.cl-cur-val { font: 400 10px var(--font); color: var(--text-dim); min-width: 40px; text-align: right; }
.cl-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 0 2px; flex-shrink: 0; }
.cl-del:hover { color: var(--red, #ff3d5a); }
.cl-add-cond { background: none; border: 1px dashed var(--border); color: var(--text-dim); border-radius: 4px; padding: 4px; margin: 6px 8px; font: 400 11px var(--font); cursor: pointer; }
.cl-add-cond:hover { border-color: var(--accent); color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   DATA FLOW WIDGET
════════════════════════════════════════════════════════════ */
.df-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.df-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; align-items: center; }
.df-filter-lbl { font: 400 10px var(--font); color: var(--text-dim); display: flex; align-items: center; gap: 2px; cursor: pointer; white-space: nowrap; }
.df-sym-filter { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; font: 400 10px var(--font); width: 70px; }
.df-feed { flex: 1; overflow-y: auto; padding: 4px 0; }
.df-event { display: flex; align-items: flex-start; gap: 6px; padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.03); }
.df-event:hover { background: rgba(255,255,255,.03); }
.df-event.df-bull { border-left: 2px solid var(--green, #00c87a); }
.df-event.df-bear { border-left: 2px solid var(--red, #ff3d5a); }
.df-event.df-neutral { border-left: 2px solid var(--text-dim); }
.df-icon { font-size: 13px; flex-shrink: 0; }
.df-time { font: 400 9px var(--font); color: var(--text-dim); flex-shrink: 0; min-width: 36px; padding-top: 1px; }
.df-text { font: 400 11px var(--font); color: var(--text); line-height: 1.3; }
.df-empty { padding: 20px; text-align: center; color: var(--text-dim); font: 400 12px var(--font); }

/* ── Whale Alerts Widget ── */
.whale-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.whale-filters { display: flex; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; align-items: center; }
.whale-coin { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px; font: 400 11px var(--font); }
.whale-min-lbl { font: 400 10px var(--font); color: var(--text-dim); display: flex; align-items: center; gap: 3px; }
.whale-min { width: 80px; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 2px 4px; font: 400 10px var(--font); }
.whale-feed { flex: 1; overflow-y: auto; }
.wh-event { display: flex; gap: 8px; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.03); }
.wh-event:hover { background: rgba(255,255,255,.03); }
.wh-event.wh-bull { border-left: 2px solid var(--green, #00c87a); }
.wh-event.wh-bear { border-left: 2px solid var(--red, #ff3d5a); }
.wh-event.wh-neutral { border-left: 2px solid var(--text-dim); }
.wh-icon { font-size: 16px; flex-shrink: 0; }
.wh-main { font: 400 11px var(--font); color: var(--text); line-height: 1.3; }
.wh-meta { font: 400 9px var(--font); color: var(--text-dim); margin-top: 2px; }
.wh-empty { padding: 20px; text-align: center; color: var(--text-dim); font: 400 12px var(--font); }

/* ── Marketplace Widget ── */
.store-wrap { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.store-header { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; }
.store-search { flex: 1; min-width: 100px; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; font: 400 11px var(--font); }
.store-cat, .store-sort { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font: 400 10px var(--font); }
.store-grid { flex: 1; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; align-content: start; }
.store-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.store-card:hover { border-color: var(--accent); }
.store-card-top { display: flex; justify-content: space-between; }
.store-card-cat { font: 600 9px var(--font); color: var(--accent); text-transform: uppercase; }
.store-card-price { font: 600 11px var(--font); color: var(--green, #00c87a); }
.store-card-name { font: 600 12px var(--font); color: var(--text); }
.store-card-desc { font: 400 10px var(--font); color: var(--text-dim); line-height: 1.3; }
.store-card-meta { font: 400 9px var(--font); color: var(--text-dim); display: flex; gap: 8px; }
.store-stars { color: var(--yellow, #f9c74f); }
.store-install-btn { background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font: 600 10px var(--font); cursor: pointer; margin-top: 4px; }
.store-install-btn:hover { filter: brightness(1.15); }
.store-install-btn:disabled { opacity: .5; }
.store-empty { grid-column: 1 / -1; padding: 20px; text-align: center; color: var(--text-dim); font: 400 12px var(--font); }

/* ── External Data Widget ── */
.extd-wrap { height: 100%; overflow-y: auto; padding: 8px; }
.extd-section { margin-bottom: 12px; }
.extd-title { font: 600 11px var(--font); color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.extd-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.04); }
.extd-name { flex: 1; font: 400 11px var(--font); color: var(--text); }
.extd-val { font: 600 11px var(--font); color: var(--accent); }
.extd-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; }
.extd-del:hover { color: var(--red); }
.extd-use { background: var(--accent); color: #fff; border: none; border-radius: 3px; padding: 2px 8px; font: 400 9px var(--font); cursor: pointer; }
.extd-add-btn { width: 100%; background: none; border: 1px dashed var(--border); color: var(--text-dim); border-radius: 4px; padding: 4px; margin-top: 6px; font: 400 11px var(--font); cursor: pointer; }
.extd-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.extd-empty { color: var(--text-dim); font: 400 11px var(--font); padding: 4px; }
.extd-form { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 6px; }
.extd-inp { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 3px 6px; font: 400 10px var(--font); width: 100%; box-sizing: border-box; }
.extd-sel { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 2px 4px; font: 400 10px var(--font); }
.extd-save-btn { background: var(--accent); color: #fff; border: none; border-radius: 3px; padding: 3px 10px; font: 400 10px var(--font); cursor: pointer; }
.extd-cancel-btn { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 3px; padding: 3px 10px; font: 400 10px var(--font); cursor: pointer; }
.extd-upload-lbl { font: 400 10px var(--font); color: var(--accent); cursor: pointer; padding: 3px 10px; border: 1px dashed var(--accent); border-radius: 3px; }

/* ════════════════════════════════════════════════════════════
   CHART SETTINGS MODAL
════════════════════════════════════════════════════════════ */
.cs-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
  animation: csOverlayIn .15s ease-out;
}
@keyframes csOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.cs-modal {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  width: 440px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: csModalIn .2s ease-out;
}
@keyframes csModalIn { from { transform: scale(.96) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.cs-header {
  display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border);
  font: 600 14px var(--font); color: var(--text);
}
.cs-header span { flex: 1; }
.cs-header-actions { display: flex; align-items: center; gap: 8px; }
.cs-reset-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text2); font: 500 11px var(--font); padding: 4px 10px; cursor: pointer;
  transition: all .15s;
}
.cs-reset-btn:hover { color: var(--red); border-color: var(--red); }
.cs-close-btn {
  background: none; border: none; color: var(--text3); font-size: 18px; cursor: pointer;
  line-height: 1; padding: 2px;
}
.cs-close-btn:hover { color: var(--red); }

.cs-tabs {
  display: flex; border-bottom: 1px solid var(--border); padding: 0 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cs-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text2); font: 500 12px var(--font); padding: 10px 14px;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.cs-tab:hover { color: var(--text); }
.cs-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.cs-body {
  flex: 1; overflow-y: auto; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 6px;
}

.cs-section-title {
  font: 600 11px var(--font); color: var(--text3); text-transform: uppercase;
  letter-spacing: .5px; margin: 8px 0 4px; padding-top: 4px;
  border-top: 1px solid var(--border);
}
.cs-section-title:first-child { border-top: none; margin-top: 0; padding-top: 0; }

.cs-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 30px;
}
.cs-label {
  font: 400 12px var(--font); color: var(--text2); flex: 1; min-width: 0;
}

/* Color picker */
.cs-color-wrap {
  display: flex; align-items: center; gap: 6px;
}
.cs-color {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; background: none;
  -webkit-appearance: none; appearance: none;
}
.cs-color::-webkit-color-swatch-wrapper { padding: 2px; }
.cs-color::-webkit-color-swatch { border-radius: 4px; border: none; }
.cs-color::-moz-color-swatch { border-radius: 4px; border: none; }
.cs-hex {
  width: 72px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 500 11px var(--font-mono, monospace);
  text-align: center;
}
.cs-hex:focus { outline: none; border-color: var(--accent); }

/* Select */
.cs-select {
  min-width: 120px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 500 12px var(--font); cursor: pointer;
}
.cs-select:focus { outline: none; border-color: var(--accent); }

/* Number input */
.cs-num {
  width: 70px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: 500 12px var(--font); text-align: center;
  -moz-appearance: textfield;
}
.cs-num::-webkit-inner-spin-button,
.cs-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cs-num:focus { outline: none; border-color: var(--accent); }

/* Slider */
.cs-slider-wrap {
  display: flex; align-items: center; gap: 8px; min-width: 140px;
}
.cs-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--bg4); border-radius: 2px; outline: none;
}
.cs-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--accent); cursor: pointer;
  border: 2px solid var(--bg2);
}
.cs-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 2px solid var(--bg2);
}
.cs-slider-val {
  font: 500 11px var(--font-mono, monospace); color: var(--text2);
  min-width: 30px; text-align: right;
}

/* Footer */
.cs-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.cs-btn-cancel {
  padding: 7px 18px; border: 1px solid var(--border); border-radius: 6px;
  background: none; color: var(--text2); font: 500 12px var(--font); cursor: pointer;
}
.cs-btn-cancel:hover { background: var(--bg3); color: var(--text); }
.cs-btn-apply {
  padding: 7px 22px; border: none; border-radius: 6px;
  background: var(--accent); color: #fff; font: 600 12px var(--font); cursor: pointer;
}
.cs-btn-apply:hover { filter: brightness(1.1); }

/* Light theme */
[data-theme="light"] .cs-modal { background: #fff; }
[data-theme="light"] .cs-hex { background: #f8f9fa; }
[data-theme="light"] .cs-num { background: #f8f9fa; }
[data-theme="light"] .cs-select { background: #f8f9fa; }

/* ── Custom color picker ── */
.cs-cpick-wrap { position: relative; }
.cs-cpick-swatch {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.cs-cpick-swatch:hover { border-color: var(--accent); }
.cs-cpick-popup {
  position: absolute; right: 0; top: 34px; z-index: 50;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; width: 220px; box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.cs-cpick-palette { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.cs-cpick-dot {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; transition: border-color .1s;
}
.cs-cpick-dot:hover { border-color: rgba(255,255,255,.4); }
.cs-cpick-dot.active { border-color: #fff; box-shadow: 0 0 0 1px var(--accent); }
.cs-cpick-recent-label { font: 500 9px var(--font); color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 2px; }
.cs-cpick-custom-row { display: flex; gap: 6px; align-items: center; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 8px; }
.cs-cpick-native {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; background: none; -webkit-appearance: none; appearance: none;
}
.cs-cpick-native::-webkit-color-swatch-wrapper { padding: 2px; }
.cs-cpick-native::-webkit-color-swatch { border-radius: 2px; border: none; }

/* ── Bottom sheet mode for chart settings ── */
.cs-bottom-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000;
  border-radius: 16px 16px 0 0; max-height: 80vh;
  width: 100%; max-width: 100%;
  animation: none;
}
.cs-tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
.cs-tabs-scroll::-webkit-scrollbar { display: none; }

/* Mobile */
@media (max-width: 768px) {
  .cs-modal:not(.cs-bottom-sheet) { width: 100%; max-width: 100%; max-height: 100vh; border-radius: 0; }
  .cs-tabs { padding: 0 6px; }
  .cs-tab { padding: 8px 10px; font-size: 11px; }
  .cs-body { padding: 10px 12px; }
  .cs-footer { padding: 10px 12px; }
  .cs-cpick-popup { right: -10px; width: 200px; }
  .cs-field-color { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════
   WORKSPACE LIBRARY MODAL
════════════════════════════════════════════════════════════ */
.wsl-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
  animation: csOverlayIn .15s ease-out;
}
.wsl-modal {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  width: 680px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: csModalIn .2s ease-out;
}
.wsl-header {
  display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border);
  font: 600 15px var(--font); color: var(--text);
}
.wsl-header span { flex: 1; }
.wsl-header-actions { display: flex; align-items: center; gap: 8px; }
.wsl-save-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  font: 500 11px var(--font); padding: 5px 12px; cursor: pointer;
}
.wsl-save-btn:hover { filter: brightness(1.1); }
.wsl-close {
  background: none; border: none; color: var(--text3); font-size: 20px; cursor: pointer;
  line-height: 1;
}
.wsl-close:hover { color: var(--red); }
.wsl-body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
}
.wsl-section-title {
  font: 600 11px var(--font); color: var(--text3); text-transform: uppercase;
  letter-spacing: .5px; margin: 12px 0 8px;
}
.wsl-section-title:first-child { margin-top: 0; }
.wsl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.wsl-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; overflow: hidden; transition: all .15s; position: relative;
}
.wsl-card:hover { border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.wsl-card-preview {
  height: 80px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border);
}
.wsl-card-icon { font-size: 32px; }
.wsl-card-info { padding: 10px 12px; }
.wsl-card-name { font: 600 13px var(--font); color: var(--text); margin-bottom: 4px; }
.wsl-card-desc { font: 400 11px var(--font); color: var(--text3); line-height: 1.4; }
.wsl-card-actions {
  position: absolute; top: 6px; right: 6px; display: flex; gap: 4px;
  opacity: 0; transition: opacity .15s;
}
.wsl-card:hover .wsl-card-actions { opacity: 1; }
.wsl-share-btn, .wsl-del-btn {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer; color: var(--text2);
}
.wsl-del-btn:hover { color: var(--red); border-color: var(--red); }
.wsl-share-btn:hover { color: var(--accent); border-color: var(--accent); }

[data-theme="light"] .wsl-modal { background: #fff; }
[data-theme="light"] .wsl-card { background: #f8f9fa; }

@media (max-width: 768px) {
  .wsl-overlay { align-items: flex-end; }
  .wsl-modal {
    width: 100%; max-width: 100%; max-height: calc(100dvh - 56px);
    border-radius: 16px 16px 0 0; animation: none;
  }
  .wsl-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wsl-card-preview { height: 60px; }
  .wsl-card-icon { font-size: 24px; }
  .wsl-card-info { padding: 8px; }
  .wsl-card-name { font-size: 12px; }
  .wsl-card-desc { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════
   PD-131: MOBILE SIZE OVERRIDES — min 44px touch, 14px text
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Global text size bump ── */
  .panel-body { font-size: 14px; }

  /* ── Watchlist ── */
  .wl-header, .wl-row { padding: 10px 12px; min-height: 44px; }
  .wl-header { font-size: 10px; }
  .wl-row { font-size: 14px; }
  .wl-sym { font-size: 14px; }
  .wl-price { font-size: 14px; }
  .wl-chg { font-size: 13px; }

  /* ── Market Movers ── */
  .movers-tab { height: 32px; padding: 0 14px; font-size: 12px; min-width: 44px; }
  .pw-table { font-size: 13px; }
  .pw-table td, .pw-table th { padding: 10px 8px; }

  /* ── News ── */
  .nw-fbtn { height: 32px; padding: 0 12px; font-size: 12px; min-width: 44px; }
  .nw-title { font-size: 14px; }
  .nw-desc { font-size: 13px; }
  .nw-time { font-size: 12px; }
  .nw-impact { font-size: 11px; }

  /* ── Fear & Greed ── */
  .fng-value { font-size: 32px; }
  .fng-label { font-size: 13px; }
  .fng-tab { height: 32px; padding: 0 14px; font-size: 12px; min-width: 44px; }

  /* ── Sentiment ── */
  .ns-scores { font-size: 13px; }
  .ns-chip { height: 30px; font-size: 12px; padding: 0 12px; }
  .ns-item { padding: 12px; min-height: 44px; }
  .ns-item-title { font-size: 14px; }
  .ns-item-desc { font-size: 13px; }
  .ns-item-sent { font-size: 12px; }
  .ns-item-time { font-size: 11px; }

  /* ── GeoRisk ── */
  .gr-tab { height: 34px; font-size: 13px; }
  .gr-table { font-size: 13px; }
  .gr-table td { padding: 10px; }
  .gr-table th { font-size: 10px; padding: 8px 10px; }
  .gr-ev-title { font-size: 15px; }
  .gr-ev-desc { font-size: 13px; }
  .gr-ev-sev { font-size: 12px; }

  /* ── Predictions ── */
  .pm-cat { height: 30px; padding: 0 12px; font-size: 12px; min-width: 44px; }
  .pm-card-title { font-size: 14px; }
  .pm-outcome-pct { font-size: 13px; }
  .pm-vol { font-size: 12px; }

  /* ── Liquidations ── */
  .liq-item { padding: 8px 12px; min-height: 44px; font-size: 13px; }
  .liq-stat-val { font-size: 14px; }

  /* ── Funding Rate ── */
  .fr-tab { height: 32px; font-size: 12px; min-width: 44px; }
  .fr-table { font-size: 13px; }
  .fr-table td { padding: 10px 8px; }

  /* ── Derivatives ── */
  .dv-pbtn { height: 28px; padding: 0 10px; font-size: 11px; min-width: 44px; }
  .dv-card-val { font-size: 18px; }
  .dv-card-label { font-size: 10px; }

  /* ── BB Squeeze ── */
  .bbs-item { padding: 12px; min-height: 48px; }
  .bbs-item-sym { font-size: 15px; }
  .bbs-item-status { font-size: 10px; }
  .bbs-item-mom { font-size: 13px; }
  .bbs-item-bw { font-size: 11px; }

  /* ── Microstructure ── */
  .ms-metric-val { font-size: 14px; }
  .ms-metric-label { font-size: 9px; }

  /* ── OB Heatmap ── */
  .obh-sym { font-size: 14px; }
  .obh-price { font-size: 14px; }

  /* ── Symbol picker ── */
  .sp2-row { padding: 12px 16px; min-height: 48px; }
  .sp2-row-sym { font-size: 15px; }
  .sp2-row-desc { font-size: 12px; }
  .sp2-search { font-size: 16px; } /* prevents iOS zoom */

  /* ── Bottom sheet settings ── */
  .ws-settings-bs .ws-set-label { font-size: 15px; }
  .ws-settings-bs .ws-set-tfpill { height: 40px; font-size: 14px; min-width: 48px; }

  /* ── Global button minimum touch target ── */
  .pa-btn { min-width: 36px; min-height: 36px; }
}