:root {
    --bsd-neon-color: #00e5ff; 
    --bsd-neon-font: sans-serif;
    --bsd-neon-thickness: 0px; 
}

.bsd-neon-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
    background: #f4f5f7; 
    padding: 25px;
    border-radius: 12px;
    font-family: 'Inter', Arial, sans-serif;
    box-sizing: border-box;
}

.bsd-neon-container * {
    box-sizing: border-box;
}

.bsd-left-column { 
    flex: 1 1 500px; 
    min-width: 0;
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

.bsd-right-column {
    flex: 0 0 380px;
    width: 380px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

@media (max-width: 950px) {
    .bsd-left-column, .bsd-right-column {
        flex: 1 1 100%;
        width: 100%;
    }
}

.bsd-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.control-block { margin-bottom: 0; }
.control-title { margin: 0 0 12px 0; font-size: 15px; color: #222; font-weight: 700; }

.bsd-neon-preview-area {
    width: 100%; 
    height: auto; 
    aspect-ratio: 1 / 1; 
    min-height: 400px;
    background-color: #1a1a1a; 
    background-size: cover;
    background-position: center; 
    border-radius: 12px; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.neon-drag-container {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    cursor: grab; display: inline-block; user-select: none; z-index: 10;
}
.neon-drag-container:active { cursor: grabbing; }

.neon-text-element {
    font-family: var(--bsd-neon-font); 
    font-size: 60px; 
    color: var(--bsd-neon-color); 
    text-align: center;
    white-space: pre-wrap; 
    line-height: 1.2; 
    -webkit-text-stroke: var(--bsd-neon-thickness) var(--bsd-neon-color); 
    transition: all 0.3s ease; 
    position: relative; 
    z-index: 1; 
    
    text-shadow: 
        0 0 2px #fff, 
        0 0 5px rgba(255, 255, 255, 0.4), 
        0 0 15px var(--bsd-neon-color), 
        0 0 30px var(--bsd-neon-color), 
        0 0 50px var(--bsd-neon-color), 
        0 0 80px var(--bsd-neon-color), 
        0 0 120px var(--bsd-neon-color);
}

.neon-text-element.base-rectangular {
    padding: 10px 20px; 
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: 12px; 
    backdrop-filter: blur(1.5px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); 
}

.neon-text-element.base-figure::before {
    content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; 
    white-space: pre-wrap; line-height: 1.2; color: #fff; -webkit-text-stroke: 28px #fff; 
    opacity: 0.06; text-shadow: none; transition: none; 
}

.neon-text-element.base-figure::after {
    content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -2; 
    white-space: pre-wrap; line-height: 1.2; color: #000; -webkit-text-stroke: 28px #000; 
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5)); opacity: 0.4; text-shadow: none; transition: none; 
}

textarea#neon-input-text { 
    width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; 
    resize: vertical; font-family: inherit; font-size: 14px; outline: none;
}
textarea#neon-input-text:focus { border-color: #00e5ff; }

.font-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
    max-height: 200px; overflow-y: auto; padding-right: 5px;
}
.font-btn {
    font-size: 20px; padding: 15px 5px; background: #fff; border: 1px solid #ddd;
    border-radius: 6px; cursor: pointer; text-align: center; transition: all 0.2s; line-height: 1; overflow: hidden;
}
.font-btn:hover { border-color: #aaa; }
.font-btn.active { border-color: #00e5ff; box-shadow: 0 0 0 1px #00e5ff; color: #000; }

.neon-color-palette { 
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-start;
}
.color-item { 
    display: flex; flex-direction: column; align-items: center; gap: 5px; width: 52px; 
}
.color-btn { 
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ccc; cursor: pointer; 
    transition: all 0.2s; box-sizing: border-box; 
}
.color-btn.active { 
    transform: scale(1.15); border: 3px solid #000; box-shadow: inset 0 0 0 2px #fff; 
}
.color-label { 
    font-size: 10px; color: #666; text-align: center; line-height: 1.1; 
}

.bsd-neon-bg-selector { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bg-btn { border-radius: 6px; width: 55px; height: 55px; background-size: cover; background-position: center; border: 2px solid transparent; cursor: pointer; transition: transform 0.2s;}
.bg-btn.active { border-color: #00e5ff; transform: scale(1.05); }
.bg-upload-label { display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; background: #fff; border: 1px dashed #aaa; border-radius: 6px; cursor: pointer; font-size: 11px; text-align: center; padding: 5px;}
.bg-upload-label input { display: none; }

.slider-wrapper { display: flex; align-items: center; gap: 15px; }
input[type="range"] { flex-grow: 1; accent-color: #0634c6; }
#neon-size-display { font-weight: bold; min-width: 50px; font-size: 15px; }

.base-type-selector, .thickness-selector { display: flex; gap: 10px; }
.dark-green-btn { 
    flex: 1; padding: 12px; background: #ffffff; border: 1px solid #003b22; color: #003b22; 
    border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 12px; text-transform: uppercase; transition: 0.2s;
}
.dark-green-btn:hover { background: #f0f5f2; }
.dark-green-btn.active { background: #003b22; color: #fff; border-color: #003b22; }

.bsd-summary-box {
    background: #eef2f7; border: 1px solid #dce4ec; border-radius: 8px; padding: 20px; 
}
.bsd-summary-row {
    display: flex; justify-content: space-between; font-size: 14px; color: #555; margin-bottom: 10px;
}
.bsd-summary-row b { color: #111; }
.bsd-neon-summary-price {
    display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px;
    border-top: 1px solid #cbd5e1; font-size: 16px; color: #d32f2f; font-weight: bold;
}
.bsd-neon-summary-price span { font-weight: bold; font-size: 24px; color: #d32f2f; }

.btn-primary-blue {
    width: 100%; border: none; border-radius: 6px; padding: 16px 20px; font-size: 15px; 
    font-weight: bold; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s; margin-bottom: 5px;
}
.btn-primary-blue:hover { opacity: 0.9; }
.btn-primary-blue:disabled { background-color: #999 !important; cursor: not-allowed; }

.bsd-form-card {
    background: #ffffff; padding: 25px 20px; border-radius: 8px; 
    border: 1px solid #e2e8f0; text-align: center;
}
.bsd-form-title { margin: 0 0 5px 0; font-size: 18px; color: #111; font-weight: bold; }
.bsd-form-subtitle { margin: 0 0 20px 0; font-size: 12px; color: #666; line-height: 1.4; }
.bsd-form-fields input {
    width: 100%; padding: 12px 15px; margin-bottom: 12px; border: 1px solid #cbd5e1; 
    border-radius: 6px; font-size: 14px; box-sizing: border-box; outline: none; transition: 0.2s;
}
.bsd-form-fields input:focus { border-color: #0634c6; box-shadow: 0 0 0 2px rgba(6, 52, 198, 0.1); }