.uon-onboarding-surface { position: fixed; inset: 0; z-index: 99998; background: rgba(236, 243, 249, .58); -webkit-backdrop-filter: blur(9px) saturate(.85); backdrop-filter: blur(9px) saturate(.85); opacity: 1; transition: opacity .7s cubic-bezier(.2,.65,.3,1); }
.uon-onboarding-surface.is-leaving { opacity: 0; }
.uon-onboarding-surface[hidden] { display: none; }
html.uon-onboarding-active { overflow: hidden; }
html.uon-onboarding-active #page-root { pointer-events: none; }
html.uon-onboarding-active :is(.uon-auth-dialog, .uon-connect-dialog, .uon-profile-dialog)::backdrop { background: transparent; backdrop-filter: none; }
.uon-auth-dialog { width: min(780px, calc(100vw - 28px)); max-height: min(680px, calc(100dvh - 28px)); padding: 0; border: 1px solid #dce8f3; border-radius: 24px; background: #fff; color: #183149; box-shadow: 0 28px 90px #102b4966; overflow: auto; }
.uon-auth-dialog::backdrop { background: #1028428c; backdrop-filter: blur(6px); }
.uon-auth-dialog, .uon-auth-dialog * { box-sizing: border-box; }
.uon-auth-shell { display: grid; grid-template-columns: .85fr 1fr; min-height: 530px; }
.uon-auth-brand { position: relative; display: flex; flex-direction: column; min-height: 530px; padding: 35px 32px; overflow: hidden; background: radial-gradient(circle at 45% 20%, #d4fcf5 0, #c4e6ff 40%, #2a72d1 110%); }
.uon-auth-brand::before, .uon-auth-brand::after { content: ''; position: absolute; border: 1px solid #ffffff91; border-radius: 50%; pointer-events: none; }
.uon-auth-brand::before { width: 360px; height: 360px; right: -210px; bottom: -195px; }
.uon-auth-brand::after { width: 250px; height: 250px; left: -120px; top: 145px; }
.uon-auth-brand > img:first-child { position: relative; z-index: 1; width: 150px; height: auto; }
.uon-auth-brand-copy { position: relative; z-index: 1; margin-top: 94px; max-width: 270px; }
.uon-auth-brand-copy span { display: block; font-size: clamp(27px, 3vw, 37px); font-weight: 650; letter-spacing: -.055em; line-height: 1.05; }
.uon-auth-brand-copy p { max-width: 240px; margin: 14px 0 0; color: #315a77; font-size: 14px; line-height: 1.55; }
.uon-auth-character { position: absolute; right: -22px; bottom: -42px; width: 210px; height: 210px; object-fit: contain; transform: rotate(-12deg); opacity: .93; }
.uon-auth-content { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 42px clamp(25px, 4vw, 55px) 31px; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.uon-auth-close { position: absolute; top: 18px; right: 20px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #667c90; font-size: 28px; font-weight: 300; line-height: 1; cursor: pointer; }
.uon-auth-close:hover { background: #edf4fb; color: #173653; }
.uon-auth-overline { margin: 0 0 9px; color: #2b78cb; font-size: 11px; font-weight: 750; letter-spacing: .13em; }
.uon-auth-content h2 { margin: 0; color: #142f49; font-size: clamp(28px, 3vw, 35px); font-weight: 640; letter-spacing: -.045em; line-height: 1.12; }
.uon-auth-content > p#uon-auth-intro { margin: 12px 0 26px; color: #60758a; font-size: 14px; line-height: 1.55; }
.uon-auth-pending { margin: -7px 0 20px; padding: 12px 14px; border: 1px solid #d7e8f8; border-radius: 11px; background: #f4f9ff; }
.uon-auth-pending span { color: #225c9a; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.uon-auth-pending p { margin: 4px 0 0; max-height: 3.1em; overflow: hidden; color: #42586b; font-size: 13px; line-height: 1.55; }
.uon-auth-provider { width: 100%; min-height: 52px; display: grid; grid-template-columns: 29px 1fr 20px; align-items: center; gap: 11px; padding: 8px 16px; border: 1px solid #173b65; border-radius: 12px; background: #173b65; box-shadow: 0 9px 22px #173b6526; color: #fff; font: inherit; font-size: 14px; font-weight: 650; text-align: center; cursor: pointer; }
.uon-auth-provider:hover { background: #245db3; border-color: #245db3; }
.uon-auth-provider:disabled { cursor: progress; opacity: .72; }
.uon-auth-chatgpt-mark { display: block; width: 29px; height: 29px; object-fit: contain; }
.uon-auth-provider-arrow { font-size: 18px; font-weight: 400; }
.uon-auth-help { margin: 14px 0 0; color: #6c8092; font-size: 12px; line-height: 1.5; text-align: center; }
.uon-auth-status { margin: 13px 0 0; padding: 11px 12px; border-radius: 9px; background: #edf5ff; color: #28577d; font-size: 12px; line-height: 1.45; }
.uon-auth-legal { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 28px; color: #7b8b99; font-size: 11px; }
.uon-auth-legal a { color: inherit; text-decoration: none; }
.uon-auth-legal a:hover { text-decoration: underline; }
.uon-auth-dialog :is(button, a):focus-visible { outline: 3px solid #87bded; outline-offset: 3px; }
.uon-connect-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #e1e8ee; border-radius: 24px; background: #fff; color: #183149; box-shadow: 0 30px 110px #102b493b; }
.uon-connect-dialog::backdrop { background: #17334e55; backdrop-filter: blur(10px); }
.uon-connect-dialog, .uon-connect-dialog * { box-sizing: border-box; }
.uon-connect-card { position: relative; padding: 44px 40px 30px; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; }
.uon-connect-brands { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 28px; }
.uon-connect-brands > span:not(.uon-connect-link) { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 19px; }
.uon-connect-uonify { background: #f2f8fe; border: 1px solid #e2eef8; }
.uon-connect-chatgpt { background: #183149; }
.uon-connect-uonify img { width: 48px; height: auto; }
.uon-connect-chatgpt img { width: 32px; height: 32px; }
.uon-connect-link { display: flex; gap: 5px; }
.uon-connect-link i { width: 4px; height: 4px; border-radius: 50%; background: #aac7d5; }
.uon-connect-card h2 { margin: 0; font-size: 29px; font-weight: 650; letter-spacing: -.045em; }
.uon-connect-card > p:not(.uon-auth-overline) { margin: 12px 0 26px; color: #60758a; font-size: 14px; line-height: 1.6; }
.uon-connect-card form { text-align: left; }
.uon-connect-card label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: #40566b; }
.uon-connect-card input { width: 100%; min-height: 50px; padding: 0 15px; border: 1px solid #cdd9e5; border-radius: 11px; background: #fff; color: #17344f; font: inherit; font-size: 14px; }
.uon-connect-detail { display: flex; gap: 9px; margin: 16px 0 24px; color: #718499; }
.uon-connect-detail svg { width: 17px; height: 19px; flex: 0 0 auto; margin-top: 2px; }
.uon-connect-detail p { margin: 0; font-size: 11px; line-height: 1.6; }
.uon-connect-continue { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 50px; border: 0; border-radius: 11px; background: #1c5fba; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.uon-connect-continue:hover { background: #164d9c; }
.uon-connect-back { margin-top: 18px; padding: 6px 14px; border: 0; background: transparent; color: #657c90; font: inherit; font-size: 12px; cursor: pointer; }
.uon-connect-dialog :is(button,input):focus-visible { outline: 3px solid #87bded; outline-offset: 3px; }
.uon-auth-dialog[open], .uon-connect-dialog[open], .uon-profile-dialog[open] { animation: uon-dialog-arrive .4s cubic-bezier(.2,.7,.2,1) both; }
.uon-onboard-step:not([hidden]) { animation: uon-step-arrive .28s ease-out both; }
@keyframes uon-dialog-arrive { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes uon-step-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.uon-account-dialog { width: min(390px, calc(100vw - 28px)); padding: 0; border: 1px solid #dce8f3; border-radius: 20px; background: #fff; color: #183149; box-shadow: 0 24px 80px #102b4952; }
.uon-account-dialog::backdrop { background: #1028428c; backdrop-filter: blur(6px); }
.uon-account-card { position: relative; padding: 42px 30px 30px; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.uon-account-card h2 { margin: 0; color: #142f49; font-size: 29px; letter-spacing: -.045em; }
.uon-account-card > p:not(.uon-auth-overline) { margin: 12px 0 28px; color: #60758a; font-size: 14px; line-height: 1.55; }
.uon-account-signout { width: 100%; min-height: 46px; border: 1px solid #cad9e6; border-radius: 11px; background: #fff; color: #294860; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.uon-account-signout:hover { background: #f2f7fc; }
.uon-account-status { margin: 12px 0 0; color: #a03933; font-size: 12px; line-height: 1.5; }
.uon-account-dialog :is(button, a):focus-visible { outline: 3px solid #87bded; outline-offset: 3px; }
.uon-profile-dialog { width: min(980px, calc(100vw - 28px)); max-height: min(760px, calc(100dvh - 28px)); padding: 0; overflow: auto; border: 1px solid #dce8f3; border-radius: 25px; background: #fff; color: #183149; box-shadow: 0 32px 100px #102b4970; }
.uon-profile-dialog::backdrop { background: #102842a8; backdrop-filter: blur(9px); }
.uon-profile-dialog, .uon-profile-dialog * { box-sizing: border-box; }
.uon-onboard-shell { display: grid; grid-template-columns: minmax(245px, .75fr) minmax(0, 1.7fr); min-height: 655px; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.uon-onboard-side { display: flex; flex-direction: column; padding: 38px 32px; overflow: hidden; background: radial-gradient(circle at 85% 65%, #87d8ec 0, #d4f5ee 27%, #d1e3fa 68%, #abcaf0 100%); }
.uon-profile-brand { display: block; width: 146px; height: auto; }
.uon-onboard-side-copy { margin: auto 0; max-width: 260px; }
.uon-onboard-side-copy span { display: block; color: #163958; font-size: clamp(29px, 3vw, 39px); font-weight: 650; letter-spacing: -.055em; line-height: 1.06; }
.uon-onboard-side-copy p { margin: 17px 0 0; color: #315c79; font-size: 14px; line-height: 1.6; }
.uon-onboard-main { position: relative; padding: 42px clamp(27px, 4vw, 54px) 30px; }
.uon-onboard-main .uon-auth-close { top: 20px; right: 22px; }
.uon-onboard-progress { display: flex; gap: 8px; width: 174px; margin: 0 0 27px; }
.uon-onboard-progress span { flex: 1; height: 4px; border-radius: 9px; background: #dce8f2; }
.uon-onboard-progress span.is-current { background: #337bd2; }
.uon-onboard-progress span.is-complete { background: #48b9b1; }
.uon-onboard-main .uon-auth-overline { margin-bottom: 12px; }
.uon-onboard-step h2 { margin: 0; color: #142f49; font-size: clamp(27px, 3.3vw, 35px); font-weight: 650; letter-spacing: -.05em; line-height: 1.12; }
.uon-onboard-intro { max-width: 540px; margin: 11px 0 25px; color: #60758a; font-size: 14px; line-height: 1.55; }
.uon-onboard-suggestion { margin: -11px 0 15px; padding: 9px 12px; border-radius: 9px; background: #edf7fb; color: #2c637d; font-size: 11px; line-height: 1.45; }
.uon-onboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 16px; }
.uon-onboard-field { min-width: 0; }
.uon-onboard-field-wide { grid-column: 1 / -1; }
.uon-onboard-field label { display: block; margin-bottom: 7px; color: #40566b; font-size: 12px; font-weight: 650; }
.uon-onboard-field label span { color: #8091a1; font-weight: 450; }
.uon-onboard-field input, .uon-onboard-field select { display: block; width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid #cdd9e5; border-radius: 10px; background: #fff; color: #17344f; font: inherit; font-size: 13px; }
.uon-onboard-field input[readonly] { background: #f4f9fd; color: #375b78; }
.uon-onboard-field small { display: block; margin-top: 6px; color: #788c9e; font-size: 11px; line-height: 1.4; }
.uon-age-notice { margin: 9px 0 0; padding: 10px 12px; border-radius: 9px; background: #fff2f0; color: #a73f37; font-size: 12px; line-height: 1.45; }
.uon-onboard-field :is(input,select):focus { outline: 3px solid #cde8ff; border-color: #3686d4; }
.uon-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uon-plan-card { position: relative; display: grid; align-content: start; gap: 5px; min-height: 144px; padding: 16px 18px; border: 1.5px solid #d9e5ef; border-radius: 15px; background: #fff; cursor: pointer; transition: border-color .16s, background-color .16s, box-shadow .16s; }
.uon-plan-card:hover { border-color: #8ab8e5; }
.uon-plan-card:has(input:checked) { border-color: #2d78ca; background: #f5faff; box-shadow: inset 0 0 0 1px #2d78ca; }
.uon-plan-card input { position: absolute; top: 17px; right: 17px; width: 17px; height: 17px; margin: 0; accent-color: #2d78ca; }
.uon-plan-name { padding-right: 22px; color: #224966; font-size: 13px; font-weight: 750; }
.uon-plan-price { color: #132f4a; font-size: 25px; font-weight: 700; letter-spacing: -.045em; }
.uon-plan-price small { color: #6f8396; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.uon-plan-price-custom { font-size: 22px; }
.uon-plan-description { color: #566d81; font-size: 11px; line-height: 1.4; }
.uon-plan-detail { margin-top: 3px; color: #2b75bb; font-size: 10px; font-weight: 650; }
.uon-onboard-plan-note { margin: 15px 0 0; color: #718598; font-size: 11px; line-height: 1.45; }
.uon-onboard-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.uon-onboard-back { min-height: 48px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #526e86; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.uon-onboard-back:hover { background: #f2f7fb; }
.uon-profile-submit { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 166px; min-height: 48px; margin-left: auto; padding: 0 18px; border: 0; border-radius: 10px; background: #245db3; color: #fff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.uon-profile-submit:hover { background: #164d9c; }
.uon-profile-submit:disabled { cursor: progress; opacity: .7; }
.uon-profile-submit:disabled[data-age-blocked="true"] { cursor: not-allowed; }
.uon-profile-status { margin: 11px 0 0; color: #a03933; font-size: 12px; line-height: 1.5; }
.uon-onboard-legal { margin: 18px 0 0; color: #8292a2; font-size: 10px; line-height: 1.5; }
.uon-onboard-legal a { color: #426f98; }
.uon-profile-dialog :is(button,input,select,a):focus-visible { outline: 3px solid #87bded; outline-offset: 3px; }
.uon-workspace-transition { position: fixed; inset: 0; z-index: 99999; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 90px 24px; border: 0; overflow: auto; background: radial-gradient(ellipse at 50% 39%, #f8fbfed9 0, #f8fbfe66 42%, transparent 75%); color: #17344f; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; opacity: 0; transition: opacity .7s cubic-bezier(.2,.65,.3,1); }
.uon-workspace-transition, .uon-workspace-transition * { box-sizing: border-box; }
.uon-workspace-transition[open] { display: grid; place-items: center; }
.uon-workspace-transition:not([open]) { display: none; }
.uon-workspace-transition::backdrop { background: transparent; }
.uon-workspace-transition.is-visible { opacity: 1; }
.uon-workspace-transition.is-leaving { opacity: 0; }
.uon-workspace-transition.is-leaving::backdrop { background: transparent; }
html.uon-transition-active { overflow: hidden; }
.uon-transition-brand { position: absolute; top: clamp(24px, 4vw, 42px); left: clamp(24px, 4vw, 48px); width: 138px; height: auto; }
.uon-transition-center { width: min(500px, 100%); padding: 12px 0; transform: translateY(8px); opacity: 0; transition: transform .65s ease, opacity .65s ease; }
.is-visible .uon-transition-center { transform: translateY(0); opacity: 1; }
.is-leaving .uon-transition-center { transform: translateY(-10px); opacity: 0; }
.uon-transition-emblem { position: relative; width: 212px; height: 212px; display: grid; place-items: center; margin: 0 auto 38px; }
.uon-transition-logo { position: relative; z-index: 1; width: 154px; height: 154px; display: grid; place-items: center; border: 1px solid #e5eef5; border-radius: 50%; background: #fff; box-shadow: 0 14px 45px #29699410; }
.uon-transition-logo img { display: block; width: 142px; height: auto; aspect-ratio: 8 / 5; object-fit: contain; image-rendering: auto; }
.uon-transition-orbit { position: absolute; inset: 0; border: 1.5px solid #dceaf2; border-radius: 50%; }
.uon-transition-orbit::before { content: ''; position: absolute; inset: -2px; border: 2.5px solid transparent; border-top-color: #347cdf; border-right-color: #48bdc3; border-radius: 50%; animation: uon-orbit 2.5s linear infinite; }
.uon-transition-orbit::after { content: ''; position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; background: #3279d8; border: 2px solid #f6fbff; border-radius: 50%; box-shadow: 0 0 0 4px #3279d80b; transform-origin: 4px 110px; animation: uon-orbit 2.5s linear infinite; }
.uon-transition-orbit-inner { inset: 12px; border-color: #e4f1f2; }
.uon-transition-orbit-inner::before { border-top-color: #58c6bd; border-right-color: transparent; animation: uon-orbit 4s linear infinite reverse; }
.uon-transition-orbit-inner::after { display: none; }
.uon-transition-kicker { margin: 0 0 13px; color: #537ca0; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.uon-transition-message { min-height: 110px; }
.uon-transition-message h2 { margin: 0; color: #16334b; font-size: clamp(27px, 4.5vw, 36px); font-weight: 600; letter-spacing: -.045em; line-height: 1.18; outline: none; }
.uon-transition-message p { max-width: 370px; min-height: 46px; margin: 15px auto 0; color: #63788b; font-size: 14px; line-height: 1.7; }
.uon-transition-message.is-changing { animation: uon-step-arrive .32s ease both; }
.uon-transition-steps { display: flex; gap: 7px; justify-content: center; margin-top: 25px; }
.uon-transition-steps span { width: 26px; height: 3px; border-radius: 4px; background: #dbe7ef; transition: background .5s ease; }
.uon-transition-steps span.is-current { background: #327cce; }
.uon-transition-steps span.is-complete { background: #50b9b0; }
.uon-transition-foot { position: absolute; bottom: 32px; left: 20px; right: 20px; margin: 0; color: #8093a3; font-size: 9px; letter-spacing: .18em; line-height: 1.6; }
.uon-transition-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.uon-transition-actions:not(:has(button:not([hidden]))) { display: none; }
.uon-transition-actions button { padding: 10px 17px; border: 1px solid #d8e5ef; border-radius: 9px; background: #fff; color: #335e83; font: inherit; font-size: 12px; cursor: pointer; }
.uon-workspace-transition.is-ready .uon-transition-orbit { opacity: .55; transition: opacity .5s; }
.uon-workspace-transition.is-error .uon-transition-orbit::before, .uon-workspace-transition.is-error .uon-transition-orbit::after { animation-play-state: paused; }
.uon-workspace-transition.is-error .uon-transition-steps { opacity: .4; }
html.uon-workspace-revealing #app-shell { animation: uon-workspace-reveal 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes uon-orbit { to { transform: rotate(360deg); } }
@keyframes uon-workspace-reveal { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .uon-connect-card { padding: 38px 26px 25px; } .uon-transition-emblem { transform: scale(.88); margin-bottom: 20px; } .uon-transition-foot { bottom: 24px; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .uon-transition-orbit::before, .uon-transition-orbit::after, .uon-auth-dialog[open], .uon-connect-dialog[open], .uon-profile-dialog[open], .uon-onboard-step:not([hidden]), .uon-transition-message.is-changing, html.uon-workspace-revealing #app-shell { animation: none; } .uon-workspace-transition, .uon-transition-center { transition: opacity .15s; transform: none; } }
html[data-reduce-motion="true"] :is(.uon-auth-dialog[open], .uon-connect-dialog[open], .uon-profile-dialog[open], .uon-onboard-step:not([hidden]), .uon-transition-message.is-changing, #app-shell), html[data-reduce-motion="true"] .uon-transition-orbit::before, html[data-reduce-motion="true"] .uon-transition-orbit::after { animation: none; }
html[data-reduce-motion="true"] :is(.uon-workspace-transition, .uon-transition-center, .uon-onboarding-surface) { transition: opacity .15s; transform: none; }
@media (prefers-reduced-motion: reduce) { .uon-onboarding-surface { transition: opacity .15s; } }
@media (max-width: 760px) { .uon-profile-dialog { width: min(640px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); border-radius: 18px; } .uon-onboard-shell { display: block; min-height: 0; } .uon-onboard-side { min-height: 90px; padding: 24px 26px; } .uon-onboard-side-copy { display: none; } .uon-onboard-main { padding: 30px 25px; } .uon-onboard-main .uon-auth-close { top: 12px; right: 14px; } }
@media (max-width: 480px) { .uon-onboard-grid, .uon-plan-grid { grid-template-columns: 1fr; } .uon-onboard-field-wide { grid-column: auto; } .uon-plan-card { min-height: 110px; } .uon-onboard-progress { margin-bottom: 23px; } }
@media (max-width: 680px) { .uon-auth-dialog { width: min(440px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); border-radius: 18px; } .uon-auth-shell { display: block; min-height: 0; } .uon-auth-brand { min-height: 94px; padding: 24px 28px; } .uon-auth-brand > img:first-child { width: 127px; } .uon-auth-brand-copy, .uon-auth-character { display: none; } .uon-auth-content { padding: 31px 26px 27px; } .uon-auth-close { top: 13px; right: 14px; } }