/* Shared dropdown base styles (matches cube builder) */
.style-dropdown {
    position: relative;
}

.style-trigger {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    background: #FFFFFF;
    color: #333333;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.style-trigger-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.style-trigger-arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid #832EC5;
    border-bottom: 2px solid #832EC5;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform 0.15s ease;
}

.style-dropdown.is-open .style-trigger-arrow {
    transform: rotate(-135deg);
    margin-top: 2px;
}

.style-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.style-trigger:focus-visible {
    outline: none;
    border-color: #832EC5;
    box-shadow: 0 0 0 3px rgba(131, 46, 197, 0.2);
}

.style-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 60;
}

.style-dropdown.is-open .style-menu {
    display: flex;
}

.style-option {
    border: 1px solid transparent;
    border-radius: 10px;
    background: #FFFFFF;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.style-option:hover {
    background: #F5F5F5;
    transform: translateY(-1px);
}

.style-option.is-selected {
    border-color: #832EC5;
    box-shadow: 0 0 0 2px rgba(131, 46, 197, 0.18);
}

.style-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #D5D5D5;
    overflow: hidden;
    position: relative;
    background-size: 16px 16px;
    image-rendering: pixelated;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.style-swatch-standard {
    background: linear-gradient(135deg, #f5f5f5, #dcdcdc);
}

.material-brick {
    background-image:
        linear-gradient(90deg, #d3d3d3 0 2px, transparent 2px 16px),
        linear-gradient(#d3d3d3 0 2px, transparent 2px 16px),
        linear-gradient(90deg, transparent 0 8px, #d3d3d3 8px 10px, transparent 10px 16px),
        linear-gradient(#963428, #812b21);
    background-size: 16px 12px, 16px 12px, 16px 12px, 16px 16px;
    background-position: 0 0, 0 6px, 8px 3px, 0 0;
}

.material-grass {
    background-color: #2d4a1c;
    background-image:
        radial-gradient(ellipse 5px 4px at 2px 2px, #c8e6b0 0%, transparent 80%),
        radial-gradient(ellipse 4px 5px at 12px 4px, #b5d99a 0%, transparent 80%),
        radial-gradient(ellipse 6px 4px at 7px 10px, #e0f0d0 0%, transparent 80%),
        radial-gradient(ellipse 4px 4px at 14px 12px, #a3cc85 0%, transparent 80%),
        radial-gradient(ellipse 3px 4px at 4px 14px, #c8e6b0 0%, transparent 80%),
        radial-gradient(ellipse 5px 3px at 10px 1px, #b5d99a 0%, transparent 80%),
        radial-gradient(ellipse 4px 5px at 1px 8px, #e0f0d0 0%, transparent 80%);
    background-size: 16px 16px;
    border-color: rgba(90, 138, 53, 0.8);
}

.material-stone {
    background-image:
        radial-gradient(circle at 3px 4px, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px),
        radial-gradient(circle at 11px 5px, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px),
        radial-gradient(circle at 8px 12px, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px),
        radial-gradient(circle at 2px 13px, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px),
        radial-gradient(circle at 13px 13px, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px),
        linear-gradient(#8a8a8a, #737373);
    background-size: 16px 16px;
}

.material-water {
    background-image:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.4) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(60deg, rgba(20, 70, 160, 0.45) 0 3px, transparent 3px 7px),
        linear-gradient(180deg, rgba(63, 118, 228, 0.55), rgba(31, 85, 182, 0.55));
    background-size: 16px 16px, 16px 16px, 100% 100%;
}

.material-glass {
    background-color: rgba(255, 255, 255, 0.2);
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0 2px, transparent 2px 10px, rgba(255, 255, 255, 0.7) 10px 12px, transparent 12px 16px),
        linear-gradient(45deg, transparent 0 8px, rgba(255, 255, 255, 0.8) 8px 10px, transparent 10px 16px),
        linear-gradient(160deg, transparent 0 12px, rgba(255, 255, 255, 0.6) 12px 14px, transparent 14px 16px);
    background-size: 16px 16px;
    border-color: rgba(160, 190, 220, 0.8);
}

.material-lava {
    background-image:
        radial-gradient(circle at 4px 4px, rgba(255, 255, 255, 0.55) 0 2px, transparent 2px),
        radial-gradient(circle at 12px 10px, rgba(255, 120, 0, 0.75) 0 3px, transparent 3px),
        radial-gradient(circle at 8px 14px, rgba(255, 210, 80, 0.85) 0 3px, transparent 3px),
        radial-gradient(circle at 2px 12px, rgba(255, 120, 0, 0.7) 0 2px, transparent 2px),
        linear-gradient(135deg, #ffd700, #ff8a00 55%, #ff4500);
    background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, 100% 100%;
}

.style-option-label,
.style-trigger-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333333;
}