.avatar-crop-dialog{box-sizing:border-box;width:720px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:24px;border:1px solid #45535e;border-radius:16px;background:#181d20;color:#eaf0f4;box-shadow:0 24px 80px #0008;overflow:auto;font:14px/1.5 system-ui,sans-serif}
.avatar-crop-dialog::backdrop{background:#070c10b8;backdrop-filter:blur(4px)}
.avatar-crop-dialog h2{font-size:22px;font-weight:700;line-height:1.4;margin:0 0 18px}
.avatar-crop-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.avatar-crop-heading h2{margin:0}
.avatar-crop-dialog .avatar-crop-hint{color:#a8b7c1;font-size:13px;margin:0 0 18px}
.avatar-crop-body{display:flex;gap:24px;align-items:stretch}
.avatar-crop-canvas{display:block;width:320px;height:320px;max-width:100%;flex:none;touch-action:none;cursor:grab;border-radius:8px;outline-offset:4px}
.avatar-crop-canvas.dragging{cursor:grabbing}
.avatar-crop-preview-panel{flex:1;min-width:0;box-sizing:border-box;padding:20px 24px;text-align:center;background:#20282e;border:1px solid #3b4851;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:14px}
.avatar-crop-preview{display:block;width:144px;height:144px;border-radius:50%}
.avatar-crop-canvas,.avatar-crop-preview{background-color:#28323a;background-image:conic-gradient(#34414b 25%,transparent 0 50%,#34414b 0 75%,transparent 0);background-size:16px 16px}
.avatar-crop-preview-panel p{color:#a8b7c1;font-size:13px;margin:0}
.avatar-crop-preview-panel p+p{margin-top:-10px}
.avatar-crop-controls{display:flex;align-items:center;gap:8px;margin-top:18px}
.avatar-crop-controls label{width:auto;flex:none;white-space:nowrap;margin:0;padding:0}
.avatar-crop-controls input[type=range]{flex:1;min-width:60px;width:auto;accent-color:#efb47c;box-shadow:none;padding:0;height:24px;border:0;background:transparent}
.avatar-crop-controls output{width:44px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.avatar-crop-dialog button{box-sizing:border-box;width:auto;flex:0 0 auto;min-height:38px;white-space:nowrap;padding:0 16px;border:1px solid #45535e;border-radius:7px;background:#252f37;color:#eaf0f4;font:inherit;cursor:pointer}
.avatar-crop-dialog button:hover{background:#33424d}
.avatar-crop-dialog button:focus-visible,.avatar-crop-canvas:focus-visible{outline:2px solid #efb47c;outline-offset:3px}
.avatar-crop-dialog button.avatar-crop-save{background:#efb47c;color:#211b14;border-color:#efb47c}
.avatar-crop-dialog button.avatar-crop-save:hover{background:#ffc48c}
.avatar-crop-dialog footer{display:flex;align-items:center;gap:8px;width:auto;max-width:none;margin:18px 0 0;padding:0;border:0}
.avatar-crop-dialog footer span{flex:1;min-width:0;font-size:13px;color:#a8b7c1;white-space:nowrap}
@media(max-width:640px){.avatar-crop-dialog{padding:18px}.avatar-crop-body{flex-direction:column;align-items:center;gap:16px}.avatar-crop-preview-panel{width:100%;display:grid;grid-template-columns:64px 1fr;gap:6px 14px;text-align:left;padding:14px}.avatar-crop-preview{width:64px;height:64px;grid-column:1;grid-row:1/4}.avatar-crop-preview-panel strong,.avatar-crop-preview-panel p{grid-column:2}.avatar-crop-preview-panel p+p{margin:0}.avatar-crop-controls{flex-wrap:wrap}.avatar-crop-controls input[type=range]{flex-basis:60%}.avatar-crop-dialog footer{flex-wrap:wrap}.avatar-crop-dialog footer span{flex-basis:100%}}
.account-main dialog.profile-dialog{box-sizing:border-box;width:480px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:0;border:1px solid #45535e;border-radius:12px;background:#1d2328;color:#eaf0f4;overflow:auto}
.account-main dialog.profile-dialog[open]{display:flex;flex-direction:column}
.account-main .profile-dialog>header{padding:16px 24px;border-bottom:1px solid var(--line)}
.account-main .profile-dialog>header h2{font-size:18px}
.account-main .profile-dialog>form{padding:0 24px 24px;display:flex;flex-direction:column}
.account-main .profile-dialog .avatar-picker{margin:24px 0}
.account-main .profile-dialog .avatar-picker small{max-width:280px;line-height:1.6}
.account-main .profile-dialog #nickname{height:48px;box-sizing:border-box}
.account-main .profile-dialog #profile-message{margin:14px 0 0}
.account-main .profile-dialog #profile-message:empty{display:none}
.account-main .profile-dialog .dialog-actions{margin-top:24px;display:flex;justify-content:flex-end;gap:8px}
.account-main .profile-dialog button,.account-main .profile-dialog .avatar-file-label{box-sizing:border-box;min-height:40px;padding:0 16px;border:1px solid #45535e;border-radius:7px;background:#252f37;color:#eaf0f4;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.account-main .profile-dialog button:hover,.account-main .profile-dialog .avatar-file-label:hover{background:#33424d}
.account-main .profile-dialog button[type=submit]{background:#efb47c;color:#211b14;border-color:#efb47c}
.account-main .profile-dialog button[type=submit]:hover{background:#ffc48c}
.account-main .profile-dialog #close-profile{width:38px;min-height:38px;padding:0;font-size:22px}