.image-picker { padding: 20px; border: 1px solid #345461; border-radius: 14px; background: #08212e; }
.image-picker input[type=file] { display: none; }
.image-picker [data-image-preview] { display: block; max-width: 100%; max-height: 240px; margin: 0 auto 16px; border-radius: 10px; object-fit: contain; }
.image-picker [hidden] { display: none; }
.image-picker-actions, .picture-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.image-picker button, .picture-actions button, .image-crop-dialog button { min-height: 44px; padding: 10px 16px; border: 1px solid #638995; border-radius: 7px; background: transparent; color: #eef8fa; font: 600 13px/1.4 Montserrat, sans-serif; cursor: pointer; }
.image-picker [data-image-choose], .picture-actions [type=submit], .image-crop-dialog .crop-primary { background: #ffe000; color: #001321; border-color: #ffe000; }
.image-picker button:disabled, .picture-actions button:disabled { opacity: .5; cursor: default; }
.image-picker small { display: block; color: #adc3cc; margin-top: 12px; }
.image-picker [data-image-status]:empty, #profile-picture-status:empty, #profile-message:empty { display: none; }
.profile-picture-section { margin: 28px 0; padding-bottom: 28px; border-bottom: 1px solid #294955; }
.profile-picture-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.profile-picture-heading h2 { margin: 0 0 8px; font-size: 25px; }
.profile-picture-heading p { margin: 0; color: #adc3cc; font-size: 13px; }
#profile-avatar .user-avatar { width: 96px; height: 96px; display: grid; place-items: center; background: #153b49; color: #83e8e4; font-size: 28px; border: 2px solid #3d6572; border-radius: 50%; overflow: hidden; }
#profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-picture-section [data-image-preview] { width: 160px; height: 160px; border-radius: 50%; }
.picture-actions { margin-top: 16px; }
.image-crop-dialog { box-sizing: border-box; width: min(94vw, 690px); max-height: 94dvh; overflow-y: auto; padding: 24px; background: #08212e; color: #eaf5f8; border: 1px solid #486b78; border-radius: 18px; }
.image-crop-dialog::backdrop { background: #001018df; }
.image-crop-dialog header, .image-crop-dialog footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.image-crop-dialog h2 { font: 700 26px/1.2 Montserrat, sans-serif; margin: 4px 0; letter-spacing: -.7px; text-transform: none; }
.crop-eyebrow { font-size: 10px; letter-spacing: 2px; color: #7ddedb; margin: 0; }
.image-crop-dialog #crop-help { font-size: 13px; color: #adc3cc; }
.crop-stage { display: grid; place-items: center; background: #00131d; border-radius: 10px; padding: 12px; min-height: 120px; }
.crop-stage canvas { max-width: 100%; max-height: 40dvh; width: auto; height: auto; touch-action: none; cursor: grab; }
.crop-stage canvas:active { cursor: grabbing; }
.crop-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 18px 0; }
.crop-controls label { display: grid; gap: 7px; font: 500 12px/1.5 Montserrat, sans-serif; }
.crop-controls label[hidden] { display: none; }
.crop-controls input { width: 100%; min-width: 0; accent-color: #6ce2dc; }
.crop-controls select { width: 100%; padding: 8px; color: #eef8fa; background: #001b28; border: 1px solid #638995; border-radius: 6px; }
.crop-tools { display: flex; gap: 10px; }
.image-crop-dialog footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid #345461; }
.image-crop-dialog :focus-visible, .image-picker :focus-visible, .picture-actions :focus-visible { outline: 3px solid #67e1dc; outline-offset: 3px; }
@media(max-width: 540px) { .image-crop-dialog { padding: 16px; } .image-crop-dialog h2 { font-size: 21px; } .profile-picture-heading { gap: 14px; } #profile-avatar .user-avatar { width: 76px; height: 76px; } }