/* == @turnkey/react-wallet-kit == */
/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-outline-style:solid}}}@layer theme{:host,:root{--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--spacing:.25rem;--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:1.33333;--text-sm:.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--font-weight-extralight:200;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-sm:.25rem;--radius-md:.375rem;--radius-xl:.75rem;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-ping:ping 1s cubic-bezier(0,0,.2,1)infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--color-primary-light:oklch(54.7% .2389 266.82);--color-primary-dark:oklch(54.7% .2389 266.82);--color-primary-text-light:#fff;--color-primary-text-dark:#fff;--color-danger-light:oklch(65% .1406 12.71);--color-danger-dark:oklch(60.88% .1801 30.71);--color-success-light:oklch(72.31% .1834 142.46);--color-success-dark:oklch(76.79% .1603 152.74);--color-button-light:#fff;--color-button-dark:oklch(25.32% .0056 285.99);--color-modal-background-light:oklch(97.58% .0057 264.53);--color-modal-background-dark:oklch(15% 0 0);--color-modal-text-light:oklch(0% .1 41);--color-modal-text-dark:#fff;--color-icon-background-light:oklch(92.8% .006 264.531);--color-icon-background-dark:oklch(32.22% .0053 286.1);--color-icon-text-light:oklch(60.66% 0 0);--color-icon-text-dark:oklch(71.74% .0029 286.32);--animate-shake:shake .25s ease-in-out}}@layer base{input:-webkit-autofill{-webkit-text-fill-color:var(--color-modal-text-light)!important;box-shadow:inset 0 0 0 1000px var(--color-button-light)!important;caret-color:var(--color-modal-text-light);transition:background-color 5000s ease-in-out}.dark input:-webkit-autofill,html.dark input:-webkit-autofill{-webkit-text-fill-color:var(--color-modal-text-dark)!important;box-shadow:inset 0 0 0 1000px var(--color-button-dark)!important;caret-color:var(--color-modal-text-dark)}.tk-style-sentinel{height:0;pointer-events:none;position:absolute;visibility:hidden;width:1234px}.tk-modal{line-height:normal}.tk-modal *,.tk-modal :after,.tk-modal :before{border:revert-layer;box-sizing:revert-layer}.tk-modal button,.tk-modal input,.tk-modal select,.tk-modal textarea{font-feature-settings:inherit;color:revert-layer;font-family:inherit;font-size:revert-layer;font-variation-settings:inherit;font-weight:revert-layer;letter-spacing:inherit;line-height:inherit;margin:revert-layer;padding:revert-layer}@media (max-width:440px){.tk-modal button,.tk-modal input{font-size:medium}}}@layer components{.tk-scrollbar{scrollbar-color:var(--color-icon-text-light)var(--color-icon-background-light);scrollbar-width:thin}.tk-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tk-scrollbar::-webkit-scrollbar-track{background:var(--color-icon-background-light)}.tk-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-icon-text-light);border:2px solid var(--color-icon-background-light);border-radius:10px}.dark .tk-scrollbar{scrollbar-color:var(--color-icon-text-dark)var(--color-icon-background-dark)}.dark .tk-scrollbar::-webkit-scrollbar-track{background:var(--color-icon-background-dark)}.dark .tk-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-icon-text-dark);border:2px solid var(--color-icon-background-dark)}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.top-\[-2px\]{top:-2px}.-right-4{right:calc(var(--spacing)*-4)}.right-0{right:calc(var(--spacing)*0)}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-\[3px\]{margin:3px}.m-auto{margin:auto}:where(.tk-modal) .m-auto{margin:auto!important}.\!mx-4{margin-inline:calc(var(--spacing)*4)!important}.mx-2{margin-inline:calc(var(--spacing)*2)}:where(.tk-modal) .mx-2{margin-inline:calc(var(--spacing)*2)!important}.\!my-0{margin-block:calc(var(--spacing)*0)!important}.my-2{margin-block:calc(var(--spacing)*2)}:where(.tk-modal) .my-2{margin-block:calc(var(--spacing)*2)!important}.my-3{margin-block:calc(var(--spacing)*3)}:where(.tk-modal) .my-3{margin-block:calc(var(--spacing)*3)!important}.my-4{margin-block:calc(var(--spacing)*4)}:where(.tk-modal) .my-4{margin-block:calc(var(--spacing)*4)!important}.my-6{margin-block:calc(var(--spacing)*6)}:where(.tk-modal) .my-6{margin-block:calc(var(--spacing)*6)!important}.me-1{margin-inline-end:calc(var(--spacing)*1)}:where(.tk-modal) .me-1{margin-inline-end:calc(var(--spacing)*1)!important}.-mt-2{margin-top:calc(var(--spacing)*-2)}:where(.tk-modal) .-mt-2{margin-top:calc(var(--spacing)*-2)!important}.mt-0{margin-top:calc(var(--spacing)*0)}:where(.tk-modal) .mt-0{margin-top:calc(var(--spacing)*0)!important}.mt-1{margin-top:calc(var(--spacing)*1)}:where(.tk-modal) .mt-1{margin-top:calc(var(--spacing)*1)!important}.mt-2{margin-top:calc(var(--spacing)*2)}:where(.tk-modal) .mt-2{margin-top:calc(var(--spacing)*2)!important}.mt-3{margin-top:calc(var(--spacing)*3)}:where(.tk-modal) .mt-3{margin-top:calc(var(--spacing)*3)!important}.mt-4{margin-top:calc(var(--spacing)*4)}:where(.tk-modal) .mt-4{margin-top:calc(var(--spacing)*4)!important}.mt-5{margin-top:calc(var(--spacing)*5)}:where(.tk-modal) .mt-5{margin-top:calc(var(--spacing)*5)!important}.mt-6{margin-top:calc(var(--spacing)*6)}:where(.tk-modal) .mt-6{margin-top:calc(var(--spacing)*6)!important}.mt-8{margin-top:calc(var(--spacing)*8)}:where(.tk-modal) .mt-8{margin-top:calc(var(--spacing)*8)!important}.mt-10{margin-top:calc(var(--spacing)*10)}:where(.tk-modal) .mt-10{margin-top:calc(var(--spacing)*10)!important}.mt-11{margin-top:calc(var(--spacing)*11)}:where(.tk-modal) .mt-11{margin-top:calc(var(--spacing)*11)!important}.mt-12{margin-top:calc(var(--spacing)*12)}:where(.tk-modal) .mt-12{margin-top:calc(var(--spacing)*12)!important}.mb-1{margin-bottom:calc(var(--spacing)*1)}:where(.tk-modal) .mb-1{margin-bottom:calc(var(--spacing)*1)!important}.mb-3{margin-bottom:calc(var(--spacing)*3)}:where(.tk-modal) .mb-3{margin-bottom:calc(var(--spacing)*3)!important}.mb-4{margin-bottom:calc(var(--spacing)*4)}:where(.tk-modal) .mb-4{margin-bottom:calc(var(--spacing)*4)!important}.mb-5{margin-bottom:calc(var(--spacing)*5)}:where(.tk-modal) .mb-5{margin-bottom:calc(var(--spacing)*5)!important}.ml-auto{margin-left:auto}:where(.tk-modal) .ml-auto{margin-left:auto!important}.box-border{box-sizing:border-box}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.hidden{display:none}.inline-block{display:inline-block}.size-1\/2{height:50%;width:50%}.size-3{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-5{height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}.size-6{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6)}.size-11{height:calc(var(--spacing)*11);width:calc(var(--spacing)*11)}.size-12{height:calc(var(--spacing)*12);width:calc(var(--spacing)*12)}.size-14{height:calc(var(--spacing)*14);width:calc(var(--spacing)*14)}.size-18{height:calc(var(--spacing)*18);width:calc(var(--spacing)*18)}.size-24{height:calc(var(--spacing)*24);width:calc(var(--spacing)*24)}.size-\[6px\]{height:6px;width:6px}.size-\[88px\]{height:88px;width:88px}.size-full{height:100%;width:100%}.h-0{height:calc(var(--spacing)*0)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-6\.5{height:calc(var(--spacing)*6.5)}.h-7{height:calc(var(--spacing)*7)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-12{height:calc(var(--spacing)*12)}.h-40{height:calc(var(--spacing)*40)}.h-48{height:calc(var(--spacing)*48)}.h-140{height:calc(var(--spacing)*140)}.h-\[1px\]{height:1px}.h-\[11px\]{height:11px}.h-fit{height:fit-content}.h-full{height:100%}.\!max-h-72{max-height:calc(var(--spacing)*72)!important}.max-h-16{max-height:calc(var(--spacing)*16)}.max-h-64{max-height:calc(var(--spacing)*64)}.max-h-72{max-height:calc(var(--spacing)*72)}.max-h-80{max-height:calc(var(--spacing)*80)}.min-h-12{min-height:calc(var(--spacing)*12)}.min-h-42{min-height:calc(var(--spacing)*42)}.\!w-fit{width:fit-content!important}.w-0{width:calc(var(--spacing)*0)}.w-3\/4{width:75%}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-6\.5{width:calc(var(--spacing)*6.5)}.w-7{width:calc(var(--spacing)*7)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-48{width:calc(var(--spacing)*48)}.w-72{width:calc(var(--spacing)*72)}.w-80{width:calc(var(--spacing)*80)}.w-96{width:calc(var(--spacing)*96)}.w-\[21rem\]{width:21rem}.w-\[60px\]{width:60px}.w-\[95\%\]{width:95%}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.max-w-32{max-width:calc(var(--spacing)*32)}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.min-w-20{min-width:calc(var(--spacing)*20)}.min-w-80{min-width:calc(var(--spacing)*80)}.min-w-96{min-width:calc(var(--spacing)*96)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-x-8{--tw-translate-x:calc(var(--spacing)*-8)}.-translate-x-8,.translate-x-0{translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0)}.-translate-y-2{--tw-translate-y:calc(var(--spacing)*-2)}.-translate-y-2,.translate-y-0{translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-0{--tw-translate-y:calc(var(--spacing)*0)}.translate-y-full{--tw-translate-y:100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-40{--tw-scale-x:40%;--tw-scale-y:40%;--tw-scale-z:40%}.scale-40,.scale-60{scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-60{--tw-scale-x:60%;--tw-scale-y:60%;--tw-scale-z:60%}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-shake{animation:var(--animate-shake)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-0\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-2\.5{gap:calc(var(--spacing)*2.5)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*3*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*3*var(--tw-space-y-reverse))}.gap-x-2{column-gap:calc(var(--spacing)*2)}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*2*var(--tw-space-x-reverse))}:where(.space-x-2\.5>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2.5*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*2.5*var(--tw-space-x-reverse))}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-x-clip{overflow-x:clip}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e+38px}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-icon-background-light{border-color:var(--color-icon-background-light)}.border-modal-background-dark\/10{border-color:#0b0b0b1a}@supports (color:color-mix(in lab,red,red)){.border-modal-background-dark\/10{border-color:color-mix(in oklab,var(--color-modal-background-dark)10%,transparent)}}.border-modal-background-dark\/15{border-color:#0b0b0b26}@supports (color:color-mix(in lab,red,red)){.border-modal-background-dark\/15{border-color:color-mix(in oklab,var(--color-modal-background-dark)15%,transparent)}}.border-modal-background-dark\/20{border-color:#0b0b0b33}@supports (color:color-mix(in lab,red,red)){.border-modal-background-dark\/20{border-color:color-mix(in oklab,var(--color-modal-background-dark)20%,transparent)}}.border-modal-background-light{border-color:var(--color-modal-background-light)}.border-primary-light{border-color:var(--color-primary-light)}.border-primary-light\/50{border-color:#335bf980}@supports (color:color-mix(in lab,red,red)){.border-primary-light\/50{border-color:color-mix(in oklab,var(--color-primary-light)50%,transparent)}}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab,red,red)){.bg-black\/20{background-color:color-mix(in oklab,var(--color-black)20%,transparent)}}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab,red,red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-button-light{background-color:var(--color-button-light)}.bg-danger-light{background-color:var(--color-danger-light)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-icon-background-light{background-color:var(--color-icon-background-light)}.bg-icon-text-light\/20{background-color:#82828233}@supports (color:color-mix(in lab,red,red)){.bg-icon-text-light\/20{background-color:color-mix(in oklab,var(--color-icon-text-light)20%,transparent)}}.bg-modal-background-light{background-color:var(--color-modal-background-light)}.bg-primary-light{background-color:var(--color-primary-light)}.bg-success-light{background-color:var(--color-success-light)}.bg-transparent{background-color:#0000}.object-contain{object-fit:contain}.\!p-0{padding:calc(var(--spacing)*0)!important}.p-0\.5{padding:calc(var(--spacing)*.5)}:where(.tk-modal) .p-0\.5{padding:calc(var(--spacing)*.5)!important}.p-2{padding:calc(var(--spacing)*2)}:where(.tk-modal) .p-2{padding:calc(var(--spacing)*2)!important}.p-3{padding:calc(var(--spacing)*3)}:where(.tk-modal) .p-3{padding:calc(var(--spacing)*3)!important}.p-4{padding:calc(var(--spacing)*4)}:where(.tk-modal) .p-4{padding:calc(var(--spacing)*4)!important}.px-2{padding-inline:calc(var(--spacing)*2)}:where(.tk-modal) .px-2{padding-inline:calc(var(--spacing)*2)!important}.px-3{padding-inline:calc(var(--spacing)*3)}:where(.tk-modal) .px-3{padding-inline:calc(var(--spacing)*3)!important}.px-4{padding-inline:calc(var(--spacing)*4)}:where(.tk-modal) .px-4{padding-inline:calc(var(--spacing)*4)!important}.px-10{padding-inline:calc(var(--spacing)*10)}:where(.tk-modal) .px-10{padding-inline:calc(var(--spacing)*10)!important}.py-1{padding-block:calc(var(--spacing)*1)}:where(.tk-modal) .py-1{padding-block:calc(var(--spacing)*1)!important}.py-2{padding-block:calc(var(--spacing)*2)}:where(.tk-modal) .py-2{padding-block:calc(var(--spacing)*2)!important}.py-3{padding-block:calc(var(--spacing)*3)}:where(.tk-modal) .py-3{padding-block:calc(var(--spacing)*3)!important}.py-4{padding-block:calc(var(--spacing)*4)}:where(.tk-modal) .py-4{padding-block:calc(var(--spacing)*4)!important}.py-5{padding-block:calc(var(--spacing)*5)}:where(.tk-modal) .py-5{padding-block:calc(var(--spacing)*5)!important}.py-6{padding-block:calc(var(--spacing)*6)}:where(.tk-modal) .py-6{padding-block:calc(var(--spacing)*6)!important}.py-10{padding-block:calc(var(--spacing)*10)}:where(.tk-modal) .py-10{padding-block:calc(var(--spacing)*10)!important}.ps-3{padding-inline-start:calc(var(--spacing)*3)}:where(.tk-modal) .ps-3{padding-inline-start:calc(var(--spacing)*3)!important}.pt-4{padding-top:calc(var(--spacing)*4)}:where(.tk-modal) .pt-4{padding-top:calc(var(--spacing)*4)!important}.pt-8{padding-top:calc(var(--spacing)*8)}:where(.tk-modal) .pt-8{padding-top:calc(var(--spacing)*8)!important}.text-center{text-align:center}.text-left{text-align:left}.font-mono\!{font-family:var(--font-mono)!important}.\!text-base{font-size:var(--text-base)!important;line-height:var(--tw-leading,var(--text-base--line-height))!important}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extralight{--tw-font-weight:var(--font-weight-extralight);font-weight:var(--font-weight-extralight)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.text-danger-light{color:var(--color-danger-light)}.text-icon-text-light{color:var(--color-icon-text-light)}.text-icon-text-light\/50{color:#82828280}@supports (color:color-mix(in lab,red,red)){.text-icon-text-light\/50{color:color-mix(in oklab,var(--color-icon-text-light)50%,transparent)}}.text-icon-text-light\/60{color:#82828299}@supports (color:color-mix(in lab,red,red)){.text-icon-text-light\/60{color:color-mix(in oklab,var(--color-icon-text-light)60%,transparent)}}.text-icon-text-light\/70{color:#828282b3}@supports (color:color-mix(in lab,red,red)){.text-icon-text-light\/70{color:color-mix(in oklab,var(--color-icon-text-light)70%,transparent)}}.text-icon-text-light\/80{color:#828282cc}@supports (color:color-mix(in lab,red,red)){.text-icon-text-light\/80{color:color-mix(in oklab,var(--color-icon-text-light)80%,transparent)}}.text-inherit{color:inherit}.text-modal-background-light{color:var(--color-modal-background-light)}.text-modal-text-light{color:var(--color-modal-text-light)}.text-primary-light{color:var(--color-primary-light)}.text-primary-text-light{color:var(--color-primary-text-light)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-success-light{color:var(--color-success-light)}.italic{font-style:italic}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.placeholder-icon-text-light::placeholder{color:var(--color-icon-text-light)}.opacity-0{opacity:0}.opacity-30{opacity:.3}.opacity-50{opacity:.5}.opacity-100{opacity:1}.shadow-\[0_0_42px\]{--tw-shadow:0 0 42px var(--tw-shadow-color,currentcolor)}.shadow-\[0_0_42px\],.shadow-lg{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-primary-light\/50{--tw-shadow-color:#335bf980}@supports (color:color-mix(in lab,red,red)){.shadow-primary-light\/50{--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-primary-light)50%,transparent)var(--tw-shadow-alpha),transparent)}}.blur{--tw-blur:blur(8px)}.blur,.blur-sm{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-sm{--tw-blur:blur(var(--blur-sm))}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-opacity{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.delay-75{transition-delay:75ms}.delay-200{transition-delay:.2s}.delay-300{transition-delay:.3s}.duration-50{--tw-duration:50ms;transition-duration:50ms}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-600{--tw-duration:.6s;transition-duration:.6s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-icon-text-light::placeholder{color:var(--color-icon-text-light)}.focus-within\:outline-\[1px\]:focus-within{outline-style:var(--tw-outline-style);outline-width:1px}.focus-within\:outline-offset-0:focus-within{outline-offset:0}.focus-within\:outline-primary-light:focus-within{outline-color:var(--color-primary-light)}@media (hover:hover){.hover\:bg-icon-background-light:hover{background-color:var(--color-icon-background-light)}.hover\:bg-primary-light\/90:hover{background-color:#335bf9e6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary-light\/90:hover{background-color:color-mix(in oklab,var(--color-primary-light)90%,transparent)}}}.focus\:border-none:focus{--tw-border-style:none;border-style:none}.focus\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:outline-\[1px\]:focus{outline-style:var(--tw-outline-style);outline-width:1px}.focus\:outline-offset-0:focus{outline-offset:0}.focus\:outline-primary-light:focus{outline-color:var(--color-primary-light)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.active\:outline-2:active{outline-style:var(--tw-outline-style);outline-width:2px}.active\:outline-primary-light:active{outline-color:var(--color-primary-light)}.data-closed\:-translate-y-2[data-closed]{--tw-translate-y:calc(var(--spacing)*-2);translate:var(--tw-translate-x)var(--tw-translate-y)}.data-closed\:opacity-0[data-closed]{opacity:0}@media (min-width:48rem){.md\:max-w-md{max-width:var(--container-md)}}.dark\:border-icon-background-dark:where(.dark,.dark *){border-color:var(--color-icon-background-dark)}.dark\:border-modal-background-dark:where(.dark,.dark *){border-color:var(--color-modal-background-dark)}.dark\:border-modal-background-light\/10:where(.dark,.dark *){border-color:#f5f7fb1a}@supports (color:color-mix(in lab,red,red)){.dark\:border-modal-background-light\/10:where(.dark,.dark *){border-color:color-mix(in oklab,var(--color-modal-background-light)10%,transparent)}}.dark\:border-modal-background-light\/15:where(.dark,.dark *){border-color:#f5f7fb26}@supports (color:color-mix(in lab,red,red)){.dark\:border-modal-background-light\/15:where(.dark,.dark *){border-color:color-mix(in oklab,var(--color-modal-background-light)15%,transparent)}}.dark\:border-modal-background-light\/20:where(.dark,.dark *){border-color:#f5f7fb33}@supports (color:color-mix(in lab,red,red)){.dark\:border-modal-background-light\/20:where(.dark,.dark *){border-color:color-mix(in oklab,var(--color-modal-background-light)20%,transparent)}}.dark\:border-primary-dark:where(.dark,.dark *){border-color:var(--color-primary-dark)}.dark\:border-primary-dark\/50:where(.dark,.dark *){border-color:#335bf980}@supports (color:color-mix(in lab,red,red)){.dark\:border-primary-dark\/50:where(.dark,.dark *){border-color:color-mix(in oklab,var(--color-primary-dark)50%,transparent)}}.dark\:bg-button-dark:where(.dark,.dark *){background-color:var(--color-button-dark)}.dark\:bg-danger-dark:where(.dark,.dark *){background-color:var(--color-danger-dark)}.dark\:bg-gray-700:where(.dark,.dark *){background-color:var(--color-gray-700)}.dark\:bg-icon-background-dark:where(.dark,.dark *){background-color:var(--color-icon-background-dark)}.dark\:bg-icon-text-dark\/20:where(.dark,.dark *){background-color:#a3a3a533}@supports (color:color-mix(in lab,red,red)){.dark\:bg-icon-text-dark\/20:where(.dark,.dark *){background-color:color-mix(in oklab,var(--color-icon-text-dark)20%,transparent)}}.dark\:bg-modal-background-dark:where(.dark,.dark *){background-color:var(--color-modal-background-dark)}.dark\:bg-primary-dark:where(.dark,.dark *){background-color:var(--color-primary-dark)}.dark\:bg-success-dark:where(.dark,.dark *){background-color:var(--color-success-dark)}.dark\:text-danger-dark:where(.dark,.dark *){color:var(--color-danger-dark)}.dark\:text-icon-text-dark:where(.dark,.dark *){color:var(--color-icon-text-dark)}.dark\:text-icon-text-dark\/50:where(.dark,.dark *){color:#a3a3a580}@supports (color:color-mix(in lab,red,red)){.dark\:text-icon-text-dark\/50:where(.dark,.dark *){color:color-mix(in oklab,var(--color-icon-text-dark)50%,transparent)}}.dark\:text-icon-text-dark\/60:where(.dark,.dark *){color:#a3a3a599}@supports (color:color-mix(in lab,red,red)){.dark\:text-icon-text-dark\/60:where(.dark,.dark *){color:color-mix(in oklab,var(--color-icon-text-dark)60%,transparent)}}.dark\:text-icon-text-dark\/70:where(.dark,.dark *){color:#a3a3a5b3}@supports (color:color-mix(in lab,red,red)){.dark\:text-icon-text-dark\/70:where(.dark,.dark *){color:color-mix(in oklab,var(--color-icon-text-dark)70%,transparent)}}.dark\:text-icon-text-dark\/80:where(.dark,.dark *){color:#a3a3a5cc}@supports (color:color-mix(in lab,red,red)){.dark\:text-icon-text-dark\/80:where(.dark,.dark *){color:color-mix(in oklab,var(--color-icon-text-dark)80%,transparent)}}.dark\:text-modal-background-dark:where(.dark,.dark *){color:var(--color-modal-background-dark)}.dark\:text-modal-text-dark:where(.dark,.dark *){color:var(--color-modal-text-dark)}.dark\:text-primary-dark:where(.dark,.dark *){color:var(--color-primary-dark)}.dark\:text-primary-text-dark:where(.dark,.dark *){color:var(--color-primary-text-dark)}.dark\:text-success-dark:where(.dark,.dark *){color:var(--color-success-dark)}.dark\:placeholder-icon-text-dark:where(.dark,.dark *)::placeholder{color:var(--color-icon-text-dark)}.dark\:shadow-\[0_0_42px\]:where(.dark,.dark *){--tw-shadow:0 0 42px var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.dark\:shadow-primary-dark\/50:where(.dark,.dark *){--tw-shadow-color:#335bf980}@supports (color:color-mix(in lab,red,red)){.dark\:shadow-primary-dark\/50:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-primary-dark)50%,transparent)var(--tw-shadow-alpha),transparent)}}.dark\:placeholder\:text-icon-text-dark:where(.dark,.dark *)::placeholder{color:var(--color-icon-text-dark)}.focus-within\:dark\:outline-primary-dark:focus-within:where(.dark,.dark *){outline-color:var(--color-primary-dark)}@media (hover:hover){.dark\:hover\:bg-icon-background-dark:where(.dark,.dark *):hover{background-color:var(--color-icon-background-dark)}.dark\:hover\:bg-primary-dark\/90:where(.dark,.dark *):hover{background-color:#335bf9e6}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-primary-dark\/90:where(.dark,.dark *):hover{background-color:color-mix(in oklab,var(--color-primary-dark)90%,transparent)}}}.active\:dark\:outline-primary-dark:active:where(.dark,.dark *),.focus\:dark\:outline-primary-dark:focus:where(.dark,.dark *){outline-color:var(--color-primary-dark)}}.tk-modal *{box-sizing:revert-layer;margin:revert-layer;padding:revert-layer}.tk-modal *,.tk-modal :after,.tk-modal :before{border:revert-layer;box-sizing:revert-layer}.tk-modal blockquote,.tk-modal dd,.tk-modal dl,.tk-modal figure,.tk-modal h1,.tk-modal h2,.tk-modal h3,.tk-modal h4,.tk-modal h5,.tk-modal h6,.tk-modal hr,.tk-modal p,.tk-modal pre{margin:revert!important}.tk-modal button,.tk-modal input:where([type=button]),.tk-modal input:where([type=reset]),.tk-modal input:where([type=submit]){-webkit-appearance:button;background-color:revert-layer!important;background-image:revert-layer!important}.tk-modal button,.tk-modal input,.tk-modal select,.tk-modal textarea{font-feature-settings:inherit;color:revert-layer!important;font-family:inherit;font-size:revert-layer;font-variation-settings:inherit;font-weight:revert-layer;letter-spacing:inherit;line-height:inherit;margin:revert-layer!important;padding:revert-layer!important}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}
/* == tokens.css == */
/* Indices — design tokens. THE editable stylesheet: every color, radius, shadow,
   duration, and type size the app uses lives here. Components reference tokens only —
   change a value here and the whole product follows.

   ===== warm paper world =====
   The field is warm paper (#edece8); slabs are pure white cut with hairline warm-grey
   borders. Ink is near-black warm (#191918). The one accent is a pale sky (#bfd3ec)
   used for selection, focus and small tints — never for large fills. Hierarchy comes
   from uppercase letterspaced eyebrows + big light-weight titles, all center-aligned,
   inside a heavily-margined centered column. */

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
/* metric-matched fallback: Arial scaled to Instrument Sans metrics (UPM 1000,
   ascent 970, descent 250) so the swap causes zero layout shift */
@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Arial');
  size-adjust: 103.25%;
  ascent-override: 93.95%;
  descent-override: 24.21%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* surfaces */
  --color-bg-canvas: #edece8;   /* the field — warm paper */
  --color-bg-surface: #edece8;
  --color-bg-elevated: #f6f5f1; /* soft tier between field and pane */
  --color-bg-subtle: #fbfaf8;   /* warm near-white */
  --pane: #ffffff;              /* white slabs */
  --hover: #f6f5f1;

  /* lines — the design is drawn with hairlines, not shadows */
  --color-border-default: #ecebe6;
  --color-border-soft: #f2f1ec;
  --color-border-strong: #d9d8d1;
  --color-border-input: #e1e0da;

  /* text — warm ink family */
  --color-text-primary: #191918;
  --color-text-secondary: #71716b;
  --color-text-muted: #8b8b85;
  --color-text-faint: #a3a39c;
  --color-text-disabled: #c2c1ba;

  /* accent + status */
  --color-action-primary: #191918;          /* CTAs are ink slabs, white type on top */
  --color-text-on-action: #ffffff;
  --volt-hover: #33332f;
  --volt-ink-label: #71716b;
  --accent: #bfd3ec;                        /* pale sky: selection, focus, small tints */
  --accent-tint: rgba(191, 211, 236, 0.45);
  --accent-wash: #eaf1f9;                   /* opaque pale-sky wash */
  --grad-accent: linear-gradient(200deg, #7ba5d8 0%, #9fbbe0 50%, #c8cde2 100%);
  --grad-pane: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
  --color-status-positive: #2f7d5c;
  --color-status-positive-tint: #e9f4ee;
  --color-status-negative: #bf3b30;
  --color-status-warning: #8a6500;
  --color-status-warning-subtle: #fff2c7;
  --color-status-info: #7ba5d8;
  --color-border-focus: #bfd3ec;
  --ink: #191918;    /* brand slabs are ink */
  --on-ink: #ffffff;
  --on-ink-secondary: rgba(255, 255, 255, 0.8);
  --on-ink-faint: rgba(255, 255, 255, 0.55);
  --on-ink-hairline: rgba(255, 255, 255, 0.12);
  --skeleton: #e5e4df;

  /* type */
  --font-ui: 'Instrument Sans', 'Instrument Sans Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: var(--font-ui); /* data uses tabular-nums, not a second family */
  --tracking-label: 0.12em;
  --tracking-eyebrow: 0.16em;

  /* space */
  --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px;
  --space-40: 40px; --space-48: 48px; --space-64: 64px;

  /* ===== the centered column =====
     Heavy side margins, enforced globally: .gwrap is the only thing that decides
     how far content sits from the page edge, and it reads --gutter. Nothing may
     re-invent an edge distance from raw px. */
  --gutter: clamp(48px, 11vw, 220px);
  --page-max: 1160px;  /* content column ceiling — the page stops stretching */
  --topbar-h: 92px;    /* fixed floating header + its air; pages clear it */
  --bottomnav-h: 60px; /* mobile only, but pages clear it at every width */

  /* ===== the site's one spacing contract ===== */
  --pad-head-top: clamp(28px, 3.5vw, 48px); /* page title block, top */
  --pad-head-bottom: 28px;                  /* page title block, bottom */
  --pad-sec-top: clamp(36px, 4vw, 56px);    /* space above every in-page section header */
  --pad-sec-bottom: 20px;                   /* section header to its content */
  --band-y: clamp(40px, 4.5vw, 72px);       /* inner top/bottom of a full-width slab */
  --split-gap: 24px;                       /* main column ↔ rail */
  --rail-w: 360px;
  --rail-pad: 24px;
  --grid-gap-row: 12px;
  --grid-gap-col: 12px;
  --row-inset: 12px;         /* list-row hover bleed; padding matches it exactly */
  --row-y: 14px;

  /* ===== the control system =====
     Every interactive control resolves to ONE of three heights, and every
     control row aligns because its neighbours share the same one. Radii nest:
     a thumb/button inside a padded track uses (track radius - track padding),
     which is what --radius-s is. Nothing may invent a 42px button or a 7px
     corner — grep these names to find every site that obeys the system. */
  --control-h: 44px;      /* the default: buttons, inputs, chips-rows, tabs */
  --control-h-sm: 36px;   /* compact: table-row actions, small chips */
  --control-h-lg: 52px;   /* hero: header wallet/search, modal primaries */
  --control-r: 8px;       /* corner of a control sitting directly on a surface */
  --seg-pad: 4px;         /* inner padding of every sliding-thumb track */

  /* shape — tight, quiet corners: one small family, no pills on slabs */
  --radius-xs: 6px;
  --radius-s: 6px;        /* = track radius (10) - track padding (4): nested tier */
  --radius-m: 8px;
  --radius-l: 10px;
  --radius-xl: 12px;
  --cut: 12px;               /* THE slab corner — bands, modals, detail header */
  --radius-band: var(--cut);
  --slab-inset: 0px;         /* slabs run full-bleed; the column margin does the framing */
  --slab-gap: 16px;
  --radius-round: 999px;

  /* elevation — one soft ambient shadow tier, used sparingly; borders do the rest */
  --shadow-s: 0 1px 0 rgba(25, 25, 24, 0.03);
  --shadow-m: 0 16px 48px rgba(43, 52, 61, 0.1);
  --shadow-l: 0 24px 80px rgba(25, 25, 24, 0.2);
  --ring: 0 0 0 3px rgba(191, 211, 236, 0.45);
  --backdrop: rgba(25, 25, 24, 0.28);

  /* motion — one easing family, three speeds */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-press: 80ms; /* press-down only — release travels at --dur-med */
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 340ms;
  --dur-tab: 320ms; /* sliding-thumb travel between tabs, site-wide */
}

/* single light theme — the data-theme switch exists but both keys resolve identically */
:root[data-theme='light'],
:root[data-theme='dark'] {
  color-scheme: light;
}

/* One breakpoint boundary for the whole site: 959.98 / 960. Nothing may invent
   961px or a bare 960px max-width — the gutter, the shell, the rails and the
   section rhythm all have to flip on the same pixel. */
@media (max-width: 1280px) { :root { --gutter: clamp(40px, 8vw, 120px); } }
@media (max-width: 959.98px) {
  :root {
    --gutter: 24px;
    --pad-head-top: 26px; --pad-head-bottom: 20px;
    --pad-sec-top: 32px;
    --split-gap: 16px;
    --grid-gap-row: 10px; --grid-gap-col: 10px;
    --rail-pad: 20px;
    --topbar-h: 78px;
  }
}
/* phones — the column is narrow enough that the contract steps down once more. */
@media (max-width: 479.98px) {
  :root {
    --gutter: 18px;
    --pad-head-top: 22px;
    --pad-sec-top: 28px;
    --band-y: 36px;
    --grid-gap-row: 10px; --grid-gap-col: 8px;
    --row-y: 12px;
    --rail-pad: 16px;
  }
}

/* == base.css == */
/* Indices — base layer: reset, typography, primitives, motion.
   Page-specific styling lives in styles/{shell,discover,wizard,detail}.css.
   Everything references tokens.css — no raw hex values below this line
   except the scrollbar greys, which have no token tier. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { scrollbar-gutter: stable; } /* short and long routes share one layout width */
body {
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 14px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--color-text-primary); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
::selection { background: var(--accent); color: var(--color-text-primary); }
::placeholder { color: var(--color-text-faint); }

/* Minimal scrollbars, site-wide — thin rounded thumb, no arrow buttons.
   NOTE: the standard `scrollbar-width` is applied ONLY inside the Firefox
   @supports block below. Setting it globally would make Chrome 121+ ignore the
   ::-webkit-scrollbar rules (including the arrow-button hiding) and fall back
   to the OS scrollbar, which keeps its arrows. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d3d2cb;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #b9b8b1; background-clip: content-box; }
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: #d3d2cb transparent; }
}

/* ===== motion defaults =====
   Every interactive element eases; buttons compress slightly on press. */
:where(a, button, [role='button'], input, textarea, select, summary) {
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
/* press physics: down fast, release slow — the transition-duration override only
   applies while :active holds, so the release travels at the :where() default */
:where(button, a.btn):not(:disabled):active { transform: scale(0.98); transition-duration: var(--dur-press); }
:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.lift { transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.page { width: 100%; padding-top: var(--topbar-h); padding-bottom: 120px; animation: rise var(--dur-slow) var(--ease-out); }
/* every page clears the fixed bottom nav INCLUDING the notch inset */
@media (max-width: 959.98px) {
  .page { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--space-24)); }
}
/* a page that ends in a footer slab carries its own bottom channel — no double gap */
.page:has(.sh-foot) { padding-bottom: 0; }
@media (max-width: 959.98px) {
  .page:has(.sh-foot) { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }
}

/* stagger: parent sets .stagger, children carry style="--i:N" */
.stagger > * { animation: rise var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 30ms); }

/* Reduced motion = kill decorative movement, keep functional feedback. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-med: 1ms; --dur-slow: 1ms; --dur-tab: 1ms; }
  .page, .modal, .menu, .stagger > * { animation: none; }
  .sk { animation: none; background: var(--skeleton); }
  .lift:hover, :where(button, a.btn):not(:disabled):active { transform: none; }
}

/* ===== typography =====
   Two registers, deliberately far apart: big light-weight lowercase-feel titles,
   and tiny uppercase letterspaced labels. Body copy sits quietly between them.
   Headings and section furniture are center-aligned by default in page CSS. */
.t-display { font-size: clamp(44px, 5vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.t-h1 { font-size: clamp(32px, 3.2vw, 48px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
.t-h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.t-h3 { font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.t-h3b { font-size: 19px; font-weight: 600; letter-spacing: 0; }
.t-title { font-size: 15px; font-weight: 600; }
.t-label {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label);
  line-height: 1.2; text-transform: uppercase; color: var(--color-text-faint);
}
.t-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  line-height: 1.2; text-transform: uppercase; color: var(--color-text-faint);
}
.t-body { font-size: 14px; font-weight: 400; }
.t-body-lg { font-size: 15px; line-height: 1.55; font-weight: 400; }
.t-meta { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); letter-spacing: 0; text-transform: none; }
.t-15 { font-size: 15px; font-weight: 600; }
.t-cap { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.c-primary { color: var(--color-text-primary); }
.c-secondary { color: var(--color-text-secondary); }
.c-muted { color: var(--color-text-muted); }
.c-warning { color: var(--color-status-warning); }
.c-volt { color: var(--color-text-primary); }
.c-volt-text { color: var(--color-status-positive); }
.c-positive { color: var(--color-status-positive); }
.c-negative { color: var(--color-status-negative); }

.spacer { flex: 1; }
.hairline { height: 1px; background: var(--color-border-default); width: 100%; }
.wfull { width: 100%; }
.vhide { visibility: hidden; } /* keeps its box — for states that must not reshift layout */

/* ===== tooltip — the "?" beside a label; detail on hover/focus, never inline ===== */
.label-row { display: inline-flex; align-items: center; gap: 6px; }
.tip { position: relative; display: inline-flex; }
.tip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--color-border-strong); color: var(--color-text-faint);
  font-size: 10px; font-weight: 700; line-height: 1; cursor: help;
}
.tip-btn:hover { color: var(--color-text-primary); border-color: var(--color-text-muted); }
.tip-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 80; width: max-content; max-width: min(260px, calc(100vw - 32px));
  padding: 9px 12px; border-radius: var(--radius-m);
  background: var(--ink); color: var(--on-ink);
  font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left;
  letter-spacing: 0; text-transform: none; white-space: normal;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.tip:hover .tip-bubble, .tip:focus-within .tip-bubble { opacity: 1; }

/* ===== select — dropdown with descriptions, groups, viewport-safe menu ===== */
.sel { position: relative; width: 100%; }
.sel-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; height: var(--control-h); padding: 0 14px;
  background: var(--pane); border: 1px solid var(--color-border-input); border-radius: var(--control-r);
  box-shadow: var(--shadow-s); font-size: 14px; text-align: left;
}
.sel-trigger:hover { border-color: var(--color-border-strong); }
.sel-trigger[aria-expanded='true'] { border-color: var(--color-border-focus); box-shadow: var(--ring); }
.sel-trigger > svg { color: var(--color-text-faint); flex-shrink: 0; }
.sel-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
  max-width: calc(100vw - 24px); max-height: min(340px, 60dvh);
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--pane); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-l); box-shadow: var(--shadow-m);
  animation: rise var(--dur-med) var(--ease-out);
}
.sel-menu.up { top: auto; bottom: calc(100% + 6px); }
/* the list scrolls, not the menu — so a search box stays pinned above it */
.sel-list { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sel-search {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin-bottom: 4px; padding: 0 10px; min-height: 40px;
  border-bottom: 1px solid var(--color-border-soft);
}
.sel-search > svg { color: var(--color-text-faint); flex-shrink: 0; }
.sel-search-input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 13.5px; color: var(--ink); padding: 8px 0;
}
.sel-empty { padding: 12px 10px; font-size: 13px; color: var(--color-text-muted); }
.sel-group { display: flex; flex-direction: column; gap: 2px; }
.sel-group + .sel-group, .sel-opt + .sel-group { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--color-border-soft); }
.sel-group-label {
  padding: 4px 10px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-text-faint);
}
.sel-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 8px 10px; border-radius: var(--radius-s); text-align: left;
}
.sel-opt:hover:not(:disabled) { background: var(--color-bg-elevated); }
.sel-opt.sel { background: var(--color-status-positive-tint); }
.sel-opt.sel:hover { background: #e0efe6; }
.sel-opt:disabled { opacity: 0.5; cursor: default; }
.sel-opt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sel-opt-label { font-size: 13.5px; font-weight: 600; }
.sel-opt-desc { font-size: 11.5px; color: var(--color-text-muted); }

/* ===== slider — for values with a known domain ===== */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0;
}
.slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--radius-round);
  background: linear-gradient(to right, var(--ink) var(--p, 0%), var(--color-border-default) var(--p, 0%));
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px;
  border-radius: 50%; background: var(--pane); border: 2px solid var(--ink);
  box-shadow: var(--shadow-s); transition: transform var(--dur-fast) var(--ease-out);
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.slider::-moz-range-track { height: 6px; border-radius: var(--radius-round); background: var(--color-border-default); }
.slider::-moz-range-progress { height: 6px; border-radius: var(--radius-round); background: var(--ink); }
.slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--pane); border: 2px solid var(--ink); }
.slider:focus-visible { outline-offset: 4px; }

/* ===== the content column =====
   .gwrap is the ONLY thing that decides how far content sits from the page edge:
   heavy margins both sides (--gutter), column capped at --page-max, centered.
   Every section on every page lands on the same two vertical rules. */
.gwrap {
  --wrap-pad: var(--gutter);
  padding-left: var(--wrap-pad); padding-right: var(--wrap-pad);
  max-width: calc(var(--page-max) + 2 * var(--wrap-pad));
  margin-left: auto; margin-right: auto;
}

/* full-bleed band; its inner .gwrap keeps the global rules */
.slab { position: relative; margin-left: var(--slab-inset); margin-right: var(--slab-inset); }

/* ===== buttons — quiet rectangles, uppercase tracked labels ===== */
.btn {
  height: var(--control-h); padding: 0 20px; border-radius: var(--control-r);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--volt-hover); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: var(--volt-hover); }
.btn-ghost { box-shadow: inset 0 0 0 1px var(--color-border-strong); color: var(--color-text-primary); background: transparent; }
.btn-ghost:hover { background: var(--hover); }
.btn-secondary { background: var(--pane); box-shadow: inset 0 0 0 1px var(--color-border-strong); color: var(--color-text-primary); }
.btn-secondary:hover { background: var(--color-bg-subtle); }
.btn-subtle { background: var(--color-bg-elevated); color: var(--color-text-primary); }
.btn-subtle:hover { background: #efeee9; }
.btn-plain { color: var(--color-text-secondary); }
.btn-plain:hover { color: var(--color-text-primary); }
.btn-md { height: 48px; padding: 0 24px; }
.btn-sm { height: var(--control-h-sm); padding: 0 14px; font-size: 11px; }
.h48 { height: 48px; }
.btn:disabled { opacity: 0.55; cursor: default; }

/* ===== inputs — white wells with warm hairlines, sky focus ===== */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > .t-label, .field > .t-cap, .field > .t-meta { color: var(--color-text-muted); }
.input {
  height: var(--control-h); padding: 0 14px; width: 100%;
  display: flex; align-items: center; gap: 8px; font-size: 14px;
  background: var(--pane); border: 1px solid var(--color-border-input); border-radius: var(--control-r);
  box-shadow: var(--shadow-s);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.input:hover { border-color: var(--color-border-strong); }
.input:focus, .input:focus-within { outline: none; background: #fbfdff; border-color: var(--color-border-focus); box-shadow: var(--ring); }
.input.readonly { color: var(--color-text-secondary); }
.input.subtle { background: var(--color-bg-subtle); }
.bare { background: none; border: none; outline: none; flex: 1; min-width: 0; color: var(--color-text-primary); font-size: 14px; padding: 0; }
.bare::-webkit-outer-spin-button, .bare::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bare[type='number'] { appearance: textfield; -moz-appearance: textfield; }
.textarea { height: 96px; padding: 10px 14px; align-items: flex-start; resize: vertical; }

/* ===== surfaces — white slabs drawn with hairlines, not shadows ===== */
.card { background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l); }
.card-flat { background: var(--color-bg-elevated); border-radius: var(--radius-l); }
.menu {
  position: absolute; right: 0; top: 48px; min-width: 200px; padding: var(--space-6);
  display: flex; flex-direction: column; z-index: 90;
  /* viewport clamps: a dropdown may scroll internally but never cut off at the site edge */
  max-width: calc(100vw - 24px); max-height: calc(100dvh - 120px); overflow-y: auto;
  background: var(--pane); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-l); box-shadow: var(--shadow-m);
  animation: rise var(--dur-med) var(--ease-out);
}
.menu-item { text-align: left; padding: 10px 12px; color: var(--color-text-primary); font-size: 13px; font-weight: 500; border-radius: var(--radius-s); }
.menu-item:hover { background: var(--hover); }

.modal-backdrop {
  position: fixed; inset: 0; background: var(--backdrop); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 28px 12px;
  animation: fade var(--dur-med) var(--ease-out);
}
.modal {
  background: var(--pane); border: 1px solid rgba(236, 235, 230, 0.95);
  border-radius: var(--cut); box-shadow: var(--shadow-l);
  padding: var(--space-24); width: 560px; max-width: 100%; max-height: calc(100dvh - var(--space-32)); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-16);
  animation: rise var(--dur-slow) var(--ease-out);
}
.modal.r18 { width: 496px; }
.modal.w520 { width: 520px; }
.modal-head { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; width: 100%; }

/* ===== toasts — the app's only transient notice surface (never alert()) ===== */
.toasts {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 110;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px; padding: 13px 20px;
  border-radius: var(--radius-m); background: var(--ink); color: var(--on-ink);
  font-size: 13px; font-weight: 500; box-shadow: var(--shadow-m);
  max-width: min(92vw, 480px); pointer-events: auto;
  animation: rise var(--dur-med) var(--ease-out);
}
.toast.err { background: var(--color-status-negative); color: #fff; }

/* ===== avatars / imagery ===== */
.avatar {
  border-radius: var(--radius-m); display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0; font-family: var(--font-ui); letter-spacing: 0.02em;
}
.avatar.volt { background: var(--ink); color: var(--on-ink); }
.avatar.ink { background: var(--color-bg-elevated); color: var(--color-text-primary); border: 1px solid var(--color-border-default); }
.avatar.plain { background: var(--pane); color: var(--color-text-primary); border: 1px solid var(--color-border-default); }
.tok-img { border-radius: var(--radius-m); object-fit: cover; flex-shrink: 0; background: var(--color-bg-elevated); }
/* ambient artwork echo: put inside a position:relative parent with overflow hidden */
.backdrop-art { position: absolute; inset: -25%; filter: blur(52px) saturate(1.15); opacity: 0.14; pointer-events: none; }

/* ===== skeletons ===== */
.sk {
  border-radius: var(--radius-s);
  background: linear-gradient(100deg, var(--skeleton) 40%, var(--color-bg-elevated) 50%, var(--skeleton) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

/* ===== phone chrome clearance ===== */
@media (max-width: 959.98px) {
  .toasts { bottom: calc(var(--bottomnav-h) + var(--space-16) + env(safe-area-inset-bottom)); }
  .modal { padding: var(--space-20); max-height: calc(100dvh - var(--space-24)); }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > .btn { flex: 1 1 auto; }
  .btn-sm { height: 36px; }
  .menu { top: 42px; }
  .menu-item { padding: var(--space-12); }
}

.noscroll { scrollbar-width: none; }
.noscroll::-webkit-scrollbar { display: none; }

/* ===== sliding tab thumb — site-wide =====
   Positioned by BOTH edges (left/right insets from --i/--n), not transform, so the
   leading edge races ahead and the pill visibly stretches before settling.
   Direction class (.dir-r/.dir-l) is set by useSlideDir(). */
.slide-thumb {
  position: absolute;
  top: var(--pad, 0px); bottom: var(--pad, 0px);
  left: calc(var(--pad, 0px) + var(--i) * ((100% - 2 * var(--pad, 0px)) / var(--n)));
  right: calc(var(--pad, 0px) + (var(--n) - 1 - var(--i)) * ((100% - 2 * var(--pad, 0px)) / var(--n)));
  transition:
    left var(--dur-tab) var(--ease-inout),
    right var(--dur-tab) var(--ease-inout),
    opacity var(--dur-med) var(--ease-out);
}
.dir-r .slide-thumb {
  transition:
    right calc(var(--dur-tab) * 0.55) var(--ease-out),
    left var(--dur-tab) var(--ease-inout),
    opacity var(--dur-med) var(--ease-out);
}
.dir-l .slide-thumb {
  transition:
    left calc(var(--dur-tab) * 0.55) var(--ease-out),
    right var(--dur-tab) var(--ease-inout),
    opacity var(--dur-med) var(--ease-out);
}

/* ===== stock logos — round, hairlined, small; monogram fallback ===== */
.slogo { border-radius: 50%; background: #fff; border: 1px solid var(--color-border-default); object-fit: contain; flex-shrink: 0; vertical-align: -3px; }
.icon-external { display: inline-block; flex: none; overflow: visible; vertical-align: -2px; }
.slogo-fb { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--color-text-secondary); background: var(--color-bg-elevated); }

/* == shell.css == */
/* Indices — shell: floating header, bottom nav (mobile), search overlay, footer.
   The header is a floating glass shell pinned to the top of the viewport: white at
   92% over a blur, hairline white border, one soft ambient shadow. On scroll it
   steps down (sh-t1) and finally folds to a brand-only pill (sh-t2) that re-expands
   on hover/focus — desktop only; mobile keeps the full bar. */

.sh-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  /* same width formula as the .gwrap content column, so the bar's edges land on
     the site's two vertical rules instead of overhanging them */
  width: min(calc(100% - 2 * var(--gutter)), var(--page-max));
  margin: 24px auto 0;
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 4px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  transition:
    width 0.26s var(--ease-out), min-height 0.22s var(--ease-out),
    margin 0.22s var(--ease-out), padding 0.22s var(--ease-out),
    background 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}

.sh-brand {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  height: 56px; padding: 0 20px; border-radius: var(--radius-m);
  transition: height 0.22s var(--ease-out), padding 0.22s var(--ease-out);
}
.sh-brand > svg { flex-shrink: 0; }
.sh-brand-word {
  font-size: 12px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; white-space: nowrap;
}

/* primary nav, centered in the GAP between the brand and the right-hand controls
   rather than on the bar itself: the wallet + search side is much wider than the
   brand, so bar-centering visibly pushed the tabs right. Auto margins on a flex
   item consume free space before .spacer's flex-grow can, which centers the nav
   between its neighbours at any width. The explicit tracks match the sliding
   thumb's equal-width geometry even while the header flex item is shrinking. */
.sh-tabs {
  position: relative; /* containing block for .sh-tabs-thumb — without it the
                         thumb resolves against the fixed bar and covers the brand */
  width: min(46vw, 420px); margin-inline: auto; flex: 0 1 auto; min-width: 0;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: center;
  transition: opacity 0.18s var(--ease-out), visibility 0.18s var(--ease-out);
}
.sh-tabs-thumb { background: var(--color-bg-elevated); border-radius: var(--radius-s); z-index: 0; }
.sh-tabs-thumb.off { opacity: 0; }
.sh-tab {
  position: relative; z-index: 1;
  min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--control-h); padding: 0 18px;
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label);
  text-transform: uppercase; white-space: nowrap;
  color: #9c9c95; border-radius: var(--radius-s);
}
.sh-tab:hover { color: var(--color-text-primary); }
.sh-tab.active { color: var(--color-text-primary); }

/* search trigger — a quiet bordered well with the "/" key hint */
.sh-search {
  display: inline-flex; align-items: center; gap: 12px;
  height: var(--control-h); padding: 0 16px; flex-shrink: 0;
  border: 1px solid var(--color-border-default); border-radius: var(--control-r);
  background: var(--color-bg-subtle); color: var(--color-text-muted);
  font-size: 12.5px; font-weight: 500;
}
.sh-search { transition: height 0.22s var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.sh-search:hover { background: var(--pane); border-color: var(--color-border-strong); }
.sh-search-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid var(--color-border-strong);
  font-size: 10px; font-weight: 700; color: var(--color-text-faint);
}
.sh-search-mini {
  display: none; align-items: center; justify-content: center;
  width: var(--control-h); height: var(--control-h); flex-shrink: 0;
  border-radius: var(--control-r); color: var(--color-text-secondary);
}
.sh-search-mini:hover { background: var(--hover); }

.sh-wallet-wrap { position: relative; flex-shrink: 0; }
/* matches the tab/control height — the hero 52px slab read oversized next to
   the 44px nav controls */
.sh-wallet-btn {
  height: var(--control-h) !important; padding: 0 18px;
  transition: height 0.22s var(--ease-out), padding 0.22s var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.sh-conn-short { display: none; }

/* ===== scroll tiers (desktop) =====
   t1: the shell tightens. t2: it folds to a centered brand pill; hover/focus
   re-expands it in place so the nav is never more than one pointer-length away. */
@media (min-width: 960px) {
  /* right-edge balance: the wallet's visible edge sits as far from the bar's
     right (4px frame + margin) as the brand mark sits from its left (4px frame
     + brand padding), so the two anchors mirror each other */
  .sh-topbar .sh-wallet-wrap, .sh-topbar > .sh-wallet-btn { margin-right: 20px; }
  .sh-topbar.sh-t1 .sh-wallet-wrap, .sh-topbar.sh-t1 > .sh-wallet-btn { margin-right: 14px; }

  .sh-topbar.sh-t1 { margin-top: 8px; min-height: 52px; background: rgba(255, 255, 255, 0.96); }
  .sh-topbar.sh-t1 .sh-brand { height: 44px; padding: 0 14px; }
  .sh-topbar.sh-t1 .sh-tab { height: 40px; }
  .sh-topbar.sh-t1 .sh-search { height: 44px; }
  .sh-topbar.sh-t1 .sh-wallet-btn { height: 44px !important; }

  .sh-topbar.sh-t2 { margin-top: 8px; min-height: 52px; width: 188px; justify-content: center; background: rgba(255, 255, 255, 0.96); }
  .sh-topbar.sh-t2 .sh-brand { height: 44px; padding: 0 14px; }
  .sh-topbar.sh-t2 .sh-tabs { display: none; }
  .sh-topbar.sh-t2 .sh-tabs,
  .sh-topbar.sh-t2 .sh-search,
  .sh-topbar.sh-t2 .sh-wallet-wrap,
  .sh-topbar.sh-t2 > .sh-wallet-btn {
    opacity: 0; pointer-events: none; visibility: hidden;
  }
  .sh-topbar.sh-t2 .sh-search,
  .sh-topbar.sh-t2 .sh-wallet-wrap,
  .sh-topbar.sh-t2 > .sh-wallet-btn { position: absolute; right: 4px; top: 4px; }
  .sh-topbar.sh-t2:hover, .sh-topbar.sh-t2:focus-within {
    width: min(calc(100% - 2 * var(--gutter)), var(--page-max));
    justify-content: space-between; margin-top: 24px; min-height: 64px;
  }
  .sh-topbar.sh-t2:hover .sh-tabs, .sh-topbar.sh-t2:focus-within .sh-tabs {
    display: grid; opacity: 1; pointer-events: auto; visibility: visible;
  }
  .sh-topbar.sh-t2:hover .sh-search, .sh-topbar.sh-t2:hover .sh-wallet-wrap, .sh-topbar.sh-t2:hover > .sh-wallet-btn,
  .sh-topbar.sh-t2:focus-within .sh-search, .sh-topbar.sh-t2:focus-within .sh-wallet-wrap, .sh-topbar.sh-t2:focus-within > .sh-wallet-btn {
    opacity: 1; pointer-events: auto; visibility: visible; position: static;
  }
  .sh-topbar.sh-t2:hover .sh-brand, .sh-topbar.sh-t2:focus-within .sh-brand { height: 56px; padding: 0 20px; }
}

/* ===== search overlay ===== */
.sh-search-modal { width: 560px; gap: 0; padding: 0; }
.sh-search-input {
  height: 64px; padding: 0 24px; width: 100%;
  border: 0; border-bottom: 1px solid var(--color-border-default); border-radius: 0;
  background: transparent; font-size: 16px; outline: none; box-shadow: none;
}
.sh-search-input:focus { border-color: var(--color-border-default); box-shadow: none; background: transparent; }
.sh-search-results { display: flex; flex-direction: column; padding: 8px; min-height: 120px; max-height: min(52dvh, 420px); overflow-y: auto; }
.sh-search-note { padding: 32px 16px; color: var(--color-text-muted); font-size: 13px; text-align: center; }
.sh-search-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 14px; border-radius: var(--radius-m); text-align: left;
}
.sh-search-row:hover { background: var(--color-bg-elevated); }
.sh-search-row-sym { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.sh-search-row-name { color: var(--color-text-secondary); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-search-row-meta { color: var(--color-text-faint); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

/* ===== bottom nav (mobile only) ===== */
.sh-bottomnav {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 70; display: none; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch;
  height: var(--bottomnav-h); padding: 4px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.72); border-radius: var(--radius-l);
  box-shadow: var(--shadow-m); backdrop-filter: blur(12px);
}
.sh-bottomnav-thumb { background: var(--color-bg-elevated); border-radius: var(--radius-s); }
.sh-bottomnav-item {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #9c9c95; border-radius: var(--radius-s);
}
.sh-bottomnav-item span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sh-bottomnav-item.active { color: var(--color-text-primary); }

/* ===== footer — centered colophon over a ghost brand word ===== */
.sh-foot { margin-top: var(--space-32); border-top: 1px solid var(--color-border-default); background: var(--color-bg-canvas); overflow: hidden; }
.sh-foot-top {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding-top: clamp(36px, 4vw, 56px); text-align: center;
}
.sh-foot-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sh-foot-brandrow { display: inline-flex; }
.sh-foot-blurb { color: var(--color-text-secondary); font-size: 13px; max-width: 320px; }
.sh-foot-cols { display: flex; justify-content: center; gap: clamp(48px, 8vw, 120px); }
.sh-foot-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sh-foot-head {
  color: var(--color-text-faint); font-size: 11px; font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin-bottom: 4px;
}
.sh-foot-link { color: var(--color-text-secondary); font-size: 13px; font-weight: 500; }
.sh-foot-link:hover { color: var(--color-text-primary); }
/* the status column carries a sentence, not links — cap it so it cannot stretch
   the flex row and shove the other columns off a narrow screen */
.sh-foot-note {
  color: var(--color-text-secondary); font-size: 13px; font-weight: 500;
  max-width: 22ch; text-align: center; text-wrap: balance;
}
.sh-foot-risk {
  margin: clamp(24px, 4vw, 40px) auto 0; max-width: 68ch; text-align: center;
  color: var(--color-text-faint); font-size: 12px; line-height: 1.6; text-wrap: pretty;
}
.sh-foot-ghost {
  display: block; text-align: center; user-select: none; pointer-events: none;
  margin-top: clamp(20px, 3vw, 40px); margin-bottom: 0;
  font-size: clamp(64px, 13vw, 190px); font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  color: var(--color-text-primary); opacity: 0.055; white-space: nowrap;
}

/* ===== mobile ===== */
@media (max-width: 959.98px) {
  .sh-topbar { width: calc(100% - 2 * var(--gutter)); margin-top: 14px; min-height: 60px; }
  .sh-tabs { display: none; }
  .sh-search { display: none; }
  /* tabs are hidden here, so their auto margins can't do the pushing — the
     right-hand controls take over keeping themselves on the right edge */
  .sh-search-mini { display: inline-flex; margin-left: auto; }
  .sh-wallet-btn { height: 44px !important; padding: 0 16px; }
  .sh-conn-full { display: none; }
  .sh-conn-short { display: inline; }
  .sh-brand { height: 48px; padding: 0 14px; }
  .sh-bottomnav { display: grid; }
  /* three columns no longer fit side by side once one of them is a sentence */
  .sh-foot-cols { gap: 32px 48px; flex-wrap: wrap; }
}
/* very narrow: drop the brand word so the shell never overflows */
@media (max-width: 419.98px) {
  .sh-topbar { gap: 8px; }
  .sh-brand { padding: 0 12px; }
  .sh-brand-word { display: none; }
  .sh-wallet-btn { padding: 0 14px; }
  .sh-bottomnav-item span { font-size: 9px; letter-spacing: 0.06em; }
}

/* == discover.css == */
/* Indices — Discover + Portfolio. Class prefix: dx-
   Center-aligned throughout: eyebrow + big light title, centered controls,
   tile cards with centered content, and a bordered table-card for the list
   view. White slabs drawn with hairlines on the warm paper field. */

/* ===== shared art primitives (TokenImg lives in pages.tsx) ===== */
.dx-art {
  width: var(--size); height: var(--size);
  border-radius: var(--art-radius, var(--radius-m));
  flex-shrink: 0;
}
img.dx-art { object-fit: cover; background: var(--color-bg-elevated); }
.avatar.dx-art { font-size: var(--fs); }

.dx-sk-line { display: inline-block; height: 1em; vertical-align: middle; border-radius: 4px; }
.dx-sk-line.w40 { width: 40%; min-width: 48px; }
.dx-sk-line.w60 { width: 60%; min-width: 72px; }

/* ===== page head — centered eyebrow + title ===== */
.dx-head {
  padding-top: var(--pad-head-top); padding-bottom: var(--pad-head-bottom);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}

/* ===== section head — sits on the grid's own rails: title left, meta right ===== */
.dx-sechead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-top: var(--pad-sec-top); padding-bottom: var(--pad-sec-bottom);
  text-align: left;
}
.dx-sechead.dx-tight { padding-top: var(--space-24); }

/* trending: same tile grid as All markets, capped at five entries so it is
   always one clean row on desktop — never a horizontally clipped rail */

/* ===== All-markets toolbar — one row on the grid's rails =====
   Title on the left rule, view toggle on the right rule (the spacer between
   them is elastic); every control in the row is exactly 40px, siblings sit
   8px apart so groups read as groups. */
.dx-controls {
  display: flex; align-items: center; gap: 12px 8px; flex-wrap: wrap;
  padding-bottom: var(--pad-sec-bottom);
}
.dx-toolbar { padding-top: var(--pad-sec-top); scroll-margin-top: calc(var(--topbar-h) + 8px); }
.dx-toolbar-title { white-space: nowrap; margin-right: 12px; }
.dx-controls .spacer { display: block; flex: 1; }
.dx-chipset { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: var(--control-r);
  border: 1px solid var(--color-border-default); background: var(--pane);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-secondary); white-space: nowrap;
}
.dx-chip:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.dx-chip.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.dx-chip:disabled { opacity: 0.55; cursor: default; }

/* stock multi-picker dropdown */
.dx-picker-wrap { position: relative; --dx-picker-w: 260px; }
.dx-picker {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  width: var(--dx-picker-w);
  /* never wider than the viewport, whatever the trigger position */
  max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: var(--pane); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-l); box-shadow: var(--shadow-m);
  animation: rise var(--dur-med) var(--ease-out);
}
.dx-picker.flip { left: auto; right: 0; }
.dx-picker.up { top: auto; bottom: calc(100% + 8px); } /* opens upward when the viewport bottom is close */
.dx-picker-search { height: 40px; border-radius: var(--radius-s); }
.dx-picker-list { display: flex; flex-direction: column; max-height: min(260px, 42dvh); overflow-y: auto; }
.dx-picker-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 0 10px; border-radius: var(--radius-s);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-align: left;
}
.dx-picker-row:hover { background: var(--color-bg-elevated); }
.dx-picker-row.sel { background: var(--color-status-positive-tint); color: var(--color-text-primary); }
.dx-picker-row.sel:hover { background: #e0efe6; }
.dx-picker-empty { display: block; padding: 16px 10px; text-align: center; }
.dx-picker-clear {
  height: 36px; border-radius: var(--radius-s); background: var(--color-bg-elevated);
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-secondary);
}
.dx-picker-clear:hover { color: var(--color-text-primary); }

/* outer 40px to line up with the chips beside it: 3px pad + 32px buttons + border */
.dx-viewtoggle {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
  padding: 3px; --pad: 3px;
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--control-r);
}
.dx-viewtoggle-thumb { background: var(--color-bg-elevated); border-radius: 5px; }
.dx-viewtoggle > button {
  position: relative; z-index: 1;
  height: 32px; padding: 0 14px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #9c9c95; white-space: nowrap;
}
.dx-viewtoggle > button.active { color: var(--color-text-primary); }

/* ===== tile cards — centered content ===== */
.dx-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--grid-gap-col);
}
.dx-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  padding: 14px 14px 18px; text-align: center;
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.dx-tile:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); transform: translateY(-2px); box-shadow: var(--shadow-m); }
.dx-tile-art {
  position: relative; width: 100%; aspect-ratio: 1; margin-bottom: 8px;
  display: grid; place-items: center;
  background: var(--color-bg-elevated); border-radius: var(--radius-m); overflow: hidden;
}
.dx-tile-art .tok-img, .dx-tile-art .avatar { width: 112px; height: 112px; }
.dx-tile-art img.dx-art { width: 100%; height: 100%; border-radius: 0; }
.dx-tile-age {
  position: absolute; top: 8px; right: 8px;
  padding: 4px 8px; border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--color-border-default);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.dx-tile-sym { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-tile-meta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-width: 0; }
.dx-tile-meta .spacer { display: none; }
.dx-tile-type {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dx-mcap { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== list view — bordered table-card ===== */
.dx-table {
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
  padding: 0 20px; overflow: hidden;
}
/* four columns on shared fr rails: market and type left, cap and age right,
   header and body use the same template so every edge lines up exactly */
.dx-row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.5fr);
  align-items: center; gap: 16px;
  min-height: 64px; padding: 8px 4px;
  border-top: 1px solid var(--color-border-soft);
  transition: background var(--dur-fast) var(--ease-out);
}
.dx-row:first-child { border-top: 0; }
a.dx-row:hover { background: var(--color-bg-subtle); }
.dx-row-head {
  min-height: 44px; border-top: 0; border-bottom: 1px solid var(--color-border-default);
}
.dx-row-head span {
  font-size: 10.5px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-faint);
}
.dx-num { text-align: right; justify-self: stretch; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-row-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dx-row-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dx-row-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-row-sym { font-size: 13.5px; font-weight: 700; letter-spacing: 0.03em; }
.dx-row-type { min-width: 0; }
.dx-row-type-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== empty + foot ===== */
.dx-empty {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 48px 24px; text-align: center;
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
}
.dx-foot {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-top: var(--space-32); text-align: center;
}
.dx-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.dx-page-btn {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--control-r);
  border: 1px solid var(--color-border-default); background: var(--pane);
  font-size: 12.5px; font-weight: 700; color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.dx-page-btn:hover:not(:disabled):not(.active) { border-color: var(--color-border-strong); background: var(--color-bg-subtle); color: var(--color-text-primary); }
.dx-page-btn.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); cursor: default; }
.dx-page-btn:disabled { opacity: 0.45; cursor: default; }
.dx-page-gap { padding: 0 4px; color: var(--color-text-faint); }

/* ===== portfolio stats — big centered metrics ===== */
.dx-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--grid-gap-col); padding-bottom: var(--space-8);
}
.dx-stat {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 24px; text-align: center;
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
}
.dx-stat > .t-meta {
  font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-text-faint);
}
.dx-stat-value {
  font-size: clamp(34px, 3vw, 44px); font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ===== holdings — bordered card of rows ===== */
.dx-holdings {
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
  padding: 0 20px;
}
.dx-holdings:has(> .dx-empty:only-child) { background: transparent; border: 0; padding: 0; }
.dx-hold-row {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1.4fr) auto minmax(0, auto);
  align-items: center; gap: 16px;
  min-height: 72px; padding: 12px 4px;
  border-top: 1px solid var(--color-border-soft);
  transition: background var(--dur-fast) var(--ease-out);
}
.dx-hold-row:first-child { border-top: 0; }
.dx-hold-row:hover { background: var(--color-bg-subtle); }
.stretched::after { content: ''; position: absolute; inset: 0; }
.dx-hold-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dx-hold-sym { font-size: 14px; font-weight: 700; letter-spacing: 0.03em; width: fit-content; }
.dx-hold-type { min-width: 0; }
.dx-hold-type-text {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-faint);
}
.dx-hold-bal { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.dx-hold-bal-value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dx-hold-claim { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; justify-self: end; flex-wrap: wrap; justify-content: flex-end; }

/* ===== responsive ===== */
@media (max-width: 959.98px) {
  .dx-row { grid-template-columns: minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 0.5fr); }
  .dx-row > .dx-row-type { display: none; }
}
@media (max-width: 479.98px) {
  .dx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-tile-art .tok-img, .dx-tile-art .avatar { width: 88px; height: 88px; }
  .dx-table { padding: 0 12px; }
  .dx-holdings { padding: 0 12px; }
  .dx-hold-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dx-hold-claim { grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; padding-bottom: 8px; }
  /* toolbar wraps: title becomes its own centered line, controls center below */
  .dx-controls { justify-content: center; }
  .dx-controls .spacer { display: none; }
  .dx-toolbar-title { flex-basis: 100%; text-align: center; margin-right: 0; }
  .dx-sechead { justify-content: center; text-align: center; }
}

/* ===== baskets =====
   The tiles replace the coin cards. A basket has no image and no market, so the
   card leads with its name and the one thing that is real: the weight split. */
.bk-lede { max-width: 56ch; }

/* ===== hero — copy on the left rail, the create card on the right =====
   Same paper-and-hairline language as the tiles below it. */
.bk-hero {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: clamp(24px, 4vw, 72px); align-items: center;
  padding-top: var(--pad-head-top); padding-bottom: var(--pad-head-bottom);
}
.bk-hero-copy { display: flex; flex-direction: column; gap: 14px; }
.bk-hero-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 28px 26px;
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
}
.bk-hero-card .btn { margin-top: 14px; align-self: flex-start; }
@media (max-width: 767.98px) {
  .bk-hero { grid-template-columns: 1fr; gap: 20px; }
  .bk-hero-card .btn { align-self: stretch; }
}

.bk-grid { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

.bk-tile { padding: 0; overflow: hidden; align-items: stretch; }
.bk-tile-art {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 18px 18px;
  background: var(--bk-bg);
  color: var(--bk-ink);
}
.bk-tile-name { font-size: 20px; font-weight: 620; letter-spacing: -0.02em; line-height: 1.2; }
.bk-tile-count { font-size: 12px; opacity: 0.72; }
.bk-tile-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 16px; flex: 1; }
.bk-tagline { min-height: 2.6em; }

.bk-alloc { display: flex; height: 6px; border-radius: 3px; overflow: hidden; }
.bk-alloc-seg { display: block; height: 100%; }

.bk-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.bk-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px 4px 5px;
  border-radius: 5px;
  background: var(--surface-2, #f1f0eb);
  color: var(--ink-2, #4a4a45);
  white-space: nowrap;
}
.bk-chip-w { opacity: 0.6; }
.bk-chip-more { opacity: 0.7; }
.bk-tile-foot { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }

.bk-row-swatch {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 640;
}
.bk-row-cta { opacity: 0; transition: opacity 120ms ease; }
.dx-row:hover .bk-row-cta, .dx-row:focus-visible .bk-row-cta { opacity: 1; }

/* same vertical rhythm as a section head above; the footer's own 32px top margin
   brings the below-gap to ~the same clamp */
.bk-custom {
  display: flex; align-items: center; gap: 20px; text-align: left; flex-wrap: wrap;
  margin-top: var(--pad-sec-top); margin-bottom: var(--space-24);
}
.bk-custom-text { display: flex; flex-direction: column; gap: 4px; }
.bk-custom .btn { margin-left: auto; }

@media (prefers-reduced-motion: reduce) { .bk-row-cta { transition: none; } }
@media (max-width: 559.98px) {
  .bk-custom { flex-direction: column; align-items: stretch; }
  .bk-custom .btn { margin-left: 0; }
}

/* ===== per-stock — the stocks strip on Discover and the /stock/SYM page ===== */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--grid-gap-col); }
.st-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; min-width: 0;
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.st-row:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.st-row-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-row-sym { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; }
.st-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-price-sk { width: 54px; height: 12px; border-radius: 4px; flex: none; }

.st-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: var(--pad-head-top); padding-bottom: var(--pad-head-bottom);
}
.st-title { margin: 0; }
.st-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-addr { color: inherit; }
.st-addr:hover { color: var(--color-text-primary); }
.st-chg { font-size: 13px; font-weight: 600; }
.st-chg.up { color: var(--color-status-positive); }
.st-chg.down { color: var(--color-status-negative); }

/* two-column ticker layout: chart + news in the main column, data cards in a
   right rail that stays put while the news scrolls */
.st-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-24); }
.st-main { min-width: 0; display: flex; flex-direction: column; }
/* min-width 0: a grid item's min-content floor would otherwise force the whole
   track wider than a phone (nowrap key-value rows report inflated min-content) */
.st-rail { display: flex; flex-direction: column; gap: 16px; align-self: start; position: sticky; top: 24px; min-width: 0; }
.st-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
}
.st-card-title { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 10.5px; }
.st-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* auto margin: a value that wraps to its own line stays on the right rule */
.st-kv-val { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; white-space: nowrap; margin-left: auto; }
.st-kv-range { flex-wrap: wrap; }
.st-range { flex: 1 0 100%; position: relative; height: 3px; border-radius: 2px; background: var(--color-border-default); margin: 2px 0 4px; }
.st-range-dot { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
/* basket rows — neutral row, identity carried by a cubed-gradient swatch: a
   3×3 pixel grid stepping diagonally from the basket's paper hue to its ink */
.st-bk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: var(--radius-m);
  color: inherit; border: 1px solid var(--color-border-default);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.st-bk-row:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.st-bk-cubes {
  --c0: color-mix(in srgb, var(--bk-ink) 6%, var(--bk-bg));
  --c1: color-mix(in srgb, var(--bk-ink) 24%, var(--bk-bg));
  --c2: color-mix(in srgb, var(--bk-ink) 48%, var(--bk-bg));
  --c3: color-mix(in srgb, var(--bk-ink) 72%, var(--bk-bg));
  --c4: color-mix(in srgb, var(--bk-ink) 94%, var(--bk-bg));
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-s); overflow: hidden;
  background:
    linear-gradient(var(--c0), var(--c0)) 0 0,
    linear-gradient(var(--c1), var(--c1)) 12px 0,
    linear-gradient(var(--c2), var(--c2)) 24px 0,
    linear-gradient(var(--c1), var(--c1)) 0 12px,
    linear-gradient(var(--c2), var(--c2)) 12px 12px,
    linear-gradient(var(--c3), var(--c3)) 24px 12px,
    linear-gradient(var(--c2), var(--c2)) 0 24px,
    linear-gradient(var(--c3), var(--c3)) 12px 24px,
    linear-gradient(var(--c4), var(--c4)) 24px 24px;
  background-size: 12px 12px; background-repeat: no-repeat;
}
.st-bk-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-bk-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bk-tag { font-size: 11px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bk-w { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.st-bk-none { margin: 0; }
/* launch CTA — the one ink slab on the page, cubed gradient dissolving out of
   its corner (same motif as the basket swatches, cut in hairline white) */
.st-cta {
  gap: 4px; padding: 18px 16px;
  position: relative; overflow: hidden;
  background: var(--ink); border-color: var(--ink); color: var(--on-ink);
}
.st-cta::after {
  content: ''; position: absolute; top: 0; right: 0; width: 72px; height: 72px; pointer-events: none;
  --q0: rgba(255, 255, 255, 0.30);
  --q1: rgba(255, 255, 255, 0.19);
  --q2: rgba(255, 255, 255, 0.10);
  --q3: rgba(255, 255, 255, 0.045);
  background:
    linear-gradient(var(--q0), var(--q0)) 48px 0,
    linear-gradient(var(--q1), var(--q1)) 24px 0,
    linear-gradient(var(--q1), var(--q1)) 48px 24px,
    linear-gradient(var(--q2), var(--q2)) 0 0,
    linear-gradient(var(--q2), var(--q2)) 24px 24px,
    linear-gradient(var(--q2), var(--q2)) 48px 48px,
    linear-gradient(var(--q3), var(--q3)) 0 24px,
    linear-gradient(var(--q3), var(--q3)) 24px 48px;
  background-size: 24px 24px; background-repeat: no-repeat;
}
.st-cta .t-h3 { margin: 0; position: relative; z-index: 1; }
.st-cta .t-meta { margin: 0 0 8px; color: var(--on-ink-secondary); position: relative; z-index: 1; }
.st-cta .btn-primary { align-self: flex-start; background: var(--on-ink); color: var(--ink); position: relative; z-index: 1; }
.st-cta .btn-primary:hover { background: rgba(255, 255, 255, 0.86); }

/* price chart — smooth line card with timeframe chips; price lives in its head.
   The card fills the main column, so the line grows to match the rail's height
   instead of leaving a short strip over dead space. */
.st-chart { padding: 14px 16px 10px; flex: 1; display: flex; flex-direction: column; }
/* wrap allowed: on narrow screens the timeframe chips drop under the price
   instead of overflowing the card and dragging the whole page wider */
.st-chart-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-height: 32px; margin-bottom: 6px; }
.st-chart-read { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.st-chart-price { font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.st-chart-win { font-weight: 400; }
.st-chart-tfs { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.st-chart-tf {
  height: 28px; padding: 0 10px; border-radius: var(--radius-s);
  border: 1px solid transparent;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.st-chart-tf:hover { background: var(--color-bg-elevated); }
.st-chart-tf.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.st-chart-svg { display: block; width: 100%; flex: 1; min-height: 260px; touch-action: none; }
.st-chart-open { stroke: var(--color-border-strong); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.st-chart-cross { stroke: var(--color-border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.st-chart-dot-ring { stroke: var(--pane); stroke-width: 10; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.st-chart-dot { stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.st-chart-empty { display: grid; place-items: center; flex: 1; min-height: 260px; text-align: center; }
.st-chart-loader { display: block; width: 100%; flex: 1; min-height: 260px; border-radius: var(--radius-m); }

/* news list — headline links out, thumbnail when the wire provides one */
.st-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--grid-gap-col); }
.st-news-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; min-width: 0;
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.st-news-item:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.st-news-img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-m); flex-shrink: 0; }
.st-news-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-news-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.st-news-sym { letter-spacing: 0.04em; }

/* skeletons cut to the size of the data they stand in for — no reflow on arrival */
.st-sk-label { width: 38%; height: 10px; border-radius: 4px; }
.st-sk-val { width: 30%; height: 12px; border-radius: 4px; }
.st-news-sk-l1 { width: 92%; height: 12px; border-radius: 4px; margin-top: 2px; }
.st-news-sk-l2 { width: 58%; height: 12px; border-radius: 4px; }
.st-news-sk-meta { width: 38%; height: 9px; border-radius: 4px; margin-top: 2px; }
@media (max-width: 899.98px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); }
  .st-rail { position: static; }
}
/* tiny screens (~300px): tighter card padding and compact timeframe chips —
   five full-size chips alone are wider than the card at this width */
@media (max-width: 479.98px) {
  .st-news { grid-template-columns: 1fr; }
  .st-chart { padding: 12px 12px 8px; }
  .st-card { padding: 12px; }
  .st-chart-price { font-size: 18px; }
  .st-chart-tfs { gap: 3px; }
  .st-chart-tf { height: 24px; padding: 0 7px; font-size: 9.5px; letter-spacing: 0.05em; }
}

/* portfolio — one card per treasury: cubed identity swatch, status pill,
   settings, address, then the allocation split bar with its legend */
.pf-list { display: flex; flex-direction: column; gap: 10px; }
.pf-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px 12px; flex-wrap: wrap; }
.pf-id { display: flex; flex-direction: column; gap: 3px; min-width: 96px; }
.pf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-text-secondary);
}
.pf-badge-dot { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: 0.85; }
.pf-badge.live { color: var(--color-status-positive); }
.pf-settings { display: flex; align-items: center; gap: 18px; }
.pf-set { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.pf-addr { display: flex; align-items: center; gap: 6px; }

/* split bar: the builder's WeightBar (.wz-bar), cut in this card's hue — a
   basket looks identical here and on /build */
.pf-alloc-row { display: flex; flex-direction: column; gap: 9px; padding: 0 16px 14px; }
.pf-legend { display: flex; flex-wrap: wrap; gap: 5px 16px; }
.pf-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.pf-leg-w { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.pf-copy {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px; border-radius: var(--radius-s);
  border: 1px solid var(--color-border-default); background: var(--color-bg-elevated);
  font-size: 12px; color: var(--color-text-secondary);
}
.pf-copy:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.pf-explore { color: var(--color-text-faint); padding: 4px; }
.pf-explore:hover { color: var(--color-text-primary); }
.pf-item-sk { overflow: hidden; }
.pf-sk-cube { width: 36px; height: 36px; flex: none; border-radius: var(--radius-s); }
.pf-sk-title { width: 92px; height: 14px; border-radius: 4px; }
.pf-sk-badge { width: 64px; height: 9px; border-radius: 4px; }
.pf-sk-label { width: 42px; height: 9px; border-radius: 4px; }
.pf-sk-value { width: 52px; height: 13px; border-radius: 4px; }
.pf-sk-address { width: 122px; height: 34px; border-radius: var(--radius-s); }
.pf-sk-bar { width: 100%; height: 8px; border-radius: var(--radius-round); }
.pf-sk-legend { width: min(280px, 70%); height: 12px; border-radius: 4px; }
@media (max-width: 720px) {
  .pf-row { gap: 10px 14px; }
  .pf-settings { gap: 14px; width: 100%; justify-content: space-between; }
  .pf-set { align-items: flex-start; }
  .pf-addr { width: 100%; }
  .pf-copy { flex: 1; justify-content: space-between; }
}

/* coins list + distribution feed */
.cn-results {
  --cn-data-cols: minmax(150px, 1fr) 112px 60px 82px;
  display: flex; flex-direction: column; gap: 10px;
}
.cn-head {
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(440px, 1.45fr);
  align-items: center; gap: 14px; padding: 0 16px;
  color: var(--color-text-faint); font-size: 9.5px; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.cn-head-data, .cn-data {
  display: grid; grid-template-columns: var(--cn-data-cols); align-items: center; gap: 8px; min-width: 0;
}
.cn-head-data { padding: 0 10px; margin-right: -8px; }
.cn-head-data > span { text-align: center; }
.cn-list { display: flex; flex-direction: column; gap: 8px; }
.cn-row {
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(440px, 1.45fr);
  align-items: center; gap: 14px; min-height: 66px; padding: 8px 16px; text-decoration: none; color: inherit;
}
.cn-row:hover { background: var(--color-bg-elevated); }
.cn-row.podium {
  --c0: color-mix(in srgb, var(--bk-ink) 4%, var(--bk-bg));
  --c1: color-mix(in srgb, var(--bk-ink) 11%, var(--bk-bg));
  --c2: color-mix(in srgb, var(--bk-ink) 18%, var(--bk-bg));
  --c3: color-mix(in srgb, var(--bk-ink) 25%, var(--bk-bg));
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--bk-ink); border-color: color-mix(in srgb, var(--bk-ink) 12%, var(--bk-bg));
  background:
    linear-gradient(110deg, transparent 22%, color-mix(in srgb, var(--c3) 54%, transparent)),
    conic-gradient(from 90deg, var(--c0) 25%, var(--c1) 0 50%, var(--c2) 0 75%, var(--c1) 0) 0 0 / 72px 72px;
}
.cn-row.podium::before {
  content: ''; position: absolute; z-index: 0; inset: 0;
  background: color-mix(in srgb, white 34%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
  backdrop-filter: blur(6px) saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
.cn-row.podium > * { position: relative; z-index: 1; }
.cn-row.podium:hover { filter: saturate(1.06) brightness(0.985); }
.cn-row.podium .c-secondary, .cn-row.podium .cn-stat { color: color-mix(in srgb, var(--bk-ink) 82%, transparent); }
.cn-row.podium .cn-stat.primary { color: var(--bk-ink); }
.cn-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cn-logo {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-m); object-fit: cover; background: var(--color-bg-elevated);
  box-shadow: inset 0 0 0 1px var(--color-border-soft);
}
.cn-logo-fallback {
  background: linear-gradient(145deg, var(--bk-bg), color-mix(in srgb, var(--bk-ink) 28%, var(--bk-bg)));
  color: var(--bk-ink); font-size: 14px; font-weight: 800;
}
.cn-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cn-id > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-row-sk { pointer-events: none; }
.cn-sk-logo { width: 40px; height: 40px; flex: none; border-radius: var(--radius-m); }
.cn-sk-name { width: 84px; height: 14px; border-radius: 4px; }
.cn-sk-meta { width: 112px; max-width: 100%; height: 10px; border-radius: 4px; }
.cn-sk-payout { width: 28px; height: 28px; border-radius: 50%; }
.cn-sk-stat { width: 64px; max-width: 82%; height: 12px; border-radius: 4px; justify-self: center; }
.cn-sk-stat.short { width: 24px; }
.cn-data { margin: -4px -8px -4px 0; padding: 8px 10px; }
.cn-payouts {
  min-width: 0; min-height: 32px; display: flex; align-items: center; justify-content: center;
  gap: 5px; white-space: nowrap;
}
.cn-payout-logo { display: inline-flex; flex: none; }
.cn-stat {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 32px; color: var(--color-text-secondary); white-space: nowrap; text-align: center;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.cn-stat.primary { color: var(--color-text-primary); font-size: 13.5px; font-weight: 700; }
.cn-pager { padding-top: 2px; }
.cn-page-arrow { display: inline-grid; place-items: center; padding: 0; }
.cn-feed-head { justify-content: flex-start; padding-inline: 10px; text-align: left; }
.cn-feed { display: flex; flex-direction: column; }
.cn-feed-row {
  display: grid; grid-template-columns: minmax(240px, 1fr) 112px 82px;
  align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-soft);
}
.cn-feed-row:last-child { border-bottom: 0; }
.cn-feed-route {
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
.cn-feed-coin { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.cn-feed-arrow { flex: none; display: grid; place-items: center; color: var(--color-text-faint); }
.cn-feed-asset { flex: none; display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.cn-feed-value { text-align: left; font-variant-numeric: tabular-nums; }
.cn-feed-ago { text-align: left; }
.claims-sk .cn-feed-row { grid-template-columns: minmax(100px, 1fr) minmax(90px, 1fr) auto; }
.claims-sk-round { width: 96px; height: 13px; border-radius: 4px; }
.claims-sk-amount { width: 110px; height: 11px; border-radius: 4px; }
.claims-sk-button { width: 72px; height: 32px; border-radius: var(--radius-s); }
@media (max-width: 820px) {
  .cn-results { --cn-data-cols: minmax(110px, 1fr) 102px 52px 72px; }
  .cn-head, .cn-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cn-head > :first-child { display: none; }
  .cn-head-data { grid-column: 1; padding: 0 10px; margin: 0 -8px 0 0; }
  .cn-identity { grid-row: 1; grid-column: 1; }
  .cn-data { grid-column: 1; }
}
@media (max-width: 520px) {
  .cn-results { --cn-data-cols: minmax(80px, 1fr) 84px 40px 58px; }
  .cn-head { padding-inline: 12px; font-size: 8.5px; letter-spacing: 0.04em; }
  .cn-head-data, .cn-data { gap: 4px; padding-inline: 6px; }
  .cn-row { padding: 12px; }
  .cn-logo { width: 38px; height: 38px; }
  .cn-payouts { gap: 3px; }
  .cn-payout-logo .slogo { width: 24px !important; height: 24px !important; }
  .cn-stat { font-size: 11.5px; }
  .cn-stat.primary { font-size: 12.5px; }
  .cn-feed-head { padding-inline: 4px; }
  .cn-feed-row { gap: 8px; }
  .cn-feed-row { grid-template-columns: minmax(160px, 1fr) 80px 54px; padding-inline: 4px; }
  .cn-feed-route { gap: 4px; }
  .cn-feed-asset { gap: 4px; }
}


/* pairing panel — shown until a coin is bound, so a creator knows the next move */
.pf-item { display: flex; flex-direction: column; gap: 0; padding: 0; }

/* pairing disclosure — the whole panel folds behind one header row */
.pf-pair { border-top: 1px solid var(--color-border-soft); display: flex; flex-direction: column; }
.pf-pair-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 16px; text-align: left; border-radius: 0 0 var(--radius-l) var(--radius-l); }
.pf-pair-head:hover { background: var(--color-bg-elevated); }
.pf-pair-title { font-size: 13px; font-weight: 700; }
.pf-chev { display: inline-flex; color: var(--color-text-secondary); transition: transform var(--dur-fast) var(--ease-out); }
.pf-chev.open { transform: rotate(180deg); }
.pf-pair-body { display: flex; flex-direction: column; gap: 14px; padding: 6px 16px 16px; }
.pf-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
/* badge centered against the whole step text, with room to breathe */
.pf-step { display: flex; align-items: center; gap: 12px; }
/* the number badge borrows the card's hue pair — a single cube of the swatch */
.pf-step-n {
  width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 6px; background: var(--bk-bg); color: var(--bk-ink);
  font-size: 11px; font-weight: 800; line-height: 1;
}
.pf-step-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pf-step-t { font-size: 12.5px; font-weight: 700; }
.pf-manual-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-secondary); }
.pf-manual-toggle:hover { color: var(--color-text-primary); }
/* AFTER the base rules so it actually wins: steps stack on phones, the header
   keeps its title on one line by dropping the hint */
@media (max-width: 719.98px) {
  .pf-steps { grid-template-columns: 1fr; gap: 14px; }
  .pf-pair-hint { display: none; }
}
.pf-bind { display: flex; align-items: center; gap: 8px; }
/* square-cornered and full-height: the pill .input default read tiny here */
.pf-bind-input { flex: 1; min-width: 0; height: 44px; border-radius: var(--radius-m); font-size: 13px; }
.pf-bind .btn { border-radius: var(--radius-m); }
@media (max-width: 720px) {
  .pf-bind { flex-direction: column; align-items: stretch; }
  .pf-bind-input { height: 48px; font-size: 16px; } /* 16px: iOS refuses to zoom-jump the page */
  .pf-bind .btn { height: 48px; }
}

/* == wizard.css == */
/* Indices — launch wizard. Class prefix: wz-
   One centered vertical column of numbered sections (Type, Identity, Config,
   Review); a sticky tab track scrolls between them and follows the scroll
   back. Fields are white wells with warm hairlines; selection is an ink
   border, not a color flood. */

/* ===== chrome — centered head, sticky tabs, one column ===== */
.wz-head {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-24);
  padding-top: var(--pad-head-top); padding-bottom: var(--pad-head-bottom);
  text-align: center;
}
.wz-title { margin: 0; }

.wz-tabs-wrap {
  position: sticky; top: calc(var(--topbar-h) - 12px); z-index: 60;
  display: flex; justify-content: center;
  padding-bottom: var(--space-16);
}
.wz-tabs {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
  width: min(100%, 640px);
  padding: var(--seg-pad); --pad: var(--seg-pad);
  background: rgba(255, 255, 255, 0.94); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-l); box-shadow: var(--shadow-m);
  backdrop-filter: blur(10px);
}
.wz-tabs-thumb { background: var(--color-bg-elevated); border-radius: var(--radius-s); }
.wz-tabs > button {
  position: relative; z-index: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--control-h); padding: 0 10px; border-radius: var(--radius-s);
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: #9c9c95; white-space: nowrap;
}
.wz-tabs > button:hover { color: var(--color-text-primary); }
.wz-tabs > button.active { color: var(--color-text-primary); }
.wz-tab-label { overflow: hidden; text-overflow: ellipsis; }

/* one centered column, one step at a time — wide and calm on desktop, with a
   light vertical trim so a step usually fits without the page feeling cropped */
.wz-body { display: block; }
.wz-col { display: flex; flex-direction: column; gap: var(--space-16); width: min(100%, 840px); margin: 0 auto; }
.wz-steps { display: flex; flex-direction: column; gap: var(--space-16); }

/* directional step entrances: Next slides in from the right, Back from the
   left — a soft drift with a fade, not a jump. Keys on the sections force a
   remount so the animation replays every switch. */
@keyframes wz-in-r { from { opacity: 0; transform: translateX(20px); } }
@keyframes wz-in-l { from { opacity: 0; transform: translateX(-20px); } }
.wz-steps.fwd .wz-section { animation: wz-in-r 0.45s cubic-bezier(0.25, 1, 0.5, 1) both; }
.wz-steps.back .wz-section { animation: wz-in-l 0.45s cubic-bezier(0.25, 1, 0.5, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .wz-steps .wz-section { animation: none; }
}

@media (min-width: 960px) {
  .wz-page .wz-head { padding-top: clamp(32px, 4.5vh, 56px); padding-bottom: 16px; }
  .wz-page .wz-section { padding: clamp(20px, 2.6vh, 32px) clamp(24px, 3.4vw, 44px); gap: clamp(16px, 2.4vh, 24px); }
  .wz-page .wz-nav-row { padding-bottom: 16px; }
  .wz-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* steady floor: the nav row barely moves between steps of different heights,
     which is most of what made switching feel rough */
  .wz-page .wz-steps { min-height: clamp(340px, 52vh, 520px); }
}

/* step progress: thin bar + count, above the card */
.wz-stepbar { display: flex; align-items: center; gap: 14px; }
.wz-stepbar .wz-progress { flex: 1; }
.wz-progress { height: 4px; border-radius: var(--radius-round); overflow: hidden; background: var(--color-bg-elevated); }
.wz-progress > span { display: block; height: 100%; background: var(--ink); border-radius: inherit; transition: width var(--dur-med) var(--ease-out); }

/* summary chips on the result step */
.wz-sum-chips { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; }
.wz-sum-chip { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }

/* the derived address — the product; chunked for reading, ends emphasised */
.wz-addr { margin: 0; padding: 14px 0; text-align: center; word-break: break-all; font-size: 15px; line-height: 1.6; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.wz-addr-0x { color: var(--color-text-faint); }
.wz-addr-end { color: var(--color-text-primary); font-weight: 700; }

/* proportional weight bar — same ramp as the Discover tiles */
.wz-bar { display: flex; height: 10px; border-radius: var(--radius-round); overflow: hidden; background: var(--color-bg-elevated); }
.wz-bar-seg { min-width: 2px; transition: width var(--dur-med) var(--ease-out); }

/* preset swatch tiles: pick by look, not by label */
.wz-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--grid-gap-col); }
.wz-preset {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; text-align: left;
  background: var(--bk-bg); color: var(--bk-ink);
  border: 1px solid transparent; border-radius: var(--radius-l);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wz-preset:hover { transform: translateY(-1px); }
.wz-preset.sel { border-color: var(--bk-ink); }
.wz-preset .wz-bar { background: color-mix(in oklab, var(--bk-ink) 10%, var(--bk-bg)); height: 6px; }
.wz-preset-name { font-size: 13px; font-weight: 700; line-height: 1.25; padding-right: 22px; }
.wz-preset-count {
  position: absolute; top: 10px; right: 12px;
  font-size: 10.5px; font-weight: 700; opacity: 0.55; font-variant-numeric: tabular-nums;
}

.wz-section {
  display: flex; flex-direction: column; gap: var(--space-24);
  padding: clamp(24px, 3vw, 40px);
  animation: rise var(--dur-slow) var(--ease-out); /* one section at a time — entrance on switch */
}
.wz-section-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.wz-section-head .t-body { max-width: 480px; }

.wz-launch-row { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: var(--space-8); }
.wz-launch-cta { width: min(100%, 320px); }

/* coin lookup: input takes the room, button keeps its label on one line.
   wraps on narrow screens so the 400px embed never squeezes the input away */
.wz-lookup-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wz-lookup-row .input { flex: 1 1 200px; min-width: 0; }
.wz-lookup-row .btn { flex: 0 0 auto; }

.wz-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wz-nav-btn { min-width: 140px; }

/* advanced disclosure */
.wz-adv-toggle {
  display: inline-flex; align-items: center; gap: 6px; align-self: center;
  height: 34px; padding: 0 12px; border-radius: var(--radius-s);
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-secondary);
}
.wz-adv-toggle:hover { color: var(--color-text-primary); background: var(--color-bg-elevated); }
.wz-adv-chev { display: inline-flex; transition: transform var(--dur-med) var(--ease-out); }
.wz-adv-chev.open { transform: rotate(180deg); }

/* slider readouts */
.wz-slider-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wz-slider-scale {
  display: flex; justify-content: space-between;
  font-size: 10.5px; font-weight: 600; color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.wz-sec { display: flex; flex-direction: column; gap: 12px; }
.wz-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wz-sec .dx-chipset { justify-content: flex-start; } /* chips follow the section's left rail */

.wz-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap-col); }
.wz-choice {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px 20px; text-align: center; min-height: 176px;
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wz-choice:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.wz-choice.selected { border-color: var(--ink); background: var(--color-bg-subtle); }
.wz-choice .t-meta {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-faint); margin-top: auto;
}
.wz-row-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.wz-input-err { border-color: var(--color-status-negative) !important; }

.wz-media { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-24); align-items: start; }
.wz-art { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
/* the well is the button: click to add or replace */
.wz-art-preview {
  position: relative; width: 100%; aspect-ratio: 1; padding: 0;
  display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: var(--color-bg-elevated); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-l);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wz-art-preview:hover { border-color: var(--color-text-muted); background: #f1f0eb; }
.wz-art-preview img { width: 100%; height: 100%; object-fit: cover; }
.wz-art-add { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wz-art-cta {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-secondary);
}
.wz-art-preview:hover .wz-art-cta { color: var(--color-text-primary); }
.wz-art-hover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(25, 25, 24, 0.45); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.wz-art-preview:hover .wz-art-hover, .wz-art-preview:focus-visible .wz-art-hover { opacity: 1; }
.wz-meta-form { display: flex; flex-direction: column; gap: var(--space-16); }

/* stock selector modal */
.wz-search { position: relative; display: flex; align-items: center; }
.wz-search > svg { position: absolute; left: 14px; color: var(--color-text-faint); pointer-events: none; }
.wz-search-input { padding-left: 40px; }
.wz-stock-list { display: flex; flex-direction: column; max-height: min(46dvh, 380px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px; }
.wz-stock-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 12px; border-radius: var(--radius-m); text-align: left;
}
.wz-stock-row:hover { background: var(--color-bg-elevated); }
.wz-stock-row.sel { background: var(--color-status-positive-tint); }
.wz-stock-row.sel:hover { background: #e0efe6; }
.wz-stock-logo {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: var(--radius-m);
  background: var(--color-bg-elevated); border: 1px solid var(--color-border-default);
  font-size: 13px; font-weight: 800;
}
.wz-stock-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wz-stock-id > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-stock-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wz-empty { padding: 24px 12px; text-align: center; }

/* single-stock trigger */
.wz-stock-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; width: 100%;
  background: var(--pane); border: 1px solid var(--color-border-input); border-radius: var(--radius-l);
  box-shadow: var(--shadow-s); text-align: left;
}
.wz-stock-trigger:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.wz-stock-trigger-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.wz-stock-avatar { width: 40px; height: 40px; font-size: 13px; }
.wz-stock-trigger-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wz-stock-trigger-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-stock-change { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* multi-stock chips */
.wz-multistock { display: flex; flex-direction: column; gap: 10px; }
.wz-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-stock-chip { gap: 8px; }
.wz-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 13px; line-height: 1; color: inherit; opacity: 0.7; }
.wz-chip-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.2); }

/* weights editor */
.wz-weights { display: flex; flex-direction: column; gap: 10px; padding: var(--space-16); background: var(--color-bg-elevated); border-radius: var(--radius-l); }
.wz-weights-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-weights-head > .t-label { margin-right: auto; }
/* column floor leaves the value input >=52px with logo + ticker + % + remove in
   the row — "33.33" must never clip, whatever the frame width */
.wz-weights-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.wz-weight-row {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; height: var(--control-h);
  background: var(--pane); border: 1px solid var(--color-border-input); border-radius: var(--control-r);
}
.wz-weight-row:focus-within { border-color: var(--color-border-focus); box-shadow: var(--ring); }
.wz-weight-sym { font-weight: 700; letter-spacing: 0.04em; font-size: 12.5px; }
.wz-weight-row input { flex: 1; min-width: 52px; border: 0; outline: 0; background: transparent; text-align: right; font-variant-numeric: tabular-nums; }
.wz-weight-row input::-webkit-outer-spin-button, .wz-weight-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wz-weight-row input[type='number'] { appearance: textfield; -moz-appearance: textfield; }

/* image modal */
.wz-crop {
  width: 200px; aspect-ratio: 1; margin: 0 auto;
  display: grid; place-items: center; overflow: hidden;
  background: var(--color-bg-elevated); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-l);
}
.wz-crop img { width: 100%; height: 100%; object-fit: cover; }

/* confirm modal */
.wz-confirm-lede { line-height: 1.55; }
.wz-confirm-card { display: flex; flex-direction: column; background: var(--color-bg-elevated); border-radius: var(--radius-l); padding: 6px 16px; }
.wz-confirm-row { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-border-default); }
.wz-confirm-row:last-child { border-bottom: 0; }

/* numeric fields */
.wz-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.wz-num { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wz-num-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wz-num-line {
  display: flex; align-items: center; gap: 8px;
  height: var(--control-h); padding: 0 14px;
  background: var(--pane); border: 1px solid var(--color-border-input); border-radius: var(--control-r);
  box-shadow: var(--shadow-s);
}
.wz-num-line:focus-within { border-color: var(--color-border-focus); box-shadow: var(--ring); background: #fbfdff; }
.wz-num-line input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; font-variant-numeric: tabular-nums; }
.wz-num-line input::-webkit-outer-spin-button, .wz-num-line input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wz-num-line input[type='number'] { appearance: textfield; -moz-appearance: textfield; }

/* holders/buyback split bar */
.wz-split-bar { display: flex; height: 8px; border-radius: var(--radius-round); overflow: hidden; background: var(--color-bg-elevated); }
.wz-split-holders { width: var(--p); background: var(--ink); }
.wz-split-buyback { flex: 1; background: var(--accent); }
.wz-split-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.wz-dot-ink { background: var(--ink); }
.wz-dot-info { background: var(--accent); }

/* mechanism cards */
.wz-mech-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap-col); }
.wz-mech-grid.one { grid-template-columns: minmax(0, 1fr); }
.wz-mech-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px; text-align: center;
  background: var(--pane); border: 1px solid var(--color-border-default); border-radius: var(--radius-l);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wz-mech-card:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); }
.wz-mech-card.sel { border-color: var(--ink); background: var(--color-bg-subtle); }
.wz-mech-top { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.wz-mech-shape { width: 64px; height: 37px; color: var(--color-text-muted); }
.wz-mech-card.sel .wz-mech-shape { color: var(--color-text-primary); }
.wz-mech-toggle {
  align-self: center; height: 34px; padding: 0 14px; border-radius: var(--radius-s);
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-secondary);
}
.wz-mech-toggle:hover { color: var(--color-text-primary); background: var(--color-bg-elevated); }

/* review */
.wz-copy-btn { display: inline-flex; align-items: center; padding: 4px; border-radius: var(--radius-xs); }
.wz-copy-btn:hover { color: var(--color-text-primary); background: var(--color-bg-elevated); }
.wz-sum-card { display: flex; flex-direction: column; background: var(--color-bg-elevated); border-radius: var(--radius-l); padding: 6px 20px; }
.wz-sum-row { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--color-border-default); }
.wz-sum-row:last-child { border-bottom: 0; }
.wz-sum-label { flex-shrink: 0; }
.wz-review-note { text-align: center; max-width: 520px; margin: 0 auto; line-height: 1.55; }
.wz-launch-status {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px; background: var(--color-bg-elevated); border-radius: var(--radius-l);
  text-align: center;
}
.wz-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--color-border-strong); border-top-color: var(--ink);
  animation: wz-spin 0.7s linear infinite;
}
@keyframes wz-spin { to { transform: rotate(360deg); } }
.wz-status-check {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-status-positive); color: #fff;
}
.wz-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-status-negative); flex-shrink: 0; }
.wz-modal-btn { min-width: 120px; }

/* ===== responsive ===== */
@media (max-width: 959.98px) {
  .wz-tabs-wrap { top: calc(var(--topbar-h) - 8px); }
  .wz-choices { grid-template-columns: minmax(0, 1fr); }
  .wz-choice { min-height: 0; }
  .wz-media { grid-template-columns: minmax(0, 1fr); }
  .wz-art { max-width: 260px; margin: 0 auto; }
  .wz-mech-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479.98px) {
  .wz-row-fields, .wz-grid2 { grid-template-columns: minmax(0, 1fr); }
  .wz-tabs > button { padding: 0 4px; font-size: 9.5px; letter-spacing: 0.06em; gap: 4px; }
  .wz-launch-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wz-spinner { animation-duration: 1.4s; } /* keep the busy signal, slow the spin */
}

/* ===== builder: one page, no step chrome ===== */
.wz-address { word-break: break-all; line-height: 1.5; }
.wz-errs { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.wz-weight-row .wz-chip-x { margin-left: 2px; }
.wz-deploy > summary { cursor: pointer; padding: 4px 0; }
.wz-deploy-body { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }

.wz-deploy-live { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.wz-deploy-done { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* == detail.css == */
/* Indices — market detail. Class prefix: dt-
   Header: a full-bleed white band under the floating header, hairline-bottomed,
   with the token artwork echoed as a soft blur. Identity is centered. Below:
   main column (stats, chart, economics, activity) + sticky trade rail. */

.dt-loading { padding-top: var(--pad-head-top); padding-bottom: var(--pad-head-bottom); text-align: center; }

/* ===== header band ===== */
.dt-header {
  position: relative; overflow: hidden;
  background: var(--pane); border-bottom: 1px solid var(--color-border-default);
  margin-top: calc(-1 * var(--topbar-h)); padding-top: var(--topbar-h);
}
.backdrop-art-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dt-header-inner { position: relative; padding-top: var(--space-24); padding-bottom: var(--space-40); }
.dt-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dt-back {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; border-radius: var(--radius-s);
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-secondary);
}
.dt-back:hover { color: var(--color-text-primary); background: var(--color-bg-elevated); }
.dt-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h-sm); padding: 0 14px; border-radius: var(--radius-s);
  border: 1px solid var(--color-border-default); background: var(--pane);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-secondary); white-space: nowrap;
}
.dt-chip:hover { border-color: var(--color-border-strong); background: var(--color-bg-subtle); color: var(--color-text-primary); }

/* identity band: art + name on the left rule, headline numbers on the right rule */
.dt-id-row {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding-top: var(--space-24);
}
.dt-id-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dt-hero-art { width: 64px; height: 64px; border-radius: var(--radius-l); font-size: 22px; flex-shrink: 0; }
img.dt-hero-art { object-fit: cover; background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); }
.dt-id-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dt-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dt-name { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; overflow-wrap: anywhere; }
.dt-sym { color: var(--color-text-secondary); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dt-type-badge {
  padding: 5px 8px; border-radius: var(--radius-xs); background: var(--color-bg-elevated);
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-secondary); white-space: nowrap;
}
.dt-meta-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dt-meta-link { color: inherit; }
.dt-meta-link:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }

.dt-headstats { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.dt-headstat { display: flex; flex-direction: column; gap: 8px; }
.dt-headstat-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-text-faint);
}
.dt-headstat-value { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== layout ===== */
.dt-split {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--split-gap);
  align-items: start; padding-top: var(--space-32);
}
.dt-main { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.dt-sechead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-top: var(--space-24); padding-bottom: var(--space-8); text-align: left;
}

/* ===== stats ===== */
.dt-keystats, .dt-rewards { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-24); }
.dt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-16); }
.dt-stat { display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.dt-stat > .t-meta {
  font-size: 10.5px; font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-text-faint);
}
.dt-stat-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dt-stat-tok { display: inline-flex; align-items: center; gap: 8px; }
.dt-stock-badge { width: 28px; height: 28px; font-size: 11px; }

/* split bar */
.dt-splitbar { display: flex; flex-direction: column; gap: 8px; }
.dt-splitbar-bar { display: flex; height: 8px; border-radius: var(--radius-round); overflow: hidden; background: var(--color-bg-elevated); }
.dt-splitbar-bar .seg { width: var(--w); }
.seg.ink { background: var(--ink); }
.seg.accent { background: var(--accent); }
.seg.muted { background: var(--color-border-strong); }
.dt-splitbar-labels { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* rewards: hero number left, supporting stats in a quiet 2x2 right */
.dt-rew-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-24); align-items: center;
}
.dt-rew-hero { display: flex; flex-direction: column; gap: 10px; }
.dt-rew-hero-value { font-size: clamp(28px, 2.6vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.dt-rew-hero-unit { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.dt-rew-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-16) var(--space-20); }
.dt-rew-stats .dt-stat { align-items: flex-start; text-align: left; }

/* your position, folded into the rewards card as one strip */
.dt-pos {
  display: flex; align-items: center; gap: var(--space-24); flex-wrap: wrap;
  padding-top: var(--space-16); border-top: 1px solid var(--color-border-soft);
}
.dt-pos-stat { display: flex; flex-direction: column; gap: 6px; }
.dt-pos-stat b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===== chart — smooth market-cap line (lightweight-charts canvas) ===== */
.dt-price-block { display: flex; flex-direction: column; }
.dt-chart { display: flex; flex-direction: column; gap: 12px; padding: var(--space-20); }
.dt-chart.sk { min-height: 420px; border: 0; }
.dt-chart-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.dt-tf { display: inline-flex; gap: 2px; padding: 3px; background: var(--color-bg-elevated); border-radius: var(--radius-s); }
.dt-tf > button {
  height: 28px; padding: 0 12px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}
.dt-tf > button.active { background: var(--pane); color: var(--color-text-primary); box-shadow: var(--shadow-s); }
.dt-chart-canvas { width: 100%; height: 400px; }
@media (max-width: 959.98px) { .dt-chart-canvas { height: 300px; } }
.dt-early {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: var(--space-40) var(--space-24); text-align: center;
}

/* ===== crank ===== */
.dt-crank { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--space-16); background: var(--color-bg-elevated); border-radius: var(--radius-l); text-align: center; }
.dt-crank-head { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* ===== creator panel ===== */
.dt-creator { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-24); }
.dt-creator-block { display: flex; flex-direction: column; gap: 10px; }
.dt-creator-weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dt-creator-wrow {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; height: var(--control-h);
  background: var(--pane); border: 1px solid var(--color-border-input); border-radius: var(--control-r);
}
.dt-creator-wrow:focus-within { border-color: var(--color-border-focus); box-shadow: var(--ring); }
.dt-creator-wrow input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; text-align: right; font-variant-numeric: tabular-nums; }
.dt-creator-wrow input::-webkit-outer-spin-button, .dt-creator-wrow input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dt-creator-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dt-creator-addr {
  flex: 1; min-width: 180px; height: var(--control-h-sm); padding: 0 12px;
  background: var(--pane); border: 1px solid var(--color-border-input); border-radius: var(--control-r);
  font-variant-numeric: tabular-nums;
}
.dt-creator-addr:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--ring); }

/* ===== activity table ===== */
.dt-activity { padding: 0 20px; }
.dt-arow {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto 44px;
  align-items: center; gap: 14px;
  min-height: 52px; padding: 6px 4px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 13px;
  transition: background var(--dur-fast) var(--ease-out);
}
.dt-arow:first-child { border-top: 0; }
.dt-arow:hover { background: var(--color-bg-subtle); }
.dt-arow-head { min-height: 44px; border-bottom: 1px solid var(--color-border-default); }
.dt-arow-head:hover { background: transparent; }
.dt-arow-head span {
  font-size: 10.5px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-faint);
}
.dt-num { text-align: right; justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-tx {
  justify-self: end; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-xs); color: var(--color-text-faint);
}
.dt-tx:hover { color: var(--color-text-primary); background: var(--color-bg-elevated); }
.dt-activity-note { padding: 20px 0 24px; text-align: center; color: var(--color-text-muted); font-size: 12.5px; }
.dt-act-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0 16px; }

/* ===== trade rail column ===== */
.dt-railcol {
  position: sticky; top: calc(var(--topbar-h) + 8px);
  display: flex; flex-direction: column; gap: var(--space-16); min-width: 0;
}
.dt-rail {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--rail-pad);
}
.dt-curve-card { display: flex; flex-direction: column; gap: 12px; padding: var(--space-20); }
.dt-curve-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dt-curve-head b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dt-curve-bar { height: 5px; border-radius: var(--radius-round); background: var(--color-bg-elevated); overflow: hidden; }
.dt-curve-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.dt-seg {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
  padding: var(--seg-pad); --pad: var(--seg-pad);
  background: var(--color-bg-elevated); border-radius: var(--radius-l);
}
.dt-seg-thumb { background: var(--pane); border-radius: var(--radius-s); box-shadow: var(--shadow-s); }
.dt-seg > button {
  position: relative; z-index: 1;
  height: 40px; border-radius: var(--radius-s);
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-secondary);
}
.dt-seg > button.active { color: var(--color-text-primary); }

.dt-trade { display: flex; flex-direction: column; gap: 10px; }
.dt-max { font-size: inherit; font-weight: 700; }

/* the two swap wells: pay above, receive below, one flip between them */
.dt-well { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: var(--radius-l); background: var(--color-bg-subtle); border: 1px solid var(--color-border-soft); }
.dt-well:focus-within { border-color: var(--color-border-focus); box-shadow: var(--ring); background: #fbfdff; }
.dt-well-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-faint);
}
.dt-well-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dt-well-main input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 24px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.dt-well-main input::-webkit-outer-spin-button, .dt-well-main input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dt-well-main input[type='number'] { appearance: textfield; -moz-appearance: textfield; }
.dt-well-out { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dt-well-unit {
  flex-shrink: 0; padding: 7px 12px; border-radius: var(--radius-m);
  background: var(--pane); border: 1px solid var(--color-border-default);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
}
.dt-flip-row { display: flex; align-items: center; gap: 12px; }
.dt-flip-line { flex: 1; height: 1px; background: var(--color-border-default); }
.dt-flip {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-m);
  background: var(--ink); color: var(--on-ink); font-size: 14px;
}
.dt-flip:hover { background: var(--volt-hover); }

.dt-cta { width: 100%; }
.dt-msg { text-align: center; }
.dt-msg.err { color: var(--color-status-negative); }
.dt-msg.ok { color: var(--color-status-positive); }
.dt-oracle { display: flex; flex-direction: column; gap: 6px; padding-top: var(--space-12); border-top: 1px solid var(--color-border-soft); }
.dt-oracle-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* ===== loading skeleton — geometry mirrors the resolved page ===== */
.dt-sk-back { width: 88px; height: 34px; }
.dt-sk-chips { width: 300px; max-width: 45%; height: 32px; }
.dt-sk-name { width: 200px; max-width: 100%; height: 30px; }
.dt-sk-meta { width: 260px; max-width: 100%; height: 17px; }
.dt-sk-early { height: 150px; border-radius: var(--radius-l); }
.dt-sk-h { width: 140px; height: 24px; margin: 0 auto; }
.dt-sk-stat { height: 72px; border-radius: var(--radius-m); }
.dt-sk-seg { height: 46px; border-radius: var(--radius-m); }
.dt-sk-field { height: 56px; border-radius: var(--radius-l); }
.dt-sk-cta { height: 44px; border-radius: var(--radius-m); }
.dt-sk-note { height: 40px; border-radius: var(--radius-m); }
.dt-sk-oracle { height: 48px; border-radius: var(--radius-m); }
.dt-split .dt-stats + .dt-stats { margin-top: 0; }

/* ===== responsive ===== */
@media (max-width: 959.98px) {
  .dt-split { grid-template-columns: minmax(0, 1fr); }
  .dt-railcol { position: static; order: -1; }
  .dt-hero-art { width: 56px; height: 56px; }
  .dt-headstats { gap: 20px; }
  .dt-headstat-value { font-size: 17px; }
  .dt-arow { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .dt-arow > .dt-num:nth-child(4), .dt-arow > .dt-tx, .dt-arow > span:last-child:not(.dt-num) { display: none; }
  .dt-arow-head { grid-template-columns: 64px minmax(0, 1fr) auto; }
}
@media (max-width: 479.98px) {
  .dt-activity { padding: 0 12px; }
  .dt-keystats, .dt-rewards, .dt-creator { padding: var(--space-16); }
  .dt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-rew-grid { grid-template-columns: minmax(0, 1fr); }
}

/* == per-coin page (/coin/<treasury>) ================================== */
/* quiet back link, not a button: the header below it is centred, so a bordered
   control floating at the left read as a stray element */
.cd-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--c-muted, #8a8a8a); transition: color .12s ease;
}
.cd-back:hover { color: var(--c-primary, #111); }
.cd-back svg { transform: rotate(90deg); }  /* the only chevron in the kit points down */

.cd-head { align-items: stretch; text-align: left; }
.cd-hero {
  width: 100%; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center; gap: 16px; min-width: 0;
}
.cd-token-logo { display: inline-flex; }
.cd-token-logo .cn-logo { width: 72px; height: 72px; border-radius: var(--radius-l); }
.cd-hero-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd-hero-copy > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-pons { flex: none; text-decoration: none; white-space: nowrap; }
.cd-page-sk .sk { display: block; }
.cd-sk-back { width: 82px; height: 14px; border-radius: 4px; }
.cd-sk-logo { width: 72px; height: 72px; border-radius: var(--radius-l); }
.cd-sk-title { width: min(260px, 70%); height: 32px; border-radius: 5px; }
.cd-sk-subtitle { width: min(180px, 52%); height: 15px; border-radius: 4px; }
.cd-sk-button { width: 128px; height: 44px; border-radius: var(--radius-m); }
.cd-stat-sk { min-height: 72px; }
.cd-sk-label { width: 58px; height: 10px; border-radius: 4px; }
.cd-sk-value { width: 92px; max-width: 80%; height: 18px; border-radius: 4px; }
.cd-sk-heading { width: 132px; height: 22px; border-radius: 4px; }
.cd-sk-address { flex: 1; height: 14px; border-radius: 4px; }
.cd-sk-action { width: 116px; height: 32px; border-radius: var(--radius-s); }
.cd-sk-stock { width: 28px; height: 28px; border-radius: 50%; }
.cd-sk-leg-name { width: 64px; height: 14px; border-radius: 4px; }
.cd-leg-sk { min-height: 54px; }

.cd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cd-stat { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px; overflow: hidden; }
.cd-stat > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .cd-hero { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .cd-token-logo .cn-logo { width: 64px; height: 64px; }
  .cd-sk-logo { width: 64px; height: 64px; }
  .cd-pons { grid-column: 1 / -1; justify-self: stretch; }
  .cd-sk-button { grid-column: 1 / -1; width: 100%; }
  .cd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cd-cas { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.cd-ca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cd-ca-label { flex: 0 0 72px; }
/* the CA is the payload: let it shrink and ellipsize rather than push the row wide */
.cd-ca-addr { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono, ui-monospace, monospace); }
.cd-ca-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.cd-ca-open, .cd-ca-copy { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 10px; }
.cd-ca-open { text-decoration: none; }
.cd-ca-open svg { flex: none; }
@media (max-width: 560px) {
  .cd-ca { flex-wrap: wrap; gap: 4px 10px; }
  .cd-ca-label { flex-basis: 100%; }
  .cd-ca-addr { flex: 1 1 calc(100% - 170px); }
  .cd-ca-actions { margin-left: auto; }
}

.cd-basket { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cd-leg { display: flex; align-items: center; gap: 8px; padding: 12px 14px; text-decoration: none; }

.cd-fee-history { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cd-fees { padding: 0; overflow: hidden; }
.cd-fee-row {
  display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) 62px;
  align-items: center; gap: 16px; min-width: 0; padding: 13px 16px;
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-border-soft);
}
.cd-fee-row:last-child { border-bottom: 0; }
.cd-fee-row:hover { background: var(--color-bg-elevated); }
.cd-fee-total, .cd-fee-ago { white-space: nowrap; }
.cd-fee-total { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cd-fee-ago { text-align: right; }
.cd-fee-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px; min-width: 0; }
.cd-fee-part { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cd-fee-part > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-fee-pager { padding-top: 2px; }
@media (max-width: 720px) {
  .cd-fee-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 12px; }
  .cd-fee-split { grid-column: 1 / -1; grid-row: 2; }
  .cd-fee-ago { grid-column: 2; grid-row: 1; }
}
@media (max-width: 479.98px) {
  .cd-fee-split { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cd-fee-part { flex-direction: row; justify-content: space-between; gap: 12px; }
  .cd-fee-part > :last-child { text-align: right; }
}

/* round status: open is the only one still moving, so it's the only one inked */
.cn-feed-row .chip[class*="cd-status-"] {
  padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 18px;
  background: var(--surface-2, rgba(0,0,0,.05)); color: var(--c-secondary, #666);
}
.cn-feed-row .cd-status-open { background: color-mix(in oklab, var(--positive, #1a8f4c) 14%, transparent); color: var(--positive, #1a8f4c); }
.cd-retry { align-self: center; margin-top: 4px; }
.pf-coin-link { text-decoration: none; color: inherit; }
.pf-coin-link:hover { text-decoration: underline; }

/* == embed.css == */
/* Indices — embed shell (route /embed). Class prefix: em-
   The wizard alone inside a host iframe. No chrome, so the shell offsets go to
   zero and the gutter tightens. The iframe IS the viewport, so plain media
   queries do the size adapting; the wizard's own 959.98/479.98 breakpoints
   carry the narrow widths — this sheet only handles the frame paddings and the
   short-height case. Loaded last in app.css so its overrides win.

   Two embed-only departures from the site: the field is white, not warm paper
   (ink type on the paper tint reads harsh inside a host page, and white is
   neutral against any host), and heads are left-aligned — centered heads float
   inside an arbitrary-width frame instead of anchoring to a column edge. */

:root.em-root {
  --topbar-h: 0px;
  --bottomnav-h: 0px;
  --gutter: clamp(12px, 3vw, 32px);
  --pad-head-top: clamp(12px, 2.5vh, 28px);
  --pad-head-bottom: 16px;
  --pad-sec-top: 24px;
  --color-bg-canvas: #ffffff;
  --color-bg-surface: #ffffff;
}
.em-root body { background: var(--color-bg-canvas); }

.em-wrap .page { padding-top: 0; padding-bottom: var(--space-24); }
.em-wrap .wz-head { align-items: flex-start; text-align: left; gap: var(--space-8); }
.em-wrap .wz-title { font-size: clamp(20px, 4.5vw, 30px); }
.em-wrap .wz-col { gap: var(--space-12); }
.em-wrap .wz-section-head { align-items: flex-start; text-align: left; }
.em-wrap .wz-section-head .t-body { max-width: none; }
.em-wrap .wz-review-note { text-align: left; margin: 0; max-width: none; }

/* white-on-white: the cards keep their hairline but drop onto the elevated tint
   so the column still reads as slabs, not floating rules */
.em-wrap .wz-section, .em-wrap .wz-rail-card { background: var(--color-bg-subtle); }

/* short iframes (the 400px-tall case): compact section padding so the column
   scrolls inside the frame instead of one screenful of whitespace */
@media (max-height: 519.98px) {
  :root.em-root { --pad-head-top: 10px; --pad-head-bottom: 8px; }
  .em-wrap .wz-title { font-size: 18px; }
  .em-wrap .wz-section { padding: 14px 14px 18px; gap: var(--space-16); }
  .em-wrap .wz-section-head { gap: 4px; }
}