@hfunlabs/hypurr-connect 0.1.15 → 0.1.18

package/src/styles.css

@@ -1 +1 @@
-.hypurr-connect .btn-raised{background-color:#0d1219;background-image:linear-gradient(180deg,hsla(0,0%,100%,.03),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.1),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px #262a30;color:#aab1c1;transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised:hover:not(:disabled){background-color:#15171a;background-image:linear-gradient(180deg,hsla(0,0%,100%,.04),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.14),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 0 1px #444548;color:#d1d5db}.hypurr-connect .btn-raised-active{background-color:#1e2124;background-image:linear-gradient(180deg,hsla(0,0%,100%,.05),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.18),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 0 0 1px #4b4d50,0 1px 2px rgba(0,0,0,.5);color:#fff}.hypurr-connect .btn-raised-active,.hypurr-connect .btn-raised-disabled{transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised-disabled{background-color:#0d1219;background-image:linear-gradient(180deg,hsla(0,0%,100%,.02),transparent);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.05),inset 0 -1px 0 rgba(0,0,0,.25),inset 0 0 0 1px #1c2026;color:#7d8597;cursor:not-allowed}.hypurr-connect .\!visible{visibility:visible!important}.hypurr-connect .visible{visibility:visible}.hypurr-connect .fixed{position:fixed}.hypurr-connect .absolute{position:absolute}.hypurr-connect .relative{position:relative}.hypurr-connect .inset-0{inset:0}.hypurr-connect .right-2{right:.5rem}.hypurr-connect .right-6{right:1.5rem}.hypurr-connect .top-1\/2{top:50%}.hypurr-connect .z-\[100\]{z-index:100}.hypurr-connect .z-\[101\]{z-index:101}.hypurr-connect .z-\[110\]{z-index:110}.hypurr-connect .z-\[111\]{z-index:111}.hypurr-connect .mb-1\.5{margin-bottom:.375rem}.hypurr-connect .mb-2{margin-bottom:.5rem}.hypurr-connect .mt-0\.5{margin-top:.125rem}.hypurr-connect .mt-1{margin-top:.25rem}.hypurr-connect .mt-1\.5{margin-top:.375rem}.hypurr-connect .block{display:block}.hypurr-connect .inline-block{display:inline-block}.hypurr-connect .inline{display:inline}.hypurr-connect .flex{display:flex}.hypurr-connect .inline-flex{display:inline-flex}.hypurr-connect .grid{display:grid}.hypurr-connect .contents{display:contents}.hypurr-connect .hidden{display:none}.hypurr-connect .h-8{height:2rem}.hypurr-connect .w-8{width:2rem}.hypurr-connect .w-full{width:100%}.hypurr-connect .min-w-0{min-width:0}.hypurr-connect .max-w-md{max-width:28rem}.hypurr-connect .flex-1{flex:1 1 0%}.hypurr-connect .flex-shrink-0{flex-shrink:0}.hypurr-connect .-translate-y-1\/2{--tw-translate-y:-50%}.hypurr-connect .-translate-y-1\/2,.hypurr-connect .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hypurr-connect .cursor-not-allowed{cursor:not-allowed}.hypurr-connect .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.hypurr-connect .items-start{align-items:flex-start}.hypurr-connect .items-center{align-items:center}.hypurr-connect .justify-center{justify-content:center}.hypurr-connect .justify-between{justify-content:space-between}.hypurr-connect .gap-1\.5{gap:.375rem}.hypurr-connect .gap-2{gap:.5rem}.hypurr-connect .gap-3{gap:.75rem}.hypurr-connect :is(.space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-3>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-4>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.hypurr-connect .overflow-hidden{overflow:hidden}.hypurr-connect .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hypurr-connect .break-all{word-break:break-all}.hypurr-connect .rounded{border-radius:.25rem}.hypurr-connect .rounded-lg{border-radius:.5rem}.hypurr-connect .rounded-md{border-radius:.375rem}.hypurr-connect .border{border-width:1px}.hypurr-connect .border-b{border-bottom-width:1px}.hypurr-connect .border-amber-500\/25{border-color:rgba(245,158,11,.25)}.hypurr-connect .border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.hypurr-connect .border-purple-500{--tw-border-opacity:1;border-color:rgb(185 125 241/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd{--tw-border-opacity:1;border-color:rgb(38 42 48/var(--tw-border-opacity,1))}.hypurr-connect .border-trade-down\/20{border-color:hsla(0,91%,71%,.2)}.hypurr-connect .border-trade-down\/50{border-color:hsla(0,91%,71%,.5)}.hypurr-connect .border-white\/\[0\.06\]{border-color:hsla(0,0%,100%,.06)}.hypurr-connect .border-white\/\[0\.08\]{border-color:hsla(0,0%,100%,.08)}.hypurr-connect .bg-amber-500\/\[0\.08\]{background-color:rgba(245,158,11,.08)}.hypurr-connect .bg-black\/70{background-color:rgba(0,0,0,.7)}.hypurr-connect .bg-surface-btn\/90{background-color:rgba(13,18,25,.9)}.hypurr-connect .bg-surface-modal{--tw-bg-opacity:1;background-color:rgb(14 18 24/var(--tw-bg-opacity,1))}.hypurr-connect .bg-trade-down\/\[0\.08\]{background-color:hsla(0,91%,71%,.08)}.hypurr-connect .bg-transparent{background-color:transparent}.hypurr-connect .bg-white\/\[0\.03\]{background-color:hsla(0,0%,100%,.03)}.hypurr-connect .bg-white\/\[0\.06\]{background-color:hsla(0,0%,100%,.06)}.hypurr-connect .p-1\.5{padding:.375rem}.hypurr-connect .p-3{padding:.75rem}.hypurr-connect .p-4{padding:1rem}.hypurr-connect .px-3{padding-left:.75rem;padding-right:.75rem}.hypurr-connect .px-6{padding-left:1.5rem;padding-right:1.5rem}.hypurr-connect .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.hypurr-connect .py-2{padding-top:.5rem;padding-bottom:.5rem}.hypurr-connect .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.hypurr-connect .py-5{padding-top:1.25rem}.hypurr-connect .pb-5,.hypurr-connect .py-5{padding-bottom:1.25rem}.hypurr-connect .pb-6{padding-bottom:1.5rem}.hypurr-connect .pr-11{padding-right:2.75rem}.hypurr-connect .pt-5{padding-top:1.25rem}.hypurr-connect .pt-6{padding-top:1.5rem}.hypurr-connect .font-mono{font-family:Google Sans Code,Roboto Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.hypurr-connect .font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.hypurr-connect .text-base{font-size:12.5px;line-height:1rem}.hypurr-connect .text-lg{font-size:14px;line-height:1.25rem}.hypurr-connect .font-medium{font-weight:500}.hypurr-connect .font-semibold{font-weight:600}.hypurr-connect .uppercase{text-transform:uppercase}.hypurr-connect .tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.hypurr-connect .tracking-\[0\.1em\]{letter-spacing:.1em}.hypurr-connect .text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.hypurr-connect .text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.hypurr-connect .text-gray-400{--tw-text-opacity:1;color:rgb(170 177 193/var(--tw-text-opacity,1))}.hypurr-connect .text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.hypurr-connect .text-gray-600{--tw-text-opacity:1;color:rgb(125 133 151/var(--tw-text-opacity,1))}.hypurr-connect .text-purple-400{--tw-text-opacity:1;color:rgb(216 180 254/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-down{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-up{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.hypurr-connect .text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hypurr-connect .placeholder-gray-600::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(125 133 151/var(--tw-placeholder-opacity,1))}.hypurr-connect .placeholder-gray-600::placeholder{--tw-placeholder-opacity:1;color:rgb(125 133 151/var(--tw-placeholder-opacity,1))}.hypurr-connect .shadow-modal{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.6);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hypurr-connect .outline{outline-style:solid}.hypurr-connect .blur{--tw-blur:blur(8px)}.hypurr-connect .blur,.hypurr-connect .drop-shadow{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)}.hypurr-connect .drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.hypurr-connect .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)}.hypurr-connect .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.hypurr-connect .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect .hover\:bg-purple-500\/10:hover{background-color:rgba(185,125,241,.1)}.hypurr-connect .hover\:text-gray-300:hover{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.hypurr-connect .hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hypurr-connect .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.hypurr-connect .disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.hypurr-connect .disabled\:opacity-40:disabled{opacity:.4}.hypurr-connect .disabled\:opacity-50:disabled{opacity:.5}
+.hypurr-connect .btn-raised{background-color:rgb(var(--btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.03),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.1),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgb(var(--btn-ring));color:rgb(var(--btn-fg));transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised:hover:not(:disabled){background-color:rgb(var(--surface-btn-hover));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.04),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.14),inset 0 -1px 0 rgba(0,0,0,.4),inset 0 0 0 1px rgb(var(--surface-bd-hover));color:rgb(var(--content-tertiary))}.hypurr-connect .btn-raised-active{background-color:rgb(var(--surface-btn-active));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.05),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.18),inset 0 -1px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgb(var(--surface-bd-active)),0 1px 2px rgba(0,0,0,.5);color:rgb(var(--content))}.hypurr-connect .btn-raised-accent,.hypurr-connect .btn-raised-active{transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.hypurr-connect .btn-raised-accent{background-color:rgb(var(--accent-btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.03),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.1),inset 0 -1px 0 rgb(var(--accent-btn-inset)/.75);color:rgb(var(--accent-btn-fg))}.hypurr-connect .btn-raised-accent:hover:not(:disabled){background-color:rgb(var(--accent-btn-bg-hover));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.04),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.14),inset 0 -1px 0 rgb(var(--accent-btn-inset)/.8);color:rgb(var(--accent-btn-fg-hover))}.hypurr-connect .btn-raised-disabled{background-color:rgb(var(--btn-bg));background-image:linear-gradient(to bottom,rgb(var(--btn-bevel)/.02),transparent);box-shadow:inset 0 1px 0 rgb(var(--btn-bevel)/.05),inset 0 -1px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgb(var(--btn-ring)/.6);color:rgb(var(--content-faint));cursor:not-allowed;transition:background-color .15s,color .15s,background-image .15s,box-shadow .15s}.light .hypurr-connect .btn-raised{background-image:linear-gradient(to bottom,#fff,rgb(var(--surface-btn)));box-shadow:0 1px 2px rgba(15,23,42,.08),0 1px 1px rgba(15,23,42,.04),inset 0 0 0 1px rgb(var(--surface-bd))}.light .hypurr-connect .btn-raised:hover:not(:disabled){background-image:linear-gradient(to bottom,#fff,rgb(var(--surface-btn-hover)));box-shadow:0 2px 6px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.06),inset 0 0 0 1px rgb(var(--surface-bd-hover))}.light .hypurr-connect .btn-raised-active{background-image:none;background-color:rgb(var(--surface-btn-active));box-shadow:inset 0 1px 2px rgba(15,23,42,.12),inset 0 0 0 1px rgb(var(--surface-bd-active))}.light .hypurr-connect .btn-raised-disabled{background-image:none;box-shadow:inset 0 0 0 1px rgb(var(--surface-bd))}.light .hypurr-connect .btn-raised-accent{box-shadow:0 1px 2px rgba(124,58,237,.18),inset 0 0 0 1px rgba(124,58,237,.22)}.light .hypurr-connect .btn-raised-accent:hover:not(:disabled){box-shadow:0 2px 6px rgba(124,58,237,.24),inset 0 0 0 1px rgba(124,58,237,.28)}.hypurr-connect .input{background-color:rgb(var(--input-bg));box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgb(var(--btn-bevel)/.05),inset 0 0 0 1px rgb(var(--input-ring));color:rgb(var(--content));transition:box-shadow .15s,background-color .15s}.hypurr-connect .input::-moz-placeholder{color:rgb(var(--content-faint));opacity:1}.hypurr-connect .input::placeholder{color:rgb(var(--content-faint));opacity:1}.hypurr-connect .input:focus,.hypurr-connect .input:focus-within{background-color:rgb(var(--input-bg-focus));box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgb(var(--btn-bevel)/.06),inset 0 0 0 1px rgb(var(--input-ring-focus))}.hypurr-connect .input-error,.hypurr-connect .input-error:focus,.hypurr-connect .input-error:focus-within{box-shadow:inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgb(var(--btn-bevel)/.05),inset 0 0 0 1px hsla(0,91%,71%,.7)}.light .hypurr-connect .input{box-shadow:inset 0 2px 3px rgba(15,23,42,.08),inset 0 0 0 1px rgb(var(--input-ring))}.light .hypurr-connect .input:focus,.light .hypurr-connect .input:focus-within{box-shadow:inset 0 2px 4px rgba(15,23,42,.1),inset 0 0 0 1px rgb(var(--input-ring-focus))}.light .hypurr-connect .input-error,.light .hypurr-connect .input-error:focus,.light .hypurr-connect .input-error:focus-within{box-shadow:inset 0 2px 3px rgba(15,23,42,.08),inset 0 0 0 1px rgba(220,38,38,.7)}.hypurr-connect .\!visible{visibility:visible!important}.hypurr-connect .visible{visibility:visible}.hypurr-connect .fixed{position:fixed}.hypurr-connect .absolute{position:absolute}.hypurr-connect .relative{position:relative}.hypurr-connect .inset-0{inset:0}.hypurr-connect .right-2{right:.5rem}.hypurr-connect .right-6{right:1.5rem}.hypurr-connect .top-1\/2{top:50%}.hypurr-connect .z-\[100\]{z-index:100}.hypurr-connect .z-\[101\]{z-index:101}.hypurr-connect .z-\[110\]{z-index:110}.hypurr-connect .z-\[111\]{z-index:111}.hypurr-connect .mb-1\.5{margin-bottom:.375rem}.hypurr-connect .mb-2{margin-bottom:.5rem}.hypurr-connect .mt-0\.5{margin-top:.125rem}.hypurr-connect .mt-1{margin-top:.25rem}.hypurr-connect .mt-1\.5{margin-top:.375rem}.hypurr-connect .block{display:block}.hypurr-connect .inline-block{display:inline-block}.hypurr-connect .inline{display:inline}.hypurr-connect .flex{display:flex}.hypurr-connect .inline-flex{display:inline-flex}.hypurr-connect .grid{display:grid}.hypurr-connect .contents{display:contents}.hypurr-connect .hidden{display:none}.hypurr-connect .h-8{height:2rem}.hypurr-connect .w-8{width:2rem}.hypurr-connect .w-full{width:100%}.hypurr-connect .min-w-0{min-width:0}.hypurr-connect .max-w-md{max-width:28rem}.hypurr-connect .flex-1{flex:1 1 0%}.hypurr-connect .flex-shrink-0{flex-shrink:0}.hypurr-connect .-translate-y-1\/2{--tw-translate-y:-50%}.hypurr-connect .-translate-y-1\/2,.hypurr-connect .transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hypurr-connect .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.hypurr-connect .items-start{align-items:flex-start}.hypurr-connect .items-center{align-items:center}.hypurr-connect .justify-center{justify-content:center}.hypurr-connect .justify-between{justify-content:space-between}.hypurr-connect .gap-1\.5{gap:.375rem}.hypurr-connect .gap-2{gap:.5rem}.hypurr-connect .gap-3{gap:.75rem}.hypurr-connect :is(.space-y-2>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-3>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.hypurr-connect :is(.space-y-4>:not([hidden])~:not([hidden])){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.hypurr-connect .overflow-hidden{overflow:hidden}.hypurr-connect .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hypurr-connect .break-all{word-break:break-all}.hypurr-connect .rounded{border-radius:.25rem}.hypurr-connect .rounded-lg{border-radius:.5rem}.hypurr-connect .rounded-md{border-radius:.375rem}.hypurr-connect .border{border-width:1px}.hypurr-connect .border-b{border-bottom-width:1px}.hypurr-connect .border-amber-500\/25{border-color:rgb(var(--amber-500)/.25)}.hypurr-connect .border-line{--tw-border-opacity:1;border-color:rgb(var(--line)/var(--tw-border-opacity,1))}.hypurr-connect .border-line-strong{--tw-border-opacity:1;border-color:rgb(var(--line-strong)/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd{--tw-border-opacity:1;border-color:rgb(var(--surface-bd)/var(--tw-border-opacity,1))}.hypurr-connect .border-surface-bd-active{--tw-border-opacity:1;border-color:rgb(var(--surface-bd-active)/var(--tw-border-opacity,1))}.hypurr-connect .border-trade-down\/20{border-color:rgb(var(--trade-down)/.2)}.hypurr-connect .bg-amber-500\/\[0\.08\]{background-color:rgb(var(--amber-500)/.08)}.hypurr-connect .bg-overlay\/70{background-color:rgb(var(--overlay)/.7)}.hypurr-connect .bg-surface-btn{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-btn-active{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-active)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-btn-hover{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-surface-modal{--tw-bg-opacity:1;background-color:rgb(var(--surface-modal)/var(--tw-bg-opacity,1))}.hypurr-connect .bg-trade-down\/\[0\.08\]{background-color:rgb(var(--trade-down)/.08)}.hypurr-connect .p-1\.5{padding:.375rem}.hypurr-connect .p-3{padding:.75rem}.hypurr-connect .p-4{padding:1rem}.hypurr-connect .px-2{padding-left:.5rem;padding-right:.5rem}.hypurr-connect .px-3{padding-left:.75rem;padding-right:.75rem}.hypurr-connect .px-6{padding-left:1.5rem;padding-right:1.5rem}.hypurr-connect .py-1{padding-top:.25rem;padding-bottom:.25rem}.hypurr-connect .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.hypurr-connect .py-2{padding-top:.5rem;padding-bottom:.5rem}.hypurr-connect .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.hypurr-connect .py-5{padding-top:1.25rem}.hypurr-connect .pb-5,.hypurr-connect .py-5{padding-bottom:1.25rem}.hypurr-connect .pb-6{padding-bottom:1.5rem}.hypurr-connect .pr-11{padding-right:2.75rem}.hypurr-connect .pt-5{padding-top:1.25rem}.hypurr-connect .pt-6{padding-top:1.5rem}.hypurr-connect .font-mono{font-family:Google Sans Code,Roboto Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.hypurr-connect .font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.hypurr-connect .text-base{font-size:12.5px;line-height:1rem}.hypurr-connect .text-lg{font-size:14px;line-height:1.25rem}.hypurr-connect .font-medium{font-weight:500}.hypurr-connect .uppercase{text-transform:uppercase}.hypurr-connect .tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.hypurr-connect .tracking-\[0\.1em\]{letter-spacing:.1em}.hypurr-connect .text-amber-200{--tw-text-opacity:1;color:rgb(var(--amber-200)/var(--tw-text-opacity,1))}.hypurr-connect .text-amber-400{--tw-text-opacity:1;color:rgb(var(--amber-400)/var(--tw-text-opacity,1))}.hypurr-connect .text-content{--tw-text-opacity:1;color:rgb(var(--content)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-faint{--tw-text-opacity:1;color:rgb(var(--content-faint)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-muted{--tw-text-opacity:1;color:rgb(var(--content-muted)/var(--tw-text-opacity,1))}.hypurr-connect .text-content-subtle{--tw-text-opacity:1;color:rgb(var(--content-subtle)/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-down{--tw-text-opacity:1;color:rgb(var(--trade-down)/var(--tw-text-opacity,1))}.hypurr-connect .text-trade-up{--tw-text-opacity:1;color:rgb(var(--trade-up)/var(--tw-text-opacity,1))}.hypurr-connect .placeholder-content-faint::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(var(--content-faint)/var(--tw-placeholder-opacity,1))}.hypurr-connect .placeholder-content-faint::placeholder{--tw-placeholder-opacity:1;color:rgb(var(--content-faint)/var(--tw-placeholder-opacity,1))}.hypurr-connect .shadow-modal{--tw-shadow:var(--shadow-modal);--tw-shadow-colored:var(--shadow-modal);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hypurr-connect .outline{outline-style:solid}.hypurr-connect .blur{--tw-blur:blur(8px)}.hypurr-connect .blur,.hypurr-connect .drop-shadow{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)}.hypurr-connect .drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgba(0,0,0,.1)) drop-shadow(0 1px 1px rgba(0,0,0,.06))}.hypurr-connect .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)}.hypurr-connect .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.hypurr-connect .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hypurr-connect .transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--surface-btn:13 18 25;--surface-btn-hover:21 23 26;--surface-btn-active:30 33 36;--surface-bd:38 42 48;--surface-bd-hover:68 69 72;--surface-bd-active:75 77 80;--surface-modal:14 18 24;--surface-dropdown:17 24 32;--surface-base:11 14 17;--surface-deep:9 11 14;--surface-raised:17 24 39;--surface-elevated:31 41 55;--surface-inset:55 65 81;--surface-inverse:255 255 255;--content:243 244 246;--content-secondary:229 231 235;--content-tertiary:209 213 219;--content-muted:170 177 193;--content-subtle:125 133 151;--content-faint:107 114 128;--content-disabled:55 65 81;--line:31 41 55;--line-strong:55 65 81;--line-subtle:17 24 39;--line-inverse:255 255 255;--overlay:0 0 0;--accent:168 85 247;--trade-up:52 211 153;--trade-down:248 113 113;--purple-400:216 180 254;--purple-500:185 125 241;--blue-500:90 153 255;--green-400:83 203 127;--amber-200:253 230 138;--amber-400:251 191 36;--amber-500:245 158 11;--btn-bg:13 18 25;--btn-fg:170 177 193;--btn-ring:38 42 48;--btn-bevel:255 255 255;--accent-btn-bg:37 28 57;--accent-btn-bg-hover:52 35 80;--accent-btn-fg:216 180 254;--accent-btn-fg-hover:233 213 255;--accent-btn-inset:15 5 35;--input-bg:18 23 31;--input-bg-focus:26 33 44;--input-ring:45 53 64;--input-ring-focus:59 69 82;--shadow-modal:0 25px 50px -12px rgba(0,0,0,.6);--shadow-dropdown:0 8px 40px rgba(0,0,0,.85)}.light{--surface-btn:244 246 249;--surface-btn-hover:236 239 243;--surface-btn-active:226 230 236;--surface-bd:214 220 228;--surface-bd-hover:194 201 211;--surface-bd-active:168 176 191;--surface-modal:255 255 255;--surface-dropdown:255 255 255;--surface-base:245 244 249;--surface-deep:233 236 242;--surface-raised:255 255 255;--surface-elevated:228 231 237;--surface-inset:225 229 235;--surface-inverse:17 24 39;--content:17 24 39;--content-secondary:31 41 55;--content-tertiary:55 65 81;--content-muted:91 101 115;--content-subtle:107 114 128;--content-faint:148 163 184;--content-disabled:179 185 196;--line:222 226 234;--line-strong:205 211 220;--line-subtle:238 240 243;--line-inverse:17 24 39;--overlay:0 0 0;--accent:147 51 234;--trade-up:5 150 105;--trade-down:220 38 38;--purple-400:124 58 237;--purple-500:109 40 217;--blue-500:37 99 235;--green-400:22 163 74;--amber-200:161 98 7;--amber-400:180 83 9;--amber-500:180 83 9;--btn-bg:255 255 255;--btn-fg:71 85 105;--btn-ring:217 221 228;--btn-bevel:15 23 42;--accent-btn-bg:243 232 255;--accent-btn-bg-hover:233 213 255;--accent-btn-fg:109 40 217;--accent-btn-fg-hover:88 28 135;--accent-btn-inset:147 51 234;--input-bg:238 240 246;--input-bg-focus:230 232 240;--input-ring:200 206 218;--input-ring-focus:168 175 192;--shadow-modal:0 16px 40px -12px rgba(15,23,42,.24),0 4px 12px -4px rgba(15,23,42,.12);--shadow-dropdown:0 12px 28px -8px rgba(15,23,42,.2),0 2px 8px -2px rgba(15,23,42,.1)}.hypurr-connect .hover\:border-surface-bd-hover:hover{--tw-border-opacity:1;border-color:rgb(var(--surface-bd-hover)/var(--tw-border-opacity,1))}.hypurr-connect .hover\:bg-surface-btn-hover:hover{--tw-bg-opacity:1;background-color:rgb(var(--surface-btn-hover)/var(--tw-bg-opacity,1))}.hypurr-connect .hover\:text-content:hover{--tw-text-opacity:1;color:rgb(var(--content)/var(--tw-text-opacity,1))}.hypurr-connect .hover\:text-content-tertiary:hover{--tw-text-opacity:1;color:rgb(var(--content-tertiary)/var(--tw-text-opacity,1))}.hypurr-connect .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.hypurr-connect .disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.hypurr-connect .disabled\:opacity-40:disabled{opacity:.4}.hypurr-connect .disabled\:opacity-50:disabled{opacity:.5}

package/src/tailwind.css

@@ -1,72 +1,240 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ============================================================================
+   Theme tokens. Values are space-separated RGB channels so Tailwind opacity
+   modifiers (e.g. bg-surface-modal/70) work. `:root` is the default (dark)
+   theme; `.light` on <html> (set by the host app) overrides it.
+
+   Mirrors the alpha-trade host app so wallet/auth modals follow the host's
+   theme automatically.
+   ========================================================================== */
+:root {
+  /* Surfaces */
+  --surface-btn: 13 18 25;
+  --surface-btn-hover: 21 23 26;
+  --surface-btn-active: 30 33 36;
+  --surface-bd: 38 42 48;
+  --surface-bd-hover: 68 69 72;
+  --surface-bd-active: 75 77 80;
+  --surface-modal: 14 18 24;
+  --surface-dropdown: 17 24 32;
+  --surface-base: 11 14 17;
+  --surface-deep: 9 11 14;
+  --surface-raised: 17 24 39;
+  --surface-elevated: 31 41 55;
+  --surface-inset: 55 65 81;
+  --surface-inverse: 255 255 255;
+
+  /* Foreground */
+  --content: 243 244 246;
+  --content-secondary: 229 231 235;
+  --content-tertiary: 209 213 219;
+  --content-muted: 170 177 193;
+  --content-subtle: 125 133 151;
+  --content-faint: 107 114 128;
+  --content-disabled: 55 65 81;
+
+  /* Borders */
+  --line: 31 41 55;
+  --line-strong: 55 65 81;
+  --line-subtle: 17 24 39;
+  --line-inverse: 255 255 255;
+
+  /* Scrims */
+  --overlay: 0 0 0;
+
+  /* Brand / semantic accents */
+  --accent: 168 85 247;
+  --trade-up: 52 211 153;
+  --trade-down: 248 113 113;
+  --purple-400: 216 180 254;
+  --purple-500: 185 125 241;
+  --blue-500: 90 153 255;
+  --green-400: 83 203 127;
+  --amber-200: 253 230 138;
+  --amber-400: 251 191 36;
+  --amber-500: 245 158 11;
+
+  /* Raised-button surfaces (mirror alpha-trade) */
+  --btn-bg: 13 18 25;
+  --btn-fg: 170 177 193;
+  --btn-ring: 38 42 48;
+  --btn-bevel: 255 255 255;
+  --accent-btn-bg: 37 28 57;
+  --accent-btn-bg-hover: 52 35 80;
+  --accent-btn-fg: 216 180 254;
+  --accent-btn-fg-hover: 233 213 255;
+  --accent-btn-inset: 15 5 35;
+
+  /* Recessed input channel */
+  --input-bg: 18 23 31;
+  --input-bg-focus: 26 33 44;
+  --input-ring: 45 53 64;
+  --input-ring-focus: 59 69 82;
+
+  /* Elevation shadows */
+  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+  --shadow-dropdown: 0 8px 40px rgba(0, 0, 0, 0.85);
+}
+
+.light {
+  --surface-btn: 244 246 249;
+  --surface-btn-hover: 236 239 243;
+  --surface-btn-active: 226 230 236;
+  --surface-bd: 214 220 228;
+  --surface-bd-hover: 194 201 211;
+  --surface-bd-active: 168 176 191;
+  --surface-modal: 255 255 255;
+  --surface-dropdown: 255 255 255;
+  --surface-base: 245 244 249;
+  --surface-deep: 233 236 242;
+  --surface-raised: 255 255 255;
+  --surface-elevated: 228 231 237;
+  --surface-inset: 225 229 235;
+  --surface-inverse: 17 24 39;
+
+  --content: 17 24 39;
+  --content-secondary: 31 41 55;
+  --content-tertiary: 55 65 81;
+  --content-muted: 91 101 115;
+  --content-subtle: 107 114 128;
+  --content-faint: 148 163 184;
+  --content-disabled: 179 185 196;
+
+  --line: 222 226 234;
+  --line-strong: 205 211 220;
+  --line-subtle: 238 240 243;
+  --line-inverse: 17 24 39;
+
+  --overlay: 0 0 0;
+
+  --accent: 147 51 234;
+  --trade-up: 5 150 105;
+  --trade-down: 220 38 38;
+  --purple-400: 124 58 237;
+  --purple-500: 109 40 217;
+  --blue-500: 37 99 235;
+  --green-400: 22 163 74;
+  --amber-200: 161 98 7;
+  --amber-400: 180 83 9;
+  --amber-500: 180 83 9;
+
+  --btn-bg: 255 255 255;
+  --btn-fg: 71 85 105;
+  --btn-ring: 217 221 228;
+  --btn-bevel: 15 23 42;
+  --accent-btn-bg: 243 232 255;
+  --accent-btn-bg-hover: 233 213 255;
+  --accent-btn-fg: 109 40 217;
+  --accent-btn-fg-hover: 88 28 135;
+  --accent-btn-inset: 147 51 234;
+
+  --input-bg: 238 240 246;
+  --input-bg-focus: 230 232 240;
+  --input-ring: 200 206 218;
+  --input-ring-focus: 168 175 192;
+
+  --shadow-modal:
+    0 16px 40px -12px rgba(15, 23, 42, 0.24),
+    0 4px 12px -4px rgba(15, 23, 42, 0.12);
+  --shadow-dropdown:
+    0 12px 28px -8px rgba(15, 23, 42, 0.2), 0 2px 8px -2px rgba(15, 23, 42, 0.1);
+}
+
 @layer components {
+  /* ===== Raised buttons — theme-aware via CSS variables ===== */
   .hypurr-connect .btn-raised {
-    background-color: #0d1219;
+    background-color: rgb(var(--btn-bg));
     background-image: linear-gradient(
       to bottom,
-      rgba(255, 255, 255, 0.03),
+      rgb(var(--btn-bevel) / 0.03),
       transparent
     );
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      inset 0 1px 0 rgb(var(--btn-bevel) / 0.1),
       inset 0 -1px 0 rgba(0, 0, 0, 0.35),
-      inset 0 0 0 1px #262a30;
-    color: #aab1c1;
+      inset 0 0 0 1px rgb(var(--btn-ring));
+    color: rgb(var(--btn-fg));
     transition:
       background-color 150ms,
       color 150ms,
       background-image 150ms,
       box-shadow 150ms;
   }
-
   .hypurr-connect .btn-raised:hover:not(:disabled) {
-    background-color: #15171a;
+    background-color: rgb(var(--surface-btn-hover));
     background-image: linear-gradient(
       to bottom,
-      rgba(255, 255, 255, 0.04),
+      rgb(var(--btn-bevel) / 0.04),
       transparent
     );
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.14),
+      inset 0 1px 0 rgb(var(--btn-bevel) / 0.14),
       inset 0 -1px 0 rgba(0, 0, 0, 0.4),
-      inset 0 0 0 1px #444548;
-    color: #d1d5db;
+      inset 0 0 0 1px rgb(var(--surface-bd-hover));
+    color: rgb(var(--content-tertiary));
   }
-
   .hypurr-connect .btn-raised-active {
-    background-color: #1e2124;
+    background-color: rgb(var(--surface-btn-active));
     background-image: linear-gradient(
       to bottom,
-      rgba(255, 255, 255, 0.05),
+      rgb(var(--btn-bevel) / 0.05),
       transparent
     );
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.18),
+      inset 0 1px 0 rgb(var(--btn-bevel) / 0.18),
       inset 0 -1px 0 rgba(0, 0, 0, 0.45),
-      inset 0 0 0 1px #4b4d50,
+      inset 0 0 0 1px rgb(var(--surface-bd-active)),
       0 1px 2px rgba(0, 0, 0, 0.5);
-    color: #ffffff;
+    color: rgb(var(--content));
     transition:
       background-color 150ms,
       color 150ms,
       background-image 150ms,
       box-shadow 150ms;
   }
-
+  .hypurr-connect .btn-raised-accent {
+    background-color: rgb(var(--accent-btn-bg));
+    background-image: linear-gradient(
+      to bottom,
+      rgb(var(--btn-bevel) / 0.03),
+      transparent
+    );
+    box-shadow:
+      inset 0 1px 0 rgb(var(--btn-bevel) / 0.1),
+      inset 0 -1px 0 rgb(var(--accent-btn-inset) / 0.75);
+    color: rgb(var(--accent-btn-fg));
+    transition:
+      background-color 150ms,
+      color 150ms,
+      background-image 150ms,
+      box-shadow 150ms;
+  }
+  .hypurr-connect .btn-raised-accent:hover:not(:disabled) {
+    background-color: rgb(var(--accent-btn-bg-hover));
+    background-image: linear-gradient(
+      to bottom,
+      rgb(var(--btn-bevel) / 0.04),
+      transparent
+    );
+    box-shadow:
+      inset 0 1px 0 rgb(var(--btn-bevel) / 0.14),
+      inset 0 -1px 0 rgb(var(--accent-btn-inset) / 0.8);
+    color: rgb(var(--accent-btn-fg-hover));
+  }
   .hypurr-connect .btn-raised-disabled {
-    background-color: #0d1219;
+    background-color: rgb(var(--btn-bg));
     background-image: linear-gradient(
       to bottom,
-      rgba(255, 255, 255, 0.02),
+      rgb(var(--btn-bevel) / 0.02),
       transparent
     );
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.05),
+      inset 0 1px 0 rgb(var(--btn-bevel) / 0.05),
       inset 0 -1px 0 rgba(0, 0, 0, 0.25),
-      inset 0 0 0 1px #1c2026;
-    color: #7d8597;
+      inset 0 0 0 1px rgb(var(--btn-ring) / 0.6);
+    color: rgb(var(--content-faint));
     cursor: not-allowed;
     transition:
       background-color 150ms,
@@ -74,4 +242,102 @@
       background-image 150ms,
       box-shadow 150ms;
   }
+
+  /* Light theme: raised gets real elevation instead of inset bevel. */
+  .light .hypurr-connect .btn-raised {
+    background-image: linear-gradient(
+      to bottom,
+      #ffffff,
+      rgb(var(--surface-btn))
+    );
+    box-shadow:
+      0 1px 2px rgba(15, 23, 42, 0.08),
+      0 1px 1px rgba(15, 23, 42, 0.04),
+      inset 0 0 0 1px rgb(var(--surface-bd));
+  }
+  .light .hypurr-connect .btn-raised:hover:not(:disabled) {
+    background-image: linear-gradient(
+      to bottom,
+      #ffffff,
+      rgb(var(--surface-btn-hover))
+    );
+    box-shadow:
+      0 2px 6px rgba(15, 23, 42, 0.12),
+      0 1px 2px rgba(15, 23, 42, 0.06),
+      inset 0 0 0 1px rgb(var(--surface-bd-hover));
+  }
+  .light .hypurr-connect .btn-raised-active {
+    background-image: none;
+    background-color: rgb(var(--surface-btn-active));
+    box-shadow:
+      inset 0 1px 2px rgba(15, 23, 42, 0.12),
+      inset 0 0 0 1px rgb(var(--surface-bd-active));
+  }
+  .light .hypurr-connect .btn-raised-disabled {
+    background-image: none;
+    box-shadow: inset 0 0 0 1px rgb(var(--surface-bd));
+  }
+  .light .hypurr-connect .btn-raised-accent {
+    box-shadow:
+      0 1px 2px rgba(124, 58, 237, 0.18),
+      inset 0 0 0 1px rgba(124, 58, 237, 0.22);
+  }
+  .light .hypurr-connect .btn-raised-accent:hover:not(:disabled) {
+    box-shadow:
+      0 2px 6px rgba(124, 58, 237, 0.24),
+      inset 0 0 0 1px rgba(124, 58, 237, 0.28);
+  }
+
+  /* ===== Recessed input channel ===== */
+  .hypurr-connect .input {
+    background-color: rgb(var(--input-bg));
+    box-shadow:
+      inset 0 2px 4px rgba(0, 0, 0, 0.5),
+      inset 0 -1px 0 rgb(var(--btn-bevel) / 0.05),
+      inset 0 0 0 1px rgb(var(--input-ring));
+    color: rgb(var(--content));
+    transition:
+      box-shadow 150ms,
+      background-color 150ms;
+  }
+  .hypurr-connect .input::placeholder {
+    color: rgb(var(--content-faint));
+    opacity: 1;
+  }
+  .hypurr-connect .input:focus,
+  .hypurr-connect .input:focus-within {
+    background-color: rgb(var(--input-bg-focus));
+    box-shadow:
+      inset 0 2px 4px rgba(0, 0, 0, 0.45),
+      inset 0 -1px 0 rgb(var(--btn-bevel) / 0.06),
+      inset 0 0 0 1px rgb(var(--input-ring-focus));
+  }
+  .hypurr-connect .input-error,
+  .hypurr-connect .input-error:focus,
+  .hypurr-connect .input-error:focus-within {
+    box-shadow:
+      inset 0 2px 4px rgba(0, 0, 0, 0.5),
+      inset 0 -1px 0 rgb(var(--btn-bevel) / 0.05),
+      inset 0 0 0 1px rgba(248, 113, 113, 0.7);
+  }
+
+  /* Light theme: softer recessed channel without the heavy dark inset. */
+  .light .hypurr-connect .input {
+    box-shadow:
+      inset 0 2px 3px rgba(15, 23, 42, 0.08),
+      inset 0 0 0 1px rgb(var(--input-ring));
+  }
+  .light .hypurr-connect .input:focus,
+  .light .hypurr-connect .input:focus-within {
+    box-shadow:
+      inset 0 2px 4px rgba(15, 23, 42, 0.1),
+      inset 0 0 0 1px rgb(var(--input-ring-focus));
+  }
+  .light .hypurr-connect .input-error,
+  .light .hypurr-connect .input-error:focus,
+  .light .hypurr-connect .input-error:focus-within {
+    box-shadow:
+      inset 0 2px 3px rgba(15, 23, 42, 0.08),
+      inset 0 0 0 1px rgba(220, 38, 38, 0.7);
+  }
 }

package/src/useIsMobile.ts

@@ -0,0 +1,22 @@
+import { useSyncExternalStore } from "react";
+
+const MOBILE_BREAKPOINT = 640;
+
+const mobileQuery =
+  typeof window !== "undefined"
+    ? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`)
+    : null;
+
+function subscribeMobile(cb: () => void) {
+  mobileQuery?.addEventListener("change", cb);
+  return () => mobileQuery?.removeEventListener("change", cb);
+}
+
+function getSnapshotMobile() {
+  return mobileQuery?.matches ?? false;
+}
+
+/** Tracks whether the viewport is at or below the mobile breakpoint (640px). */
+export function useIsMobile() {
+  return useSyncExternalStore(subscribeMobile, getSnapshotMobile, () => false);
+}