/* ===== CUTE THEME (Online/Production) ===== */
/* Soft pastel aesthetic with playful vibes */

[data-theme="cute"] {
    --primary-color: #ff6b8a;
    --secondary-color: #ff8fab;
    --success-color: #7dd3a8;
    --danger-color: #ff6b6b;
    --warning-color: #ffd93d;
    --bg-primary: #fff9fa;
    --bg-secondary: #fff0f3;
    --bg-tertiary: #ffe4e9;
    --text-primary: #5c4d5a;
    --text-secondary: #8b7b89;
    --border-color: #ffb6c1;
    --shadow-sm: 0 2px 8px rgba(255, 107, 138, 0.15);
    --shadow-md: 0 4px 15px rgba(255, 107, 138, 0.2);
    --shadow-lg: 0 8px 30px rgba(255, 107, 138, 0.25);
}

/* Body gradient background */
[data-theme="cute"] body {
    background: linear-gradient(135deg, #fff5f7 0%, #ffe4e9 50%, #ffd6e0 100%);
    background-attachment: fixed;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Floating hearts/sparkles decoration */
[data-theme="cute"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 182, 193, 0.3) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255, 182, 193, 0.3) 0%, transparent 20%),
        radial-gradient(circle at 50% 50%, rgba(255, 218, 233, 0.2) 0%, transparent 30%);
    pointer-events: none;
    z-index: -1;
}

/* Header */
[data-theme="cute"] .header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 3px solid #ffb6c1;
    box-shadow: 0 4px 20px rgba(255, 107, 138, 0.15);
}

[data-theme="cute"] .header h1 {
    color: #ff6b8a;
    font-weight: 700;
    letter-spacing: 1px;
}

[data-theme="cute"] .header h1::before {
    content: '✨ ';
}

[data-theme="cute"] .header h1::after {
    content: ' ✨';
}

[data-theme="cute"] .header h1 i {
    color: #ff8fab;
}

[data-theme="cute"] .status-badge {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #7dd3a8;
    color: #047857;
    border-radius: 20px;
    font-weight: 600;
}

[data-theme="cute"] .status-badge i {
    color: #10b981;
}

[data-theme="cute"] .logout-btn {
    background: linear-gradient(135deg, #ff6b8a 0%, #ff8fab 100%);
    border: none;
    color: white;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 107, 138, 0.3);
}

[data-theme="cute"] .logout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 138, 0.4);
}

/* Sidebar */
[data-theme="cute"] .sidebar {
    background: rgba(255, 255, 255, 0.95);
    border-right: 3px solid #ffb6c1;
}

[data-theme="cute"] .nav-item {
    color: #8b7b89;
    border-radius: 12px;
    margin: 4px 12px;
    font-weight: 500;
}

[data-theme="cute"] .nav-item i {
    color: #ff8fab;
}

[data-theme="cute"] .nav-item:hover {
    background: linear-gradient(135deg, #fff0f3 0%, #ffe4e9 100%);
    color: #ff6b8a;
}

[data-theme="cute"] .nav-item.active {
    background: linear-gradient(135deg, #ff6b8a 0%, #ff8fab 100%);
    color: white;
    border-right: none;
    box-shadow: 0 4px 15px rgba(255, 107, 138, 0.3);
}

[data-theme="cute"] .nav-item.active i {
    color: white;
}

/* Content area */
[data-theme="cute"] .content {
    background: transparent;
}

[data-theme="cute"] .section h2 {
    color: #ff6b8a;
    font-weight: 700;
}

[data-theme="cute"] .section h2::before {
    content: '🌸 ';
}

[data-theme="cute"] .section h2::after {
    content: ' 🌸';
}

/* Stat cards */
[data-theme="cute"] .stat-card {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ffb6c1;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(255, 107, 138, 0.15);
}

[data-theme="cute"] .stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(255, 107, 138, 0.25);
}

[data-theme="cute"] .stat-icon {
    background: linear-gradient(135deg, #ff6b8a 0%, #ff8fab 100%);
    color: white;
    border-radius: 16px;
    border: none;
}

[data-theme="cute"] .stat-info h3 {
    color: #ff6b8a;
    font-weight: 700;
}

[data-theme="cute"] .stat-info p {
    color: #8b7b89;
}

/* System info panel */
[data-theme="cute"] .system-info-panel {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ffb6c1;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(255, 107, 138, 0.15);
}

[data-theme="cute"] .system-info-panel h3 {
    color: #ff6b8a;
    font-weight: 600;
}

[data-theme="cute"] .system-info-panel h3::before {
    content: '💻 ';
}

[data-theme="cute"] .info-item .info-label {
    color: #8b7b89;
}

[data-theme="cute"] .info-item .info-label i {
    color: #ff8fab;
}

[data-theme="cute"] .info-item .info-value {
    color: #5c4d5a;
    font-weight: 600;
}

/* Routing examples panel */
[data-theme="cute"] .routing-examples-panel {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ffb6c1;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(255, 107, 138, 0.15);
}

[data-theme="cute"] .routing-examples-panel h3 {
    color: #ff6b8a;
}

[data-theme="cute"] .routing-examples-panel h3::before {
    content: '🛤️ ';
}

[data-theme="cute"] .routing-description {
    color: #8b7b89;
}

[data-theme="cute"] .routing-example-card {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ffd1dc;
    border-radius: 16px;
}

[data-theme="cute"] .routing-example-card:hover {
    border-color: #ff8fab;
    box-shadow: 0 8px 25px rgba(255, 107, 138, 0.2);
    transform: translateY(-3px);
}

[data-theme="cute"] .routing-card-header {
    background: linear-gradient(135deg, #fff0f3 0%, #ffe4e9 100%);
    border-bottom: 2px solid #ffd1dc;
    border-radius: 14px 14px 0 0;
}

[data-theme="cute"] .routing-card-header i {
    color: #ff6b8a;
}

[data-theme="cute"] .routing-card-header h4 {
    color: #5c4d5a;
    font-weight: 600;
}

[data-theme="cute"] .provider-badge {
    border-radius: 12px;
    font-weight: 600;
}

[data-theme="cute"] .provider-badge.official {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
}

[data-theme="cute"] .provider-badge.oauth {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
}

/* Protocol tabs */
[data-theme="cute"] .protocol-tabs {
    border-bottom: 2px solid #ffd1dc;
}

[data-theme="cute"] .protocol-tab {
    color: #8b7b89;
    font-weight: 500;
    border-radius: 8px 8px 0 0;
}

[data-theme="cute"] .protocol-tab:hover {
    color: #ff6b8a;
    background: #fff0f3;
}

[data-theme="cute"] .protocol-tab.active {
    color: #ff6b8a;
    border-bottom-color: #ff6b8a;
    background: #fff5f7;
}

[data-theme="cute"] .endpoint-info label,
[data-theme="cute"] .usage-example label {
    color: #8b7b89;
    font-weight: 500;
}

[data-theme="cute"] .endpoint-path {
    background: #fff5f7;
    border: 2px solid #ffd1dc;
    color: #5c4d5a;
    border-radius: 10px;
}

[data-theme="cute"] .usage-example pre {
    background: linear-gradient(135deg, #2d2d3a 0%, #1a1a24 100%);
    border: 2px solid #ffd1dc;
    border-radius: 12px;
}

[data-theme="cute"] .usage-example code {
    color: #e2e8f0;
}

/* Routing tips */
[data-theme="cute"] .routing-tips {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #fbbf24;
    border-radius: 0 12px 12px 0;
}

[data-theme="cute"] .routing-tips h4 {
    color: #92400e;
}

[data-theme="cute"] .routing-tips h4 i {
    color: #f59e0b;
}

[data-theme="cute"] .routing-tips li {
    color: #78350f;
}

/* Forms */
[data-theme="cute"] .config-panel {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ffb6c1;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(255, 107, 138, 0.15);
}

[data-theme="cute"] .form-group label {
    color: #5c4d5a;
    font-weight: 600;
}

[data-theme="cute"] .form-control {
    background: #fff5f7;
    border: 2px solid #ffd1dc;
    color: #5c4d5a;
    border-radius: 12px;
}

[data-theme="cute"] .form-control:focus {
    border-color: #ff6b8a;
    box-shadow: 0 0 0 4px rgba(255, 107, 138, 0.15);
    background: white;
}

[data-theme="cute"] .form-control::placeholder {
    color: #d4a5a5;
}

[data-theme="cute"] select.form-control {
    background: #fff5f7;
}

/* Buttons */
[data-theme="cute"] .btn-primary,
[data-theme="cute"] .btn-success {
    background: linear-gradient(135deg, #ff6b8a 0%, #ff8fab 100%);
    border: none;
    color: white;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 107, 138, 0.3);
}

[data-theme="cute"] .btn-primary:hover,
[data-theme="cute"] .btn-success:hover {
    background: linear-gradient(135deg, #ff8fab 0%, #ffb6c1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 138, 0.4);
}

[data-theme="cute"] .btn-secondary {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border: 2px solid #d1d5db;
    color: #5c4d5a;
    border-radius: 12px;
}

[data-theme="cute"] .btn-secondary:hover {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

[data-theme="cute"] .btn-danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    border: none;
    color: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

[data-theme="cute"] .btn-danger:hover {
    background: linear-gradient(135deg, #ee5a5a 0%, #dc4a4a 100%);
    transform: translateY(-2px);
}

/* Provider config sections */
[data-theme="cute"] .provider-config,
[data-theme="cute"] .advanced-config-section {
    background: linear-gradient(135deg, #fff5f7 0%, #fff0f3 100%);
    border: 2px solid #ffd1dc;
    border-radius: 16px;
}

[data-theme="cute"] .advanced-config-section h3 {
    color: #ff6b8a;
    border-bottom-color: #ffd1dc;
}

[data-theme="cute"] .advanced-config-section h3::before {
    content: '⚙️ ';
}

/* Providers container */
[data-theme="cute"] .providers-container {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ffb6c1;
    border-radius: 20px;
}

[data-theme="cute"] .provider-item {
    border: 2px solid #ffd1dc;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="cute"] .provider-item:hover {
    border-color: #ff8fab;
    box-shadow: 0 4px 20px rgba(255, 107, 138, 0.2);
}

[data-theme="cute"] .provider-name {
    color: #5c4d5a;
    font-weight: 600;
}

/* Logs */
[data-theme="cute"] .logs-container {
    background: linear-gradient(135deg, #2d2d3a 0%, #1a1a24 100%);
    border: 2px solid #ffb6c1;
    border-radius: 16px;
}

[data-theme="cute"] .log-time {
    color: #a78bfa;
}

[data-theme="cute"] .log-level-info {
    color: #7dd3a8;
}

[data-theme="cute"] .log-level-error {
    color: #ff6b6b;
}

[data-theme="cute"] .log-level-warn {
    color: #ffd93d;
}

/* Toast notifications */
[data-theme="cute"] .toast {
    background: rgba(255, 255, 255, 0.98);
    border: 2px solid #ffb6c1;
    border-radius: 16px;
    color: #5c4d5a;
}

[data-theme="cute"] .toast.success {
    border-left: 4px solid #7dd3a8;
    box-shadow: 0 4px 20px rgba(125, 211, 168, 0.3);
}

[data-theme="cute"] .toast.error {
    border-left: 4px solid #ff6b6b;
    box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
}

/* Toggle switch */
[data-theme="cute"] .toggle-slider {
    background: #ffd1dc;
    border: 2px solid #ffb6c1;
    border-radius: 24px;
}

[data-theme="cute"] input:checked + .toggle-slider {
    background: linear-gradient(135deg, #ff6b8a 0%, #ff8fab 100%);
    border-color: #ff6b8a;
}

/* Highlight note */
[data-theme="cute"] .highlight-note {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 12px;
    color: #92400e;
}

/* Contact section */
[data-theme="cute"] .contact-section {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ffb6c1;
    border-radius: 20px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

[data-theme="cute"] .contact-section h3 {
    color: #ff6b8a;
}

[data-theme="cute"] .contact-section h3::before {
    content: '💝 ';
}

[data-theme="cute"] .contact-card {
    background: linear-gradient(135deg, #fff5f7 0%, #fff0f3 100%);
    border: 2px solid #ffd1dc;
    border-radius: 16px;
}

[data-theme="cute"] .contact-card h3 {
    color: #ff6b8a;
}

[data-theme="cute"] .qr-description {
    color: #8b7b89;
}

/* Upload config panel */
[data-theme="cute"] .upload-config-panel {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #ffb6c1;
    border-radius: 20px;
}

[data-theme="cute"] .config-search-panel {
    background: linear-gradient(135deg, #fff5f7 0%, #fff0f3 100%);
    border: 2px solid #ffd1dc;
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

[data-theme="cute"] .config-list-container {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ffd1dc;
    border-radius: 16px;
}

[data-theme="cute"] .config-list-header h3 {
    color: #ff6b8a;
}

[data-theme="cute"] .config-list-header h3::before {
    content: '📁 ';
}

/* Modal */
[data-theme="cute"] .provider-modal {
    background: rgba(255, 182, 193, 0.3);
    backdrop-filter: blur(8px);
}

[data-theme="cute"] .provider-modal-content {
    background: rgba(255, 255, 255, 0.98);
    border: 3px solid #ffb6c1;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(255, 107, 138, 0.3);
}

[data-theme="cute"] .provider-modal-header {
    background: linear-gradient(135deg, #fff5f7 0%, #ffe4e9 100%);
    border-bottom: 2px solid #ffd1dc;
    border-radius: 21px 21px 0 0;
}

[data-theme="cute"] .provider-modal-header h3 {
    color: #ff6b8a;
    font-weight: 600;
}

[data-theme="cute"] .provider-modal-header h3::before {
    content: '🎀 ';
}

[data-theme="cute"] .modal-close {
    color: #ff8fab;
    border-radius: 50%;
    width: 36px;
    height: 36px;
}

[data-theme="cute"] .modal-close:hover {
    background: #ffe4e9;
    color: #ff6b8a;
}

/* Cute bounce animation for cards */
[data-theme="cute"] .stat-card,
[data-theme="cute"] .routing-example-card,
[data-theme="cute"] .provider-item {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Status badges */
[data-theme="cute"] .status-healthy {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
    border-radius: 12px;
}

[data-theme="cute"] .status-unhealthy {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
    border-radius: 12px;
}

/* Pool description */
[data-theme="cute"] .pool-description {
    margin-bottom: 1.5rem;
}

/* Scrollbar styling */
[data-theme="cute"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="cute"] ::-webkit-scrollbar-track {
    background: #fff0f3;
    border-radius: 10px;
}

[data-theme="cute"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ffb6c1 0%, #ff8fab 100%);
    border-radius: 10px;
}

[data-theme="cute"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #ff8fab 0%, #ff6b8a 100%);
}