/* ============================================================================ VAQUERO — terminal design system (black-gold / white-gold) Single shared stylesheet. Shell chrome is injected by vq.js; pages provide +

... panels ...

. ============================================================================ */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ---------------- tokens ---------------- */ :root{ --bg:#0A0A0B; --s1:#121214; --s2:#1A1B1E; --s3:#232427; --line:#202124; --line2:#2E2F33; --bstrong:#3A3B40; --t1:#F2EFE6; --t2:#B8B4A8; --t3:#6E6B63; --gold:#D4AF37; --gold1:#D4AF37; --gold2:#E3C66A; --champ:#F2E2B8; --gold-d:#B89020; --up:#4FB477; --down:#E06A5C; --warn:#E3A93C; --info:#5B8DEF; --amber:#E3A93C; --link:#5B8DEF; --viz1:#D4AF37; --viz2:#0891B2; --mono:'JetBrains Mono',ui-monospace,'Pretendard Variable',monospace; --ui:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --kr:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --disp:'Cormorant Garamond','Pretendard Variable',Pretendard,serif; /* titles: English = Cormorant (same as wordmark), Korean = Pretendard (backup content font) */ --brand:'Cormorant Garamond',Georgia,serif; /* header wordmark LOGO only — original brand font, never change */ --topbar:50px; --fnbar:34px; --ticker:26px; --status:26px; } :root[data-theme="light"]{ --bg:#F7F4EC; --s1:#FFFFFF; --s2:#FBF8F0; --s3:#F1ECE0; --line:#E8E2D4; --line2:#DAD2C0; --bstrong:#C4BBA6; --t1:#1A1814; --t2:#57534A; --t3:#8A8478; --gold:#9A7A1E; --gold1:#9A7A1E; --gold2:#B08D2C; --champ:#7E6418; --gold-d:#7E6418; --up:#2E8B57; --down:#C24A3C; } /* ---------------- base ---------------- */ *{box-sizing:border-box} html,body{margin:0} /* faint film grain — dark mode only, sits in the body background behind all content, for terminal depth (within the black-gold identity) */ [data-theme="dark"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='vqn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23vqn)' opacity='0.035'/%3E%3C/svg%3E");background-attachment:fixed} html{-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--t1);font-family:var(--kr);font-size:14px;line-height:1.55; -webkit-font-smoothing:antialiased;letter-spacing:-.005em;padding-bottom:var(--status)} /* sticky chrome + normal page scroll (uniform for app + doc pages, iOS-safe) */ .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .ui{font-family:var(--ui)} .up{color:var(--up)} .down{color:var(--down)} .gold-text,.gold{color:var(--gold2)} .symchg{font-family:var(--mono);font-size:12px;margin-left:8px;white-space:nowrap} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t3)} a{color:var(--gold2);text-decoration:none} a:hover{color:var(--champ)} img{max-width:100%} ::selection{background:rgba(212,175,55,.24)} :focus-visible{outline:2px solid var(--gold);outline-offset:1px} input,textarea,select,button{border-radius:0} /* terminal: square form controls everywhere */ input[type=search]{-webkit-appearance:none;appearance:none} /* kill Safari/iOS native rounded search pill */ input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none} *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-thumb{background:var(--line2)} *::-webkit-scrollbar-track{background:transparent} .wrap{max-width:1180px;margin:0 auto;padding:0 22px} /* ============================== TOP BAR ============================== */ .vqtop{height:var(--topbar);position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:14px;padding:0 16px; border-bottom:1px solid var(--line);background:var(--s1)} .vqbrand{display:flex;align-items:center;gap:9px;flex:0 0 auto;text-decoration:none} .vqbrand img.vmark{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(212,175,55,.28))} .vqbrand .wm{font-family:var(--brand);font-weight:700;font-size:23px;letter-spacing:.12em;text-transform:uppercase; color:var(--t1);line-height:1} .vqbrand .wm b{color:inherit;font-weight:700} /* wordmark all white (no gold Q) */ .vqcmd{flex:1 1 auto;max-width:560px;display:flex;align-items:center;gap:8px;height:32px;padding:0 11px; border:1px solid var(--line2);background:var(--bg)} .vqcmd:focus-within{border-color:var(--gold-d)} .vqcmd .pfx{font-family:var(--mono);font-size:12px;color:var(--gold2);font-weight:600} .vqcmd input{flex:1;border:0;background:transparent;color:var(--t1);font-family:var(--mono);font-size:12.5px;outline:0} .vqcmd input::placeholder{color:var(--t3)} .vqcmd kbd{font-family:var(--mono);font-size:10px;color:var(--t3);border:1px solid var(--line2);padding:1px 5px} .vqutil{display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto} .vqbtn{display:grid;place-items:center;height:32px;min-width:32px;padding:0 9px;border:1px solid var(--line2); background:var(--s1);color:var(--t2);font-family:var(--mono);font-size:12px;cursor:pointer;transition:.12s} .vqbtn:hover{color:var(--gold2);border-color:var(--gold-d)} #vqAcct{white-space:nowrap} .vqlang{display:flex;border:1px solid var(--line2);height:32px;overflow:hidden} .vqlang button{border:0;background:transparent;color:var(--t3);font-family:var(--mono);font-size:11px;font-weight:600;padding:0 9px;cursor:pointer} .vqlang button.on{background:var(--s3);color:var(--gold2)} .vqsns{display:inline-flex;align-items:center;gap:2px} .vqsns a{display:grid;place-items:center;width:30px;height:30px;color:var(--t3);transition:.14s} .vqsns a:hover{color:var(--gold2)} .vqsns svg{width:16px;height:16px} .vqcmdtrigger{display:none} @media(max-width:760px){.vqsns{display:none}} /* header Vaquero-gauge dropdown (moved from the old bottom-left popup) */ .vqgauge-wrap{position:relative} .vqgbtn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 10px;border:1px solid var(--line2);background:var(--s1);color:var(--t2);font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer} .vqgbtn:hover,.vqgauge-wrap.open .vqgbtn{color:var(--gold2);border-color:var(--gold-d)} .vqgbtn .dots{display:inline-flex;gap:3px} .vqgbtn .dots i{width:7px;height:7px;background:var(--bstrong)} .vqgauge-drop{position:absolute;top:calc(100% + 8px);right:0;width:268px;background:var(--s1);border:1px solid var(--line2);box-shadow:0 24px 60px -24px rgba(0,0,0,.85);padding:13px 14px;display:none;z-index:120} .vqgauge-wrap.open .vqgauge-drop{display:block} .vqgauge-drop .gtitle{font-family:var(--ui);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:10px} .vqgrow{display:flex;align-items:center;gap:8px;margin:10px 0} .vqgrow .lbl{font-family:var(--ui);font-size:11px;color:var(--t2);width:52px;flex:0 0 auto} .vqgrow .bar{flex:1;height:7px;background:linear-gradient(90deg,var(--down),var(--warn),var(--up));position:relative} .vqgrow .bar i{position:absolute;top:-2px;width:3px;height:11px;background:var(--t1);box-shadow:0 0 0 1px var(--bg);transform:translateX(-50%);transition:left .4s} .vqgrow .sc{font-family:var(--mono);font-size:13px;font-weight:700;width:22px;text-align:right;color:var(--t2)} .vqgauge-drop .zns{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--t3);margin-top:2px} .vqgauge-drop .more{display:block;text-align:right;font-size:11px;color:var(--gold2);margin-top:11px;padding-top:9px;border-top:1px solid var(--line)} .vqgauge-drop .gdisc{font-family:var(--mono);font-size:9px;color:var(--t3);line-height:1.5;margin-top:8px} @media(max-width:760px){.vqgauge-drop{right:-30px;width:244px}} /* ============================== FUNCTION BAR ============================== */ .vqfn{height:var(--fnbar);position:sticky;top:var(--topbar);z-index:99;display:flex;align-items:stretch;border-bottom:1px solid var(--line); background:var(--bg);overflow-x:auto;scrollbar-width:none} .vqfn::-webkit-scrollbar{display:none} .vqfn a{display:flex;align-items:center;gap:7px;padding:0 14px;border-right:1px solid var(--line); font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--t2);cursor:pointer;white-space:nowrap;transition:.12s;text-decoration:none} .vqfn a:hover{color:var(--t1);background:var(--s1)} .vqfn a.on{color:var(--gold2);box-shadow:inset 0 -2px 0 var(--gold)} /* ============================== TICKER TAPE ============================== */ .vqtape{height:var(--ticker);position:sticky;top:calc(var(--topbar) + var(--fnbar));z-index:98;overflow:hidden;background:var(--s1);border-bottom:1px solid var(--line);display:flex;align-items:center} .vqtape-track{display:inline-flex;align-items:center;white-space:nowrap;animation:vqtape 64s linear infinite;will-change:transform} .vqtape:hover .vqtape-track{animation-play-state:paused} @keyframes vqtape{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes vqrise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} .vqtape .tk{display:inline-flex;align-items:baseline;gap:7px;padding:0 18px;border-right:1px solid var(--line);font-family:var(--mono);font-size:11.5px} .vqtape .tk .s{color:var(--t2);font-weight:600} .vqtape .tk .p{color:var(--t1)} .vqtape .tk .c{font-size:10.5px} @media(prefers-reduced-motion:reduce){.vqtape-track{animation:none}.vqgrid>.vqpanel{animation:none!important}} /* ============================== WORKSPACE / PANELS ============================== */ .vqwork{padding:10px} .vqgrid{max-width:2280px;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);gap:8px;align-content:start} /* panel = a live instrument surface: faint inset top-highlight + barely-there elevation (vs flat diagram). theme-aware. */ .vqpanel{border:1px solid var(--line);background:var(--s1);display:flex;flex-direction:column;min-width:0;min-height:0;box-shadow:0 1px 0 rgba(255,255,255,.025) inset,0 10px 26px -20px rgba(0,0,0,.6)} :root[data-theme="light"] .vqpanel{box-shadow:0 1px 0 rgba(255,255,255,.65) inset,0 8px 22px -20px rgba(0,0,0,.12)} /* one orchestrated page-load reveal — panels rise in sequence ("system coming online"); reduced-motion disables it */ .vqgrid>.vqpanel{animation:vqrise .42s cubic-bezier(.22,1,.36,1) both} .vqgrid>.vqpanel:nth-child(2){animation-delay:.04s}.vqgrid>.vqpanel:nth-child(3){animation-delay:.08s}.vqgrid>.vqpanel:nth-child(4){animation-delay:.12s}.vqgrid>.vqpanel:nth-child(5){animation-delay:.16s}.vqgrid>.vqpanel:nth-child(6){animation-delay:.2s}.vqgrid>.vqpanel:nth-child(7){animation-delay:.24s}.vqgrid>.vqpanel:nth-child(n+8){animation-delay:.27s} /* header reads as a chassis bezel over the live screen */ .phead{flex:0 0 auto;display:flex;align-items:center;gap:8px;height:30px;padding:0 11px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--s2),var(--s1))} .ptitle{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t2)} .pdot{width:6px;height:6px;background:var(--gold);flex:0 0 auto} .phead .right{margin-left:auto;display:flex;align-items:center;gap:6px} .badge{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;border:1px solid var(--line2);color:var(--t3)} .badge.live{color:var(--up);border-color:rgba(79,180,119,.4)} .badge.live::before{content:"●";font-size:7px;margin-right:4px;vertical-align:1px} .badge.warn{color:var(--warn);border-color:rgba(227,169,60,.45)} .pbtn{font-family:var(--mono);font-size:10px;color:var(--t3);border:1px solid var(--line2);background:transparent;padding:2px 7px;cursor:pointer} .pbtn:hover{color:var(--gold2);border-color:var(--gold-d)} .pbtn.on{color:var(--gold2);border-color:var(--gold-d);background:var(--s3)} .pbody{flex:1 1 auto;overflow:auto;padding:12px} .pbody.flush{padding:0} .c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4} .c5{grid-column:span 5}.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8} .c9{grid-column:span 9}.c10{grid-column:span 10}.c12{grid-column:span 12} /* ---------------- gauges ---------------- */ .gauge+.gauge{margin-top:16px} .glabel{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px} .glabel .n{font-family:var(--ui);font-size:12px;font-weight:600;color:var(--t1);letter-spacing:.04em} .glabel .v{font-family:var(--mono);font-size:13px;font-weight:700} .gtrack{position:relative;height:8px;background:linear-gradient(90deg,var(--down),var(--warn) 48%,var(--up));border:1px solid var(--line2)} .gneedle{position:absolute;top:-3px;width:2px;height:14px;background:var(--t1);box-shadow:0 0 0 1px var(--bg);transition:left .4s} .gzone{margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--t2);display:flex;justify-content:space-between} .gread{margin-top:14px;font-size:12px;line-height:1.6;color:var(--t2);border-left:2px solid var(--line2);padding-left:11px} .disc{margin-top:12px;font-family:var(--mono);font-size:9.5px;color:var(--t3);line-height:1.6} /* explanatory note (legible — for feature captions; .disc stays reserved for fine-print legal) */ .pnote{font-size:12.5px;color:var(--t2);line-height:1.65} /* ---------------- snapshot strip ---------------- */ .snap{display:flex;flex-wrap:wrap;gap:0} .snap .cell{flex:1 1 110px;padding:6px 12px;border-right:1px solid var(--line)} .snap .cell:last-child{border-right:0} .snap .k{font-family:var(--ui);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)} .snap .v{font-family:var(--mono);font-size:16px;font-weight:600;margin-top:2px} .snap .d{font-family:var(--mono);font-size:10.5px;margin-top:1px} /* ---------------- tables ---------------- */ table.dt{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px} table.dt th{text-align:right;font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:var(--t3);padding:6px 11px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--s1);z-index:1} table.dt th:first-child,table.dt td:first-child{text-align:left} table.dt td{text-align:right;padding:5px 11px;border-bottom:1px solid var(--line);color:var(--t1);white-space:nowrap} table.dt tr:hover td{background:var(--s2)} table.dt .sym{color:var(--t1);font-weight:600;cursor:pointer} table.dt .sym:hover{color:var(--gold2)} /* ---------------- observatory mini cards ---------------- */ .obs{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ocard{border:1px solid var(--line);padding:9px 11px;transition:border-color .15s,background .15s} .ocard:hover{border-color:var(--line2);background:rgba(212,175,55,.022)} .ocard .k{font-family:var(--ui);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)} .ocard .v{font-family:var(--mono);font-size:17px;font-weight:600;margin-top:3px} .ocard .b{height:4px;margin-top:7px;background:var(--s3);position:relative;overflow:hidden} .ocard .b i{position:absolute;left:0;top:0;bottom:0;background:var(--gold);display:block} /* ---------------- posts list ---------------- */ .post{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;text-decoration:none} .post:last-child{border-bottom:0} .post:hover .pt{color:var(--gold2)} .post .cat{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d);border:1px solid var(--line2);padding:1px 5px;height:fit-content;white-space:nowrap} .post .pt{font-size:12.5px;color:var(--t1);line-height:1.45} .post .pm{font-family:var(--mono);font-size:10px;color:var(--t3);margin-top:2px} /* ============================== CHART (vqchart / KLineCharts) ============================== */ /* absolute-fill inside a position:relative wrap → definite size for KLineCharts on iOS Safari (flex/min-height children can resolve to 0 height on iOS, breaking canvas render) */ /* wrap = left drawing toolbar + chart host. host is overflow:hidden (no scrollbar→ResizeObserver loop = the open-jitter bug) */ .vqchart-wrap{flex:1 1 auto;display:flex;min-height:320px;overflow:hidden} @media(max-height:560px){.vqchart-wrap{min-height:0}} /* mobile landscape: let chart shrink to fit (no volume clipping) */ .vqchart-host{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;contain:layout paint} /* isolate canvas resizes from page layout (NOT contain:size — JS sets px) */ .vqchart{position:absolute;inset:0;width:100%;height:100%} .vqchart canvas{cursor:crosshair} /* pro-terminal crosshair on the chart surface */ /* clean no-data state (replaces the old synthetic sine-wave fallback for nonexistent tickers) */ .vqchart-nodata{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px; background:var(--bg);color:var(--t3);text-align:center;padding:24px} .vqchart-nodata[hidden]{display:none} /* date-range quick tabs (bottom-left, TradingView-style) */ .vqc-range{position:absolute;left:6px;bottom:4px;z-index:20;display:flex;gap:2px;opacity:.9;flex-wrap:wrap;max-width:72%} .vqc-range button{font-family:var(--mono);font-size:10px;color:var(--t3);background:var(--s1);border:1px solid var(--line);padding:2px 6px;cursor:pointer} .vqc-range button:hover{color:var(--gold2);border-color:var(--gold-d)} .vqc-range button.on{color:#0A0A0B;background:var(--gold2);border-color:var(--gold2);font-weight:700} @media(max-width:600px){.vqc-range{opacity:.95}.vqc-range button{font-size:9px;padding:2px 4px}} .vqchart-nodata .nd-i{color:var(--line2)}.vqchart-nodata .nd-i svg{width:34px;height:34px;display:block} .vqchart-nodata .nd-t{font-family:var(--ui);font-size:15px;font-weight:700;color:var(--t2);letter-spacing:.02em} .vqchart-nodata .nd-s{font-family:var(--mono);font-size:12px;color:var(--t3);max-width:280px;line-height:1.6} /* LEFT vertical drawing toolbar (always visible — discoverable, TradingView-style) */ .vqc-left{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;padding:4px;border-right:1px solid var(--line);background:var(--s1);overflow-y:auto;scrollbar-width:none} .vqc-left::-webkit-scrollbar{display:none} .vqc-tool{width:28px;height:28px;display:grid;place-items:center;border:1px solid transparent;background:transparent;color:var(--t2);font-family:var(--mono);font-size:13px;cursor:pointer;line-height:1} .vqc-tool:hover{color:var(--gold2);border-color:var(--line2);background:var(--bg)} .vqc-tool.on,.vqc-tool.act{color:var(--gold2);border-color:var(--gold-d);background:var(--s3)} .vqc-star.on{color:var(--gold2);border-color:var(--gold-d)} @media(max-width:600px){.vqc-left{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.vqchart-wrap{flex-direction:column}} /* mobile portrait: the chart header was cramming symbol + change + the whole toolbar into one tiny row (toolbar squeezed to ~100px). Wrap it — symbol/change on row 1, the toolbar gets its own full-width scrollable row 2. */ @media(max-width:600px){ .vqc-head{flex-wrap:wrap;height:auto;min-height:34px;padding-top:5px;padding-bottom:5px;row-gap:6px} .vqc-head .right{margin-left:0;flex:1 1 100%;justify-content:flex-start;gap:7px} .vqc-head .vqc-tools{gap:7px} .vqc-head .vqc-tools .pbtn{padding:5px 6px} } /* average-price line popover (differentiator) */ .vqavg-pop{position:absolute;top:8px;left:8px;z-index:45;width:min(344px,90%);background:var(--s1);border:1px solid var(--line2);box-shadow:0 24px 60px -24px rgba(0,0,0,.8);padding:11px 12px;max-height:84%;overflow:auto} .vqavg-pop[hidden]{display:none} .vqc-note-pop{position:absolute;top:8px;right:8px;z-index:46;width:min(280px,86%);background:var(--s1);border:1px solid var(--line2);box-shadow:0 24px 60px -24px rgba(0,0,0,.8);padding:11px 12px 6px} .vqc-note-pop[hidden]{display:none} .vqc-note-pop .avg-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--ui);font-size:11.5px;font-weight:700;color:var(--gold2);letter-spacing:.04em;margin-bottom:8px} .vqc-note-pop .avg-x{border:0;background:transparent;color:var(--t3);font-size:16px;cursor:pointer;line-height:1} .vqc-note-ta{width:100%;box-sizing:border-box;height:118px;resize:vertical;border:1px solid var(--line);background:var(--s3);color:var(--t1);font-family:var(--ui);font-size:12.5px;line-height:1.55;padding:8px 10px;outline:0} .vqc-note-ta:focus{border-color:var(--gold)} .vqc-note-st{font-family:var(--mono);font-size:10px;color:var(--t3);padding:4px 0 2px;min-height:14px} .vqc-trade-pop{position:absolute;top:8px;right:8px;z-index:47;width:min(250px,86%);background:var(--s1);border:1px solid var(--line2);box-shadow:0 24px 60px -24px rgba(0,0,0,.8);padding:11px 12px 10px} .vqc-trade-pop[hidden]{display:none} .vqc-trade-pop .avg-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--ui);font-size:11.5px;font-weight:700;color:var(--gold2);letter-spacing:.04em;margin-bottom:8px} .vqc-trade-pop .avg-x{border:0;background:transparent;color:var(--t3);font-size:16px;cursor:pointer;line-height:1} .vqt-px{font-family:var(--mono);font-size:12px;color:var(--t2);margin-bottom:9px}.vqt-px b{color:var(--t1)} .vqt-side{display:flex;gap:0;margin-bottom:9px} .vqt-b{flex:1;padding:7px;border:1px solid var(--line2);background:transparent;color:var(--t2);font-family:var(--ui);font-size:12.5px;font-weight:700;cursor:pointer} .vqt-b.buy.on{background:rgba(79,180,119,.16);border-color:var(--up);color:var(--up)} .vqt-b.sell.on{background:rgba(224,106,92,.16);border-color:var(--down);color:var(--down)} .vqt-b+.vqt-b{border-left:0} .vqt-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--t2);margin-bottom:8px} .vqt-row input{width:120px;box-sizing:border-box;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:13px;padding:6px 9px;text-align:right} .vqt-est{font-family:var(--mono);font-size:11px;color:var(--t3);min-height:14px;margin-bottom:8px} .vqt-submit{width:100%;padding:9px;border:0;font-family:var(--ui);font-weight:700;font-size:13.5px;cursor:pointer;color:#0A0A0B} .vqt-submit.buy{background:var(--up)}.vqt-submit.sell{background:var(--down)} .vqt-st{font-family:var(--mono);font-size:10.5px;margin-top:7px;min-height:13px} .vqt-st.up{color:var(--up)}.vqt-st.down{color:var(--down)} .vqt-reset{width:100%;margin-top:9px;padding:6px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--t3);font-family:var(--ui);font-size:11px;cursor:pointer} .vqt-reset:hover{color:var(--down)} .vqt-help-t{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--gold2);font-family:var(--ui);font-size:11px;cursor:pointer;padding:0 0 8px} .vqt-help{font-size:11px;line-height:1.62;color:var(--t2);background:var(--s3);border:1px solid var(--line);padding:8px 9px;margin-bottom:9px} .vqt-help[hidden]{display:none} .vqt-ctx{display:flex;flex-wrap:wrap;gap:3px 12px;font-family:var(--mono);font-size:11px;color:var(--t3);margin-bottom:9px} .vqt-ctx b{color:var(--t1)}.vqt-ctx b.up{color:var(--up)}.vqt-ctx b.down{color:var(--down)} /* ---- live order book (coin.html, Binance depth WS) ---- */ .ob{font-family:var(--mono);font-size:11px} .ob-side{display:flex;flex-direction:column} .ob-row{position:relative;display:flex;justify-content:space-between;align-items:center;padding:2px 11px;line-height:1.7;overflow:hidden} .ob-d{position:absolute;top:0;bottom:0;right:0;opacity:.13;pointer-events:none} .ob-row.ask .ob-d{background:var(--down)} .ob-row.bid .ob-d{background:var(--up)} .ob-p{position:relative;z-index:1;font-variant-numeric:tabular-nums} .ob-q{position:relative;z-index:1;color:var(--t2);font-variant-numeric:tabular-nums} .ob-row.ask .ob-p{color:var(--down)} .ob-row.bid .ob-p{color:var(--up)} .ob-mid{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 11px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--s3)} .ob-mid-px{font-size:14px;font-weight:700;color:var(--t1)} .ob-mid-sp{font-size:10px;color:var(--t3)} /* AI help chat widget (floating) */ .vqchat-fab{position:fixed;right:18px;bottom:calc(var(--status) + 16px);z-index:120;width:48px;height:48px;border-radius:50%;border:1px solid var(--gold-d);background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1407;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)} .vqchat-pan{position:fixed;right:18px;bottom:calc(var(--status) + 124px);z-index:120;width:min(340px,calc(100vw - 28px));height:min(460px,68vh);background:var(--s1);border:1px solid var(--line2);display:flex;flex-direction:column;box-shadow:0 30px 70px -24px rgba(0,0,0,.7)} .vqchat-pan[hidden]{display:none} .vqchat-h{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);font-family:var(--disp);font-weight:700;font-size:15px;color:var(--gold2)} .vqchat-x{border:0;background:transparent;color:var(--t3);font-size:18px;cursor:pointer;line-height:1} .vqchat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px} .vqchat-m{max-width:86%;padding:8px 11px;font-size:13px;line-height:1.55;white-space:pre-wrap} .vqchat-m.me{align-self:flex-end;background:var(--gold);color:#1a1407} .vqchat-m.bot{align-self:flex-start;background:var(--s3);color:var(--t1);border:1px solid var(--line)} .vqchat-in{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line)} .vqchat-in input{flex:1;min-width:0;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-size:13px;padding:8px 11px} .vqchat-in button{border:0;background:var(--gold);color:#1a1407;font-weight:700;padding:0 14px;cursor:pointer;font-size:15px} .vqavg-pop .avg-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--ui);font-size:11.5px;font-weight:700;color:var(--gold2);letter-spacing:.04em;margin-bottom:9px} .vqavg-pop .avg-x{border:0;background:transparent;color:var(--t3);font-size:17px;cursor:pointer;line-height:1} .vqavg-pop .avg-row{display:flex;gap:6px;margin-bottom:6px} .vqavg-pop .avg-row input{flex:1;min-width:0;box-sizing:border-box;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:12px;padding:7px 8px} .vqavg-pop .avg-row input:focus{outline:0;border-color:var(--gold)} .vqavg-pop .avg-del{flex:0 0 auto;border:1px solid var(--line2);background:transparent;color:var(--t3);cursor:pointer;font-size:11px;padding:0 7px} .vqavg-pop .avg-del:hover{color:var(--down);border-color:var(--down)} .vqavg-pop .avg-add{width:100%;border:1px dashed var(--line2);background:transparent;color:var(--gold2);font-family:var(--mono);font-size:11px;padding:6px;cursor:pointer;margin:2px 0 8px} .vqavg-pop .avg-res{font-size:12.5px;color:var(--t2);border-top:1px solid var(--line);padding-top:8px;line-height:1.7} .vqavg-pop .avg-res b{font-family:var(--mono);color:var(--gold2);font-size:14px} .vqavg-pop .avg-res b.up{color:var(--up)}.vqavg-pop .avg-res b.down{color:var(--down)} /* trade-journal rows */ .vqavg-pop .jnote{font-size:11px;color:var(--t3);line-height:1.5;margin-bottom:9px} .vqavg-pop .jrow{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid var(--line)} .vqavg-pop .jside{flex:0 0 auto;width:28px;height:28px;border:1px solid var(--line2);background:var(--s3);font-family:var(--mono);font-weight:700;font-size:12px;cursor:pointer} .vqavg-pop .jside.long{color:var(--up);border-color:var(--up)} .vqavg-pop .jside.short{color:var(--down);border-color:var(--down)} .vqavg-pop .jdt{flex:1 1 128px;min-width:0;box-sizing:border-box;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:11px;padding:6px} .vqavg-pop .jqty{flex:1 1 54px;min-width:0;box-sizing:border-box;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:12px;padding:6px 7px} .vqavg-pop .jdt:focus,.vqavg-pop .jqty:focus{outline:0;border-color:var(--gold)} .vqavg-pop .jpx{flex:0 0 auto;min-width:52px;text-align:right;font-size:11px;color:var(--t2)} .symbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);background:var(--bg); color:var(--t1);font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.04em;padding:3px 10px;cursor:pointer} .symbtn:hover{border-color:var(--gold-d);color:var(--gold2)} .symbtn .mag{font-family:var(--mono);color:var(--gold2);font-size:13px;line-height:1} .symbtn .symcaret{font-size:9px;color:var(--t3)} .symbtn .symlbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw} /* never wrap the ticker to 2 lines */ .symsearch{display:none;position:absolute;top:8px;left:8px;z-index:40;width:min(340px,74%); background:var(--s1);border:1px solid var(--line2);box-shadow:0 24px 60px -24px rgba(0,0,0,.8)} .symsearch.open{display:block} .symsearch input{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--line);background:transparent; color:var(--t1);font-family:var(--mono);font-size:13px;padding:11px 13px;outline:0} .symlist{max-height:264px;overflow:auto;padding:5px} .symrow{display:flex;align-items:center;gap:9px;padding:7px 9px;cursor:pointer;border-left:2px solid transparent} .symrow:hover{background:var(--s2);border-left-color:var(--gold)} .symrow .tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;padding:1px 5px;border:1px solid var(--line2);color:var(--t3);width:46px;text-align:center;flex:0 0 auto} .symrow .tag.crypto{color:var(--gold2);border-color:var(--gold-d)} .symrow .tag.us{color:var(--info);border-color:rgba(91,141,239,.4)} .symrow .sname{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--t1)} .symrow .sfull{font-size:11px;color:var(--t3);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tf{display:flex;gap:0} .tf .pbtn{border-right:0} .tf .pbtn:last-child{border-right:1px solid var(--line2)} /* superchart toolbar + dropdown menus */ .vqc-tools{display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none;max-width:100%} .vqc-tools::-webkit-scrollbar{display:none} .vqc-mwrap{position:relative;display:inline-flex;flex:0 0 auto} .vqc-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:158px;max-height:320px;overflow:auto;background:var(--s1);border:1px solid var(--line2);box-shadow:0 18px 50px -20px rgba(0,0,0,.82);padding:5px;display:none;z-index:60;will-change:transform;contain:layout paint} .vqc-mwrap.open .vqc-menu{display:block} .vqc-menu button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--t2);font-family:var(--mono);font-size:11.5px;padding:6px 9px;cursor:pointer;white-space:nowrap} .vqc-menu button:hover{background:var(--s2);color:var(--t1)} .vqc-menu button.on{color:var(--gold2)} .vqc-menu button.on::after{content:"●";font-size:7px;color:var(--gold)} .vqc-menu .mh{font-family:var(--ui);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);padding:7px 9px 3px;border-top:1px solid var(--line);margin-top:4px} .vqc-menu .mh:first-child{border-top:0;margin-top:0} /* drawing object-tree (per-symbol): list + per-item delete + count badge */ .vqc-empty{font-family:var(--mono);font-size:10.5px;color:var(--t3);padding:8px 9px;line-height:1.5} .vqc-menu button.vqc-obj{justify-content:space-between} .vqc-menu button.vqc-obj .on-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vqc-menu .vqc-del{color:var(--t3);padding:0 4px;cursor:pointer;font-size:11px} .vqc-menu button.vqc-obj:hover .vqc-del{color:var(--down)} .vqc-mwrap[data-menu=obj] .pbtn{position:relative} .vqc-mwrap[data-menu=obj] .pbtn[data-n]:not([data-n=""])::after{content:attr(data-n);position:absolute;top:-5px;right:-5px;min-width:13px;height:13px;line-height:13px;text-align:center;font-family:var(--mono);font-size:8.5px;font-weight:700;color:#0A0A0B;background:var(--gold2)} /* fullscreen */ /* chart tool icons (custom SVG, terminal aesthetic) */ .vqc-left .vqc-tool{display:grid;place-items:center} .vqc-left .vqc-tool svg{width:17px;height:17px;display:block} .vqc-tools .pbtn svg{width:15px;height:15px;display:block} .vqc-mwrap .pbtn,.vqc-tools .pbtn{display:inline-flex;align-items:center;justify-content:center} .symbtn .mag{display:inline-flex}.symbtn .mag svg{width:14px;height:14px;display:block} .symcaret{display:inline-flex}.symcaret svg{width:12px;height:12px;display:block;opacity:.7} .vqc-star.on svg{fill:var(--gold);stroke:var(--gold)} /* timeframe: unit buttons + concrete-interval dropdown */ .tf{display:flex;align-items:center} .tfu{position:relative;display:inline-flex} .tfu .tfu-btn{display:inline-flex;align-items:center;gap:3px} .tfu.on .tfu-btn{color:var(--gold2);border-color:var(--gold-d);background:var(--s3)} .tf .tfu .tfu-btn{border-right:0} .tf .tfu:last-child .tfu-btn{border-right:1px solid var(--line2)} .tfu-car{display:inline-flex}.tfu-car svg{width:10px;height:10px;display:block;opacity:.6} .tfu-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:104px;background:var(--s1);border:1px solid var(--line2);box-shadow:0 18px 50px -20px rgba(0,0,0,.82);padding:4px;display:none;z-index:60;will-change:transform;contain:layout paint} .tfu.mopen .tfu-menu{display:block} .tfu-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--t2);font-family:var(--mono);font-size:11.5px;padding:6px 11px;cursor:pointer;white-space:nowrap} .tfu-menu button:hover{background:var(--s2);color:var(--t1)} .tfu-menu button.on{color:var(--gold2)} /* guest (signed-out): drawing tools are dimmed; clicking prompts sign-in */ .vqc-guest .vqc-left .vqc-tool{opacity:.45} /* indicator catalog menu (searchable) */ .vqind-search{padding:1px 1px 6px;position:sticky;top:0;background:var(--s1);z-index:1} .vqind-q{width:100%;box-sizing:border-box;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:11.5px;padding:6px 9px} .vqind-q:focus{outline:0;border-color:var(--gold-d)} .vqind-row{display:flex;align-items:center;gap:2px} .vqind-tog{flex:1 1 auto;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--t2);font-family:var(--mono);font-size:11.5px;padding:6px 9px;cursor:pointer;text-align:left;white-space:nowrap;min-width:0} .vqind-tog:hover{background:var(--s2);color:var(--t1)} .vqind-dot{width:7px;height:7px;flex:0 0 auto;border:1px solid var(--line2)} .vqind-row.on .vqind-dot{background:var(--gold);border-color:var(--gold)} .vqind-row.on .vqind-nm{color:var(--gold2)} .vqind-nm{overflow:hidden;text-overflow:ellipsis} .vqind-tag{margin-left:auto;font-size:8.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto;padding-left:6px} .vqind-gear{flex:0 0 auto;border:0;background:transparent;color:var(--t3);cursor:pointer;padding:4px 6px;display:inline-flex} .vqind-gear:hover{color:var(--gold2)}.vqind-gear svg{width:14px;height:14px;display:block} /* indicator settings dialog */ .vqind-set,.vqdraw-set{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:200;width:min(320px,92vw);background:var(--s1);border:1px solid var(--line2);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)} .vqis-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-family:var(--ui);font-weight:700;font-size:13.5px;color:var(--t1)} .vqis-x{border:0;background:transparent;color:var(--t3);cursor:pointer;display:inline-flex}.vqis-x svg{width:16px;height:16px;display:block}.vqis-x:hover{color:var(--down)} .vqis-body{padding:12px 14px;display:flex;flex-direction:column;gap:9px;max-height:50vh;overflow:auto} .vqis-f{display:flex;align-items:center;justify-content:space-between;gap:12px} .vqis-f span{font-family:var(--mono);font-size:11.5px;color:var(--t3)} .vqis-f input{width:96px;box-sizing:border-box;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:13px;padding:6px 9px} .vqis-f input:focus{outline:0;border-color:var(--gold)} .vqis-ft{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--line)} .vqis-ft button{border:1px solid var(--line2);background:transparent;color:var(--t2);font-family:var(--ui);font-weight:600;font-size:12px;padding:7px 14px;cursor:pointer} .vqis-apply{border:0!important;color:#1a1407!important;background:linear-gradient(92deg,var(--gold),var(--gold2))!important} .vqis-del{color:var(--down)!important;border-color:rgba(224,106,92,.4)!important;margin-right:auto} /* indicator settings: Inputs/Style tabs + per-figure style rows */ .vqis-tabs{display:flex;border-bottom:1px solid var(--line)} .vqis-tab{flex:1;border:0;background:transparent;color:var(--t3);font-family:var(--ui);font-size:12px;font-weight:600;padding:9px 0;cursor:pointer;border-bottom:2px solid transparent} .vqis-tab.on{color:var(--gold2);border-bottom-color:var(--gold)} .vqis-pane{display:none;flex-direction:column;gap:9px} .vqis-pane.on{display:flex} .vqis-hint{font-family:var(--mono);font-size:11px;color:var(--t3);line-height:1.6} .vqis-figrow{display:flex;align-items:center;gap:9px} .vqis-fnm{flex:1;font-family:var(--mono);font-size:11.5px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vqis-fc{width:30px;height:24px;padding:0;border:1px solid var(--line2);background:transparent;cursor:pointer;flex:0 0 auto} .vqis-fw{border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:12px;padding:5px 7px;flex:0 0 auto} .vqis-fw:focus{outline:0;border-color:var(--gold)} /* bar replay control strip (bottom-center of the chart host) */ .vqreplay{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:35;display:flex;align-items:center;gap:4px; background:var(--s1);border:1px solid var(--line2);box-shadow:0 14px 40px -18px rgba(0,0,0,.8);padding:5px 7px} .vqreplay .rp-b{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;border:1px solid transparent;background:transparent;color:var(--t2);cursor:pointer} .vqreplay .rp-b:hover{color:var(--gold2);border-color:var(--gold-d)} .vqreplay .rp-b svg{width:16px;height:16px} .vqreplay .rp-play{color:var(--gold2)} .vqreplay .rp-exit{color:var(--t3)}.vqreplay .rp-exit:hover{color:var(--down);border-color:rgba(224,106,92,.4)} .vqreplay .rp-spd{border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:11px;padding:4px 5px;cursor:pointer} .vqreplay .rp-pos{font-family:var(--mono);font-size:10.5px;color:var(--t3);padding:0 6px;white-space:nowrap} .vqc-replay.on,.vqc-cmp.on{color:var(--gold2);border-color:var(--gold-d);background:var(--s3)} /* compare search inside the cmp dropdown */ .vqcmp-search{padding:1px 1px 6px} .vqcmp-q{width:100%;box-sizing:border-box;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:11.5px;padding:6px 9px} .vqcmp-q:focus{outline:0;border-color:var(--gold-d)} .vqcmp-list{max-height:230px;overflow:auto} /* drawing right-click context menu */ /* indicator picker modal (TradingView-style) — below .vqind-set (z200) so its gear→settings popup sits on top */ .vqind-mov{position:fixed;inset:0;z-index:180;display:none;background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:20px} .vqind-mov.open{display:flex} .vqind-modal{width:min(720px,95vw);max-height:82vh;background:var(--s1);border:1px solid var(--line2);display:flex;flex-direction:column;box-shadow:0 40px 90px -30px rgba(0,0,0,.85)} .vqim-head{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)} .vqim-ttl{font-family:var(--disp);font-size:18px;font-weight:700;flex:0 0 auto} .vqim-search{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--line2);background:var(--s3);padding:7px 11px} .vqim-mag{flex:0 0 auto;color:var(--t3)}.vqim-mag svg{width:15px;height:15px;display:block} .vqim-q{flex:1;border:0;background:transparent;color:var(--t1);font-size:13.5px;outline:0;font-family:var(--ui)} .vqim-x{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border:0;background:transparent;color:var(--t2);cursor:pointer}.vqim-x svg{width:16px;height:16px} .vqim-body{display:flex;min-height:0;flex:1} .vqim-rail{flex:0 0 152px;border-right:1px solid var(--line);overflow:auto;padding:8px 0} .vqim-cat{display:block;width:100%;text-align:left;padding:8px 16px;border:0;border-left:2px solid transparent;background:transparent;color:var(--t2);font-size:12.5px;font-family:var(--ui);cursor:pointer} .vqim-cat:hover{background:var(--s2);color:var(--t1)} .vqim-cat.on{color:var(--gold2);border-left-color:var(--gold);background:var(--s2)} .vqim-list{flex:1;overflow:auto;padding:4px 0} .vqim-row{display:flex;align-items:center;gap:9px;padding:9px 16px;cursor:pointer;border-bottom:1px solid var(--line)} .vqim-row:hover{background:var(--s2)} .vqim-row.on{background:rgba(212,175,55,.08)} .vqim-fav{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border:0;background:transparent;color:var(--t3);cursor:pointer} .vqim-fav svg{width:15px;height:15px}.vqim-fav.on{color:var(--gold2)}.vqim-fav.on svg{fill:var(--gold2)} .vqim-nm{flex:1;font-size:13.5px;color:var(--t1)} .vqim-tag{flex:0 0 auto;font-family:var(--mono);font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em} .vqim-gear{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border:0;background:transparent;color:var(--t3);cursor:pointer} .vqim-gear:hover{color:var(--gold2)}.vqim-gear svg{width:15px;height:15px} .vqim-add{flex:0 0 auto;width:20px;text-align:center;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--gold2)} .vqim-row.on .vqim-add{color:var(--up)} .vqim-help{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border:0;background:transparent;color:var(--t3);cursor:pointer} .vqim-help:hover,.vqim-help.on{color:var(--gold2)}.vqim-help svg{width:14px;height:14px} .vqim-help-txt{padding:0 16px 12px 47px;font-size:12.5px;line-height:1.65;color:var(--t2);border-bottom:1px solid var(--line);background:var(--s1)} .vqim-help-txt[hidden]{display:none} .vqim-empty{padding:26px 16px;color:var(--t3);font-size:13px;text-align:center} @media(max-width:600px){.vqim-rail{flex:0 0 112px}.vqind-modal{max-height:90vh}.vqim-ttl{display:none}} .vqdraw-menu{position:fixed;z-index:210;min-width:168px;background:var(--s1);border:1px solid var(--line2);box-shadow:0 22px 60px -24px rgba(0,0,0,.85);padding:4px;will-change:transform} .vqdraw-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--t2);font-family:var(--mono);font-size:12px;padding:8px 11px;cursor:pointer;white-space:nowrap} .vqdraw-menu button:hover{background:var(--s2);color:var(--t1)} .vqdraw-menu button.danger{color:var(--down)}.vqdraw-menu button.danger:hover{background:rgba(224,106,92,.12)} /* floating mini-toolbar shown when a drawing is selected (z195 < settings z200 < menu z210) */ .vqdraw-fbar{position:fixed;z-index:195;display:flex;align-items:center;gap:5px;background:var(--s1);border:1px solid var(--line2);box-shadow:0 18px 50px -20px rgba(0,0,0,.85);padding:5px 7px} .vqdraw-fbar .fb-c{width:16px;height:16px;border:1px solid rgba(150,150,150,.4);border-radius:50%;cursor:pointer;padding:0;flex:0 0 auto} .vqdraw-fbar .fb-c.on{outline:2px solid var(--gold2);outline-offset:1px} .vqdraw-fbar .fb-sep{width:1px;height:18px;background:var(--line2);margin:0 2px;flex:0 0 auto} .vqdraw-fbar .fb-b{width:27px;height:25px;display:grid;place-items:center;border:0;background:transparent;color:var(--t2);cursor:pointer;flex:0 0 auto} .vqdraw-fbar .fb-b:hover{color:var(--gold2);background:var(--s2)} .vqdraw-fbar .fb-b.on{color:var(--gold2)} .vqdraw-fbar .fb-b.del:hover{color:var(--down)} .vqdraw-fbar .fb-b svg{width:15px;height:15px;display:block} /* drawing style settings: color swatches + native picker */ .vqds-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .vqds-row>span{font-family:var(--mono);font-size:11.5px;color:var(--t3)} .vqds-sw{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end} .vqds-c{width:18px;height:18px;border:1px solid var(--line2);cursor:pointer;padding:0} .vqds-c.on{outline:2px solid var(--gold2);outline-offset:1px} .vqds-cp{width:26px;height:22px;padding:0;border:1px solid var(--line2);background:transparent;cursor:pointer} .vqds-w,.vqds-ls{width:96px;box-sizing:border-box;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:13px;padding:6px 9px} .vqds-w:focus,.vqds-ls:focus{outline:0;border-color:var(--gold)} .vqpanel:fullscreen{width:100vw;height:100vh;background:var(--bg);border:0} .vqpanel:fullscreen .pbody{flex:1 1 auto} .vqpanel:-webkit-full-screen{width:100vw;height:100vh;background:var(--bg)} /* ============================== STATUS BAR ============================== */ .vqstatus{height:var(--status);position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;align-items:center;border-top:1px solid var(--line); background:var(--s1);font-family:var(--mono);font-size:10.5px;color:var(--t3)} .vqstatus .seg{padding:0 12px;border-right:1px solid var(--line);height:100%;display:flex;align-items:center;gap:6px;white-space:nowrap} .vqstatus .seg.r{margin-left:auto;border-right:0;border-left:1px solid var(--line)} .vqstatus .em{color:var(--gold2)} .condot{width:7px;height:7px;background:var(--up);box-shadow:0 0 6px var(--up)} .condot.bad{background:var(--down);box-shadow:0 0 6px var(--down)} /* ============================== COMMAND PALETTE ============================== */ .vqpal-ov{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(5,5,6,.6);backdrop-filter:blur(3px)} .vqpal-ov.open{display:flex} .vqpal{width:min(620px,92vw);background:var(--s1);border:1px solid var(--line2);box-shadow:0 40px 100px -30px rgba(0,0,0,.85)} .vqpal-in{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line)} .vqpal-in .pfx{font-family:var(--mono);font-size:13px;color:var(--gold2);font-weight:700} .vqpal-in input{flex:1;border:0;background:transparent;color:var(--t1);font-family:var(--mono);font-size:15px;outline:0} .vqpal-list{max-height:46vh;overflow:auto;padding:6px} .pi{display:flex;align-items:center;gap:11px;padding:9px 11px;cursor:pointer;border-left:2px solid transparent} .pi .ic{font-family:var(--mono);font-size:11px;color:var(--gold-d);width:52px;flex:0 0 auto} .pi .lb{font-size:13.5px;color:var(--t1)} .pi .sub{font-family:var(--mono);font-size:10.5px;color:var(--t3);margin-left:auto} .pi.sel{background:var(--s2);border-left-color:var(--gold)} .pi.sel .lb{color:var(--champ)} .vqpal-ft{display:flex;gap:14px;padding:8px 15px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--t3)} .vqpal-ft kbd{border:1px solid var(--line2);padding:0 4px;color:var(--t2)} /* toast */ .vqtoast{position:fixed;left:50%;bottom:calc(var(--status) + 14px);transform:translateX(-50%);z-index:250; background:var(--s2);border:1px solid var(--gold-d);color:var(--champ);font-family:var(--mono);font-size:12px; padding:8px 16px;opacity:0;transition:.2s;pointer-events:none} .vqtoast.show{opacity:1} /* ============================== AUTH MODAL ============================== */ .vqauth-ov{position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(5,5,6,.7);backdrop-filter:blur(4px)} .vqauth-ov.open{display:flex} .vqauth{width:100%;max-width:382px;background:var(--s1);border:1px solid var(--line2);padding:26px 24px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);position:relative} .vqauth-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border:0;background:transparent;color:var(--t3);font-size:20px;cursor:pointer;line-height:1} .vqauth-x:hover{color:var(--t1)} .vqauth-ttl{font-size:19px;font-weight:700;color:var(--t1);font-family:var(--ui)} .vqauth-sub{font-size:12.5px;color:var(--t3);margin:7px 0 18px;line-height:1.6} .vqauth label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);margin:12px 0 5px} .vqauth input{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-size:14.5px} .vqauth input:focus{outline:0;border-color:var(--gold)} .vqauth-btn{width:100%;margin-top:18px;padding:12px;border:0;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1407;font-size:15px;font-weight:700;cursor:pointer} .vqauth-btn:disabled{opacity:.6;cursor:default} .vqauth-toggle{margin-top:15px;font-size:12.5px;color:var(--t3);text-align:center} .vqauth-toggle a{color:var(--gold2);cursor:pointer} .vqauth-msg{font-size:12.5px;line-height:1.6;margin-top:13px;padding:10px 12px;display:none} .vqauth-msg.err{display:block;background:rgba(224,106,92,.12);border:1px solid rgba(224,106,92,.4);color:var(--down)} .vqauth-msg.ok{display:block;background:rgba(79,180,119,.12);border:1px solid rgba(79,180,119,.35);color:var(--up)} /* ============================== GLOSSARY tooltips + page ============================== */ [data-term]{border-bottom:1px dotted var(--gold2);cursor:help;text-underline-offset:2px} .vqtip{position:fixed;z-index:330;max-width:300px;background:var(--s1);border:1px solid var(--line2);padding:12px 14px;box-shadow:0 24px 60px -24px rgba(0,0,0,.85);font-size:13px;line-height:1.6} .vqtip-t{font-weight:700;color:var(--gold2);font-size:13.5px;margin-bottom:5px} .vqtip-s{color:var(--t1)} .vqtip-l{display:inline-block;margin-top:9px;font-size:12px;color:var(--info)} /* ============================== RECENT-POSTS RAIL ============================== */ .vqrail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:90} .vqrail-tab{position:relative;display:grid;place-items:center;width:38px;height:50px;border:1px solid var(--line2);border-left:0;background:var(--s1);color:var(--t1);cursor:pointer;font-size:16px;box-shadow:6px 0 24px -12px rgba(0,0,0,.6);touch-action:none} .vqdot{position:absolute;top:7px;right:7px;width:8px;height:8px;background:var(--down);box-shadow:0 0 8px var(--down)} .vqrail-panel{position:absolute;left:0;top:50%;transform:translateY(-50%) translateX(-110%);width:300px;background:var(--s1);border:1px solid var(--line2);padding:14px;transition:transform .28s cubic-bezier(.22,1,.36,1);box-shadow:20px 0 60px -30px rgba(0,0,0,.8)} .vqrail.open .vqrail-panel{transform:translateY(-50%) translateX(38px)} .vqrail-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:10px} .vqrail-h a{color:var(--gold2);font-size:11px} .vqrail-it{display:block;padding:9px 10px;border:1px solid transparent} .vqrail-it:hover{background:var(--s3);border-color:var(--line2)} .vqnew{font-family:var(--mono);font-size:9px;font-weight:700;color:#0b0c10;background:linear-gradient(92deg,var(--gold),var(--gold2));padding:1px 6px;margin-right:6px;vertical-align:1px} .vqrail-t{display:block;font-size:13px;font-weight:600;color:var(--t1);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .vqrail-d{display:block;font-family:var(--mono);font-size:10px;color:var(--t3);margin-top:3px} @media(max-width:760px){.vqrail-panel{width:min(300px,82vw)}} /* ============================== LEFT STICKY-NOTE PAD ============================== */ .vqsticky{position:fixed;left:0;top:calc(50% + 72px);transform:translateY(-50%);z-index:90} .vqsticky-tab{position:relative;display:grid;place-items:center;width:38px;height:44px;border:1px solid var(--line2);border-left:0;background:var(--s1);color:var(--gold2);cursor:pointer;box-shadow:6px 0 24px -12px rgba(0,0,0,.6);touch-action:none} .vqsticky-tab:hover{color:var(--champ)} .vqsticky-panel{position:absolute;left:0;top:50%;transform:translateY(-50%) translateX(-115%);width:280px;background:var(--s1);border:1px solid var(--line2);padding:12px;transition:transform .28s cubic-bezier(.22,1,.36,1);box-shadow:20px 0 60px -30px rgba(0,0,0,.8)} .vqsticky.open .vqsticky-panel{transform:translateY(-50%) translateX(38px)} .vqsticky-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:9px} .vqsticky-st{color:var(--up);letter-spacing:0;text-transform:none;font-size:10px} .vqsticky-ta{width:100%;box-sizing:border-box;height:220px;resize:vertical;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--kr);font-size:13px;line-height:1.62;padding:9px 10px} .vqsticky-ta:focus{outline:0;border-color:var(--gold)} .vqsticky-ft{font-family:var(--mono);font-size:9.5px;color:var(--t3);margin-top:8px;line-height:1.5} @media(max-width:760px){.vqsticky-panel{width:min(280px,82vw)}} /* ============================== VAQUERO GAUGE floating popup ============================== */ .vqgf{position:fixed;left:14px;bottom:calc(var(--status) + 12px);z-index:80;width:228px;background:var(--s1);border:1px solid var(--line2);box-shadow:0 18px 50px -18px rgba(0,0,0,.85);font-family:var(--kr);overflow:hidden;transition:width .18s} .vqgf.min{width:auto}.vqgf.min .vqgf-body{display:none} .vqgf-head{display:flex;align-items:center;gap:7px;padding:8px 11px;cursor:pointer} .vqgf:not(.min) .vqgf-head{border-bottom:1px solid var(--line)} .vqgf-title{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--gold2);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .vqgf-dots{display:flex;gap:5px}.vqgf-dot{width:8px;height:8px;background:var(--bstrong)} .vqgf-min-btn{margin-left:auto;background:transparent;border:0;color:var(--t3);font-size:15px;cursor:pointer;line-height:1;padding:0 2px} .vqgf-body{padding:9px 12px 11px} .vqgf-row{display:flex;align-items:center;gap:8px;margin:8px 0} .vqgf-lbl{font-size:11px;color:var(--t2);width:48px;flex:0 0 auto;font-family:var(--ui)} .vqgf-bar{flex:1;height:7px;background:linear-gradient(90deg,var(--down),var(--warn),var(--up));position:relative;opacity:.9} .vqgf-bar i{position:absolute;top:-2px;width:3px;height:11px;background:var(--t1);box-shadow:0 0 0 1px var(--bg);transform:translateX(-50%);transition:left .4s} .vqgf-sc{font-family:var(--mono);font-size:13px;font-weight:700;width:22px;text-align:right;flex:0 0 auto;color:var(--t2)} .vqgf-more{display:block;text-align:right;font-size:11px;color:var(--gold2);margin-top:9px} @media(max-width:560px){.vqgf{left:8px;bottom:calc(var(--status) + 8px);width:190px}} /* ============================== CALCULATOR FAB + panel ============================== */ .fab{position:fixed;right:18px;bottom:calc(var(--status) + 12px);z-index:82;display:flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--gold-d);color:var(--gold2);background:var(--s1);cursor:pointer;font-family:var(--ui);font-weight:600;font-size:13px;box-shadow:0 12px 32px -12px rgba(0,0,0,.7);transition:.14s} .fab:hover{color:var(--champ);border-color:var(--gold)} .fab.open{display:none} .fab svg{width:16px;height:16px} /* header-anchored dropdown (opened by the topbar calculator button, left of the Gauge) */ .toolpanel{display:none;position:fixed;top:calc(var(--topbar) + var(--fnbar) + var(--ticker) + 4px);right:10px;width:392px;max-width:94vw;max-height:calc(100vh - var(--topbar) - var(--fnbar) - var(--ticker) - 24px);z-index:130;flex-direction:column;background:var(--s1);border:1px solid var(--line2);box-shadow:0 28px 70px -30px rgba(0,0,0,.9)} .toolpanel.open{display:flex} #vqCalcBtn.on{color:var(--gold2);border-color:var(--gold-d)} .toolhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)} .toolhead .ttl{display:flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:700;font-size:15px;color:var(--t1)} .toolhead .x{border:0;background:transparent;color:var(--t3);font-size:22px;cursor:pointer;line-height:1} .calcnav{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);flex:0 0 auto} .calcnav::-webkit-scrollbar{display:none} .calcnav button{flex:0 0 auto;font-family:var(--ui);font-size:12px;font-weight:600;padding:6px 11px;border:1px solid var(--line2);background:var(--s1);color:var(--t2);cursor:pointer;white-space:nowrap} .calcnav button:hover{color:var(--t1)} .calcnav button.on{background:var(--s3);color:var(--gold2);border-color:var(--gold-d)} .calcbody{flex:1;overflow-y:auto;padding:18px} .calcbody h4{font-family:var(--ui);font-size:16px;font-weight:700;margin:0 0 2px} .calcbody .csub{font-size:12px;color:var(--t3);margin-bottom:16px;line-height:1.5} .cfield{margin-bottom:13px} .cfield label{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);margin-bottom:5px} .cfield input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:14px} .cfield input:focus{outline:0;border-color:var(--gold)} .cseg{display:flex;gap:0;flex-wrap:wrap} .cseg button{flex:1;min-width:48px;padding:8px 6px;border:1px solid var(--line2);background:var(--s1);color:var(--t2);font-family:var(--mono);font-size:12px;cursor:pointer;border-right:0} .cseg button:last-child{border-right:1px solid var(--line2)} .cseg button.on{background:var(--s3);color:var(--gold2)} .crow{display:flex;gap:8px;margin-bottom:8px}.crow>*{flex:1} .cadd{font-family:var(--mono);font-size:11px;color:var(--gold2);border:1px dashed var(--line2);background:transparent;padding:7px;width:100%;cursor:pointer;margin-bottom:13px} .cres{margin-top:14px;border:1px solid var(--line);padding:13px} .cres-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:13px;color:var(--t2)} .cres-row .v{font-family:var(--mono);font-weight:600;color:var(--t1)} .cres-row.big .v{font-size:18px;color:var(--gold2)} .cnote{margin-top:16px;font-family:var(--mono);font-size:10px;color:var(--t3);line-height:1.6} .cinput{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line2);background:var(--s3);color:var(--t1);font-family:var(--mono);font-size:14px} .cinput:focus{outline:0;border-color:var(--gold)} .crow>div>label,.cgroup label{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);margin-bottom:5px} .cgroup{margin-bottom:11px} .cgroup .gh{display:flex;justify-content:space-between;align-items:center;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--t2);margin-bottom:6px} .cdel{border:0;background:transparent;color:var(--t3);cursor:pointer;font-size:13px} .cdel:hover{color:var(--down)} .cresult{margin-top:14px;border:1px solid var(--line);padding:13px} .cresult .cres-row.main .v,.cres-row.main .v{font-size:18px;color:var(--gold2)} .cdonut{width:140px;height:140px;border-radius:50%;background:var(--s3);flex:0 0 auto} @media(max-width:560px){ .toolpanel{left:8px;right:8px;width:auto;max-width:none} } /* ============================== content / posts / beginner (doc pages) ============================== */ .nextlesson{display:inline-flex;align-items:center;gap:8px;margin:10px 0 4px;font-family:var(--ui);font-weight:700;font-size:14.5px;color:#1a1407;background:linear-gradient(92deg,var(--gold),var(--gold2));padding:11px 22px} .nextlesson:hover{filter:brightness(1.06)} .postfig{margin:18px 0} .postfig img{width:100%;border:1px solid var(--line)} .postfig figcaption{font-family:var(--mono);font-size:11px;color:var(--t3);margin-top:6px} /* ============================== mobile responsive ============================== */ @media(max-width:1280px){ .vqgrid .c3{grid-column:span 6}.vqgrid .c4{grid-column:span 6} .vqgrid .c5,.vqgrid .c7,.vqgrid .c8,.vqgrid .c9,.vqgrid .c10{grid-column:span 12} .vqgrid .c6{grid-column:span 12} } @media(max-width:600px){ /* narrow phones: keep the top bar from overflowing the viewport (was widening the document ~100px, which then pushed the fixed status bar + FAB off-screen). Gauge lives as a panel on home/advanced. */ .vqgauge-wrap{display:none} .vqutil{gap:5px} .vqbtn{min-width:30px;padding:0 7px} .vqbrand .wm{font-size:20px;letter-spacing:.08em} .vqstatus .em#vqConTxt{display:none} /* keep the connection dot, drop the long text */ } @media(max-width:860px){ :root{--topbar:52px} .vqtape{display:none} .toolpanel{top:calc(var(--topbar) + var(--fnbar) + 4px);max-height:calc(100vh - var(--topbar) - var(--fnbar) - 20px)} /* ticker hidden ≤860 → dropdown starts below topbar+fnbar */ .vqcmd{display:none} .vqcmdtrigger{display:grid} .vqgrid{grid-template-columns:1fr;gap:8px} .vqgrid [class*="c"]{grid-column:span 1} /* markets: the in-site chart was DOM-last → users scrolled past every long list to reach it. Lift it to right under the market tabs on mobile (CSS order on the single-column grid; other panels follow below). */ .vqgrid #mktTop{order:-2}.vqgrid #mktChart{order:-1} .vqwork{padding:8px} .vqstatus .seg.hide-m{display:none} /* dense tables -> stacked cards */ table.dt thead{display:none} table.dt,table.dt tbody,table.dt tr,table.dt td{display:block;width:100%} table.dt tr{border:1px solid var(--line);margin-bottom:7px;padding:4px 0} table.dt td{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);text-align:right;padding:6px 12px} table.dt td:last-child{border-bottom:0} table.dt td::before{content:attr(data-label);font-family:var(--ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);text-align:left} table.dt td:first-child::before{content:""} .obs{grid-template-columns:1fr 1fr} .wrap{padding:0 14px} }