/* Coin page: header card with stats, trade box, chart card, holder payouts, recent payouts (rounded-2xl cards on --rest). */
.cp{display:grid; gap:12px; padding-bottom:64px}
.ccard{display:flex; flex-direction:column; overflow:hidden; border-radius:16px; background:var(--card); box-shadow:var(--rest)}
.chd{display:flex; align-items:flex-start; gap:14px; padding:16px 20px}
.chd .av{width:52px; height:52px}
.chd .nm{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding-top:4px}
.chd .nm b{font-size:20px; font-weight:600; letter-spacing:-.01em}
.chd .nm span{font-size:13px; font-weight:600; color:var(--muted)}
.chd .ca{margin-top:8px}
.chd .links{margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px}
.lpill{display:inline-flex; height:28px; align-items:center; justify-content:center; gap:6px; border-radius:999px; border:1px solid var(--line); padding:0 12px; font-size:11px; font-weight:500; color:var(--muted)}
.lpill:hover{border-color:var(--frame); background:var(--well); color:var(--ink)}
.lpill.ic{width:28px; padding:0}
.cstats{display:flex; flex-wrap:wrap; border-top:1px solid var(--line)}
.cstats>div{min-width:132px; flex:1; padding:12px 20px; border-right:1px solid var(--line)}
.cstats>div:last-child{border-right:0}
.cstats .l{font-size:9.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--chrome)}
.cstats .v{margin-top:4px; font-size:16px; font-weight:600; line-height:1.25; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.crow{display:grid; gap:12px}
.trade{display:flex; height:100%; flex-direction:column; gap:12px; padding:16px}
.trade .bs{display:grid; grid-template-columns:1fr 1fr; gap:4px; border-radius:999px; background:var(--well); padding:4px}
.trade .bs button{height:32px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--muted)}
.trade .bs button[aria-pressed=true]{background:color-mix(in srgb,var(--head) 16%,var(--card)); color:var(--head)}
.trade .bs button.sell[aria-pressed=true]{background:color-mix(in srgb,var(--alert) 12%,var(--card)); color:var(--alert)}
.pay{border-radius:7px; border:1px solid var(--line); background:var(--card); padding:10px 12px}
.pay .h{display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
.pay .r{margin-top:6px; display:flex; align-items:center; gap:8px}
.pay input{width:100%; background:transparent; font-size:20px; font-weight:500; letter-spacing:-.01em; font-variant-numeric:tabular-nums; outline:none}
.pay input::placeholder{color:color-mix(in srgb,var(--muted) 50%,transparent)}
.pay .tok{display:flex; flex:none; align-items:center; gap:6px; border-radius:999px; background:var(--well); padding:4px 8px; font-size:11.5px; font-weight:500}
.pay .qs{margin-top:8px; display:flex; gap:4px}
.pay .qs button{height:24px; flex:1; border-radius:4px; border:1px solid var(--line); font-size:10.5px; font-weight:500; color:var(--muted)}
.pay .qs button:hover{border-color:var(--frame); color:var(--ink)}
.recv{margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:0 4px; font-size:11.5px; color:var(--muted)}
.recv b{font-size:13px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.dashed{display:flex; height:40px; align-items:center; justify-content:center; border-radius:6px; border:1px dashed var(--frame); font-size:12.5px; color:var(--muted)}
.tradebtn{height:40px; border-radius:6px; background:var(--head); color:#fff; font-size:13px; font-weight:600}
html[data-theme=dark] .tradebtn{color:#121211}
.tradebtn.sell{background:var(--alert); color:#fff}
.tnote{padding:0 4px; font-size:10.5px; line-height:1.6; color:var(--muted)}
.chart{display:flex; flex-direction:column; padding:16px 20px}
.chart .hd{margin-bottom:12px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.chart .hd>div:first-child{min-width:0}
.chart .iv{flex:none}
.chart .big{font-size:26px; font-weight:500; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.chart .sub{margin-top:6px; display:flex; align-items:baseline; gap:8px; font-size:12px; line-height:1}
.chart .iv{display:flex; align-items:center; gap:2px; border-radius:999px; background:var(--well); padding:2px}
.chart .iv button{border-radius:999px; padding:4px 10px; font-size:11px; font-weight:600; color:var(--muted)}
.chart .iv button[aria-pressed=true]{background:#fff; color:var(--ink)}
html[data-theme=dark] .chart .iv button[aria-pressed=true]{background:var(--track)}
.chart .plot{position:relative; height:360px; width:100%}
.chart svg{width:100%; height:100%; overflow:visible}
.chart .attr{position:absolute; left:0; bottom:0; font-size:9.5px; color:color-mix(in srgb,var(--muted) 50%,transparent)}
.cpanel{padding:16px 20px}
.cpanel .t{margin-bottom:12px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12.5px; font-weight:700; letter-spacing:-.005em}
.cpanel .t small{font-size:11px; font-weight:400; color:var(--muted)}
.lab{font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:color-mix(in srgb,var(--muted) 70%,transparent)}
.lineup{overflow:hidden; border-radius:8px; border:1px solid var(--line)}
.lineup .li{display:flex; align-items:center; gap:10px; padding:8px 12px 8px 0; font-size:12px; border-left:2px solid var(--ink); background:var(--well)}
.lineup .li .ix{width:28px; text-align:center; font-size:10.5px; color:color-mix(in srgb,var(--muted) 50%,transparent)}
.lineup .li .now{margin-left:auto; font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--head)}
.spent{margin:16px 0 12px; display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:16px}
.spent .bv{font-size:26px; font-weight:500; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.spent .u{margin-left:6px; font-size:12px; color:var(--muted)}
.g22{display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:6px; border:1px solid var(--line)}
.g22>div{min-width:0; padding:10px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.g22>div:nth-child(2n){border-right:0} .g22>div:nth-last-child(-n+2){border-bottom:0}
.g22 .l{font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.g22 .v{margin-top:6px; font-size:12.5px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums}
.g22 .v.dim{color:var(--muted)}
.sech{margin:16px 0 8px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.gchip{display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid var(--line); padding:2px 8px; font-size:10px; font-weight:500}
.gchip i{width:6px; height:6px; border-radius:999px; background:var(--gold)}
.fbar{display:flex; height:6px; gap:2px; overflow:hidden; border-radius:999px}
.fbar i{display:block; height:100%; border-radius:999px}
.legend{margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; font-size:11px}
.legend>div{display:flex; align-items:center; gap:6px}
.legend .d{width:7px; height:7px; flex:none; border-radius:999px}
.legend .p{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.legend .n{margin-left:auto; font-variant-numeric:tabular-nums}
.floorbox{margin-top:16px; border-radius:6px; background:var(--well); padding:10px 12px; font-size:10.5px; line-height:1.6; color:var(--muted)}
.floorbox .pb{margin-top:8px; height:4px; overflow:hidden; border-radius:999px; background:var(--line)}
.floorbox .pb i{display:block; height:100%; background:var(--head)}
.ulist{max-height:420px; min-height:132px; flex:1; overflow-y:auto}
.urow{display:flex; align-items:center; gap:12px; border-radius:7px; padding:10px 8px}
.urow:hover{background:var(--well)}
.urow .a{display:block; font-size:12.5px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums}
.urow .s{margin-top:6px; display:block; font-size:10.5px; line-height:1; color:var(--muted)}
.urow .usd{flex:none; font-size:12.5px; font-weight:500; font-variant-numeric:tabular-nums}
.urow .go{flex:none; color:color-mix(in srgb,var(--muted) 60%,transparent)}
.urow:hover .go{color:var(--ink)}
.viewer{margin-top:10px; font-size:12px; line-height:1.6; color:var(--muted)}
@media (min-width:1024px){.crow.a{grid-template-columns:340px minmax(0,1fr)} .crow.b{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (min-width:640px){.chart .plot{height:420px}}
@media (max-width:639px){.chd{flex-wrap:wrap} .chd .links{margin-left:0; justify-content:flex-start; width:100%} .cstats>div{min-width:50%; border-bottom:1px solid var(--line)}}