:root {
  --zra-bg: #080b24;
  --zra-panel: #151238;
  --zra-panel-2: #211650;
  --zra-ink: #ffffff;
  --zra-muted: #b9b2d3;
  --zra-line: rgba(255, 255, 255, 0.13);
  --zra-purple: #7551f2;
  --zra-purple-2: #a64bf4;
  --zra-pink: #f72d6a;
  --zra-cyan: #52dff4;
  --zra-green: #59dfa9;
  --zra-danger: #ff5677;
  --zra-radius: 26px;
  --zra-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

html { min-height: 100%; background: var(--zra-bg); }
html.zra-auth-active { height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; scroll-behavior: auto !important; }
body.zra-auth-page {
	position: relative !important;
	height: auto !important;
	min-height: 100vh;
	margin: 0 !important;
	overflow-x: hidden;
	overflow-y: visible !important;
	touch-action: pan-y;
  color: var(--zra-ink);
  background:
    radial-gradient(circle at 7% 7%, rgba(82, 223, 244, 0.16), transparent 27rem),
    radial-gradient(circle at 92% 12%, rgba(247, 45, 106, 0.16), transparent 30rem),
    radial-gradient(circle at 50% 100%, rgba(117, 81, 242, 0.23), transparent 42rem),
    linear-gradient(145deg, #080b24, #0c0b2a 55%, #110b30) !important;
  font-family: Inter, Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.zra-auth-page::before,
body.zra-auth-page::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
}
body.zra-auth-page::before {
  opacity: 0.26;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.62) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(99,226,255,.5) 0 1px, transparent 1.7px);
  background-position: 0 0, 27px 34px;
  background-size: 72px 72px, 113px 113px;
}
body.zra-auth-page::after {
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 72%, transparent);
}

.zra-auth-page *, .zra-auth-page *::before, .zra-auth-page *::after { box-sizing: border-box; }
.zra-auth-page [hidden] { display: none !important; }
.zra-auth-page a { color: inherit; }
.zra-auth-page button,
.zra-auth-page input,
.zra-auth-page select,
.zra-auth-page textarea { font: inherit; }
.zra-auth-page button { width: auto; touch-action: manipulation; }
.zra-shell { position: relative !important; z-index: 99999 !important; isolation: isolate; width: min(100%, 1560px); min-height: 100vh; margin: 0 auto; padding: 22px clamp(16px, 3vw, 44px) 24px; pointer-events: auto !important; }
.zra-shell a, .zra-shell button, .zra-shell input, .zra-shell select, .zra-shell textarea, .zra-shell label { pointer-events: auto !important; }
.zra-skip-link { position: fixed; z-index: 999999; top: 10px; left: 10px; transform: translateY(-160%); padding: 12px 16px; border-radius: 10px; background: #fff; color: #111 !important; font-weight: 800; }
.zra-skip-link:focus { transform: translateY(0); }

.zra-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 24px; padding: 8px 10px 8px 18px; border: 1px solid var(--zra-line); border-radius: 23px; background: rgba(27, 20, 66, .76); box-shadow: 0 18px 48px rgba(0,0,0,.24); backdrop-filter: blur(22px); }
.zra-brand { display: inline-flex; align-items: center; min-width: 0; }
.zra-brand img { display: block; width: auto; max-width: 190px; height: 57px; object-fit: contain; }
.zra-auth-switch { display: flex; align-items: center; gap: 7px; padding: 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: rgba(0,0,0,.2); }
.zra-auth-switch a { min-width: 108px; padding: 12px 16px; border-radius: 12px; color: #b9b2d3; font-size: 13px; font-weight: 850; text-align: center; text-decoration: none; }
.zra-auth-switch a.is-active { color: #fff; background: linear-gradient(135deg, var(--zra-purple), var(--zra-pink)); box-shadow: 0 9px 23px rgba(108,62,225,.3); }

.zra-main { width: min(100%, 1380px); margin: 34px auto 0; }
.zra-notice { display: flex; align-items: flex-start; gap: 12px; width: min(100%, 860px); margin: 0 auto 18px; padding: 15px 17px; border: 1px solid; border-radius: 17px; background: rgba(10,5,29,.82); box-shadow: 0 14px 38px rgba(0,0,0,.25); }
.zra-notice > span { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #07151a; font-weight: 950; }
.zra-notice p { margin: 3px 0 0; color: #fff; font-size: 14px; line-height: 1.5; }
.zra-notice--success { border-color: rgba(89,223,169,.46); }
.zra-notice--success > span { background: var(--zra-green); }
.zra-notice--error { border-color: rgba(255,86,119,.48); }
.zra-notice--error > span { background: var(--zra-danger); }

.zra-register-card { overflow: hidden; border: 1px solid var(--zra-line); border-radius: 34px; background: linear-gradient(150deg, rgba(42,28,94,.94), rgba(17,10,46,.97) 54%, rgba(13,8,36,.98)); box-shadow: var(--zra-shadow); }
.zra-register-heading { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 62px) clamp(24px, 6vw, 82px) 36px; text-align: center; background: radial-gradient(circle at 50% -60%, rgba(247,45,106,.42), transparent 62%), radial-gradient(circle at 8% 20%, rgba(82,223,244,.12), transparent 25%); }
.zra-register-heading::before { position: absolute; inset: 0; opacity: .24; background: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 38px 38px; content: ""; mask-image: linear-gradient(#000, transparent); }
.zra-register-heading > * { position: relative; z-index: 1; }
.zra-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px !important; color: #f4dffb !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .13em !important; line-height: 1.2 !important; text-transform: uppercase; }
.zra-eyebrow i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--zra-cyan), var(--zra-pink)); box-shadow: 0 0 16px rgba(82,223,244,.72); }
.zra-register-heading h1 { max-width: 900px; margin: 0 auto !important; color: #fff !important; font-size: clamp(38px, 6vw, 72px) !important; font-weight: 950 !important; letter-spacing: -.055em !important; line-height: .98 !important; }
.zra-register-heading > p:last-child { max-width: 800px; margin: 18px auto 0 !important; color: var(--zra-muted) !important; font-size: clamp(14px, 1.7vw, 17px) !important; line-height: 1.7 !important; }

.zra-steps { display: grid; grid-template-columns: repeat(3, 1fr); width: min(100% - 40px, 700px); margin: -1px auto 0 !important; padding: 0 !important; list-style: none !important; }
.zra-steps li { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 68px; color: #8279a9; font-size: 12px; font-weight: 850; }
.zra-steps li::before { position: absolute; top: 50%; right: calc(50% + 38px); width: calc(100% - 76px); height: 2px; background: rgba(255,255,255,.1); content: ""; }
.zra-steps li:first-child::before { display: none; }
.zra-steps b { position: relative; z-index: 1; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; background: #211650; color: #aaa2ca; }
.zra-steps li.is-active { color: #fff; }
.zra-steps li.is-active b { border-color: transparent; background: linear-gradient(135deg, var(--zra-purple), var(--zra-pink)); color: #fff; box-shadow: 0 0 0 5px rgba(117,81,242,.13); }
.zra-steps li.is-complete b { border-color: rgba(89,223,169,.4); background: rgba(89,223,169,.13); color: #bffbe4; }
.zra-steps li.is-complete::before, .zra-steps li.is-active::before { background: linear-gradient(90deg, var(--zra-purple), rgba(247,45,106,.65)); }

.zra-step-panel { padding: clamp(26px, 4vw, 52px) clamp(20px, 5vw, 68px) clamp(30px, 5vw, 62px); }
.zra-step-panel[hidden] { display: none !important; }
.zra-panel-title { max-width: 780px; margin-bottom: 30px; }
.zra-panel-title > span { display: block; margin-bottom: 7px; color: #bdaef2; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.zra-panel-title h2 { margin: 0 !important; color: #fff !important; font-size: clamp(28px, 4vw, 43px) !important; font-weight: 920 !important; letter-spacing: -.04em !important; line-height: 1.05 !important; }
.zra-panel-title p { margin: 11px 0 0 !important; color: var(--zra-muted) !important; font-size: 14px !important; line-height: 1.65 !important; }

.zra-body-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(15px, 3vw, 28px); width: min(100%, 980px); margin: 0 auto; }
.zra-body-choice { position: relative; display: grid; grid-template-rows: minmax(310px, 48vh) auto auto; align-items: end; overflow: hidden; min-width: 0; padding: 20px 20px 22px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 27px !important; outline: 0; background: radial-gradient(circle at 50% 15%, rgba(117,81,242,.25), transparent 42%), rgba(7,3,23,.54) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); color: #fff !important; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.zra-body-choice:hover, .zra-body-choice:focus-visible { transform: translateY(-5px); border-color: rgba(177,143,255,.55) !important; box-shadow: 0 19px 42px rgba(0,0,0,.29); }
.zra-body-choice.is-selected { border-color: rgba(247,45,106,.84) !important; background: radial-gradient(circle at 50% 12%, rgba(247,45,106,.23), transparent 46%), linear-gradient(145deg, rgba(83,42,126,.58), rgba(16,7,42,.78)) !important; box-shadow: 0 0 0 4px rgba(247,45,106,.09), 0 22px 48px rgba(0,0,0,.3); }
.zra-body-art { display: grid; place-items: center; width: 100%; height: 100%; min-height: 290px; }
.zra-body-art img { display: block; width: min(100%, 430px); height: auto; max-width: none; object-fit: contain; filter: drop-shadow(0 22px 27px rgba(0,0,0,.38)); transform: scale(1.32); transform-origin: center; }
.zra-body-loading { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(82,223,244,.2); border-radius: 999px; background: rgba(82,223,244,.07); color: #c9f9ff; font-size: 11px; font-weight: 850; letter-spacing: .04em; }
.zra-body-choice strong { position: relative; z-index: 3; margin-top: 10px; color: #fff; font-size: 18px; font-weight: 900; }
.zra-body-choice small { position: relative; z-index: 3; margin-top: 4px; color: #988dbd; font-size: 12px; }
.zra-body-choice em { position: absolute; z-index: 4; top: 16px; right: 16px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(0,0,0,.28); color: #b7aecf; font-size: 10px; font-style: normal; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.zra-body-choice.is-selected em { border-color: rgba(247,45,106,.35); background: rgba(247,45,106,.17); color: #ffe0e9; }

.zra-step-actions { display: flex; align-items: center; justify-content: space-between; gap: 13px; margin-top: 34px; padding-top: 23px; border-top: 1px solid rgba(255,255,255,.09); }
.zra-step-actions--end { justify-content: flex-end; }
.zra-primary-button, .zra-secondary-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 52px !important; padding: 12px 22px !important; border-radius: 14px !important; color: #fff !important; font-size: 13px !important; font-weight: 900 !important; text-decoration: none !important; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.zra-primary-button { border: 0 !important; background: linear-gradient(135deg, var(--zra-purple), var(--zra-pink)) !important; box-shadow: 0 14px 29px rgba(114,62,223,.3) !important; }
.zra-secondary-button { border: 1px solid rgba(255,255,255,.13) !important; background: rgba(255,255,255,.055) !important; box-shadow: none !important; }
.zra-primary-button:hover, .zra-primary-button:focus-visible, .zra-secondary-button:hover, .zra-secondary-button:focus-visible { transform: translateY(-2px); filter: brightness(1.1); }

.zra-avatar-builder { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.4fr); gap: 18px; min-height: 620px; }
.zra-avatar-preview, .zra-avatar-options { border: 1px solid rgba(255,255,255,.11); border-radius: 25px; background: rgba(7,3,24,.56); }
.zra-avatar-preview { display: flex; flex-direction: column; min-width: 0; padding: 18px; background: radial-gradient(circle at 50% 26%, rgba(117,81,242,.32), transparent 38%), rgba(7,3,24,.58); }
.zra-preview-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zra-preview-label span { color: #a69bbf; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.zra-preview-label b { padding: 6px 9px; border: 1px solid rgba(82,223,244,.22); border-radius: 999px; background: rgba(82,223,244,.08); color: #c9f9ff; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.zra-canvas-wrap { position: relative; display: grid; flex: 1; min-height: 460px; margin-top: 12px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: radial-gradient(circle, rgba(255,255,255,.065) 0 1px, transparent 1.5px); background-size: 24px 24px; }
#zra-avatar-canvas { display: block; width: min(100%, 430px); height: auto; max-height: 480px; object-fit: contain; filter: drop-shadow(0 28px 32px rgba(0,0,0,.38)); }
.zra-avatar-loader { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px; background: rgba(12,5,34,.88); color: #d8d1eb; font-size: 12px; font-weight: 800; }
.zra-avatar-loader i { display: block; width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.16); border-top-color: var(--zra-pink); border-radius: 50%; animation: zra-spin .8s linear infinite; }
@keyframes zra-spin { to { transform: rotate(360deg); } }
.zra-avatar-preview > p { display: flex; align-items: center; gap: 7px; margin: 14px 2px 1px !important; color: #b7aed0 !important; font-size: 11px !important; line-height: 1.45 !important; }
.zra-avatar-preview > p span { color: var(--zra-cyan); }
.zra-avatar-options { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.zra-category-tabs { display: grid; grid-template-columns: repeat(5, minmax(82px,1fr)); gap: 8px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.025); overflow-x: auto; }
.zra-category-tabs button { display: grid; justify-items: center; gap: 7px; min-width: 82px; min-height: 72px; padding: 10px !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 16px !important; background: rgba(255,255,255,.035) !important; box-shadow: none !important; color: #aaa0c8 !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.zra-category-tabs button span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(117,81,242,.16); color: #d5c9ff; font-size: 16px; }
.zra-category-tabs button.is-active { border-color: rgba(247,45,106,.58) !important; background: linear-gradient(145deg, rgba(117,81,242,.24), rgba(247,45,106,.12)) !important; color: #fff !important; }
.zra-category-tabs button.is-active span { background: linear-gradient(135deg, var(--zra-purple), var(--zra-pink)); color: #fff; }
.zra-option-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 19px 12px; }
.zra-option-status strong { color: #fff; font-size: 17px; }.zra-option-status span { color: #9489b4; font-size: 11px; }
.zra-option-grid { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); grid-auto-rows: 135px; gap: 11px; align-content: start; min-height: 0; max-height: 486px; margin: 0 12px 12px; padding: 7px; overflow: auto; scrollbar-color: var(--zra-purple) rgba(255,255,255,.05); }
.zra-avatar-option { position: relative; display: grid; place-items: center; overflow: hidden; padding: 7px !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 19px !important; background: radial-gradient(circle at 50% 15%, rgba(117,81,242,.18), transparent 65%), rgba(255,255,255,.035) !important; box-shadow: none !important; cursor: pointer; }
.zra-avatar-option img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 9px 10px rgba(0,0,0,.38)); }
.zra-avatar-option:hover, .zra-avatar-option:focus-visible { border-color: rgba(183,143,255,.55) !important; transform: translateY(-2px); }
.zra-avatar-option.is-selected { border-color: rgba(247,45,106,.8) !important; background: linear-gradient(145deg, rgba(117,81,242,.28), rgba(247,45,106,.14)) !important; box-shadow: 0 0 0 3px rgba(247,45,106,.08) !important; }
.zra-avatar-option.is-selected::after { position: absolute; right: 7px; bottom: 7px; padding: 4px 7px; border-radius: 999px; background: rgba(247,45,106,.88); color: #fff; font-size: 8px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; content: "Equipped"; }
.zra-catalog-error { margin: 12px; padding: 12px 14px; border: 1px solid rgba(255,86,119,.35); border-radius: 13px; background: rgba(255,86,119,.09); color: #ffd8e1; font-size: 12px; line-height: 1.5; }

.zra-account-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); align-items: start; gap: 22px; }
.zra-account-form { min-width: 0; }
.zra-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; }
.zra-field { display: grid; gap: 9px; min-width: 0; color: #fff; font-size: 12px; font-weight: 850; line-height: 1.3; }
.zra-field-grid > .zra-field { position: relative; padding: 16px; border: 1px solid rgba(181,155,255,.16); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(117,81,242,.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.zra-field-grid > .zra-field::before { position: absolute; top: 20px; right: 17px; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--zra-cyan), var(--zra-pink)); box-shadow: 0 0 13px rgba(82,223,244,.52); content: ""; }
.zra-field-grid > .zra-field:focus-within { border-color: rgba(164,109,255,.62); box-shadow: 0 14px 30px rgba(4,0,20,.22), 0 0 0 3px rgba(117,81,242,.09); transform: translateY(-2px); }
.zra-field--full { grid-column: 1 / -1; }
.zra-field > span:first-child, .zra-xprofile-field > label:first-child, .zra-xprofile-field > legend:first-child, .zra-xprofile-field > div > label:first-child { color: #f3efff !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: .01em; line-height: 1.3 !important; }
.zra-field input[type="text"], .zra-field input[type="email"], .zra-field input[type="password"], .zra-field input[type="date"], .zra-field input[type="url"], .zra-field input[type="number"], .zra-field input[type="tel"], .zra-field select, .zra-field textarea { width: 100% !important; min-height: 55px !important; margin: 0 !important; padding: 0 16px !important; border: 1px solid rgba(190,169,245,.3) !important; border-radius: 14px !important; outline: 0 !important; background: linear-gradient(145deg, rgba(7,3,25,.9), rgba(18,10,48,.86)) !important; box-shadow: inset 0 1px 9px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.025) !important; color: #fff !important; font-size: 13px !important; font-weight: 680 !important; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.zra-field select { padding-right: 40px !important; color-scheme: dark; cursor: pointer; }
.zra-field textarea { min-height: 140px !important; padding-block: 14px !important; resize: vertical; line-height: 1.65; }
.zra-field input::placeholder, .zra-field textarea::placeholder { color: #8175a6; opacity: 1; }
.zra-field input:hover, .zra-field select:hover, .zra-field textarea:hover { border-color: rgba(190,161,255,.48) !important; }
.zra-field input:focus, .zra-field select:focus, .zra-field textarea:focus { border-color: rgba(247,45,106,.78) !important; background: linear-gradient(145deg, rgba(11,5,37,.96), rgba(25,13,61,.93)) !important; box-shadow: 0 0 0 4px rgba(247,45,106,.09), inset 0 1px 8px rgba(0,0,0,.2) !important; }
.zra-field small { color: #8f86ab; font-size: 10px; font-weight: 650; line-height: 1.45; }
.zra-password-wrap { position: relative; display: block; }
.zra-password-wrap button { position: absolute; top: 50%; right: 9px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; color: #9a8ebc !important; cursor: pointer; transform: translateY(-50%); }
.zra-password-wrap input { padding-right: 47px !important; }
.zra-extra-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 28px; padding: clamp(18px,3vw,27px); border: 1px solid rgba(181,155,255,.16); border-radius: 24px; background: radial-gradient(circle at 100% 0, rgba(117,81,242,.13), transparent 34%), rgba(6,2,22,.36); }
.zra-extra-fields-heading { grid-column: 1/-1; margin-bottom: 6px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.zra-extra-fields-heading > span { display: block; margin-bottom: 7px; color: #bbaaf3; font-size: 9px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.zra-extra-fields-heading h3 { margin: 0 !important; color: #fff !important; font-size: clamp(20px,3vw,27px) !important; font-weight: 920 !important; letter-spacing: -.03em !important; line-height: 1.1 !important; }
.zra-extra-fields-heading p { margin: 8px 0 0 !important; color: #948aaf !important; font-size: 11px !important; line-height: 1.6 !important; }
.zra-xprofile-field { position: relative; align-content: start; min-height: 112px; padding: 16px; border: 1px solid rgba(180,156,241,.14); border-radius: 18px; background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(117,81,242,.025)); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.zra-xprofile-field::before { position: absolute; top: 19px; right: 17px; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--zra-cyan), var(--zra-pink)); box-shadow: 0 0 12px rgba(82,223,244,.48); content: ""; }
.zra-xprofile-field:focus-within { border-color: rgba(164,109,255,.58); box-shadow: 0 14px 30px rgba(4,0,20,.22), 0 0 0 3px rgba(117,81,242,.08); transform: translateY(-2px); }
.zra-xprofile-field--wide { grid-column: 1/-1; }
.zra-xprofile-field .zra-optional-badge { display: inline-flex; align-items: center; width: max-content; margin-left: 7px; padding: 3px 7px; border: 1px solid rgba(82,223,244,.2); border-radius: 999px; background: rgba(82,223,244,.07); color: #a7eaf4; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.zra-xprofile-field .description { margin: -1px 0 2px !important; color: #8f85aa !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.5 !important; }
.zra-xprofile-field fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.zra-xprofile-field .checkbox-options, .zra-xprofile-field .radio-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 4px; }
.zra-xprofile-field .checkbox-options label, .zra-xprofile-field .radio-options label { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.035); color: #d9d2ed !important; font-size: 10px !important; font-weight: 750 !important; cursor: pointer; }
.zra-xprofile-field input[type="checkbox"], .zra-xprofile-field input[type="radio"] { flex: 0 0 auto; width: 17px !important; height: 17px !important; margin: 0 !important; accent-color: var(--zra-purple); }
.zra-xprofile-field .wp-editor-wrap { position: relative !important; z-index: 1; overflow: hidden; width: 100%; margin-top: 3px; border: 1px solid rgba(190,169,245,.3); border-radius: 15px; background: #0c0624; box-shadow: inset 0 1px 9px rgba(0,0,0,.25); }
.zra-xprofile-field .wp-editor-tools { min-height: 34px; padding: 6px 7px 0; background: #171036; }
.zra-xprofile-field .wp-switch-editor { height: auto !important; margin: 0 3px !important; padding: 7px 10px !important; border: 0 !important; border-radius: 9px 9px 0 0 !important; background: rgba(255,255,255,.06) !important; color: #a99fc4 !important; font-size: 9px !important; font-weight: 900 !important; }
.zra-xprofile-field .html-active .switch-html, .zra-xprofile-field .tmce-active .switch-tmce { background: linear-gradient(135deg,var(--zra-purple),var(--zra-pink)) !important; color: #fff !important; }
.zra-xprofile-field .wp-editor-container { overflow: hidden; border: 0 !important; background: #0c0624 !important; }
.zra-xprofile-field .mce-tinymce, .zra-xprofile-field .mce-container, .zra-xprofile-field .mce-container-body, .zra-xprofile-field .mce-toolbar-grp, .zra-xprofile-field .quicktags-toolbar { border: 0 !important; background: #171036 !important; box-shadow: none !important; }
.zra-xprofile-field .mce-toolbar-grp, .zra-xprofile-field .quicktags-toolbar { padding: 6px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.zra-xprofile-field .mce-btn { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.zra-xprofile-field .mce-btn:hover, .zra-xprofile-field .mce-btn:focus, .zra-xprofile-field .mce-btn.mce-active { border-radius: 7px !important; background: rgba(117,81,242,.32) !important; }
.zra-xprofile-field .mce-ico, .zra-xprofile-field .mce-txt { color: #d8d0ef !important; text-shadow: none !important; }
.zra-xprofile-field iframe { min-height: 165px !important; background: #0c0624 !important; }
.zra-xprofile-field .wp-editor-area { min-height: 165px !important; border: 0 !important; border-radius: 0 !important; background: #0c0624 !important; color: #f5f2ff !important; font-family: Inter, Poppins, system-ui, sans-serif !important; line-height: 1.65 !important; }
.zra-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; color: #b5accd; font-size: 11px; font-weight: 650; line-height: 1.55; }
.zra-check input { flex: 0 0 auto; width: 17px !important; height: 17px !important; margin: 1px 0 0 !important; accent-color: var(--zra-purple); }
.zra-check a { color: #cbb9ff; font-weight: 850; }
.zra-account-summary { position: sticky; top: 22px; overflow: hidden; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: radial-gradient(circle at 50% 0, rgba(117,81,242,.3), transparent 34%), rgba(6,2,22,.55); }
.zra-mini-avatar { display: grid; place-items: center; height: 245px; margin-bottom: 21px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 19px; background: radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 1.5px); background-size: 23px 23px; }
#zra-summary-canvas { display: block; width: 100%; max-width: 245px; height: auto; filter: drop-shadow(0 20px 20px rgba(0,0,0,.35)); }
.zra-account-summary h3 { margin: 0 0 16px !important; color: #fff !important; font-size: 22px !important; font-weight: 900 !important; letter-spacing: -.025em !important; line-height: 1.1 !important; }
.zra-account-summary ul { display: grid; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.zra-account-summary li { display: flex; gap: 8px; color: #b6accd; font-size: 11px; line-height: 1.45; }.zra-account-summary li span { color: var(--zra-green); font-weight: 900; }

.zra-social-register { display: grid; justify-items: center; gap: 13px; padding: 0 clamp(20px,5vw,68px) 42px; }
.zra-social-register > span, .zra-divider span { color: #8e85a9; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.zra-social-register > div { display: grid; grid-template-columns: repeat(2, minmax(0,220px)); gap: 10px; width: min(100%,450px); }
.zra-social { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 47px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; color: #fff !important; text-decoration: none !important; box-shadow: 0 11px 25px rgba(0,0,0,.2); transition: transform .18s ease, filter .18s ease; }
.zra-social:hover { transform: translateY(-2px); filter: brightness(1.1); }.zra-social b { font-size: 12px; font-weight: 900; }.zra-social small { opacity: .72; font-size: 9px; }.zra-social--discord { background: linear-gradient(135deg,#5865f2,#754bde); }.zra-social--twitch { background: linear-gradient(135deg,#9146ff,#5e24b9); }

.zra-login-layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(390px,.72fr); gap: clamp(20px,4vw,52px); align-items: stretch; width: min(100%,1120px); min-height: 700px; margin: 0 auto; }
.zra-login-story { position: relative; overflow: hidden; padding: clamp(34px,6vw,70px); border: 1px solid var(--zra-line); border-radius: 32px; background: radial-gradient(circle at 18% 10%, rgba(82,223,244,.18), transparent 31%), radial-gradient(circle at 90% 12%, rgba(247,45,106,.23), transparent 30%), linear-gradient(145deg, rgba(48,31,104,.96), rgba(17,8,48,.96)); box-shadow: var(--zra-shadow); }
.zra-login-story::after { position: absolute; right: -13%; bottom: -25%; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 55px rgba(117,81,242,.045),0 0 0 115px rgba(117,81,242,.025); content: ""; }
.zra-login-story > * { position: relative; z-index: 2; }.zra-login-story h1 { max-width: 600px; margin: 16px 0 !important; color: #fff !important; font-size: clamp(45px,7vw,82px) !important; font-weight: 950 !important; letter-spacing: -.06em !important; line-height: .91 !important; }.zra-login-story > p:not(.zra-eyebrow) { max-width: 600px; margin: 0 !important; color: #c1b8d9 !important; font-size: 15px !important; line-height: 1.75 !important; }
.zra-world-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 27px; }.zra-world-pills span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(255,255,255,.055); color: #ddd5f1; font-size: 10px; font-weight: 850; }
.zra-login-card { align-self: center; padding: clamp(27px,4vw,43px); border: 1px solid rgba(255,255,255,.45); border-radius: 32px; background: rgba(255,255,255,.97); box-shadow: var(--zra-shadow); color: #231c3f; }.zra-login-logo { display: block; width: 180px; max-height: 105px; margin: 0 auto 25px; object-fit: contain; }.zra-login-card .zra-eyebrow { color: #7757d0 !important; }.zra-login-card h2 { margin: 0 !important; color: #211942 !important; font-size: 35px !important; font-weight: 930 !important; letter-spacing: -.04em !important; line-height: 1.05 !important; }.zra-login-copy { margin: 8px 0 25px !important; color: #756d88 !important; font-size: 13px !important; line-height: 1.55 !important; }.zra-login-card form { display: grid; gap: 17px; }.zra-login-card .zra-field > span:first-child { color: #30284d !important; }.zra-login-card .zra-field input { border-color: #ded8ea !important; background: #fbfaff !important; color: #241c3e !important; box-shadow: none !important; }.zra-login-card .zra-field input::placeholder { color: #a39caf; }.zra-login-card .zra-password-wrap button { color: #766aa0 !important; }.zra-login-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.zra-login-meta .zra-check { margin: 0; color: #625a77; }.zra-login-meta a { color: #7044e4; font-size: 11px; font-weight: 850; }.zra-primary-button--wide { width: 100% !important; }.zra-divider { display: flex; align-items: center; gap: 12px; margin: 25px 0 15px; }.zra-divider::before,.zra-divider::after { flex: 1; height: 1px; background: #e7e1ef; content: ""; }.zra-login-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.zra-join-line { margin: 23px 0 0 !important; color: #6e667d !important; font-size: 11px !important; text-align: center; }.zra-join-line a { color: #7044e4; font-weight: 850; }

.zra-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(100%,1280px); margin: 28px auto 0; padding: 17px 7px; color: #81789c; font-size: 10px; }.zra-footer p { margin: 0 !important; color: inherit !important; font-size: inherit !important; }.zra-footer nav { display: flex; flex-wrap: wrap; gap: 19px; }.zra-footer a { color: #9e94b7; font-weight: 750; text-decoration: none; }
.zra-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

@media (max-width: 1050px) {
  .zra-avatar-builder { grid-template-columns: 1fr; }.zra-avatar-preview { min-height: 520px; }.zra-canvas-wrap { min-height: 420px; }.zra-avatar-options { min-height: 560px; }.zra-account-layout { grid-template-columns: 1fr; }.zra-account-summary { position: static; display: grid; grid-template-columns: 210px 1fr; column-gap: 22px; }.zra-mini-avatar { grid-row: 1 / span 4; height: 220px; margin: 0; }.zra-login-layout { grid-template-columns: 1fr; min-height: 0; }.zra-login-story { min-height: 520px; }.zra-login-card { width: min(100%,560px); margin: -80px auto 0; position: relative; z-index: 5; }
}
@media (max-width: 720px) {
	.zra-shell { padding: 10px 10px 18px; }.zra-topbar { min-height: 62px; padding-left: 11px; border-radius: 18px; }.zra-brand img { max-width: 118px; height: 44px; }.zra-auth-switch a { min-width: 0; padding: 10px 12px; font-size: 11px; }.zra-main { margin-top: 16px; }.zra-register-card,.zra-login-story,.zra-login-card { border-radius: 24px; }.zra-register-heading { padding: 31px 20px 28px; }.zra-register-heading h1 { font-size: 40px !important; }.zra-register-heading > p:last-child { font-size: 13px !important; }.zra-steps { width: calc(100% - 16px); }.zra-steps li { gap: 5px; min-height: 58px; font-size: 10px; }.zra-steps b { width: 27px; height: 27px; }.zra-steps li::before { right: calc(50% + 29px); width: calc(100% - 58px); }.zra-step-panel { padding: 25px 15px 30px; }.zra-body-grid { grid-template-columns: 1fr; }.zra-body-choice { grid-template-rows: 300px auto auto; }.zra-body-choice:nth-child(2) { margin-top: 0; }.zra-avatar-builder { min-height: 0; }.zra-avatar-preview { min-height: 440px; padding: 12px; }.zra-canvas-wrap { min-height: 360px; }.zra-avatar-options { min-height: 520px; }.zra-category-tabs { grid-template-columns: repeat(5,88px); }.zra-option-grid { grid-template-columns: repeat(3,minmax(82px,1fr)); grid-auto-rows: 112px; }.zra-field-grid,.zra-extra-fields { grid-template-columns: 1fr; }.zra-field--full { grid-column: auto; }.zra-account-summary { display: block; }.zra-mini-avatar { height: 240px; margin-bottom: 18px; }.zra-step-actions { align-items: stretch; flex-direction: column-reverse; }.zra-step-actions .zra-primary-button,.zra-step-actions .zra-secondary-button { width: 100% !important; }.zra-social-register > div { grid-template-columns: 1fr; }.zra-login-story { min-height: 500px; padding: 34px 24px; }.zra-login-story h1 { font-size: 53px !important; }.zra-login-card { margin-top: -42px; padding: 30px 22px; }.zra-login-logo { width: 150px; }.zra-login-meta { align-items: flex-start; }.zra-footer { align-items: center; flex-direction: column; text-align: center; }
}
@media (max-width: 430px) {
  .zra-auth-switch a { padding-inline: 9px; }.zra-panel-title h2 { font-size: 29px !important; }.zra-option-grid { grid-template-columns: repeat(2,minmax(82px,1fr)); }.zra-login-socials { grid-template-columns: 1fr; }.zra-login-story { min-height: 530px; }.zra-login-story h1 { font-size: 47px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .zra-auth-page *, .zra-auth-page *::before, .zra-auth-page *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}