.button, .icon-button { position: relative; overflow: hidden; border-radius: 999px; font-weight: 800; transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.button:not(:disabled):hover, .icon-button:not(:disabled):hover { transform: translateY(-1px); }
.button:not(:disabled):active, .icon-button:not(:disabled):active { transform: translateY(1px) scale(.99); }
.button:disabled, .icon-button:disabled { opacity: .56; filter: saturate(.56); }
.button-primary { color: #160529; background: linear-gradient(105deg, #63f7ff, #77f6c0 30%, #ffe875 58%, #ff91d9); border-color: rgba(255,255,255,.68); box-shadow: 0 9px 25px rgba(89,245,255,.19), 0 8px 28px rgba(255,94,203,.16), inset 0 1px 0 rgba(255,255,255,.82); }
.button-primary::after { position: absolute; inset: -80% -55%; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.68) 50%, transparent 58%); transform: translateX(-60%); transition: transform 480ms ease; content: ""; }
.button-primary:not(:disabled):hover { color: #100321; background: linear-gradient(105deg, #91fbff, #9cf9d0 30%, #fff09a 58%, #ffb3e6); box-shadow: 0 12px 34px rgba(89,245,255,.27), 0 12px 38px rgba(255,94,203,.22); }
.button-primary:not(:disabled):hover::after { transform: translateX(60%); }
.button-secondary { color: #fff; background: linear-gradient(140deg, rgba(49,23,96,.94), rgba(27,13,59,.96)) padding-box, linear-gradient(120deg, rgba(89,245,255,.7), rgba(255,94,203,.58), rgba(169,103,255,.68)) border-box; border-color: transparent; }
.button-secondary:not(:disabled):hover, .button-quiet:not(:disabled):hover, .icon-button:not(:disabled):hover { color: #fff; background-color: rgba(89,245,255,.11); border-color: rgba(89,245,255,.62); box-shadow: 0 0 24px rgba(89,245,255,.12); }
.button-quiet, .icon-button { color: #e6dcf5; background: rgba(34,16,70,.68); border-color: rgba(197,163,255,.28); }
.button-danger { color: #fff; background: linear-gradient(120deg, #b92f70, #ba4a57 54%, #8e335e); border-color: rgba(255,177,190,.54); }
.button-danger:not(:disabled):hover { color: #fff; background: linear-gradient(120deg, #cf3f80, #cd5a67 54%, #a24470); }

.connection-banner { color: #fff; background: linear-gradient(135deg, rgba(64,48,18,.86), rgba(37,22,48,.94)) padding-box, linear-gradient(105deg, rgba(255,230,109,.85), rgba(255,147,100,.65)) border-box; border-color: transparent; box-shadow: var(--shadow-small); }
.connection-banner[data-tone="error"] { background: linear-gradient(135deg, rgba(74,25,49,.9), rgba(37,15,45,.96)) padding-box, linear-gradient(105deg, rgba(255,148,133,.86), rgba(255,94,203,.54)) border-box; }
.connection-banner span { color: var(--ink-soft); }
.page-state { position: relative; overflow: hidden; background: var(--reading) padding-box, var(--prism-soft) border-box; border-color: transparent; box-shadow: var(--shadow); }
.page-state::before { position: absolute; width: 16rem; height: 16rem; top: -8rem; right: -6rem; opacity: .3; background: conic-gradient(from 20deg, #59f5ff, #ff5ecb, #ffe66d, #a967ff, #59f5ff); border-radius: 50%; filter: blur(42px); content: ""; }
.page-state > * { position: relative; z-index: 1; }
.page-state > p:not(.eyebrow) { color: var(--ink-soft); }
.loading-indicator { border-color: rgba(255,255,255,.13); border-top-color: #59f5ff; border-right-color: #ff5ecb; box-shadow: 0 0 25px rgba(89,245,255,.24); }

.product-shell { gap: 1.15rem; }
.card { position: relative; background: var(--reading) padding-box, linear-gradient(135deg, rgba(89,245,255,.55), rgba(255,94,203,.44) 45%, rgba(169,103,255,.58) 72%, rgba(255,230,109,.4)) border-box; border-color: transparent; box-shadow: var(--shadow-small); backdrop-filter: blur(18px) saturate(120%); }
.create-card { isolation: isolate; box-shadow: -12px 12px 36px rgba(89,245,255,.08), 12px 10px 38px rgba(255,94,203,.1), 0 24px 64px rgba(4,1,20,.54); }
.create-card::before { width: min(8rem,38%); height: .38rem; background: var(--prism); box-shadow: 0 0 20px rgba(89,245,255,.24), 0 0 28px rgba(255,94,203,.16); }
.create-card::after { position: absolute; z-index: -1; width: 18rem; height: 18rem; top: -11rem; right: -8rem; opacity: .28; background: conic-gradient(from 10deg, #59f5ff, #ff5ecb, #ffe66d, #a967ff, #59f5ff); border-radius: 50%; filter: blur(40px); animation: prism-card-glow 14s ease-in-out infinite alternate; content: ""; }
@keyframes prism-card-glow { from { transform: scale(.96); opacity: .22; } to { transform: translate(2%,3%) scale(1.06); opacity: .34; } }
.eyebrow, .status-label { color: #59f5ff; text-shadow: 0 0 16px rgba(89,245,255,.27); }
.cost-note, .duration-pill, .count-badge { color: #fff; background: linear-gradient(125deg, rgba(255,94,203,.18), rgba(169,103,255,.22)) padding-box, linear-gradient(120deg, rgba(255,94,203,.72), rgba(255,230,109,.54), rgba(89,245,255,.66)) border-box; border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.09); }
.cost-note { display: inline-flex; align-items: center; gap: .42rem; }