.tabs {

    display: flex;

    gap: 8px;

    margin-bottom: 16px;
}

.tab-btn {

    padding: 10px 16px;

    background: #111827;

    border: 1px solid #334155;

    color: white;

    border-radius: 6px;

    cursor: pointer;
}

.tab-btn.active {

    border-color: #5eead4;

    color: #5eead4;
}

.form-switch {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 14px;

    padding: 10px;

    background: #111827;

    border: 1px solid #334155;

    border-radius: 6px;
}

.loading {

    color: #94a3b8;
}

.error-box {

    color: #ef4444;
}

.image-picker-row {

    display: flex;

    gap: 10px;

    align-items: center;
}

.image-picker-row input[type="text"] {

    flex: 1;
}

.browse-btn {

    padding: 10px 14px;

    border: none;

    border-radius: 6px;

    background: #0ea5e9;

    color: white;

    cursor: pointer;

    flex-shrink: 0;
}

.browse-btn:hover {

    background: #0284c7;
}

.background-preview-container {

    margin-top: 14px;

    padding: 10px;

    border-radius: 8px;

    border: 1px solid #334155;

    background: #111827;
}

.background-preview {

    width: 100%;

    max-height: 240px;

    object-fit: contain;

    border-radius: 6px;

    display: block;
}