.profile-appearance-editor{--appearance-accent:#66d3e7;--appearance-border:rgba(145,199,238,.17);--appearance-surface:rgba(12,18,30,.82);padding-bottom:calc(var(--astra-nav-height,4.85rem) + 5.45rem + max(.75rem,env(safe-area-inset-bottom)))}

.profile-appearance-editor #profile-appearance-editor-root{display:grid;gap:.55rem;min-width:0}
.profile-appearance-editor header{display:flex;align-items:center;gap:.75rem}
.profile-appearance-editor h2,.profile-appearance-editor h3{margin:0}
.profile-appearance-editor h3{margin-top:1.15rem;font-size:1.08rem;line-height:1.25}
.profile-appearance-editor button{font:inherit}

.profile-appearance-profile-entry{width:100%;min-height:66px;margin:.7rem 0 .15rem;border:1px solid var(--appearance-border);border-radius:15px;background:var(--appearance-surface);color:inherit;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.65rem .75rem;text-align:left}
.profile-appearance-profile-entry>span:nth-child(2){display:grid;gap:.15rem}
.profile-appearance-profile-entry small{color:var(--muted-text,#9eacc1)}

.profile-appearance-preview{min-height:160px;display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:1rem;padding:.9rem;border:1px solid var(--appearance-border);border-radius:18px;overflow:hidden;background:#0b1421;box-shadow:inset 0 1px rgba(255,255,255,.025)}

.profile-appearance-preview>.profile-avatar-showcase{--showcase-size:128px!important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.34))}
.profile-appearance-preview-copy{display:grid;gap:.32rem;min-width:0}
.profile-appearance-preview-copy strong{font-size:1rem;line-height:1.25}
.profile-appearance-preview-copy small{color:var(--muted-text,#9eacc1);font-size:.82rem;line-height:1.4}

.profile-appearance-choices,.profile-appearance-frame-choices,.profile-appearance-background-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.45rem 0}
.profile-appearance-choice,.profile-appearance-frame-choice,.profile-appearance-background-choice,.profile-appearance-badge-choice{position:relative;min-width:0;border:1px solid var(--appearance-border);border-radius:14px;background:var(--appearance-surface);color:inherit;text-align:left;transition:border-color .16s ease,background-color .16s ease,transform .12s ease}
.profile-appearance-choice:active,.profile-appearance-frame-choice:active,.profile-appearance-background-choice:active,.profile-appearance-badge-choice:active{transform:scale(.985)}

.profile-appearance-choice[aria-pressed=true],.profile-appearance-frame-choice[aria-pressed=true],.profile-appearance-background-choice[aria-pressed=true],.profile-appearance-badge-choice[aria-pressed=true]{border-color:rgba(102,211,231,.68);background:linear-gradient(135deg,rgba(25,52,66,.84),rgba(12,20,32,.9));box-shadow:inset 0 0 0 1px rgba(102,211,231,.08)}
.profile-appearance-choice[aria-pressed=true]::after,.profile-appearance-frame-choice[aria-pressed=true]::after,.profile-appearance-background-choice[aria-pressed=true]::after{content:"\2713";position:absolute;top:.38rem;right:.38rem;z-index:3;width:1.15rem;height:1.15rem;border-radius:50%;display:grid;place-items:center;background:var(--appearance-accent);color:#07121c;font-size:.7rem;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.3)}

.profile-appearance-choice{min-height:82px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:.55rem;padding:.55rem}
.profile-appearance-choice>span{display:grid;gap:.12rem;min-width:0}
.profile-appearance-choice strong{font-size:.9rem;line-height:1.2}
.profile-appearance-choice small{color:var(--muted-text,#9eacc1);font-size:.74rem;line-height:1.25}
.profile-appearance-choice--inactive{opacity:.62}
.profile-appearance-choice img{width:42px;height:42px;border-radius:11px;object-fit:cover}
.profile-appearance-choice:not(:has(img))::before{content:"A";width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#172840,#0b1422);color:#9bdde9;font-weight:800}
.profile-appearance-choice[data-source=upload]::before{content:"\2191";font-size:1.3rem}
.profile-appearance-choice[data-source=telegram]::before{content:"T"}
.profile-appearance-choice[data-source=initial]::before{content:"A"}
.profile-appearance-upload-choice{cursor:pointer}
.profile-appearance-upload-choice:focus-within{outline:2px solid rgba(102,211,231,.46);outline-offset:2px}

.profile-appearance-preset-state{min-height:58px;display:grid;align-content:center;gap:.15rem;padding:.55rem .75rem;border:1px solid rgba(145,199,238,.12);border-radius:13px;background:rgba(12,18,30,.48)}
.profile-appearance-preset-state strong{font-size:.9rem}
.profile-appearance-preset-state small,.profile-appearance-privacy,.profile-appearance-feedback{font-size:.78rem;line-height:1.4;color:var(--muted-text,#9eacc1)}
.profile-appearance-privacy{margin:.1rem .15rem .25rem}

.profile-appearance-actions{position:fixed;z-index:19;left:50%;bottom:calc(max(.42rem,env(safe-area-inset-bottom)) + var(--astra-nav-height,4.85rem) + .42rem);transform:translateX(-50%);width:min(calc(100% - 2rem),50rem);min-height:68px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:.55rem;padding:.55rem;border:1px solid rgba(145,199,238,.17);border-radius:17px;background:rgba(8,14,24,.9);box-shadow:0 -8px 28px rgba(0,0,0,.22),0 10px 32px rgba(0,0,0,.34);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.profile-appearance-actions button{min-height:48px;border:1px solid rgba(145,199,238,.18);border-radius:12px;background:rgba(24,34,49,.9);color:#dbe7f2;font-weight:750}
.profile-appearance-actions .primary-button{border-color:rgba(98,216,255,.5);background:linear-gradient(135deg,#147b96,#15657e);color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.13)}
.profile-appearance-actions button:disabled{opacity:.46;box-shadow:none}
.profile-appearance-state{display:grid;gap:.85rem;padding:2.5rem 0;text-align:center}

.profile-appearance-discard{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(2,7,14,.76)}
.profile-appearance-discard-card{width:min(360px,100%);padding:20px;border:1px solid #2a4264;border-radius:18px;background:#0b1423;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.profile-appearance-discard-card p{margin:0 0 18px;font-size:17px;font-weight:700}
.profile-appearance-discard-actions{display:flex;gap:10px}
.profile-appearance-discard-actions button{flex:1;min-height:44px}

.profile-appearance-file-input{position:absolute;inset:0;width:100%;height:100%;opacity:.001;cursor:pointer}
.profile-appearance-avatar-error,.profile-appearance-crop-error{margin:.1rem 0 .25rem;padding:.6rem .7rem;border:1px solid rgba(255,112,125,.36);border-radius:12px;background:rgba(91,27,39,.34);color:#ffc6cc;font-size:.78rem;line-height:1.4}
.profile-appearance-avatar-error::before,.profile-appearance-crop-error::before{content:"!";display:inline-grid;place-items:center;width:1.1rem;height:1.1rem;margin-right:.4rem;border-radius:50%;background:rgba(255,112,125,.18);font-weight:900}
.profile-appearance-crop-error[hidden]{display:none}
.profile-appearance-crop-open .profile-appearance-actions,.profile-appearance-crop-open .bottom-nav{visibility:hidden;pointer-events:none}
.profile-appearance-crop-overlay{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:rgba(2,7,14,.88)}
.profile-appearance-crop-dialog{width:min(460px,100%);max-height:calc(100dvh - 32px - env(safe-area-inset-bottom));overflow:auto;padding:18px;border:1px solid #2a4264;border-radius:20px;background:#0b1423;box-shadow:0 24px 80px rgba(0,0,0,.65)}
.profile-appearance-crop-dialog h3{margin:0 0 6px}
.profile-appearance-crop-dialog>p{margin:0 0 14px;color:var(--muted-text,#9eacc1)}
.profile-appearance-crop-dialog>.profile-appearance-crop-error{color:#ffc6cc}
.profile-appearance-crop-viewport{position:relative;width:min(360px,calc(100vw - 68px));aspect-ratio:1;overflow:hidden;margin:0 auto 16px;border:2px solid #73d9e7;border-radius:18px;background:#080d16;touch-action:none}
.profile-appearance-crop-viewport::after{content:"";position:absolute;inset:33.333%;border:1px solid rgba(255,255,255,.3);box-shadow:0 0 0 999px rgba(2,7,14,.08);pointer-events:none}
.profile-appearance-crop-viewport img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;object-fit:fill;user-select:none;pointer-events:none}
.profile-appearance-crop-dialog label{display:grid;gap:8px;margin:0 0 14px}
.profile-appearance-crop-dialog input[type=range]{width:100%;min-height:44px}
.profile-appearance-crop-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.profile-appearance-crop-actions button{min-height:44px;border:1px solid #38516f;border-radius:10px;background:#15243a;color:#eef6ff}
.profile-appearance-crop-actions .primary-button{grid-column:1/-1;border-color:#63d5e5;background:#176f88;color:#fff}

@media(max-width:22rem){.profile-appearance-editor{padding-bottom:calc(var(--astra-nav-height,4.35rem) + 5.2rem + max(.65rem,env(safe-area-inset-bottom)))}
.profile-appearance-preview{grid-template-columns:112px minmax(0,1fr);gap:.7rem;padding:.7rem;min-height:144px}
.profile-appearance-preview>.profile-avatar-showcase{--showcase-size:112px!important}
.profile-appearance-actions{width:calc(100% - 1.25rem);bottom:calc(max(.42rem,env(safe-area-inset-bottom)) + var(--astra-nav-height,4.35rem) + .35rem);padding:.45rem;gap:.4rem}
.profile-appearance-choice{grid-template-columns:36px minmax(0,1fr);padding:.45rem}
.profile-appearance-choice img,.profile-appearance-choice:not(:has(img))::before{width:36px;height:36px}
.profile-appearance-choice strong{font-size:.82rem}
.profile-appearance-crop-overlay{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.profile-appearance-crop-dialog{padding:12px}
.profile-appearance-crop-viewport{width:min(270px,calc(100vw - 48px));border-radius:14px}
.profile-appearance-crop-actions{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){.profile-appearance-choice,.profile-appearance-frame-choice,.profile-appearance-background-choice,.profile-appearance-badge-choice{transition:none}
}
