.skins5-preview-switch {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(0, 0, 0, .22);
}

.skins5-preview-switch button {
    border: 0;
    border-radius: 6px;
    padding: 7px 11px;
    color: #aaa;
    background: transparent;
    font-size: 12px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, opacity .15s ease;
}

.skins5-preview-switch button.active {
    color: #fff;
    background: #3e6b91;
}

.skins5-preview-switch button:hover:not(:disabled) { color: #fff; background: #344f68; }
.skins5-preview-switch button:focus-visible,
.sticker-slot-modal:focus-visible,
.skins5-sticker-picker-trigger:focus-visible,
.skins5-mobile-controls:focus-visible,
.skins5-sticker-picker-card:focus-visible,
.sticker-card:focus-visible { outline: 3px solid rgba(66, 153, 225, .55); outline-offset: 2px; }
.skins5-preview-switch button:disabled { opacity: .58; cursor: progress; }

.skins5-beta-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 999px;
    color: #c9e6ff;
    background: rgba(62, 107, 145, .46);
    font-size: 10px;
    text-transform: uppercase;
    vertical-align: 1px;
}

.skins5-three-stage {
    position: relative;
    display: none;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 310px;
    max-height: 520px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: radial-gradient(circle at 50% 42%, #2f4054, #111923 72%);
    touch-action: pan-y;
}

.skins5-three-stage.active { display: block; }
.skins5-three-stage canvas { display: block; width: 100%; height: 100%; }

.skins5-three-toolbar {
    position: absolute;
    z-index: 3;
    top: 10px;
    right: 10px;
}
.skins5-three-toolbar[hidden] { display: none !important; }

.skins5-three-toolbar button {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 7px;
    padding: 6px 9px;
    color: #e6edf5;
    background: rgba(24,35,48,.82);
    font-size: 12px;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.skins5-three-toolbar button:hover { background: #3e6b91; }
.skins5-three-toolbar button:focus-visible { outline: 3px solid rgba(66,153,225,.55); outline-offset: 2px; }

.skins5-three-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #ddd;
    background: rgba(10, 10, 14, .72);
    text-align: center;
    pointer-events: none;
}

.skins5-three-status:not([hidden])::before {
    content: '';
    width: 18px;
    height: 18px;
    margin-right: 9px;
    border: 2px solid rgba(255,255,255,.25);
    border-top-color: #7db5e3;
    border-radius: 50%;
    animation: skins5-spin .8s linear infinite;
}

@keyframes skins5-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .skins5-three-status:not([hidden])::before { animation: none; }
}

.skins5-three-status.error { color: #ffb9b9; }
.skins5-three-status[hidden] { display: none; }

.skins5-three-note {
    max-width: 560px;
    margin: 8px 0 0;
    color: #999;
    font-size: 13px;
    line-height: 1.45;
}

.skins5-three-fallback {
    margin: 6px 0 0;
    color: #ffca72;
    font-size: 12px;
}

.skins5-sticker-placement {
    display: block;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: #2a3b4d;
}

.skins5-sticker-placement h6 { margin: 0 0 4px; color: #fff; }
.skins5-sticker-panel-title { font-size: 15px; }
.skins5-sticker-selection-hint { margin: 8px 0 0; color: #b7c0ca; font-size: 12px; line-height: 1.4; }
.skins5-placement-editor {
    display: none;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.skins5-sticker-placement.active .skins5-placement-editor { display: block; }
.skins5-sticker-hint { margin: 0 0 12px; color: #b7c0ca; font-size: 13px; line-height: 1.45; }

.skins5-sticker-placement .sticker-slots-modal { margin-top: 10px !important; }
.skins5-sticker-placement .sticker-slots-modal > [hidden] { display: none !important; }

.skins5-sticker-slot-grid {
    display: grid;
    grid-template-columns: repeat(5, 48px);
    gap: 6px;
    justify-content: start;
}

.skins5-sticker-slot-item {
    position: relative;
    width: 48px;
    height: 48px;
}

.sticker-slot-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 1.5px dashed rgba(255,255,255,.25);
    border-radius: 7px;
    color: inherit;
    background: rgba(255,255,255,.04);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.sticker-slot-modal:hover { border-color: rgba(125,181,227,.78) !important; background: rgba(125,181,227,.08); }
.skins5-sticker-placement.active .sticker-slot-modal.skins5-active-placement-slot {
    border-style: solid;
    border-color: #7db5e3 !important;
    background: rgba(62,107,145,.28);
    box-shadow: 0 0 0 3px rgba(125,181,227,.16);
}
.skins5-sticker-slot-empty { color: rgba(255,255,255,.32); font-size: 20px; }
.skins5-sticker-slot-loading { color: rgba(255,255,255,.55); font-size: 18px; }
.skins5-sticker-picker-trigger {
    position: absolute;
    top: 2px;
    right: 2px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    color: #fff;
    background: rgba(17,25,35,.88);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
.sticker-slot-modal:not(.has-sticker) + .skins5-sticker-picker-trigger { display: none; }
.skins5-sticker-picker-trigger:hover { background: #3e6b91; }

.skins5-placement-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.skins5-placement-field label {
    display: block;
    margin-bottom: 4px;
    color: #bbb;
    font-size: 12px;
}

.skins5-placement-field input { width: 100%; }
.skins5-wear-field { grid-column: 1 / -1; }
.skins5-wear-controls {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 86px 44px;
    gap: 9px;
    align-items: center;
}
.skins5-wear-range {
    width: 100%;
    min-width: 0;
    accent-color: #5f93bd;
    cursor: pointer;
}
.skins5-wear-value {
    color: #dbe9f5;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    text-align: right;
}
.skins5-placement-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.skins5-placement-empty { margin: 4px 0 0; color: #b7c0ca; font-size: 13px; }
.skins5-drag-mode-button.active,
.skins5-mobile-controls.active { background: #2f855a !important; }
.skins5-mobile-controls { margin: 8px 0 0; }
.skins5-mobile-controls[hidden], .skins5-placement-empty[hidden], .skins5-placement-fields[hidden] { display: none !important; }
.skins5-three-stage.sticker-drag-mode,
.skins5-three-stage.sticker-drag-mode canvas { touch-action: none !important; }
.skins5-csgo-placement-note { color: #b7b7b7; font-size: 12px; }

.current-skin-row.skins5-three-editor { align-items: flex-start; }
.current-skin-row.skins5-three-editor .current-skin-left {
    flex: 3 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
}
.current-skin-row.skins5-three-editor .current-skin-right {
    flex: 2 1 0;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}
.current-skin-row.skins5-three-editor .current-skin-image { align-self: flex-start; }
.current-skin-row.skins5-three-editor .current-skin-info { width: 100%; }

@media (max-width: 991px) {
    .current-skin-row.skins5-three-editor { flex-direction: column; }
    .current-skin-row.skins5-three-editor .current-skin-left,
    .current-skin-row.skins5-three-editor .current-skin-right {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex-direction: column;
    }
    .skins5-three-stage { width: 100%; min-height: 270px; max-height: 460px; }
}

@media (max-width: 520px) {
    .skins5-preview-switch { display: flex; width: 100%; }
    .skins5-preview-switch button { flex: 1; padding-inline: 6px; }
    .skins5-placement-fields { grid-template-columns: 1fr; }
    .skins5-wear-controls { grid-template-columns: minmax(100px, 1fr) 78px; }
    .skins5-wear-value { grid-column: 1 / -1; text-align: left; }
    .skins5-sticker-slot-grid { grid-template-columns: repeat(5, minmax(40px, 1fr)); width: 100%; }
    .skins5-sticker-slot-item { width: 100%; height: 44px; min-width: 0; }
    .skins5-three-stage { min-height: 240px; aspect-ratio: 4 / 3; }
    .skins5-placement-actions > button { width: 100%; }
}