*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); scroll-behavior: smooth; }
body { min-height: 100dvh; margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), select:not(:disabled) { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: rgb(57 220 255 / 28%); }
:focus-visible { outline: 3px solid rgb(57 220 255 / 45%); outline-offset: 3px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.glass-regular, .glass-clear { position: relative; border: 1px solid var(--glass-stroke); background-color: var(--glass-fill); background-image: linear-gradient(140deg, rgb(255 255 255 / 14%), transparent 34%, rgb(54 213 255 / 4%) 70%, rgb(110 92 255 / 8%)); -webkit-backdrop-filter: blur(22px) saturate(145%); backdrop-filter: blur(22px) saturate(145%); box-shadow: var(--glass-shadow); }
.glass-clear { background-color: color-mix(in srgb, var(--surface) 68%, transparent); -webkit-backdrop-filter: blur(15px) saturate(132%); backdrop-filter: blur(15px) saturate(132%); }
[data-reduce-transparency="true"] .glass-regular,
[data-reduce-transparency="true"] .glass-clear { background: var(--surface-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

.btn-primary, .btn-glass, .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; border-radius: 15px; font-weight: 750; transition: transform 150ms var(--ease-liquid), border-color 180ms, background 180ms, filter 180ms; }
.btn-primary { padding: 0 1.15rem; border: 1px solid rgb(255 255 255 / 24%); color: white; background: linear-gradient(135deg, #7968ff, #5f5cf6 44%, #258fdc); box-shadow: 0 12px 30px rgb(74 77 255 / 26%), inset 0 1px 0 rgb(255 255 255 / 35%); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-glass { padding: 0 1rem; border: 1px solid var(--line-strong); color: var(--ink); background: rgb(255 255 255 / 6%); }
.btn-glass:hover { background: rgb(110 92 255 / 12%); }
.icon-btn { width: 44px; padding: 0; border: 1px solid var(--line); color: var(--ink-soft); background: rgb(255 255 255 / 5%); }
.btn-primary:disabled, .btn-glass:disabled, .icon-btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-danger { color: var(--danger); }

.ambient-field { position: fixed; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 44% -20%, rgb(110 92 255 / 20%), transparent 44rem), linear-gradient(145deg, var(--canvas), var(--canvas-deep)); }
.ambient-field span { position: absolute; border-radius: 999px; filter: blur(76px); opacity: .16; }
.ambient-field span:nth-child(1) { width: 34rem; height: 22rem; top: 10%; left: 12%; background: var(--violet); animation: drift-one 18s ease-in-out infinite alternate; }
.ambient-field span:nth-child(2) { width: 28rem; height: 28rem; right: -8rem; top: 34%; background: var(--cyan); animation: drift-two 22s ease-in-out infinite alternate; }
.ambient-field span:nth-child(3) { width: 24rem; height: 20rem; left: 35%; bottom: -11rem; background: #3185ff; animation: drift-three 20s ease-in-out infinite alternate; }

@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes reveal { from { opacity: 0; transform: translateY(-5px) scale(.98); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .48; transform: scale(.96); } }
@keyframes loading-bar { from { transform: translateX(-110%); } to { transform: translateX(220%); } }
@keyframes drift-one { from { transform: translate3d(-3vw,-2vh,0) rotate(-22deg); } to { transform: translate3d(8vw,5vh,0) rotate(-8deg) scale(1.08); } }
@keyframes drift-two { from { transform: translate3d(0,-5vh,0) scale(.9); } to { transform: translate3d(-10vw,8vh,0) scale(1.14); } }
@keyframes drift-three { from { transform: translate3d(-5vw,2vh,0); } to { transform: translate3d(9vw,-7vh,0) scale(1.13); } }
@keyframes orbit { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }
.eyebrow { margin: 0 0 .55rem; color: var(--cyan); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.muted-copy { color: var(--ink-faint); font-size: .875rem; }

.toast-region { position: fixed; z-index: 1000; top: max(1rem, env(safe-area-inset-top)); left: 50%; display: grid; gap: .5rem; width: min(92vw, 420px); transform: translateX(-50%); pointer-events: none; }
.toast { padding: .85rem 1rem; border: 1px solid var(--line-strong); border-radius: 14px; color: var(--ink); background: color-mix(in srgb, var(--surface-solid) 92%, transparent); box-shadow: var(--glass-shadow); animation: reveal 180ms var(--ease-liquid); }
.toast.is-error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.toast.is-success { border-color: color-mix(in srgb, var(--success) 45%, transparent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
[data-reduce-motion="true"] *, [data-reduce-motion="true"] *::before, [data-reduce-motion="true"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
@media (forced-colors: active) {
  .glass-regular, .glass-clear { color: CanvasText; border: 1px solid CanvasText !important; background: Canvas !important; box-shadow: none !important; }
  .btn-primary { color: HighlightText !important; background: Highlight !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-regular, .glass-clear { background: var(--surface-solid) !important; }
}
