/* Vibrozz 2 — chart (V.chart): colours the chart library reads, its own overlays (legend, indicator panel and
   settings, SL/TP handles), the timeframe buttons and the layers popover. */
:root{
  --vz-chart-bg:#FFFFFF;--vz-chart-grid:#F0F1F4;--vz-chart-vgrid:rgba(0,0,0,0);--vz-chart-text:#8D9097;
  --vz-up:#00A049;--vz-down:#E2332B;--vz-chart-cross:rgba(31,32,35,.32);--vz-chart-label:#1F2023;--vz-chart-mark:rgba(31,32,35,.045);
  --vz-line:#ECEEF1;--vz-chart-zero:rgba(31,32,35,.18);--vz-raised:#FFFFFF;--vz-text:#1F2023;
  --vz-chart-font:Onest,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
:root[data-vz-theme=dark]{
  --vz-chart-bg:#1C1C1E;--vz-chart-grid:#26262A;--vz-chart-vgrid:rgba(0,0,0,0);--vz-chart-text:#8E8E93;
  --vz-up:#30D158;--vz-down:#FF5A4F;--vz-chart-cross:rgba(245,245,247,.3);--vz-chart-label:#3A3A3E;--vz-chart-mark:rgba(255,255,255,.04);
  --vz-line:#2A2A2D;--vz-chart-zero:rgba(255,255,255,.18);--vz-raised:#2A2A2D;--vz-text:#F5F5F7;
}

/* host: give it a height in the page's CSS */
.vc{position:relative;min-width:0;min-height:160px;overflow:hidden}
.vc .quantum-chart-canvas{border-radius:inherit}
.vc.qc-picking canvas{cursor:crosshair!important}
.vc[data-dragging=true] canvas{cursor:ns-resize!important}

/* legend (top-left overlay) */
.qc-legend{position:absolute;left:10px;top:8px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:calc(100% - var(--vc-axis,86px) - 14px);pointer-events:none;font:12px/1.45 var(--f);color:var(--tx-2)}
.qc-legend[hidden]{display:none}
.qc-line{display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden;padding:1px 6px;border-radius:7px;background:color-mix(in srgb,var(--card) 82%,transparent)}
.qc-line b{font-weight:600}
.qc-head{gap:6px;margin-bottom:2px}
.qc-sym{color:var(--tx);font-weight:700;font-size:13px}
.qc-tf{color:var(--tx-3);margin-right:4px;font-weight:600}
.qc-k{color:var(--tx-3);margin-left:3px}
.qc-count{margin-left:6px;color:var(--tx-2);padding:0 6px;border-radius:6px;background:var(--soft);font-weight:600}
.qc-count:empty{display:none}
.qc-up{color:var(--up)}.qc-down{color:var(--dn)}
.qc-dim{color:var(--tx-3)}
.qc-study{pointer-events:auto;padding:1px 2px 1px 6px}
.qc-study:hover{background:color-mix(in srgb,var(--soft) 92%,transparent)}
.qc-name{font-size:12px;font-weight:600}
.qc-ib{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:20px;padding:0;margin:0;border:0;border-radius:6px;background:transparent;color:var(--tx-3);opacity:0;font-size:12px;line-height:1}
.qc-study:hover .qc-ib,.qc-ib:focus-visible{opacity:1}
.qc-ib:hover{background:var(--soft-2);color:var(--tx)}
@media (hover:none){.qc-ib{display:none}}
.vc{container-type:inline-size}
@container (max-width:900px){.qc-head span.qc-k:nth-of-type(3),.qc-head [data-v=O]{display:none}}
.qc-name{cursor:pointer}
/* folded legend (default): the candle line, then the indicators as one line of names */
.vc-legmin .qc-legend:not(.qc-legend-osc){display:block;max-height:46px;overflow:hidden;line-height:1.45}
.vc-legmin .qc-legend:not(.qc-legend-osc) .qc-head{width:max-content;margin-bottom:3px}
.vc-legmin .qc-legend:not(.qc-legend-osc) .qc-study{display:inline-flex;vertical-align:top;padding:1px 7px;margin:0 4px 3px 0}
.vc-legmin .qc-legend:not(.qc-legend-osc) .qc-study [data-v],.vc-legmin .qc-legend:not(.qc-legend-osc) .qc-study .qc-ib{display:none}
.vc-legmin .qc-legend:not(.qc-legend-osc) .qc-study:last-child .qc-name::after{content:" ▾";color:var(--tx-3)}
.vc:not(.vc-legmin) .qc-legend:not(.qc-legend-osc) .qc-study:last-child .qc-name::after{content:" ▴";color:var(--tx-3)}
.qc-c-ema,.qc-c-emaFast{color:#D99A0B}.qc-c-emaSlow{color:#2F6BFF}.qc-c-bb{color:#7A6FF0}.qc-c-lsma{color:#E0508C}.qc-c-rsi{color:#9B6BF2}
.qc-c-ema200{color:var(--tx-2)}.qc-c-vwap{color:var(--warn)}.qc-c-cvd{color:var(--up)}.qc-c-footprint{color:#0FA3B1}
.qc-auto{position:absolute;z-index:6;pointer-events:auto;height:24px;padding:0 9px;border:0;border-radius:8px;background:var(--soft);color:var(--tx-2);font:600 11px var(--f);box-shadow:var(--shadow)}
.qc-auto:hover{background:var(--soft-2);color:var(--tx)}
.qc-auto[hidden]{display:none}

/* SL / TP drag handles (colour and border come from the library); over the legend, so they can always be dragged */
.quantum-protection-handle{z-index:6;background:var(--card)!important;border-radius:8px!important;font:700 11px/1.2 var(--f)!important;padding:3px 8px!important;box-shadow:0 2px 8px rgba(16,24,40,.12)}
.quantum-protection-handle:focus-visible{outline:2px solid var(--link);outline-offset:1px}

/* indicator list */
.qc-panel{position:fixed;z-index:65;display:flex;flex-direction:column;background:var(--card);border-radius:22px;box-shadow:var(--pop);color:var(--tx);font:14px/1.45 var(--f);overflow:hidden}
.qc-panel[hidden]{display:none}
.qc-panel>header{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 6px 20px}
.qc-panel>header b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.qc-x{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:11px;background:transparent;color:var(--tx-2);font:22px/1 var(--f)}
.qc-x:hover{background:var(--soft);color:var(--tx)}
.qc-search{padding:6px 16px 8px}
.qc-search input{width:100%;height:42px;padding:0 14px;border:1px solid transparent;border-radius:13px;background:var(--soft);color:var(--tx);font:14px var(--f);outline:0}
.qc-search input:focus{border-color:var(--acc-2);background:var(--card)}
.qc-pbody{overflow:auto;padding:4px 12px 12px;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:6px;align-content:start}
.qc-group{grid-column:1/-1;margin:10px 6px 2px;font-size:13px;font-weight:600;color:var(--tx-3)}
.qc-group:first-child{margin-top:2px}
.qc-prow{display:grid;gap:4px;align-content:start;padding:10px 12px;border-radius:14px;background:var(--soft);transition:background .3s}
.qc-prow.qc-flash{background:var(--link-soft)}
.qc-prow.qc-off .qc-ptitle b{color:var(--tx-2)}
.qc-prow[hidden],.qc-group[hidden],.qc-none[hidden]{display:none}
.qc-ptitle{display:flex;align-items:center;gap:9px;cursor:pointer;min-width:0}
.qc-ptitle b{font-weight:600;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.qc-brief{margin-left:auto;color:var(--tx-3);font-size:12px;font-weight:600;white-space:nowrap}
.qc-panel input[type=checkbox],.qc-fctl input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--tx);cursor:pointer;flex:none}
.qc-cfg{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin:2px 0 0 27px;height:28px;padding:0 10px;border:0;border-radius:9px;background:var(--card);color:var(--tx-2);font:600 12px var(--f)}
.qc-cfg:hover{color:var(--tx);background:var(--soft-2)}
.qc-none{grid-column:1/-1;margin:16px 6px;color:var(--tx-3)}
.qc-panel>footer{display:flex;align-items:center;gap:12px;padding:10px 16px 14px;border-top:1px solid var(--line)}
.qc-reset{height:34px;padding:0 12px;border:0;border-radius:11px;background:var(--soft);color:var(--tx);font:600 13px var(--f)}
.qc-reset:hover{background:var(--soft-2)}

/* study settings dialog: centred like the site's dialogs (.v-dialog) */
.qc-shade{position:fixed;inset:0;z-index:66;background:rgba(10,12,16,.42)}
.qc-shade[hidden],.qc-dialog[hidden]{display:none}
.qc-dialog{position:fixed;z-index:67;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;background:var(--card);border-radius:28px;box-shadow:var(--pop);color:var(--tx);font:14px/1.45 var(--f);overflow:hidden}
.qc-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px 18px 8px 26px}
.qc-dialog>header b{display:flex;align-items:center;gap:10px;min-width:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.qc-tabs{display:flex;gap:4px;padding:4px 20px 8px}
.qc-tab{height:34px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--tx-3);font:600 14px var(--f);cursor:pointer}
.qc-tab:hover{color:var(--tx)}
.qc-tab.active{background:var(--soft);color:var(--tx)}
.qc-dbody{overflow:auto;padding:0 24px 8px;overscroll-behavior:contain}
.qc-frow{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.qc-frow:first-child{border-top:0}
.qc-flabel{display:grid;gap:2px;cursor:pointer}
.qc-flabel b{font-weight:500;font-size:14px;color:var(--tx)}
.qc-fctl{display:flex;justify-content:flex-end}
.qc-fctl input[type=number],.qc-fctl select{width:100%;height:40px;padding:0 12px;border:1px solid transparent;border-radius:12px;background:var(--soft);color:var(--tx);font:14px var(--f);outline:0}
.qc-fctl select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tx-3) 50%),linear-gradient(135deg,var(--tx-3) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.qc-fctl input[type=number]:focus,.qc-fctl select:focus{border-color:var(--acc-2);background:var(--card)}
.qc-fctl input[type=number]{-moz-appearance:textfield;appearance:textfield}
.qc-fctl input[type=number]::-webkit-inner-spin-button,.qc-fctl input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qc-fctl input[type=color]{width:56px;height:40px;padding:3px;border:0;border-radius:12px;background:var(--soft);cursor:pointer}
.qc-dialog>footer{display:flex;align-items:center;gap:10px;padding:14px 20px 18px;border-top:1px solid var(--line)}
.qc-grow{flex:1 1 auto}
.qc-btn{height:42px;padding:0 18px;border:0;border-radius:13px;background:var(--soft);color:var(--tx);font:600 14px var(--f)}
.qc-btn:hover{background:var(--soft-2)}
.qc-btn.qc-primary{background:var(--acc);color:var(--on-acc)}
.qc-btn.qc-primary:hover{background:var(--acc-2)}

/* timeframe buttons (V.chart.toolbar) */
.vc-tf{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.vc-tf::-webkit-scrollbar{display:none}
.vc-tf button{flex:none;border:0;background:transparent;border-radius:9px;height:32px;padding:0 10px;color:var(--tx-3);font-weight:600;font-size:13px}
.vc-tf button:hover{color:var(--tx)}
.vc-tf button.on{background:var(--soft);color:var(--tx)}

/* layers popover (inside core's .v-pop) */
.vc-laypop{width:min(340px,calc(100vw - 16px))}
.vc-lay{display:grid;gap:2px}
.vc-chk{display:flex;align-items:center;gap:12px;min-height:42px;padding:6px 12px;border-radius:12px;cursor:pointer;font-weight:500}
.vc-chk:hover{background:var(--soft)}
.vc-chk input{width:18px;height:18px;margin:0;accent-color:var(--tx);flex:none}
.vc-al-h{padding:8px 12px 4px;color:var(--tx-3);font-size:13px;font-weight:600}
.vc-al{display:flex;align-items:center;gap:10px;padding:2px 4px 2px 12px}
.vc-al b{flex:1;font-weight:600}

/* fullscreen (native, or a fixed layer where the browser has none, e.g. iPhone) */
.vc-full{position:fixed!important;inset:0!important;z-index:80!important;border-radius:0!important;width:auto!important;height:auto!important;max-height:none!important;margin:0!important}
:fullscreen.vc-full{position:static!important}
html.vc-noscroll,html.vc-noscroll body{overflow:hidden}

@media (max-width:760px){
  .qc-legend{left:6px;top:6px;max-width:calc(100% - var(--vc-axis,60px) - 10px);font-size:12px}
  .quantum-protection-handle{font-size:12px!important}
  .qc-auto{height:32px;font-size:12px}
  /* indicator list = bottom sheet (the library positions it inline as a popover) */
  .qc-panel{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;height:min(78vh,640px);max-height:88vh!important;
    border-radius:26px 26px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 0 0 100vmax rgba(10,12,16,.42),var(--pop);animation:vrise .18s ease-out}
  .qc-panel>header{padding:18px 12px 6px 20px}
  .qc-pbody{grid-template-columns:minmax(0,1fr)}
  .qc-search input{font-size:16px;height:44px}
  .qc-x{width:40px;height:40px}
  .qc-prow{padding:4px 12px}
  .qc-ptitle{min-height:40px}
  .qc-cfg{height:36px;padding:0 14px;font-size:13px;margin-bottom:6px}
  .qc-reset,.qc-btn{height:44px}
  .qc-fctl input[type=number],.qc-fctl select{font-size:16px;height:44px}
  .qc-head .qc-k,.qc-head [data-v="O"],.qc-head [data-v="H"],.qc-head [data-v="L"]{display:none}
  .qc-frow{grid-template-columns:minmax(0,1fr) 150px;gap:10px}
  .qc-dialog{top:auto;bottom:0;transform:translateX(-50%);width:100%;max-height:88vh;border-radius:26px 26px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .qc-dialog>header{padding:20px 12px 8px 20px}
}
/* tablets (touch, > 760 px): 40 px timeframe buttons */
@media (min-width:761px) and (pointer:coarse){.vc-tf button{height:40px;min-width:40px}}
/* touch: 40 px targets in the indicator list and its dialog; a SL / TP label takes a finger 12 px around it */
@media (pointer:coarse){.qc-x,.qc-tab,.qc-cfg,.qc-reset{min-height:40px;min-width:40px}
  .quantum-protection-handle::before{content:"";position:absolute;inset:-12px -10px}}
