body.application-screen-open { overflow: hidden; }
.application-screen { position: fixed; inset: 0; z-index: 210; min-width: 980px; min-height: 640px; overflow: clip; color: rgba(246, 244, 235, 0.94); background: linear-gradient(90deg, rgba(19, 20, 19, 0.87), rgba(67, 63, 53, 0.72), rgba(18, 19, 18, 0.93)), url("../assets/mirage-background.png") center / cover; isolation: isolate; }
.application-screen::before { position: absolute; inset: 0; z-index: -1; content: ""; background: rgba(20, 20, 18, 0.28); backdrop-filter: blur(9px); }
.application-header { position: absolute; top: 0; right: 0; left: 0; z-index: 5; display: flex; height: 104px; align-items: center; justify-content: space-between; padding: 0 clamp(48px, 5.5vw, 105px); background: linear-gradient(180deg, rgba(8, 9, 8, 0.55), transparent); }
.application-heading { display: flex; align-items: center; gap: 15px; }
.application-heading > img { width: 28px; height: 28px; opacity: 0.74; filter: invert(1); }
.application-heading > div { display: grid; }
.application-heading span { color: rgba(242, 240, 231, 0.42); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; }
.application-heading h1 { margin: -1px 0 0; font-size: 29px; font-weight: 400; letter-spacing: 0.04em; }
.application-close { display: grid; width: 38px; height: 38px; place-items: center; cursor: pointer; background: rgba(13, 14, 13, 0.35); }
.application-close img { width: 16px; height: 16px; opacity: 0.75; filter: invert(1); }
.application-close:hover { background: rgba(255, 255, 255, 0.08); }
.application-stage { position: absolute; top: 100px; right: min(390px, 27vw); bottom: 0; left: 0; display: grid; place-items: center; }
.application-stage::after { position: absolute; top: 50%; left: 50%; width: min(58vw, 900px); height: 45vh; content: ""; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(225, 213, 177, 0.2), transparent 68%); filter: blur(12px); }
.application-weapon { position: relative; z-index: 2; width: min(58vw, 980px); height: min(58vh, 600px); object-fit: contain; filter: drop-shadow(0 28px 20px rgba(0, 0, 0, 0.52)); }
.application-applied-stickers { position: absolute; z-index: 4; bottom: 20%; left: 50%; display: flex; transform: translateX(-50%); gap: 7px; }
.application-applied-stickers img { width: 51px; height: 51px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.65)); }
.application-charm-preview { position: absolute; z-index: 5; right: 23%; bottom: 24%; width: 75px; height: 75px; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.6)); }
.application-weapon-copy { position: absolute; z-index: 4; bottom: 60px; left: clamp(48px, 5.5vw, 105px); display: grid; }
.application-weapon-copy strong { color: #fff; font-size: 18px; line-height: 20px; }
.application-weapon-copy span { color: rgba(255, 255, 255, 0.58); font-size: 13px; }
.application-panel { position: absolute; z-index: 6; top: 104px; right: 0; bottom: 0; width: min(390px, 27vw); min-width: 330px; padding: 24px 22px; border-left: 1px solid rgba(255, 255, 255, 0.07); background: rgba(17, 18, 17, 0.84); }
.application-panel-title { margin-bottom: 10px; color: rgba(244, 242, 233, 0.48); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; }
.application-picker { display: grid; max-height: calc(100vh - 300px); overflow-y: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-right: 4px; }
.application-option { position: relative; display: grid; min-width: 0; aspect-ratio: 1 / 1.08; padding: 5px; cursor: pointer; background: rgba(100, 100, 95, 0.36); }
.application-option::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: ""; background: var(--option-rarity); }
.application-option img { width: 100%; height: calc(100% - 17px); object-fit: contain; }
.application-option span { overflow: hidden; color: rgba(255, 255, 255, 0.72); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.application-option.is-selected { outline: 2px solid rgba(242, 245, 241, 0.88); background: rgba(128, 128, 119, 0.5); }
.application-slots-section { margin-top: 18px; }
.application-slots-section > span { color: rgba(244, 242, 233, 0.42); font-size: 9px; letter-spacing: 0.1em; }
.application-slots { display: flex; margin-top: 7px; gap: 5px; }
.application-slot { width: 41px; height: 34px; cursor: pointer; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.58); font-size: 12px; }
.application-slot.is-selected { color: #d9eff8; background: rgba(56, 125, 153, 0.7); outline: 1px solid rgba(144, 204, 227, 0.6); }
.application-slot.is-occupied { cursor: not-allowed; background: rgba(24, 24, 23, 0.7); color: rgba(255, 255, 255, 0.22); text-decoration: line-through; }
.application-scrape-section { margin-top: 18px; }
.application-scrape-label { display: flex; align-items: center; justify-content: space-between; color: rgba(244, 242, 233, 0.46); font-size: 9px; letter-spacing: 0.1em; }
.application-scrape-output { color: rgba(246, 245, 238, 0.88); font-size: 13px; font-weight: 600; }
.application-scrape-range { width: 100%; height: 22px; margin-top: 7px; cursor: pointer; appearance: none; background: transparent; }
.application-scrape-range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, #75a8bd var(--scrape-progress), rgba(255, 255, 255, 0.13) var(--scrape-progress)); }
.application-scrape-range::-webkit-slider-thumb { width: 13px; height: 18px; margin-top: -7px; appearance: none; border: 1px solid rgba(255, 255, 255, 0.55); background: #d6d9d4; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); }
.application-scrape-range::-moz-range-track { height: 4px; background: rgba(255, 255, 255, 0.13); }
.application-scrape-range::-moz-range-progress { height: 4px; background: #75a8bd; }
.application-scrape-range::-moz-range-thumb { width: 13px; height: 18px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 0; background: #d6d9d4; }
.application-scrape-section p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.34); font-size: 8px; letter-spacing: 0.075em; }
.application-name-input { width: 100%; height: 43px; padding: 3px 12px 0; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.22); color: #fff; font-size: 15px; letter-spacing: 0.04em; }
.application-name-wrap p { margin: 7px 0 0; color: rgba(255, 255, 255, 0.35); font-size: 8px; letter-spacing: 0.08em; }
.application-actions { position: absolute; right: 22px; bottom: 24px; left: 22px; display: flex; gap: 8px; }
.application-apply, .application-cancel { height: 42px; padding-top: 2px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; }
.application-apply { flex: 1; background: linear-gradient(180deg, #789b42, #5f8133); color: #fff; }
.application-cancel { width: 96px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.64); }
.application-image-fallback { display: grid; place-content: center; color: rgba(255, 255, 255, 0.35); }