.profile-page{max-width:900px;margin:0 auto}
.profile-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:18px;align-items:start}
.profile-photo-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.profile-photo-preview{display:grid;width:132px;height:132px;place-items:center;overflow:hidden;border:4px solid color-mix(in srgb,var(--purple) 72%,var(--line));border-radius:50%;background:linear-gradient(145deg,var(--surface-soft),var(--surface-raised));color:var(--purple);box-shadow:0 14px 35px color-mix(in srgb,var(--purple) 20%,transparent),inset 0 1px 0 #fff2}
.profile-photo-preview img{width:100%;height:100%;object-fit:cover}
.profile-photo-preview svg{width:58px;height:58px;fill:none;stroke:currentColor;stroke-width:1.5}
.profile-photo-card h2{margin:0 0 7px;font-size:18px}.profile-photo-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}
.profile-photo-picker{width:100%;text-align:center}.profile-photo-card form,.profile-photo-card form button{width:100%}
.profile-details-form{margin:0}
.profile-crop-dialog{width:min(520px,calc(100vw - 24px));padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--surface-raised);color:var(--text);box-shadow:0 30px 90px #0009}
.profile-crop-dialog::backdrop{background:#050713b8;backdrop-filter:blur(7px)}
.profile-crop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.profile-crop-head h2{margin:4px 0 0}.profile-crop-head button{display:grid;width:38px;height:38px;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface-soft);color:var(--text);font-size:22px}
.profile-crop-dialog>p{margin:10px 0 16px;color:var(--muted);font-size:12px}
.profile-crop-stage{position:relative;width:min(320px,100%);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:18px;background:#080b18;touch-action:none;cursor:grab;user-select:none}.profile-crop-stage:active{cursor:grabbing}.profile-crop-stage canvas{display:block;width:100%;height:100%}.profile-crop-stage>span{position:absolute;inset:7%;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 999px #0507138f,0 0 0 5px #784cf040;pointer-events:none}
.profile-crop-zoom{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;margin:18px 0 9px}.profile-crop-zoom span{color:var(--text);font-size:11px;font-weight:750}.profile-crop-zoom input{padding:0;accent-color:var(--purple)}
.profile-crop-dialog>small{display:block;color:var(--muted);font-size:10px}.profile-crop-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.password-field{position:relative;display:block}.password-field input{padding-right:50px}.password-field button{position:absolute;top:50%;right:5px;display:grid;width:38px;height:38px;place-items:center;padding:0;transform:translateY(-50%);border:0;border-radius:8px;background:transparent;color:var(--muted)}.password-field button:hover{background:#ffffff0c;color:var(--text)}.password-field svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.remember-me{display:flex;grid-template-columns:none;align-items:center;gap:9px;cursor:pointer}.remember-me input{width:17px;height:17px;margin:0;accent-color:var(--purple)}.remember-me span{color:var(--muted);font-size:11px}
@media(max-width:720px){.profile-layout{grid-template-columns:1fr}.profile-photo-card{display:grid;grid-template-columns:92px minmax(0,1fr);text-align:left}.profile-photo-preview{grid-row:1/3;width:88px;height:88px}.profile-photo-card .profile-photo-picker,.profile-photo-card form{grid-column:1/-1;text-align:center}.profile-crop-dialog{padding:17px}.profile-crop-actions>*{flex:1}}