/* paperTerminal — pages.css  (page-specific additions) */

/* Token detail page layout */
.token-detail-page { display:flex; flex-direction:column; height:calc(100vh - var(--tb)); overflow:hidden }
.td-header { padding:10px 16px; border-bottom:1px solid var(--bd); flex-shrink:0 }
.back-btn { display:inline-flex; align-items:center; gap:4px; background:transparent; border:none; color:var(--t2); font-size:12px; cursor:pointer; font-family:var(--sans); transition:color .15s; margin-bottom:10px; padding:0 }
.back-btn:hover { color:var(--white) }
.td-meta-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.td-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:15px; font-weight:700; flex-shrink:0; overflow:hidden }
.td-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50% }
.td-meta-text { display:flex; flex-direction:column; gap:2px }
.td-sym { font-family:var(--mono); font-size:18px; font-weight:700; color:var(--white) }
.td-name { font-size:12px; color:var(--t3) }
.td-price-col { margin-left:auto; text-align:right }
.td-price { font-family:var(--mono); font-size:18px; font-weight:700; color:var(--white); display:block }
.td-pct { font-family:var(--mono); font-size:12px; font-weight:700 }
.td-action-btns { display:flex; gap:6px }
.td-body { display:flex; flex:1; overflow:hidden; min-height:0 }
.td-chart-col { flex:1; min-width:0; border-right:1px solid var(--bd); position:relative; overflow:hidden }
.td-chart-col iframe { width:100%; height:100%; border:none; position:absolute; inset:0; transition:opacity .4s }
.td-info-col { width:220px; flex-shrink:0; padding:14px; display:flex; flex-direction:column; gap:12px; overflow-y:auto }
.td-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.td-stat { background:var(--bg3); border-radius:var(--r); padding:9px 10px }
.td-stat-v { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--white) }
.td-stat-l { font-size:9px; color:var(--t3); margin-top:3px; text-transform:uppercase; letter-spacing:.3px }
.td-pos-box { background:var(--bg3); border-radius:var(--r); padding:12px }
.pos-row { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px }
.pos-row:last-child { margin-bottom:0 }
.pos-l { color:var(--t3) }
.pos-v { font-family:var(--mono); font-weight:600; color:var(--white) }
.dex-link { font-size:11px; color:var(--t2); text-decoration:none; font-family:var(--mono); transition:color .15s; margin-top:auto }
.dex-link:hover { color:var(--green) }

/* Alert widget */
.alert-box { background:var(--bg3); border-radius:var(--r); padding:12px }
.alert-input-row { display:flex; gap:4px; align-items:center }
.alert-select { background:var(--bg4); border:1px solid var(--bd2); border-radius:4px; color:var(--t); font-size:11px; padding:4px 6px; font-family:var(--mono); flex-shrink:0 }
.alert-price-input { flex:1; background:var(--bg4); border:1px solid var(--bd2); border-radius:4px; color:var(--white); font-family:var(--mono); font-size:12px; padding:4px 8px; outline:none; min-width:0 }
.alert-item { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--t2); font-family:var(--mono); margin-top:5px }
.alert-del { background:transparent; border:none; color:var(--t3); cursor:pointer; font-size:12px; padding:0 2px }
.alert-del:hover { color:var(--red) }

/* Perps layout */
.perps-layout { display:grid; grid-template-columns:200px 1fr 240px; flex:1; overflow:hidden; min-height:0 }
.perps-markets { border-right:1px solid var(--bd); display:flex; flex-direction:column; overflow:hidden }
.perps-market-hd { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--bd); flex-shrink:0 }
.perps-market-list { flex:1; overflow-y:auto }
.pm-row { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--bd); cursor:pointer; transition:background .1s }
.pm-row:hover { background:var(--bg3) }
.pm-row.active { background:var(--bg4) }
.pm-av { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; font-weight:700; overflow:hidden; flex-shrink:0 }
.pm-av img { width:100%; height:100%; object-fit:cover; border-radius:50% }
.pm-sym { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--white) }
.pm-price { font-family:var(--mono); font-size:10px; color:var(--t2) }
.pm-pct { font-family:var(--mono); font-size:10px; font-weight:700; margin-left:auto }
.perps-centre { display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--bd) }
.perps-chart-wrap { flex:1; position:relative; overflow:hidden; min-height:0 }
.perps-chart-wrap iframe { width:100%; height:100%; border:none; position:absolute; inset:0; transition:opacity .4s }
.perps-order-form { flex-shrink:0; padding:14px; border-top:1px solid var(--bd); background:var(--bg2); overflow-y:auto; max-height:340px }
.pof-tabs { display:flex; gap:4px; margin-bottom:12px }
.pof-tab { flex:1; background:var(--bg4); border:1px solid var(--bd2); border-radius:var(--r); color:var(--t2); font-family:var(--mono); font-size:11px; font-weight:700; padding:7px; cursor:pointer; transition:all .15s; text-transform:uppercase; letter-spacing:.3px }
.pof-tab[data-side="long"].active { background:var(--gd); border-color:var(--gm); color:var(--green) }
.pof-tab[data-side="short"].active { background:var(--rd); border-color:var(--rm); color:var(--red) }
.pof-selected-token { font-family:var(--mono); font-size:13px; color:var(--t3); margin-bottom:12px }
.pof-field { margin-bottom:12px }
.pof-field label { display:block; font-size:10px; color:var(--t3); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px }
.pof-summary { background:var(--bg3); border-radius:var(--r); padding:10px; margin-bottom:12px }
.pof-row { display:flex; justify-content:space-between; font-size:11px; color:var(--t2); margin-bottom:4px }
.pof-row:last-child { margin-bottom:0 }
.pof-row span:last-child { font-family:var(--mono); color:var(--white); font-weight:600 }
.pof-hint { font-size:11px; color:var(--t3); text-align:center; font-family:var(--mono) }
.perps-positions { overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px }
.perp-pos-card { background:var(--bg3); border-radius:var(--r); padding:10px 12px; border:1px solid var(--bd2) }
.ppc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.ppc-sym { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--white) }
.ppc-side { font-size:9px; padding:2px 7px; border-radius:3px; font-family:var(--mono); font-weight:700 }
.ppc-side.long { background:var(--gd); color:var(--green); border:1px solid var(--gm) }
.ppc-side.short { background:var(--rd); color:var(--red); border:1px solid var(--rm) }
.ppc-row { display:flex; justify-content:space-between; font-size:11px; color:var(--t2); margin-bottom:3px }
.ppc-row span:last-child { font-family:var(--mono); color:var(--white) }
.ppc-close { width:100%; margin-top:8px; background:transparent; border:1px solid var(--bd2); border-radius:4px; color:var(--t2); font-family:var(--mono); font-size:10px; padding:5px; cursor:pointer; transition:all .15s }
.ppc-close:hover { border-color:var(--rm); color:var(--red) }

/* Wallet */
.wallet-layout { display:flex; gap:0; flex:1; overflow:hidden }
.wallet-main { flex:1; overflow-y:auto; padding:20px }
.wallet-side { width:260px; flex-shrink:0; border-left:1px solid var(--bd); overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px }
.wallet-total-card { background:var(--bg2); border:1px solid var(--bd2); border-radius:var(--rl); padding:24px; margin-bottom:20px; text-align:center }
.wtc-label { font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:.6px; font-family:var(--mono); margin-bottom:10px }
.wtc-val { font-family:var(--mono); font-size:36px; font-weight:700; color:var(--white); letter-spacing:-1px; margin-bottom:6px }
.wtc-sub { font-family:var(--mono); font-size:14px; font-weight:600 }
.wallet-assets { display:flex; flex-direction:column; gap:8px; margin-bottom:24px }
.wallet-asset-row { display:flex; align-items:center; justify-content:space-between; background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); padding:12px 16px; transition:border-color .15s }
.wallet-asset-row:hover { border-color:var(--bd2) }
.war-l { display:flex; align-items:center; gap:10px }
.war-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:700; overflow:hidden }
.war-icon img { width:100%; height:100%; object-fit:cover; border-radius:50% }
.war-sym { font-family:var(--mono); font-size:14px; font-weight:700; color:var(--white) }
.war-name { font-size:11px; color:var(--t3); margin-top:1px }
.war-r { text-align:right }
.war-val { font-family:var(--mono); font-size:14px; font-weight:700; color:var(--white) }
.war-sub { font-size:11px; margin-top:2px }
.wact-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--bd) }
.wact-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0 }
.wact-desc { flex:1; min-width:0 }
.wact-title { font-size:12px; color:var(--white); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.wact-time { font-size:10px; color:var(--t3); font-family:var(--mono); margin-top:1px }
.wact-amt { font-family:var(--mono); font-size:12px; font-weight:600; text-align:right; white-space:nowrap }
.wallet-stats-card,.wallet-alloc-card { background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); padding:14px }
.wstat-row { display:flex; justify-content:space-between; font-size:12px; color:var(--t2); margin-bottom:7px }
.wstat-row:last-child { margin-bottom:0 }
.wstat-row span:last-child { font-family:var(--mono); color:var(--white); font-weight:600 }
.alloc-chart-wrap { display:flex; align-items:center; gap:12px }
#alloc-legend { display:flex; flex-direction:column; gap:5px }
.alloc-leg-row { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--t) }
.alloc-leg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }

/* Responsive additions */
@media(max-width:900px) {
  .perps-layout { grid-template-columns:1fr }
  .perps-markets,.perps-positions { display:none }
}
@media(max-width:700px) {
  .td-body { flex-direction:column; overflow-y:auto }
  .td-chart-col { border-right:none; border-bottom:1px solid var(--bd); height:260px; flex:none }
  .td-info-col { width:100%; overflow-y:visible }
  .wallet-layout { flex-direction:column }
  .wallet-side { width:100%; border-left:none; border-top:1px solid var(--bd) }
}