.profile-media-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.profile-media-modal.hidden { display: none; }
.profile-media-modal.is-suspended { opacity: 0; pointer-events: none; }
.profile-media-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.74); }
.profile-media-panel { position: relative; z-index: 1; width: min(92vw, 880px); background: #fff; border-radius: 28px; box-shadow: 0 25px 80px rgba(15,23,42,.28); padding: 22px; display: grid; gap: 18px; }
.profile-media-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.profile-media-head h2 { margin: 0 0 6px; }
.profile-media-close-btn { border: 0; background: #e2e8f0; width: 42px; height: 42px; border-radius: 999px; font-size: 24px; cursor: pointer; }
.profile-media-preview-box { height: min(48vh, 420px); border: 2px dashed #cbd5e1; background: #f8fafc; border-radius: 22px; padding: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.profile-media-preview-box img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; display: block; }
.profile-media-upload-controls { display: grid; gap: 14px; }
.profile-media-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.profile-media-primary, .profile-media-secondary { border: 0; border-radius: 16px; padding: 12px 18px; font-weight: 700; cursor: pointer; }
.profile-media-primary { background: #0f172a; color: #fff; }
.profile-media-secondary { background: #e2e8f0; color: #0f172a; }
.profile-media-status { min-height: 20px; color: #334155; font-size: 14px; }
.profile-media-progress { position: relative; height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.profile-media-progress.hidden { display: none; }
.profile-media-progress .upload-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg,#2563eb,#38bdf8); }