/* /Components/Layout/AIAssistantPopup.razor.rz.scp.css */
/* AI Assistant Popup Styles */
.ai-assistant-overlay[b-msw9vjq7ut] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ai-assistant-overlay.visible[b-msw9vjq7ut] {
    opacity: 1;
    visibility: visible;
}

.ai-assistant-popup[b-msw9vjq7ut] {
    position: fixed;
    top: 60px;
    right: 20px;
    width: 400px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(59, 130, 246, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ai-assistant-popup.visible[b-msw9vjq7ut] {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Header */
.ai-popup-header[b-msw9vjq7ut] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1));
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.ai-header-title[b-msw9vjq7ut] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-avatar[b-msw9vjq7ut] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.ai-header-text h3[b-msw9vjq7ut] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.ai-status[b-msw9vjq7ut] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-status.listening[b-msw9vjq7ut] {
    color: #22c55e;
}

.ai-status i[b-msw9vjq7ut] {
    font-size: 0.5rem;
}

.ai-close-btn[b-msw9vjq7ut] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ai-close-btn:hover[b-msw9vjq7ut] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* Chat Container */
.ai-chat-container[b-msw9vjq7ut] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-height: 300px;
    max-height: 400px;
}

/* Welcome Screen */
.ai-welcome[b-msw9vjq7ut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    height: 100%;
}

.welcome-icon[b-msw9vjq7ut] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.welcome-icon i[b-msw9vjq7ut] {
    font-size: 1.5rem;
    color: #3b82f6;
}

.ai-welcome h4[b-msw9vjq7ut] {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

.ai-welcome p[b-msw9vjq7ut] {
    margin: 0 0 20px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.quick-prompts[b-msw9vjq7ut] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.quick-prompt[b-msw9vjq7ut] {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.1);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.quick-prompt:hover[b-msw9vjq7ut] {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.5);
    color: white;
}

.quick-prompt i[b-msw9vjq7ut] {
    font-size: 0.75rem;
    color: #3b82f6;
}

/* Messages */
.ai-messages[b-msw9vjq7ut] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-message[b-msw9vjq7ut] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.ai-message.user[b-msw9vjq7ut] {
    flex-direction: row-reverse;
}

.message-avatar[b-msw9vjq7ut] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.message-avatar i[b-msw9vjq7ut] {
    font-size: 0.8rem;
    color: white;
}

.message-avatar.user[b-msw9vjq7ut] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.message-content[b-msw9vjq7ut] {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-message.user .message-content[b-msw9vjq7ut] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.2));
    border-color: rgba(59, 130, 246, 0.3);
}

.message-content p[b-msw9vjq7ut] {
    margin: 0;
    font-size: 0.9rem;
    color: white;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-time[b-msw9vjq7ut] {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 6px;
}

/* Typing Indicator */
.message-content.typing[b-msw9vjq7ut] {
    padding: 16px 20px;
}

.typing-indicator[b-msw9vjq7ut] {
    display: flex;
    gap: 4px;
}

.typing-indicator span[b-msw9vjq7ut] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    animation: typing-b-msw9vjq7ut 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1)[b-msw9vjq7ut] {
    animation-delay: 0s;
}

.typing-indicator span:nth-child(2)[b-msw9vjq7ut] {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3)[b-msw9vjq7ut] {
    animation-delay: 0.4s;
}

@keyframes typing-b-msw9vjq7ut {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Input Container */
.ai-input-container[b-msw9vjq7ut] {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.voice-btn[b-msw9vjq7ut] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.voice-btn:hover:not(:disabled)[b-msw9vjq7ut] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.voice-btn:disabled[b-msw9vjq7ut] {
    opacity: 0.5;
    cursor: not-allowed;
}

.voice-btn.listening[b-msw9vjq7ut] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    animation: pulse-b-msw9vjq7ut 1.5s infinite;
}

@keyframes pulse-b-msw9vjq7ut {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
}

.voice-waves[b-msw9vjq7ut] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 20px;
}

.voice-waves span[b-msw9vjq7ut] {
    width: 3px;
    height: 100%;
    background: white;
    border-radius: 3px;
    animation: wave-b-msw9vjq7ut 0.8s infinite ease-in-out;
}

.voice-waves span:nth-child(1)[b-msw9vjq7ut] {
    animation-delay: 0s;
    height: 60%;
}

.voice-waves span:nth-child(2)[b-msw9vjq7ut] {
    animation-delay: 0.2s;
    height: 100%;
}

.voice-waves span:nth-child(3)[b-msw9vjq7ut] {
    animation-delay: 0.4s;
    height: 60%;
}

@keyframes wave-b-msw9vjq7ut {
    0%, 100% {
        transform: scaleY(0.5);
    }
    50% {
        transform: scaleY(1);
    }
}

.ai-text-input[b-msw9vjq7ut] {
    flex: 1;
    height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s ease;
}

.ai-text-input[b-msw9vjq7ut]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.ai-text-input:focus[b-msw9vjq7ut] {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.ai-text-input:disabled[b-msw9vjq7ut] {
    opacity: 0.5;
}

.send-btn[b-msw9vjq7ut] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.send-btn:hover:not(:disabled)[b-msw9vjq7ut] {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.send-btn:disabled[b-msw9vjq7ut] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.send-btn i[b-msw9vjq7ut] {
    font-size: 0.9rem;
}

/* Clear Chat Button */
.clear-chat-btn[b-msw9vjq7ut] {
    margin: 0 20px 16px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: rgba(239, 68, 68, 0.8);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.clear-chat-btn:hover[b-msw9vjq7ut] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

/* Action Message Styles */
.ai-message.has-action .message-content[b-msw9vjq7ut] {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
}

.inline-action-buttons[b-msw9vjq7ut] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.inline-action-btn[b-msw9vjq7ut] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.inline-action-btn.approve[b-msw9vjq7ut] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.2));
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.inline-action-btn.approve:hover:not(:disabled)[b-msw9vjq7ut] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(22, 163, 74, 0.4));
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.inline-action-btn.reject[b-msw9vjq7ut] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(220, 38, 38, 0.2));
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.inline-action-btn.reject:hover:not(:disabled)[b-msw9vjq7ut] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(220, 38, 38, 0.4));
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.inline-action-btn:disabled[b-msw9vjq7ut] {
    opacity: 0.6;
    cursor: not-allowed;
}

.inline-action-btn i[b-msw9vjq7ut] {
    font-size: 0.75rem;
}

/* Light Theme Action Button Support */
[data-theme="light"] .ai-message.has-action .message-content[b-msw9vjq7ut] {
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.1);
}

[data-theme="light"] .inline-action-buttons[b-msw9vjq7ut] {
    border-top-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .inline-action-btn.approve[b-msw9vjq7ut] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.1));
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="light"] .inline-action-btn.reject[b-msw9vjq7ut] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Light Theme Support */
[data-theme="light"] .ai-assistant-popup[b-msw9vjq7ut] {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .ai-popup-header[b-msw9vjq7ut] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.05));
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ai-header-text h3[b-msw9vjq7ut] {
    color: #1a1a1a;
}

[data-theme="light"] .ai-status[b-msw9vjq7ut] {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .ai-close-btn[b-msw9vjq7ut] {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .ai-close-btn:hover[b-msw9vjq7ut] {
    background: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

[data-theme="light"] .ai-welcome h4[b-msw9vjq7ut],
[data-theme="light"] .message-content p[b-msw9vjq7ut] {
    color: #1a1a1a;
}

[data-theme="light"] .ai-welcome p[b-msw9vjq7ut] {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .quick-prompt[b-msw9vjq7ut] {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(59, 130, 246, 0.05);
    color: #1a1a1a;
}

[data-theme="light"] .quick-prompt:hover[b-msw9vjq7ut] {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .message-content[b-msw9vjq7ut] {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ai-message.user .message-content[b-msw9vjq7ut] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.1));
}

[data-theme="light"] .message-time[b-msw9vjq7ut] {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .ai-input-container[b-msw9vjq7ut] {
    border-top-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .voice-btn[b-msw9vjq7ut] {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .voice-btn:hover:not(:disabled)[b-msw9vjq7ut] {
    background: rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
}

[data-theme="light"] .ai-text-input[b-msw9vjq7ut] {
    border-color: rgba(0, 0, 0, 0.15);
    background: white;
    color: #1a1a1a;
}

[data-theme="light"] .ai-text-input[b-msw9vjq7ut]::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .ai-text-input:focus[b-msw9vjq7ut] {
    border-color: rgba(59, 130, 246, 0.5);
}

[data-theme="light"] .clear-chat-btn[b-msw9vjq7ut] {
    border-color: rgba(239, 68, 68, 0.2);
    background: rgba(239, 68, 68, 0.05);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .ai-assistant-popup[b-msw9vjq7ut] {
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .ai-chat-container[b-msw9vjq7ut] {
        max-height: calc(100vh - 200px);
    }

    .quick-prompts[b-msw9vjq7ut] {
        flex-direction: column;
    }

    .quick-prompt[b-msw9vjq7ut] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-page[b-k11ead2euu] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--login-bg);
}
/* /Components/Layout/BackgroundAppsView.razor.rz.scp.css */
/* Background Apps Overlay - iOS/iPad Style App Switcher */

.background-apps-overlay[b-v2g18tpsdb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.background-apps-overlay.visible[b-v2g18tpsdb] {
    opacity: 1;
    visibility: visible;
}

.background-apps-container[b-v2g18tpsdb] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 2rem;
}

.apps-header[b-v2g18tpsdb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.apps-header h2[b-v2g18tpsdb] {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.close-all-btn[b-v2g18tpsdb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    color: #f87171;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-all-btn:hover[b-v2g18tpsdb] {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
}

/* Apps Grid - Similar to iOS app switcher */
.apps-grid[b-v2g18tpsdb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    justify-items: center;
}

/* Individual App Card */
.app-card[b-v2g18tpsdb] {
    position: relative;
    width: 100%;
    max-width: 320px;
    background: rgba(30, 30, 40, 0.6);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: cardAppear-b-v2g18tpsdb 0.4s ease forwards;
}

/* Active call card styling */
.app-card.active-call[b-v2g18tpsdb] {
    border: 2px solid rgba(34, 197, 94, 0.6);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.app-card.active-call .app-preview[b-v2g18tpsdb] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.4) 0%, rgba(22, 163, 74, 0.3) 100%);
}

@keyframes cardAppear-b-v2g18tpsdb {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.app-card:nth-child(1)[b-v2g18tpsdb] { animation-delay: 0s; }
.app-card:nth-child(2)[b-v2g18tpsdb] { animation-delay: 0.05s; }
.app-card:nth-child(3)[b-v2g18tpsdb] { animation-delay: 0.1s; }
.app-card:nth-child(4)[b-v2g18tpsdb] { animation-delay: 0.15s; }
.app-card:nth-child(5)[b-v2g18tpsdb] { animation-delay: 0.2s; }
.app-card:nth-child(6)[b-v2g18tpsdb] { animation-delay: 0.25s; }

.app-card:hover[b-v2g18tpsdb] {
    transform: scale(1.02) translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.app-card.active-call:hover[b-v2g18tpsdb] {
    box-shadow: 0 20px 40px rgba(34, 197, 94, 0.3);
}

/* Close button on each app card */
.app-close-btn[b-v2g18tpsdb] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 10;
}

.app-card:hover .app-close-btn[b-v2g18tpsdb] {
    opacity: 1;
}

.app-close-btn:hover[b-v2g18tpsdb] {
    background: rgba(239, 68, 68, 0.8);
    border-color: rgba(239, 68, 68, 0.6);
}

/* App Preview Area */
.app-preview[b-v2g18tpsdb] {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.app-preview[b-v2g18tpsdb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: rgba(10, 10, 15, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.app-preview-content[b-v2g18tpsdb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.app-preview-content > i[b-v2g18tpsdb] {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.3);
}

/* Call status indicator in preview */
.call-status-indicator[b-v2g18tpsdb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: rgba(34, 197, 94, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.5);
}

.call-status-indicator i[b-v2g18tpsdb] {
    font-size: 1.25rem !important;
    color: #22c55e !important;
}

.call-duration[b-v2g18tpsdb] {
    font-size: 1rem;
    font-weight: 600;
    color: #22c55e;
    font-family: 'SF Mono', 'Consolas', monospace;
}

/* Special styling for different app types */
.app-card[data-app-type="call"] .app-preview[b-v2g18tpsdb] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(22, 163, 74, 0.2) 100%);
}

.app-card[data-app-type="contacts"] .app-preview[b-v2g18tpsdb] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.2) 100%);
}

.app-card[data-app-type="reminders"] .app-preview[b-v2g18tpsdb] {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(255, 149, 0, 0.15) 100%);
}

/* App Builder app preview styling */
.app-card[data-app-type="appbuilder"] .app-preview[b-v2g18tpsdb] {
    background: linear-gradient(135deg, rgba(64, 200, 224, 0.3) 0%, rgba(0, 120, 215, 0.2) 100%);
}

/* Reminders app icon style */
.app-icon-small.reminders-icon[b-v2g18tpsdb] {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.app-icon-small .mini-dots[b-v2g18tpsdb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    padding-left: 6px;
}

.app-icon-small .mini-dot[b-v2g18tpsdb] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.app-icon-small .mini-dot.blue[b-v2g18tpsdb] {
    background: #007aff;
}

.app-icon-small .mini-dot.orange[b-v2g18tpsdb] {
    background: #ff9500;
}

.app-icon-small .mini-dot.red[b-v2g18tpsdb] {
    background: #ff3b30;
}

/* Reminders preview icon */
.reminders-preview-icon[b-v2g18tpsdb] {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.reminders-preview-icon .reminders-dots[b-v2g18tpsdb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    padding-left: 15px;
}

.reminders-preview-icon .dot[b-v2g18tpsdb] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.reminders-preview-icon .dot.blue[b-v2g18tpsdb] {
    background: #007aff;
}

.reminders-preview-icon .dot.orange[b-v2g18tpsdb] {
    background: #ff9500;
}

.reminders-preview-icon .dot.red[b-v2g18tpsdb] {
    background: #ff3b30;
}

/* App Builder preview icon */
.appbuilder-preview-icon[b-v2g18tpsdb] {
    width: 80px;
    height: 80px;
    background: linear-gradient(180deg, #40c8e0 0%, #1ba1e2 50%, #0078d7 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.appbuilder-preview-icon[b-v2g18tpsdb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 8px 8px;
    pointer-events: none;
}

.appbuilder-preview-icon i[b-v2g18tpsdb] {
    font-size: 32px;
    color: #3a3a3c;
    transform: rotate(-45deg);
    position: relative;
    z-index: 1;
}

/* App Info Footer */
.app-info[b-v2g18tpsdb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(20, 20, 30, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.app-icon-small[b-v2g18tpsdb] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 6px;
    color: white;
    font-size: 0.75rem;
}

/* Call app icon style */
.app-icon-small.call-icon[b-v2g18tpsdb] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

/* App Builder app icon style */
.app-icon-small.appbuilder-icon[b-v2g18tpsdb] {
    background: linear-gradient(180deg, #40c8e0 0%, #1ba1e2 50%, #0078d7 100%);
    position: relative;
    overflow: hidden;
}

.app-icon-small.appbuilder-icon[b-v2g18tpsdb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 5px 5px;
    pointer-events: none;
}

.app-icon-small.appbuilder-icon i[b-v2g18tpsdb] {
    position: relative;
    z-index: 1;
    color: #3a3a3c !important;
    font-size: 0.65rem;
    transform: rotate(-45deg);
}

.app-name[b-v2g18tpsdb] {
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Live badge for active calls */
.live-badge[b-v2g18tpsdb] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: #22c55e;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: livePulse-b-v2g18tpsdb 2s ease-in-out infinite;
}

@keyframes livePulse-b-v2g18tpsdb {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* No Apps Message */
.no-apps-message[b-v2g18tpsdb] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255, 255, 255, 0.5);
    animation: fadeIn-b-v2g18tpsdb 0.3s ease;
}

@keyframes fadeIn-b-v2g18tpsdb {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.no-apps-message i[b-v2g18tpsdb] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.no-apps-message p[b-v2g18tpsdb] {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.no-apps-message span[b-v2g18tpsdb] {
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .background-apps-container[b-v2g18tpsdb] {
        padding: 1rem;
        width: 95%;
    }

    .apps-grid[b-v2g18tpsdb] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .app-card[b-v2g18tpsdb] {
        max-width: 100%;
    }

    .apps-header h2[b-v2g18tpsdb] {
        font-size: 1.25rem;
    }
    
    /* Always show close button on mobile */
    .app-close-btn[b-v2g18tpsdb] {
        opacity: 1;
    }
}

@media (min-width: 1200px) {
    .apps-grid[b-v2g18tpsdb] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Light theme support */
[data-theme="light"] .background-apps-overlay[b-v2g18tpsdb] {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .apps-header h2[b-v2g18tpsdb] {
    color: #1a1a1a;
}

[data-theme="light"] .app-card[b-v2g18tpsdb] {
    background: white;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .app-card.active-call[b-v2g18tpsdb] {
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}

[data-theme="light"] .app-card:hover[b-v2g18tpsdb] {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .app-preview[b-v2g18tpsdb] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

[data-theme="light"] .app-card[data-app-type="reminders"] .app-preview[b-v2g18tpsdb] {
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1) 0%, rgba(255, 149, 0, 0.1) 100%);
}

[data-theme="light"] .app-card[data-app-type="appbuilder"] .app-preview[b-v2g18tpsdb] {
    background: linear-gradient(135deg, rgba(64, 200, 224, 0.2) 0%, rgba(0, 120, 215, 0.1) 100%);
}

[data-theme="light"] .app-preview[b-v2g18tpsdb]::before {
    background: rgba(248, 250, 252, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .app-preview-content > i[b-v2g18tpsdb] {
    color: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .app-info[b-v2g18tpsdb] {
    background: rgba(248, 250, 252, 0.95);
    border-top-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .app-name[b-v2g18tpsdb] {
    color: #1a1a1a;
}

[data-theme="light"] .no-apps-message[b-v2g18tpsdb] {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .no-apps-message p[b-v2g18tpsdb] {
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .app-close-btn[b-v2g18tpsdb] {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
}

[data-theme="light"] .close-all-btn[b-v2g18tpsdb] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}
/* /Components/Layout/IncomingCallWidget.razor.rz.scp.css */
/* Incoming Call Widget - Mini Mode */
.incoming-call-widget[b-8r0c88a75q] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    z-index: 10000;
    width: 90%;
    max-width: 380px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-top: env(safe-area-inset-top, 10px);
}

.incoming-call-widget.visible[b-8r0c88a75q] {
    transform: translateX(-50%) translateY(0);
}

.incoming-call-widget .widget-content[b-8r0c88a75q] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(40, 40, 40, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 10px 12px;
    margin: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.incoming-call-widget .widget-avatar[b-8r0c88a75q] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.incoming-call-widget .widget-avatar img[b-8r0c88a75q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.incoming-call-widget .widget-avatar-placeholder[b-8r0c88a75q] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.incoming-call-widget .widget-info[b-8r0c88a75q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.incoming-call-widget .widget-label[b-8r0c88a75q] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.incoming-call-widget .widget-caller-name[b-8r0c88a75q] {
    font-size: 16px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.incoming-call-widget .widget-actions[b-8r0c88a75q] {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.incoming-call-widget .widget-btn[b-8r0c88a75q] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.incoming-call-widget .widget-btn:active[b-8r0c88a75q] {
    transform: scale(0.92);
}

.incoming-call-widget .widget-btn.decline[b-8r0c88a75q] {
    background: #ff3b30;
    color: white;
}

.incoming-call-widget .widget-btn.accept[b-8r0c88a75q] {
    background: #34c759;
    color: white;
}

.incoming-call-widget .widget-btn i[b-8r0c88a75q] {
    font-size: 16px;
}

.incoming-call-widget .widget-btn.decline i[b-8r0c88a75q] {
    transform: rotate(135deg);
}

/* Incoming Call Widget - Full Screen Mode */
.incoming-call-fullscreen[b-8r0c88a75q] {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
}

.incoming-call-fullscreen .incoming-call-background[b-8r0c88a75q] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        #2c3e50 0%, 
        #1a252f 50%, 
        #0d1318 100%);
    z-index: -1;
}

.incoming-call-fullscreen .incoming-call-content[b-8r0c88a75q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: env(safe-area-inset-top, 60px) 20px env(safe-area-inset-bottom, 40px);
    padding-top: max(env(safe-area-inset-top), 60px);
}

.incoming-call-fullscreen .caller-section[b-8r0c88a75q] {
    text-align: center;
    margin-bottom: 30px;
}

.incoming-call-fullscreen .caller-name-large[b-8r0c88a75q] {
    font-size: 32px;
    font-weight: 400;
    color: white;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

.incoming-call-fullscreen .caller-label[b-8r0c88a75q] {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.incoming-call-fullscreen .caller-avatar-large[b-8r0c88a75q] {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.incoming-call-fullscreen .caller-avatar-large img[b-8r0c88a75q] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.incoming-call-fullscreen .avatar-placeholder-large[b-8r0c88a75q] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 72px;
    font-weight: 500;
}

.incoming-call-fullscreen .secondary-actions[b-8r0c88a75q] {
    display: flex;
    gap: 60px;
    margin-bottom: 40px;
    margin-top: auto;
}

.incoming-call-fullscreen .secondary-action-btn[b-8r0c88a75q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    padding: 0;
}

.incoming-call-fullscreen .action-icon-circle[b-8r0c88a75q] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.incoming-call-fullscreen .secondary-action-btn:hover .action-icon-circle[b-8r0c88a75q] {
    background: rgba(255, 255, 255, 0.25);
}

.incoming-call-fullscreen .action-icon-circle i[b-8r0c88a75q] {
    font-size: 22px;
    color: white;
}

.incoming-call-fullscreen .secondary-action-btn span[b-8r0c88a75q] {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.incoming-call-fullscreen .primary-actions[b-8r0c88a75q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px 80px;
    justify-items: center;
    margin-bottom: 20px;
}

.incoming-call-fullscreen .call-action-btn[b-8r0c88a75q] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.incoming-call-fullscreen .call-action-btn:active[b-8r0c88a75q] {
    transform: scale(0.92);
}

.incoming-call-fullscreen .call-action-btn i[b-8r0c88a75q] {
    font-size: 28px;
    color: white;
}

.incoming-call-fullscreen .decline-btn[b-8r0c88a75q] {
    background: #ff3b30;
    box-shadow: 0 4px 20px rgba(255, 59, 48, 0.4);
}

.incoming-call-fullscreen .decline-btn i[b-8r0c88a75q] {
    transform: rotate(135deg);
}

.incoming-call-fullscreen .accept-btn[b-8r0c88a75q] {
    background: #34c759;
    box-shadow: 0 4px 20px rgba(52, 199, 89, 0.4);
}

.incoming-call-fullscreen .action-label[b-8r0c88a75q] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.incoming-call-fullscreen .decline-label[b-8r0c88a75q] {
    grid-column: 1;
    grid-row: 2;
}

.incoming-call-fullscreen .accept-label[b-8r0c88a75q] {
    grid-column: 2;
    grid-row: 2;
}

/* Animation for ringing effect */
@keyframes pulse-ring-b-8r0c88a75q {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(52, 199, 89, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
    }
}

.incoming-call-fullscreen .accept-btn[b-8r0c88a75q] {
    animation: pulse-ring-b-8r0c88a75q 1.5s infinite;
}

/* Dark mode adjustments - widget should look the same */
:root[data-theme="dark"] .incoming-call-widget .widget-content[b-8r0c88a75q] {
    background: rgba(30, 30, 30, 0.95);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .incoming-call-widget[b-8r0c88a75q] {
        width: 95%;
    }
    
    .incoming-call-fullscreen .caller-avatar-large[b-8r0c88a75q] {
        width: 160px;
        height: 160px;
    }
    
    .incoming-call-fullscreen .avatar-placeholder-large[b-8r0c88a75q] {
        font-size: 56px;
    }
    
    .incoming-call-fullscreen .caller-name-large[b-8r0c88a75q] {
        font-size: 28px;
    }
    
    .incoming-call-fullscreen .secondary-actions[b-8r0c88a75q] {
        gap: 40px;
    }
    
    .incoming-call-fullscreen .primary-actions[b-8r0c88a75q] {
        gap: 8px 60px;
    }
}

/* For tablets and larger screens */
@media (min-width: 768px) {
    .incoming-call-widget[b-8r0c88a75q] {
        max-width: 400px;
    }
    
    .incoming-call-fullscreen .caller-avatar-large[b-8r0c88a75q] {
        width: 240px;
        height: 240px;
    }
    
    .incoming-call-fullscreen .avatar-placeholder-large[b-8r0c88a75q] {
        font-size: 84px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-c9jmjokpys] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 48px; /* Height of navbar */
    background: 
        radial-gradient(ellipse 80% 50% at 50% 80%, rgba(37, 99, 235, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 30% 70%, rgba(59, 130, 246, 0.3) 0%, transparent 40%),
        radial-gradient(ellipse 50% 30% at 70% 60%, rgba(37, 99, 235, 0.25) 0%, transparent 35%),
        linear-gradient(180deg, #0d1117 0%, #0d1117 20%, #161b22 60%, #1c2128 100%);
    background-attachment: fixed;
    overflow: hidden;
}

main[b-c9jmjokpys] {
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 1;
}

.content[b-c9jmjokpys] {
    padding: 0;
}

article.content[b-c9jmjokpys] {
    padding: 0 !important;
    max-width: none;
}

/* Light theme support */
[data-theme="light"] .page[b-c9jmjokpys] {
    background: 
        radial-gradient(ellipse 80% 50% at 50% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 30% 70%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, #cbd5e1 0%, #e2e8f0 50%, #f1f5f9 100%);
}

/* Modern error UI with Bootstrap styling */
#blazor-error-ui[b-c9jmjokpys] {
    background: var(--bs-warning);
    bottom: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1050;
    color: var(--bs-dark);
    border-top: 2px solid var(--bs-warning-border-subtle);
}

#blazor-error-ui .dismiss[b-c9jmjokpys] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    font-size: 1.25rem;
    opacity: 0.7;
    transition: opacity 0.15s ease-in-out;
}

#blazor-error-ui .dismiss:hover[b-c9jmjokpys] {
    opacity: 1;
}

/* Loading screen */
.loading-screen[b-c9jmjokpys] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 100vh;
    background: var(--login-bg);
}

.loading-spinner[b-c9jmjokpys] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-size: 3rem;
    color: white;
}

/* Light mode - use dark spinner color on gray background */
:global([data-theme="light"]) .loading-spinner[b-c9jmjokpys] {
    color: #64748b;
}

.loading-spinner span[b-c9jmjokpys] {
    font-size: 1rem;
    opacity: 0.9;
}

.loading-spinner i[b-c9jmjokpys] {
    animation: spin-b-c9jmjokpys 1s linear infinite;
}

@keyframes spin-b-c9jmjokpys {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* /Components/Layout/ReconnectionHandler.razor.rz.scp.css */
.reconnect-modal[b-useuw9xsjs] {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.reconnect-modal.show[b-useuw9xsjs] {
    display: block;
}

.reconnect-modal .modal-backdrop[b-useuw9xsjs] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.reconnect-modal .modal-content[b-useuw9xsjs] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
}

.reconnect-modal .modal-body[b-useuw9xsjs] {
    padding: 2rem;
    text-align: center;
}

.reconnect-status[b-useuw9xsjs],
.reconnect-failed[b-useuw9xsjs],
.reconnect-rejected[b-useuw9xsjs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.reconnect-modal h5[b-useuw9xsjs] {
    margin-bottom: 1rem;
    font-weight: 600;
}

.reconnect-modal p[b-useuw9xsjs] {
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.reconnect-modal .btn[b-useuw9xsjs] {
    min-width: 150px;
}

.spinner-border[b-useuw9xsjs] {
    width: 3rem;
    height: 3rem;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .reconnect-modal .modal-content[b-useuw9xsjs] {
        background-color: #2b2b2b;
        color: #ffffff;
    }

    .reconnect-modal p[b-useuw9xsjs] {
        color: #b0b0b0;
    }
}
/* /Components/Layout/SettingsDialog.razor.rz.scp.css */
/* Settings Dialog Overlay */
.settings-overlay[b-wdt3vkdwbl] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    z-index: 2000;
    animation: fadeIn-b-wdt3vkdwbl 0.2s ease;
}

@keyframes fadeIn-b-wdt3vkdwbl {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Settings Dialog */
.settings-dialog[b-wdt3vkdwbl] {
    background: #2b2b2b;
    color: #e0e0e0;
    width: 360px;
    height: 100vh;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    animation: slideIn-b-wdt3vkdwbl 0.3s ease;
}

@keyframes slideIn-b-wdt3vkdwbl {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

[data-theme="light"] .settings-dialog[b-wdt3vkdwbl] {
    background: #ffffff;
    color: #1a1a1a;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

/* Settings Header */
.settings-header[b-wdt3vkdwbl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.25rem;
    border-bottom: 1px solid #404040;
}

[data-theme="light"] .settings-header[b-wdt3vkdwbl] {
    border-bottom: 1px solid #e0e0e0;
}

.settings-header h2[b-wdt3vkdwbl] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.settings-close[b-wdt3vkdwbl] {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.settings-close:hover[b-wdt3vkdwbl] {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .settings-close:hover[b-wdt3vkdwbl] {
    background: rgba(0, 0, 0, 0.05);
}

/* Settings Content */
.settings-content[b-wdt3vkdwbl] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.settings-section[b-wdt3vkdwbl] {
    margin-bottom: 2rem;
}

.settings-section-title[b-wdt3vkdwbl] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: #b0b0b0;
}

[data-theme="light"] .settings-section-title[b-wdt3vkdwbl] {
    color: #666666;
}

/* Theme Options */
.theme-option[b-wdt3vkdwbl] {
    display: block;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.theme-option input[type="radio"][b-wdt3vkdwbl] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-option-content[b-wdt3vkdwbl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    background: #333333;
    transition: background-color 0.2s ease;
}

[data-theme="light"] .theme-option-content[b-wdt3vkdwbl] {
    background: #f5f5f5;
}

.theme-option:hover .theme-option-content[b-wdt3vkdwbl] {
    background: #3a3a3a;
}

[data-theme="light"] .theme-option:hover .theme-option-content[b-wdt3vkdwbl] {
    background: #ebebeb;
}

.theme-option.selected .theme-option-content[b-wdt3vkdwbl] {
    background: #512bd4;
    color: white;
}

.theme-radio[b-wdt3vkdwbl] {
    width: 20px;
    height: 20px;
    border: 2px solid #666666;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

[data-theme="light"] .theme-radio[b-wdt3vkdwbl] {
    border-color: #999999;
}

.theme-option.selected .theme-radio[b-wdt3vkdwbl] {
    border-color: white;
}

.theme-option.selected .theme-radio[b-wdt3vkdwbl]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
}

.theme-option-content span[b-wdt3vkdwbl] {
    font-size: 0.9375rem;
}

/* Settings Select */
.settings-select[b-wdt3vkdwbl] {
    width: 100%;
    padding: 0.75rem;
    background: #333333;
    color: #e0e0e0;
    border: 1px solid #404040;
    border-radius: 6px;
    font-size: 0.9375rem;
    cursor: pointer;
}

[data-theme="light"] .settings-select[b-wdt3vkdwbl] {
    background: #f5f5f5;
    color: #1a1a1a;
    border-color: #cccccc;
}

.settings-select:disabled[b-wdt3vkdwbl] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Settings Button */
.settings-button[b-wdt3vkdwbl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #333333;
    color: #e0e0e0;
    border: 1px solid #404040;
    border-radius: 6px;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
    justify-content: center;
}

[data-theme="light"] .settings-button[b-wdt3vkdwbl] {
    background: #f5f5f5;
    color: #1a1a1a;
    border-color: #cccccc;
}

.settings-button:hover:not(:disabled)[b-wdt3vkdwbl] {
    background: #3a3a3a;
}

[data-theme="light"] .settings-button:hover:not(:disabled)[b-wdt3vkdwbl] {
    background: #ebebeb;
}

.settings-button:disabled[b-wdt3vkdwbl] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Settings Note and Link */
.settings-note[b-wdt3vkdwbl] {
    font-size: 0.8125rem;
    color: #999999;
    margin: 0.75rem 0 0.5rem 0;
    line-height: 1.5;
}

[data-theme="light"] .settings-note[b-wdt3vkdwbl] {
    color: #666666;
}

.settings-link[b-wdt3vkdwbl] {
    font-size: 0.8125rem;
    color: #8b5cf6;
    text-decoration: none;
}

.settings-link:hover[b-wdt3vkdwbl] {
    text-decoration: underline;
}

/* Settings Footer */
.settings-footer[b-wdt3vkdwbl] {
    padding: 1.25rem;
    border-top: 1px solid #404040;
    font-size: 0.8125rem;
    color: #999999;
}

[data-theme="light"] .settings-footer[b-wdt3vkdwbl] {
    border-top: 1px solid #e0e0e0;
    color: #666666;
}

.settings-version[b-wdt3vkdwbl],
.settings-runtime[b-wdt3vkdwbl] {
    margin: 0.25rem 0;
}

/* Settings Footer Actions */
.settings-footer-actions[b-wdt3vkdwbl] {
    padding: 1.25rem;
    border-top: 1px solid #404040;
}

[data-theme="light"] .settings-footer-actions[b-wdt3vkdwbl] {
    border-top: 1px solid #e0e0e0;
}

.settings-close-button[b-wdt3vkdwbl] {
    width: 100%;
    padding: 0.75rem;
    background: #512bd4;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.settings-close-button:hover[b-wdt3vkdwbl] {
    background: #6d3de8;
}

.settings-close-button:active[b-wdt3vkdwbl] {
    background: #4527a8;
}
/* /Components/Layout/TopNavBar.razor.rz.scp.css */
/* Desktop-style Top Navigation Bar */
.desktop-navbar[b-oh3gvis9es] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    background: rgba(10, 10, 15, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.navbar-left[b-oh3gvis9es] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: white;
    font-size: 1.1rem;
}

.skyline-logo[b-oh3gvis9es] {
    width: 26px;
    height: 26px;
    color: #3b82f6;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
    transition: all 0.2s ease;
}

.skyline-logo:hover[b-oh3gvis9es] {
    color: #60a5fa;
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
}

.navbar-left i[b-oh3gvis9es] {
    font-size: 1.3rem;
    opacity: 0.9;
}

.brand-text[b-oh3gvis9es] {
    font-weight: 600;
    color: white;
    text-decoration: none;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.brand-text:hover[b-oh3gvis9es] {
    color: rgba(255, 255, 255, 0.9);
}

.navbar-right[b-oh3gvis9es] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-icon-btn[b-oh3gvis9es] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.nav-icon-btn:hover[b-oh3gvis9es] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.nav-icon-btn:active[b-oh3gvis9es] {
    background: rgba(255, 255, 255, 0.15);
}

/* Badge for background apps count */
.nav-icon-btn.has-badge[b-oh3gvis9es] {
    opacity: 1;
}

.app-badge[b-oh3gvis9es] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #3b82f6;
    border-radius: 8px;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.4);
}

.nav-avatar[b-oh3gvis9es] {
    margin-left: 0.5rem;
}

.nav-avatar img[b-oh3gvis9es] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(59, 130, 246, 0.4);
    transition: border-color 0.2s ease;
}

.nav-avatar img:hover[b-oh3gvis9es] {
    border-color: rgba(59, 130, 246, 0.7);
}

/* User Avatar Container & Dropdown */
.nav-avatar-container[b-oh3gvis9es] {
    position: relative;
    margin-left: 0.5rem;
}

.nav-avatar-btn[b-oh3gvis9es] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.nav-avatar-btn:hover[b-oh3gvis9es] {
    transform: scale(1.05);
}

.nav-avatar-img[b-oh3gvis9es] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(59, 130, 246, 0.4);
    transition: border-color 0.2s ease;
}

.nav-avatar-btn:hover .nav-avatar-img[b-oh3gvis9es] {
    border-color: rgba(59, 130, 246, 0.7);
}

.nav-avatar-placeholder[b-oh3gvis9es] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.3);
    border: 2px solid rgba(59, 130, 246, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

/* User Menu Dropdown */
.user-menu-dropdown[b-oh3gvis9es] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 1001;
    animation: dropdownFadeIn-b-oh3gvis9es 0.15s ease-out;
}

@keyframes dropdownFadeIn-b-oh3gvis9es {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-menu-header[b-oh3gvis9es] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
}

.user-menu-avatar[b-oh3gvis9es] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.user-menu-info[b-oh3gvis9es] {
    display: flex;
    flex-direction: column;
}

.user-menu-name[b-oh3gvis9es] {
    color: #f1f5f9;
    font-weight: 600;
    font-size: 0.95rem;
}

.user-menu-role[b-oh3gvis9es] {
    color: #94a3b8;
    font-size: 0.8rem;
}

.user-menu-divider[b-oh3gvis9es] {
    height: 1px;
    background: rgba(59, 130, 246, 0.15);
    margin: 0;
}

.user-menu-item[b-oh3gvis9es] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: #e2e8f0;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.user-menu-item:hover[b-oh3gvis9es] {
    background: rgba(59, 130, 246, 0.15);
}

.user-menu-item i[b-oh3gvis9es] {
    width: 20px;
    text-align: center;
    color: #94a3b8;
}

.user-menu-item:hover i[b-oh3gvis9es] {
    color: #3b82f6;
}

/* Overlay to close menu when clicking outside */
.user-menu-overlay[b-oh3gvis9es] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

/* Light theme support */
[data-theme="light"] .desktop-navbar[b-oh3gvis9es] {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .navbar-left[b-oh3gvis9es],
[data-theme="light"] .brand-text[b-oh3gvis9es],
[data-theme="light"] .nav-icon-btn[b-oh3gvis9es] {
    color: #1a1a1a;
}

[data-theme="light"] .skyline-logo[b-oh3gvis9es] {
    color: #2563eb;
    filter: drop-shadow(0 0 3px rgba(37, 99, 235, 0.3));
}

[data-theme="light"] .nav-icon-btn:hover[b-oh3gvis9es] {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .nav-avatar img[b-oh3gvis9es] {
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .app-badge[b-oh3gvis9es] {
    background: #2563eb;
}

[data-theme="light"] .nav-avatar-placeholder[b-oh3gvis9es] {
    background: rgba(59, 130, 246, 0.2);
    color: #2563eb;
}

[data-theme="light"] .user-menu-dropdown[b-oh3gvis9es] {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .user-menu-name[b-oh3gvis9es] {
    color: #1e293b;
}

[data-theme="light"] .user-menu-role[b-oh3gvis9es] {
    color: #64748b;
}

[data-theme="light"] .user-menu-divider[b-oh3gvis9es] {
    background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .user-menu-item[b-oh3gvis9es] {
    color: #1e293b;
}

[data-theme="light"] .user-menu-item:hover[b-oh3gvis9es] {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .user-menu-item i[b-oh3gvis9es] {
    color: #64748b;
}

[data-theme="light"] .user-menu-item:hover i[b-oh3gvis9es] {
    color: #2563eb;
}

/* AI Assistant Button styling */
.nav-icon-btn.ai-assistant-btn[b-oh3gvis9es] {
    position: relative;
}

.nav-icon-btn.ai-assistant-btn i[b-oh3gvis9es] {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-icon-btn.ai-assistant-btn:hover[b-oh3gvis9es] {
    background: rgba(59, 130, 246, 0.15);
}

.nav-icon-btn.ai-assistant-btn:hover i[b-oh3gvis9es] {
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
}

[data-theme="light"] .nav-icon-btn.ai-assistant-btn i[b-oh3gvis9es] {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .nav-icon-btn.ai-assistant-btn:hover[b-oh3gvis9es] {
    background: rgba(37, 99, 235, 0.1);
}

/* Demo Call Button - styled to stand out for demo purposes */
.nav-icon-btn.demo-call-btn[b-oh3gvis9es] {
    position: relative;
}

.nav-icon-btn.demo-call-btn i[b-oh3gvis9es] {
    color: #22c55e;
}

.nav-icon-btn.demo-call-btn:hover[b-oh3gvis9es] {
    background: rgba(34, 197, 94, 0.15);
}

.nav-icon-btn.demo-call-btn:hover i[b-oh3gvis9es] {
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
}

/* Pulse animation for the demo call button */
.nav-icon-btn.demo-call-btn[b-oh3gvis9es]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    animation: demoPulse-b-oh3gvis9es 2s infinite;
}

@keyframes demoPulse-b-oh3gvis9es {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
    }
}

[data-theme="light"] .nav-icon-btn.demo-call-btn i[b-oh3gvis9es] {
    color: #16a34a;
}

[data-theme="light"] .nav-icon-btn.demo-call-btn:hover[b-oh3gvis9es] {
    background: rgba(22, 163, 74, 0.1);
}
/* /Components/Layout/TransitionLayout.razor.rz.scp.css */
/* Page Transition Overlay - Full screen page with center expand animation */
.page-transition-overlay[b-m0dfrfzjap] {
    position: fixed;
    top: 48px; /* Below the navbar */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

.page-transition-overlay.visible[b-m0dfrfzjap] {
    opacity: 1;
    pointer-events: auto;
}

/* Page Container - Expands from center */
.page-transition-container[b-m0dfrfzjap] {
    width: 100%;
    height: 100%;
    background: var(--bg-color, #0a0a0f);
    overflow: hidden;
    transform: scale(0.85);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.25s ease-out;
    display: flex;
    flex-direction: column;
}

[data-theme="light"] .page-transition-container[b-m0dfrfzjap] {
    background: #f1f5f9;
}

/* Animation States - Expand from center */
.page-transition-container.expand-in[b-m0dfrfzjap] {
    transform: scale(1);
    opacity: 1;
}

.page-transition-container.expand-out[b-m0dfrfzjap] {
    transform: scale(0.85);
    opacity: 0;
}

/* Smooth overscroll behavior for content */
.page-transition-container > *[b-m0dfrfzjap] {
    flex: 1;
    overflow: auto;
    overscroll-behavior: contain;
}
/* /Components/Pages/AppBuilder.razor.rz.scp.css */
/* App Builder Container */
.appbuilder-container[b-nzk432uqaf] {
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--bg-color);
    overflow: hidden;
}

/* Sidebar */
.appbuilder-sidebar[b-nzk432uqaf] {
    width: 380px;
    min-width: 380px;
    height: 100%;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(59, 130, 246, 0.2);
    overflow: hidden;
}

[data-theme="light"] .appbuilder-sidebar[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-header[b-nzk432uqaf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: 44px;
}

.sidebar-title[b-nzk432uqaf] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

[data-theme="light"] .sidebar-title[b-nzk432uqaf] {
    color: #1e293b;
}

.new-app-btn[b-nzk432uqaf] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(180deg, #40c8e0 0%, #1ba1e2 50%, #0078d7 100%);
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.new-app-btn:hover[b-nzk432uqaf] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 120, 215, 0.4);
}

/* Search Box */
.search-box[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    margin: 0 16px 16px;
    gap: 8px;
}

[data-theme="light"] .search-box[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.05);
}

.search-box i[b-nzk432uqaf] {
    color: #64748b;
    font-size: 14px;
}

.search-box input[b-nzk432uqaf] {
    flex: 1;
    border: none;
    background: none;
    font-size: 17px;
    color: #e2e8f0;
    outline: none;
}

[data-theme="light"] .search-box input[b-nzk432uqaf] {
    color: #1e293b;
}

.search-box input[b-nzk432uqaf]::placeholder {
    color: #64748b;
}

/* Stats Cards */
.stats-cards[b-nzk432uqaf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 16px 16px;
}

.stat-card[b-nzk432uqaf] {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid rgba(59, 130, 246, 0.2);
    text-align: center;
}

[data-theme="light"] .stat-card[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.stat-card:hover[b-nzk432uqaf] {
    transform: scale(1.02);
}

.stat-card.selected[b-nzk432uqaf] {
    box-shadow: 0 0 0 2px #0078d7;
}

.stat-icon[b-nzk432uqaf] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    margin: 0 auto 6px;
}

.all-icon[b-nzk432uqaf] {
    background: linear-gradient(180deg, #40c8e0 0%, #0078d7 100%);
}

.published-icon[b-nzk432uqaf] {
    background: #34C759;
}

.draft-icon[b-nzk432uqaf] {
    background: #FF9500;
}

.stat-count[b-nzk432uqaf] {
    font-size: 22px;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1;
}

[data-theme="light"] .stat-count[b-nzk432uqaf] {
    color: #1e293b;
}

.stat-label[b-nzk432uqaf] {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

/* App List */
.app-list[b-nzk432uqaf] {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

.app-item[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    gap: 12px;
    border-radius: 12px;
    margin-bottom: 8px;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(59, 130, 246, 0.2);
    transition: all 0.15s ease;
}

[data-theme="light"] .app-item[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.app-item:hover[b-nzk432uqaf] {
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .app-item:hover[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.04);
}

.app-item.selected[b-nzk432uqaf] {
    background: rgba(0, 120, 215, 0.2);
    border-color: rgba(0, 120, 215, 0.4);
}

.app-icon[b-nzk432uqaf] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}

.app-info[b-nzk432uqaf] {
    flex: 1;
    min-width: 0;
}

.app-name[b-nzk432uqaf] {
    display: block;
    font-size: 16px;
    color: #e2e8f0;
    font-weight: 500;
}

[data-theme="light"] .app-name[b-nzk432uqaf] {
    color: #1e293b;
}

.app-meta[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.app-type[b-nzk432uqaf] {
    font-size: 12px;
    color: #94a3b8;
}

.published-badge[b-nzk432uqaf] {
    font-size: 10px;
    background: rgba(34, 197, 94, 0.2);
    color: #34C759;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.app-chevron[b-nzk432uqaf] {
    color: #64748b;
    font-size: 14px;
}

/* No Apps State */
.no-apps[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #94a3b8;
    text-align: center;
}

.no-apps i[b-nzk432uqaf] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-apps p[b-nzk432uqaf] {
    font-size: 17px;
    margin: 0 0 16px;
}

.create-first-btn[b-nzk432uqaf] {
    background: linear-gradient(180deg, #40c8e0 0%, #0078d7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.create-first-btn:hover[b-nzk432uqaf] {
    transform: scale(1.05);
}

/* Sidebar Footer */
.sidebar-footer[b-nzk432uqaf] {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .sidebar-footer[b-nzk432uqaf] {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-btn[b-nzk432uqaf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    font-size: 14px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

[data-theme="light"] .footer-btn[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.05);
}

.footer-btn:hover[b-nzk432uqaf] {
    background: rgba(59, 130, 246, 0.2);
    color: #e2e8f0;
}

[data-theme="light"] .footer-btn:hover[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

/* Detail Panel */
.appbuilder-detail[b-nzk432uqaf] {
    flex: 1;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-theme="light"] .appbuilder-detail[b-nzk432uqaf] {
    background: rgba(241, 245, 249, 0.8);
}

.detail-header[b-nzk432uqaf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: 44px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .detail-header[b-nzk432uqaf] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.back-btn[b-nzk432uqaf] {
    display: none;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #0078d7;
    font-size: 17px;
    cursor: pointer;
    padding: 8px 0;
}

.back-btn i[b-nzk432uqaf] {
    font-size: 14px;
}

.detail-actions[b-nzk432uqaf] {
    display: flex;
    gap: 8px;
}

.action-btn[b-nzk432uqaf] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

[data-theme="light"] .action-btn[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.05);
}

.action-btn:hover[b-nzk432uqaf] {
    background: rgba(59, 130, 246, 0.2);
    color: #e2e8f0;
}

.action-btn.preview-btn:hover[b-nzk432uqaf] {
    color: #0078d7;
}

.action-btn.publish-btn:hover[b-nzk432uqaf] {
    color: #34C759;
}

.action-btn.unpublish-btn:hover[b-nzk432uqaf] {
    color: #FF9500;
}

.action-btn.delete-btn:hover[b-nzk432uqaf] {
    background: rgba(239, 68, 68, 0.2);
    color: #FF3B30;
}

/* Editor Content */
.editor-content[b-nzk432uqaf] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* App Header Section */
.app-header-section[b-nzk432uqaf] {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .app-header-section[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.app-header-preview[b-nzk432uqaf] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.app-icon-large[b-nzk432uqaf] {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.app-header-info[b-nzk432uqaf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-name-input[b-nzk432uqaf] {
    font-size: 24px;
    font-weight: 600;
    color: #e2e8f0;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    width: 100%;
}

[data-theme="light"] .app-name-input[b-nzk432uqaf] {
    color: #1e293b;
}

.app-name-input[b-nzk432uqaf]::placeholder {
    color: #64748b;
}

.app-desc-input[b-nzk432uqaf] {
    font-size: 15px;
    color: #94a3b8;
    background: none;
    border: none;
    outline: none;
    resize: none;
    padding: 0;
    width: 100%;
    min-height: 40px;
}

.app-desc-input[b-nzk432uqaf]::placeholder {
    color: #64748b;
}

/* Icon & Color Picker */
.app-icon-picker[b-nzk432uqaf] {
    padding-top: 16px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
}

.picker-label[b-nzk432uqaf] {
    font-size: 13px;
    color: #94a3b8;
    display: block;
    margin-bottom: 12px;
}

.icon-color-row[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.icon-selector[b-nzk432uqaf] {
    position: relative;
}

.icon-btn[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    color: #e2e8f0;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease;
}

[data-theme="light"] .icon-btn[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.05);
    color: #1e293b;
}

.icon-btn:hover[b-nzk432uqaf] {
    background: rgba(59, 130, 246, 0.2);
}

.icon-btn i:last-child[b-nzk432uqaf] {
    font-size: 10px;
    color: #64748b;
}

.icon-picker-dropdown[b-nzk432uqaf] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.2);
    max-width: 320px;
}

[data-theme="light"] .icon-picker-dropdown[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.icon-option[b-nzk432uqaf] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: none;
    border: 1px solid transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s ease;
}

.icon-option:hover[b-nzk432uqaf] {
    background: rgba(59, 130, 246, 0.2);
    color: #e2e8f0;
}

.icon-option.selected[b-nzk432uqaf] {
    background: rgba(0, 120, 215, 0.3);
    border-color: #0078d7;
    color: #0078d7;
}

.color-options[b-nzk432uqaf] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-option[b-nzk432uqaf] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.color-option:hover[b-nzk432uqaf] {
    transform: scale(1.15);
}

.color-option.selected[b-nzk432uqaf] {
    border-color: white;
    box-shadow: 0 0 0 2px currentColor;
}

/* Editor Tabs */
.editor-tabs[b-nzk432uqaf] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: rgba(30, 41, 59, 0.85);
    border-radius: 12px;
    padding: 8px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .editor-tabs[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.editor-tab[b-nzk432uqaf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.editor-tab:hover[b-nzk432uqaf] {
    background: rgba(59, 130, 246, 0.1);
    color: #e2e8f0;
}

.editor-tab.active[b-nzk432uqaf] {
    background: linear-gradient(180deg, #40c8e0 0%, #0078d7 100%);
    color: white;
}

/* Tab Content */
.tab-content[b-nzk432uqaf] {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .tab-content[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Config Section */
.config-section[b-nzk432uqaf] {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.config-section:last-child[b-nzk432uqaf] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.config-title[b-nzk432uqaf] {
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="light"] .config-title[b-nzk432uqaf] {
    color: #1e293b;
}

.config-title i[b-nzk432uqaf] {
    color: #0078d7;
    font-size: 14px;
}

.config-fields[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.config-field[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.config-field label[b-nzk432uqaf] {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

.config-field input[b-nzk432uqaf],
.config-field select[b-nzk432uqaf],
.config-field textarea[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 15px;
    color: #e2e8f0;
    outline: none;
    transition: border-color 0.15s ease;
}

[data-theme="light"] .config-field input[b-nzk432uqaf],
[data-theme="light"] .config-field select[b-nzk432uqaf],
[data-theme="light"] .config-field textarea[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.05);
    color: #1e293b;
}

.config-field input:focus[b-nzk432uqaf],
.config-field select:focus[b-nzk432uqaf],
.config-field textarea:focus[b-nzk432uqaf] {
    border-color: #0078d7;
}

.config-field input[b-nzk432uqaf]::placeholder {
    color: #64748b;
}

/* Toggle Field */
.toggle-field[b-nzk432uqaf] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.toggle[b-nzk432uqaf] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.toggle input[b-nzk432uqaf] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-nzk432uqaf] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.3s;
    border-radius: 28px;
}

[data-theme="light"] .toggle-slider[b-nzk432uqaf] {
    background-color: rgba(0, 0, 0, 0.15);
}

.toggle-slider[b-nzk432uqaf]:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle input:checked + .toggle-slider[b-nzk432uqaf] {
    background: linear-gradient(180deg, #40c8e0 0%, #0078d7 100%);
}

.toggle input:checked + .toggle-slider[b-nzk432uqaf]:before {
    transform: translateX(22px);
}

.toggle.small[b-nzk432uqaf] {
    width: 40px;
    height: 22px;
}

.toggle.small .toggle-slider[b-nzk432uqaf]:before {
    height: 16px;
    width: 16px;
}

.toggle.small input:checked + .toggle-slider[b-nzk432uqaf]:before {
    transform: translateX(18px);
}

/* Sections Editor */
.sections-editor[b-nzk432uqaf] {
    margin-top: 20px;
}

.sections-header[b-nzk432uqaf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.sections-header h4[b-nzk432uqaf] {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

[data-theme="light"] .sections-header h4[b-nzk432uqaf] {
    color: #1e293b;
}

.add-section-btn[b-nzk432uqaf],
.add-field-btn[b-nzk432uqaf],
.add-condition-btn[b-nzk432uqaf],
.add-action-btn[b-nzk432uqaf],
.add-rule-btn[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 120, 215, 0.2);
    border: 1px solid rgba(0, 120, 215, 0.3);
    color: #0078d7;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-section-btn:hover[b-nzk432uqaf],
.add-field-btn:hover[b-nzk432uqaf],
.add-condition-btn:hover[b-nzk432uqaf],
.add-action-btn:hover[b-nzk432uqaf],
.add-rule-btn:hover[b-nzk432uqaf] {
    background: rgba(0, 120, 215, 0.3);
}

/* Section Item */
.section-item[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .section-item[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.03);
}

.section-header-row[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.section-header-row input[b-nzk432uqaf] {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #e2e8f0;
    outline: none;
}

[data-theme="light"] .section-header-row input[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.05);
    color: #1e293b;
}

.remove-btn[b-nzk432uqaf] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.15);
    border: none;
    color: #FF3B30;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.remove-btn:hover[b-nzk432uqaf] {
    background: rgba(239, 68, 68, 0.3);
}

.remove-btn.small[b-nzk432uqaf] {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

/* Fields List */
.fields-list[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-row[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-label-input[b-nzk432uqaf] {
    width: 120px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    color: #e2e8f0;
    outline: none;
}

.field-path-input[b-nzk432uqaf] {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    color: #e2e8f0;
    outline: none;
}

.field-type-select[b-nzk432uqaf] {
    width: 100px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
    color: #e2e8f0;
    outline: none;
}

[data-theme="light"] .field-label-input[b-nzk432uqaf],
[data-theme="light"] .field-path-input[b-nzk432uqaf],
[data-theme="light"] .field-type-select[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.05);
    color: #1e293b;
}

/* Test Connection */
.test-connection[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.test-btn[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #0078d7;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.test-btn:hover[b-nzk432uqaf] {
    background: rgba(59, 130, 246, 0.3);
}

.test-result[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
}

.test-result.success[b-nzk432uqaf] {
    background: rgba(34, 197, 94, 0.15);
    color: #34C759;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.test-result.error[b-nzk432uqaf] {
    background: rgba(239, 68, 68, 0.15);
    color: #FF3B30;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Rules Editor */
.rules-editor[b-nzk432uqaf],
.actions-editor[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rules-header[b-nzk432uqaf],
.actions-header[b-nzk432uqaf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rules-header h3[b-nzk432uqaf],
.actions-header h3[b-nzk432uqaf] {
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="light"] .rules-header h3[b-nzk432uqaf],
[data-theme="light"] .actions-header h3[b-nzk432uqaf] {
    color: #1e293b;
}

.rule-item[b-nzk432uqaf],
.action-item[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .rule-item[b-nzk432uqaf],
[data-theme="light"] .action-item[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.03);
}

.rule-item.disabled[b-nzk432uqaf] {
    opacity: 0.5;
}

.rule-header[b-nzk432uqaf],
.action-header[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.rule-name-input[b-nzk432uqaf],
.action-name-input[b-nzk432uqaf] {
    flex: 1;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 500;
    color: #e2e8f0;
    outline: none;
}

[data-theme="light"] .rule-name-input[b-nzk432uqaf],
[data-theme="light"] .action-name-input[b-nzk432uqaf] {
    color: #1e293b;
}

.rule-body[b-nzk432uqaf],
.action-body[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rule-trigger[b-nzk432uqaf],
.rule-conditions[b-nzk432uqaf],
.rule-actions[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule-trigger label[b-nzk432uqaf],
.rule-conditions label[b-nzk432uqaf],
.rule-actions label[b-nzk432uqaf] {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
}

.condition-row[b-nzk432uqaf],
.action-row[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.condition-row input[b-nzk432uqaf],
.condition-row select[b-nzk432uqaf],
.action-row select[b-nzk432uqaf] {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    color: #e2e8f0;
    outline: none;
}

[data-theme="light"] .condition-row input[b-nzk432uqaf],
[data-theme="light"] .condition-row select[b-nzk432uqaf],
[data-theme="light"] .action-row select[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.05);
    color: #1e293b;
}

/* No Rules/Actions State */
.no-rules[b-nzk432uqaf],
.no-actions[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #94a3b8;
    text-align: center;
}

.no-rules i[b-nzk432uqaf],
.no-actions i[b-nzk432uqaf] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.no-rules p[b-nzk432uqaf],
.no-actions p[b-nzk432uqaf] {
    font-size: 17px;
    margin: 0 0 8px;
    color: #e2e8f0;
}

[data-theme="light"] .no-rules p[b-nzk432uqaf],
[data-theme="light"] .no-actions p[b-nzk432uqaf] {
    color: #1e293b;
}

.no-rules span[b-nzk432uqaf],
.no-actions span[b-nzk432uqaf] {
    font-size: 14px;
}

/* Action Icon */
.action-icon[b-nzk432uqaf] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

/* Editor Footer */
.editor-footer[b-nzk432uqaf] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

.save-btn[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #40c8e0 0%, #0078d7 100%);
    border: none;
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 120, 215, 0.3);
}

.save-btn:hover[b-nzk432uqaf] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 120, 215, 0.4);
}

/* No App Selected */
.no-app-selected[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 24px;
}

.welcome-content[b-nzk432uqaf] {
    text-align: center;
    max-width: 400px;
}

.welcome-icon[b-nzk432uqaf] {
    width: 100px;
    height: 100px;
    background: linear-gradient(180deg, #40c8e0 0%, #1ba1e2 50%, #0078d7 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 8px 24px rgba(0, 120, 215, 0.3);
}

.welcome-icon i[b-nzk432uqaf] {
    font-size: 40px;
    color: white;
}

.welcome-content h2[b-nzk432uqaf] {
    font-size: 28px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 8px;
}

[data-theme="light"] .welcome-content h2[b-nzk432uqaf] {
    color: #1e293b;
}

.welcome-content > p[b-nzk432uqaf] {
    font-size: 17px;
    color: #94a3b8;
    margin: 0 0 32px;
}

.welcome-features[b-nzk432uqaf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.feature[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(30, 41, 59, 0.85);
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .feature[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.feature i[b-nzk432uqaf] {
    color: #0078d7;
    font-size: 18px;
}

.feature span[b-nzk432uqaf] {
    font-size: 14px;
    color: #e2e8f0;
    font-weight: 500;
}

[data-theme="light"] .feature span[b-nzk432uqaf] {
    color: #1e293b;
}

.get-started-btn[b-nzk432uqaf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #40c8e0 0%, #0078d7 100%);
    border: none;
    color: white;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 120, 215, 0.3);
}

.get-started-btn:hover[b-nzk432uqaf] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 120, 215, 0.4);
}

/* Dialog Overlay */
.dialog-overlay[b-nzk432uqaf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-nzk432uqaf 0.2s ease;
}

@keyframes fadeIn-b-nzk432uqaf {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog-content[b-nzk432uqaf] {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    width: 90%;
    max-width: 400px;
    overflow: hidden;
    animation: slideUp-b-nzk432uqaf 0.3s ease;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .dialog-content[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

@keyframes slideUp-b-nzk432uqaf {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.dialog-header[b-nzk432uqaf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .dialog-header[b-nzk432uqaf] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dialog-header h3[b-nzk432uqaf] {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: #e2e8f0;
}

[data-theme="light"] .dialog-header h3[b-nzk432uqaf] {
    color: #1e293b;
}

.dialog-cancel[b-nzk432uqaf],
.dialog-done[b-nzk432uqaf] {
    background: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
    padding: 4px 8px;
}

.dialog-cancel[b-nzk432uqaf] {
    color: #0078d7;
}

.dialog-done[b-nzk432uqaf] {
    color: #0078d7;
    font-weight: 600;
}

.dialog-done:disabled[b-nzk432uqaf] {
    color: #64748b;
    cursor: not-allowed;
}

.dialog-body[b-nzk432uqaf] {
    padding: 16px;
}

.app-name-dialog-input[b-nzk432uqaf] {
    width: 100%;
    border: none;
    font-size: 17px;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    outline: none;
    margin-bottom: 16px;
}

[data-theme="light"] .app-name-dialog-input[b-nzk432uqaf] {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.05);
}

.app-name-dialog-input[b-nzk432uqaf]::placeholder {
    color: #64748b;
}

/* App Type Selector */
.app-type-selector[b-nzk432uqaf] {
    margin-top: 8px;
}

.type-label[b-nzk432uqaf] {
    display: block;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.type-options[b-nzk432uqaf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.type-option[b-nzk432uqaf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #94a3b8;
}

[data-theme="light"] .type-option[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.05);
}

.type-option:hover:not(.disabled)[b-nzk432uqaf] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #e2e8f0;
}

.type-option.selected[b-nzk432uqaf] {
    background: rgba(0, 120, 215, 0.2);
    border-color: #0078d7;
    color: #0078d7;
}

.type-option.disabled[b-nzk432uqaf] {
    opacity: 0.4;
    cursor: not-allowed;
}

.type-option i[b-nzk432uqaf] {
    font-size: 24px;
}

.type-option span[b-nzk432uqaf] {
    font-size: 13px;
    font-weight: 500;
}

/* Delete Dialog */
.delete-dialog .dialog-header[b-nzk432uqaf] {
    justify-content: center;
}

.delete-dialog .dialog-body[b-nzk432uqaf] {
    text-align: center;
}

.delete-dialog .dialog-body p[b-nzk432uqaf] {
    color: #e2e8f0;
    margin: 0 0 8px;
}

[data-theme="light"] .delete-dialog .dialog-body p[b-nzk432uqaf] {
    color: #1e293b;
}

.warning-text[b-nzk432uqaf] {
    color: #94a3b8 !important;
    font-size: 14px;
}

.dialog-footer[b-nzk432uqaf] {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .dialog-footer[b-nzk432uqaf] {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dialog-btn[b-nzk432uqaf] {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cancel-btn[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #0078d7;
}

[data-theme="light"] .cancel-btn[b-nzk432uqaf] {
    background: rgba(0, 0, 0, 0.05);
}

.cancel-btn:hover[b-nzk432uqaf] {
    background: rgba(255, 255, 255, 0.2);
}

.delete-confirm-btn[b-nzk432uqaf] {
    background: #FF3B30;
    border: none;
    color: white;
}

.delete-confirm-btn:hover[b-nzk432uqaf] {
    background: #e53935;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .appbuilder-container[b-nzk432uqaf] {
        flex-direction: column;
    }

    .appbuilder-sidebar[b-nzk432uqaf] {
        width: 100%;
        min-width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        transition: transform 0.3s ease;
    }

    .appbuilder-sidebar.app-selected[b-nzk432uqaf] {
        transform: translateX(-100%);
    }

    .appbuilder-detail[b-nzk432uqaf] {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .appbuilder-detail.has-app[b-nzk432uqaf] {
        transform: translateX(0);
    }

    .back-btn[b-nzk432uqaf] {
        display: flex;
    }

    .stats-cards[b-nzk432uqaf] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Custom Scrollbar */
.appbuilder-sidebar[b-nzk432uqaf]::-webkit-scrollbar,
.app-list[b-nzk432uqaf]::-webkit-scrollbar,
.editor-content[b-nzk432uqaf]::-webkit-scrollbar {
    width: 6px;
}

.appbuilder-sidebar[b-nzk432uqaf]::-webkit-scrollbar-track,
.app-list[b-nzk432uqaf]::-webkit-scrollbar-track,
.editor-content[b-nzk432uqaf]::-webkit-scrollbar-track {
    background: transparent;
}

.appbuilder-sidebar[b-nzk432uqaf]::-webkit-scrollbar-thumb,
.app-list[b-nzk432uqaf]::-webkit-scrollbar-thumb,
.editor-content[b-nzk432uqaf]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.appbuilder-sidebar[b-nzk432uqaf]::-webkit-scrollbar-thumb:hover,
.app-list[b-nzk432uqaf]::-webkit-scrollbar-thumb:hover,
.editor-content[b-nzk432uqaf]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .appbuilder-sidebar[b-nzk432uqaf]::-webkit-scrollbar-thumb,
[data-theme="light"] .app-list[b-nzk432uqaf]::-webkit-scrollbar-thumb,
[data-theme="light"] .editor-content[b-nzk432uqaf]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}
/* /Components/Pages/AppStore.razor.rz.scp.css */
/* App Store Container */
.appstore-container[b-iqmpcww5g3] {
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--bg-color);
    overflow: hidden;
}

/* Sidebar */
.appstore-sidebar[b-iqmpcww5g3] {
    width: 380px;
    min-width: 380px;
    height: 100%;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(59, 130, 246, 0.2);
    overflow: hidden;
}

[data-theme="light"] .appstore-sidebar[b-iqmpcww5g3] {
    background: rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-header[b-iqmpcww5g3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: 44px;
}

.sidebar-title[b-iqmpcww5g3] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

[data-theme="light"] .sidebar-title[b-iqmpcww5g3] {
    color: #1e293b;
}

.updates-btn[b-iqmpcww5g3] {
    background: none;
    border: none;
    color: #007AFF;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    position: relative;
}

.updates-badge[b-iqmpcww5g3] {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #FF3B30;
    color: white;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Search Box */
.search-box[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    margin: 0 16px 16px;
    gap: 8px;
}

[data-theme="light"] .search-box[b-iqmpcww5g3] {
    background: rgba(0, 0, 0, 0.05);
}

.search-box i[b-iqmpcww5g3] {
    color: #64748b;
    font-size: 14px;
}

.search-box input[b-iqmpcww5g3] {
    flex: 1;
    border: none;
    background: none;
    font-size: 17px;
    color: #e2e8f0;
    outline: none;
}

[data-theme="light"] .search-box input[b-iqmpcww5g3] {
    color: #1e293b;
}

.search-box input[b-iqmpcww5g3]::placeholder {
    color: #64748b;
}

.clear-search[b-iqmpcww5g3] {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
}

.clear-search:hover[b-iqmpcww5g3] {
    color: #94a3b8;
}

/* Category Tabs */
.category-tabs[b-iqmpcww5g3] {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-tabs[b-iqmpcww5g3]::-webkit-scrollbar {
    display: none;
}

.category-tab[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 20px;
    color: #e2e8f0;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

[data-theme="light"] .category-tab[b-iqmpcww5g3] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

.category-tab:hover[b-iqmpcww5g3] {
    background: rgba(59, 130, 246, 0.2);
}

.category-tab.selected[b-iqmpcww5g3] {
    background: #007AFF;
    border-color: #007AFF;
    color: white;
}

.category-tab.selected i[b-iqmpcww5g3] {
    color: white !important;
}

.category-tab i[b-iqmpcww5g3] {
    font-size: 12px;
}

/* Apps List */
.apps-list[b-iqmpcww5g3] {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

.list-section-header[b-iqmpcww5g3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.list-section-header span[b-iqmpcww5g3] {
    font-size: 20px;
    font-weight: 700;
    color: #e2e8f0;
}

[data-theme="light"] .list-section-header span[b-iqmpcww5g3] {
    color: #1e293b;
}

.list-section-header .count[b-iqmpcww5g3] {
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
}

.see-all-btn[b-iqmpcww5g3] {
    background: none;
    border: none;
    color: #007AFF;
    font-size: 15px;
    cursor: pointer;
}

/* Featured Carousel */
.featured-carousel[b-iqmpcww5g3] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
    margin-bottom: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.featured-carousel[b-iqmpcww5g3]::-webkit-scrollbar {
    display: none;
}

.featured-card[b-iqmpcww5g3] {
    flex: 0 0 260px;
    background: rgba(30, 41, 59, 0.85);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.15s ease;
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

[data-theme="light"] .featured-card[b-iqmpcww5g3] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.featured-card:hover[b-iqmpcww5g3] {
    transform: scale(1.02);
}

.featured-icon[b-iqmpcww5g3] {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.featured-info[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
}

.featured-name[b-iqmpcww5g3] {
    font-size: 17px;
    font-weight: 600;
    color: #e2e8f0;
}

[data-theme="light"] .featured-name[b-iqmpcww5g3] {
    color: #1e293b;
}

.featured-category[b-iqmpcww5g3] {
    font-size: 13px;
    color: #94a3b8;
}

.installed-badge[b-iqmpcww5g3] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(52, 199, 89, 0.2);
    color: #34C759;
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Apps Grid */
.apps-grid[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
}

.app-item[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    gap: 12px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    transition: background 0.15s ease;
}

[data-theme="light"] .app-item[b-iqmpcww5g3] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.app-item:hover[b-iqmpcww5g3] {
    background: rgba(59, 130, 246, 0.05);
    margin: 0 -16px;
    padding: 12px 16px;
}

.app-item.selected[b-iqmpcww5g3] {
    background: rgba(0, 122, 255, 0.15);
    margin: 0 -16px;
    padding: 12px 16px;
}

.app-rank[b-iqmpcww5g3] {
    width: 24px;
    font-size: 17px;
    font-weight: 600;
    color: #64748b;
    text-align: center;
    flex-shrink: 0;
}

.app-icon[b-iqmpcww5g3] {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.app-info[b-iqmpcww5g3] {
    flex: 1;
    min-width: 0;
}

.app-name[b-iqmpcww5g3] {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="light"] .app-name[b-iqmpcww5g3] {
    color: #1e293b;
}

.app-category[b-iqmpcww5g3] {
    display: block;
    font-size: 13px;
    color: #94a3b8;
    margin: 2px 0;
}

.app-rating[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.app-rating i[b-iqmpcww5g3] {
    font-size: 10px;
    color: #3a3a3c;
}

.app-rating i.filled[b-iqmpcww5g3] {
    color: #FF9500;
}

.rating-count[b-iqmpcww5g3] {
    font-size: 12px;
    color: #64748b;
    margin-left: 4px;
}

.app-action[b-iqmpcww5g3] {
    flex-shrink: 0;
}

.get-btn[b-iqmpcww5g3],
.open-btn[b-iqmpcww5g3] {
    background: rgba(0, 122, 255, 0.15);
    border: none;
    color: #007AFF;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.get-btn:hover[b-iqmpcww5g3],
.open-btn:hover[b-iqmpcww5g3] {
    background: rgba(0, 122, 255, 0.25);
}

.open-btn[b-iqmpcww5g3] {
    background: rgba(52, 199, 89, 0.15);
    color: #34C759;
}

.open-btn:hover[b-iqmpcww5g3] {
    background: rgba(52, 199, 89, 0.25);
}

.app-chevron[b-iqmpcww5g3] {
    color: #64748b;
    font-size: 12px;
    flex-shrink: 0;
}

/* No Apps */
.no-apps[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #94a3b8;
    text-align: center;
}

.no-apps i[b-iqmpcww5g3] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-apps p[b-iqmpcww5g3] {
    font-size: 17px;
    margin: 0 0 4px;
    color: #e2e8f0;
}

[data-theme="light"] .no-apps p[b-iqmpcww5g3] {
    color: #1e293b;
}

.no-apps span[b-iqmpcww5g3] {
    font-size: 14px;
}

/* Sidebar Footer */
.sidebar-footer[b-iqmpcww5g3] {
    padding: 16px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .sidebar-footer[b-iqmpcww5g3] {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-btn[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #007AFF;
    font-size: 17px;
    cursor: pointer;
    padding: 8px 0;
}

.footer-btn i[b-iqmpcww5g3] {
    font-size: 20px;
}

/* Detail Panel */
.appstore-detail[b-iqmpcww5g3] {
    flex: 1;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-theme="light"] .appstore-detail[b-iqmpcww5g3] {
    background: rgba(241, 245, 249, 0.8);
}

.detail-header[b-iqmpcww5g3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: 44px;
}

.back-btn[b-iqmpcww5g3] {
    display: none;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #007AFF;
    font-size: 17px;
    cursor: pointer;
    padding: 8px 0;
}

.back-btn i[b-iqmpcww5g3] {
    font-size: 14px;
}

.share-btn[b-iqmpcww5g3] {
    background: none;
    border: none;
    color: #007AFF;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
}

/* App Header Section */
.app-header-section[b-iqmpcww5g3] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0 24px 24px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .app-header-section[b-iqmpcww5g3] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.app-icon-large[b-iqmpcww5g3] {
    width: 128px;
    height: 128px;
    min-width: 128px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: white;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.app-header-info[b-iqmpcww5g3] {
    flex: 1;
    min-width: 0;
}

.app-title[b-iqmpcww5g3] {
    font-size: 28px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 4px;
}

[data-theme="light"] .app-title[b-iqmpcww5g3] {
    color: #1e293b;
}

.app-developer[b-iqmpcww5g3] {
    font-size: 17px;
    color: #007AFF;
}

.app-meta[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.meta-item[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.meta-value[b-iqmpcww5g3] {
    font-size: 20px;
    font-weight: 700;
    color: #94a3b8;
}

.meta-label[b-iqmpcww5g3] {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-divider[b-iqmpcww5g3] {
    width: 1px;
    height: 30px;
    background: rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .meta-divider[b-iqmpcww5g3] {
    background: rgba(0, 0, 0, 0.1);
}

.app-action-large[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.get-btn-large[b-iqmpcww5g3],
.open-btn-large[b-iqmpcww5g3] {
    background: #007AFF;
    border: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 32px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 100px;
}

.get-btn-large:hover[b-iqmpcww5g3] {
    background: #0066d6;
}

.open-btn-large[b-iqmpcww5g3] {
    background: #34C759;
}

.open-btn-large:hover[b-iqmpcww5g3] {
    background: #2db54d;
}

.uninstall-btn[b-iqmpcww5g3] {
    background: none;
    border: none;
    color: #FF3B30;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
}

/* App Content */
.app-content[b-iqmpcww5g3] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.content-section[b-iqmpcww5g3] {
    margin-bottom: 32px;
}

.content-section h2[b-iqmpcww5g3] {
    font-size: 20px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 12px;
}

[data-theme="light"] .content-section h2[b-iqmpcww5g3] {
    color: #1e293b;
}

.section-header[b-iqmpcww5g3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h2[b-iqmpcww5g3] {
    margin: 0;
}

.version-tag[b-iqmpcww5g3] {
    font-size: 13px;
    color: #64748b;
}

.whats-new-text[b-iqmpcww5g3],
.description-text[b-iqmpcww5g3] {
    font-size: 15px;
    color: #94a3b8;
    line-height: 1.6;
    white-space: pre-line;
    margin: 0;
}

/* Rating Summary */
.rating-summary[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
}

.rating-big[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rating-number[b-iqmpcww5g3] {
    font-size: 56px;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1;
}

[data-theme="light"] .rating-number[b-iqmpcww5g3] {
    color: #1e293b;
}

.rating-max[b-iqmpcww5g3] {
    font-size: 15px;
    color: #64748b;
}

.rating-stars-big[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.rating-stars-big i[b-iqmpcww5g3] {
    font-size: 20px;
    color: #3a3a3c;
}

.rating-stars-big i.filled[b-iqmpcww5g3] {
    color: #FF9500;
}

.rating-stars-big span[b-iqmpcww5g3] {
    font-size: 13px;
    color: #64748b;
}

/* Reviews */
.reviews-list[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.review-item[b-iqmpcww5g3] {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .review-item[b-iqmpcww5g3] {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.review-header[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.review-stars i[b-iqmpcww5g3] {
    font-size: 12px;
    color: #3a3a3c;
}

.review-stars i.filled[b-iqmpcww5g3] {
    color: #FF9500;
}

.review-title[b-iqmpcww5g3] {
    font-size: 15px;
    font-weight: 600;
    color: #e2e8f0;
}

[data-theme="light"] .review-title[b-iqmpcww5g3] {
    color: #1e293b;
}

.review-body[b-iqmpcww5g3] {
    font-size: 14px;
    color: #94a3b8;
    margin: 0 0 12px;
    line-height: 1.5;
}

.review-footer[b-iqmpcww5g3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-author[b-iqmpcww5g3] {
    font-size: 13px;
    color: #64748b;
}

.review-date[b-iqmpcww5g3] {
    font-size: 13px;
    color: #64748b;
}

.write-review-btn[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 122, 255, 0.1);
    border: none;
    color: #007AFF;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.write-review-btn:hover[b-iqmpcww5g3] {
    background: rgba(0, 122, 255, 0.2);
}

/* Information Grid */
.info-grid[b-iqmpcww5g3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.info-item[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
}

.info-label[b-iqmpcww5g3] {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 4px;
}

.info-value[b-iqmpcww5g3] {
    font-size: 15px;
    color: #e2e8f0;
}

[data-theme="light"] .info-value[b-iqmpcww5g3] {
    color: #1e293b;
}

/* Tags */
.tags-list[b-iqmpcww5g3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag[b-iqmpcww5g3] {
    background: rgba(59, 130, 246, 0.15);
    color: #007AFF;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 16px;
}

/* No App Selected */
.no-app-selected[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    text-align: center;
    padding: 24px;
}

.no-app-selected .welcome-icon[b-iqmpcww5g3] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.3);
}

.no-app-selected .welcome-icon i[b-iqmpcww5g3] {
    font-size: 44px;
    color: white;
}

.no-app-selected h2[b-iqmpcww5g3] {
    font-size: 28px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 8px;
}

[data-theme="light"] .no-app-selected h2[b-iqmpcww5g3] {
    color: #1e293b;
}

.no-app-selected p[b-iqmpcww5g3] {
    font-size: 17px;
    margin: 0 0 24px;
}

.welcome-stats[b-iqmpcww5g3] {
    display: flex;
    gap: 48px;
}

.stat[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value[b-iqmpcww5g3] {
    font-size: 32px;
    font-weight: 700;
    color: #007AFF;
}

.stat-label[b-iqmpcww5g3] {
    font-size: 14px;
    color: #64748b;
}

/* Dialog Styles */
.dialog-overlay[b-iqmpcww5g3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-iqmpcww5g3 0.2s ease;
}

@keyframes fadeIn-b-iqmpcww5g3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog-content[b-iqmpcww5g3] {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    width: 90%;
    max-width: 400px;
    overflow: hidden;
    animation: slideUp-b-iqmpcww5g3 0.3s ease;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .dialog-content[b-iqmpcww5g3] {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.my-apps-dialog[b-iqmpcww5g3] {
    max-width: 500px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.review-dialog[b-iqmpcww5g3] {
    max-width: 450px;
}

@keyframes slideUp-b-iqmpcww5g3 {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.dialog-header[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .dialog-header[b-iqmpcww5g3] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dialog-header h3[b-iqmpcww5g3] {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: #e2e8f0;
}

[data-theme="light"] .dialog-header h3[b-iqmpcww5g3] {
    color: #1e293b;
}

.dialog-cancel[b-iqmpcww5g3],
.dialog-done[b-iqmpcww5g3] {
    background: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
    padding: 4px 8px;
}

.dialog-cancel[b-iqmpcww5g3] {
    color: #007AFF;
}

.dialog-done[b-iqmpcww5g3] {
    color: #007AFF;
    font-weight: 600;
}

.dialog-done:disabled[b-iqmpcww5g3] {
    color: #64748b;
    cursor: not-allowed;
}

.dialog-body[b-iqmpcww5g3] {
    padding: 16px;
    overflow-y: auto;
}

/* My Apps List */
.my-apps-list[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
}

.my-app-item[b-iqmpcww5g3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .my-app-item[b-iqmpcww5g3] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.my-app-item:last-child[b-iqmpcww5g3] {
    border-bottom: none;
}

.my-app-icon[b-iqmpcww5g3] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.my-app-info[b-iqmpcww5g3] {
    flex: 1;
    min-width: 0;
}

.my-app-name[b-iqmpcww5g3] {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #e2e8f0;
}

[data-theme="light"] .my-app-name[b-iqmpcww5g3] {
    color: #1e293b;
}

.my-app-version[b-iqmpcww5g3] {
    display: block;
    font-size: 13px;
    color: #64748b;
}

.my-app-actions .update-btn[b-iqmpcww5g3] {
    background: #007AFF;
    border: none;
    color: white;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 14px;
    cursor: pointer;
}

.my-app-actions .open-btn[b-iqmpcww5g3] {
    background: rgba(52, 199, 89, 0.15);
    color: #34C759;
}

.no-installed-apps[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    color: #94a3b8;
    text-align: center;
}

.no-installed-apps i[b-iqmpcww5g3] {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.no-installed-apps p[b-iqmpcww5g3] {
    font-size: 15px;
    margin: 0 0 4px;
    color: #e2e8f0;
}

[data-theme="light"] .no-installed-apps p[b-iqmpcww5g3] {
    color: #1e293b;
}

.no-installed-apps span[b-iqmpcww5g3] {
    font-size: 13px;
}

/* Review Dialog */
.review-rating-picker[b-iqmpcww5g3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.rating-label[b-iqmpcww5g3] {
    font-size: 15px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.rating-stars-picker[b-iqmpcww5g3] {
    display: flex;
    gap: 8px;
}

.star-btn[b-iqmpcww5g3] {
    background: none;
    border: none;
    font-size: 32px;
    color: #3a3a3c;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.15s ease;
}

.star-btn:hover[b-iqmpcww5g3] {
    transform: scale(1.1);
}

.star-btn.selected[b-iqmpcww5g3] {
    color: #FF9500;
}

.review-title-input[b-iqmpcww5g3],
.review-body-input[b-iqmpcww5g3] {
    width: 100%;
    border: none;
    font-size: 17px;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    outline: none;
    margin-bottom: 12px;
}

[data-theme="light"] .review-title-input[b-iqmpcww5g3],
[data-theme="light"] .review-body-input[b-iqmpcww5g3] {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.05);
}

.review-title-input[b-iqmpcww5g3]::placeholder,
.review-body-input[b-iqmpcww5g3]::placeholder {
    color: #64748b;
}

.review-body-input[b-iqmpcww5g3] {
    font-size: 15px;
    resize: none;
    min-height: 100px;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .appstore-container[b-iqmpcww5g3] {
        flex-direction: column;
    }

    .appstore-sidebar[b-iqmpcww5g3] {
        width: 100%;
        min-width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        transition: transform 0.3s ease;
    }

    .appstore-sidebar.app-selected[b-iqmpcww5g3] {
        transform: translateX(-100%);
    }

    .appstore-detail[b-iqmpcww5g3] {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .appstore-detail.has-app[b-iqmpcww5g3] {
        transform: translateX(0);
    }

    .back-btn[b-iqmpcww5g3] {
        display: flex;
    }

    .app-header-section[b-iqmpcww5g3] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .app-meta[b-iqmpcww5g3] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .app-action-large[b-iqmpcww5g3] {
        flex-direction: row;
        gap: 12px;
    }

    .info-grid[b-iqmpcww5g3] {
        grid-template-columns: 1fr;
    }
}

/* Custom Scrollbar */
.appstore-sidebar[b-iqmpcww5g3]::-webkit-scrollbar,
.apps-list[b-iqmpcww5g3]::-webkit-scrollbar,
.app-content[b-iqmpcww5g3]::-webkit-scrollbar {
    width: 6px;
}

.appstore-sidebar[b-iqmpcww5g3]::-webkit-scrollbar-track,
.apps-list[b-iqmpcww5g3]::-webkit-scrollbar-track,
.app-content[b-iqmpcww5g3]::-webkit-scrollbar-track {
    background: transparent;
}

.appstore-sidebar[b-iqmpcww5g3]::-webkit-scrollbar-thumb,
.apps-list[b-iqmpcww5g3]::-webkit-scrollbar-thumb,
.app-content[b-iqmpcww5g3]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.appstore-sidebar[b-iqmpcww5g3]::-webkit-scrollbar-thumb:hover,
.apps-list[b-iqmpcww5g3]::-webkit-scrollbar-thumb:hover,
.app-content[b-iqmpcww5g3]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .appstore-sidebar[b-iqmpcww5g3]::-webkit-scrollbar-thumb,
[data-theme="light"] .apps-list[b-iqmpcww5g3]::-webkit-scrollbar-thumb,
[data-theme="light"] .app-content[b-iqmpcww5g3]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}
/* /Components/Pages/Contacts.razor.rz.scp.css */
/* Contacts Page - iCloud Contacts Style */
.contacts-container[b-fwuykiufep] {
    display: flex;
    height: 100%;
    min-height: 0;
    background: var(--bg-color);
    overflow: hidden;
}

/* Sidebar / Contact List */
.contacts-sidebar[b-fwuykiufep] {
    width: 280px;
    min-width: 280px;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    flex-direction: column;
    position: relative;
}

[data-theme="light"] .contacts-sidebar[b-fwuykiufep] {
    background: rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Sidebar Header */
.sidebar-header[b-fwuykiufep] {
    padding: 1rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .sidebar-header[b-fwuykiufep] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-title[b-fwuykiufep] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #007aff;
    font-size: 1.1rem;
    cursor: pointer;
}

.sidebar-title.white[b-fwuykiufep] {
    color: #ffffff;
}

.sidebar-title.white i[b-fwuykiufep] {
    color: #007aff;
}

[data-theme="light"] .sidebar-title.white[b-fwuykiufep] {
    color: #1e293b;
}

.sidebar-title i:first-child[b-fwuykiufep] {
    font-size: 0.9rem;
}

.sidebar-title strong[b-fwuykiufep] {
    font-weight: 600;
}

.sidebar-title i:last-child[b-fwuykiufep] {
    font-size: 0.7rem;
    margin-left: 0.25rem;
}

/* Category Dropdown Menu */
.sidebar-header[b-fwuykiufep] {
    position: relative;
}

.category-dropdown[b-fwuykiufep] {
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(59, 130, 246, 0.25);
    overflow: hidden;
    z-index: 100;
    margin-top: 0.5rem;
}

[data-theme="light"] .category-dropdown[b-fwuykiufep] {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.category-item[b-fwuykiufep] {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    border: none;
    background: transparent;
    color: #e2e8f0;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.category-item:last-child[b-fwuykiufep] {
    border-bottom: none;
}

.category-item:hover[b-fwuykiufep] {
    background: rgba(59, 130, 246, 0.15);
}

.category-item.selected[b-fwuykiufep] {
    background: #007aff;
    color: white;
}

.category-item.selected:hover[b-fwuykiufep] {
    background: #0066d6;
}

[data-theme="light"] .category-item[b-fwuykiufep] {
    color: #1e293b;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .category-item:hover[b-fwuykiufep] {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .category-item.selected[b-fwuykiufep] {
    background: #007aff;
    color: white;
}

.sidebar-subtitle[b-fwuykiufep] {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    padding-left: 0.25rem;
}

[data-theme="light"] .sidebar-subtitle[b-fwuykiufep] {
    color: #64748b;
}

/* Search Box */
.search-box[b-fwuykiufep] {
    padding: 0.75rem 1rem;
    position: relative;
}

.search-box i[b-fwuykiufep] {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.85rem;
}

.search-box input[b-fwuykiufep] {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 0.9rem;
    outline: none;
}

.search-box input[b-fwuykiufep]::placeholder {
    color: #64748b;
}

[data-theme="light"] .search-box input[b-fwuykiufep] {
    background: rgba(0, 0, 0, 0.05);
    color: #1e293b;
}

/* Contact List */
.contact-list[b-fwuykiufep] {
    flex: 1;
    overflow-y: auto;
    padding-right: 30px; /* Space for alphabet index */
}

.contact-list[b-fwuykiufep]::-webkit-scrollbar {
    width: 6px;
}

.contact-list[b-fwuykiufep]::-webkit-scrollbar-track {
    background: transparent;
}

.contact-list[b-fwuykiufep]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

[data-theme="light"] .contact-list[b-fwuykiufep]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

.contact-group[b-fwuykiufep] {
    margin-bottom: 0.5rem;
}

.group-header[b-fwuykiufep] {
    padding: 0.35rem 1rem;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    position: sticky;
    top: 0;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1;
}

[data-theme="light"] .group-header[b-fwuykiufep] {
    background: rgba(241, 245, 249, 0.95);
    color: #475569;
}

.contact-item[b-fwuykiufep] {
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(59, 130, 246, 0.08);
}

.contact-item:hover[b-fwuykiufep] {
    background: rgba(59, 130, 246, 0.1);
}

.contact-item.selected[b-fwuykiufep] {
    background: #007aff;
}

[data-theme="light"] .contact-item[b-fwuykiufep] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .contact-item:hover[b-fwuykiufep] {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .contact-item.selected[b-fwuykiufep] {
    background: #007aff;
}

.contact-firstname[b-fwuykiufep] {
    color: #e2e8f0;
    font-size: 0.95rem;
}

.contact-lastname[b-fwuykiufep] {
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 600;
}

.contact-item.selected .contact-firstname[b-fwuykiufep],
.contact-item.selected .contact-lastname[b-fwuykiufep] {
    color: white;
}

[data-theme="light"] .contact-firstname[b-fwuykiufep],
[data-theme="light"] .contact-lastname[b-fwuykiufep] {
    color: #1e293b;
}

[data-theme="light"] .contact-item.selected .contact-firstname[b-fwuykiufep],
[data-theme="light"] .contact-item.selected .contact-lastname[b-fwuykiufep] {
    color: white;
}

/* Alphabet Index */
.alphabet-index[b-fwuykiufep] {
    position: absolute;
    right: 4px;
    top: 130px;
    bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.25rem 0;
    z-index: 10;
}

.index-letter[b-fwuykiufep] {
    color: #007aff;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 4px;
    text-align: center;
    transition: transform 0.1s ease;
}

.index-letter:hover[b-fwuykiufep] {
    transform: scale(1.3);
}

.index-letter.inactive[b-fwuykiufep] {
    color: #64748b;
    cursor: default;
}

.index-letter.inactive:hover[b-fwuykiufep] {
    transform: none;
}

/* Sidebar Footer */
.sidebar-footer[b-fwuykiufep] {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-theme="light"] .sidebar-footer[b-fwuykiufep] {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-btn[b-fwuykiufep] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.footer-btn:hover[b-fwuykiufep] {
    background: rgba(59, 130, 246, 0.1);
    color: #007aff;
}

.add-menu[b-fwuykiufep] {
    position: relative;
    z-index: 20;
}

.add-btn[b-fwuykiufep] {
    background: #007aff;
    color: white;
    border-radius: 6px;
}

.add-btn:hover[b-fwuykiufep] {
    background: #0066d6;
    color: white;
}

.add-menu-dropdown[b-fwuykiufep] {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.2);
    overflow: hidden;
    margin-bottom: 0.5rem;
    min-width: 130px;
    z-index: 100;
}

[data-theme="light"] .add-menu-dropdown[b-fwuykiufep] {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.add-menu-item[b-fwuykiufep] {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    border: none;
    background: transparent;
    color: #e2e8f0;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.add-menu-item:hover[b-fwuykiufep] {
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .add-menu-item[b-fwuykiufep] {
    color: #1e293b;
}

[data-theme="light"] .add-menu-item:hover[b-fwuykiufep] {
    background: rgba(0, 0, 0, 0.05);
}

/* Contact Detail Panel */
.contact-detail[b-fwuykiufep] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.5);
    overflow-y: auto;
}

[data-theme="light"] .contact-detail[b-fwuykiufep] {
    background: rgba(241, 245, 249, 0.8);
}

/* Detail Header */
.detail-header[b-fwuykiufep] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    background: rgba(30, 41, 59, 0.5);
}

[data-theme="light"] .detail-header[b-fwuykiufep] {
    background: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.back-btn[b-fwuykiufep] {
    display: none;
    border: none;
    background: transparent;
    color: #007aff;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
    margin-right: auto;
}

.edit-btn[b-fwuykiufep] {
    border: none;
    background: transparent;
    color: #007aff;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
}

.edit-btn:hover[b-fwuykiufep] {
    text-decoration: underline;
}

/* Contact Info Section */
.contact-info[b-fwuykiufep] {
    flex: 1;
    padding: 2rem;
    max-width: 600px;
}

.contact-avatar-section[b-fwuykiufep] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    text-align: center;
}

.contact-avatar[b-fwuykiufep] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(180deg, #c4c4c4 0%, #9ca3af 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    overflow: hidden;
}

.contact-avatar img[b-fwuykiufep] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-avatar i[b-fwuykiufep] {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.contact-full-name[b-fwuykiufep] {
    font-size: 2rem;
    font-weight: 400;
    color: #e2e8f0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

[data-theme="light"] .contact-full-name[b-fwuykiufep] {
    color: #1e293b;
}

/* Info Sections */
.info-section[b-fwuykiufep] {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .info-section[b-fwuykiufep] {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.info-row[b-fwuykiufep] {
    display: flex;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.08);
}

.info-row:last-child[b-fwuykiufep] {
    border-bottom: none;
}

[data-theme="light"] .info-row[b-fwuykiufep] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.info-label[b-fwuykiufep] {
    width: 80px;
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 0.9rem;
    text-align: right;
    padding-right: 1rem;
}

[data-theme="light"] .info-label[b-fwuykiufep] {
    color: #64748b;
}

.info-value[b-fwuykiufep] {
    color: #007aff;
    font-size: 0.9rem;
    text-decoration: none;
}

.info-value:hover[b-fwuykiufep] {
    text-decoration: underline;
}

/* Button styled as link */
.link-button[b-fwuykiufep] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

/* Address specific */
.address-row[b-fwuykiufep] {
    align-items: flex-start;
}

.address-value[b-fwuykiufep] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: #007aff;
}

.address-value span[b-fwuykiufep] {
    color: inherit;
}

/* Notes */
.notes-row[b-fwuykiufep] {
    align-items: flex-start;
}

.notes-value[b-fwuykiufep] {
    color: #e2e8f0;
    margin: 0;
    line-height: 1.5;
}

[data-theme="light"] .notes-value[b-fwuykiufep] {
    color: #1e293b;
}

/* No Contact Selected State */
.no-contact-selected[b-fwuykiufep] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    gap: 1rem;
}

.no-contact-selected i[b-fwuykiufep] {
    font-size: 4rem;
    opacity: 0.5;
}

.no-contact-selected p[b-fwuykiufep] {
    font-size: 1.1rem;
}

/* Mobile Responsive Styles */
@media (max-width: 1199px) {
    .contacts-container[b-fwuykiufep] {
        position: relative;
        overflow: hidden;
    }

    .contacts-sidebar[b-fwuykiufep] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-right: none;
        transform: translateX(0);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 2;
    }

    .contacts-container.showing-detail .contacts-sidebar[b-fwuykiufep] {
        transform: translateX(-30%);
        pointer-events: none;
    }

    .contact-detail[b-fwuykiufep] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 3;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
        /* Opaque background on mobile to fully cover the sidebar */
        background: #0f172a;
    }

    [data-theme="light"] .contact-detail[b-fwuykiufep] {
        background: #f1f5f9;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    }

    .contacts-container.showing-detail .contact-detail[b-fwuykiufep] {
        transform: translateX(0);
    }

    /* Interactive drag state - disable transitions during drag */
    .contacts-container.dragging .contacts-sidebar[b-fwuykiufep],
    .contacts-container.dragging .contact-detail[b-fwuykiufep] {
        transition: none;
    }

    .alphabet-index[b-fwuykiufep] {
        right: 2px;
        top: 120px;
        bottom: 60px;
    }

    .index-letter[b-fwuykiufep] {
        font-size: 0.55rem;
        padding: 0 2px;
    }

    .contact-list[b-fwuykiufep] {
        padding-right: 20px;
    }

    .back-btn[b-fwuykiufep] {
        display: flex;
    }

    .contact-info[b-fwuykiufep] {
        padding: 1.5rem;
        max-width: 100%;
    }

    .contact-avatar[b-fwuykiufep] {
        width: 100px;
        height: 100px;
    }

    .contact-avatar i[b-fwuykiufep] {
        font-size: 3rem;
    }

    .contact-full-name[b-fwuykiufep] {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .sidebar-header[b-fwuykiufep] {
        padding: 0.75rem 1rem;
    }

    .sidebar-title[b-fwuykiufep] {
        font-size: 1rem;
    }

    .search-box[b-fwuykiufep] {
        padding: 0.5rem 0.75rem;
    }

    .contact-item[b-fwuykiufep] {
        padding: 0.5rem 0.75rem;
    }

    .contact-firstname[b-fwuykiufep],
    .contact-lastname[b-fwuykiufep] {
        font-size: 0.9rem;
    }

    .contact-info[b-fwuykiufep] {
        padding: 1rem;
    }

    .info-label[b-fwuykiufep] {
        width: 70px;
        font-size: 0.85rem;
    }

    .info-value[b-fwuykiufep] {
        font-size: 0.85rem;
    }

    .contact-full-name[b-fwuykiufep] {
        font-size: 1.5rem;
    }
}

/* Desktop - Two Column Layout */
@media (min-width: 1200px) {
    .contacts-container[b-fwuykiufep] {
        display: flex;
    }

    .contacts-sidebar[b-fwuykiufep] {
        width: 320px;
        min-width: 320px;
    }

    .contact-detail[b-fwuykiufep] {
        flex: 1;
    }
}

/* Call History Section */
.call-history-section[b-fwuykiufep] {
    margin-top: 1.5rem;
}

.call-history-section .section-header[b-fwuykiufep] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .call-history-section .section-header[b-fwuykiufep] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.call-history-section .section-header h3[b-fwuykiufep] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

[data-theme="light"] .call-history-section .section-header h3[b-fwuykiufep] {
    color: #64748b;
}

.call-history-section .loading-indicator[b-fwuykiufep] {
    color: #007aff;
}

.call-history-item[b-fwuykiufep] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.08);
    cursor: pointer;
    transition: background 0.15s ease;
}

.call-history-item:hover[b-fwuykiufep] {
    background: rgba(59, 130, 246, 0.05);
}

.call-history-item:last-child[b-fwuykiufep] {
    border-bottom: none;
}

[data-theme="light"] .call-history-item[b-fwuykiufep] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.call-history-header[b-fwuykiufep] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.call-info[b-fwuykiufep] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.call-direction[b-fwuykiufep] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #e2e8f0;
}

.call-direction i[b-fwuykiufep] {
    color: #007aff;
}

[data-theme="light"] .call-direction[b-fwuykiufep] {
    color: #1e293b;
}

.call-date[b-fwuykiufep] {
    font-size: 0.8rem;
    color: #94a3b8;
}

[data-theme="light"] .call-date[b-fwuykiufep] {
    color: #64748b;
}

.call-duration[b-fwuykiufep] {
    font-size: 0.75rem;
    color: #64748b;
    background: rgba(59, 130, 246, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    margin-top: 0.25rem;
}

[data-theme="light"] .call-duration[b-fwuykiufep] {
    background: rgba(0, 0, 0, 0.05);
}

.expand-icon[b-fwuykiufep] {
    color: #64748b;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.call-history-item.expanded .expand-icon[b-fwuykiufep] {
    transform: rotate(180deg);
}

.call-summary[b-fwuykiufep] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #e2e8f0;
    line-height: 1.5;
}

.call-summary strong[b-fwuykiufep] {
    color: #007aff;
}

[data-theme="light"] .call-summary[b-fwuykiufep] {
    background: rgba(0, 0, 0, 0.03);
    color: #1e293b;
}

.call-transcription[b-fwuykiufep] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.call-transcription h4[b-fwuykiufep] {
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
}

[data-theme="light"] .call-transcription[b-fwuykiufep] {
    background: rgba(241, 245, 249, 0.8);
}

[data-theme="light"] .call-transcription h4[b-fwuykiufep] {
    color: #64748b;
}

.transcription-entry[b-fwuykiufep] {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.05);
    font-size: 0.85rem;
    align-items: flex-start;
}

.transcription-entry:last-child[b-fwuykiufep] {
    border-bottom: none;
}

/* Sentiment Indicator - Color-coded bar on the left side */
.transcription-entry .sentiment-indicator[b-fwuykiufep] {
    width: 4px;
    min-height: 1.2rem;
    height: 100%;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
    transition: background-color 0.3s ease;
}

.transcription-speaker[b-fwuykiufep] {
    color: #007aff;
    font-weight: 500;
    flex-shrink: 0;
}

.transcription-text[b-fwuykiufep] {
    color: #e2e8f0;
}

[data-theme="light"] .transcription-text[b-fwuykiufep] {
    color: #1e293b;
}

/* Overall Sentiment Badge */
.overall-sentiment-badge[b-fwuykiufep] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}

.overall-sentiment-badge i[b-fwuykiufep] {
    font-size: 0.75rem;
}

/* Call Info Row - to align direction and sentiment badge */
.call-info-row[b-fwuykiufep] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* No call history message */
.no-call-history[b-fwuykiufep] {
    padding: 1rem;
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    text-decoration: none;
}

[data-theme="light"] .no-call-history[b-fwuykiufep] {
    color: #94a3b8;
}

/* Subscription Section */
.subscription-section .section-header[b-fwuykiufep] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .subscription-section .section-header[b-fwuykiufep] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.subscription-section .section-header h3[b-fwuykiufep] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

[data-theme="light"] .subscription-section .section-header h3[b-fwuykiufep] {
    color: #64748b;
}

.subscription-value[b-fwuykiufep] {
    color: #e2e8f0;
    text-decoration: none;
}

[data-theme="light"] .subscription-value[b-fwuykiufep] {
    color: #1e293b;
}

.subscription-value.status-active[b-fwuykiufep] {
    color: #22c55e;
}

.no-subscription[b-fwuykiufep] {
    padding: 1rem;
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    text-decoration: none;
}

[data-theme="light"] .no-subscription[b-fwuykiufep] {
    color: #94a3b8;
}

/* Features list */
.features-row[b-fwuykiufep] {
    align-items: flex-start;
}

.features-list[b-fwuykiufep] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feature-tag[b-fwuykiufep] {
    background: rgba(59, 130, 246, 0.15);
    color: #007aff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    text-decoration: none;
}

[data-theme="light"] .feature-tag[b-fwuykiufep] {
    background: rgba(0, 122, 255, 0.1);
}

/* View all calls link */
.view-all-calls[b-fwuykiufep] {
    padding: 0.75rem 1rem;
    text-align: center;
    color: #007aff;
    font-size: 0.85rem;
    cursor: pointer;
}

.view-all-calls:hover[b-fwuykiufep] {
    text-decoration: underline;
}
/* /Components/Pages/CustomApp.razor.rz.scp.css */
/* Custom App Container */
.custom-app-container[b-vielerqsb5] {
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--bg-color);
    overflow: hidden;
}

/* App Not Found */
.app-not-found[b-vielerqsb5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #94a3b8;
}

.app-not-found i[b-vielerqsb5] {
    font-size: 64px;
    margin-bottom: 24px;
    color: #FF3B30;
}

.app-not-found h2[b-vielerqsb5] {
    font-size: 24px;
    color: #e2e8f0;
    margin: 0 0 8px;
}

[data-theme="light"] .app-not-found h2[b-vielerqsb5] {
    color: #1e293b;
}

.app-not-found p[b-vielerqsb5] {
    font-size: 16px;
    margin: 0 0 24px;
}

.app-not-found .back-btn[b-vielerqsb5] {
    background: #007AFF;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
}

/* Sidebar */
.app-sidebar[b-vielerqsb5] {
    width: 380px;
    min-width: 380px;
    height: 100%;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(59, 130, 246, 0.2);
    overflow: hidden;
}

[data-theme="light"] .app-sidebar[b-vielerqsb5] {
    background: rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-header[b-vielerqsb5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: 44px;
}

.sidebar-title[b-vielerqsb5] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

[data-theme="light"] .sidebar-title[b-vielerqsb5] {
    color: #1e293b;
}

.header-action[b-vielerqsb5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Search Box */
.search-box[b-vielerqsb5] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    margin: 0 16px 16px;
    gap: 8px;
}

[data-theme="light"] .search-box[b-vielerqsb5] {
    background: rgba(0, 0, 0, 0.05);
}

.search-box i[b-vielerqsb5] {
    color: #64748b;
    font-size: 14px;
}

.search-box input[b-vielerqsb5] {
    flex: 1;
    border: none;
    background: none;
    font-size: 17px;
    color: #e2e8f0;
    outline: none;
}

[data-theme="light"] .search-box input[b-vielerqsb5] {
    color: #1e293b;
}

.search-box input[b-vielerqsb5]::placeholder {
    color: #64748b;
}

/* Summary Cards */
.summary-cards[b-vielerqsb5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 0 16px 16px;
}

.summary-card[b-vielerqsb5] {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid rgba(59, 130, 246, 0.2);
    text-align: center;
}

[data-theme="light"] .summary-card[b-vielerqsb5] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.summary-card:hover[b-vielerqsb5] {
    transform: scale(1.02);
}

.summary-card.selected[b-vielerqsb5] {
    box-shadow: 0 0 0 2px #007AFF;
}

.summary-icon[b-vielerqsb5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    margin: 0 auto 8px;
}

.summary-count[b-vielerqsb5] {
    font-size: 24px;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1;
}

[data-theme="light"] .summary-count[b-vielerqsb5] {
    color: #1e293b;
}

.summary-label[b-vielerqsb5] {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

/* Item List */
.item-list[b-vielerqsb5] {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

.loading-state[b-vielerqsb5],
.empty-state[b-vielerqsb5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #94a3b8;
    text-align: center;
}

.loading-state i[b-vielerqsb5],
.empty-state i[b-vielerqsb5] {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.list-item[b-vielerqsb5] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    gap: 12px;
    border-radius: 10px;
    margin-bottom: 4px;
    transition: background 0.15s ease;
}

.list-item:hover[b-vielerqsb5] {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .list-item:hover[b-vielerqsb5] {
    background: rgba(0, 0, 0, 0.04);
}

.list-item.selected[b-vielerqsb5] {
    background: rgba(0, 122, 255, 0.2);
}

.list-icon[b-vielerqsb5] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}

.list-info[b-vielerqsb5] {
    flex: 1;
    min-width: 0;
}

.list-primary[b-vielerqsb5] {
    display: block;
    font-size: 16px;
    color: #e2e8f0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="light"] .list-primary[b-vielerqsb5] {
    color: #1e293b;
}

.list-secondary[b-vielerqsb5] {
    display: block;
    font-size: 13px;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-count[b-vielerqsb5] {
    font-size: 15px;
    color: #94a3b8;
    margin-right: 4px;
}

.list-chevron[b-vielerqsb5] {
    color: #64748b;
    font-size: 12px;
}

/* Sidebar Footer */
.sidebar-footer[b-vielerqsb5] {
    padding: 16px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    display: flex;
    gap: 12px;
}

[data-theme="light"] .sidebar-footer[b-vielerqsb5] {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-action[b-vielerqsb5] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #007AFF;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 0;
}

/* Detail Panel */
.app-detail[b-vielerqsb5] {
    flex: 1;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-theme="light"] .app-detail[b-vielerqsb5] {
    background: rgba(241, 245, 249, 0.8);
}

.detail-header[b-vielerqsb5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: 44px;
}

.back-btn[b-vielerqsb5] {
    display: none;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #007AFF;
    font-size: 17px;
    cursor: pointer;
    padding: 8px 0;
}

.back-btn i[b-vielerqsb5] {
    font-size: 14px;
}

.detail-actions[b-vielerqsb5] {
    display: flex;
    gap: 8px;
}

.detail-action[b-vielerqsb5] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .detail-action[b-vielerqsb5] {
    background: rgba(0, 0, 0, 0.05);
}

/* Detail Title */
.detail-title-section[b-vielerqsb5] {
    padding: 0 24px 16px;
}

.detail-title[b-vielerqsb5] {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}

/* Detail Content */
.detail-content[b-vielerqsb5] {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px;
}

.detail-section[b-vielerqsb5] {
    margin-bottom: 24px;
    background: rgba(30, 41, 59, 0.85);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .detail-section[b-vielerqsb5] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.section-header[b-vielerqsb5] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .section-header[b-vielerqsb5] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.section-header i:first-child[b-vielerqsb5] {
    color: #007AFF;
    font-size: 16px;
}

.section-header h3[b-vielerqsb5] {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

[data-theme="light"] .section-header h3[b-vielerqsb5] {
    color: #1e293b;
}

.collapse-icon[b-vielerqsb5] {
    color: #64748b;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.detail-section.collapsed .collapse-icon[b-vielerqsb5] {
    transform: rotate(-90deg);
}

.section-body[b-vielerqsb5] {
    padding: 8px 0;
}

.field-row[b-vielerqsb5] {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .field-row[b-vielerqsb5] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.field-row:last-child[b-vielerqsb5] {
    border-bottom: none;
}

.field-label[b-vielerqsb5] {
    width: 100px;
    font-size: 14px;
    color: #94a3b8;
    flex-shrink: 0;
}

.field-value[b-vielerqsb5] {
    flex: 1;
    font-size: 14px;
    color: #e2e8f0;
    word-break: break-word;
}

[data-theme="light"] .field-value[b-vielerqsb5] {
    color: #1e293b;
}

.field-value.email-value[b-vielerqsb5],
.field-value.phone-value[b-vielerqsb5],
.field-value.url-value[b-vielerqsb5] {
    color: #007AFF;
    text-decoration: none;
}

.field-value.email-value:hover[b-vielerqsb5],
.field-value.phone-value:hover[b-vielerqsb5],
.field-value.url-value:hover[b-vielerqsb5] {
    text-decoration: underline;
}

.field-value.boolean-value[b-vielerqsb5] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.field-value.boolean-value i.fa-check-circle[b-vielerqsb5] {
    color: #34C759;
}

.field-value.boolean-value i.fa-times-circle[b-vielerqsb5] {
    color: #FF3B30;
}

.field-value.badge-value[b-vielerqsb5] {
    display: inline-block;
    background: rgba(0, 122, 255, 0.2);
    color: #007AFF;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.field-value.rich-text-value[b-vielerqsb5] {
    line-height: 1.6;
}

/* Detail Footer */
.detail-footer[b-vielerqsb5] {
    padding: 16px 24px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    display: flex;
    gap: 12px;
}

[data-theme="light"] .detail-footer[b-vielerqsb5] {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-action-btn[b-vielerqsb5] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.footer-action-btn:hover[b-vielerqsb5] {
    transform: scale(1.02);
}

/* No Item Selected */
.no-item-selected[b-vielerqsb5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    text-align: center;
    padding: 24px;
}

.no-item-selected .welcome-icon[b-vielerqsb5] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.no-item-selected .welcome-icon i[b-vielerqsb5] {
    font-size: 32px;
    color: white;
}

.no-item-selected h2[b-vielerqsb5] {
    font-size: 28px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 8px;
}

[data-theme="light"] .no-item-selected h2[b-vielerqsb5] {
    color: #1e293b;
}

.no-item-selected p[b-vielerqsb5] {
    font-size: 17px;
    margin: 0;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .custom-app-container[b-vielerqsb5] {
        flex-direction: column;
    }

    .app-sidebar[b-vielerqsb5] {
        width: 100%;
        min-width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        transition: transform 0.3s ease;
    }

    .app-sidebar.item-selected[b-vielerqsb5] {
        transform: translateX(-100%);
    }

    .app-detail[b-vielerqsb5] {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .app-detail.has-item[b-vielerqsb5] {
        transform: translateX(0);
    }

    .back-btn[b-vielerqsb5] {
        display: flex;
    }
}

/* Custom Scrollbar */
.item-list[b-vielerqsb5]::-webkit-scrollbar,
.detail-content[b-vielerqsb5]::-webkit-scrollbar {
    width: 6px;
}

.item-list[b-vielerqsb5]::-webkit-scrollbar-track,
.detail-content[b-vielerqsb5]::-webkit-scrollbar-track {
    background: transparent;
}

.item-list[b-vielerqsb5]::-webkit-scrollbar-thumb,
.detail-content[b-vielerqsb5]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.item-list[b-vielerqsb5]::-webkit-scrollbar-thumb:hover,
.detail-content[b-vielerqsb5]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .item-list[b-vielerqsb5]::-webkit-scrollbar-thumb,
[data-theme="light"] .detail-content[b-vielerqsb5]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}
/* /Components/Pages/Drive.razor.rz.scp.css */
/* Drive Page - iCloud Drive Style */
.drive-container[b-gyv5oxuk7c] {
    display: flex;
    height: 100%;
    min-height: 0;
    background: var(--bg-color);
    overflow: hidden;
}

/* Sidebar / Browse Panel */
.drive-sidebar[b-gyv5oxuk7c] {
    width: 280px;
    min-width: 280px;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    flex-direction: column;
    position: relative;
}

[data-theme="light"] .drive-sidebar[b-gyv5oxuk7c] {
    background: rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Sidebar Header */
.sidebar-header[b-gyv5oxuk7c] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .sidebar-header[b-gyv5oxuk7c] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-title[b-gyv5oxuk7c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.5rem;
    font-weight: 600;
    color: #e2e8f0;
}

[data-theme="light"] .sidebar-title[b-gyv5oxuk7c] {
    color: #1e293b;
}

.header-action-btn[b-gyv5oxuk7c] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.2);
    color: #007aff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.15s ease;
}

.header-action-btn:hover[b-gyv5oxuk7c] {
    background: rgba(59, 130, 246, 0.3);
}

/* Sections */
.locations-section[b-gyv5oxuk7c],
.favorites-section[b-gyv5oxuk7c],
.tags-section[b-gyv5oxuk7c] {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .locations-section[b-gyv5oxuk7c],
[data-theme="light"] .favorites-section[b-gyv5oxuk7c],
[data-theme="light"] .tags-section[b-gyv5oxuk7c] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.section-header[b-gyv5oxuk7c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.25rem;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.section-header:hover[b-gyv5oxuk7c] {
    color: #cbd5e1;
}

[data-theme="light"] .section-header[b-gyv5oxuk7c] {
    color: #64748b;
}

[data-theme="light"] .section-header:hover[b-gyv5oxuk7c] {
    color: #475569;
}

.section-header i[b-gyv5oxuk7c] {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

/* Location Items */
.location-list[b-gyv5oxuk7c],
.favorites-list[b-gyv5oxuk7c],
.tags-list[b-gyv5oxuk7c] {
    padding: 0.25rem 0;
}

.location-item[b-gyv5oxuk7c],
.favorite-item[b-gyv5oxuk7c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #e2e8f0;
    font-size: 0.95rem;
}

.location-item:hover[b-gyv5oxuk7c],
.favorite-item:hover[b-gyv5oxuk7c] {
    background: rgba(59, 130, 246, 0.1);
}

.location-item.selected[b-gyv5oxuk7c] {
    background: rgba(59, 130, 246, 0.2);
}

.location-item.disabled[b-gyv5oxuk7c] {
    opacity: 0.5;
    cursor: not-allowed;
}

.location-item.disabled:hover[b-gyv5oxuk7c] {
    background: transparent;
}

[data-theme="light"] .location-item[b-gyv5oxuk7c],
[data-theme="light"] .favorite-item[b-gyv5oxuk7c] {
    color: #1e293b;
}

.location-icon[b-gyv5oxuk7c],
.favorite-icon[b-gyv5oxuk7c] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.location-icon.skyline-drive[b-gyv5oxuk7c] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.location-icon.local[b-gyv5oxuk7c] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

.location-icon.recently-deleted[b-gyv5oxuk7c] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: white;
}

.favorite-icon.downloads[b-gyv5oxuk7c] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.favorite-icon.desktop[b-gyv5oxuk7c] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

/* Tags */
.tag-item[b-gyv5oxuk7c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #e2e8f0;
    font-size: 0.95rem;
}

.tag-item:hover[b-gyv5oxuk7c] {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .tag-item[b-gyv5oxuk7c] {
    color: #1e293b;
}

.tag-dot[b-gyv5oxuk7c] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.tag-dot.red[b-gyv5oxuk7c] { background: #ef4444; }
.tag-dot.orange[b-gyv5oxuk7c] { background: #f97316; }
.tag-dot.yellow[b-gyv5oxuk7c] { background: #eab308; }
.tag-dot.green[b-gyv5oxuk7c] { background: #22c55e; }
.tag-dot.blue[b-gyv5oxuk7c] { background: #3b82f6; }
.tag-dot.purple[b-gyv5oxuk7c] { background: #a855f7; }

/* Sidebar Tab Bar (Mobile) */
.sidebar-tab-bar[b-gyv5oxuk7c] {
    display: none;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.95);
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    justify-content: space-around;
}

[data-theme="light"] .sidebar-tab-bar[b-gyv5oxuk7c] {
    background: rgba(241, 245, 249, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tab-item[b-gyv5oxuk7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.7rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.tab-item i[b-gyv5oxuk7c] {
    font-size: 1.25rem;
}

.tab-item.active[b-gyv5oxuk7c] {
    color: #007aff;
}

/* Main Content Area */
.drive-content[b-gyv5oxuk7c] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.5);
    overflow-y: auto;
}

[data-theme="light"] .drive-content[b-gyv5oxuk7c] {
    background: rgba(241, 245, 249, 0.8);
}

/* Content Header */
.content-header[b-gyv5oxuk7c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    background: rgba(30, 41, 59, 0.5);
    position: sticky;
    top: 0;
    z-index: 10;
}

[data-theme="light"] .content-header[b-gyv5oxuk7c] {
    background: rgba(255, 255, 255, 0.7);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.content-header-left[b-gyv5oxuk7c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.back-btn[b-gyv5oxuk7c] {
    display: none;
    border: none;
    background: transparent;
    color: #007aff;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
}

.content-title[b-gyv5oxuk7c] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

[data-theme="light"] .content-title[b-gyv5oxuk7c] {
    color: #1e293b;
}

.content-header-right[b-gyv5oxuk7c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-btn[b-gyv5oxuk7c] {
    border: none;
    background: transparent;
    color: #007aff;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
}

.header-btn:hover[b-gyv5oxuk7c] {
    text-decoration: underline;
}

/* Search Container */
.search-container[b-gyv5oxuk7c] {
    padding: 0.75rem 1.5rem;
    background: rgba(30, 41, 59, 0.3);
}

[data-theme="light"] .search-container[b-gyv5oxuk7c] {
    background: rgba(255, 255, 255, 0.5);
}

.search-box[b-gyv5oxuk7c] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i[b-gyv5oxuk7c] {
    position: absolute;
    left: 1rem;
    color: #64748b;
    font-size: 0.9rem;
}

.search-box input[b-gyv5oxuk7c] {
    width: 100%;
    padding: 0.6rem 2.5rem 0.6rem 2.5rem;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 0.95rem;
    outline: none;
}

.search-box input[b-gyv5oxuk7c]::placeholder {
    color: #64748b;
}

[data-theme="light"] .search-box input[b-gyv5oxuk7c] {
    background: rgba(0, 0, 0, 0.05);
    color: #1e293b;
}

.clear-search[b-gyv5oxuk7c] {
    position: absolute;
    right: 0.75rem;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #64748b;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

.clear-search:hover[b-gyv5oxuk7c] {
    background: rgba(255, 255, 255, 0.3);
}

/* Upload Section */
.upload-section[b-gyv5oxuk7c] {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.upload-wrapper[b-gyv5oxuk7c] {
    position: relative;
    display: inline-block;
}

.upload-wrapper[b-gyv5oxuk7c]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.file-input[b-gyv5oxuk7c] {
    display: none;
}

.upload-btn[b-gyv5oxuk7c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    background: #007aff;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.upload-btn:hover[b-gyv5oxuk7c] {
    background: #0066d6;
}

.upload-btn i[b-gyv5oxuk7c] {
    font-size: 1rem;
}

/* Files Grid */
.files-grid[b-gyv5oxuk7c] {
    flex: 1;
    padding: 1rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    align-content: start;
}

/* Loading State */
.loading-state[b-gyv5oxuk7c] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: #64748b;
}

.loading-state i[b-gyv5oxuk7c] {
    font-size: 2rem;
}

/* Empty State */
.empty-state[b-gyv5oxuk7c] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: #64748b;
}

.empty-icon[b-gyv5oxuk7c] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.empty-icon i[b-gyv5oxuk7c] {
    font-size: 2.5rem;
    color: #3b82f6;
}

.empty-state h3[b-gyv5oxuk7c] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0 0 0.5rem 0;
}

[data-theme="light"] .empty-state h3[b-gyv5oxuk7c] {
    color: #1e293b;
}

.empty-state p[b-gyv5oxuk7c] {
    font-size: 0.95rem;
    margin: 0;
}

/* File Card */
.file-card[b-gyv5oxuk7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    position: relative;
}

.file-card:hover[b-gyv5oxuk7c] {
    background: rgba(59, 130, 246, 0.1);
}

.file-card:active[b-gyv5oxuk7c] {
    transform: scale(0.98);
}

.file-card.selected[b-gyv5oxuk7c] {
    background: rgba(59, 130, 246, 0.2);
}

/* Select Checkbox */
.select-checkbox[b-gyv5oxuk7c] {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.select-checkbox.checked[b-gyv5oxuk7c] {
    background: #007aff;
    border-color: #007aff;
}

.select-checkbox i[b-gyv5oxuk7c] {
    font-size: 0.7rem;
    color: white;
}

/* File Preview */
.file-preview[b-gyv5oxuk7c] {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.preview-folder[b-gyv5oxuk7c] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-folder i[b-gyv5oxuk7c] {
    font-size: 3rem;
    color: white;
}

.preview-image[b-gyv5oxuk7c] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-image i[b-gyv5oxuk7c] {
    font-size: 2.5rem;
    color: white;
}

.preview-pdf[b-gyv5oxuk7c] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-pdf i[b-gyv5oxuk7c] {
    font-size: 2.5rem;
    color: white;
}

.preview-doc[b-gyv5oxuk7c] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-doc i[b-gyv5oxuk7c] {
    font-size: 2.5rem;
    color: white;
}

.preview-sheet[b-gyv5oxuk7c] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-sheet i[b-gyv5oxuk7c] {
    font-size: 2.5rem;
    color: white;
}

.preview-text[b-gyv5oxuk7c] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-text i[b-gyv5oxuk7c] {
    font-size: 2.5rem;
    color: white;
}

/* File Info */
.file-info[b-gyv5oxuk7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
}

.file-name[b-gyv5oxuk7c] {
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
}

[data-theme="light"] .file-name[b-gyv5oxuk7c] {
    color: #1e293b;
}

.file-meta[b-gyv5oxuk7c] {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Action Bar */
.action-bar[b-gyv5oxuk7c] {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    position: sticky;
    bottom: 0;
}

[data-theme="light"] .action-bar[b-gyv5oxuk7c] {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.action-btn[b-gyv5oxuk7c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: #007aff;
    font-size: 0.7rem;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.action-btn:hover[b-gyv5oxuk7c] {
    opacity: 0.8;
}

.action-btn i[b-gyv5oxuk7c] {
    font-size: 1.25rem;
}

.action-btn.delete[b-gyv5oxuk7c] {
    color: #ef4444;
}

/* Mobile Responsive Styles */
@media (max-width: 1199px) {
    .drive-container[b-gyv5oxuk7c] {
        position: relative;
        overflow: hidden;
    }

    .drive-sidebar[b-gyv5oxuk7c] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-right: none;
        transform: translateX(0);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 2;
    }

    .drive-container.showing-content .drive-sidebar[b-gyv5oxuk7c] {
        transform: translateX(-30%);
        pointer-events: none;
    }

    .drive-content[b-gyv5oxuk7c] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 3;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
        background: #0f172a;
    }

    [data-theme="light"] .drive-content[b-gyv5oxuk7c] {
        background: #f1f5f9;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    }

    .drive-container.showing-content .drive-content[b-gyv5oxuk7c] {
        transform: translateX(0);
    }

    .drive-container.dragging .drive-sidebar[b-gyv5oxuk7c],
    .drive-container.dragging .drive-content[b-gyv5oxuk7c] {
        transition: none;
    }

    .back-btn[b-gyv5oxuk7c] {
        display: flex;
    }

    .sidebar-tab-bar[b-gyv5oxuk7c] {
        display: flex;
    }

    .files-grid[b-gyv5oxuk7c] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        padding: 1rem;
        gap: 0.75rem;
    }

    .file-preview[b-gyv5oxuk7c] {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .content-header[b-gyv5oxuk7c] {
        padding: 0.5rem 1rem;
    }

    .content-title[b-gyv5oxuk7c] {
        font-size: 1.1rem;
    }

    .search-container[b-gyv5oxuk7c] {
        padding: 0.5rem 1rem;
    }

    .upload-section[b-gyv5oxuk7c] {
        padding: 0.75rem 1rem;
    }

    .files-grid[b-gyv5oxuk7c] {
        grid-template-columns: repeat(3, 1fr);
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .file-card[b-gyv5oxuk7c] {
        padding: 0.75rem 0.25rem;
    }

    .file-preview[b-gyv5oxuk7c] {
        width: 70px;
        height: 70px;
        border-radius: 10px;
    }

    .file-name[b-gyv5oxuk7c] {
        font-size: 0.75rem;
        max-width: 80px;
    }
}

/* Desktop - Two Column Layout */
@media (min-width: 1200px) {
    .drive-container[b-gyv5oxuk7c] {
        display: flex;
    }

    .drive-sidebar[b-gyv5oxuk7c] {
        width: 280px;
        min-width: 280px;
    }

    .drive-content[b-gyv5oxuk7c] {
        flex: 1;
    }

    .sidebar-tab-bar[b-gyv5oxuk7c] {
        display: none;
    }
}

/* Custom Scrollbar */
.drive-sidebar[b-gyv5oxuk7c]::-webkit-scrollbar,
.drive-content[b-gyv5oxuk7c]::-webkit-scrollbar {
    width: 6px;
}

.drive-sidebar[b-gyv5oxuk7c]::-webkit-scrollbar-track,
.drive-content[b-gyv5oxuk7c]::-webkit-scrollbar-track {
    background: transparent;
}

.drive-sidebar[b-gyv5oxuk7c]::-webkit-scrollbar-thumb,
.drive-content[b-gyv5oxuk7c]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.drive-sidebar[b-gyv5oxuk7c]::-webkit-scrollbar-thumb:hover,
.drive-content[b-gyv5oxuk7c]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .drive-sidebar[b-gyv5oxuk7c]::-webkit-scrollbar-thumb,
[data-theme="light"] .drive-content[b-gyv5oxuk7c]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Desktop Container */
.desktop-container[b-3c4ug8jrn9] {
    min-height: calc(100vh - 48px);
    position: relative;
    overflow-x: hidden;
}

/* Mobile Swipe Container - Horizontal scroll snap for non-desktop */
@media (max-width: 1199px) {
    .desktop-container[b-3c4ug8jrn9] {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .desktop-container[b-3c4ug8jrn9]::-webkit-scrollbar {
        display: none;
    }

    .desktop-container.grabbing[b-3c4ug8jrn9] {
        cursor: grabbing;
        scroll-snap-type: none;
    }
}

/* Main Content Area */
.desktop-content[b-3c4ug8jrn9] {
    padding: 1rem 2rem 2rem 2rem;
    width: 100%;
    box-sizing: border-box;
}

/* Mobile: Content area becomes a scrollable panel */
@media (max-width: 1199px) {
    .desktop-content[b-3c4ug8jrn9] {
        display: none;
    }
}

.content-wrapper[b-3c4ug8jrn9] {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

/* Mobile: Hide content wrapper items except widgets */
@media (max-width: 1199px) {
    .content-wrapper[b-3c4ug8jrn9] {
        display: none;
    }

    .widgets-row[b-3c4ug8jrn9] {
        display: none;
    }
}

/* Profile Card */
.profile-card[b-3c4ug8jrn9] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 2rem;
    width: 280px;
    flex-shrink: 0;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.profile-avatar-wrapper[b-3c4ug8jrn9] {
    margin-bottom: 1.5rem;
}

.profile-avatar[b-3c4ug8jrn9] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.5);
}

.profile-name[b-3c4ug8jrn9] {
    font-size: 2rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 0.75rem 0;
}

.profile-email-bar[b-3c4ug8jrn9] {
    width: 100px;
    height: 8px;
    background: rgba(59, 130, 246, 0.4);
    border-radius: 4px;
    margin-bottom: 1rem;
}

.profile-subtitle[b-3c4ug8jrn9] {
    font-size: 1.1rem;
    color: #94a3b8;
    font-weight: 500;
}

/* App Icons Grid Card */
.app-grid-card[b-3c4ug8jrn9] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 1.5rem;
    flex: 1;
    min-width: 400px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Mobile: App grid becomes fullscreen first panel */
@media (max-width: 1199px) {
    .app-grid-card[b-3c4ug8jrn9] {
        display: none;
    }
}

/* Mobile App Panel - Full Screen First Panel */
.mobile-app-panel[b-3c4ug8jrn9] {
    display: none;
}

@media (max-width: 1199px) {
    .mobile-app-panel[b-3c4ug8jrn9] {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex: 0 0 100vw;
        width: 100vw;
        min-width: 100vw;
        height: calc(100vh - 48px);
        scroll-snap-align: start;
        padding: 2rem;
        box-sizing: border-box;
        order: 1;
    }
}

.mobile-app-icons-grid[b-3c4ug8jrn9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 1.5rem;
    justify-items: center;
    align-items: start;
    width: 100%;
    height: 100%;
    max-height: calc(100% - 60px);
}

@media (max-width: 767px) {
    .mobile-app-icons-grid[b-3c4ug8jrn9] {
        gap: 1rem;
    }
}

/* Mobile Content Panel - Second Panel */
.mobile-content-panel[b-3c4ug8jrn9] {
    display: none;
}

@media (max-width: 1199px) {
    .mobile-content-panel[b-3c4ug8jrn9] {
        display: flex;
        flex-direction: column;
        flex: 0 0 100vw;
        width: 100vw;
        min-width: 100vw;
        height: calc(100vh - 48px);
        scroll-snap-align: start;
        overflow-y: auto;
        padding: 1rem;
        padding-top: 0;
        box-sizing: border-box;
        order: 2;
        gap: 1rem;
    }
}

.mobile-profile-card[b-3c4ug8jrn9] {
    display: none;
}

@media (max-width: 1199px) {
    .mobile-profile-card[b-3c4ug8jrn9] {
        display: block;
        width: 100%;
    }
}

.mobile-widgets[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Swipe Indicator */
.swipe-indicator[b-3c4ug8jrn9] {
    display: none;
}

@media (max-width: 1199px) {
    .swipe-indicator[b-3c4ug8jrn9] {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 1rem 0;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .mobile-content-panel .swipe-indicator[b-3c4ug8jrn9] {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: auto;
        padding-bottom: 1rem;
    }
}

.swipe-dot[b-3c4ug8jrn9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.3s ease, transform 0.3s ease;
}

.swipe-dot.active[b-3c4ug8jrn9] {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

[data-theme="light"] .swipe-dot[b-3c4ug8jrn9] {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .swipe-dot.active[b-3c4ug8jrn9] {
    background: rgba(0, 0, 0, 0.6);
}

.app-icons-grid[b-3c4ug8jrn9] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    justify-items: center;
}

.app-icon[b-3c4ug8jrn9],
a.app-icon[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
    cursor: pointer;
    color: inherit;
}

.app-icon:hover[b-3c4ug8jrn9],
a.app-icon:hover[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.app-icon:hover {
    transform: translateY(-5px);
    text-decoration: none;
}

.app-icon-image[b-3c4ug8jrn9] {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 2rem;
    position: relative;
}

.app-icon-label[b-3c4ug8jrn9] {
    color: #e2e8f0;
    font-size: 0.8rem;
    text-align: center;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Individual App Icon Styles */
.mail-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #5ac8fa 0%, #007aff 100%);
    color: white;
}

.contacts-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #a8a8a8 0%, #8e8e8e 100%);
    color: white;
}

.calendar-icon[b-3c4ug8jrn9] {
    background: white;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.calendar-content[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

.calendar-day[b-3c4ug8jrn9] {
    background: #ff3b30;
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0;
    width: 100%;
    text-align: center;
    border-radius: 16px 16px 0 0;
}

.calendar-date[b-3c4ug8jrn9] {
    color: #1a1a1a;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    margin-top: 0.35rem;
}

.photos-icon[b-3c4ug8jrn9] {
    background: white;
    position: relative;
}

.photos-icon[b-3c4ug8jrn9]::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: conic-gradient(
        #ff3b30 0deg 45deg,
        #ff9500 45deg 90deg,
        #ffcc00 90deg 135deg,
        #34c759 135deg 180deg,
        #5ac8fa 180deg 225deg,
        #007aff 225deg 270deg,
        #5856d6 270deg 315deg,
        #ff2d55 315deg 360deg
    );
    border-radius: 50%;
}

.flower-center[b-3c4ug8jrn9] {
    position: relative;
    z-index: 1;
    font-size: 0.6rem;
    color: transparent;
}

.drive-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #e8f4fc 0%, #c4e3f7 100%);
    color: #007aff;
}

.notes-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #fffc99 0%, #fff176 100%);
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 10px;
}

.notes-lines[b-3c4ug8jrn9] {
    width: 80%;
    height: 35px;
    background: repeating-linear-gradient(
        180deg,
        transparent,
        transparent 7px,
        #d4d4a8 7px,
        #d4d4a8 8px
    );
}

.reminders-icon[b-3c4ug8jrn9] {
    background: white;
    flex-direction: column;
}

.reminders-dots[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    padding-left: 15px;
}

.dot[b-3c4ug8jrn9] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.blue[b-3c4ug8jrn9] {
    background: #007aff;
}

.dot.orange[b-3c4ug8jrn9] {
    background: #ff9500;
}

.dot.red[b-3c4ug8jrn9] {
    background: #ff3b30;
}

.pages-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #ffb84d 0%, #ff9500 100%);
    color: white;
    transform: rotate(-45deg);
}

.pages-icon i[b-3c4ug8jrn9] {
    transform: rotate(45deg);
}

.numbers-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #5ac8fa 0%, #34aadc 100%);
}

.chart-bars[b-3c4ug8jrn9] {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 35px;
}

.bar[b-3c4ug8jrn9] {
    width: 12px;
    border-radius: 2px;
}

.bar1[b-3c4ug8jrn9] {
    height: 15px;
    background: #4cd964;
}

.bar2[b-3c4ug8jrn9] {
    height: 25px;
    background: #4cd964;
}

.bar3[b-3c4ug8jrn9] {
    height: 35px;
    background: #4cd964;
}

.keynote-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #007aff 0%, #0051d4 100%);
    color: white;
}

.findmy-icon[b-3c4ug8jrn9] {
    background: linear-gradient(135deg, #34c759 0%, #30d158 50%, #007aff 100%);
    color: white;
}

/* Settings Icon */
.settings-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #8e8e93 0%, #636366 100%);
    color: white;
}

/* Custom App Icon (Installed Apps) */
.custom-app-icon[b-3c4ug8jrn9] {
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.custom-app-icon i[b-3c4ug8jrn9] {
    font-size: 1.8rem;
}

/* Widgets Row */
.widgets-row[b-3c4ug8jrn9] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.widgets-row:last-child[b-3c4ug8jrn9] {
    margin-bottom: 0;
}

/* Widget Cards */
.widget-card[b-3c4ug8jrn9] {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    flex: 1 1 0;
    min-width: 280px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Widget Link - make widget clickable */
.widget-link[b-3c4ug8jrn9],
a.widget-link[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.widget-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: rgba(30, 41, 59, 0.85);
    border-radius: 20px;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.2);
    flex: 1 1 0;
    min-width: 280px;
}

/* Reminder checkbox completed state */
.reminder-checkbox[b-3c4ug8jrn9] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #64748b;
    flex-shrink: 0;
    margin-top: 2px;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reminder-checkbox:hover[b-3c4ug8jrn9] {
    border-color: #007aff;
    background: rgba(0, 122, 255, 0.1);
}

.reminder-checkbox.checked[b-3c4ug8jrn9] {
    background: #34c759;
    border-color: #34c759;
    position: relative;
}

.reminder-checkbox.checked[b-3c4ug8jrn9]::after {
    content: '?';
    position: absolute;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.reminder-checkbox.checked:hover[b-3c4ug8jrn9] {
    background: #2db54d;
    border-color: #2db54d;
}

.reminder-text[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.reminder-text:hover .reminder-title[b-3c4ug8jrn9] {
    color: #007aff;
}

.widget-header[b-3c4ug8jrn9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
}

.widget-header-left[b-3c4ug8jrn9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.widget-icon[b-3c4ug8jrn9] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reminders-widget-icon[b-3c4ug8jrn9] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.mini-dots[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    padding-left: 8px;
}

.mini-dot[b-3c4ug8jrn9] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.mini-dot.blue[b-3c4ug8jrn9] {
    background: #007aff;
}

.mini-dot.orange[b-3c4ug8jrn9] {
    background: #ff9500;
}

.mini-dot.red[b-3c4ug8jrn9] {
    background: #ff3b30;
}

.pages-widget-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #ffb84d 0%, #ff9500 100%);
    color: white;
    font-size: 1rem;
}

.widget-title-group[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
}

.widget-title[b-3c4ug8jrn9] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
    line-height: 1.2;
}

.widget-subtitle[b-3c4ug8jrn9] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.widget-action[b-3c4ug8jrn9] {
    background: none;
    border: none;
    color: #007aff;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
}

/* Reminders Widget Content */
.widget-content[b-3c4ug8jrn9] {
    width: 100%;
}

.reminders-widget .widget-content[b-3c4ug8jrn9] {
    min-width: 0;
    flex: 1;
}

.reminders-columns[b-3c4ug8jrn9] {
    display: flex;
    gap: 2rem;
    width: 100%;
}

.reminders-column[b-3c4ug8jrn9] {
    flex: 1;
    min-width: 0;
}

.reminder-item[b-3c4ug8jrn9] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.reminder-item:last-child[b-3c4ug8jrn9] {
    border-bottom: none;
}

.reminder-checkbox[b-3c4ug8jrn9] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #64748b;
    flex-shrink: 0;
    margin-top: 2px;
}

.reminder-text[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.reminder-title[b-3c4ug8jrn9] {
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 400;
}

.reminder-category[b-3c4ug8jrn9] {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Pages Widget Content */
.pages-list[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
}

.pages-item[b-3c4ug8jrn9] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.pages-item:last-child[b-3c4ug8jrn9] {
    border-bottom: none;
}

.pages-item-icon[b-3c4ug8jrn9] {
    color: #ff9500;
    font-size: 1rem;
    margin-top: 2px;
}

.pages-item-text[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
}

.pages-item-title[b-3c4ug8jrn9] {
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 400;
}

.pages-item-category[b-3c4ug8jrn9] {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Notes Widget Styles */
.notes-widget-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #fffc99 0%, #fff176 100%);
    color: #8b7355;
    font-size: 1.2rem;
}

.notes-action[b-3c4ug8jrn9] {
    color: #ffb84d;
}

.notes-list[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
}

.note-item[b-3c4ug8jrn9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.note-item:last-child[b-3c4ug8jrn9] {
    border-bottom: none;
}

.note-preview[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.note-title[b-3c4ug8jrn9] {
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.note-excerpt[b-3c4ug8jrn9] {
    font-size: 0.85rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-date[b-3c4ug8jrn9] {
    font-size: 0.8rem;
    color: #64748b;
    flex-shrink: 0;
}

/* Calendar Widget Styles */
.calendar-widget-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #ff6b6b 0%, #ff3b30 100%);
    color: white;
    font-size: 1.2rem;
}

.calendar-action[b-3c4ug8jrn9] {
    color: #ff3b30;
}

.calendar-events[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
}

.calendar-event[b-3c4ug8jrn9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.calendar-event:last-child[b-3c4ug8jrn9] {
    border-bottom: none;
}

.event-time-block[b-3c4ug8jrn9] {
    width: 4px;
    height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
}

.blue-event[b-3c4ug8jrn9] {
    background: #007aff;
}

.green-event[b-3c4ug8jrn9] {
    background: #34c759;
}

.orange-event[b-3c4ug8jrn9] {
    background: #ff9500;
}

.purple-event[b-3c4ug8jrn9] {
    background: #af52de;
}

.event-details[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.event-title[b-3c4ug8jrn9] {
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 500;
}

.event-time[b-3c4ug8jrn9] {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Files Widget Styles */
.files-widget-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #5ac8fa 0%, #007aff 100%);
    color: white;
    font-size: 1.2rem;
}

.files-action[b-3c4ug8jrn9] {
    color: #007aff;
}

.files-list[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
}

.file-item[b-3c4ug8jrn9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.file-item:last-child[b-3c4ug8jrn9] {
    border-bottom: none;
}

.file-icon[b-3c4ug8jrn9] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.doc-file[b-3c4ug8jrn9] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.sheet-file[b-3c4ug8jrn9] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.pdf-file[b-3c4ug8jrn9] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.image-file[b-3c4ug8jrn9] {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.file-info[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.file-name[b-3c4ug8jrn9] {
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta[b-3c4ug8jrn9] {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Mail Widget Styles */
.mail-widget-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #5ac8fa 0%, #007aff 100%);
    color: white;
    font-size: 1.2rem;
}

.mail-action[b-3c4ug8jrn9] {
    color: #007aff;
}

.mail-list[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
}

.mail-item[b-3c4ug8jrn9] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.mail-item:last-child[b-3c4ug8jrn9] {
    border-bottom: none;
}

.mail-item.unread .mail-sender[b-3c4ug8jrn9],
.mail-item.unread .mail-subject[b-3c4ug8jrn9] {
    font-weight: 600;
}

.mail-avatar[b-3c4ug8jrn9] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.mail-avatar img[b-3c4ug8jrn9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mail-content[b-3c4ug8jrn9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mail-header[b-3c4ug8jrn9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.125rem;
}

.mail-sender[b-3c4ug8jrn9] {
    font-size: 0.95rem;
    color: #e2e8f0;
    font-weight: 500;
}

.mail-time[b-3c4ug8jrn9] {
    font-size: 0.75rem;
    color: #64748b;
    flex-shrink: 0;
}

.mail-subject[b-3c4ug8jrn9] {
    font-size: 0.9rem;
    color: #cbd5e1;
    margin-bottom: 0.125rem;
}

.mail-preview[b-3c4ug8jrn9] {
    font-size: 0.8rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Light Theme - Profile Card */
[data-theme="light"] .profile-card[b-3c4ug8jrn9] {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(59, 130, 246, 0.12);
}

[data-theme="light"] .profile-name[b-3c4ug8jrn9] {
    color: #1e293b;
}

[data-theme="light"] .profile-subtitle[b-3c4ug8jrn9] {
    color: #64748b;
}

/* Light Theme - App Grid Card */
[data-theme="light"] .app-grid-card[b-3c4ug8jrn9] {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(59, 130, 246, 0.12);
}

[data-theme="light"] .app-icon-label[b-3c4ug8jrn9] {
    color: #334155;
    text-shadow: none;
}

/* Light Theme - Widget Titles */
[data-theme="light"] .widget-title[b-3c4ug8jrn9] {
    color: #1e293b;
}

[data-theme="light"] .widget-subtitle[b-3c4ug8jrn9] {
    color: #64748b;
}

/* Light Theme - Reminder Items */
[data-theme="light"] .reminder-title[b-3c4ug8jrn9] {
    color: #1e293b;
}

[data-theme="light"] .reminder-category[b-3c4ug8jrn9] {
    color: #64748b;
}

[data-theme="light"] .reminder-item[b-3c4ug8jrn9] {
    border-bottom-color: rgba(59, 130, 246, 0.08);
}

/* Light Theme - Dock */
[data-theme="light"] .desktop-dock[b-3c4ug8jrn9] {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(59, 130, 246, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Light Theme - Notes Widget */
[data-theme="light"] .note-title[b-3c4ug8jrn9] {
    color: #1e293b;
}

[data-theme="light"] .note-excerpt[b-3c4ug8jrn9] {
    color: #64748b;
}

[data-theme="light"] .note-date[b-3c4ug8jrn9] {
    color: #94a3b8;
}

/* Light Theme - Calendar Widget */
[data-theme="light"] .event-title[b-3c4ug8jrn9] {
    color: #1e293b;
}

[data-theme="light"] .event-time[b-3c4ug8jrn9] {
    color: #64748b;
}

/* Light Theme - Files Widget */
[data-theme="light"] .file-name[b-3c4ug8jrn9] {
    color: #1e293b;
}

[data-theme="light"] .file-meta[b-3c4ug8jrn9] {
    color: #64748b;
}

/* Light Theme - Mail Widget */
[data-theme="light"] .mail-sender[b-3c4ug8jrn9] {
    color: #1e293b;
}

[data-theme="light"] .mail-subject[b-3c4ug8jrn9] {
    color: #334155;
}

[data-theme="light"] .mail-preview[b-3c4ug8jrn9] {
    color: #64748b;
}

[data-theme="light"] .mail-time[b-3c4ug8jrn9] {
    color: #94a3b8;
}

/* Skeleton Loading Styles */
.reminders-skeleton[b-3c4ug8jrn9] {
    width: 100%;
}

.skeleton-item[b-3c4ug8jrn9] {
    opacity: 0.6;
}

.skeleton-checkbox[b-3c4ug8jrn9] {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-3c4ug8jrn9 1.5s infinite;
}

.skeleton-title[b-3c4ug8jrn9] {
    display: block;
    height: 14px;
    width: 120px;
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-3c4ug8jrn9 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 6px;
}

.skeleton-title-short[b-3c4ug8jrn9] {
    width: 80px;
}

.skeleton-title-medium[b-3c4ug8jrn9] {
    width: 100px;
}

.skeleton-category[b-3c4ug8jrn9] {
    display: block;
    height: 10px;
    width: 60px;
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-3c4ug8jrn9 1.5s infinite;
    border-radius: 3px;
}

@keyframes skeleton-shimmer-b-3c4ug8jrn9 {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

[data-theme="light"] .skeleton-checkbox[b-3c4ug8jrn9],
[data-theme="light"] .skeleton-title[b-3c4ug8jrn9],
[data-theme="light"] .skeleton-category[b-3c4ug8jrn9] {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
}

/* Desktop Dock */
.desktop-dock[b-3c4ug8jrn9] {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    display: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.dock-container[b-3c4ug8jrn9] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dock-icon[b-3c4ug8jrn9],
a.dock-icon[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.dock-icon {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    cursor: pointer;
    font-size: 1.6rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: white;
}

.dock-icon:hover[b-3c4ug8jrn9],
a.dock-icon:hover[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.dock-icon:hover {
    transform: translateY(-10px) scale(1.1);
    text-decoration: none;
}

.calendar-dock-icon[b-3c4ug8jrn9] {
    background: white;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.calendar-dock-icon .calendar-day[b-3c4ug8jrn9] {
    font-size: 0.5rem;
    padding: 0.1rem 0;
    border-radius: 14px 14px 0 0;
}

.calendar-dock-icon .calendar-date[b-3c4ug8jrn9] {
    font-size: 1.5rem;
    margin-top: 0.2rem;
}

.notes-dock-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #fffc99 0%, #fff176 100%);
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 8px;
}

.notes-dock-icon .notes-lines[b-3c4ug8jrn9] {
    height: 25px;
}

.reminders-dock-icon[b-3c4ug8jrn9] {
    background: white;
    flex-direction: column;
}

.reminders-dock-icon[b-3c4ug8jrn9],
a.reminders-dock-icon[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.reminders-dock-icon {
    background: white !important;
    flex-direction: column;
}

.reminders-dock-icon .reminders-dots[b-3c4ug8jrn9] {
    padding-left: 12px;
}

.reminders-dock-icon .dot[b-3c4ug8jrn9] {
    width: 10px;
    height: 10px;
}

.numbers-dock-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #5ac8fa 0%, #34aadc 100%);
}

.numbers-dock-icon .chart-bars[b-3c4ug8jrn9] {
    height: 28px;
}

.numbers-dock-icon .bar[b-3c4ug8jrn9] {
    width: 10px;
}

.numbers-dock-icon .bar1[b-3c4ug8jrn9] {
    height: 12px;
}

.numbers-dock-icon .bar2[b-3c4ug8jrn9] {
    height: 20px;
}

.numbers-dock-icon .bar3[b-3c4ug8jrn9] {
    height: 28px;
}

.contacts-dock-icon[b-3c4ug8jrn9],
a.contacts-dock-icon[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.contacts-dock-icon {
    background: linear-gradient(180deg, #a8a8a8 0%, #8e8e8e 100%);
    color: white;
    font-size: 1.6rem;
    width: 55px;
    height: 55px;
    border-radius: 14px;
}

/* Drive icon in dock - matches app grid style */
.dock-icon.drive-icon[b-3c4ug8jrn9],
a.dock-icon.drive-icon[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.dock-icon.drive-icon {
    background: linear-gradient(180deg, #e8f4fc 0%, #c4e3f7 100%);
    color: #007aff;
    width: 55px;
    height: 55px;
    border-radius: 14px;
}

/* Find My icon in dock */
.findmy-dock-icon[b-3c4ug8jrn9],
a.findmy-dock-icon[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.findmy-dock-icon {
    background: linear-gradient(135deg, #34c759 0%, #30d158 50%, #007aff 100%);
    color: white;
}

/* Settings icon in dock */
.settings-dock-icon[b-3c4ug8jrn9],
a.settings-dock-icon[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.settings-dock-icon {
    background: linear-gradient(180deg, #8e8e93 0%, #636366 100%);
    color: white;
}

/* App Builder Icon - VS Code / Xcode style */
.appbuilder-icon[b-3c4ug8jrn9] {
    background: linear-gradient(180deg, #40c8e0 0%, #1ba1e2 50%, #0078d7 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.appbuilder-icon[b-3c4ug8jrn9]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 8px 8px;
    pointer-events: none;
}

.appbuilder-icon i[b-3c4ug8jrn9] {
    position: relative;
    z-index: 1;
    color: #3a3a3c;
    font-size: 1.6rem;
    transform: rotate(-45deg);
}

/* App Builder Dock Icon */
.appbuilder-dock-icon[b-3c4ug8jrn9],
a.appbuilder-dock-icon[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.appbuilder-dock-icon {
    background: linear-gradient(180deg, #40c8e0 0%, #1ba1e2 50%, #0078d7 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.appbuilder-dock-icon[b-3c4ug8jrn9]::before,
a.appbuilder-dock-icon[b-3c4ug8jrn9]::before,
[b-3c4ug8jrn9] a.appbuilder-dock-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 6px 6px;
    pointer-events: none;
}

.appbuilder-dock-icon i[b-3c4ug8jrn9],
a.appbuilder-dock-icon i[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.appbuilder-dock-icon i {
    position: relative;
    z-index: 1;
    color: #3a3a3c !important;
    font-size: 1.4rem;
    transform: rotate(-45deg);
}

/* App Store Icon */
.appstore-icon[b-3c4ug8jrn9] {
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    color: white;
}

/* App Store Dock Icon */
.appstore-dock-icon[b-3c4ug8jrn9],
a.appstore-dock-icon[b-3c4ug8jrn9],
[b-3c4ug8jrn9] a.appstore-dock-icon {
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    color: white;
}

/* Show dock on desktop/large screens */
@media (min-width: 1200px) {
    .desktop-dock[b-3c4ug8jrn9] {
        display: flex;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Login Page - iOS Style */

.login-container[b-b30bfvxc5b] {
    flex: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--login-bg);
    transition: background 0.3s ease;
}

.login-card[b-b30bfvxc5b] {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 48px 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Dark theme */
:global([data-theme="dark"]) .login-card[b-b30bfvxc5b] {
    background: rgba(30, 30, 35, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.login-logo[b-b30bfvxc5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 32px;
}

.login-logo .skyline-logo[b-b30bfvxc5b] {
    width: 32px;
    height: 32px;
    color: #3b82f6;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
}

.login-logo .brand-text[b-b30bfvxc5b] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
}

:global([data-theme="dark"]) .login-logo .brand-text[b-b30bfvxc5b] {
    color: #f5f5f7;
}

.login-title[b-b30bfvxc5b] {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: #1d1d1f;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

:global([data-theme="dark"]) .login-title[b-b30bfvxc5b] {
    color: #f5f5f7;
}

.login-subtitle[b-b30bfvxc5b] {
    font-size: 15px;
    color: #86868b;
    text-align: center;
    margin: 0 0 32px;
}

.login-error[b-b30bfvxc5b] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: 12px;
    margin-bottom: 24px;
    color: #ff3b30;
    font-size: 14px;
}

.login-error i[b-b30bfvxc5b] {
    font-size: 18px;
}

.login-form-group[b-b30bfvxc5b] {
    margin-bottom: 20px;
}

.input-wrapper[b-b30bfvxc5b] {
    position: relative;
    background: #f5f5f7;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

:global([data-theme="dark"]) .input-wrapper[b-b30bfvxc5b] {
    background: rgba(255, 255, 255, 0.08);
}

.input-wrapper:focus-within[b-b30bfvxc5b],
.input-wrapper.focused[b-b30bfvxc5b] {
    border-color: #007AFF;
    background: white;
}

:global([data-theme="dark"]) .input-wrapper:focus-within[b-b30bfvxc5b],
:global([data-theme="dark"]) .input-wrapper.focused[b-b30bfvxc5b] {
    background: rgba(255, 255, 255, 0.12);
}

.login-input[b-b30bfvxc5b] {
    width: 100%;
    padding: 24px 16px 8px;
    font-size: 17px;
    border: none;
    background: transparent;
    color: #1d1d1f;
    outline: none;
}

:global([data-theme="dark"]) .login-input[b-b30bfvxc5b] {
    color: #f5f5f7;
}

.login-input[b-b30bfvxc5b]::placeholder {
    color: transparent;
}

.login-label[b-b30bfvxc5b] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 17px;
    color: #86868b;
    pointer-events: none;
    transition: all 0.2s ease;
}

.input-wrapper.focused .login-label[b-b30bfvxc5b],
.login-input:not(:placeholder-shown) + .login-label[b-b30bfvxc5b] {
    top: 12px;
    transform: translateY(0);
    font-size: 12px;
    color: #007AFF;
}

.password-toggle[b-b30bfvxc5b] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #86868b;
    transition: color 0.2s ease;
}

.password-toggle:hover[b-b30bfvxc5b] {
    color: #007AFF;
}

.login-button[b-b30bfvxc5b] {
    width: 100%;
    padding: 16px 24px;
    font-size: 17px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
}

.login-button:hover:not(:disabled)[b-b30bfvxc5b] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
}

.login-button:active:not(:disabled)[b-b30bfvxc5b] {
    transform: translateY(0);
}

.login-button:disabled[b-b30bfvxc5b] {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner[b-b30bfvxc5b] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-b30bfvxc5b 0.8s linear infinite;
}

@keyframes spin-b-b30bfvxc5b {
    to { transform: rotate(360deg); }
}

.login-divider[b-b30bfvxc5b] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0 24px;
    color: #86868b;
    font-size: 13px;
}

.login-divider[b-b30bfvxc5b]::before,
.login-divider[b-b30bfvxc5b]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e5e7;
}

:global([data-theme="dark"]) .login-divider[b-b30bfvxc5b]::before,
:global([data-theme="dark"]) .login-divider[b-b30bfvxc5b]::after {
    background: rgba(255, 255, 255, 0.1);
}

.demo-accounts[b-b30bfvxc5b] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.demo-account-btn[b-b30bfvxc5b] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f5f5f7;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

:global([data-theme="dark"]) .demo-account-btn[b-b30bfvxc5b] {
    background: rgba(255, 255, 255, 0.08);
}

.demo-account-btn:hover:not(:disabled)[b-b30bfvxc5b] {
    border-color: var(--btn-color, #007AFF);
    background: white;
}

:global([data-theme="dark"]) .demo-account-btn:hover:not(:disabled)[b-b30bfvxc5b] {
    background: rgba(255, 255, 255, 0.12);
}

.demo-account-btn:disabled[b-b30bfvxc5b] {
    opacity: 0.5;
    cursor: not-allowed;
}

.demo-account-btn.agent[b-b30bfvxc5b] {
    --btn-color: #007AFF;
}

.demo-account-btn.customer-service[b-b30bfvxc5b] {
    --btn-color: #34C759;
}

.demo-account-btn.claims[b-b30bfvxc5b] {
    --btn-color: #FF9500;
}

.demo-account-btn.helpdesk[b-b30bfvxc5b] {
    --btn-color: #AF52DE;
}

.demo-account-icon[b-b30bfvxc5b] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-color, #007AFF);
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.demo-account-info[b-b30bfvxc5b] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.demo-account-name[b-b30bfvxc5b] {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:global([data-theme="dark"]) .demo-account-name[b-b30bfvxc5b] {
    color: #f5f5f7;
}

.demo-account-user[b-b30bfvxc5b] {
    font-size: 11px;
    color: #86868b;
}

.login-footer[b-b30bfvxc5b] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

.login-link[b-b30bfvxc5b] {
    font-size: 14px;
    color: #007AFF;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-link:hover[b-b30bfvxc5b] {
    color: #0056b3;
    text-decoration: underline;
}

.login-separator[b-b30bfvxc5b] {
    color: #86868b;
}

/* Responsive */
@media (max-width: 480px) {
    .login-card[b-b30bfvxc5b] {
        padding: 32px 24px;
        border-radius: 20px;
    }

    .login-title[b-b30bfvxc5b] {
        font-size: 24px;
    }

    .demo-accounts[b-b30bfvxc5b] {
        grid-template-columns: 1fr;
    }

    .demo-account-btn[b-b30bfvxc5b] {
        padding: 12px 14px;
    }
}
/* /Components/Pages/PhoneCall.razor.rz.scp.css */
/* Phone Call Page - iOS Style with AI Features Panel */

/* Demo Mode Banner */
.demo-mode-banner[b-9oeh7xmq65] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(90deg, #8b5cf6 0%, #a855f7 50%, #8b5cf6 100%);
    color: #ffffff;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.demo-mode-banner i[b-9oeh7xmq65] {
    font-size: 0.9rem;
}

/* Main wrapper - horizontal scroll container */
.phone-call-wrapper[b-9oeh7xmq65] {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    display: flex;
}

/* Adjust wrapper when demo banner is present */
.demo-mode-banner + .phone-call-wrapper[b-9oeh7xmq65] {
    height: calc(100vh - 36px);
    margin-top: 36px;
}

/* Mobile Swipe Container - Horizontal scroll snap for non-desktop */
@media (max-width: 1199px) {
    .phone-call-wrapper[b-9oeh7xmq65] {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .phone-call-wrapper[b-9oeh7xmq65]::-webkit-scrollbar {
        display: none;
    }

    .phone-call-wrapper.grabbing[b-9oeh7xmq65] {
        cursor: grabbing;
        scroll-snap-type: none;
    }
}

/* Phone Panel (Left/First) */
.phone-panel[b-9oeh7xmq65] {
    flex: 0 0 50%;
    min-width: 400px;
    max-width: 500px;
    height: 100%;
    position: relative;
}

/* Mobile: Phone panel becomes full-screen first panel */
@media (max-width: 1199px) {
    .phone-panel[b-9oeh7xmq65] {
        flex: 0 0 100vw;
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        height: 100vh;
        scroll-snap-align: start;
        position: relative;
    }
}

/* Features Panel (Right/Second) */
.features-panel[b-9oeh7xmq65] {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    background: linear-gradient(180deg, 
        rgba(15, 23, 42, 0.98) 0%,
        rgba(10, 15, 25, 1) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

/* Mobile: Features panel becomes full-screen second panel */
@media (max-width: 1199px) {
    .features-panel[b-9oeh7xmq65] {
        flex: 0 0 100vw;
        width: 100vw;
        min-width: 100vw;
        height: 100vh;
        scroll-snap-align: start;
        border-left: none;
    }
}

.features-container[b-9oeh7xmq65] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Swipe Indicator */
.swipe-indicator[b-9oeh7xmq65] {
    display: none;
}

@media (max-width: 1199px) {
    .swipe-indicator[b-9oeh7xmq65] {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 1rem 0;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    .features-panel .swipe-indicator[b-9oeh7xmq65] {
        position: fixed;
        bottom: 20px;
    }
}

/* Swipe Dot styles */
.swipe-dot[b-9oeh7xmq65] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.3s ease, transform 0.3s ease;
}

.swipe-dot.active[b-9oeh7xmq65] {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

[data-theme="light"] .swipe-dot[b-9oeh7xmq65] {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .swipe-dot.active[b-9oeh7xmq65] {
    background: rgba(0, 0, 0, 0.6);
}

/* Phone Call Container */
.phone-call-container[b-9oeh7xmq65] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* Background blur effect */
.call-background[b-9oeh7xmq65] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(30, 41, 59, 0.95) 0%,
        rgba(15, 23, 42, 0.98) 30%,
        rgba(10, 15, 25, 1) 100%);
    z-index: 0;
}

/* Header Section */
.call-header[b-9oeh7xmq65] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 3rem 2.5rem 2rem;
}

.caller-info[b-9oeh7xmq65] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.caller-name[b-9oeh7xmq65] {
    font-size: 2.5rem;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.5px;
}

.call-status[b-9oeh7xmq65] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.caller-avatar[b-9oeh7xmq65] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%);
    flex-shrink: 0;
}

.caller-avatar img[b-9oeh7xmq65] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-9oeh7xmq65] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%);
}

.avatar-placeholder span[b-9oeh7xmq65] {
    font-size: 1.5rem;
    font-weight: 500;
    color: white;
}

/* Call Controls */
.call-controls[b-9oeh7xmq65] {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.controls-grid[b-9oeh7xmq65] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 350px;
}

.control-btn[b-9oeh7xmq65] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    transition: opacity 0.2s ease;
}

.control-btn:hover[b-9oeh7xmq65] {
    opacity: 0.8;
}

.control-btn:disabled[b-9oeh7xmq65] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-icon[b-9oeh7xmq65] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.control-btn.active .btn-icon[b-9oeh7xmq65] {
    background: rgba(255, 255, 255, 0.95);
}

.btn-icon i[b-9oeh7xmq65] {
    font-size: 1.5rem;
    color: #ffffff;
}

.control-btn.active .btn-icon i[b-9oeh7xmq65] {
    color: #1a1a1a;
}

.btn-label[b-9oeh7xmq65] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: lowercase;
}

/* Keypad Overlay */
.keypad-overlay[b-9oeh7xmq65] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 15, 25, 0.98);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn-b-9oeh7xmq65 0.2s ease;
}

@keyframes fadeIn-b-9oeh7xmq65 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.keypad[b-9oeh7xmq65] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 300px;
    width: 100%;
}

.keypad-row[b-9oeh7xmq65] {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}

.keypad-btn[b-9oeh7xmq65] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.keypad-btn:hover[b-9oeh7xmq65] {
    background: rgba(255, 255, 255, 0.25);
}

.keypad-btn:active[b-9oeh7xmq65] {
    background: rgba(255, 255, 255, 0.35);
}

.key-number[b-9oeh7xmq65] {
    font-size: 2rem;
    font-weight: 300;
    color: #ffffff;
    line-height: 1;
}

.key-letters[b-9oeh7xmq65] {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    margin-top: 2px;
}

.hide-keypad-btn[b-9oeh7xmq65] {
    margin-top: 2rem;
    padding: 0.75rem 2rem;
    background: transparent;
    border: none;
    color: #007aff;
    font-size: 1rem;
    cursor: pointer;
}

.hide-keypad-btn:hover[b-9oeh7xmq65] {
    text-decoration: underline;
}

/* End Call Button */
.end-call-section[b-9oeh7xmq65] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 2rem 2rem 6rem;
    margin-bottom: 2rem;
}

.end-call-btn[b-9oeh7xmq65] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #ff3b30;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.1s ease;
}

.end-call-btn:hover[b-9oeh7xmq65] {
    background: #ff2d20;
}

.end-call-btn:active[b-9oeh7xmq65] {
    transform: scale(0.95);
}

.end-call-btn i[b-9oeh7xmq65] {
    font-size: 1.5rem;
    color: #ffffff;
    transform: rotate(135deg);
}

/* Feature Cards */
.feature-card[b-9oeh7xmq65] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-header[b-9oeh7xmq65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-header h3[b-9oeh7xmq65] {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.feature-header i[b-9oeh7xmq65] {
    font-size: 0.9rem;
}

.ai-header[b-9oeh7xmq65] {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.2) 0%, transparent 100%);
}

.transcription-header[b-9oeh7xmq65] {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, transparent 100%);
}

.documents-header[b-9oeh7xmq65] {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.2) 0%, transparent 100%);
}

.log-header[b-9oeh7xmq65] {
    background: linear-gradient(90deg, rgba(107, 114, 128, 0.2) 0%, transparent 100%);
}

/* Feature Content - IMPORTANT for padding */
.feature-content[b-9oeh7xmq65] {
    padding: 1.25rem;
}

.header-badges[b-9oeh7xmq65] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge[b-9oeh7xmq65] {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.active[b-9oeh7xmq65] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.status-badge.listening[b-9oeh7xmq65] {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge.listening i[b-9oeh7xmq65] {
    font-size: 0.5rem;
}

.status-badge.actions[b-9oeh7xmq65] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.status-badge.pending[b-9oeh7xmq65] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* AI Responses Section */
.ai-responses[b-9oeh7xmq65] {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.ai-response-item[b-9oeh7xmq65] {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid rgba(34, 197, 94, 0.5);
}

.ai-response-item:last-child[b-9oeh7xmq65] {
    margin-bottom: 0;
}

.response-header[b-9oeh7xmq65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.response-header .timestamp[b-9oeh7xmq65] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.response-badges[b-9oeh7xmq65] {
    display: flex;
    gap: 0.5rem;
}

.source-badge[b-9oeh7xmq65] {
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
}

.source-badge.voice[b-9oeh7xmq65] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.source-badge.text[b-9oeh7xmq65] {
    background: rgba(168, 85, 247, 0.2);
    color: #a78bfa;
}

.source-badge.action[b-9oeh7xmq65] {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.question[b-9oeh7xmq65] {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.answer[b-9oeh7xmq65] {
    margin: 0;
    font-size: 0.9rem;
    color: #22c55e;
    line-height: 1.5;
}

.answer.action-success[b-9oeh7xmq65] {
    color: #22c55e;
}

.answer.action-warning[b-9oeh7xmq65] {
    color: #f59e0b;
}

/* Placeholder text */
.placeholder-text[b-9oeh7xmq65] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* Chat Input Container */
.chat-input-container[b-9oeh7xmq65] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.chat-input[b-9oeh7xmq65] {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.chat-input:focus[b-9oeh7xmq65] {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.chat-input[b-9oeh7xmq65]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.chat-input:disabled[b-9oeh7xmq65] {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-btn[b-9oeh7xmq65] {
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    border: none;
    background: #22c55e;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.1s ease;
}

.send-btn:hover:not(:disabled)[b-9oeh7xmq65] {
    background: #16a34a;
}

.send-btn:active:not(:disabled)[b-9oeh7xmq65] {
    transform: scale(0.95);
}

.send-btn:disabled[b-9oeh7xmq65] {
    background: rgba(34, 197, 94, 0.3);
    cursor: not-allowed;
}

.send-btn i[b-9oeh7xmq65] {
    font-size: 1rem;
}

/* Clear Button */
.clear-btn[b-9oeh7xmq65] {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: transparent;
    color: #f87171;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s ease;
}

.clear-btn:hover[b-9oeh7xmq65] {
    background: rgba(239, 68, 68, 0.1);
}

/* Transcription Display */
.transcription-display[b-9oeh7xmq65] {
    max-height: 300px;
    overflow-y: auto;
}

.transcription-item[b-9oeh7xmq65] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.transcription-item:last-child[b-9oeh7xmq65] {
    border-bottom: none;
}

/* Sentiment Indicator - Color-coded bar on the left side */
.sentiment-indicator[b-9oeh7xmq65] {
    width: 4px;
    min-height: 1.5rem;
    height: 100%;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
    transition: background-color 0.3s ease;
}

.transcription-item .timestamp[b-9oeh7xmq65] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.transcription-item .speaker[b-9oeh7xmq65] {
    color: #60a5fa;
    font-weight: 500;
    flex-shrink: 0;
}

.transcription-item .text[b-9oeh7xmq65] {
    color: rgba(255, 255, 255, 0.8);
    flex: 1;
}

/* Document Upload Section */
.upload-section[b-9oeh7xmq65] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.file-input[b-9oeh7xmq65] {
    display: none;
}

.upload-label[b-9oeh7xmq65] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    border: 2px dashed rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.1);
    color: #a78bfa;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-label:hover[b-9oeh7xmq65] {
    border-color: rgba(168, 85, 247, 0.6);
    background: rgba(168, 85, 247, 0.15);
}

.upload-hint[b-9oeh7xmq65] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

.upload-status[b-9oeh7xmq65] {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.upload-status.uploading[b-9oeh7xmq65] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.upload-status.success[b-9oeh7xmq65] {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.upload-status.error[b-9oeh7xmq65] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Documents List */
.documents-list[b-9oeh7xmq65] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
}

.list-header[b-9oeh7xmq65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.refresh-btn[b-9oeh7xmq65] {
    padding: 0.25rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.2s ease;
}

.refresh-btn:hover[b-9oeh7xmq65] {
    color: #ffffff;
}

.document-item[b-9oeh7xmq65] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.document-item:last-child[b-9oeh7xmq65] {
    border-bottom: none;
}

.doc-name[b-9oeh7xmq65] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-btn[b-9oeh7xmq65] {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: rgba(239, 68, 68, 0.6);
    cursor: pointer;
    transition: color 0.2s ease;
}

.delete-btn:hover[b-9oeh7xmq65] {
    color: #f87171;
}

.no-documents[b-9oeh7xmq65] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    margin: 0;
}

/* Action Card Styles */
.feature-card.action-card[b-9oeh7xmq65] {
    border: 2px solid;
    animation: pulse-border-b-9oeh7xmq65 2s ease-in-out infinite;
}

.feature-card.action-card.info[b-9oeh7xmq65] {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.1);
}

.feature-card.action-card.success[b-9oeh7xmq65] {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.1);
}

.feature-card.action-card.danger[b-9oeh7xmq65] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.1);
}

.feature-card.action-card.warning[b-9oeh7xmq65] {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(245, 158, 11, 0.1);
}

.feature-card.action-card.primary[b-9oeh7xmq65] {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.1);
}

@keyframes pulse-border-b-9oeh7xmq65 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

.action-header[b-9oeh7xmq65] {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.2) 0%, transparent 100%);
}

.action-header h3[b-9oeh7xmq65] {
    color: #f59e0b;
}

.action-details[b-9oeh7xmq65] {
    margin-bottom: 1rem;
}

.action-type[b-9oeh7xmq65] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-description[b-9oeh7xmq65] {
    font-size: 1rem;
    color: #ffffff;
    margin: 0;
    line-height: 1.5;
}

.action-buttons[b-9oeh7xmq65] {
    display: flex;
    gap: 0.75rem;
}

.action-btn[b-9oeh7xmq65] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn.approve[b-9oeh7xmq65] {
    background: #22c55e;
    color: white;
}

.action-btn.approve:hover:not(:disabled)[b-9oeh7xmq65] {
    background: #16a34a;
}

.action-btn.reject[b-9oeh7xmq65] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.action-btn.reject:hover:not(:disabled)[b-9oeh7xmq65] {
    background: rgba(239, 68, 68, 0.3);
}

.action-btn:disabled[b-9oeh7xmq65] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* AI Response with Action styles */
.ai-response-item.has-action[b-9oeh7xmq65] {
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.ai-response-item.action-complete[b-9oeh7xmq65] {
    border-left: 3px solid #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

/* Inline Action Buttons - shown directly on AI response items */
.inline-action-buttons[b-9oeh7xmq65] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.inline-action-btn[b-9oeh7xmq65] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inline-action-btn.approve[b-9oeh7xmq65] {
    background: #22c55e;
    color: white;
}

.inline-action-btn.approve:hover:not(:disabled)[b-9oeh7xmq65] {
    background: #16a34a;
}

.inline-action-btn.reject[b-9oeh7xmq65] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.inline-action-btn.reject:hover:not(:disabled)[b-9oeh7xmq65] {
    background: rgba(239, 68, 68, 0.3);
}

.inline-action-btn:disabled[b-9oeh7xmq65] {
    opacity: 0.6;
    cursor: not-allowed;
}

.inline-action-btn i[b-9oeh7xmq65] {
    font-size: 0.75rem;
}

/* Call Log Display */
.call-log-display[b-9oeh7xmq65] {
    max-height: 200px;
    overflow-y: auto;
}

.log-item[b-9oeh7xmq65] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    align-items: center;
}

.log-item:last-child[b-9oeh7xmq65] {
    border-bottom: none;
}

.log-item.error[b-9oeh7xmq65] {
    background: rgba(239, 68, 68, 0.1);
    margin: 0 -1.25rem;
    padding: 0.5rem 1.25rem;
}

.log-type[b-9oeh7xmq65] {
    color: #60a5fa;
    font-weight: 500;
    white-space: nowrap;
}

.log-item.error .log-type[b-9oeh7xmq65] {
    color: #f87171;
}

.log-message[b-9oeh7xmq65] {
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-time[b-9oeh7xmq65] {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
}

/* Light theme adjustments */
[data-theme="light"] .call-background[b-9oeh7xmq65] {
    background: linear-gradient(180deg, 
        rgba(100, 116, 139, 0.95) 0%,
        rgba(71, 85, 105, 0.98) 30%,
        rgba(51, 65, 85, 1) 100%);
}

[data-theme="light"] .features-panel[b-9oeh7xmq65] {
    background: linear-gradient(180deg, 
        rgba(71, 85, 105, 0.98) 0%,
        rgba(51, 65, 85, 1) 100%);
}

/* Desktop Styles (1200px and up) */
@media (min-width: 1200px) {
    .phone-call-wrapper[b-9oeh7xmq65] {
        display: flex;
        overflow: hidden;
    }
    
    .phone-panel[b-9oeh7xmq65] {
        flex: 0 0 50%;
        min-width: 400px;
        max-width: 500px;
    }
    
    .features-panel[b-9oeh7xmq65] {
        flex: 1;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Hide swipe indicators on desktop */
    .swipe-indicator[b-9oeh7xmq65] {
        display: none !important;
    }
}

/* Tablet Styles */
@media (min-width: 768px) and (max-width: 1199px) {
    .features-container[b-9oeh7xmq65] {
        padding: 1.25rem;
    }
}

/* Mobile Styles */
@media (max-width: 767px) {
    .call-header[b-9oeh7xmq65] {
        padding: 2rem 1.5rem 1.5rem;
    }

    .caller-name[b-9oeh7xmq65] {
        font-size: 2rem;
    }

    .call-status[b-9oeh7xmq65] {
        font-size: 1rem;
    }

    .caller-avatar[b-9oeh7xmq65] {
        width: 55px;
        height: 55px;
    }

    .avatar-placeholder span[b-9oeh7xmq65] {
        font-size: 1.25rem;
    }

    .controls-grid[b-9oeh7xmq65] {
        gap: 1rem;
        max-width: 280px;
    }

    .btn-icon[b-9oeh7xmq65] {
        width: 60px;
        height: 60px;
    }

    .btn-icon i[b-9oeh7xmq65] {
        font-size: 1.25rem;
    }

    .btn-label[b-9oeh7xmq65] {
        font-size: 0.75rem;
    }

    .keypad-btn[b-9oeh7xmq65] {
        width: 70px;
        height: 70px;
    }

    .key-number[b-9oeh7xmq65] {
        font-size: 1.75rem;
    }

    .end-call-btn[b-9oeh7xmq65] {
        width: 60px;
        height: 60px;
    }

    .end-call-btn i[b-9oeh7xmq65] {
        font-size: 1.25rem;
    }

    .end-call-section[b-9oeh7xmq65] {
        padding: 1.5rem 1.5rem 7rem;
        margin-bottom: 2rem;
    }
    
    .features-container[b-9oeh7xmq65] {
        padding: 1rem;
        padding-bottom: 5rem;
    }
}

@media (max-width: 480px) {
    .call-header[b-9oeh7xmq65] {
        padding: 1.5rem 1rem 1rem;
    }

    .caller-name[b-9oeh7xmq65] {
        font-size: 1.75rem;
    }

    .caller-avatar[b-9oeh7xmq65] {
        width: 50px;
        height: 50px;
    }

    .call-controls[b-9oeh7xmq65] {
        padding: 1rem;
    }

    .controls-grid[b-9oeh7xmq65] {
        gap: 0.75rem;
        max-width: 250px;
    }

    .btn-icon[b-9oeh7xmq65] {
        width: 55px;
        height: 55px;
    }

    .btn-icon i[b-9oeh7xmq65] {
        font-size: 1.1rem;
    }

    .btn-label[b-9oeh7xmq65] {
        font-size: 0.7rem;
    }

    .keypad[b-9oeh7xmq65] {
        max-width: 250px;
    }

    .keypad-row[b-9oeh7xmq65] {
        gap: 1rem;
    }

    .keypad-btn[b-9oeh7xmq65] {
        width: 60px;
        height: 60px;
    }

    .key-number[b-9oeh7xmq65] {
        font-size: 1.5rem;
    }

    .key-letters[b-9oeh7xmq65] {
        font-size: 0.55rem;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) {
    .call-header[b-9oeh7xmq65] {
        padding: 1rem 1.5rem;
    }

    .caller-name[b-9oeh7xmq65] {
        font-size: 1.5rem;
    }

    .caller-avatar[b-9oeh7xmq65] {
        width: 45px;
        height: 45px;
    }

    .call-controls[b-9oeh7xmq65] {
        padding: 0.5rem 1rem;
    }

    .controls-grid[b-9oeh7xmq65] {
        gap: 0.5rem;
    }

    .btn-icon[b-9oeh7xmq65] {
        width: 50px;
        height: 50px;
    }

    .btn-label[b-9oeh7xmq65] {
        font-size: 0.65rem;
    }

    .end-call-section[b-9oeh7xmq65] {
        padding: 1rem 1rem 4rem;
        margin-bottom: 1rem;
    }

    .end-call-btn[b-9oeh7xmq65] {
        width: 55px;
        height: 55px;
    }

    .keypad-overlay[b-9oeh7xmq65] {
        padding: 1rem;
    }

    .keypad-btn[b-9oeh7xmq65] {
        width: 55px;
        height: 55px;
    }

    .key-number[b-9oeh7xmq65] {
        font-size: 1.25rem;
    }
}

/* Hold to Group Button Section */
.hold-to-group-section[b-9oeh7xmq65] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0 2rem;
    margin-bottom: 1rem;
}

.hold-to-group-btn[b-9oeh7xmq65] {
    width: 100%;
    max-width: 350px;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    border: 2px solid rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.hold-to-group-btn:hover[b-9oeh7xmq65] {
    border-color: rgba(59, 130, 246, 0.6);
    background: rgba(59, 130, 246, 0.2);
}

.hold-to-group-btn:active[b-9oeh7xmq65],
.hold-to-group-btn.active[b-9oeh7xmq65] {
    border-color: rgba(34, 197, 94, 0.8);
    background: rgba(34, 197, 94, 0.3);
    color: #22c55e;
    transform: scale(0.98);
}

.hold-btn-content[b-9oeh7xmq65] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.hold-btn-content i[b-9oeh7xmq65] {
    font-size: 1.25rem;
}

.grouping-indicator[b-9oeh7xmq65] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #22c55e;
    opacity: 0.9;
}

.grouping-indicator i[b-9oeh7xmq65] {
    font-size: 0.5rem;
}

/* Mobile adjustments for hold-to-group */
@media (max-width: 767px) {
    .hold-to-group-section[b-9oeh7xmq65] {
        padding: 0 1.5rem;
    }
    
    .hold-to-group-btn[b-9oeh7xmq65] {
        padding: 0.875rem 1.25rem;
    }
    
    .hold-btn-content[b-9oeh7xmq65] {
        font-size: 0.9rem;
    }
    
    .hold-btn-content i[b-9oeh7xmq65] {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .hold-to-group-section[b-9oeh7xmq65] {
        padding: 0 1rem;
    }
    
    .hold-to-group-btn[b-9oeh7xmq65] {
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
    }
    
    .hold-btn-content[b-9oeh7xmq65] {
        font-size: 0.85rem;
        gap: 0.5rem;
    }
    
    .hold-btn-content i[b-9oeh7xmq65] {
        font-size: 1rem;
    }
    
    .grouping-indicator[b-9oeh7xmq65] {
        font-size: 0.75rem;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) {
    .hold-to-group-section[b-9oeh7xmq65] {
        padding: 0 1rem;
        margin-bottom: 0.5rem;
    }
    
    .hold-to-group-btn[b-9oeh7xmq65] {
        padding: 0.5rem 1rem;
    }
    
    .hold-btn-content[b-9oeh7xmq65] {
        font-size: 0.8rem;
    }
    
    .grouping-indicator[b-9oeh7xmq65] {
        display: none;
    }
}

/* Custom scrollbar for feature panels */
.ai-responses[b-9oeh7xmq65]::-webkit-scrollbar,
.transcription-display[b-9oeh7xmq65]::-webkit-scrollbar,
.call-log-display[b-9oeh7xmq65]::-webkit-scrollbar,
.features-panel[b-9oeh7xmq65]::-webkit-scrollbar {
    width: 6px;
}

.ai-responses[b-9oeh7xmq65]::-webkit-scrollbar-track,
.transcription-display[b-9oeh7xmq65]::-webkit-scrollbar-track,
.call-log-display[b-9oeh7xmq65]::-webkit-scrollbar-track,
.features-panel[b-9oeh7xmq65]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.ai-responses[b-9oeh7xmq65]::-webkit-scrollbar-thumb,
.transcription-display[b-9oeh7xmq65]::-webkit-scrollbar-thumb,
.call-log-display[b-9oeh7xmq65]::-webkit-scrollbar-thumb,
.features-panel[b-9oeh7xmq65]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.ai-responses[b-9oeh7xmq65]::-webkit-scrollbar-thumb:hover,
.transcription-display[b-9oeh7xmq65]::-webkit-scrollbar-thumb:hover,
.call-log-display[b-9oeh7xmq65]::-webkit-scrollbar-thumb:hover,
.features-panel[b-9oeh7xmq65]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}
/* /Components/Pages/Reminders.razor.rz.scp.css */
/* Reminders Container */
.reminders-container[b-5h1vb99dhq] {
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--bg-color);
    overflow: hidden;
}

/* Sidebar */
.reminders-sidebar[b-5h1vb99dhq] {
    width: 380px;
    min-width: 380px;
    height: 100%;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(59, 130, 246, 0.2);
    overflow: hidden;
}

[data-theme="light"] .reminders-sidebar[b-5h1vb99dhq] {
    background: rgba(255, 255, 255, 0.9);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-header[b-5h1vb99dhq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: 44px;
}

.sidebar-title[b-5h1vb99dhq] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0;
}

[data-theme="light"] .sidebar-title[b-5h1vb99dhq] {
    color: #1e293b;
}

.sidebar-spacer[b-5h1vb99dhq] {
    flex: 1;
}

.edit-btn[b-5h1vb99dhq] {
    background: none;
    border: none;
    color: #007AFF;
    font-size: 17px;
    cursor: pointer;
    padding: 8px;
}

/* Search Box */
.search-box[b-5h1vb99dhq] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    margin: 0 16px 16px;
    gap: 8px;
}

[data-theme="light"] .search-box[b-5h1vb99dhq] {
    background: rgba(0, 0, 0, 0.05);
}

.search-box i[b-5h1vb99dhq] {
    color: #64748b;
    font-size: 14px;
}

.search-box input[b-5h1vb99dhq] {
    flex: 1;
    border: none;
    background: none;
    font-size: 17px;
    color: #e2e8f0;
    outline: none;
}

[data-theme="light"] .search-box input[b-5h1vb99dhq] {
    color: #1e293b;
}

.search-box input[b-5h1vb99dhq]::placeholder {
    color: #64748b;
}

/* Summary Cards */
.summary-cards[b-5h1vb99dhq] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px 20px;
}

.summary-card[b-5h1vb99dhq] {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .summary-card[b-5h1vb99dhq] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.summary-card:hover[b-5h1vb99dhq] {
    transform: scale(1.02);
}

.summary-card.selected[b-5h1vb99dhq] {
    box-shadow: 0 0 0 2px #007AFF;
}

.summary-icon[b-5h1vb99dhq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    margin-bottom: 8px;
}

.today-icon[b-5h1vb99dhq] {
    background: #007AFF;
}

.scheduled-icon[b-5h1vb99dhq] {
    background: #FF3B30;
}

.all-icon[b-5h1vb99dhq] {
    background: #8E8E93;
}

.flagged-icon[b-5h1vb99dhq] {
    background: #FF9500;
}

.summary-count[b-5h1vb99dhq] {
    font-size: 28px;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1;
}

[data-theme="light"] .summary-count[b-5h1vb99dhq] {
    color: #1e293b;
}

.summary-label[b-5h1vb99dhq] {
    font-size: 15px;
    color: #94a3b8;
    margin-top: 4px;
}

/* Lists Section */
.lists-section[b-5h1vb99dhq] {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

.section-title[b-5h1vb99dhq] {
    font-size: 22px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 12px;
}

[data-theme="light"] .section-title[b-5h1vb99dhq] {
    color: #1e293b;
}

.lists-container[b-5h1vb99dhq] {
    background: rgba(30, 41, 59, 0.85);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .lists-container[b-5h1vb99dhq] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.list-item[b-5h1vb99dhq] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    gap: 12px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    transition: background 0.15s ease;
}

[data-theme="light"] .list-item[b-5h1vb99dhq] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.list-item:last-child[b-5h1vb99dhq] {
    border-bottom: none;
}

.list-item:hover[b-5h1vb99dhq] {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .list-item:hover[b-5h1vb99dhq] {
    background: rgba(0, 0, 0, 0.04);
}

.list-item.selected[b-5h1vb99dhq] {
    background: rgba(0, 122, 255, 0.2);
}

.list-icon[b-5h1vb99dhq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}

.list-info[b-5h1vb99dhq] {
    flex: 1;
    min-width: 0;
}

.list-name[b-5h1vb99dhq] {
    display: block;
    font-size: 17px;
    color: #e2e8f0;
    font-weight: 400;
}

[data-theme="light"] .list-name[b-5h1vb99dhq] {
    color: #1e293b;
}

.list-shared[b-5h1vb99dhq] {
    display: block;
    font-size: 13px;
    color: #94a3b8;
    margin-top: 2px;
}

.list-count[b-5h1vb99dhq] {
    font-size: 17px;
    color: #94a3b8;
    margin-right: 4px;
}

.list-chevron[b-5h1vb99dhq] {
    color: #64748b;
    font-size: 14px;
}

/* Sidebar Footer */
.sidebar-footer[b-5h1vb99dhq] {
    padding: 16px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .sidebar-footer[b-5h1vb99dhq] {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.add-list-btn[b-5h1vb99dhq] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #007AFF;
    font-size: 17px;
    cursor: pointer;
    padding: 8px 0;
}

.add-list-btn i[b-5h1vb99dhq] {
    font-size: 20px;
}

/* Detail Panel */
.reminders-detail[b-5h1vb99dhq] {
    flex: 1;
    height: 100%;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-theme="light"] .reminders-detail[b-5h1vb99dhq] {
    background: rgba(241, 245, 249, 0.8);
}

.detail-header[b-5h1vb99dhq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: 44px;
}

.back-btn[b-5h1vb99dhq] {
    display: none;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #007AFF;
    font-size: 17px;
    cursor: pointer;
    padding: 8px 0;
}

.back-btn i[b-5h1vb99dhq] {
    font-size: 14px;
}

.more-btn[b-5h1vb99dhq] {
    background: none;
    border: none;
    color: #007AFF;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
}

/* List Title Section */
.list-title-section[b-5h1vb99dhq] {
    padding: 0 24px 16px;
}

.list-title[b-5h1vb99dhq] {
    font-size: 34px;
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
    color: #e2e8f0;
}

[data-theme="light"] .list-title[b-5h1vb99dhq] {
    color: #1e293b;
}

.shared-info[b-5h1vb99dhq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 15px;
    color: #94a3b8;
}

.shared-avatars[b-5h1vb99dhq] {
    display: flex;
}

.shared-avatars img[b-5h1vb99dhq] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(15, 23, 42, 0.5);
    margin-left: -8px;
}

[data-theme="light"] .shared-avatars img[b-5h1vb99dhq] {
    border: 2px solid rgba(241, 245, 249, 0.8);
}

.shared-avatars img:first-child[b-5h1vb99dhq] {
    margin-left: 0;
}

/* Reminders List */
.reminders-list[b-5h1vb99dhq] {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px;
}

.reminder-item[b-5h1vb99dhq] {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    gap: 12px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .reminder-item[b-5h1vb99dhq] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.reminder-item.completed .reminder-title[b-5h1vb99dhq] {
    text-decoration: line-through;
    color: #64748b;
}

.reminder-checkbox[b-5h1vb99dhq] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: all 0.15s ease;
}

.reminder-checkbox:hover[b-5h1vb99dhq] {
    opacity: 0.8;
}

.reminder-checkbox.checked[b-5h1vb99dhq] {
    background: currentColor;
    color: #fff;
}

.reminder-checkbox.checked i[b-5h1vb99dhq] {
    font-size: 12px;
}

.reminder-content[b-5h1vb99dhq] {
    flex: 1;
    min-width: 0;
}

.reminder-title[b-5h1vb99dhq] {
    display: block;
    font-size: 17px;
    color: #e2e8f0;
    word-break: break-word;
}

[data-theme="light"] .reminder-title[b-5h1vb99dhq] {
    color: #1e293b;
}

.reminder-due[b-5h1vb99dhq] {
    display: block;
    font-size: 14px;
    color: #94a3b8;
    margin-top: 2px;
}

.reminder-due.overdue[b-5h1vb99dhq] {
    color: #FF3B30;
}

.reminder-notes[b-5h1vb99dhq] {
    display: block;
    font-size: 14px;
    color: #94a3b8;
    margin-top: 4px;
    word-break: break-word;
}

.reminder-list-tag[b-5h1vb99dhq] {
    display: inline-block;
    font-size: 12px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 6px;
}

[data-theme="light"] .reminder-list-tag[b-5h1vb99dhq] {
    background: rgba(0, 0, 0, 0.06);
}

.reminder-flag[b-5h1vb99dhq] {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 4px;
}

/* New Reminder Button */
.new-reminder-btn[b-5h1vb99dhq] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
    padding: 16px 24px;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    color: #94a3b8;
}

[data-theme="light"] .new-reminder-btn[b-5h1vb99dhq] {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: #64748b;
}

.new-reminder-btn i[b-5h1vb99dhq] {
    font-size: 22px;
    color: #007AFF;
}

/* No List Selected */
.no-list-selected[b-5h1vb99dhq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    text-align: center;
    padding: 24px;
}

.no-list-selected .welcome-icon[b-5h1vb99dhq] {
    width: 80px;
    height: 80px;
    background: rgba(30, 41, 59, 0.85);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .no-list-selected .welcome-icon[b-5h1vb99dhq] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.no-list-selected .mini-dots[b-5h1vb99dhq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.no-list-selected .mini-dot[b-5h1vb99dhq] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.no-list-selected .mini-dot.blue[b-5h1vb99dhq] {
    background: #007AFF;
}

.no-list-selected .mini-dot.orange[b-5h1vb99dhq] {
    background: #FF9500;
}

.no-list-selected .mini-dot.red[b-5h1vb99dhq] {
    background: #FF3B30;
}

.no-list-selected h2[b-5h1vb99dhq] {
    font-size: 28px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 8px;
}

[data-theme="light"] .no-list-selected h2[b-5h1vb99dhq] {
    color: #1e293b;
}

.no-list-selected p[b-5h1vb99dhq] {
    font-size: 17px;
    margin: 0;
}

/* No Reminders */
.no-reminders[b-5h1vb99dhq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #94a3b8;
    text-align: center;
}

.no-reminders i[b-5h1vb99dhq] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-reminders p[b-5h1vb99dhq] {
    font-size: 17px;
    margin: 0;
}

/* Dialog Overlay */
.dialog-overlay[b-5h1vb99dhq] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-5h1vb99dhq 0.2s ease;
}

@keyframes fadeIn-b-5h1vb99dhq {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog-content[b-5h1vb99dhq] {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 14px;
    width: 90%;
    max-width: 400px;
    overflow: hidden;
    animation: slideUp-b-5h1vb99dhq 0.3s ease;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .dialog-content[b-5h1vb99dhq] {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

@keyframes slideUp-b-5h1vb99dhq {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.dialog-header[b-5h1vb99dhq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .dialog-header[b-5h1vb99dhq] {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dialog-header h3[b-5h1vb99dhq] {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    color: #e2e8f0;
}

[data-theme="light"] .dialog-header h3[b-5h1vb99dhq] {
    color: #1e293b;
}

.dialog-cancel[b-5h1vb99dhq],
.dialog-done[b-5h1vb99dhq] {
    background: none;
    border: none;
    font-size: 17px;
    cursor: pointer;
    padding: 4px 8px;
}

.dialog-cancel[b-5h1vb99dhq] {
    color: #007AFF;
}

.dialog-done[b-5h1vb99dhq] {
    color: #007AFF;
    font-weight: 600;
}

.dialog-done:disabled[b-5h1vb99dhq] {
    color: #64748b;
    cursor: not-allowed;
}

.dialog-body[b-5h1vb99dhq] {
    padding: 16px;
}

.reminder-title-input[b-5h1vb99dhq],
.list-name-input[b-5h1vb99dhq] {
    width: 100%;
    border: none;
    font-size: 17px;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    outline: none;
    margin-bottom: 12px;
}

[data-theme="light"] .reminder-title-input[b-5h1vb99dhq],
[data-theme="light"] .list-name-input[b-5h1vb99dhq] {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.05);
}

.reminder-title-input[b-5h1vb99dhq]::placeholder,
.list-name-input[b-5h1vb99dhq]::placeholder {
    color: #64748b;
}

.reminder-notes-input[b-5h1vb99dhq] {
    width: 100%;
    border: none;
    font-size: 15px;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    outline: none;
    resize: none;
    min-height: 80px;
    margin-bottom: 12px;
}

[data-theme="light"] .reminder-notes-input[b-5h1vb99dhq] {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.05);
}

.reminder-notes-input[b-5h1vb99dhq]::placeholder {
    color: #64748b;
}

.reminder-options[b-5h1vb99dhq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reminder-option[b-5h1vb99dhq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
}

[data-theme="light"] .reminder-option[b-5h1vb99dhq] {
    background: rgba(0, 0, 0, 0.05);
}

.reminder-option span[b-5h1vb99dhq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    color: #e2e8f0;
}

[data-theme="light"] .reminder-option span[b-5h1vb99dhq] {
    color: #1e293b;
}

.reminder-option i[b-5h1vb99dhq] {
    color: #64748b;
}

.reminder-option input[type="date"][b-5h1vb99dhq] {
    border: none;
    background: none;
    font-size: 17px;
    color: #007AFF;
    cursor: pointer;
}

.reminder-option input[type="checkbox"][b-5h1vb99dhq] {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.color-picker[b-5h1vb99dhq] {
    margin-top: 16px;
}

.color-label[b-5h1vb99dhq] {
    display: block;
    font-size: 15px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.color-options[b-5h1vb99dhq] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.color-option[b-5h1vb99dhq] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.color-option:hover[b-5h1vb99dhq] {
    transform: scale(1.1);
}

.color-option.selected[b-5h1vb99dhq] {
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.95), 0 0 0 5px currentColor;
}

[data-theme="light"] .color-option.selected[b-5h1vb99dhq] {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 5px currentColor;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .reminders-container[b-5h1vb99dhq] {
        flex-direction: column;
    }

    .reminders-sidebar[b-5h1vb99dhq] {
        width: 100%;
        min-width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        transition: transform 0.3s ease;
    }

    .reminders-sidebar.list-selected[b-5h1vb99dhq] {
        transform: translateX(-100%);
    }

    .reminders-detail[b-5h1vb99dhq] {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

    .reminders-detail.has-list[b-5h1vb99dhq] {
        transform: translateX(0);
    }

    .back-btn[b-5h1vb99dhq] {
        display: flex;
    }

    .summary-cards[b-5h1vb99dhq] {
        grid-template-columns: repeat(2, 1fr);
    }

    .list-title[b-5h1vb99dhq] {
        font-size: 28px;
    }
}

/* Custom Scrollbar */
.reminders-sidebar[b-5h1vb99dhq]::-webkit-scrollbar,
.reminders-list[b-5h1vb99dhq]::-webkit-scrollbar {
    width: 6px;
}

.reminders-sidebar[b-5h1vb99dhq]::-webkit-scrollbar-track,
.reminders-list[b-5h1vb99dhq]::-webkit-scrollbar-track {
    background: transparent;
}

.reminders-sidebar[b-5h1vb99dhq]::-webkit-scrollbar-thumb,
.reminders-list[b-5h1vb99dhq]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.reminders-sidebar[b-5h1vb99dhq]::-webkit-scrollbar-thumb:hover,
.reminders-list[b-5h1vb99dhq]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .reminders-sidebar[b-5h1vb99dhq]::-webkit-scrollbar-thumb,
[data-theme="light"] .reminders-list[b-5h1vb99dhq]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}