/* Transparent outer dialog reserves real space for the coin beyond the visible frame. */
dialog:has(.trade-hero){width:min(800px,calc(100% - 24px));max-width:800px;max-height:calc(100dvh - 20px);padding:112px 42px 24px 18px;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:auto;scrollbar-width:thin;scrollbar-color:#4a5768 transparent;animation:none}
dialog:has(.trade-hero)::backdrop{background:#030609db;backdrop-filter:blur(9px)}
dialog:has(.trade-hero) .dialog-shell{overflow:visible;border:2px solid #8a99aa;border-radius:15px;background:linear-gradient(135deg,#e8f0f822,transparent 24%) border-box,#0a0e14;box-shadow:0 0 0 3px #26303d,0 0 0 4px #b2c0cf88,inset 0 0 0 4px #111722,inset 0 0 0 5px #83909d44,0 35px 80px #000b}
dialog:has(.trade-hero) .dialog-shell:before,dialog:has(.trade-hero) .dialog-shell:after{content:'';position:absolute;inset:5px;pointer-events:none;z-index:2;border-radius:10px;background:linear-gradient(135deg,#eaf3ff,#6b8298) top left/34px 3px no-repeat,linear-gradient(#eaf3ff,#5a6f85) top left/3px 34px no-repeat,linear-gradient(135deg,#5a6f85,#eaf3ff) bottom right/34px 3px no-repeat,linear-gradient(#5a6f85,#eaf3ff) bottom right/3px 34px no-repeat}
dialog:has(.trade-hero) .dialog-shell:after{inset:9px;background:linear-gradient(90deg,#d5fc49,transparent) bottom left/100px 1px no-repeat}
dialog:has(.trade-hero) .dialog-top{position:relative;z-index:8;background:transparent;backdrop-filter:none;padding:16px 22px;border:0;min-height:58px;overflow:visible}
dialog:has(.trade-hero) .dialog-top>.tag{margin-right:215px;font-size:6px;padding:4px 6px}
dialog:has(.trade-hero) .dialog-top>.icon-button{position:absolute;top:-72px;right:-8px;width:40px;height:40px;border-radius:50%;background:#111925e8;border-color:#697b91;box-shadow:0 6px 20px #0008;z-index:20}
dialog:has(.trade-hero) .small-brand{font-size:21px;flex:0 0 auto}
.trade-dialog{overflow:visible;border-radius:0 0 13px 13px}
.trade-hero{display:block;isolation:auto;overflow:visible;min-height:184px;padding:19px 240px 34px 28px;background:radial-gradient(ellipse at 85% 5%,var(--trade-glow),transparent 70%),linear-gradient(125deg,#131b2380,#090d1390);border:0}
.trade-hero:after{left:28px;bottom:12px;width:44%;height:1px;opacity:.7;box-shadow:0 0 10px var(--trade-accent)}
.trade-hero-grid{inset:0;z-index:0;opacity:.24;pointer-events:none;mask-image:linear-gradient(90deg,#000,transparent)}
.trade-checkers{position:absolute;inset:0 0 0 45%;opacity:.13;background:url('assets/checker-flag.svg') center/cover no-repeat;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000)}
.trade-hero-copy{position:relative;z-index:2}.trade-hero h2{font-size:36px;line-height:1.06;font-weight:800;letter-spacing:-1.3px;margin:13px 0 10px;max-width:340px;text-shadow:0 3px 16px #0009}.trade-hero-copy p{overflow-wrap:anywhere}
.trade-route{flex-wrap:wrap;font-size:8px}.trade-kicker{font-size:7px;letter-spacing:1.5px}
.trade-frame-caption{position:absolute;bottom:1px;left:28px;color:#6d8493;font:6px var(--mono);letter-spacing:1.4px}
.trade-hero .trade-orb{position:absolute;right:-34px;top:-110px;width:260px;height:260px;z-index:7;pointer-events:none;perspective:900px;transform:translateZ(0);animation:coin-arrive .65s cubic-bezier(.16,.8,.22,1) both}
.coin-assembly{position:absolute;width:184px;height:184px;left:38px;top:49px;transform:rotate(-16deg) rotateY(-23deg) rotateX(8deg);transform-style:preserve-3d;z-index:3;filter:drop-shadow(8px 16px 9px #0009)}
.trade-hero .trade-orb-face{position:relative;width:100%;height:100%;padding:12px;border-radius:50%;background:conic-gradient(from 20deg,#f4faff,#718297 9%,#edf6ff 17%,#435064 28%,#bbc6d3 38%,#fbffff 48%,#5d697b 61%,#d1e4a2 73%,#effbff 83%,#768899 93%,#f4faff);border:1px solid #cbd6dd;box-shadow:1px 1px 0 #798595,3px 3px 0 #25333f,5px 5px 0 #adb9c5,7px 7px 0 #475569,9px 9px 0 #202d3b,11px 11px 0 #8391a2,13px 13px 0 #293340,0 0 38px var(--trade-glow),inset 0 0 0 4px #e4f0ff60}
.trade-orb-face:before{content:'';position:absolute;inset:7px;border:1px dashed #3c4b62;border-radius:50%;z-index:2;pointer-events:none}
.trade-coin-art{width:100%;height:100%;position:relative;border-radius:50%;overflow:hidden;background:var(--token-accent);border:3px solid #3d4d5b;box-shadow:inset 0 0 16px #0009}
.trade-hero .trade-coin-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.65) contrast(1.12)}
.trade-hero .trade-coin-art b{background:linear-gradient(145deg,#33475a,#111c29);font:800 46px var(--font);color:var(--token-accent)}
.coin-specular{position:absolute;inset:0;border-radius:50%;z-index:3;pointer-events:none;background:linear-gradient(125deg,#e6f5ff55,transparent 34%,transparent 55%,#0003 75%,#d5fc492b);box-shadow:inset 0 0 0 2px #fff5}
.trade-floating-crown{position:absolute;z-index:5;max-width:none;width:180px;height:120px;object-fit:contain;left:1px;top:-92px;filter:drop-shadow(0 6px 4px #0008);transform:translateZ(8px)}
.coin-ground-shadow{position:absolute;z-index:0;width:190px;height:95px;top:144px;left:36px;background:#000a;filter:blur(18px);transform:rotate(-14deg);border-radius:50%}
.energy-track{position:absolute;inset:63px -15px 25px;border:2px solid var(--trade-accent);border-radius:50%;transform:rotate(-22deg) rotateX(64deg);box-shadow:0 0 6px var(--trade-accent),0 0 19px var(--trade-glow),inset 0 0 9px var(--trade-glow);pointer-events:none}
.energy-back{z-index:1;border-bottom-color:transparent;border-right-color:transparent}
.energy-front{z-index:5;border-top-color:transparent;border-left-color:transparent;inset:65px -18px 22px;border-width:3px}
.energy-thread{z-index:6;inset:58px -24px 17px;border-width:1px;transform:rotate(-27deg) rotateX(64deg);opacity:.55;border-top-color:transparent}
.orbital-spark{position:absolute;z-index:8;color:#f2ffc0;text-shadow:0 0 12px var(--trade-accent);font-size:20px}.spark-a{top:67px;left:6px}.spark-b{right:9px;bottom:42px;font-size:27px}.spark-c{left:42px;bottom:22px;font-size:13px}
.trade-hero .trade-orb-badge{z-index:9;right:32px;bottom:6px;width:45px;height:45px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#405261,#101b25 65%);border:2px solid #dce5ee;box-shadow:2px 3px 0 #657584,5px 8px 13px #0009,0 0 18px var(--trade-glow);color:var(--trade-accent);transform:rotate(-12deg)}
.trade-hero .trade-orb-badge .icon{width:25px;height:25px}
.trade-hero-filled .trade-orb-badge{width:61px;height:61px;right:22px;bottom:-1px}.trade-hero-filled .trade-orb-badge .icon{width:35px;height:35px}
.trade-dialog-content{position:relative;padding:18px 28px 23px;background:linear-gradient(#0b101600,#0b1016 50px);border-radius:0 0 13px 13px}
.trade-transfer{background:linear-gradient(135deg,#23313a77,#0b111b);border-color:#62727e;box-shadow:inset 0 1px #e5f2ff1a,0 10px 24px #0004;padding:18px}
.trade-transfer strong{font-size:29px}.trade-transfer>div>span{letter-spacing:1px}.trade-transfer>div:last-child strong{color:#e7f5d4}
.trade-dialog .trade-execute{box-shadow:inset 0 2px #f4ffd1,0 0 20px var(--trade-glow);min-height:49px;border-radius:6px}
.trade-execute:before{content:'';position:absolute;right:20px;top:8px;width:35px;height:33px;background:repeating-conic-gradient(#192b1666 0 25%,transparent 0 50%) 0/12px 12px;transform:skew(-15deg);opacity:.25;pointer-events:none}
.trade-receipt{padding:8px 0}.trade-receipt .detail-rows{margin:0 0 12px}.trade-receipt .detail-row{padding:8px 0}
.trade-burst{z-index:12}.trade-burst i{box-shadow:0 0 6px var(--trade-accent)}
.trade-notification{border-radius:5px;background:linear-gradient(130deg,#273338,#101820);border-color:#85969e;box-shadow:inset 0 1px #e8faff33,0 20px 45px #000b}
.notification-check{border:1px solid #e2ebc6;box-shadow:0 0 15px var(--trade-glow)}
dialog:has(.trade-hero) .dialog-body:has(#trade-amount){padding:0 26px 26px}
.dialog-body:has(#trade-amount)>.trade-hero{margin:0 -26px;border:0;border-radius:0}
.dialog-body:has(#trade-amount)>.legacy-trade-note{margin-top:18px}
@keyframes coin-arrive{from{opacity:0;transform:translate(12px,14px) scale(.94)}to{opacity:1;transform:translate(0,0) scale(1)}}
@media(max-width:600px){
  dialog:has(.trade-hero){width:calc(100% - 12px);padding:80px 14px 15px 7px;max-height:calc(100dvh - 10px)}
  dialog:has(.trade-hero) .dialog-top{padding:12px 16px;min-height:48px}.dialog-top>.small-brand{font-size:18px!important}
  dialog:has(.trade-hero) .dialog-top>.tag{display:none}dialog:has(.trade-hero) .dialog-top>.icon-button{top:-66px;right:0;width:40px;height:40px}
  .trade-hero{min-height:151px;padding:14px 135px 28px 17px}.trade-hero h2{font-size:26px;line-height:1.1;margin:10px 0 8px}.trade-kicker{font-size:6px;letter-spacing:.6px}.trade-hero-copy p{font-size:11px}.trade-hero-copy p>span{display:block;margin:4px 0}.trade-route{font-size:6px;gap:5px}.trade-route i{font-size:5px}
  .trade-hero:after{left:17px;bottom:12px;width:47%}.trade-frame-caption{font-size:5px;left:17px;letter-spacing:.7px}
  .trade-hero .trade-orb{width:165px;height:165px;right:-9px;top:-67px}.coin-assembly{width:120px;height:120px;left:24px;top:30px}
  .trade-hero .trade-orb-face{padding:8px;box-shadow:2px 2px 0 #72818e,4px 4px 0 #2a3746,6px 6px 0 #97a7b8,8px 8px 0 #293340,0 0 25px var(--trade-glow)}
  .trade-floating-crown{width:118px;height:79px;left:0;top:-60px}.trade-hero .trade-coin-art b{font-size:30px}
  .energy-track{inset:40px -3px 18px}.energy-front{inset:43px -6px 15px;border-width:2px}.energy-thread{inset:38px -10px 13px}
  .coin-ground-shadow{width:110px;height:65px;top:90px;left:25px;filter:blur(12px)}
  .trade-hero .trade-orb-badge{width:33px;height:33px;right:16px;bottom:3px}.trade-hero .trade-orb-badge .icon{width:19px;height:19px}.trade-hero-filled .trade-orb-badge{width:42px;height:42px;right:10px;bottom:-2px}
  .spark-a{top:45px;left:4px;font-size:14px}.spark-b{right:2px;bottom:30px;font-size:18px}.spark-c{left:25px;bottom:15px;font-size:10px}
  .trade-dialog-content{padding:14px 16px 19px}.trade-transfer{padding:14px 10px;gap:7px;grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr)}.trade-transfer strong{font-size:23px}.transfer-arrow{width:25px;height:25px}.trade-transfer small{font-size:9px}
  .trade-safety{font-size:9px}.trade-receipt .detail-row,.trade-receipt .detail-row>strong{font-size:10px}
  dialog:has(.trade-hero) .dialog-body:has(#trade-amount){padding:0 16px 20px}.dialog-body:has(#trade-amount)>.trade-hero{margin:0 -16px}
}
@media(max-width:360px){.trade-hero{padding-right:114px}.trade-hero h2{font-size:23px}.trade-hero .trade-orb{right:-21px;scale:.88}.trade-transfer strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.trade-hero .trade-orb{animation:none}}
.reduce-motion .trade-hero .trade-orb{animation:none}
/* Reserve the entire orbit overhang, then keep only vertical modal scrolling. */
dialog:has(.trade-hero){max-width:830px;width:min(830px,calc(100% - 24px));padding-right:70px;overflow-x:hidden;overflow-y:auto}
dialog:has(.trade-hero) .dialog-top>.tag{display:none}
dialog:has(.trade-hero) .dialog-shell,#dialog-content,.trade-hero-copy{min-width:0}
.trade-hero .coin-assembly{animation:trade-coin-bob 5.5s ease-in-out infinite}
.trade-hero .energy-back{animation:trade-orbit-spin 13s linear infinite}
.trade-hero .energy-front{animation:trade-orbit-spin 9s linear infinite reverse}
.trade-hero .energy-thread{animation:trade-thread-spin 17s linear infinite}
.trade-hero .coin-ground-shadow{animation:trade-shadow-breathe 5.5s ease-in-out infinite}
@keyframes trade-coin-bob{0%,100%{transform:translateY(0) rotate(-16deg) rotateY(-23deg) rotateX(8deg)}50%{transform:translateY(-7px) rotate(-13deg) rotateY(-19deg) rotateX(10deg)}}
@keyframes trade-orbit-spin{from{transform:rotate(-22deg) rotateX(64deg) rotateZ(0deg)}to{transform:rotate(-22deg) rotateX(64deg) rotateZ(360deg)}}
@keyframes trade-thread-spin{from{transform:rotate(-27deg) rotateX(64deg) rotateZ(0deg)}to{transform:rotate(-27deg) rotateX(64deg) rotateZ(360deg)}}
@keyframes trade-shadow-breathe{0%,100%{opacity:1;transform:rotate(-14deg) scale(1)}50%{opacity:.65;transform:rotate(-14deg) scale(.92)}}
@media(max-width:600px){dialog:has(.trade-hero){width:calc(100% - 12px);padding-right:26px}.trade-hero .coin-assembly{animation-duration:6.5s}}
@media(prefers-reduced-motion:reduce){.trade-hero .coin-assembly,.trade-hero .energy-track,.trade-hero .coin-ground-shadow{animation:none}}
.reduce-motion .trade-hero .coin-assembly,.reduce-motion .trade-hero .energy-track,.reduce-motion .trade-hero .coin-ground-shadow{animation:none}
/* Fixed projected arcs preserve depth; only the highlights travel around the orbit. */
.trade-hero .trade-orb{isolation:isolate;transform-style:flat}
.energy-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none;stroke:var(--trade-accent);stroke-linecap:round;filter:drop-shadow(0 0 3px var(--trade-glow))}
.orbit-far{z-index:1;opacity:.65}.orbit-near{z-index:5}
.orbit-line{stroke-width:1.6;opacity:.6}
.orbit-flow{stroke-width:2.7;stroke-dasharray:10 90;animation:orbit-highlight-flow 6s linear infinite;filter:drop-shadow(0 0 2px var(--trade-accent))}
.orbit-near .orbit-flow{animation-delay:-3s}
@keyframes orbit-highlight-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.trade-hero .orbital-spark{display:block;transform-origin:center;animation:spark-twinkle 4.2s ease-in-out infinite}
.trade-hero .spark-b{animation-duration:5.3s;animation-delay:-1.8s}
.trade-hero .spark-c{animation-duration:3.7s;animation-delay:-2.6s}
@keyframes spark-twinkle{0%,100%{opacity:.25;transform:scale(.72) rotate(-8deg);text-shadow:0 0 3px var(--trade-accent)}45%{opacity:.95;transform:scale(1.12) rotate(8deg);text-shadow:0 0 12px var(--trade-accent)}65%{opacity:.55;transform:scale(.9) rotate(3deg);text-shadow:0 0 5px var(--trade-accent)}}
@media(prefers-reduced-motion:reduce){.trade-hero .orbit-flow,.trade-hero .orbital-spark{animation:none}.trade-hero .orbital-spark{opacity:.7}}
.reduce-motion .trade-hero .orbit-flow,.reduce-motion .trade-hero .orbital-spark{animation:none}
.reduce-motion .trade-hero .orbital-spark{opacity:.7}