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(18, 19, 18, 0.9), rgba(58, 56, 50, 0.7), rgba(17, 18, 17, 0.95)), 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.25); backdrop-filter: blur(9px); }
.application-header { position: absolute; top: 0; right: 0; left: 0; z-index: 8; 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.58), 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.46); 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; overflow: hidden; }
.application-stage::after { position: absolute; top: 49%; left: 50%; width: min(58vw, 900px); height: 45vh; z-index: 0; content: ""; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(225, 213, 177, 0.2), transparent 68%); filter: blur(12px); }
.application-weapon-scene { position: absolute; inset: 2% 0 8%; z-index: 2; display: grid; place-items: center; transform: scale(var(--application-zoom, 1)); transform-origin: 50% 50%; transition: transform 120ms ease-out; }
.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)); pointer-events: none; user-select: none; }
.application-sticker-preview { position: absolute; z-index: 5; width: 58px; height: 58px; object-fit: contain; transform: translate(-50%, -50%) rotate(var(--sticker-rotation, 0deg)) scale(var(--sticker-scale, 1)); transform-origin: center; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.68)); pointer-events: none; user-select: none; }
.application-sticker-preview.application-current-custom { z-index: 7; outline: 1px solid rgba(238, 244, 237, 0.4); outline-offset: 5px; }
.application-sticker-preview.is-selected-applied { filter: drop-shadow(0 0 6px rgba(228, 236, 225, 0.85)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.68)); }
.application-sticker-preview.is-draggable, .application-charm-preview.is-draggable { cursor: grab; pointer-events: auto; touch-action: none; }
.application-sticker-preview.is-draggable:active, .application-charm-preview.is-draggable:active { cursor: grabbing; }
.application-charm-preview { position: absolute; z-index: 7; width: 74px; height: 74px; object-fit: contain; transform: translate(-50%, -34%); filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.65)); pointer-events: none; user-select: none; }
.application-charm-preview.application-current-custom { outline: 1px solid rgba(238, 244, 237, 0.42); outline-offset: 5px; }
.application-nameplate-preview { position: absolute; z-index: 6; left: 52%; top: 58%; display: grid; min-width: 128px; padding: 5px 10px 6px; transform: translate(-50%, -50%) rotate(-4deg); border: 1px solid rgba(226, 216, 184, 0.4); background: linear-gradient(180deg, #9d9272, #6f674f); color: #efe8d1; box-shadow: 0 5px 8px rgba(0, 0, 0, 0.4); }
.application-nameplate-preview span { font-size: 7px; letter-spacing: 0.11em; opacity: 0.65; }
.application-nameplate-preview strong { max-width: 160px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.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: 9; top: 104px; right: 0; bottom: 0; width: min(390px, 27vw); min-width: 330px; padding: 24px 22px 88px; overflow-y: auto; border-left: 1px solid rgba(255, 255, 255, 0.07); background: rgba(17, 18, 17, 0.86); }
.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: 250px; overflow-y: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding-right: 4px; }
.application-picker-empty { grid-column: 1 / -1; padding: 24px 8px; color: rgba(255, 255, 255, 0.38); font-size: 10px; letter-spacing: 0.08em; text-align: center; }
.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-placement-section, .application-scrape-section { margin-top: 18px; }
.application-control-label, .application-scrape-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: rgba(244, 242, 233, 0.46); font-size: 9px; letter-spacing: 0.1em; }
.application-control-label strong, .application-scrape-output { color: rgba(246, 245, 238, 0.88); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.application-range-control { margin-top: 13px; }
.application-control-range, .application-scrape-range { width: 100%; height: 22px; margin-top: 5px; cursor: pointer; appearance: none; background: transparent; }
.application-control-range::-webkit-slider-runnable-track, .application-scrape-range::-webkit-slider-runnable-track { height: 4px; background: rgba(255, 255, 255, 0.13); }
.application-scrape-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, #75a8bd var(--scrape-progress), rgba(255, 255, 255, 0.13) var(--scrape-progress)); }
.application-control-range::-webkit-slider-thumb, .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-control-range::-moz-range-track, .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-control-range::-moz-range-thumb, .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-placement-buttons { display: flex; align-items: center; margin-top: 11px; gap: 6px; }
.application-preset, .application-zoom { height: 32px; cursor: pointer; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.72); font-size: 9px; letter-spacing: 0.06em; }
.application-preset { flex: 1; padding: 0 10px; text-align: left; }
.application-zoom { width: 32px; font-size: 16px; }
.application-zoom-readout { min-width: 42px; color: rgba(255, 255, 255, 0.48); font-size: 9px; text-align: center; }
.application-scrape-section p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.34); font-size: 8px; line-height: 1.35; letter-spacing: 0.06em; }
.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: 7px; }
.application-apply, .application-remove, .application-cancel { min-width: 0; height: 42px; padding: 2px 12px 0; cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; }
.application-apply { flex: 1; background: linear-gradient(180deg, #789b42, #5f8133); color: #fff; }
.application-remove { background: linear-gradient(180deg, #9b4c43, #783a34); color: #fff; }
.application-cancel { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.64); }
.application-apply:disabled, .application-remove:disabled { cursor: not-allowed; opacity: 0.35; }
.application-image-fallback { display: grid; place-content: center; color: rgba(255, 255, 255, 0.35); }