.account-main{padding-block:62px 90px;min-height:75vh;animation:enter-up .7s var(--ease) both}
.account-heading{display:flex;align-items:center;justify-content:center;text-align:center;gap:24px;margin-bottom:38px}
.account-heading .eyebrow{margin-bottom:14px;justify-content:center}.account-heading h1{font-size:clamp(2.6rem,5vw,4.25rem);line-height:1.12;letter-spacing:-.055em;font-weight:500;margin:0}.account-heading>p{color:var(--muted);margin:0;font-size:1rem;line-height:1.8}
.account-main h2,.account-main h3,.account-dialog h2{font-weight:500;letter-spacing:-.035em}.muted{color:var(--muted)}.micro-label{font-size:.625rem;letter-spacing:.13em;font-weight:600;color:var(--muted)}
.connection-message{padding:30px;border:1px solid var(--line);border-radius:12px;color:var(--muted);animation:soft-pulse 2s ease-in-out infinite}
.auth-panel{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}.auth-intro{position:relative;padding:48px;background:radial-gradient(ellipse at 0% 100%,#b1c6ff0a,transparent 65%);display:flex;flex-direction:column}.auth-intro h2{font-size:clamp(2.2rem,4vw,3.8rem);line-height:1.17;margin:25px 0;letter-spacing:-.05em}.auth-intro h2 span{color:var(--accent)}.auth-intro>p{color:var(--muted);max-width:370px;line-height:1.85}.auth-diagram{display:flex;align-items:center;gap:14px;max-width:350px;padding:30px 0 20px;margin-top:auto;font-size:.625rem;letter-spacing:.12em}.auth-diagram i{height:1px;flex:1;background:linear-gradient(90deg,#b1c6ff11,var(--accent),#b1c6ff11);background-size:200% 100%;animation:connection-flow 4s linear infinite}.diagram-core{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid #b1c6ff44;border-radius:12px;color:var(--accent);font-size:1rem}.auth-intro .auth-footnote{font-size:.75rem;max-width:none}.auth-card{padding:36px 48px 45px;border-left:1px solid var(--line);background:#14151a}.auth-card h2{font-size:1.8rem;margin:28px 0 5px}.auth-card>.muted{margin:0 0 25px;font-size:.9375rem}.auth-tabs{display:flex;padding:4px;gap:4px;background:#0c0d10;border:1px solid var(--line);border-radius:8px}.auth-tabs button{flex:1;padding:11px;border:0;background:transparent;color:var(--muted);border-radius:5px;font-size:.875rem;transition:background .25s,color .25s,box-shadow .25s}.auth-tabs button[aria-pressed=true]{background:#252831;color:var(--text);box-shadow:0 3px 12px #0003}
.account-main fieldset,.account-dialog fieldset{border:0;padding:0;margin:0;min-width:0}.account-main label,.account-dialog label{display:block;font-size:.8125rem;margin-bottom:8px;font-weight:600}.account-main input,.account-main select,.account-dialog input{width:100%;min-width:0;padding:12px 14px;background:#0c0d11;color:var(--text);border:1px solid #343741;border-radius:6px;font:400 1rem/1.5 var(--font);transition:border-color .25s,box-shadow .25s}.account-main input:focus,.account-main select:focus,.account-dialog input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #b1c6ff12}.account-main small,.account-dialog small{display:block;color:var(--muted);font-size:.6875rem;line-height:1.7;margin-top:7px}.account-main input+label,.account-main small+label,.account-main .password-field+div:not([hidden]) label{margin-top:22px}.password-field{position:relative}.password-field input{padding-right:95px}.password-field button{position:absolute;right:6px;top:5px;bottom:5px;padding:0 9px;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:.75rem}.password-field button:hover{color:var(--text)}.auth-submit{width:100%;justify-content:center;margin-top:8px}.form-error{color:#ffb5b5;font-size:.8125rem;line-height:1.7;overflow-wrap:anywhere}.form-error:empty{display:none}.banner-error{padding:14px 18px;border:1px solid #ffb5b53d;border-radius:8px;background:#31171955}.account-main button:disabled,.account-dialog button:disabled{opacity:.45;cursor:default;transform:none}.account-main fieldset:disabled{opacity:.65}
.account-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 24px;margin-bottom:26px;border-bottom:1px solid var(--line)}.account-identity{display:flex;gap:14px;align-items:center;min-width:0}.identity-mark{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #b1c6ff33;border-radius:10px;background:#b1c6ff0a;color:var(--accent)}.account-identity>div{min-width:0}.account-identity strong{display:block;font-size:.9375rem;overflow-wrap:anywhere}.account-identity #sync-status{display:block;font-size:.6875rem;color:var(--muted);margin-top:2px}.toolbar-actions{display:flex;gap:12px;flex:none}.quiet-button{background:transparent;border:1px solid transparent;border-radius:6px;padding:9px 12px;color:var(--muted);font-size:.8125rem;transition:background .25s,color .25s,border-color .25s}.quiet-button:hover{background:#ffffff06;color:var(--text);border-color:var(--line)}
.cabinet-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:24px}.character-sidebar{min-width:0}.sidebar-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.sidebar-heading h2{font-size:1rem;margin:0}.character-list{display:flex;flex-direction:column;gap:8px;max-height:550px;overflow:auto;scrollbar-width:thin;padding:3px}.character-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:16px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface);transition:background .25s,border-color .25s,transform .3s var(--ease)}.character-card:hover{background:var(--raised);transform:translateX(2px)}.character-card[aria-pressed=true]{border-color:#b1c6ff77;background:linear-gradient(110deg,#b1c6ff12,#b1c6ff04)}.character-card .character-initial{display:grid;place-items:center;flex:none;width:34px;height:38px;background:#ffffff07;border:1px solid #ffffff09;border-radius:5px;color:var(--accent);font-size:.75rem}.character-card>span:last-child{min-width:0}.character-card strong{display:block;font-size:.8125rem;font-weight:600;overflow-wrap:anywhere}.character-card small{font-size:.625rem;margin-top:3px}.character-card .active-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--accent);margin-right:5px}.new-character{display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px dashed #424651;border-radius:8px;width:100%;padding:14px 10px;margin-top:12px;font-size:.8125rem;color:var(--muted);transition:color .25s,border-color .25s,background .25s}.new-character:hover{background:#ffffff03;color:var(--text);border-color:var(--accent)}.new-character>span{font-size:1.2rem}.sidebar-note{font-size:.6875rem;color:#818591;line-height:1.8;padding:0 5px}
.character-workspace{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}.detail-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:25px 28px;border-bottom:1px solid var(--line)}.detail-heading h2{font-size:1.5rem;margin:4px 0 0;overflow-wrap:anywhere}.detail-heading>div{min-width:0}.detail-heading .button{font-size:.6875rem;min-height:38px;padding:9px 12px;flex:none}.character-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.skin-column{min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:radial-gradient(ellipse at 50% 40%,#b1c6ff07,transparent 65%)}.skin-stage{position:relative;isolation:isolate;height:425px;min-height:320px;display:flex;align-items:center;justify-content:center;overflow:hidden}.skin-stage::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse,black,transparent 72%)}.stage-label{position:absolute;left:22px;right:22px;top:22px;display:flex;justify-content:space-between;gap:10px;color:#7e8392;font-size:.5625rem;letter-spacing:.12em}.skin-stage canvas{width:100%;height:340px;max-width:100%;cursor:grab;touch-action:pan-y;z-index:1}.skin-stage canvas:active{cursor:grabbing}.skin-stage canvas:focus-visible{outline:1px solid var(--accent);outline-offset:-12px}.skin-platform{position:absolute;bottom:68px;width:145px;height:28px;border:1px solid #b1c6ff22;border-radius:50%;background:#b1c6ff03;box-shadow:0 10px 30px #0006;z-index:-1}.stage-controls{position:absolute;bottom:18px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:.625rem;z-index:2}.stage-controls button{background:#15171c;border:1px solid var(--line);border-radius:5px;width:32px;height:32px;font-size:1.2rem;color:var(--muted);transition:background .25s,color .25s}.stage-controls button:hover{color:var(--accent);background:var(--raised)}#skin-fallback{max-width:250px;padding:25px;color:var(--muted);font-size:.8125rem;text-align:center}.character-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:auto 22px 24px;padding-top:20px;border-top:1px solid var(--line)}.character-stats dt{color:var(--muted);font-size:.6875rem}.character-stats dd{margin:5px 0 0;font-size:1rem;overflow-wrap:anywhere}
.character-form{min-width:0;padding:24px}.editor-section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.editor-section-heading h3{margin:0;font-size:.9375rem;letter-spacing:0}.editor-section-heading>span{font-size:.625rem;color:#737987}.name-level{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.name-level input{padding:10px;font-size:.875rem}.skin-heading{padding-top:24px;margin-top:24px;border-top:1px solid var(--line)}.upload-control{position:relative}.upload-control input{position:absolute;inset:0;opacity:0;z-index:2;cursor:pointer;padding:0}.upload-control label{display:flex;align-items:center;gap:12px;border:1px dashed #474c59;border-radius:7px;padding:14px 12px;background:#ffffff02;margin:0;transition:border-color .25s,background .25s}.upload-control:hover label,.upload-control:focus-within label{border-color:var(--accent);background:#b1c6ff07}.upload-control strong{display:block;font-size:.8125rem;font-weight:500}.upload-control small{font-size:.625rem;margin:2px 0 0;overflow-wrap:anywhere}.upload-control label>span:nth-child(2){min-width:0;flex:1}.upload-icon{font-size:1.4rem;color:var(--accent)}.character-form select{font-size:.8125rem;padding:11px}.text-button{padding:0;background:none;border:0;color:var(--muted);font-size:.6875rem;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .25s,text-decoration-color .25s}.text-button:hover{color:var(--text);text-decoration-color:currentColor}#reset-skin{margin:10px 0 0}.save-row{display:flex;align-items:center;gap:6px;margin-top:24px}.save-row .button{font-size:.8125rem;min-height:43px;padding:10px 16px}.save-hint{font-size:.625rem;color:var(--muted);margin:9px 0 0;line-height:1.7}.detail-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 28px;border-top:1px solid var(--line);font-size:.6875rem;color:var(--muted)}.danger-text{color:#dca0a0}.danger-text:hover{color:#ffd1d1}.empty-state{padding:75px 25px;text-align:center;min-height:540px;display:flex;flex-direction:column;justify-content:center;align-items:center}.empty-symbol{display:grid;place-items:center;border:1px solid #b1c6ff33;border-radius:18px;width:72px;height:72px;font-size:2rem;color:var(--accent);margin-bottom:20px}.empty-state h2{margin:5px 0;font-size:2rem}.empty-state>p:not(.micro-label){color:var(--muted);font-size:.9375rem;max-width:300px;margin:10px 0 25px}
.account-dialog{color:var(--text);background:#16181e;border:1px solid #424753;border-radius:12px;padding:28px;width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;box-shadow:0 30px 100px #000a;font-family:var(--font)}.account-dialog::backdrop{background:#050609bb;backdrop-filter:blur(7px)}.account-dialog[open]{animation:dialog-enter .25s var(--ease)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top button{width:32px;height:32px;background:transparent;color:var(--muted);border:0;font-size:1.6rem}.account-dialog h2{font-size:1.8rem;margin:20px 0 10px;line-height:1.25}.account-dialog p{font-size:.875rem}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:26px}.dialog-actions .button{min-height:44px;font-size:.8125rem;padding:10px 16px}.account-dialog.danger-dialog .button-primary{background:#e9b3b3}.account-dialog input{margin-top:4px}
@keyframes connection-flow{to{background-position:200% 0}}@keyframes soft-pulse{50%{opacity:.55}}@keyframes dialog-enter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(min-width:1500px){.skin-stage{height:465px}}
@media(max-width:1100px){.cabinet-layout{grid-template-columns:195px minmax(0,1fr);gap:16px}.character-editor-layout{grid-template-columns:1fr}.skin-column{border-right:0;border-bottom:1px solid var(--line)}.skin-stage{height:360px}.skin-stage canvas{height:300px}.character-stats{margin:0 24px 20px}.auth-card,.auth-intro{padding:32px}.detail-heading{padding:22px}.detail-heading h2{font-size:1.2rem}.detail-heading .button{max-width:145px;text-align:center}.skin-platform{bottom:45px}}
@media(max-width:767px){.account-main{padding-block:38px 60px}.account-heading{display:block;margin-bottom:28px}.account-heading>p{margin-top:17px;font-size:.875rem}.account-heading>p br{display:none}.auth-panel{grid-template-columns:1fr}.auth-intro{padding:26px}.auth-intro h2{font-size:2.4rem;margin:15px 0}.auth-intro h2 br{display:none}.auth-intro h2 br::after{content:" "}.auth-intro h2 span{display:block}.auth-intro>p{font-size:.875rem;margin:0}.auth-diagram{padding:20px 0 12px;max-width:none}.auth-intro .auth-footnote{display:none}.auth-card{border-left:0;border-top:1px solid var(--line);padding:25px}.auth-card h2{font-size:1.6rem}.cabinet-layout{grid-template-columns:1fr;gap:20px}.character-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:260px;gap:8px}.character-card{padding:12px 9px;gap:8px}.character-card .character-initial{width:24px;height:30px;font-size:.625rem}.character-card strong{font-size:.75rem}.sidebar-heading{margin-bottom:10px}.sidebar-note{margin-bottom:0}.account-toolbar{gap:8px}.toolbar-actions{gap:2px}.toolbar-actions .quiet-button{padding:8px;font-size:.6875rem}.identity-mark{width:34px;height:38px}.account-identity{gap:9px}.account-identity strong{font-size:.8125rem}.account-identity #sync-status{font-size:.5625rem;max-width:155px}.detail-heading{padding:20px}.character-form{padding:22px}.detail-footer{padding:16px 20px;flex-wrap:wrap}.skin-stage{height:380px}.skin-stage canvas{height:320px}.skin-platform{bottom:62px}.empty-state{min-height:350px;padding:40px 20px}.account-dialog{padding:24px}}
@media(prefers-reduced-motion:reduce){.account-main,.account-main *,.account-dialog,.account-dialog *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}