.rpg-hero .rpg-cover-image,.rpg-cover-shade { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.rpg-hero .rpg-cover-image { object-fit:cover; object-position:center; }
.rpg-cover-shade { background:rgba(5,8,12,.72); }
.rpg-hero.has-progress-cover { color:#fff; background:#101217; }
.rpg-hero .rpg-hero-top { padding-right:48px; }
.rpg-hero .rpg-cover-edit { position:absolute; top:10px; right:10px; z-index:3; width:44px; height:44px; padding:10px; display:grid; place-items:center; color:#fff; background:#171c24; border:1px solid #657080; border-radius:6px; }
.rpg-cover-edit svg,.progress-cover-editor button svg { width:22px; height:22px; }
.progress-cover-editor { box-sizing:border-box; width:min(680px,calc(100% - 24px)); max-height:calc(100dvh - 32px); overflow:auto; margin:auto; padding:20px; border:1px solid #414851; border-radius:8px; background:#11151b; color:#f4f6f8; box-shadow:0 16px 64px #0008; }
.progress-cover-editor::backdrop { background:#000b; }
.profile-photo-crop { width:min(480px,calc(100% - 24px)); }
.profile-photo-crop .progress-cover-frame { width:min(100%, calc(100dvh - 270px)); margin-inline:auto; }
.profile-photo-crop .progress-cover-grid::after { content:''; position:absolute; inset:0; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 100px #0006; }
.profile-photo-crop [data-remove][hidden] { display:none; }
.profile-photo-crop footer { justify-content:flex-end; }
.progress-cover-editor header,.progress-cover-editor footer,.progress-cover-tools { display:flex; align-items:center; gap:12px; }
.progress-cover-editor header { justify-content:space-between; margin-bottom:16px; }
.progress-cover-editor h2 { font-size:20px; margin:0; letter-spacing:0; }
.progress-cover-editor button { min-height:44px; padding:10px 14px; border:1px solid #515a68; border-radius:6px; background:#212833; color:#f4f6f8; cursor:pointer; }
.progress-cover-editor button:disabled { opacity:.45; cursor:default; }
.progress-cover-editor [data-close],.progress-cover-tools button { width:44px; flex:none; padding:10px; display:grid; place-items:center; }
.progress-cover-frame { position:relative; aspect-ratio:2; background:#080b0e; border:2px solid #e9eef6; overflow:hidden; }
.progress-cover-frame canvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; }
.progress-cover-frame canvas:active { cursor:grabbing; }
.progress-cover-grid { position:absolute; inset:0; pointer-events:none; background:linear-gradient(to right,transparent 33%,#ffffff38 33%,#ffffff38 33.3%,transparent 33.3%,transparent 66.6%,#ffffff38 66.6%,#ffffff38 66.9%,transparent 66.9%),linear-gradient(to bottom,transparent 33%,#ffffff38 33%,#ffffff38 33.6%,transparent 33.6%,transparent 66.6%,#ffffff38 66.6%,#ffffff38 67.2%,transparent 67.2%); }
.progress-cover-frame [data-empty] { position:absolute; inset:0; display:grid; place-items:center; font-size:14px; padding:12px; text-align:center; }
.progress-cover-frame [data-empty][hidden] { display:none; }
.progress-cover-tools { margin-top:16px; }
.progress-cover-tools label { display:flex; flex:1; min-width:0; gap:10px; align-items:center; font-size:14px; }
.progress-cover-tools input[type=range] { width:100%; min-width:0; height:44px; accent-color:#f32b4f; padding:0; }
.progress-cover-error { color:#ffb1be; font-size:14px; margin:12px 0; min-height:20px; }
.progress-cover-editor footer { justify-content:space-between; flex-wrap:wrap; }
.progress-cover-editor [data-save] { background:#df1641; border-color:#df1641; }
.progress-cover-editor :focus-visible,.rpg-cover-edit:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (max-width:480px) { .progress-cover-editor { padding:14px; } .progress-cover-tools { gap:8px; } }