:root{
  --bg:#0f141b; --panel:#141a22; --fg:#d7dee9; --border:#2a3240;
  --muted:#8c96a5; --chip:#263244; --chip-on:#35537e;
}
body.theme-light{
  --bg:#f5f5f5; --panel:#ffffff; --fg:#1a1a1a; --border:#d0d0d0;
  --muted:#666666; --chip:#e8e8e8; --chip-on:#d0d0d0;
}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,Segoe UI,Roboto,Arial;overflow:hidden}

/* Welcome Screen - COMPLETELY covers everything */
.welcome-screen{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:var(--bg);
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.welcome-screen.hidden{display:none !important}
.confetti-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}
.welcome-content{text-align:center;position:relative;z-index:100}
.loading-spinner{width:80px;height:80px;border:6px solid var(--border);border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 32px}
@keyframes spin{to{transform:rotate(360deg)}}
.welcome-content h1{font-size:64px;letter-spacing:6px;margin:0 0 24px 0;color:var(--fg);font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.welcome-content p{font-size:18px;color:var(--muted);margin:0 0 60px 0;font-weight:500}
.start-button{
  background:var(--chip);
  border:3px solid var(--border);
  color:var(--muted);
  font-size:28px;
  font-weight:700;
  letter-spacing:4px;
  padding:24px 100px;
  border-radius:16px;
  cursor:not-allowed;
  transition:all 0.3s ease;
  opacity:0.4;
  display:inline-block;
}
.start-button:not(:disabled){
  background:#3b82f6;
  border-color:#3b82f6;
  color:#fff;
  cursor:pointer;
  opacity:1;
  animation:pulse 2s ease-in-out infinite;
  box-shadow:0 4px 20px rgba(59,130,246,0.4);
}
.start-button:not(:disabled):hover{
  background:#2563eb;
  border-color:#2563eb;
  transform:scale(1.15);
  box-shadow:0 8px 40px rgba(59,130,246,0.7);
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.7),0 4px 20px rgba(59,130,246,0.4)}
  50%{box-shadow:0 0 0 35px rgba(59,130,246,0),0 4px 20px rgba(59,130,246,0.4)}
}

/* Main App - Hidden by default */
.main-app{display:block;width:100%;height:100%}
.main-app.hidden{display:none !important;visibility:hidden !important}

.metrics-bar{display:flex;align-items:center;gap:24px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)}
.metric{display:flex;flex-direction:column;gap:2px}
.metric-label{font-size:11px;color:var(--muted);font-weight:500}
.metric-value{font-size:18px;font-weight:700;color:var(--fg)}
.metric-value.negative{color:#ef4444}
.metric-value.positive{color:#22c55e}
.strategy-visual{display:flex;align-items:center;justify-content:center;min-height:40px}
.strategy-icon{font-size:13px;color:var(--muted);font-weight:600}
.strategy-box{position:relative;width:48px;height:48px;border:2px solid var(--border);border-radius:8px;overflow:hidden;display:flex}
.strategy-box .half{flex:1;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;text-transform:uppercase;color:#fff;position:relative}
.strategy-box .half.left{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.strategy-box .half.right{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.strategy-box .arrow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,0.5);z-index:10;pointer-events:none}
.strategy-box .label{font-size:9px;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:1px}
.theme-light{--bg:#0f141b;--panel:#141a22;--fg:#d7dee9;--border:#2a3240;--muted:#8c96a5;--chip:#263244;--chip-on:#35537e;}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:20;position:relative}
.left,.right{display:flex;align-items:center;gap:6px}
.center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center}
.lock-btn{font-size:16px;font-weight:600;padding:10px 24px;background:var(--chip);border:2px solid var(--border);color:var(--fg);border-radius:12px;cursor:pointer;transition:all 0.2s ease}
.lock-btn.on{background:var(--chip-on);border-color:#3b82f6}
.lock-btn:hover{transform:scale(1.05);border-color:#3b82f6}
.tf-mode-dropdown{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:12px;min-width:400px;box-shadow:0 12px 32px rgba(0,0,0,0.5);z-index:100;display:none}
.tf-mode-dropdown.show{display:block}
.tf-mode-option{padding:16px 20px;border-radius:12px;cursor:pointer;transition:all 0.2s ease;border:2px solid transparent;margin-bottom:8px}
.tf-mode-option:last-child{margin-bottom:0}
.tf-mode-option:hover{background:var(--chip);border-color:var(--border);transform:translateY(-2px)}
.tf-mode-option.selected{background:var(--chip-on);border-color:#3b82f6;box-shadow:0 4px 12px rgba(59,130,246,0.2)}
.tf-mode-title{font-size:17px;font-weight:700;color:var(--fg);margin-bottom:6px;letter-spacing:0.3px}
.tf-mode-desc{font-size:13px;color:var(--muted);line-height:1.5;font-weight:400}
button{background:var(--chip);border:1px solid var(--border);color:var(--fg);border-radius:6px;padding:6px 10px;cursor:pointer}
button.on{background:var(--chip-on)}
button.small{padding:4px 8px}
.chipbtn{display:inline-flex;align-items:center;padding:6px 10px;background:var(--chip);border:1px solid var(--border);border-radius:16px;cursor:pointer}
.chipbtn.on{background:var(--chip-on)}
#tradeDirectionCall.on{background:#22c55e !important;border-color:#22c55e !important;color:#fff !important}
#tradeDirectionPut.on{background:#ef4444 !important;border-color:#ef4444 !important;color:#fff !important}
.tab{background:var(--chip);border:1px solid var(--border);border-radius:8px}
.tab.on{background:var(--chip-on)}
.hint{color:var(--muted);font-size:12px;margin-top:6px}
.error-msg{background:#dc2626;color:#fff;padding:8px 10px;border-radius:6px;margin-top:8px;font-size:13px;cursor:pointer}
.trigger-section{margin-top:10px;padding:8px 10px;background:var(--chip);border:1px solid var(--border);border-radius:6px}
.trigger-section.warning{background:#3a2e0a;border-color:#f59e0b}
.trigger-label{font-size:11px;font-weight:600;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.trigger-display{font-size:13px;padding:4px 0}
.trigger-display.warning{color:#fbbf24}

.tools{position:absolute;left:50px;top:6px;display:flex;flex-direction:column;gap:8px;z-index:10;}
.tools button{width:36px;height:36px;border-radius:8px;background:rgba(20,26,34,.95);border:1px solid var(--border)}
.tools button.active{outline:2px solid #3b82f6}

.grid{display:grid;grid-template-rows:60vh 8px 1fr;height:calc(100vh - 48px);}
.chart-area{position:relative}
.chart{width:100%;height:100%}
.crosshair,.crosshairV{position:absolute;background:#6aa1ff;opacity:0.25;pointer-events:none;z-index:100}
.crosshair.h{left:0;right:0;height:1px;top:-1000px}
.crosshair.v,.crosshairV.v{top:0;bottom:0;width:1px;left:-1000px}
.watermark{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-size:28px;letter-spacing:2px;color:var(--muted);pointer-events:none;opacity:.18}
.chart-tooltip{position:absolute;display:none;background:rgba(20,26,34,0.95);border:1px solid var(--border);border-radius:6px;padding:8px 12px;pointer-events:none;z-index:15;font-size:12px;line-height:1.6;color:var(--fg);box-shadow:0 2px 8px rgba(0,0,0,0.3);min-width:120px}
.timestamp-tooltip{position:absolute;bottom:50px;display:none;background:rgba(20,26,34,0.95);border:1px solid var(--border);border-radius:6px;padding:6px 12px;pointer-events:none;z-index:20;font-size:11px;color:var(--fg);box-shadow:0 2px 8px rgba(0,0,0,0.3);white-space:nowrap;transform:translateX(-50%)}
.hud{
  display:flex;
  align-items:center;
  gap:20px;
  font:13px/1.3 ui-monospace,Consolas,Monaco;
  color:var(--fg);
  padding:4px 12px;
  background:rgba(20,26,34,.5);
  border-radius:6px;
  border:1px solid rgba(42,50,64,0.5);
}
.hud > div {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.hud .label {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--muted);
  font-weight:600;
}
.hud .value {
  font-size:14px;
  font-weight:600;
  color:var(--fg);
}

.vsplitter{height:8px;background:var(--border);cursor:row-resize}

/* LOCKED MODE (default) - Bottom panel has scrollbar on right side */
#bottomPane{
  background:var(--panel);
  height:100%;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  display:block;
  scrollbar-width:auto;
  scrollbar-color:var(--muted) var(--bg);
}
/* Force scrollbar to always show - Webkit (Chrome/Edge) */
#bottomPane::-webkit-scrollbar{width:16px !important;display:block !important}
#bottomPane::-webkit-scrollbar-track{background:#ff0000 !important}
#bottomPane::-webkit-scrollbar-thumb{background:#00ff00 !important;border-radius:0}
#bottomPane::-webkit-scrollbar-thumb:hover{background:#0000ff !important}

.tabs-row{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--border)}
.metrics-bar{display:flex;align-items:center;gap:24px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)}
.pane{display:none;min-height:200vh}
.pane.on{display:block;min-height:200vh}

/* UNLOCKED MODE - Entire page scrolls */
body.chart-unlocked{overflow-y:auto;overflow-x:hidden}
body.chart-unlocked .grid{height:auto;min-height:calc(100vh - 48px)}
body.chart-unlocked #bottomPane{height:auto;overflow-y:visible}
body.chart-unlocked .pane{min-height:0}
body.chart-unlocked .pane.on{min-height:0}

/* Four equal columns */
.columns.four-eq{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px;padding:12px}
.col{background:transparent}

/* Card */
.card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--panel)}
.card-h{padding:10px 12px;border-bottom:1px solid var(--border);font-weight:700}
.card-b{padding:10px 12px}
.sep{border:0;border-top:1px solid var(--border);margin:10px 0}
.subcard{border:1px solid var(--border);border-radius:8px;background:transparent;margin-top:10px}
.sub-h{padding:8px 10px;border-bottom:1px solid var(--border);font-weight:600}
.sub-b{padding:8px 10px}

.pad{padding:10px}
.row{display:flex;align-items:center;gap:10px;margin:8px 0}
.row.wrap{flex-wrap:wrap}
.row.two>*{flex:1}

/* Lists and bubbles */
.list{list-style:none;margin:0;padding:0}
.list.slim li{padding:6px 8px}
.list li{padding:8px 10px;border-bottom:1px dashed var(--border);cursor:pointer}
.list li:hover{background:rgba(90,120,180,.12)}
.list.dot li{position:relative;padding-left:20px}
.list.dot li::before{content:"•";position:absolute;left:8px;color:#7aa2f7}

.bubble-list{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 2px 0;padding:0;list-style:none}
.ind-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:18px;background:var(--chip);border:1px solid var(--border);cursor:pointer;user-select:none}
.ind-item:hover{background:var(--chip-on)}
.ind-item .name{font-weight:600}
.ind-item .sub{opacity:.8;font-size:12px}

/* Cursor for indicator bubbles */
#indicatorList .ind-item, #indicatorList .ind-item * { cursor:pointer; }

/* Table and minis */
.tablewrap{overflow:auto;margin-top:8px}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid var(--border);padding:6px 8px;text-align:left}
.mini{height:220px}

.settings{position:fixed;left:50%;top:60px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);border-radius:10px;min-width:420px;z-index:20}
.settings.hidden{display:none}
.settings .header{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid var(--border)}
.muted{color:var(--muted)}
input[type="number"],input[type="datetime-local"],select{background:var(--chip);border:1px solid var(--border);color:var(--fg);padding:6px 10px;border-radius:6px;font-size:14px;width:100%}
input[type="number"]:focus,input[type="datetime-local"]:focus,select:focus{outline:none;border-color:#3b82f6}
input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}
select option{background:var(--panel);color:var(--fg);padding:6px}
select option:hover{background:var(--chip-on)}
label{font-size:13px;font-weight:500;color:var(--fg);margin-bottom:4px;display:block}
.date-range-display{font-size:13px;color:var(--muted);padding:6px 12px;background:var(--chip);border:1px solid var(--border);border-radius:6px;font-family:ui-monospace,Consolas,Monaco}
label.small{font-size:11px}

/* Aesthetic notification modal */
.sync-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.75);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.2s ease}
.sync-modal.hidden{display:none}
.sync-modal-content{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:480px;box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:slideUp 0.3s ease}
.sync-modal-title{font-size:18px;font-weight:700;margin-bottom:12px;color:var(--fg)}
.sync-modal-message{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:20px}
.sync-modal-list{background:var(--chip);border:1px solid var(--border);border-radius:6px;padding:10px 12px;margin:12px 0;font-size:13px;line-height:1.8}
.sync-modal-actions{display:flex;gap:10px;justify-content:flex-end}
.sync-modal-btn{padding:10px 20px;border-radius:6px;font-weight:600;cursor:pointer;border:1px solid var(--border);transition:all 0.2s}
.sync-modal-btn.primary{background:#3b82f6;color:#fff;border-color:#3b82f6}
.sync-modal-btn.primary:hover{background:#2563eb;border-color:#2563eb}
.sync-modal-btn.secondary{background:var(--chip);color:var(--fg)}
.sync-modal-btn.secondary:hover{background:var(--chip-on)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Pattern Matching & Selection Pool Styles */
.pool-trade-item{
  position:relative;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:all 0.2s ease;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.pool-trade-item:hover{background:rgba(90,120,180,.12)}
.pool-trade-item.grouped{
  background:rgba(140,150,165,0.08);
  opacity:0.6;
}
.pool-trade-item.grouped:hover{background:rgba(140,150,165,0.15)}
.pool-trade-info{flex:1;display:flex;gap:12px;align-items:center}
.pool-trade-time{font-size:12px;color:var(--muted);font-family:ui-monospace,Consolas,Monaco}
.pool-trade-pnl{font-weight:600;font-size:13px}
.pool-trade-pnl.positive{color:#22c55e}
.pool-trade-pnl.negative{color:#ef4444}
.pool-trade-similarity{font-size:12px;color:var(--muted)}
.pool-group-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:12px;
  background:var(--chip-on);
  color:var(--fg);
  font-size:11px;
  font-weight:700;
  margin-left:8px;
}
.pool-trade-actions{
  display:none;
  gap:4px;
  align-items:center;
}
.pool-trade-item:hover .pool-trade-actions{display:flex}
.pool-action-btn{
  padding:4px 10px;
  border-radius:6px;
  background:var(--chip);
  border:1px solid var(--border);
  color:var(--fg);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.15s;
}
.pool-action-btn:hover{background:var(--chip-on);border-color:#3b82f6}
.pool-action-btn.primary{background:#3b82f6;border-color:#3b82f6;color:#fff}
.pool-action-btn.primary:hover{background:#2563eb}
.filter-indicator-item{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:16px;
  background:var(--chip);
  border:1px solid var(--border);
  cursor:pointer;
  margin:4px;
  transition:all 0.2s;
  user-select:none;
}
.filter-indicator-item:hover{background:var(--chip-on)}
.filter-indicator-item.selected{
  background:#3b82f6;
  border-color:#3b82f6;
  color:#fff;
}
.filter-ref-trade{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background 0.15s;
}
.filter-ref-trade:hover{background:rgba(90,120,180,.12)}
.filter-ref-trade.selected{background:var(--chip-on);border-left:3px solid #3b82f6}