/* 🃏 RAKAN Swipe page — coral section colour, a thrown pile of cards, spring-like CSS motion */
body.swx { background: radial-gradient(1200px 600px at 70% -10%, rgba(255,90,122,.18), transparent 60%), #06070c; color: #eef2f8; min-height: 100vh; }
.swm { max-width: 520px; margin: 0 auto; padding: 18px 16px 40px; }
.sw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 8px 0 14px; }
.sw-head h1 { font: 800 clamp(30px, 6vw, 40px)/1.05 Sora, Inter, system-ui, sans-serif; margin: 0; letter-spacing: -.02em; background: linear-gradient(90deg, #ff9a6c, #ff5a7a 55%, #e23d73); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sw-head p { margin: 6px 0 0; color: #9aa7ba; font: 500 14px/1.4 Inter, system-ui, sans-serif; }
.sw-tools { display: flex; gap: 8px; }
.sw-tools button { position: relative; width: 42px; height: 42px; border-radius: 21px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06); color: #fff; font-size: 17px; cursor: pointer; }
.sw-tools button b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff5a7a; font: 700 11px/18px Inter, sans-serif; }
.sw-tools button b:empty { display: none; }
.sw-stage { position: relative; height: min(560px, 72vh); margin-top: 8px; touch-action: none; user-select: none; }
.sw-card { position: absolute; inset: 0; border-radius: 28px; padding: 20px; background: linear-gradient(160deg, rgba(255,90,122,.20), #141922 42%, #0d1118); border: 1px solid rgba(255,90,122,.28); box-shadow: 0 30px 60px -20px rgba(0,0,0,.75);
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)) rotate(var(--r, 0)); transition: transform .45s cubic-bezier(.2,.9,.25,1.25), opacity .3s; overflow: hidden; display: flex; flex-direction: column; }
.sw-card::after { content: ''; position: absolute; inset: 0; background: rgba(5,7,13,var(--dim, 0)); pointer-events: none; transition: background .3s; }
.sw-card:not(.is-top) { transform: translate(calc(var(--x, 0) * (1 - var(--pull, 0))), calc(var(--y, 0) * (1 - var(--pull, 0)))) scale(calc(var(--s, 1) + (1 - var(--s, 1)) * var(--pull, 0))) rotate(calc(var(--r, 0) * (1 - var(--pull, 0)))); transition: transform .25s ease-out; }
.sw-card.is-top { cursor: grab; transform: translate(var(--x), var(--y)) scale(var(--s)) rotate(var(--r)); }
.sw-card.is-top.is-in { transform: none; }
.sw-card.drag { transition: none; cursor: grabbing; }
.sw-card.rise { transform: none !important; transition: transform .35s cubic-bezier(.2,.9,.25,1.25); --dim: 0; }
.sw-card.fly-right { transform: translate(140vw, 60px) rotate(28deg) !important; transition: transform .32s cubic-bezier(.4,.1,.7,.2) !important; }
.sw-card.fly-left { transform: translate(-140vw, 60px) rotate(-28deg) !important; transition: transform .32s cubic-bezier(.4,.1,.7,.2) !important; }
.sw-card.fly-up { transform: translate(0, -140vh) rotate(-6deg) !important; transition: transform .34s cubic-bezier(.4,.1,.7,.2) !important; }
.sw-top { display: flex; justify-content: space-between; }
.sw-chip { padding: 4px 11px; border-radius: 999px; border: 1px solid; font: 700 12px/1.2 Inter, sans-serif; }
.sw-rank { color: #ff7a8f; border-color: rgba(255,90,122,.6); }
.sw-id { text-align: center; margin-top: 14px; }
.sw-logo { position: relative; width: 104px; height: 104px; margin: 0 auto; border-radius: 52px; overflow: hidden; background: linear-gradient(160deg,#1f2633,#141922); box-shadow: 0 0 0 3px rgba(255,90,122,.35), 0 14px 40px -10px rgba(255,90,122,.55); }
.sw-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sw-logo b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 40px Sora, sans-serif; color: #c9d3e2; }
.sw-id h2 { margin: 12px 0 0; font: 800 32px/1.1 Sora, Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-id p { margin: 4px 0 0; color: #8d9ab0; font: 500 13px Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.sw-grid div { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); }
.sw-grid small { display: block; color: #8d9ab0; font: 500 12px Inter, sans-serif; }
.sw-grid b { display: block; margin-top: 4px; font: 800 19px Sora, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.sw-grid b.up { color: #34d399; } .sw-grid b.dn { color: #f87171; }
.sw-note { margin: auto 0 0; padding-top: 14px; color: #6f7c91; font: 500 12px Inter, sans-serif; text-align: center; }
.sw-stamp { position: absolute; top: 28px; padding: 6px 14px; border: 3px solid; border-radius: 12px; font: 800 24px Sora, sans-serif; letter-spacing: .08em; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; z-index: 3; }
.sw-st-r { left: 22px; color: #34d399; border-color: #34d399; transform: rotate(-12deg); opacity: var(--pr, 0); }
.sw-st-l { right: 22px; color: #f87171; border-color: #f87171; transform: rotate(12deg); opacity: var(--pl, 0); }
.sw-st-u { left: 50%; top: 42%; color: #ff9a6c; border-color: #ff9a6c; transform: translateX(-50%); opacity: var(--pu, 0); }
.sw-btns { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 22px; }
.sw-btns button { width: 68px; height: 68px; border-radius: 50%; border: 2px solid; background: #11151d; font-size: 28px; cursor: pointer; transition: transform .15s; }
.sw-btns button:active { transform: scale(.9); }
#sw-left { color: #f87171; border-color: rgba(248,113,113,.6); } #sw-right { color: #34d399; border-color: rgba(52,211,153,.6); }
#sw-up { width: 54px; height: 54px; font-size: 22px; color: #ff9a6c; border-color: rgba(255,154,108,.6); }
.sw-count { text-align: center; color: #6f7c91; font: 500 13px Inter, sans-serif; margin-top: 10px; }
.sw-end { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 12px; color: #9aa7ba; font: 500 15px Inter, sans-serif; }
.sw-end button, .sw-gbox button { padding: 12px 22px; border-radius: 14px; border: 0; background: linear-gradient(90deg,#ff9a6c,#ff5a7a); color: #fff; font: 700 15px Inter, sans-serif; cursor: pointer; }
.sw-panel { margin-top: 18px; padding: 16px; border-radius: 20px; background: #10141c; border: 1px solid rgba(255,255,255,.07); }
.sw-panel h3 { margin: 0 0 10px; font: 800 16px Sora, sans-serif; }
.sw-saved { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sw-s { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; text-decoration: none; }
.sw-s img { grid-row: span 2; width: 32px; height: 32px; border-radius: 16px; object-fit: cover; }
.sw-s b { font: 700 13px Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; } .sw-s small { color: #8d9ab0; font: 500 11px Inter, sans-serif; }
.sw-empty { color: #8d9ab0; font: 500 13px Inter, sans-serif; margin: 0; }
.sw-clear { margin-top: 10px; background: none; border: 1px solid rgba(255,255,255,.12); color: #9aa7ba; border-radius: 10px; padding: 6px 12px; cursor: pointer; }
.sw-guide { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(5,7,13,.82); backdrop-filter: blur(6px); }
.sw-gbox { width: 100%; max-width: 400px; padding: 26px; border-radius: 26px; background: linear-gradient(160deg, rgba(255,90,122,.22), #141922 50%); border: 1px solid rgba(255,90,122,.35); }
.sw-gbox h2 { margin: 0; font: 800 22px Sora, sans-serif; } .sw-gbox p { margin: 8px 0 0; color: #b6c1d1; font: 500 15px/1.5 Inter, sans-serif; }
.sw-gdots { display: flex; gap: 6px; margin: 18px 0; } .sw-gdots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); } .sw-gdots i.on { width: 20px; background: #ff5a7a; }
.sw-grow { display: flex; gap: 10px; } .sw-grow button { flex: 1; } .sw-grow #sw-g-skip { background: rgba(255,255,255,.08); }
html[dir="rtl"] .sw-st-r { left: auto; right: 22px; } html[dir="rtl"] .sw-st-l { right: auto; left: 22px; }
@media (prefers-reduced-motion: reduce) { .sw-card { transition: none !important; } }

/* owner 2026-11-03 ("Swipe will not open"): .sw-guide { display: grid } beat the hidden attribute → the finished guide stayed on top as an empty box */
.swx [hidden] { display: none !important; }
.sw-chip.net-solana { color: #b98bff; border-color: #b98bff88; } .sw-chip.net-base { color: #5b8cff; border-color: #5b8cff88; } .sw-chip.net-bsc { color: #f3ba2f; border-color: #f3ba2f88; } .sw-chip.net-robinhood { color: #c6f36d; border-color: #c6f36d88; }