/* V3.0 – conditional fields + RSI indicator refactor */
:root{
  --bg:#0b1220; --panel:#121a2b; --card:#1a243b; --card-2:#10182b;
  --text:#e6ecff; --muted:#9bb0d3; --accent:#6ea8ff; --good:#36d399; --bad:#f87272;
  --chip:#0f172a; --chip-border:#22314f; --border:#22314f; --shadow:0 6px 24px rgba(0,0,0,0.28);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 70% -10%, #15213a 0%, #0b1220 55%) fixed; color:var(--text)}
.header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border); background:linear-gradient(0deg,var(--panel),#0f1830); position:sticky;top:0;z-index:10}
.badge{padding:4px 8px;border-radius:999px;background:var(--chip);border:1px solid var(--chip-border);color:var(--muted);font-size:12px}
h1{font-size:18px;margin:0;font-weight:600;letter-spacing:0.2px}
.container{max-width:1200px;margin:0 auto;padding:16px}
.controls{display:grid;grid-template-columns:1fr auto auto auto auto;gap:10px;align-items:center;margin:16px 0}
.controls .row2{grid-column:1 / -1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
input,button,select{background:var(--card-2);border:1px solid var(--border);color:var(--text);
  padding:10px 12px;border-radius:10px;font-size:14px;outline:none}
button{cursor:pointer;box-shadow:var(--shadow);transition:transform .02s ease}
button:active{transform:translateY(1px)} button.primary{background:linear-gradient(0deg,#15305c,#264e8a); border-color:#2c65b6}
button.danger{background:linear-gradient(0deg,#5c1515,#8a2626); border-color:#b62c2c}
.grid{display:grid;grid-template-columns:repeat( auto-fill, minmax(260px, 1fr) );gap:14px}
.card{background: radial-gradient(200px 160px at 80% -10%, #21335a 0%, #1a243b 60%);
  border:1px solid var(--border);border-radius:16px;padding:12px 12px 10px;box-shadow:var(--shadow);min-height:124px}
.card .hdr{display:flex;justify-content:space-between;align-items:start;gap:8px;margin-bottom:8px}
.card .sym{font-weight:700;font-size:14px;letter-spacing:0.4px}
.card .price{font-size:18px;font-weight:700;margin:4px 0 8px}
.small{font-size:12px;color:var(--muted)}
.kv{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.kv .chip{border:1px solid var(--chip-border); background:var(--chip); padding:3px 6px;border-radius:8px;font-size:11px;color:var(--muted)}
.delta.pos{color:var(--good)} .delta.neg{color:var(--bad)} .delta.neu{color:var(--muted)}
.tag{font-size:11px;padding:2px 6px;border-radius:999px;border:1px solid var(--chip-border);background:var(--chip); color:var(--muted)}
.tag.overbought{border-color:#3b82f6;color:#93c5fd} .tag.oversold{border-color:#f97316;color:#fdba74}
.skel{background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04));height:14px;border-radius:6px;animation:shimmer 1.2s infinite;background-size:600px 100%}
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
.footer-note{margin-top:18px;color:var(--muted);font-size:12px}
.console{position:fixed; right:16px; bottom:16px; width:380px; max-height:40vh; overflow:auto; z-index:50;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); display:none}
.console header{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border)}
.console pre{margin:0;padding:10px;white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#e2e8f0}
.console.show{display:block}
.note{color:#9bb0d3;font-size:12px;opacity:.9}
.health{padding:4px 8px;border-radius:999px;border:1px solid var(--chip-border);background:var(--chip);font-size:12px}
.health.ok{color:#34d399;border-color:#065f46} .health.warn{color:#fbbf24;border-color:#854d0e} .health.err{color:#f87171;border-color:#7f1d1d}

/* Chart area */
.chartwrap{margin-top:20px;background:linear-gradient(0deg,#0f1830,#0b1220);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:12px}
.charthead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.charttitle{font-weight:700}
.chartArea{display:grid;grid-template-columns:220px 1fr;gap:12px}
.canvasbox{position:relative;width:100%;height:640px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#0f1424}
.panel{position:relative;width:100%}
#pricePanel{height:63%}
#rsiPanel{height:18.5%;border-top:1px solid var(--border)}
#macdPanel{height:18.5%;border-top:1px solid var(--border)}
.panel canvas{display:block;width:100%;height:100%}

/* timeframe toolbar */
.toolbar{display:flex;align-items:center;gap:12px;margin:8px 0 10px 0}
.tfbtn{padding:6px 10px;border-radius:999px;border:1px solid var(--chip-border);background:var(--chip);color:var(--muted);font-size:12px;cursor:pointer}
.tfbtn.active{background:#1f2b45;color:#cfe1ff;border-color:#325083}
.sep{width:1px;height:20px;background:var(--border);display:inline-block;margin:0 6px}

/* left indicator sidebar */
.leftbar{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px; height:640px}
.indHeader{font-weight:700;margin-bottom:8px;color:#cfe1ff}
.indItem{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.indName{font-size:14px;flex:1}
.gear{background:var(--card-2); border:1px solid var(--border); color:#cfe1ff; border-radius:8px; padding:4px 8px; cursor:pointer}
.indHint{font-size:12px;color:var(--muted)}

/* toggle switch */
.switch{position:relative;display:inline-block;width:40px;height:22px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#334155;border-radius:999px;transition:.2s}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:2px;top:2px;background:white;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:#3b82f6}
.switch input:checked + .slider:before{transform:translateX(18px)}

/* tooltip & crosshair */
.tooltip{position:absolute; right:10px; top:10px; background:rgba(15,20,36,0.9); border:1px solid var(--border); border-radius:8px; padding:8px 10px; font-size:12px; color:#e6ecff; pointer-events:none; white-space:nowrap}
.cross{position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none}

/* slide-out settings */
.panelWrap{position:fixed; top:0; right:0; bottom:0; width:0; overflow:hidden; background:rgba(0,0,0,0.35); backdrop-filter: blur(2px); transition: width .2s; z-index:60}
.panelWrap.show{width:100%}
.panelCard{position:absolute; top:0; right:-420px; width:420px; height:100%; background:var(--panel); border-left:1px solid var(--border); box-shadow:var(--shadow); transition:right .2s}
.panelWrap.show .panelCard{right:0}
.panelHead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.panelTitle{font-weight:700}
.closeBtn{background:var(--card-2);border:1px solid var(--border);color:#cfe1ff;border-radius:8px;padding:6px 8px;cursor:pointer}
.panelBody{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.small{color:var(--muted);font-size:12px}

/* V2.0 add-ons */
.leftbar .miniInput { width: 72px; margin-left: 8px; }
.leftbar select { margin-left: 8px; }
.psar-dot { }


/* Interval menu + zoom buttons */
.intervalBar { display:flex; align-items:center; gap:8px; padding:6px 8px; border-bottom:1px solid var(--grid,#eee); }
.intervalBar .menuBtn { padding:4px 8px; border:1px solid #ccc; border-radius:8px; background:#fff; }
.intervalBar .menu { position:absolute; background:#fff; border:1px solid #ccc; border-radius:8px; padding:6px 0; margin-top:4px; z-index:20; box-shadow:0 6px 18px rgba(0,0,0,.1); max-height:60vh; overflow:auto; }
.intervalBar .menu.hidden { display:none; }
.intervalBar .menu div { padding:6px 12px; cursor:pointer; white-space:nowrap; }
.intervalBar .menu div:hover { background:#f4f6f8; }
.intervalBar .zoomBtns button /* removed */ { padding:3px 10px; border:1px solid #ccc; border-radius:8px; background:#fff; margin-left:4px; }

/* Indicator settings gear + panel */
.gear { margin-left:6px; border:1px solid #ccc; background:#fff; border-radius:6px; padding:2px 6px; cursor:pointer; }
.indSettings { margin:6px 0 8px 28px; display:block; }
.indSettings.hidden { display:none; }
.indSettings label { font-size:12px; margin-right:6px; opacity:0.8; }


/* Inline interval placement */
.timeframeBar { position: relative; display:flex; align-items:center; gap:10px; }
.timeframeBar .intervalInline { position: relative; margin-left:auto; }
.timeframeBar .menuBtn { padding:4px 8px; border:1px solid #ccc; border-radius:8px; background:#fff; }
.timeframeBar .menu { position:absolute; right:0; top:28px; background:#fff; border:1px solid #ccc; border-radius:8px; padding:6px 0; z-index:25; box-shadow:0 6px 18px rgba(0,0,0,.1); max-height:60vh; overflow:auto; }
.timeframeBar .menu.hidden{ display:none; }

/* Slide-out settings (right) */
.slideout { position: fixed; right: -360px; top:0; width: 320px; height:100vh; background:#fff; border-left:1px solid #ddd; box-shadow:-8px 0 24px rgba(0,0,0,.08); transition:right .25s ease; z-index:100; padding:14px; }
.slideout.open { right: 0; }
.slideoutTitle { font-weight:600; margin-bottom:10px; }
.slideoutBody label { display:block; font-size:12px; opacity:.8; margin-top:10px; }
.slideShade { position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:99; }
.slideShade.hidden{ display:none; }

.zoomBtns{ display:none !important; }

:root { --bg:#0f172a; --panel:#111827; --ink:#e5e7eb; --sub:#9ca3af; --border:#1f2937; }
body, .leftbar, .slideout { background:var(--panel); color:var(--ink); }
.gear { background:var(--panel); color:var(--ink); border-color:var(--border); }
.slideout { border-left:1px solid var(--border); box-shadow:-8px 0 24px rgba(0,0,0,.35); }
.slideoutTitle { color:var(--ink); }
.slideoutBody label { color:var(--sub); }
.menuBtn { background:var(--panel); color:var(--ink); border:1px solid var(--border); }
.timeframeBar .menu, .intervalBar .menu { background:var(--panel); color:var(--ink); border-color:var(--border); }
.timeframeBar .menu div:hover { background:#0b1324; }
.menu div { color:var(--ink); }
.cursorHud { position:absolute; right:12px; top:8px; background:rgba(15,23,42,.7); color:#e5e7eb; padding:4px 8px; border-radius:8px; font-size:12px; z-index:50; border:1px solid var(--border); pointer-events:none; }
.cursorHud.hidden { display:none; }


/* Removable tile "X" button */
.card{ position: relative; }
.removeBtn{
  position:absolute; top:8px; right:8px;
  width:22px; height:22px; line-height:20px;
  border-radius:999px; border:1px solid var(--chip-border);
  background:var(--chip); color:var(--muted);
  font-weight:700; font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.removeBtn:hover{ filter:brightness(1.2); }


/* Slide-out header + close button */
.slideoutHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.slideClose{
  border:1px solid var(--border); background:var(--card-2); color:var(--ink);
  border-radius:8px; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; box-shadow:var(--shadow);
}
.slideClose:hover{ filter:brightness(1.1); }

.fieldError{ border-color:#f87171 !important; box-shadow:0 0 0 2px rgba(248,113,113,.25) }