/* Display-name effects; inherited by both profile previews and the DM nameplate. */
.styled-name{--name-c1:#63e8dc;--name-c2:#be64ff;--name-c3:#f5acdb;--name-c4:#fdcf80;--name-c5:#80e5ce;display:inline-block;line-height:1.4;transform-origin:center;isolation:isolate}
.profile .name button.styled-name,.dm-name.styled-name,.name-live.styled-name{background:none;color:var(--name-c1);-webkit-text-fill-color:var(--name-c1);text-shadow:none;overflow:visible;animation:none;-webkit-text-stroke:0;max-width:100%;overflow-wrap:anywhere}
.profile .name button.styled-name[data-name-effect=gradient],.dm-name.styled-name[data-name-effect=gradient],.name-live[data-name-effect=gradient]{background:linear-gradient(100deg,var(--name-c1),var(--name-c2),var(--name-c1));background-size:200% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:name-gradient 5s ease-in-out infinite}
.profile .name button.styled-name[data-name-effect=neon],.dm-name.styled-name[data-name-effect=neon],.name-live[data-name-effect=neon]{color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 0 3px var(--name-c1),0 0 9px var(--name-c1),0 0 16px var(--name-c1);animation:name-neon 4s linear infinite}
.profile .name button.styled-name[data-name-effect=toon],.dm-name.styled-name[data-name-effect=toon],.name-live[data-name-effect=toon]{color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:3px var(--name-c1);paint-order:stroke fill;text-shadow:1px 2px 0 #17131d;stroke-linejoin:round}
.profile .name button.styled-name[data-name-effect=pop],.dm-name.styled-name[data-name-effect=pop],.name-live[data-name-effect=pop]{color:#fff;-webkit-text-fill-color:#fff;-webkit-text-stroke:1px #161119;paint-order:stroke fill;text-shadow:1px 3px 0 var(--name-c1),2px 4px 0 var(--name-c1);animation:name-pop 3s ease-in-out infinite}
.profile .name button.styled-name[data-name-effect=gummy],.dm-name.styled-name[data-name-effect=gummy],.name-live[data-name-effect=gummy]{color:var(--name-c1);-webkit-text-fill-color:var(--name-c1);text-shadow:0 -1px 0 #ffffffb3,0 2px 0 color-mix(in srgb,var(--name-c1) 65%,black),0 3px 3px #0005;animation:name-gummy 3.2s ease-in-out infinite}
.profile .name button.styled-name[data-name-effect=prism],.dm-name.styled-name[data-name-effect=prism],.name-live[data-name-effect=prism]{background:linear-gradient(110deg,var(--name-c1),var(--name-c2),var(--name-c3),var(--name-c4),var(--name-c5),var(--name-c1));background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:name-prism 5s linear infinite}
.dm-name.styled-name{font-size:14px;white-space:nowrap}.profile-light .styled-name{filter:brightness(.68) saturate(1.1)}
@keyframes name-gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes name-neon{0%,15%,19%,23%,25%,52%,100%{opacity:1}17%,21%{opacity:.6}54%{opacity:.8}}@keyframes name-pop{0%,78%,100%{transform:translateY(0)}84%{transform:translateY(-1px)}90%{transform:translateY(1px)}}@keyframes name-gummy{0%,65%,100%{transform:scale(1)}73%{transform:scale(1.045,.93)}81%{transform:scale(.98,1.045)}89%{transform:scale(1.015,.98)}}@keyframes name-prism{0%{background-position:0 50%}100%{background-position:100% 50%}}
.profile-badges{display:flex;flex-wrap:wrap;align-items:center;gap:3px;width:max-content;max-width:100%;margin-top:10px;padding:4px 6px;border-radius:7px;background:#19151e66;min-height:27px}.profile-badges[hidden]{display:none}.profile-badges .profile-badge{width:22px;height:22px;display:grid;place-items:center;padding:1px;background:transparent;border:0;border-radius:4px}.profile-badge img{width:20px;height:20px;object-fit:contain}.profile-badge:hover{background:#ffffff26}.profile-badge:focus-visible{outline:2px solid #9a7ed4;outline-offset:2px}.profile-light .profile-badges,.color-surface-light #profile-dark .profile-badges{background:#0000000d}
.generator-bar .identity-tools{display:grid;grid-template-columns:1.3fr 1fr;gap:7px;width:100%;grid-column:1/-1}.generator-bar .identity-tools button{padding:8px;background:#e6deef;border:1px solid #cbbbdc;color:#59416f;border-radius:9px;min-height:35px;font-size:12px;font-weight:600}.generator-bar .identity-tools button:hover{background:#d9cce9}
.identity-studio{width:min(870px,calc(100vw - 32px));max-width:870px;max-height:90dvh;padding:24px;background:#28242e;border:1px solid #4e445c;border-radius:16px;color:#e9e5ef;overflow:auto}.identity-studio-header{display:flex;justify-content:space-between;align-items:start;gap:16px}.identity-studio-header h2{font-size:22px;margin:3px 0 20px;line-height:28px}.identity-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.3px;color:#a79aae}.identity-studio-header>button{border:0;background:#ffffff0d;color:#bdb2c9;border-radius:8px;width:30px;height:30px;font-size:23px;padding:0;margin:0}.name-style-layout{display:grid;grid-template-columns:1fr 300px;gap:28px}.identity-studio h3{font-size:12px;font-weight:600;margin:4px 0 12px;color:#d0c6da}.name-font-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:20px}.identity-studio .name-font-grid button{background:#211d28;border:1px solid #443b50;border-radius:9px;padding:8px 3px;margin:0;color:#d0c9d8;min-height:65px;display:grid;place-items:center;gap:4px}.name-font-grid button>span{font-size:24px;line-height:29px}.name-font-grid small{font:9px 'gg sans',sans-serif;line-height:12px}.name-effect-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:20px}.identity-studio .name-effect-grid button{padding:9px 2px;margin:0;background:#211d28;border:1px solid #443b50;border-radius:7px;color:#d5c8e4;font-size:11px;min-height:36px}.identity-studio button[aria-pressed=true]{border-color:#a58af1!important;box-shadow:0 0 0 1px #a58af1;background:#3b2e51!important}.identity-studio button:focus-visible,.identity-studio select:focus-visible{outline:3px solid #ae8fe9;outline-offset:3px}.name-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.identity-studio .name-presets button{width:52px;height:26px;border:1px solid #ffffff40;border-radius:15px;margin:0;padding:0}.name-color-pickers{display:flex;gap:10px;flex-wrap:wrap}.name-color-pickers label{display:grid;gap:5px;font-size:10px;color:#bdb1c9}.name-color-pickers label[hidden]{display:none}.name-color-pickers input{width:47px;height:34px;border:1px solid #6a587e;padding:3px;background:#211d28;border-radius:8px;cursor:pointer}.name-style-live{align-self:start;position:sticky;top:0}.style-preview-dark,.style-preview-light{padding:22px 18px;border-radius:12px;background:linear-gradient(#3c284b,#17131d);min-height:165px}.style-preview-light{background:#e8e4ed;min-height:110px;margin-top:12px}.name-live{font-size:27px;font-weight:700;margin-top:12px;max-width:100%;overflow-wrap:anywhere}.style-preview-light .name-live{filter:brightness(.6)}.name-style-live p{font-size:11px;color:#aa9db7;line-height:17px}.mini-nameplate{display:flex;align-items:center;gap:9px;padding:8px 10px;background:linear-gradient(90deg,#2a2633,#6b5396);border-radius:8px;margin-top:16px;min-width:0}.mini-nameplate img{width:27px;height:27px;object-fit:cover;border-radius:50%}.mini-nameplate .name-live{font-size:15px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.identity-studio .footer{margin-top:24px;gap:8px;flex-wrap:wrap}.identity-studio .footer button{font-size:12px;padding:9px 13px}.identity-studio .identity-studio-error{color:#f3b8be;font-size:12px;margin:12px 0 0}.badge-preview-note{color:#b5a7c2;font-size:12px;line-height:18px;margin:0 0 20px}.badge-editor-layout{display:grid;grid-template-columns:1fr 240px;gap:24px}.badge-filter-row{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}.badge-filter-row label{display:grid;gap:6px;font-size:11px;color:#baabc8}.badge-filter-row select{background:#211d28;color:#e5dfee;border:1px solid #55435f;border-radius:7px;padding:8px;font:inherit;min-width:170px}.badge-selection-count{font-size:11px;color:#aa9db7}.badge-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-height:400px;overflow:auto;padding:2px;scrollbar-width:thin}.identity-studio .badge-option{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:7px;background:#211d28;color:#c8bad5;border:1px solid #483b55;border-radius:9px;padding:9px 5px;margin:0;min-height:86px;font-size:10px;line-height:13px;text-align:center}.badge-option img{width:31px;height:31px}.badge-detail{text-align:center;align-self:start;padding:25px 16px;background:#211d28;border-radius:12px}.badge-detail>img{width:90px;height:90px;object-fit:contain}.badge-detail h3{font-size:18px;margin:18px 0 8px}.badge-detail p{font-size:12px;color:#ad9abd}.badge-detail small{display:block;font-size:11px;color:#8d7a9f;line-height:17px;margin-top:26px}
@media(min-width:1181px){.controls-column .controls-caption,.controls-column .single-generators>.section-hint{display:none}.controls-column .generator-bar{gap:6px}.controls-column .single-generators button{min-height:33px;padding:5px 7px}.controls-column .color-mood-hint{font-size:9px;line-height:12px}}
@media(max-width:700px){.identity-studio{padding:18px}.name-style-layout,.badge-editor-layout{grid-template-columns:1fr}.name-style-live{position:static;display:grid;grid-template-columns:1fr 1fr;gap:10px}.style-preview-light{margin:0}.name-style-live p{grid-column:1/-1;margin:0}.name-style-live .name-live{font-size:20px}.mini-nameplate{display:none}.badge-detail{display:none}.badge-options{grid-template-columns:repeat(4,minmax(0,1fr));max-height:350px}.name-font-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.name-effect-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.styled-name{animation:none!important}}
.name-style-live .identity-eyebrow{display:block}.style-preview-light{min-height:165px}.style-preview-light .mini-nameplate{background:linear-gradient(90deg,#dcd6e7,#c6b8dd)}
@media(max-width:700px){.name-style-live .mini-nameplate{display:flex;padding:7px;gap:6px}.name-style-live .mini-nameplate img{width:22px;height:22px}.name-style-live .mini-nameplate .name-live{font-size:12px;min-width:0}.style-preview-dark,.style-preview-light{padding:16px 12px}}
/* Badge family browser: one category icon opens only that category's variants. */
.badge-families-editor .badge-editor-layout{grid-template-columns:205px minmax(0,1fr);gap:24px}.badge-family-navigation{border-right:1px solid #493d53;padding-right:20px}.badge-family-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.identity-studio .badge-family{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:1px solid #493d53;background:#211d28;border-radius:9px;color:#d6cce0;margin:0;padding:12px 5px;font-size:10px;line-height:13px;min-height:94px}.badge-family img{width:30px;height:30px;object-fit:contain}.badge-family small{font-size:9px;color:#9587a2}.badge-family.has-selection:after{content:'✓';position:absolute;right:5px;top:4px;color:#bd9ef4;font-size:12px}.badge-family-navigation .badge-selection-count{font-size:11px;margin:14px 0 0;color:#b8a5c9}.badge-family-heading h3{font-size:17px;margin:0 0 5px}.badge-family-heading p{font-size:11px;color:#a995bb;margin:0 0 16px}.badge-families-editor .badge-detail{display:flex;align-items:center;gap:16px;text-align:left;padding:16px 18px;margin-bottom:16px;min-height:100px}.badge-families-editor .badge-detail>img{width:60px;height:60px;flex:0 0 60px}.badge-families-editor .badge-detail h3{font-size:17px;margin:0 0 6px}.badge-families-editor .badge-detail p{margin:0;font-size:11px}.badge-families-editor .badge-detail small{margin-top:8px;font-size:10px}.badge-families-editor .badge-options{grid-template-columns:repeat(4,minmax(0,1fr));max-height:310px}.badge-families-editor .badge-option{min-height:82px}.badge-families-editor .badge-none{border-style:dashed;color:#a591b8}.badge-families-editor .footer{justify-content:flex-end}.badge-families-editor .footer [data-clear]{margin-right:auto}
@media(max-width:700px){.badge-families-editor .badge-editor-layout{grid-template-columns:1fr;gap:18px}.badge-family-navigation{border:0;padding:0}.badge-family-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.identity-studio .badge-family{min-height:78px;padding:9px 4px}.badge-family img{width:25px;height:25px}.badge-families-editor .badge-detail{display:flex}.badge-families-editor .badge-options{max-height:250px}.badge-family-navigation .badge-selection-count{margin-top:8px}}