.avatar-builder-page{--ab-purple:#ab80ff;--ab-purple-bright:#c3a0ff;--ab-ink:#f7f0ff;--ab-muted:#b7aac9;--ab-panel:#252033;--ab-line:rgba(201,166,255,.16);max-width:1260px;margin-inline:auto;padding-bottom:30px;color:var(--ab-ink)}
.ab-page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:24px 0 26px}.ab-eyebrow{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:#c4a2f9}.ab-page-heading h1{margin:0 0 9px;font-size:clamp(28px,3vw,42px);letter-spacing:-.035em;line-height:1.13}.ab-intro{color:var(--ab-muted);font-size:15px;margin:0;line-height:1.55}.ab-back-link{display:inline-flex;align-items:center;gap:9px;color:#d6c0ff;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none}.ab-back-link:hover{color:#fff}.ab-back-link>span{font-size:22px}.ab-workshop{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(450px,1.28fr);align-items:start;gap:22px}.ab-workshop[hidden],.avatar-builder-page [hidden]{display:none!important}.ab-stage-panel,.ab-editor-panel{border:1px solid var(--ab-line);border-radius:24px;background:var(--ab-panel);overflow:hidden;box-shadow:0 18px 60px rgba(8,5,20,.18)}.ab-stage-panel{position:sticky;top:88px;background:radial-gradient(ellipse at 40% 31%,#453160 0%,#2b223d 45%,#211c2e 85%)}.ab-stage-topline{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:24px 24px 0}.ab-stage-topline h2{margin:0;font-size:17px;line-height:1.3}.ab-live-indicator{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;white-space:nowrap;color:#c7b6da}.ab-live-indicator>span{width:5px;height:5px;border-radius:50%;background:#a4ebce;box-shadow:0 0 10px #a4ebce}.ab-preview-stage{position:relative;display:grid;place-items:center;min-height:390px;margin:15px 18px 0;isolation:isolate}.ab-full-preview{position:relative;display:block;width:min(100%,350px);height:auto;aspect-ratio:3/4;z-index:2;object-fit:contain;filter:drop-shadow(0 15px 22px rgba(14,4,27,.18))}.ab-stage-orbit{position:absolute;inset:12% 0 7%;border:1px solid rgba(206,167,255,.11);border-radius:50%;transform:rotate(-13deg);z-index:0}.ab-stage-orbit:before,.ab-stage-orbit:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#c093ff;box-shadow:0 0 17px #bf8eff}.ab-stage-orbit:before{top:14%;left:13%}.ab-stage-orbit:after{bottom:17%;right:10%;width:4px;height:4px;background:#7bd6de}.ab-identity-preview{position:relative;z-index:3;display:flex;align-items:center;gap:12px;margin:0 24px 20px;padding:15px 0;border-top:1px solid rgba(206,167,255,.14)}.ab-identity-preview strong{display:block;font-size:16px;overflow-wrap:anywhere}.ab-identity-preview div>span{display:block;color:var(--ab-muted);font-size:11px;margin-top:5px;line-height:1.4}.ab-portrait-ring{flex:0 0 56px;width:56px;height:56px;display:block;border-radius:19px;overflow:hidden;border:2px solid #b68af2;background:#332641;box-shadow:0 0 0 4px rgba(177,122,255,.09)}.ab-portrait-ring img{display:block;width:100%;height:100%;object-fit:cover}.ab-stage-actions{display:flex;align-items:center;gap:9px;padding:0 24px 24px}.avatar-builder-page button{font-family:inherit;cursor:pointer}.ab-small-button,.ab-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(194,155,246,.24);border-radius:12px;color:#e2d1fb;background:rgba(125,84,181,.11);min-height:43px;font-size:12px;font-weight:700;padding:10px 14px;text-decoration:none}.ab-stage-actions>.ab-small-button{flex:1}.ab-icon-button{width:43px;padding:10px;flex-shrink:0}.ab-small-button svg,.ab-icon-button svg,.ab-save-button svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ab-small-button:hover,.ab-icon-button:hover{border-color:#ac82e2;background:rgba(150,98,216,.24)}.avatar-builder-page button:disabled{cursor:default;opacity:.4}.avatar-builder-page button:focus-visible,.avatar-builder-page a:focus-visible{outline:3px solid #dac2ff;outline-offset:4px}.ab-editor-heading{padding:26px 26px 18px;display:flex;align-items:center;justify-content:space-between;gap:15px}.ab-editor-heading h2{margin:0;font-size:19px;letter-spacing:-.02em}.ab-editor-heading p{margin:0;font-size:11px;color:#bbacd0;text-align:right;line-height:1.5}.ab-category-tabs{display:flex;gap:7px;flex-wrap:wrap;padding:0 24px 20px;border-bottom:1px solid var(--ab-line)}.ab-tab{display:inline-flex;align-items:center;gap:7px;min-height:40px;border:1px solid transparent;border-radius:11px;background:#31283f;color:#c8badb;font-size:12px;font-weight:700;padding:8px 11px}.ab-tab svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.ab-tab:hover{border-color:#7c609c;color:#f8f0ff}.ab-tab[aria-selected=true]{color:#251b37;background:#c29cfa;box-shadow:0 4px 16px rgba(159,105,238,.18);border-color:#d5b9ff}.ab-editor-content{padding:22px 25px 25px;min-height:365px}.ab-field{border:0;margin:0 0 25px;padding:0;min-width:0}.ab-field:last-child{margin-bottom:0}.ab-field>legend{padding:0;margin-bottom:13px;font-size:13px;font-weight:800;color:#eee2ff;display:flex;align-items:center;justify-content:space-between;width:100%}.ab-field>legend>span{font-weight:500;font-size:11px;color:#b9a7ce;padding-left:12px;text-align:right}.ab-options-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ab-option{position:relative;min-width:0;border:1px solid rgba(212,173,255,.1);padding:7px 6px 8px;border-radius:13px;color:#c7b9d9;background:#30283d;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:4px}.ab-option:hover{border-color:rgba(190,141,255,.6);background:#393047}.ab-option[aria-pressed=true]{border-color:#c197ff;background:#443058;box-shadow:inset 0 0 0 1px #c197ff}.ab-option:after{content:"";position:absolute;top:8px;right:8px;width:14px;height:14px;border-radius:50%;background:#bc92f4;opacity:0}.ab-option[aria-pressed=true]:after{content:"✓";font-size:10px;line-height:14px;color:#241730;opacity:1;font-weight:900}.ab-option img{display:block;width:100%;height:75px;object-fit:contain}.ab-option>span{font-size:10px;font-weight:700;line-height:1.25;min-height:24px;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;overflow-wrap:anywhere}.ab-swatches{display:flex;flex-wrap:wrap;gap:10px;padding:2px 0 3px}.ab-swatch{position:relative;width:35px;height:35px;border-radius:50%;border:2px solid rgba(255,255,255,.1);background:var(--swatch);box-shadow:0 2px 6px rgba(0,0,0,.15)}.ab-swatch:hover{transform:scale(1.1)}.ab-swatch[aria-pressed=true]{box-shadow:0 0 0 3px #252033,0 0 0 5px #ccacff}.ab-swatch[aria-pressed=true]:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:var(--swatch-ink,#fff);font-size:14px;font-weight:900}.ab-save-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 25px;background:#211b2e;border-top:1px solid var(--ab-line)}.ab-save-status{margin:0;color:#d9c5f5;font-size:13px;font-weight:700;line-height:1.5}.ab-save-hint{margin:5px 0 0;color:#9f8caf;font-size:10px;line-height:1.5}.ab-save-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #d3b3ff;border-radius:13px;min-height:48px;padding:13px 18px;background:linear-gradient(125deg,#d1b0ff,#ae7fe8);box-shadow:0 5px 20px rgba(173,119,234,.18);color:#271735;font-size:14px;font-weight:900}.ab-save-button:hover{background:linear-gradient(125deg,#e0c6ff,#c198f2);box-shadow:0 6px 27px rgba(189,135,255,.3)}.ab-save-button:disabled{opacity:.65}.ab-message{border:1px solid var(--ab-line);border-radius:14px;padding:18px 21px;background:#2e253d;color:#dfcaee;font-size:14px;line-height:1.5}.ab-loading{display:flex;align-items:center;gap:13px;min-height:85px}.ab-spinner{width:22px;height:22px;border:2px solid #684d82;border-top-color:#c9a7ff;border-radius:50%;animation:ab-spin 1s linear infinite}.ab-error{border-color:#88525c;color:#ffd4db;background:#392331}.ab-error p{margin:0 0 12px;line-height:1.55}.ab-save-error{margin:15px 24px 24px}.public-avatar-look{display:flex;align-items:center;justify-content:center;gap:36px;padding:26px;margin-top:28px;border-radius:20px;border:1px solid rgba(190,139,246,.2);background:radial-gradient(ellipse at 70% 40%,#433251,#292430 70%)}.public-avatar-look h2{margin:0;font-size:25px}.public-avatar-full{display:block;width:min(38vw,270px);height:auto;max-height:360px;aspect-ratio:3/4;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(0,0,0,.15))}
@keyframes ab-spin{to{transform:rotate(360deg)}}
@media(min-width:1400px){.ab-options-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.ab-full-preview{width:350px}.ab-stage-panel{top:96px}}
@media(max-width:1100px){.ab-workshop{grid-template-columns:minmax(260px,.76fr) minmax(380px,1.24fr);gap:16px}.ab-stage-topline{padding:20px 18px 0;flex-wrap:wrap;gap:6px}.ab-stage-actions{padding:0 18px 20px;gap:6px}.ab-small-button{font-size:11px;padding-inline:10px}.ab-identity-preview{margin-inline:18px}.ab-editor-heading{padding:22px 20px 18px}.ab-category-tabs{padding-inline:18px}.ab-tab{padding-inline:9px;font-size:11px}.ab-editor-content{padding-inline:20px}.ab-save-bar{padding-inline:20px}.ab-save-button{padding-inline:13px;font-size:12px}.ab-options-grid{gap:8px}}
@media(max-width:820px){.ab-workshop{grid-template-columns:minmax(0,1fr)}.ab-stage-panel{position:static;display:grid;grid-template-columns:minmax(200px,.8fr) minmax(210px,1fr);grid-template-rows:auto 1fr auto}.ab-stage-topline{grid-column:1/-1;padding:19px 21px 0;flex-wrap:nowrap}.ab-preview-stage{grid-row:2/4;grid-column:1;min-height:240px;margin:3px 8px 10px 15px}.ab-full-preview{max-height:290px;width:auto;max-width:100%}.ab-identity-preview{align-self:end;margin:20px 20px 15px 0;padding:12px 0;border-top:0}.ab-stage-actions{grid-column:2;align-self:start;flex-wrap:wrap;padding:0 20px 22px 0}.ab-stage-actions>.ab-small-button{flex-basis:100%;flex-grow:1}.ab-icon-button{flex:1}.ab-editor-content{min-height:0}.ab-options-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.ab-page-heading{margin-top:18px}.ab-intro{font-size:13px}}
@media(max-width:540px){.avatar-builder-page{padding-bottom:18px}.ab-page-heading{display:block;margin:18px 0 20px}.ab-eyebrow{font-size:10px}.ab-page-heading h1{font-size:31px}.ab-back-link{margin-top:13px;font-size:12px}.ab-stage-panel,.ab-editor-panel{border-radius:18px}.ab-stage-panel{display:block}.ab-stage-topline{padding:17px 18px 0}.ab-stage-topline h2{font-size:15px}.ab-live-indicator{font-size:9px}.ab-preview-stage{min-height:260px;margin:8px 22px 0}.ab-full-preview{height:300px;width:225px;max-height:300px}.ab-identity-preview{margin:0 20px 12px;justify-content:center;padding:12px 0;border-top:1px solid var(--ab-line)}.ab-identity-preview strong{font-size:15px}.ab-identity-preview div>span{font-size:10px}.ab-portrait-ring{width:46px;height:46px;flex-basis:46px;border-radius:15px}.ab-stage-actions{padding:0 18px 19px;flex-wrap:nowrap;gap:7px}.ab-stage-actions>.ab-small-button{flex-basis:auto;font-size:11px}.ab-stage-actions>.ab-icon-button{flex:0 0 41px;min-height:41px;width:41px}.ab-editor-heading{display:block;padding:20px 18px 15px}.ab-editor-heading h2{font-size:18px}.ab-editor-heading p{text-align:left;margin-top:6px;font-size:10px}.ab-category-tabs{padding:0 15px 16px;gap:6px}.ab-tab{min-height:37px;padding:7px 9px;font-size:11px;gap:5px}.ab-tab svg{width:14px;height:14px}.ab-editor-content{padding:20px 17px}.ab-field>legend{font-size:12px;margin-bottom:12px}.ab-field>legend>span{font-size:10px;max-width:50%}.ab-options-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.ab-option img{height:65px}.ab-option>span{font-size:9px;min-height:22px}.ab-option{border-radius:11px;padding:5px 4px 7px}.ab-swatches{gap:10px}.ab-swatch{width:31px;height:31px}.ab-save-bar{display:block;padding:18px}.ab-save-button{width:100%;margin-top:13px;font-size:14px}.ab-save-hint{font-size:10px}.ab-save-error{margin:14px 17px 18px}.public-avatar-look{padding:20px;gap:12px;flex-direction:column}.public-avatar-look h2{font-size:20px}.public-avatar-full{width:240px;max-height:320px}}
@media(prefers-reduced-motion:reduce){.ab-spinner{animation:none}.ab-swatch:hover{transform:none}}