/* --- FRONTEND STYLES --- */
.tabs-uto-nav-container { 
    display: flex !important; 
    gap: 40px !important; 
    width: 100%; 
    border: none !important; 
    margin-bottom: 0 !important;
}

.tabs-uto-trigger {
    background: none !important;
    border: none !important;
    padding: 15px 0 !important;
    font-size: 0.9em !important;
    font-weight: 500 !important;
    color: #888 !important;
    cursor: pointer !important;
    border-bottom: 3px solid transparent !important;
    transition: 0.2s ease-in-out;
}

.tabs-uto-trigger.is-active { color: var(--active-color, #000) !important; }

/* Underline logic */
.is-style-underlined .tabs-uto-trigger.is-active { border-bottom-color: var(--active-color, #000) !important; }
.is-style-minimal .tabs-uto-trigger { border-bottom: none !important; }

.tabs-uto-content-wrapper { width: 100%; display: block !important; margin-top: 20px; }
.tabs-uto-pane { display: none !important; width: 100%; }
.tabs-uto-pane.is-active { display: block !important; animation: utoFade 0.3s ease; }

@keyframes utoFade { from { opacity: 0; } to { opacity: 1; } }

/* --- EDITOR STYLES --- */
.uto-nav-editor { padding: 15px; background: #f0f0f0; border-radius: 4px; }
.uto-label-row { display: flex; align-items: center; gap: 8px; background: #fff; padding: 6px 12px; margin-bottom: 6px; border: 1px solid #ccc; border-radius: 3px; }
.uto-del { background: #ff4d4d; color: #fff; border: none; border-radius: 50%; cursor: pointer; width: 18px; height: 18px; line-height: 1; font-size: 12px; }
.uto-add-btn { margin-top: 10px; padding: 6px 12px; background: #007cba; color: #fff; border: none; border-radius: 3px; cursor: pointer; }
.uto-pane-editor { border: 2px solid #e0e0e0; padding: 25px; margin-bottom: 15px; background: #fff; }