/* CTP Charts - the shell, in TradingView's own measures and colors. Flat: no pill borders, no gradients, no glow.
   The Look (js/themes.js) colors the CHART; the shell stays TradingView's so the chart is the only thing that speaks.
   TV dark: #131722 surfaces, #2a2e39 lines, #d1d4dc text, #787b86 muted, #2962ff blue, hover #2a2e39, radius 4. */
:root{
  --tv-bg:#131722; --tv-line:#2a2e39; --tv-hover:#2a2e39; --tv-active:#2962ff; --tv-text:#d1d4dc; --tv-text2:#b2b5be; --tv-muted:#787b86; --tv-r:4px;
  --font:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif;
  /* the chart look's variables (set by the Look) - used by the chart area, the signal cards and the legend only */
  --bg:#131722; --panel:#131722; --panel2:#1e222d; --border:#2a2e39; --text:#d1d4dc; --text2:#b2b5be; --muted:#787b86;
  --blue:#2962ff; --blue2:#5b8cff; --blue-dim:rgba(41,98,255,.18); --up:#26a69a; --down:#ef5350; --cyan:#4dd0e1; --gold:#f0b90b;
  --card-head:#26a69a; --card-head-text:#fff; --card-head-short:#ef5350; --card-band:#1e222d; --card-glow:none; --card-glow-short:none; --radius:4px;
  --logo-text:linear-gradient(180deg,#d2f0fd 0%,#8fd4f6 30%,#5bb6e6 55%,#2a96cc 78%,#0e7fc0 100%);
  --logo-gloss:drop-shadow(0 1px 1px rgba(0,0,0,.45)); --logo-fill:linear-gradient(180deg,#6cc0ea 0%,#3aa3d8 55%,#1086c1 100%);
  --right-w:300px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--tv-bg);color:var(--tv-text);font:13px/1.35 var(--font);user-select:none;-webkit-font-smoothing:antialiased}
#app{display:grid;height:100%;grid-template-rows:38px 0 1fr 0 24px;grid-template-columns:52px 1fr var(--right-w)}
#app.headline-on{grid-template-rows:38px 32px 1fr 0 24px}
#app.bottom-on{grid-template-rows:38px 0 1fr 150px 24px}
#app.headline-on.bottom-on{grid-template-rows:38px 32px 1fr 150px 24px}
#app.noright{grid-template-columns:52px 1fr 0}
#app.noright #right{display:none}

/* ---------- top toolbar: text buttons, no borders, thin separators (TV's header) */
#top{grid-row:1;grid-column:1/4;display:flex;align-items:center;gap:2px;padding:0 8px;background:var(--tv-bg);border-bottom:1px solid var(--tv-line);min-width:0}
#top > *{flex:none}
.tsep{width:1px;height:22px;background:var(--tv-line);margin:0 6px}
.brand{display:flex;align-items:center;gap:7px;padding:0 8px 0 2px;height:28px}
.brand img{height:22px}
.brand b{font-size:14px;font-weight:600;letter-spacing:.2px;white-space:nowrap;background:var(--logo-text);-webkit-background-clip:text;background-clip:text;color:transparent;filter:var(--logo-gloss)}
.brand b span{font-weight:500;background:linear-gradient(180deg,#e4f4fd,#9fdbf8 60%,#65bbe7);-webkit-background-clip:text;background-clip:text;color:transparent}
.sym{display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:var(--tv-r);cursor:pointer;color:var(--tv-text)}
.sym:hover{background:var(--tv-hover)}
.sym b{font-size:14px;font-weight:600} .sym small{color:var(--tv-muted);font-size:12px;white-space:nowrap}
.tfs,.seg{display:flex;gap:0;padding:0}
.tf,.seg span{height:28px;display:grid;place-items:center;padding:0 8px;border-radius:var(--tv-r);color:var(--tv-text2);cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap}
.tf:hover,.seg span:hover{background:var(--tv-hover);color:var(--tv-text)}
.tf.on{color:var(--tv-active);font-weight:600}
.seg span{color:var(--tv-muted);font-size:12px} .seg span.on{color:var(--tv-text);background:var(--tv-hover)}
.seg.frames span{font-weight:600;font-size:13px;color:var(--tv-text2)} .seg.frames span.on{color:#fff;background:var(--tv-active)}
.pick{display:flex;align-items:center;gap:4px;height:28px;padding:0 0 0 8px;border-radius:var(--tv-r);color:var(--tv-muted);font-size:12px;font-weight:500}
.pick:hover{background:var(--tv-hover)}
.pick select{appearance:none;-webkit-appearance:none;background:transparent;color:var(--tv-text);border:0;padding:0 20px 0 4px;height:28px;font:500 13px var(--font);cursor:pointer;outline:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--tv-muted) 50%),linear-gradient(135deg,var(--tv-muted) 50%,transparent 50%);background-position:calc(100% - 11px) 55%,calc(100% - 7px) 55%;background-size:4px 4px;background-repeat:no-repeat}
.pick select option{background:#1e222d;color:var(--tv-text)}
.tbtn{display:flex;align-items:center;gap:6px;height:28px;padding:0 9px;border-radius:var(--tv-r);border:0;background:transparent;color:var(--tv-text2);font:500 13px var(--font);cursor:pointer}
.tbtn:hover{background:var(--tv-hover);color:var(--tv-text)} .tbtn svg{width:18px;height:18px}
.spacer{flex:1 1 auto !important;min-width:4px}
.live{display:flex;gap:7px;align-items:center;color:var(--tv-muted);font-size:12px;height:28px;padding:0 8px;max-width:260px;overflow:hidden;white-space:nowrap}
.live span:last-child{overflow:hidden;text-overflow:ellipsis}
.dot{width:7px;height:7px;border-radius:50%;background:#26a69a;flex:none} .dot.off{background:#ef5350} .dot.warn{background:#f0b90b}

/* ---------- headline (Storyboard) */
.headline{grid-row:2;grid-column:1/4;display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--tv-bg);border-bottom:1px solid var(--tv-line);font-weight:500;overflow:hidden;white-space:nowrap;color:var(--tv-text)}
.headline .arrow{color:var(--up);font-size:16px} .headline .arrow.d{color:var(--down)} .headline small{color:var(--tv-muted)}

/* ---------- left toolbar (TV's drawing toolbar: 52px, grey icons, active = hover bg) */
#tools{grid-row:3/5;grid-column:1;background:var(--tv-bg);border-right:1px solid var(--tv-line);display:flex;flex-direction:column;align-items:center;padding-top:6px;gap:2px}
.tool{width:38px;height:38px;border-radius:var(--tv-r);display:grid;place-items:center;color:var(--tv-muted);cursor:pointer}
.tool:hover{background:var(--tv-hover);color:var(--tv-text)} .tool.on{color:var(--tv-text);background:var(--tv-hover)}
.tool.dim{display:none}
.tool svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tool-sep{width:26px;height:1px;background:var(--tv-line);margin:4px 0}

/* ---------- chart */
#chartwrap{grid-row:3;grid-column:2;position:relative;overflow:hidden;background:var(--bg)}
#chart{position:absolute;inset:0}
/* the legend, as TV's: title row, OHLC row, one row per study, each with an eye (hide) and a cross (remove); a chevron folds it */
#legend{position:absolute;left:10px;top:8px;z-index:5;font-size:12px;pointer-events:none}
#legend .l1{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text);font-weight:600;margin-bottom:2px;pointer-events:auto}
#legend .l1 small{color:var(--muted);font-weight:400;margin-left:2px;font-size:12px}
#legend .fold{width:18px;height:18px;border-radius:3px;display:grid;place-items:center;color:var(--muted);cursor:pointer;font-size:11px;margin-left:2px}
#legend .fold:hover{background:var(--panel2);color:var(--text)}
#legend .row{display:flex;gap:9px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px} #legend .row b{color:var(--text);font-weight:500}
#legend .ind{margin-top:3px;color:var(--text2);font-size:12px;display:flex;align-items:center;gap:6px;pointer-events:auto} #legend .ind i{display:inline-block;width:8px;height:8px;border-radius:2px;flex:none}
#legend.folded .row,#legend.folded .ind,#legend.folded #indlegend{display:none}
#legend .ilg{display:flex;align-items:center;gap:7px;color:var(--text2);font-size:12px;padding:1px 0;pointer-events:auto}
#legend .ilg i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none} #legend .ilg b{color:var(--text);font-weight:500} #legend .ilg span.v{font-variant-numeric:tabular-nums;color:var(--text2)}
#legend .ilg.hidden b,#legend .ilg.hidden span.v,#legend .ilg.hidden .muted{opacity:.45}
#legend .act{opacity:0;display:flex;gap:2px} #legend .ilg:hover .act,#legend .ind:hover .act{opacity:1}
#legend .act span{width:18px;height:18px;border-radius:3px;display:grid;place-items:center;cursor:pointer;color:var(--muted);font-size:12px}
#legend .act span:hover{background:var(--panel2);color:var(--text)} #legend .act .x:hover{color:var(--down)}
#wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);opacity:.03;pointer-events:none;z-index:2} #wm img{width:220px}
#atrbox{position:absolute;left:10px;bottom:62px;z-index:5;margin:0;padding:0;background:transparent;border:0;font:600 12px/1.45 var(--font);color:var(--cyan);display:none;pointer-events:none;white-space:pre;transition:opacity .25s}
#floatstrip{position:absolute;right:70px;top:12px;z-index:6;width:330px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#floatstrip .mini{height:66px;border:1px solid var(--border);border-radius:var(--tv-r);background:var(--panel);overflow:hidden}
#rtbtn{position:absolute;right:76px;bottom:38px;z-index:7;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--panel2);border:1px solid var(--border);color:var(--text2);font-size:17px;line-height:1}
#rtbtn:hover{color:var(--text);background:var(--border)}
#fitbtn{padding:0 7px}
/* the CTP mark, bottom-left, and its about card */
#ctpmark{position:absolute;left:12px;bottom:30px;z-index:7;display:flex;align-items:center;gap:7px;padding:3px 2px;cursor:pointer;opacity:.45;transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.2,1)}
#ctpmark:hover,#ctpmark.open{opacity:1;transform:translateY(-1px)}
#ctpmark img{height:20px} #ctpmark span{font-size:12px;font-weight:600;color:var(--text)} #ctpmark span i{font-style:normal;font-weight:700;background:var(--logo-text);-webkit-background-clip:text;background-clip:text;color:transparent;filter:var(--logo-gloss)}
#ctpabout{position:absolute;left:12px;bottom:62px;z-index:8;padding:14px 18px 12px;border-radius:8px;opacity:0;transform:translateY(10px) scale(.96);transform-origin:left bottom;pointer-events:none;
  transition:opacity .32s cubic-bezier(.2,.8,.2,1),transform .32s cubic-bezier(.2,.8,.2,1);background:#1e222d;border:1px solid var(--tv-line);box-shadow:0 12px 32px rgba(0,0,0,.28)}
#ctpabout.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
#ctpabout .name{font-size:16px;font-weight:600;letter-spacing:.2px;color:#fff;white-space:nowrap}
#ctpabout .name span{background:var(--logo-text);-webkit-background-clip:text;background-clip:text;color:transparent;filter:var(--logo-gloss)}
#ctpabout .sig{margin-top:8px;display:flex;align-items:center;justify-content:flex-end;gap:8px;font:600 10.5px/1 var(--font);letter-spacing:.28em;text-transform:uppercase;background:linear-gradient(90deg,#b8902e,#f3d27a 50%,#c99a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
#ctpabout .sig::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,#d4ac4a)}
#chartwrap:has(#ctpabout.open) #atrbox{opacity:0}
#framename{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.96);z-index:9;pointer-events:none;opacity:0;text-align:center;font-size:28px;font-weight:600;color:var(--text);transition:opacity .25s ease,transform .25s ease}
#framename small{display:block;font-size:11px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);margin-top:6px}
#framename b{font-weight:700;background:var(--logo-text);-webkit-background-clip:text;background-clip:text;color:transparent;filter:var(--logo-gloss)}
#framename.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#chartwrap,#right,#bottom{transition:opacity .22s ease}
#app.switching #chartwrap,#app.switching #right,#app.switching #bottom{opacity:0}

/* ---------- right panel (TV's widget bar: flat sections, compact rows) */
#right{grid-row:3/5;grid-column:3;background:var(--tv-bg);border-left:1px solid var(--tv-line);display:flex;flex-direction:column;overflow:hidden auto}
.ph{padding:10px 12px 6px;font-size:12px;color:var(--tv-text);display:flex;justify-content:space-between;font-weight:600}
.ph span:last-child{color:var(--tv-muted);font-weight:400}
.ph + .ph,.ph.sep{border-top:1px solid var(--tv-line);margin-top:6px}
.muted{color:var(--tv-muted)}
.empty{margin:2px 12px 10px;padding:8px 10px;border-radius:var(--tv-r);color:var(--tv-muted);font-size:12px;line-height:1.5;background:#1e222d}
.wl{padding:0 0 6px}
.wr{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:5px 12px;cursor:pointer;align-items:center}
.wr:hover{background:var(--tv-hover)} .wr.on{background:#1e222d;box-shadow:inset 2px 0 0 var(--tv-active)}
.wr b{font-weight:600;font-size:13px;color:var(--tv-text)} .wr small{display:block;color:var(--tv-muted);font-weight:400;font-size:11px}
.wr > span{font-variant-numeric:tabular-nums;color:var(--tv-text);font-size:12px}
.wr .chg{font-size:12px;min-width:56px;text-align:right;font-weight:500}
.chg.u{color:var(--up)} .chg.d{color:var(--down)}
.card{margin:2px 12px 8px;padding:8px 10px;background:#1e222d;border-radius:var(--tv-r)}
.card h4{margin:0 0 4px;font-size:12px;color:var(--tv-text);display:flex;justify-content:space-between} .card h4 em{font-style:normal;color:var(--tv-muted);font-weight:400}
.card.mono{font:500 12px/1.5 Consolas,monospace;color:var(--cyan);white-space:pre}
.kv{display:flex;justify-content:space-between;color:var(--tv-muted);padding:2px 0;gap:8px;font-size:12px} .kv b{color:var(--tv-text);font-weight:500;text-align:right}
.sigcard{margin:2px 12px 8px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--up);box-shadow:var(--card-glow);font-weight:700}
.sigcard .head{padding:6px 12px;font-size:14px;color:var(--card-head-text);background:var(--card-head)}
.sigcard .band{padding:5px 12px 6px;background:var(--card-band);color:var(--text);font-size:12px;display:flex;justify-content:space-between;align-items:baseline}
.sigcard .band em{font-style:normal;color:var(--up);font-weight:700}
.sigcard.short{border-color:var(--down);box-shadow:var(--card-glow-short)} .sigcard.short .head{background:var(--card-head-short);color:#fff} .sigcard.short .band em{color:var(--down)}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 12px 8px}
.chip{padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;background:#1e222d;color:var(--tv-text2);white-space:nowrap}
.chip.u{color:var(--up)} .chip.d{color:var(--down)} .chip.b{color:#fff;background:var(--tv-active)}
.tbl{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;color:var(--tv-muted);font-weight:500;padding:4px 12px;border-bottom:1px solid var(--tv-line);position:sticky;top:0;background:var(--tv-bg)}
.tbl td{padding:4px 12px;border-bottom:1px solid #1e222d;color:var(--tv-text2);white-space:nowrap} .tbl td.u{color:var(--up)} .tbl td.d{color:var(--down)} .tbl td b{color:var(--tv-text);font-weight:500}
.gauge{margin:2px 12px 8px;padding:8px 10px;background:#1e222d;border-radius:var(--tv-r)}
.gauge .r{display:flex;justify-content:space-between;font-size:12px;color:var(--tv-text2)} .gauge .r b{color:var(--tv-text)}
.gauge .bar{height:6px;border-radius:3px;background:var(--tv-line);margin-top:6px;overflow:hidden} .gauge .bar i{display:block;height:100%;background:var(--tv-active);border-radius:3px}
.mini{position:relative;height:118px;border-bottom:1px solid var(--tv-line);cursor:pointer}
.mini:hover{background:#1e222d}
.mini .lab{position:absolute;left:10px;top:6px;z-index:5;font-size:12px;font-weight:600;color:var(--tv-text);pointer-events:none} .mini .lab small{color:var(--tv-muted);font-weight:400;margin-left:5px}
.mini .st{position:absolute;right:10px;top:6px;z-index:5;font-size:11px;font-weight:500;pointer-events:none;color:var(--tv-text2)}
.mini .mc{position:absolute;inset:0}
.bottomstrip{grid-row:4;grid-column:2/4;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--tv-line);background:var(--tv-bg);overflow:hidden}
.bottomstrip .mini{height:auto;border-bottom:0;border-right:1px solid var(--tv-line)}

/* ---------- dialogs (TV's: dark card, search on top, categories left) */
.dlg{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:flex;align-items:flex-start;justify-content:center;padding-top:8vh}
.dlg-box{width:760px;max-width:94vw;max-height:80vh;background:#1e222d;border:1px solid var(--tv-line);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;color:var(--tv-text)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-size:16px;font-weight:600}
.dlg-x{cursor:pointer;color:var(--tv-muted);padding:2px 6px;border-radius:4px;font-weight:400} .dlg-x:hover{background:var(--tv-hover);color:var(--tv-text)}
.dlg-search{padding:0 18px 12px;border-bottom:1px solid var(--tv-line)}
.dlg-search input{width:100%;padding:9px 12px;border-radius:var(--tv-r);border:1px solid var(--tv-line);background:var(--tv-bg);color:var(--tv-text);font:14px var(--font);outline:none}
.dlg-search input:focus{border-color:var(--tv-active)}
.dlg-body{display:grid;grid-template-columns:170px 1fr;min-height:320px;overflow:hidden}
.dlg-cats{border-right:1px solid var(--tv-line);padding:8px 0}
.dlg-cats div{padding:8px 18px;cursor:pointer;color:var(--tv-text2);font-weight:500} .dlg-cats div:hover{background:var(--tv-hover)} .dlg-cats div.on{color:var(--tv-text);background:var(--tv-hover);box-shadow:inset 2px 0 0 var(--tv-active)}
.dlg-list{overflow:auto;padding:6px 0}
.dlg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;cursor:pointer}
.dlg-row:hover{background:var(--tv-hover)} .dlg-row b{font-weight:500;color:var(--tv-text)} .dlg-row small{display:block;color:var(--tv-muted);margin-top:2px}
.dlg-row .add{color:var(--tv-active);font-size:12px;font-weight:600;opacity:0;white-space:nowrap} .dlg-row:hover .add{opacity:1} .dlg-row.on .add{opacity:1;color:var(--up)}
.dlg-empty{padding:24px 18px;color:var(--tv-muted);line-height:1.6}

/* ---------- status bar */
#status{grid-row:5;grid-column:1/4;display:flex;align-items:center;gap:16px;padding:0 12px;background:var(--tv-bg);border-top:1px solid var(--tv-line);color:var(--tv-muted);font-size:11px;white-space:nowrap;overflow:hidden}
#status a{color:var(--tv-muted);text-decoration:none} #status a:hover{color:var(--tv-text)}

/* ---------- narrow / phone */
@media (max-width:1500px){ .sym small{display:none} .pick > span{display:none} .pick select{padding-left:8px} }
@media (max-width:1300px){ #top .live{display:none} .tbtn span{display:none} }
@media (max-width:900px){
  #app,#app.noright,#app.headline-on,#app.bottom-on{grid-template-columns:0 1fr 0;grid-template-rows:38px 0 1fr 300px 24px}
  #tools{display:none} #chartwrap{grid-column:2;grid-row:3} #right{grid-column:2/4;grid-row:4/5;border-left:0;border-top:1px solid var(--tv-line)}
  #bottom,#headline,.tfs,.seg:not(.frames),.pick,#wm,.tsep{display:none !important}
}

/* ---------- the floating style bar of a selected drawing (TradingView's) */
#stylebar{position:absolute;right:84px;top:10px;z-index:12;display:flex;align-items:center;gap:4px;padding:4px 6px;background:#1e222d;border:1px solid var(--tv-line);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.sb-sep{width:1px;height:20px;background:var(--tv-line);margin:0 3px}
.sb-colors{display:flex;gap:4px}
.sb-colors span{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}
.sb-colors span.on{border-color:#fff;box-shadow:0 0 0 1px #1e222d inset}
.sb-group{display:flex;gap:2px}
.sb-group span{min-width:26px;height:24px;padding:0 6px;border-radius:4px;display:grid;place-items:center;cursor:pointer;color:var(--tv-text2);font-size:12px;font-weight:600}
.sb-group span:hover{background:var(--tv-hover);color:var(--tv-text)} .sb-group span.on{background:var(--tv-hover);color:var(--tv-active)}
.sb-group span i{display:block;width:16px;background:currentColor;border-radius:1px}
.sb-group span.del:hover{color:var(--down)}