/* Vibrozz 2 — terminal: (watch list ≥1600) · chart with the dock under it · the order ticket full height on the right.
   Desktop: one screen, no page scroll (the grid height comes from JS: --vt-h). The chart is the hero. */
.v-content:has(>.vt){padding-bottom:16px}
@media (min-width:761px){
  body[data-page=terminal] .v-top h1{visibility:hidden}   /* the coin header is the title */
  body[data-page=terminal] .v-main.compact .v-top{padding-top:8px;padding-bottom:0;min-height:56px}
}
.vt{--vt-dock:clamp(150px,20vh,260px);display:grid;gap:14px;min-width:0;height:var(--vt-h,calc(100vh - 90px));min-height:600px;
  grid-template-columns:200px minmax(0,1fr) 330px;grid-template-rows:minmax(0,1fr) var(--vt-dock);
  grid-template-areas:"wl main ticket" "wl dock ticket"}
.vt[data-dock=min]{--vt-dock:52px}
.vt[data-dock=max]{--vt-dock:clamp(300px,46vh,560px)}
.vt>.card{min-height:0;min-width:0}

/* ---------- watch list ---------- */
.vt-wl{grid-area:wl;display:flex;flex-direction:column;overflow:hidden}
.vt-wl-h{padding:12px 12px 8px}
.vt-wl-h .seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.vt-wl-b{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:8px}
.vt-wl-b .grid.cb{padding:6px 14px}
.vt-wl-b .empty{padding:32px 16px}
.list .vt-wl-it{grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:7px 14px;width:100%;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;color:inherit;font:inherit}
.list .vt-wl-it:first-child{border-top:0}
.list .vt-wl-it:hover{background:color-mix(in srgb,var(--soft) 65%,transparent)}
.list .vt-wl-it.on{background:var(--soft)}
.vt-wl-it b{font-size:14px;line-height:1.3}.vt-wl-it small{font-size:12px;line-height:1.3}
.vt-wl-it>b.r{font-size:13px}

/* ---------- chart card ---------- */
.vt-main{grid-area:main;display:flex;flex-direction:column;overflow:hidden;container-type:inline-size}
.vt-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:12px 18px 4px;min-width:0}
.vt-coin{display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:4px 8px 4px 4px;margin-left:-4px;border-radius:14px;text-align:left;min-width:0}
.vt-coin:hover{background:var(--soft)}
.vt-logo{display:block;width:40px;height:40px;flex:none}
.vt-name{display:grid;min-width:0}
.vt-name b{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.vt-name small{font-size:12px;color:var(--tx-3);white-space:nowrap}
.vt-chev{color:var(--tx-3)}
.vt-star{margin-left:-10px;color:var(--tx-3)}
.vt-star.on{color:var(--acc-2)}
.vt-star.on svg{fill:currentColor}
.vt-quote{display:flex;align-items:center;gap:10px;flex:none}
.vt-px{font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1.1;border-radius:8px;padding:0 4px;margin:0 -4px;white-space:nowrap}
.vt-chg{align-self:center}
.vt-facts{display:flex;align-items:center;flex:1 1 0;min-width:0;overflow:hidden}
.vt-mine{display:flex;gap:6px;flex:none}
.vt-mine:empty{display:none}
.vt-mine .pill{font-size:12px;text-decoration:none}
.vt-mine .pill .vt-pnl{font-weight:700}
.vt-stats{display:flex;gap:20px;margin:0 0 0 auto;padding:0;flex:none}
.vt-stats>div{display:grid;gap:1px;flex:none}
.vt-stats>div[hidden]{display:none}
.vt-stats dt{font-size:12px;color:var(--tx-3);white-space:nowrap}
.vt-stats dd{margin:0;font-size:13px;font-weight:600;white-space:nowrap}
.vt-stats dd small{color:var(--tx-3);font-weight:500;margin-left:2px}
.vt-stats dd b{font-weight:700}
.vt-tools{display:flex;align-items:center;gap:6px;padding:0 12px 4px 14px;min-width:0}
.vt-tools .vc-tf{flex:0 1 auto}
.vt-tools .vc-tf button{padding:0 8px}
.vt-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-3);white-space:nowrap;margin-left:6px}
.vt-st span{display:none}
.vt-st.bad span{display:inline;color:var(--warn);font-weight:600}
.vt-clock{display:none;font-size:12px;color:var(--tx-3);white-space:nowrap}
.vt-tbtns{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.vt-tb{padding:0 9px;gap:6px;color:var(--tx-2)}
.vt-tb span{display:none}
.vt-tbtns .icon-btn{color:var(--tx-2)}
.vt-tbtns .icon-btn.on{background:var(--acc);color:var(--on-acc)}
.vt-chart{flex:1;min-height:220px;margin:0 6px 6px;border-radius:16px}
.vt-main:fullscreen{background:var(--card)}
.vt-main.vc-full .vt-chart{min-height:0}
@container (min-width:720px){.vt-st span{display:inline}}
@container (min-width:860px){.vt-tb span{display:inline}}
@container (min-width:1040px){.vt-clock{display:inline}}
@container (max-width:700px){.vt-zm{display:none!important}}
/* a narrow chart card (761–1100 px windows): timeframes get their own row, the position pill wraps under the price */
@container (max-width:640px){
  .vt-tools{flex-wrap:wrap;row-gap:2px}
  .vt-tools .vc-tf{flex:1 1 100%;justify-content:space-between}
  .vt-tools .vc-tf button{padding:0 6px}
  .vt-tbtns{margin-left:auto}
  .vt-quote{flex-wrap:wrap;row-gap:4px;flex:0 1 auto;min-width:0;max-width:100%}
  .vt-mine{flex-wrap:wrap;min-width:0;max-width:100%}
  .vt-mine .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- ticket ---------- */
.vt-ticket{grid-area:ticket;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;display:flex;flex-direction:column}
.vt-tk{flex:none}
.vt-acc{margin-top:auto;display:grid;gap:7px;padding:14px 18px 16px;border-top:1px solid var(--line);font-size:13px}
.vt-acc:empty{display:none}
.vt-acc>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--tx-2)}
.vt-acc b{color:var(--tx);font-weight:600;white-space:nowrap}
.vt-acc b.up{color:var(--up)}.vt-acc b.dn{color:var(--dn)}
.vt-acc small{color:var(--tx-3);font-weight:500;font-size:12px;margin-left:2px}
.vt-ticket::-webkit-scrollbar{display:none}
.vt-tk-ph{padding:18px;display:grid;gap:14px}
.vt-tk-ph .grid.cb{padding:0}

/* ---------- dock ---------- */
.vt-dock{grid-area:dock;display:flex;flex-direction:column;overflow:hidden;container-type:inline-size}
.vt-dock-h{display:flex;align-items:center;gap:12px;padding:8px 10px 4px 14px;min-width:0;min-height:52px;flex:none}
.vt-dsz{display:flex;gap:0;flex:none;margin-left:-6px}
.vt-dsz .icon-btn{color:var(--tx-2)}
.vt-dsz .icon-btn:disabled{opacity:.3;cursor:default;background:transparent}
.vt[data-dock=min] .vt-dock-b{display:none}
.vt[data-dock=min] .vt-dock-h .tabs button.on{background:transparent;box-shadow:none}
.vt-dock-h .tabs{flex:0 1 auto;min-width:0;position:relative;overscroll-behavior-x:contain}
.vt-dock-h .tabs button{flex:none}
/* tabs that do not fit scroll sideways; the side with more tabs fades out */
.vt-dock-h .tabs.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.vt-dock-h .tabs.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.vt-dock-h .tabs.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
@container (max-width:760px){
  .vt-dock-h{gap:6px;padding-left:10px}
  .vt-dock-h .tabs{gap:2px}
  .vt-dock-h .tabs button{padding:8px 10px}
  .vt-dock-h .tabs button .n{margin-left:4px}
}
.vt-dock-h .tabs .n{font-variant-numeric:tabular-nums}
.vt-dmore{flex:none;margin-left:auto}
.vt-dmore[hidden]+.vt-dsz{margin-left:auto}
.vt-dock-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.vt-dock-b>.empty,.vt-bookerr>.empty{padding:22px 16px}
.vt-dock-b>.grid.cb{padding:8px 16px}
.vt-filter{display:flex;align-items:center;gap:8px;padding:4px 16px 6px;color:var(--tx-3)}
.vt-filter .input{max-width:220px}
.vt-pager{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:4px 12px 8px;font-size:13px}
.vt-more{display:flex;justify-content:center;padding:6px 16px 12px}
.vt-fb .it{grid-template-columns:28px minmax(0,1fr) auto;padding:10px 18px}
.vt-symlink{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;color:var(--tx);min-width:0;text-align:left}
.vt-symlink:hover b{color:var(--link)}
.vt-hist .hd,.vt-hist .it{grid-template-columns:120px minmax(80px,1fr) minmax(110px,1fr) 110px 100px 90px 120px;gap:12px;padding-left:18px;padding-right:18px}
.vt-hist .hd{padding-top:2px;padding-bottom:4px}
.vt-hist .it{padding-top:9px;padding-bottom:9px;font-size:13px}
.vt-hist .it small{display:inline;font-size:12px;color:var(--tx-3)}

/* order book + tape */
.vt-book{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:18px;height:100%;min-height:0;padding:0 16px 10px}
.vt-bk,.vt-tape{display:flex;flex-direction:column;min-height:0;min-width:0}
.vt-bk{container:vtbk/inline-size}
.vt-bk-h{display:flex;align-items:center;gap:10px;min-height:38px;flex-wrap:nowrap}
.vt-mid{font-size:16px;font-weight:800}
.vt-spread{font-size:12px;white-space:nowrap}
.vt-bview button{display:grid;place-items:center;width:32px;height:28px;padding:0}
.vt-bview svg .a{fill:var(--dn)}.vt-bview svg .b{fill:var(--up)}
.vt-bview button:not(.on) svg{opacity:.55}
@container vtbk (max-width:540px){.vt-spread{display:none}}

.vt-step{width:auto;min-width:84px;height:32px}
.vt-bcols{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0;overflow:hidden}
.vt-book[data-view=bid] .vt-bcols,.vt-book[data-view=ask] .vt-bcols{grid-template-columns:1fr}
.vt-book[data-view=bid] .vt-bs.a,.vt-book[data-view=ask] .vt-bs.b{display:none}
.vt-bs{display:grid;align-content:start;gap:1px;min-width:0}
.vt-bh,.vt-bl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:center}
.vt-bh{font-size:12px;color:var(--tx-3);padding:0 8px 3px}
.vt-bl{position:relative;height:22px;padding:0 8px;border:0;border-radius:6px;background:transparent;font-size:13px;color:var(--tx);text-align:right;overflow:hidden}
.vt-bl:not(:disabled):hover{background:var(--soft)}
.vt-bl:disabled{opacity:1;cursor:default}
.vt-bl i{position:absolute;top:1px;bottom:1px;width:var(--d,0%);border-radius:5px;transition:width .2s}
.vt-bl span{position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-bh span{text-align:right}
/* bids read towards the middle: total · size · price | price · size · total */
.vt-bs.b .vt-bl i{right:0;background:var(--up-soft)}
.vt-bs.a .vt-bl i{left:0;background:var(--dn-soft)}
.vt-bs.b .p{order:3;color:var(--up);font-weight:600}.vt-bs.b .s{order:2}.vt-bs.b .t{order:1;text-align:left;color:var(--tx-2)}
.vt-bs.b .vt-bh span:nth-child(1){order:3}.vt-bs.b .vt-bh span:nth-child(2){order:2}.vt-bs.b .vt-bh span:nth-child(3){order:1;text-align:left}
.vt-bs.a .p{text-align:left;color:var(--dn);font-weight:600}.vt-bs.a .t{color:var(--tx-2)}
.vt-bs.a .vt-bh span:nth-child(1){text-align:left}
.vt-tape-h,.vt-tr{display:grid;grid-template-columns:76px 1fr 1fr;gap:8px;align-items:center}
.vt-tape-h{font-size:12px;color:var(--tx-3);padding:0 4px 3px}
.vt-tape-b{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.vt-tape-b .grid.cb{padding:4px}
.vt-tr{height:21px;padding:0 4px;font-size:13px}
.vt-tr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vt-tr small{color:var(--tx-3);font-size:11px}
.vt-rate{font-size:12px;white-space:nowrap}
.vt-tape-e{padding:16px 4px;font-size:13px}

/* ---------- narrower screens ---------- */
/* phone Long / Short bar (shown ≤760 only) */
.vt-lsbar{display:none}
@media (max-width:1599px){
  .vt{grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"main ticket" "dock ticket"}
  .vt-wl{display:none}
}
@media (max-width:1100px){
  .vt{grid-template-columns:minmax(0,1fr) 310px}
  .vt-hist .hd,.vt-hist .it{grid-template-columns:110px minmax(70px,1fr) minmax(100px,1fr) 100px 90px 80px}
  .vt-hist .hd span:nth-child(7),.vt-hist .it>:nth-child(7){display:none}
}
@media (max-width:900px) and (min-width:761px){
  .vt{grid-template-columns:minmax(0,1fr) 296px}
}
@media (max-width:760px){
  .v-content:has(>.vt){padding-bottom:calc(var(--tab-h) + 88px + env(safe-area-inset-bottom,0px))}
  /* tucked 10 px under the tab bar so no strip of page shows between them whatever the tab bar's real height */
  .vt-lsbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:calc(var(--tab-h) - 10px + env(safe-area-inset-bottom,0px));z-index:30;
    padding:10px 16px 20px;background:color-mix(in srgb,var(--page) 96%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .2s,opacity .2s}
  .vt-lsbar .btn{height:46px;font-size:16px;font-weight:700;border-radius:14px}
  .vt-lsbar .btn.long{color:var(--on-up,#fff)}.vt-lsbar .btn.short{color:var(--on-dn,#fff)}
  .vt-lsbar.off{transform:translateY(calc(100% + var(--tab-h)));opacity:0;pointer-events:none}
  .vt-dsz{display:none}
  .vt-stats dd small,.vt-tr small{font-size:12px}
  .vt{display:flex;flex-direction:column;gap:14px;height:auto;min-height:0}
  /* the whole chart above the Long / Short bar on the first screen: coin · price with the position · facts, then one
     row of timeframes and chart buttons (scrolls sideways), then the chart in the height that is left (--vt-top: JS) */
  .vt-head{padding:10px 14px 2px;gap:2px 12px}
  .vt-facts{flex:1 1 100%}
  .vt-stats{margin-left:0}
  .vt-quote{flex:1 1 100%;flex-wrap:nowrap;min-width:0;min-height:40px}
  .vt-mine{flex:0 1 auto;min-width:0;overflow:hidden}
  .vt-mine .pill{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vt-msz{display:none}   /* the size is on the position page; the P&L must fit */
  .vt-name b{font-size:17px}
  .vt-px{font-size:24px}
  .vt-tools{padding:0 8px 4px;gap:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .vt-tools::-webkit-scrollbar{display:none}
  .vt-tools.fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .vt-tools.fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px);mask-image:linear-gradient(90deg,transparent,#000 32px)}
  .vt-tools.fl.fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
  .vt-tools .vc-tf{flex:none;overflow:visible}
  .vt-tools .vc-tf button{padding:0 4px;height:40px;min-width:40px}
  .vt-st{display:none;margin-left:4px;flex:none}
  .vt-st.bad{display:inline-flex}
  .vt-tbtns{margin-left:6px;flex:none;gap:0}
  .vt-tbtns .icon-btn.sm,.vt-tbtns .vt-tb{width:40px;height:40px;padding:0;justify-content:center}
  .vt-head .vt-star,.vt-dock-h .vt-dmore{width:40px;height:40px}
  .vt-mine .pill{height:40px;line-height:40px;padding:0 12px}
  .vt-dock-h .tabs button{min-height:40px}
  .vt-bview button{width:40px;height:36px}
  .vt-step{height:40px}
  .vt-pager .icon-btn.sm{width:40px;height:40px}
  .vt-symlink{min-height:36px}
  .vt-more .btn.sm{height:40px}
  .vt-dock-b .empty .btn.sm{height:40px}
  .vt-chart{flex:none;height:clamp(300px,52vh,460px);height:clamp(240px,calc(100svh - var(--vt-top,330px) - var(--tab-h) - 75px - env(safe-area-inset-bottom,0px)),460px);margin:0 4px 4px;border-radius:14px}
  .vt-ticket{overflow:visible}
  .vt-dock{overflow:visible}
  .vt-dock-h{padding:8px 6px 4px 10px;gap:4px}
  .vt-dock-h .tabs{flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
  .vt-dock-h .tabs::-webkit-scrollbar{display:none}
  .vt-dock-h .tabs button{flex:none}
  .vt-dmore{order:3;margin-left:auto}
  .vt-dock-b{overflow:visible;max-height:none}
  .vt-hist .hd{display:none}
  .vt-hist .it{grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:11px 16px}
  .vt-hist .it>:nth-child(1),.vt-hist .it>:nth-child(5),.vt-hist .it>:nth-child(6),.vt-hist .it>:nth-child(7){display:none}
  .vt-book{grid-template-columns:1fr;height:auto;padding:0 12px 12px}
  .vt-bk-h{flex-wrap:wrap;row-gap:6px}
  .vt-bh,.vt-bl{grid-template-columns:1fr 1fr}
  .vt-bl{height:32px}
  .vt-tape-b{max-height:280px}
  .vt-filter .input{max-width:none;font-size:16px;height:40px}
}

/* ---------- tablets ---------- */
/* portrait (iPad / Android 761–1100 px wide): the chart is the hero across the full width; the dock and the ticket share
   the row under it (the ticket's own height sets the row, the dock fills it and scrolls); the page scrolls, not the ticket */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .vt{height:auto;min-height:0;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:max(460px,calc(var(--vt-h,900px) - 600px)) auto;
    grid-template-areas:"main main" "dock ticket"}
  .vt-ticket{overflow:visible}
  .vt-dock{contain:size;min-height:420px}
  .vt-dsz{display:none}
  .vt[data-dock=min] .vt-dock-b{display:block}
  .vt[data-dock=min] .vt-dock-h .tabs button.on{background:var(--soft)}
  .vt-dmore{margin-left:auto}
}
@media (min-width:761px) and (pointer:coarse){
  .vt-mine .pill{min-height:40px;display:inline-flex;align-items:center;padding:0 12px}
  .vt-head .vt-star,.vt-dock-h .vt-dmore{width:40px;height:40px}
  .vt-bview button{width:40px;height:36px}
  .vt-step{height:40px}
  .vt-symlink{min-height:36px}
  .vt-tbtns .vt-tb{height:40px}
}
/* touch: the timeframes keep 40 px buttons, so «Онлайн» shows as the dot only until the chart card is wide */
@media (min-width:761px) and (pointer:coarse){
  @container (max-width:940px){.vt-st span{display:none}.vt-st.bad span{display:inline}}
}
@media (min-width:761px) and (max-width:800px) and (orientation:portrait){
  .vt{grid-template-columns:minmax(0,1fr) 300px}
}
/* a narrow dock (portrait tablets, ~300–600 px): order book over the trades tape, price + size columns (as on phones) */
@media (min-width:761px){
  @container (max-width:600px){
    .vt-book{grid-template-columns:minmax(0,1fr);height:auto;gap:12px;padding:0 12px 12px}
    .vt-bk-h{flex-wrap:wrap;row-gap:6px}
    .vt-bh,.vt-bl{grid-template-columns:1fr 1fr}
    .vt-bs .hide-s{display:none}
    .vt-tape-b{max-height:280px}
  }
}
/* touch, chart card 560–640 px (iPad landscape 1024): timeframes and chart buttons share one row — the chart keeps the height */
@media (min-width:761px) and (pointer:coarse){
  @container (min-width:560px) and (max-width:640px){
    .vt-tools{flex-wrap:nowrap}
    .vt-tools .vc-tf{flex:0 1 auto;justify-content:flex-start}
    .vt-tools .vc-tf button{min-width:36px;padding:0 4px}
    .vt-tbtns{gap:0}
  }
}