/* Vibrozz 2 — portfolio */
.pf-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* segmented controls on the page background: the standard .seg on a card (same as the market's RSI switch) */
.pf-bar .seg{background:var(--card);box-shadow:var(--shadow)}
.pf-bar .seg button.on{background:var(--soft-2);box-shadow:none}
.pf-tabs button{display:inline-flex;align-items:center;gap:8px}
.pf-n{min-width:22px;padding:1px 7px;border-radius:8px;background:var(--acc);color:var(--on-acc);font-size:12px;font-weight:700;text-align:center}
.pf-tools{display:flex;gap:10px;flex-wrap:wrap}
.pf-tools .seg button{padding:9px 14px;font-size:14px}

/* positions */
.pf-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.pf-main,.pf-side{display:grid;gap:20px;min-width:0;align-content:start}
.pf-pos,.pf-ord{padding-bottom:8px}
.pf-pos .ch h3 small,.pf-ord .ch h3 small{font-size:14px}
.pf-foot{display:flex;gap:10px;flex-wrap:wrap;padding:14px 24px 14px;border-top:1px solid var(--line)}
.pf-metrics{display:grid;padding:6px 0}
.pf-m{display:grid;gap:2px;padding:16px 24px;border-top:1px solid var(--line)}
.pf-m:first-child{border-top:0}
.pf-m>span{color:var(--tx-3);font-size:14px}
.pf-m>b{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-m>small{color:var(--tx-3);font-size:13px}
.pf-alist{display:grid;gap:16px;padding:6px 24px 14px}
.pf-ar{display:grid;gap:8px;font-size:14px}
.pf-alloc .ch h3{min-width:0}
.pf-csv{flex:none;color:var(--tx-2)}
.pf-ar b{font-weight:600}
.pf-ar .bar{height:6px}
.pf-ap{color:var(--tx);font-weight:700}
.pf-au{color:var(--tx-3);white-space:nowrap}
/* the entry → mark line wraps instead of cutting the current price */
.pf-pos .tr-pn small{white-space:normal}
/* the last good account while Bybit answers with an error: dimmed, no actions */
.pf-grid.stale .pf-pos .list,.pf-grid.stale .pf-ord .list,.pf-grid.stale .pf-metrics b,.pf-grid.stale .pf-alist{opacity:.55}
.pf-grid.stale .tr-qa,.pf-grid.stale .tr-more,.pf-grid.stale .tr-oact{visibility:hidden}

/* history + funding */
.pf-hist{padding-bottom:8px}
.pf-flt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 18px 12px 24px}
.pf-flt .seg button{padding:7px 14px;font-size:13px}
.pf-coin{width:auto;min-width:150px;max-width:220px}
.pf-sum{display:flex;gap:10px;flex-wrap:wrap;padding:2px 24px 14px}
.pf-sum>div{display:grid;gap:0;padding:10px 16px;border-radius:14px;background:var(--soft);min-width:110px}
.pf-sum span{color:var(--tx-3);font-size:12px;white-space:nowrap}
.pf-sum b{font-size:18px;font-weight:700;white-space:nowrap}
.pf-sum b small{font-size:13px;color:var(--tx-3);font-weight:600}
.pf-sum .pf-bsk{display:inline-block;vertical-align:-.05em;width:3.2em;height:.8em;min-height:0}
.pf-h{grid-template-columns:minmax(0,1.1fr) 80px minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
.list .it.pf-h{padding-top:11px;padding-bottom:11px}
.pf-f{grid-template-columns:minmax(160px,1fr) minmax(0,1fr) 140px}
.pf-f.x1{grid-template-columns:minmax(160px,1.2fr) minmax(0,1fr) minmax(0,1fr) 140px}
.pf-f.x2{grid-template-columns:minmax(160px,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 140px}
.list .it.pf-f{padding-top:11px;padding-bottom:11px}
.pf-f .pill{font-size:11px;padding:2px 6px;margin-left:4px}
.pf-f small{display:block;color:var(--tx-3);font-size:12px}
.pf-sync{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--warn);font-size:13px;font-weight:600;padding:0 24px 24px;margin-top:-16px}

/* review */
.pf-rv{display:grid;gap:20px;min-width:0}
.pf-rhero{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.pf-rs>b{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-rs>b em{font-style:normal;font-weight:500}
.pf-rs>small{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;min-width:0}
.pf-rs>small>span{white-space:nowrap}
.pf-rs.main>b{font-size:26px;font-weight:800}
.pf-rs.two>b{font-size:19px;line-height:1.5}
.pf-wr{width:56px;height:6px;flex:none}
.pf-r2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:stretch}
.pf-what{display:flex;flex-direction:column}
.pf-fb{flex:1;display:flex;flex-direction:column;gap:14px}
.pf-need{margin-top:auto;display:grid;gap:12px;padding:16px 18px 18px;border-radius:18px;background:var(--soft);font-size:13px;color:var(--tx-3)}
.pf-need .row>span{display:grid;gap:2px}
.pf-need .row>span:last-child{text-align:right}
.pf-need b{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--tx)}
.pf-need b.up{color:var(--up)}.pf-need b.dn{color:var(--dn)}
.pf-nbar{position:relative;display:block;height:8px;border-radius:4px;background:var(--card)}
.pf-nbar i{display:block;height:100%;border-radius:4px;background:var(--up)}
.pf-nbar.dn i{background:var(--dn)}
.pf-nbar em{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--tx)}
.pf-r3{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.pf-r3>.card,.pf-r2>.card{padding-bottom:8px}
.pf-finds{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pf-finds li{display:flex;gap:10px;align-items:flex-start;padding:2px 0;font-size:14px;color:var(--tx-2);line-height:1.45}
.pf-fi{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;margin-top:-1px}
.pf-finds li.good .pf-fi{background:var(--up-soft);color:var(--up)}
.pf-finds li.warn .pf-fi{background:var(--warn-soft);color:var(--warn)}
.pf-sides{display:grid;gap:14px}
.pf-side-b{display:grid;gap:8px;padding:14px 16px;border-radius:16px;background:var(--soft)}
.pf-side-b b{font-size:18px;font-weight:700}
.pf-side-b .bar{background:var(--card)}
.pf-cr{grid-template-columns:minmax(0,1fr) 52px minmax(40px,1.2fr) minmax(0,1fr) 64px}
.hd.pf-cr span{white-space:nowrap}
.list .it.pf-cr{padding-top:10px;padding-bottom:10px;gap:12px}
.list .hd.pf-cr{gap:12px}
.pf-track{height:8px;border-radius:4px;background:var(--soft);overflow:hidden;display:block}
.pf-track i{display:block;height:100%;border-radius:4px;background:var(--up)}
.pf-track i.dn{background:var(--dn)}
.pf-tr{grid-template-columns:28px minmax(0,1fr) auto}
.list .it.pf-tr{padding-top:10px;padding-bottom:10px}
.pf-tr .pill{font-size:11px;padding:2px 6px}
.pf-cf{display:grid;gap:12px}
.pf-cf .kv{padding:0}
.pf-cfl{display:flex;flex-wrap:wrap;gap:8px 14px;font-weight:600}

@media (max-width:1280px){
  .pf-grid{grid-template-columns:minmax(0,1fr) 320px}
  /* 5 tiles: 3 on top, 2 wider below — no empty slot */
  .pf-rhero{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pf-rhero>.pf-rs{grid-column:span 2}
  .pf-rhero>.pf-rs:nth-child(n+4){grid-column:span 3}
  .pf-r3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-r3 .pf-cc{grid-column:1/-1}
}
@media (max-width:1100px){
  .pf-grid{grid-template-columns:minmax(0,1fr)}
  .pf-main,.pf-side{display:contents}
  .pf-metrics{order:1;grid-template-columns:repeat(3,minmax(0,1fr));padding:0}
  .pf-metrics .pf-m{border-top:0;border-left:1px solid var(--line)}
  .pf-metrics .pf-m:first-child{border-left:0}
  .pf-pos{order:2}.pf-ord{order:3}.pf-alloc{order:4}
  .pf-h{grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,.9fr)}
  .pf-r2{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pf-bar{gap:10px}
  .pf-tabs{display:flex;width:100%}
  .pf-tabs button{flex:1;justify-content:center;padding:9px 6px}
  .pf-tools{width:100%;gap:8px}
  .pf-tools .seg{display:flex;width:100%}
  .pf-tools .seg button{flex:1}
  .pf-tools .seg button{padding:9px 6px}
  .pf-grid,.pf-rv{gap:14px}
  .pf-metrics{padding:4px 0;grid-template-columns:minmax(0,1fr)}
  .pf-metrics .pf-m{border-left:0;border-top:1px solid var(--line)}
  .pf-metrics .pf-m:first-child{border-top:0}
  .pf-m{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 12px;padding:12px 18px}
  .pf-m>b{font-size:18px;grid-column:2;grid-row:1;text-align:right}
  .pf-m>small{grid-column:1/-1;font-size:12px}
  .pf-foot{padding:12px 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pf-foot .btn{width:100%;min-width:0;height:44px;padding:0 10px}
  .pf-alist{padding:6px 18px 12px}
  .pf-flt{padding:14px 12px 10px 18px;gap:8px}
  .pf-flt .seg button{min-height:40px;padding:7px 10px}
  .pf-flt{flex-wrap:nowrap}
  .pf-flt .grow{display:none}
  .pf-coin{min-width:0;flex:1 1 0;max-width:none;padding-right:26px;background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%}
  /* totals: tiles share the row and wrap whole (a long total takes its own row), money is never cut */
  .pf-sum{padding:2px 18px 12px;gap:8px}
  .pf-sum>div{flex:1 1 auto;min-width:0;padding:8px 12px}
  .pf-sum b{font-size:15px}
  .pf-h{grid-template-columns:minmax(0,1fr) auto}
  .pf-f,.pf-f.x1,.pf-f.x2{grid-template-columns:minmax(0,1fr) auto}
  .pf-rhero{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pf-rhero>.pf-rs,.pf-rhero>.pf-rs:nth-child(n+4){grid-column:span 1}
  .pf-rhero>.pf-rs.main{grid-column:1/-1}
  /* half-width tiles: labels and amounts wrap between the parts, values line up across a row */
  .pf-rs{padding:14px 16px;display:flex;flex-direction:column}
  .pf-rs>span{line-height:1.3}
  .pf-rs>b{font-size:18px;margin-top:auto;white-space:normal;overflow:visible}
  .pf-rs>b>span{white-space:nowrap}
  .pf-rs.main>b{font-size:24px}
  .pf-rs.two>b{font-size:16px;line-height:1.35}
  .pf-rs>small{font-size:12px;flex-wrap:wrap;white-space:normal;overflow:visible}
  .pf-r2,.pf-r3{gap:14px;grid-template-columns:minmax(0,1fr)}
  .pf-cr{grid-template-columns:minmax(0,1fr) 28px minmax(30px,.8fr) auto 40px}
  .list .it.pf-cr{gap:8px}
}
/* phone tap targets ≥ 40 px */
@media (max-width:760px){
  .pg-portfolio .icon-btn.sm{width:40px;height:40px}
  .pg-portfolio .btn.sm{height:40px}
  .pf-side-b small,.pf-f .pill,.pf-tr .pill{font-size:12px}
  .pf-tabs button,.pf-tools .seg button{min-height:40px}
}

/* ---------- tablets ---------- */
/* portrait tablets (761–900): review tiles = the result across, then 2 × 2 (three across cut the numbers) */
@media (min-width:761px) and (max-width:900px){
  .pf-rhero{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-rhero>.pf-rs,.pf-rhero>.pf-rs:nth-child(n+4){grid-column:span 1}
  .pf-rhero>.pf-rs.main{grid-column:1/-1}
}
@media (min-width:761px) and (pointer:coarse){
  .pf-tabs button,.pf-tools .seg button{min-height:40px}
}
/* closed trades on portrait tablets: the size moves under the result, the time stays on one line */
@media (min-width:761px) and (max-width:900px){
  .pf-h{grid-template-columns:minmax(0,1fr) 70px minmax(0,1.6fr) minmax(0,1fr) 118px}
  .pf-h>:nth-child(3){display:none}
  .pf-h>:nth-child(5) small.show-s{display:block!important;color:var(--tx-3);font-size:12px}
  .pf-h>:nth-child(6){white-space:nowrap}
}