/* PerpsPad app pages, themed after the landing page: white, hairline dashed borders, square corners, black pills */
@font-face{font-family:"Google Sans Flex";src:url(/assets/fonts.gstatic.com/s/googlesansflex/v21/t5t7IQcYNIWbFgDgAAzZ34auoVyXuuOmfyca.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts.gstatic.com/s/instrumentserif/v5/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjg.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(/assets/fonts.gstatic.com/s/fragmentmono/v6/4iCr6K5wfMRRjxp0DA6-2CLnB4NHhg.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--ink:#000;--muted:#787878;--line:rgba(0,0,0,.1);--panel:#f7f7f7;--accent:#000;--ok:#0a8a4a;--bad:#c62828}
.bp{margin:0;background:#fff;color:var(--ink);font-family:"Google Sans Flex",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55}
.bp *{box-sizing:border-box}.bp a{color:inherit}
.bp-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);z-index:10;border-bottom:1px dashed var(--line)}
.brand-mark{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}.brand-mark em{font-style:normal}.brand-logo{height:22px;width:auto}
.bp-nav{display:flex;align-items:center;gap:22px}.bp-nav a{font-size:14px;text-decoration:none;color:var(--ink)}.bp-nav a.active{text-decoration:underline;text-underline-offset:6px}
.walletbtn{border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:999px;padding:9px 16px;font:500 13px/1 "Google Sans Flex",sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.walletbtn.connected{background:#fff;color:var(--ink)}.walletbtn .dot{width:7px;height:7px;border-radius:50%}.walletbtn small{color:var(--muted)}
.cabar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;padding:10px 16px;background:var(--panel);border-bottom:1px dashed var(--line);font-size:13px}
.cabar code{font-family:"Fragment Mono",monospace;font-size:12px;word-break:break-all}.pill.official-token{background:var(--ink);color:#fff}
.cabtn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:4px 10px;font:500 11px "Google Sans Flex",sans-serif;cursor:pointer;text-decoration:none}.cabtn:hover{border-color:var(--ink)}
.bp-main{max-width:1180px;margin:0 auto;padding:56px 24px 96px}
.bp h1{font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.03em;font-weight:500;margin:0 0 14px}.bp h1 em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400}
.bp h2{font-size:28px;font-weight:500;letter-spacing:-.02em;margin:40px 0 12px}
.bp .lede{font-size:17px;max-width:640px;color:var(--muted);margin:0 0 32px}
.bp-card{background:#fff;border:1px dashed var(--line);border-radius:0;padding:24px}
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0;border:1px dashed var(--line)}.bp-grid>*{border:0;border-right:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.bp-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:999px;padding:12px 20px;font:500 14px/1 "Google Sans Flex",sans-serif;cursor:pointer;text-decoration:none}
.bp-btn:hover{background:#333}.bp-btn.ghost{background:#fff;color:var(--ink)}.bp-btn.ghost:hover{background:var(--panel)}.bp-btn[disabled]{opacity:.4;cursor:not-allowed}
.bp label{display:block;font-size:12px;color:var(--muted);margin:16px 0 6px}
.bp input,.bp select,.bp textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:0;font:inherit;background:#fff}.bp input:focus,.bp select:focus,.bp textarea:focus{outline:none;border-color:var(--ink)}
.bp .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bp .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.bp .muted{color:var(--muted);font-size:13px}
.bp .pill{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:11px;background:#fff}
.bp .pill.long{border-color:var(--ok);color:var(--ok)}.bp .pill.short{border-color:var(--bad);color:var(--bad)}.bp .pill.liquidated{border-color:#c60;color:#c60}.bp .pill.official{background:var(--panel)}
.bp .pos{color:var(--ok)}.bp .neg{color:var(--bad)}
.bp table{width:100%;border-collapse:collapse;font-size:14px}.bp th{font-size:11px;color:var(--muted);text-align:left;padding:10px 8px;border-bottom:1px dashed var(--line);font-weight:500}.bp td{padding:12px 8px;border-bottom:1px dashed var(--line);vertical-align:top}
.bp .mono{font-family:"Fragment Mono",monospace;font-size:12px}
.bp .out{white-space:pre-wrap;background:var(--panel);color:var(--ink);padding:16px;border:1px dashed var(--line);font-family:"Fragment Mono",monospace;font-size:12px;margin-top:16px;min-height:60px}
.bp .steps{counter-reset:s;list-style:none;padding:0;margin:0}.bp .steps li{counter-increment:s;padding:16px 0 16px 48px;position:relative;border-bottom:1px dashed var(--line)}.bp .steps li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:16px;font-family:"Fragment Mono",monospace;color:var(--muted)}
.bp-footer{padding:30px 24px;font-size:12px;color:var(--muted);max-width:1180px;margin:0 auto;border-top:1px dashed var(--line)}
.poscard{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}.poscard b{font-size:20px;display:block;font-weight:500}
.status-open{border:1px solid var(--ok)}.status-none{border:1px dashed var(--line)}
.coinbtn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px dashed var(--line);border-radius:0;padding:14px;cursor:pointer;font:inherit}.coinbtn.on{border:1px solid var(--ink)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}.log{margin-top:14px;font-size:14px}.log div{padding:8px 0;border-top:1px dashed var(--line)}
.msg{margin-top:12px;padding:12px 14px;background:var(--panel);font-size:14px}.msg.ok{color:var(--ok)}.msg.err{color:var(--bad)}
.chart{height:380px;border:1px dashed var(--line);overflow:hidden;background:#fff}.chart.small{height:200px}
.ranges{display:flex;gap:6px;margin:0 0 10px}.ranges button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:500 12px "Google Sans Flex",sans-serif;cursor:pointer}.ranges button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin:8px 0 0;flex-wrap:wrap}.legend i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:6px}
@media (max-width:760px){.bp .row,.bp .row3{grid-template-columns:1fr}.bp-nav{gap:12px}.bp-nav a{font-size:12px}.bp-header{padding:12px 16px}.bp-main{padding:36px 16px 72px}}
/* fixes: nav wraps on small screens; official-token pill; */
.bp-nav{flex-wrap:wrap;justify-content:flex-end}
.bp .pill.official-token{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:760px){.bp-header{flex-wrap:wrap;gap:10px}.bp-nav{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}}