.quote-container {
    font-style: italic;
    color: rgba(255, 255, 255, 1); /* Increased opacity to 1 for brighter text */
    font-size: 24px; /* Increased from 16px for better visibility */
    text-align: center;
    margin-bottom: 5px; /* Keep compact spacing */
    min-height: 32px; /* Increased to accommodate larger font */
    transition: opacity 0.8s ease-in-out;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); /* Added subtle glow effect */
}

/* Video Background Styles - Disabled (Coming Soon) */
/* Video background CSS removed - functionality disabled */

/* ===== FUTURISTIC AI MODAL STYLES ===== */

/* AI Button in Taskbar */
.ai-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}

.ai-btn .ai-icon {
    transition: all 0.3s ease;
}

.ai-btn:hover .ai-icon {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(0, 212, 255, 0.6));
}

/* AI Modal */
.ai-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-modal.show {
    opacity: 1;
    visibility: visible;
}

/* Prevent content jump during animation */
.ai-modal .ai-modal-content {
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-modal.show .ai-modal-content {
    transform: scale(1);
}

.ai-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ai-modal-container {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    background: linear-gradient(120deg, 
        rgba(18, 22, 32, 0.75) 0%, 
        rgba(22, 26, 36, 0.75) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: modalSlideIn 0.4s ease-out;
}

@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(40px);
    }
    100% {
        opacity: 1;
        transform: scale(0.9) translateY(20px);
    }
}

.ai-modal.show .ai-modal-container {
    transform: scale(1) translateY(0);
    animation: modalSlideIn 0.4s ease-out;
}

/* Modal Header */
.ai-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(120deg,
        rgba(60, 60, 70, 0.4) 0%,
        rgba(38, 38, 44, 0.4) 100%);
    transition: all 0.3s ease;
    animation: headerFadeIn 0.5s ease-out 0.1s both;
}

.ai-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-header-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ai-new-chat-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.ai-new-chat-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.ai-new-chat-btn:active {
    transform: scale(0.95);
}

.ai-usage-info {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.ai-usage-info.warning {
    color: #f59e0b;
}

.ai-usage-info.danger {
    color: #ef4444;
}

@keyframes headerFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-title {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
}

.ai-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: buttonFadeIn 0.6s ease-out 0.2s both;
}

@keyframes buttonFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.ai-close-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Modal Content */
.ai-modal-content {
    padding: 15px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Tab Content */
.ai-tab-content {
    display: none;
}

.ai-tab-content.active {
    display: block;
}

/* Generate Button */
.ai-generate-btn {
    width: 100%;
    padding: 15px 25px;
    background: linear-gradient(135deg, #00d4ff, #7c3aed, #ec4899);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.ai-generate-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.ai-generate-btn:hover::before {
    left: 100%;
}

.ai-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
}

.ai-generate-btn:active {
    transform: translateY(0);
}

.ai-generate-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

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

/* AI Confirmation Dialog */
.ai-confirmation-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dialogFadeIn 0.3s ease-out;
}

.ai-dialog-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
}

.ai-dialog-container {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: linear-gradient(120deg,
        rgba(18, 22, 32, 0.95) 0%,
        rgba(22, 26, 36, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    animation: dialogSlideIn 0.3s ease-out;
}

.ai-dialog-header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-dialog-header h3 {
    margin: 0;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.ai-dialog-content {
    padding: 20px;
    text-align: center;
}

.ai-dialog-content p {
    margin: 0 0 12px 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.ai-dialog-buttons {
    display: flex;
    gap: 12px;
    padding: 15px 20px 20px;
    justify-content: center;
}

.ai-dialog-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.ai-dialog-btn-danger {
    background: linear-gradient(120deg, #ef4444, #dc2626);
    color: white;
}

.ai-dialog-btn-danger:hover {
    background: linear-gradient(120deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.ai-dialog-btn-secondary {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ai-dialog-btn-secondary:hover {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

@keyframes dialogFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes dialogSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* AI Chat Interface */
.ai-chat-container {
    display: flex;
    flex-direction: column;
    height: 450px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    background: linear-gradient(120deg, 
        rgba(18, 22, 32, 0.5) 0%, 
        rgba(22, 26, 36, 0.5) 100%);
    overflow: hidden;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: chatSlideIn 0.7s ease-out 0.3s both;
}

@keyframes chatSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    scroll-behavior: smooth;
}

.ai-welcome-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d4ff, #7c3aed, #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.ai-message-content {
    background: linear-gradient(120deg, 
        rgba(18, 22, 32, 0.6) 0%, 
        rgba(22, 26, 36, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 15px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    max-width: 80%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: messageSlideIn 0.5s ease-out;
}

@keyframes messageSlideIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ai-message-content p {
    margin: 0 0 10px 0;
}

.ai-message-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.ai-message-content li {
    margin: 5px 0;
    color: rgba(255, 255, 255, 0.9);
}

.ai-message-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.ai-message-content strong {
    color: #00d4ff;
    font-weight: 600;
}

.ai-message-content em {
    color: #7c3aed;
    font-style: italic;
}

.ai-message-content code {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Source Code Pro', monospace;
    font-size: 13px;
    color: #00d4ff;
}

.user-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-end;
    margin-left: auto;
}

.user-message .ai-message-content {
    background: linear-gradient(120deg, 
        rgba(168, 213, 255, 0.3) 0%, 
        rgba(109, 178, 255, 0.3) 100%);
    border: 1px solid rgba(168, 213, 255, 0.4);
    order: -1;
    animation: userMessageSlideIn 0.4s ease-out;
}

@keyframes userMessageSlideIn {
    0% {
        opacity: 0;
        transform: translateX(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.ai-response-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ai-typing-indicator {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ai-typing-dots {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    gap: 4px;
    align-items: center;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: #00d4ff;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Chat Input */
.ai-chat-input-container {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    background: linear-gradient(120deg, 
        rgba(18, 22, 32, 0.4) 0%, 
        rgba(22, 26, 36, 0.4) 100%);
    animation: inputSlideIn 0.8s ease-out 0.4s both;
}

@keyframes inputSlideIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-chat-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.ai-chat-input {
    flex: 1;
    background: linear-gradient(120deg, 
        rgba(18, 22, 32, 0.7) 0%, 
        rgba(22, 26, 36, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 12px 15px;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: all 0.3s ease;
    min-height: 44px;
    max-height: 120px;
}

.ai-chat-input:focus {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
    background: linear-gradient(120deg, 
        rgba(18, 22, 32, 0.8) 0%, 
        rgba(22, 26, 36, 0.8) 100%);
    transform: scale(1.02);
}

.ai-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.ai-send-btn {
    background: linear-gradient(120deg, 
        rgba(168, 213, 255, 0.8) 0%, 
        rgba(109, 178, 255, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #18223a;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(168, 213, 255, 0.2);
    animation: buttonPulse 2s ease-in-out infinite;
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(168, 213, 255, 0.2);
    }
    50% {
        box-shadow: 0 4px 20px rgba(168, 213, 255, 0.3);
    }
}

.ai-send-btn:hover:not(:disabled) {
    transform: scale(1.1);
    background: linear-gradient(120deg, 
        rgba(168, 213, 255, 1) 0%, 
        rgba(109, 178, 255, 1) 100%);
    box-shadow: 0 6px 20px rgba(168, 213, 255, 0.4);
    animation: none;
}

.ai-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.ai-char-count {
    text-align: right;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 5px;
    transition: color 0.3s ease;
}

.ai-char-count.warning {
    color: #f59e0b;
}

.ai-char-count.danger {
    color: #ef4444;
}

/* Scrollbar for chat messages */
.ai-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #00d4ff, #7c3aed);
    border-radius: 3px;
}

.ai-chat-messages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #00b8e6, #6d28d9);
}

/* Responsive Design */
@media (max-width: 768px) {
    .ai-modal-container {
        width: 95%;
        max-height: 90vh;
    }
    
    .ai-modal-header {
        padding: 15px 20px;
    }
    
    .ai-modal-content {
        padding: 20px;
    }
    
    .ai-title {
        font-size: 20px;
    }
    
    .ai-tabs {
        flex-direction: column;
        gap: 5px;
    }
    
    .ai-tab {
        padding: 10px 15px;
        font-size: 13px;
    }
}

/* Scrollbar Styling */
.ai-modal-content::-webkit-scrollbar {
    width: 6px;
}

.ai-modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.ai-modal-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #00d4ff, #7c3aed);
    border-radius: 3px;
}

.ai-modal-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #00b8e6, #6d28d9);
}

/* ===== END AI MODAL STYLES ===== */

/* Ensure body has proper stacking context */
body {
    position: relative;
    background-color: #000000; /* Black background to prevent white flash before background images load */
    
    /* Smooth transitions for background changes */
    transition: background-image 0.8s ease-in-out, 
                background-color 0.8s ease-in-out,
                background-size 0.8s ease-in-out,
                background-position 0.8s ease-in-out;
}

/* Rotating image styles */
.rotating-image-container {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    cursor: move; /* Indicate draggable */
    user-select: none; /* Prevent text selection during drag */
}

.rotating-image {
    opacity: 0.8;
    transition: opacity 0.5s ease-in-out, max-width 0.3s ease, max-height 0.3s ease;
    display: none; /* Hide all images initially */
    max-width: 120px; /* Default width - will be controlled by JS */
    max-height: 120px; /* Default height - will be controlled by JS */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Add rounded corners */
}

.rotating-image.active {
    display: block; /* Show only active image */
}



/* Ambient sounds styles moved to css/ambient-sounds.css */

/* Styles for Auto-Hide Controls */
.auto-hide {
    transition: opacity 0.5s ease-in-out;
}
.controls-hidden {
    opacity: 0 !important; /* Use !important to override potential inline styles if needed */
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Styles for Upload Background Button */
/* Live Wallpapers Section - Coming Soon */
.coming-soon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 40px 20px;
}

.coming-soon-content {
    text-align: center;
    max-width: 400px;
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.coming-soon-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.8;
}

.coming-soon-content h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.coming-soon-content p {
    color: #ccc;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
    font-weight: 500;
}

.coming-soon-description {
    color: #aaa !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.5;
    margin: 0 !important;
}

/* Live wallpaper styles removed - functionality disabled */

/* Skeleton Placeholder Styles */
.skeleton-placeholder {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.skeleton-image {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.skeleton-text {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* AI Notification Styles */
.ai-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    animation: slideInRight 0.3s ease-out;
    max-width: 350px;
    word-wrap: break-word;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-notification-info {
    background: linear-gradient(120deg, #3b82f6, #2563eb);
    color: white;
}

.ai-notification-error {
    background: linear-gradient(120deg, #ef4444, #dc2626);
    color: white;
}

.ai-notification-success {
    background: linear-gradient(120deg, #10b981, #059669);
    color: white;
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* reCAPTCHA v3 Badge Styling */
.grecaptcha-badge {
    opacity: 0.6 !important;
    transform: scale(0.8) !important;
    transform-origin: bottom left !important;
}

.grecaptcha-badge:hover {
    opacity: 1 !important;
}

/* Error Notification Styles */
.background-error-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(220, 53, 69, 0.95);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideInRight 0.3s ease-out;
    max-width: 300px;
    word-wrap: break-word;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Loading Container Styles */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.7);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

.loading-text {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Background Selection Menu Styles */
#background-selection-menu {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-height: 80vh;
    background-color: rgba(30, 30, 40, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 950;
    padding: 20px;
    overflow-y: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: white;
}

.background-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.background-menu-header h2 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 500;
    color: #eee;
}

.close-menu-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.close-menu-btn:hover {
    color: white;
}

.background-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 15px;
    padding: 5px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.background-grid::-webkit-scrollbar {
    width: 6px;
}

.background-grid::-webkit-scrollbar-track {
    background: transparent;
}

.background-grid::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.grid-item {
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
    min-width: 100px;
    height: auto;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    transition: opacity 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.grid-item.active {
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5);
}

/* Removed: .grid-item img { display: none; } - Now using actual img elements */

.custom-upload-option {
    text-align: center;
    margin-top: 15px;
}

#menu-custom-upload-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

#menu-custom-upload-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

#menu-custom-upload-btn:active {
    transform: translateY(0);
}

.upload-bg-btn-inline {
    background: none;
    border: none;
    font-size: 20px; /* Match other button size */
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 5px;
    margin-left: 10px; /* Space from other buttons */
    vertical-align: middle; /* Align with other buttons */
    transition: color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
    opacity: 0.7;
}

.upload-bg-btn-inline:hover {
    color: white;
    opacity: 1;
}

.upload-bg-btn-inline:active {
    transform: scale(0.9);
}

/* Styles for Control Buttons (Zoom and Fullscreen) */
.control-btn-inline {
    background: none;
    border: none;
    font-size: 18px; /* Slightly smaller font */
    color: rgba(255, 255, 255, 0.4); /* Reduced opacity */
    cursor: pointer;
    padding: 4px; /* Reduced padding */
    margin-left: 8px; /* Reduced margin */
    vertical-align: middle;
    transition: color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
    opacity: 0.5; /* Lower default opacity */
}

.control-btn-inline:hover {
    color: rgba(255, 255, 255, 0.7); /* Less bright on hover */
    opacity: 0.7; /* Still subtle on hover */
}

.control-btn-inline:active {
    transform: scale(0.9);
}

/* Ensure body background covers correctly */
body {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Keep background fixed during scroll */
}

/* Timer styles moved to css/timer-styles.css to eliminate conflicts */

/* Style the Pomodoro button */
.pomodoro-style-btn {
    background-color: #e57373; /* A soft red color */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.1s ease;
    cursor: pointer; /* Add cursor pointer */
}

.pomodoro-style-btn:hover {
    background-color: #ef9a9a; /* Lighter red on hover */
    transform: translateY(-1px); /* Slight lift on hover */
}

.pomodoro-style-btn:active {
    background-color: #d32f2f; /* Darker red on click */
    transform: translateY(0px) scale(0.98);
}

/* Vertical Progress Bar and Trophy Styles */
.progress-container {
    position: fixed; /* Changed to fixed for viewport positioning */
    top: 20px;
    right: 20px;
    height: 300px; /* Increased height */
    width: 20px; /* Decreased width */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10; /* Ensure it's above most other elements */
}

.trophy-container {
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.trophy {
    width: 55px;
    height: 55px;
    opacity: 0.3;
    filter: grayscale(100%) brightness(0.8);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center bottom;
}

.trophy.active {
    opacity: 1;
    filter: grayscale(0%) brightness(1.2);
    transform: scale(1.2);
    animation: trophy-celebration 2s ease-out forwards;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes trophy-celebration {
    0% {
        transform: scale(1) rotate(0deg);
        filter: grayscale(0%) brightness(1);
    }
    25% {
        transform: scale(1.3) rotate(-10deg);
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) brightness(1.3);
    }
    50% {
        transform: scale(1.4) rotate(10deg);
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)) brightness(1.4);
    }
    75% {
        transform: scale(1.3) rotate(-5deg);
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8)) brightness(1.3);
    }
    100% {
        transform: scale(1.35) rotate(0);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7)) brightness(1.35);
    }
}

/* Add sparkle effect when trophy is active */
.trophy.active::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(circle, transparent 0%, transparent 40%, rgba(255, 215, 0, 0.1) 60%, transparent 70%);
    background-size: 200% 200%;
    animation: sparkle 3s linear infinite;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: -1;
}

@keyframes sparkle {
    0% {
        transform: scale(0.5) rotate(0deg);
        opacity: 0;
        background-position: 0% 0%;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0;
        background-position: 100% 100%;
    }
}

.progress-bar-container {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    height: 100%;
    width: 18px; /* Increased width for better visibility */
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.1);
    position: relative;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Style for the segment separator lines */
.segment-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.3); /* More visible lines */
    z-index: 1; /* Place lines below the progress bar fill */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

.progress-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 12px;
    height: 0%; /* Initial height */
    transition: height 0.5s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    z-index: 2; /* Ensure fill is above lines */
    opacity: 1; /* Full opacity for vibrant colors */
    background-image: linear-gradient(to top, rgba(255,255,255,0.3), rgba(255,255,255,0.05));
    filter: saturate(1.4) brightness(1.1);
}

/* Different glow colors for each segment - more vibrant and majestic */
.progress-bar.segment-0 {
    background-color: #00c853; /* Majestic green */
    box-shadow: 0 0 20px rgba(0, 200, 83, 0.8), 0 0 8px rgba(0, 200, 83, 1) inset;
}

.progress-bar.segment-1 {
    background-color: #651fff; /* Vibrant violet */
    box-shadow: 0 0 20px rgba(101, 31, 255, 0.8), 0 0 8px rgba(101, 31, 255, 1) inset;
}

.progress-bar.segment-2 {
    background-color: #f50057; /* Metallic pink */
    box-shadow: 0 0 20px rgba(245, 0, 87, 0.8), 0 0 8px rgba(245, 0, 87, 1) inset;
}

.progress-bar.segment-3 {
    background-color: #2979ff; /* Electric blue */
    box-shadow: 0 0 20px rgba(41, 121, 255, 0.8), 0 0 8px rgba(41, 121, 255, 1) inset;
}

.progress-bar.segment-4 {
    background-color: #ff9100; /* Bright amber - approaching gold */
    box-shadow: 0 0 20px rgba(255, 145, 0, 0.8), 0 0 8px rgba(255, 145, 0, 1) inset;
}

.progress-bar.segment-5 {
    background-color: #ffd700; /* Radiant gold */
    box-shadow: 0 0 25px rgba(255, 215, 0, 1), 0 0 15px rgba(255, 215, 0, 1) inset;
    animation: golden-pulse 1.2s infinite alternate;
}

@keyframes golden-pulse {
    from {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 15px rgba(255, 215, 0, 1) inset;
        filter: brightness(1);
    }
    to {
        box-shadow: 0 0 35px rgba(255, 215, 0, 1), 0 0 20px rgba(255, 215, 0, 1) inset;
        filter: brightness(1.2);
    }
}

/* Add before existing CSS styles */
/* Minimalistic Time Selector Styling */
/* Time Selector Container */
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
  }
.time-selector {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 5px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

/* Time Display Styling */
.time-display-container {
    position: relative;
}

.time-display {
    background: rgba(0, 0, 0, 0.8);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 1.4rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    min-width: 100px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s;
}

.time-display:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

.time-display:active {
    transform: translateY(-1px);
}

/* Colon spacing in time-display - keep digits close, space around colon */
.time-display {
    letter-spacing: 0; /* Keep digits close together */
    font-variant-numeric: tabular-nums; /* Consistent digit spacing */
}

/* Add spacing specifically around the colon */
.time-display {
    text-align: center;
    /* Use a small amount of letter-spacing that mainly affects the colon */
    letter-spacing: 0.05em; /* Very small spacing that affects colon more than digits */
}

/* Time Picker Popup Styling */
.time-picker-popup {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    background: rgba(0, 0, 0, 0.95);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.time-picker-popup.visible {
    display: block;
    opacity: 1;
    pointer-events: all;
}

/* Add smooth transition for main display when time changes */
#display-hours, #display-minutes, #display-seconds {
    transition: color 0.3s ease;
}

/* Smooth scrolling for time selector with momentum */
/* Note: scroll-behavior controlled by JavaScript to prevent juggling on first show */

/* Header removed for compactness */
.picker-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    position: relative;
    height: 120px;
}

/* Create the selection highlight */
.picker-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    height: 40px;
    transform: translateY(-50%);
    background-color: rgba(168, 213, 255, 0.15);
    border-top: 1px solid rgba(168, 213, 255, 0.3);
    border-bottom: 1px solid rgba(168, 213, 255, 0.3);
    pointer-events: none;
    z-index: 1;
    border-radius: 6px;
}

.colon-separator {
    font-size: 2em;
    font-weight: bold;
    color: rgba(168, 213, 255, 0.8);
    padding: 0 10px;
    align-self: center;
    text-shadow: 0 0 10px rgba(168, 213, 255, 0.3);
}

.time-column {
    width: 70px;
    height: 120px;
    overflow-y: scroll;
    overflow-x: hidden; /* Prevent horizontal scroll */
    scroll-snap-type: y mandatory;
    /* scroll-behavior controlled by JavaScript to prevent juggling on first show */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    position: relative;
    z-index: 2;
    transform: translate3d(0, 0, 0);
    /* Enhanced momentum scrolling for smoother feel */
    -webkit-overflow-scrolling: touch;
    /* Add momentum physics */
    overscroll-behavior: contain;
}

.time-column::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.time-column-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-item {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3em;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    scroll-snap-align: center;
    scroll-snap-stop: normal; /* Allow momentum scrolling */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Prevent overflow from scale transform */
    flex-shrink: 0;
}

.time-item.active {
    color: rgba(255, 255, 255, 0.95);
    font-weight: bold;
    transform: scale(1.2);
    text-shadow: 0 0 15px rgba(168, 213, 255, 0.8);
    /* Add a subtle glow effect */
    filter: brightness(1.1);
    /* Contain transform to prevent overflow */
    will-change: transform;
}

/* Hover effect for snappier interaction */
.time-item:hover:not(.active) {
    transform: scale(1.08);
    color: rgba(255, 255, 255, 0.8);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
}

/* Padding items for scrolling */
.time-item.padding {
    pointer-events: none;
    visibility: hidden;
}

/* Removed picker-actions styles as buttons are no longer needed */

/* Add styles for smoother transitions */
.picker-actions #set-time-btn:hover {
    color: rgba(168, 213, 255, 1);
    font-weight: bold;
}

.picker-actions #cancel-time-btn:hover {
    color: #ff8a8a;
}

/* Value changed animation */
@keyframes pulse-highlight {
    0% {
        border-color: rgba(168, 213, 255, 0.2);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(168, 213, 255, 0.1) inset;
    }
    50% {
        border-color: rgba(168, 213, 255, 0.4);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(168, 213, 255, 0.5) inset, 0 0 20px rgba(168, 213, 255, 0.5);
    }
    100% {
        border-color: rgba(168, 213, 255, 0.4);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(168, 213, 255, 0.2) inset;
    }
}

/* Animation for option selection */
.selector-group select option {
    background-color: rgba(30, 30, 30, 0.9);
    color: white;
}

@keyframes selectFade {
    from { opacity: 0.7; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* When an option is selected (applied via JS) */
.selector-group select.value-changed {
    animation: selectFade 0.4s ease-out;
}

/* NEW MODERN CONTROL PANEL STYLING */
.control-panel {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Further reduced from 8px */
    width: 100%;
    transition: opacity 0.5s ease-in-out;
    margin-top: 0; /* Removed margin at top */
}

.control-group {
    display: flex;
    justify-content: center;
    gap: 8px; /* Reduced from 12px */
    width: 100%;
}

.utility-group {
    display: flex;
    justify-content: center;
    gap: 6px; /* Reduced from 8px */
    padding-top: 5px; /* Reduced from 8px */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 3px; /* Reduced from 4px */
}

/* Primary control buttons (Start, Reset, etc.) */
.btn-primary {
    background-color: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px; /* Reduced from 8px */
    padding: 7px 12px; /* Reduced from 10px 16px */
    font-size: 13px; /* Reduced from 15px */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Reduced from 6px */
    min-width: 75px; /* Reduced from 85px */
}

.btn-primary:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-primary.start-btn {
    background-color: rgba(76, 175, 80, 0.2);
    border-color: rgba(76, 175, 80, 0.4);
}

.btn-primary.start-btn:hover {
    background-color: rgba(76, 175, 80, 0.3);
    border-color: rgba(76, 175, 80, 0.6);
}

.btn-primary.reset-btn {
    background-color: rgba(255, 87, 34, 0.2);
    border-color: rgba(255, 87, 34, 0.4);
}

.btn-primary.reset-btn:hover {
    background-color: rgba(255, 87, 34, 0.3);
    border-color: rgba(255, 87, 34, 0.6);
}

.btn-primary.mode-btn {
    background-color: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.4);
    min-width: 40px; /* Reduced from 50px */
    padding: 7px 9px; /* Reduced from 10px 14px */
}

.btn-primary.mode-btn:hover {
    background-color: rgba(33, 150, 243, 0.3);
    border-color: rgba(33, 150, 243, 0.6);
}

/* Secondary buttons (Pomodoro, Focus Report) */
.btn-secondary {
    background-color: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    padding: 4px 8px; /* Further reduced from 5px 10px */
    font-size: 11px; /* Further reduced from 12px */
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px; /* Further reduced from 4px */
}

.btn-secondary:hover {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

.btn-secondary.pomodoro-btn {
    background-color: rgba(233, 30, 99, 0.15);
    border-color: rgba(233, 30, 99, 0.3);
}

.btn-secondary.pomodoro-btn:hover {
    background-color: rgba(233, 30, 99, 0.25);
    border-color: rgba(233, 30, 99, 0.4);
}

/* Icon buttons */
.btn-icon {
    background-color: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px; /* Reduced from 6px */
    width: 30px; /* Reduced from 36px */
    height: 30px; /* Reduced from 36px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Reduced from 18px */
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background-color: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.btn-icon:active {
    transform: translateY(0) scale(0.95);
}

/* Clean styles for the focus report button in taskbar */
#progress-btn.btn-icon {
    transform: none !important;
}

#progress-btn.btn-icon:hover {
    transform: translateY(-1px) !important;
}

#progress-btn.btn-icon:active {
    transform: translateY(0) scale(0.95) !important;
}

/* Control icon styles */
.control-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Hide old buttons that we're replacing with the new design */
.progress-btn,
.upload-bg-btn-inline,
.control-btn-inline,
.pomodoro-style-btn {
    display: none !important;
}

/* Stopwatch mode indicator */
.mode-btn.stopwatch-mode,
.btn-primary.mode-btn.stopwatch-mode {
    background-color: rgba(156, 39, 176, 0.2);
    border-color: rgba(156, 39, 176, 0.4);
}

.mode-btn.stopwatch-mode:hover,
.btn-primary.mode-btn.stopwatch-mode:hover {
    background-color: rgba(156, 39, 176, 0.3);
    border-color: rgba(156, 39, 176, 0.6);
}

/* Settings popup styles */
.settings-popup {
    display: none;
    position: fixed;
    top: 45%; /* Move up slightly from center */
    right: 30px;
    transform: translateY(-50%);
    width: 350px;
    max-height: 85vh;
    background-color: rgba(22, 28, 40, 0.95);
    color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    padding: 20px;
    z-index: 1100;
    overflow-y: auto;
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
    backdrop-filter: blur(15px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.15, 1, 0.3, 1);
}

/* Hide scrollbar for WebKit browsers */
.settings-popup::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.settings-popup h2 {
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 25px;
    letter-spacing: 2px;
    color: rgba(120, 170, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid rgba(120, 170, 255, 0.3);
    padding-bottom: 10px;
}

.settings-section {
    margin-bottom: 24px;
}

.settings-section h3 {
    font-size: 1.1em;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.settings-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.setting-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.setting-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.setting-option input[type="radio"] {
    margin-right: 10px;
    accent-color: #a8d5ff;
}

/* Enhanced settings styles */
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: rgba(60, 100, 170, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-left: 3px solid rgba(120, 170, 255, 0.5);
}

.settings-header:hover {
    background: rgba(60, 100, 170, 0.25);
    border-left-color: rgba(120, 170, 255, 0.9);
    transform: translateX(2px);
}

.settings-header-active {
    background: rgba(60, 100, 170, 0.3);
    border-left-color: rgba(120, 170, 255, 1);
}

.settings-arrow {
    transition: transform 0.3s ease;
}

.settings-header-active .settings-arrow {
    transform: rotate(180deg);
}

.settings-content {
    padding: 18px;
    background: rgba(25, 35, 50, 0.6);
    border-radius: 8px;
    margin-top: 4px;
    margin-bottom: 20px;
    border: 1px solid rgba(60, 100, 170, 0.2);
    box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.2);
}

.settings-description {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 15px;
}

.settings-control {
    margin-bottom: 12px;
}

.settings-control-group {
    margin-bottom: 20px;
}

.settings-control-group label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.85);
}

/* Pomodoro Time Input Styles */
.time-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.time-input {
    width: 70px;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: rgba(30, 40, 60, 0.9);
    border: 1px solid rgba(120, 170, 255, 0.35);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95em;
    text-align: center;
    transition: all 0.2s ease;
}

.time-input:focus {
    outline: none;
    border-color: rgba(120, 170, 255, 0.8);
    box-shadow: 0 0 0 2px rgba(120, 170, 255, 0.2);
}

.time-input::-webkit-inner-spin-button,
.time-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.time-input-group span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    min-width: 16px;
    text-align: center;
}

.select-container {
    position: relative;
}

.settings-select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    background-color: rgba(30, 40, 60, 0.9);
    border: 1px solid rgba(120, 170, 255, 0.35);
    color: rgba(255, 255, 255, 0.95);
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0.5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.settings-select option {
    background-color: rgba(30, 40, 60, 0.95);
    color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    font-weight: 500;
}

.select-container:after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.7em;
    color: rgba(120, 170, 255, 0.9);
    background-color: rgba(30, 40, 60, 0.7);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 0 5px rgba(120, 170, 255, 0.3);
}

.settings-select:focus {
    outline: none;
    border-color: #78aaff;
    box-shadow: 0 0 0 3px rgba(120, 170, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
    background-color: rgba(30, 45, 70, 0.95);
}

.settings-select:hover {
    border-color: rgba(120, 170, 255, 0.6);
    background-color: rgba(35, 45, 65, 0.95);
}

.settings-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 85%;
    height: 8px;
    background: linear-gradient(to right, rgba(60, 100, 170, 0.7), rgba(120, 170, 255, 0.5));
    border-radius: 4px;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #78aaff;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.settings-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #78aaff;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
}

.settings-slider:focus {
    box-shadow: 0 0 0 2px rgba(168, 213, 255, 0.1);
}

.slider-with-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-value {
    width: 50px;
    text-align: center;
    background: rgba(60, 100, 170, 0.3);
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(120, 170, 255, 0.3);
}

.settings-note {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    padding: 8px 12px;
}

/* Button tooltip styles */
.btn-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    margin-bottom: 8px;
}

.btn-tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

.btn-icon:hover .btn-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Add styles for the new control box */
.control-box-taskbar {
position: fixed;
left: 50%;
bottom: 0;
transform: translateX(-50%);
z-index: 1000;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: linear-gradient(120deg, rgba(18,22,32,0.6) 0%, rgba(22,26,36,0.6) 100%);
box-shadow: 0 -6px 20px 0 rgba(0,0,0,0.2);
border-radius: 20px 20px 0 0;
padding: 8px 16px;
gap: 12px;
width: auto;
min-width: fit-content;
max-width: 90vw;
min-height: 60px;
backdrop-filter: blur(12px) saturate(1.1);
box-sizing: border-box;
}
.btn-icon:hover {
background: linear-gradient(120deg, rgba(60,60,70,0.99) 60%, rgba(38,38,44,0.97) 100%);
border-color: rgba(168,213,255,0.18);
transform: translateY(-1.5px) scale(1.045);
box-shadow: 0 4px 18px rgba(0,0,0,0.13);
}
.btn-icon:active {
background: linear-gradient(120deg, rgba(44,44,54,0.91) 60%, rgba(28,28,34,0.86) 100%);
border-color: rgba(168,213,255,0.10);
transform: scale(0.96);
box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}
.btn-icon .control-icon {
width: 19px;
height: 19px;
fill: currentColor;
transition: fill 0.18s cubic-bezier(.4,2,.3,1);
opacity: 0.98;
display: block;
}

/* Larger icons for friends and leaderboard buttons */
#friends-btn .control-icon,
#leaderboard-btn .control-icon {
width: 40px !important;
height: 40px !important;
}

/* Larger icon for study together button */
#study-together-btn .control-icon {
width: 42px !important;
height: 42px !important;
}

.btn-icon:focus-visible {
border-color: #a8d5ff;
box-shadow: 0 0 0 2px #a8d5ff55;
}
/* Progress/Focus Button Special Style */
.btn-progress {
margin-left: auto;
margin-right: 6px;
border-radius: 19px;
padding: 0 22px;
width: auto;
min-width: 44px;
height: 36px;
background: linear-gradient(90deg, #a8d5ff 0%, #6db2ff 100%);
color: #18223a;
font-weight: 600;
box-shadow: 0 2px 12px 0 rgba(168,213,255,0.17);
border: none;
transition: background 0.17s, box-shadow 0.17s, color 0.13s;
}
.btn-progress:hover {
background: linear-gradient(90deg, #6db2ff 0%, #a8d5ff 100%);
color: #111a2a;
box-shadow: 0 4px 18px 0 rgba(168,213,255,0.19);
}

.btn-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(42,50,70,0.4);
border: 2px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.9);
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
position: relative;
margin: 0 4px;
}

.btn-icon:hover {
background: rgba(80,130,255,0.2);
border-color: rgba(168,213,255,0.6);
color: #fff;
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(80,130,255,0.25);
}

.btn-icon:active {
transform: scale(0.95);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.btn-icon .control-icon {
width: 24px;
height: 24px;
fill: currentColor;
transition: all 0.3s ease;
}

.btn-icon:hover .control-icon {
transform: scale(1.1);
}

/* Quote Container */
.quote-container {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
position: relative;
z-index: 1;
margin-bottom: 15px;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
transform: translateY(-10px);
}

.quote-container.visible {
opacity: 1;
visibility: visible;
}

/* Quote Textarea Styles */
.quote-textarea {
width: 100%;
min-height: 60px;
max-height: 150px;
background: rgba(15, 20, 30, 0.7);
border: 1px solid rgba(168, 213, 255, 0.2);
border-radius: 8px;
color: rgba(255, 255, 255, 0.9);
padding: 10px 15px;
font-size: 16px;
line-height: 1.5;
resize: none;
outline: none;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
margin-bottom: 15px;
}

.quote-source {
width: 100%;
background: rgba(15, 20, 30, 0.6);
border: 1px solid rgba(168, 213, 255, 0.15);
border-radius: 6px;
color: rgba(255, 255, 255, 0.8);
padding: 8px 12px;
font-size: 15px;
margin-top: 8px;
outline: none;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
opacity: 0;
visibility: hidden;
position: absolute;
z-index: -1;
}

.quote-source:focus {
border-color: rgba(168, 213, 255, 0.4);
background: rgba(20, 30, 50, 0.7);
}

.quote-source::placeholder {
color: rgba(255, 255, 255, 0.4);
font-style: italic;
}

.quote-textarea:focus {
border-color: rgba(168, 213, 255, 0.5);
box-shadow: 0 0 0 2px rgba(168, 213, 255, 0.1);
background: rgba(20, 30, 50, 0.75);
}

.quote-textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
font-style: italic;
}

/* Compact Controls Layout */
.compact-controls-row {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.compact-color-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.compact-color-group label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.compact-slider-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.compact-slider-group label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.compact-slider {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.compact-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.compact-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.compact-toggle-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.compact-toggle-group label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.btn-compact {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-compact:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Modern Color Picker Styles */
.modern-color-picker {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(
        #ff0000 0deg,
        #ff8000 45deg,
        #ffff00 90deg,
        #80ff00 135deg,
        #00ff00 180deg,
        #00ff80 225deg,
        #00ffff 270deg,
        #0080ff 315deg,
        #0000ff 360deg
    );
    padding: 3px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.modern-color-picker:hover {
    transform: scale(1.05);
    box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(255, 255, 255, 0.2);
}

.modern-color-picker input[type="color"] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
}

.modern-color-picker input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.modern-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
}

.modern-color-picker input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Legacy Color Picker Styles (for other sections) */
.color-picker-container {
margin-top: 8px;
display: flex;
align-items: center;
gap: 10px;
}

.color-picker-container label {
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
margin-right: 8px;
}

.color-picker-container input[type="color"] {
width: 40px;
height: 30px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
background: transparent;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
border: none;
}

.color-picker-container input[type="color"]::-webkit-color-swatch {
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
padding: 0;
}

.color-picker-container input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}

.color-picker-container input[type="color"]::-moz-color-swatch {
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
padding: 0;
}



.taskbar-divider {
width: 1.5px;
height: 28px;
background: linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
margin: 0 10px;
border-radius: 2px;
box-shadow: 0 0 8px rgba(255,255,255,0.1);
}
@media (max-width: 700px) {
.control-box-taskbar {
gap: 4px;
padding: 3px 1vw 2px 1vw;
min-height: 36px;
}
.btn-icon {
width: 28px;
height: 28px;
min-width: 28px;
min-height: 28px;
border-radius: 6px;
font-size: 13px;
}
.btn-icon .control-icon {
width: 13px;
height: 13px;
}
.btn-progress {
min-width: 30px;
height: 28px;
padding: 0 10px;
border-radius: 13px;
font-size: 13px;
}
.taskbar-divider {
height: 18px;
margin: 0 5px 0 3px;
}
}

.utility-row {
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    justify-content: center;
    margin-top: 2px;
}

/* Unified button style */
.control-box .btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: rgba(40, 40, 40, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.control-box .btn-icon:hover {
    background-color: rgba(40, 40, 40, 0.7);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.control-box .icon-only {
    min-width: 26px;
    width: 26px;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.control-box .icon-only .control-icon {
    margin-right: 0;
    width: 14px;
    height: 14px;
}

.control-box .control-icon {
    width: 12px;
    height: 12px;
    margin-right: 3px;
}

.control-box .mode-icon {
    width: 14px;
    height: 14px;
}

/* Adjust the auto-hide elements to include the new control box */
.auto-hide {
    transition: opacity 0.5s ease-in-out;
}

.controls-hidden {
    opacity: 0 !important; 
    pointer-events: none;
}

/* Remove the old control panel from the timer container */
.control-panel {
    display: none;
}

/* Pomodoro styles moved to css/timer-styles.css to eliminate conflicts */

.btn-icon.active-mode {
    background-color: rgba(255, 82, 82, 0.3);
    border-color: rgba(255, 82, 82, 0.8);
}

.pomodoro-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.pomodoro-modal-content {
    background-color: rgba(30, 30, 40, 0.9);
    border-radius: 8px;
    padding: 20px 30px;
    max-width: 500px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.pomodoro-modal h2 {
    color: #ff5252;
    margin-bottom: 15px;
}

.pomodoro-modal p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    font-size: 16px;
}

.pomodoro-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pomodoro-modal-buttons button {
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pomodoro-modal-buttons button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.pomodoro-modal-buttons button:active {
    transform: translateY(0);
}

.pomodoro-modal-buttons #take-long-break {
    background-color: rgba(33, 150, 243, 0.3);
    border: 1px solid rgba(33, 150, 243, 0.5);
}

.pomodoro-modal-buttons #start-new-cycle {
    background-color: rgba(255, 82, 82, 0.3);
    border: 1px solid rgba(255, 82, 82, 0.5);
}

.pomodoro-modal-buttons #exit-pomodoro {
    background-color: rgba(158, 158, 158, 0.3);
    border: 1px solid rgba(158, 158, 158, 0.5);
}

/* ========== Task Management Styles ========== */

/* Task Selector */
.task-selector {
    position: fixed;
    top: 50%;
    right: 120px;
    transform: translateY(-50%);
    z-index: 500;
}

/* Inline Task Selector (beside time selector) */
.task-selector-inline {
    position: relative;
    z-index: 500;
    transform: translateY(2px);
}

.task-display-container {
    position: relative;
}

.task-display {
    background: rgba(0, 0, 0, 0.8);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    min-width: 100px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s;
    user-select: none;
}

.task-display:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

.task-display-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.task-display-icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.task-display-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.task-display-text {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 1rem;
    flex: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.task-display-arrow {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    transition: transform 0.3s ease;
}

.task-display:active {
    transform: translateY(-1px);
}

.task-display.active .task-display-arrow {
    transform: rotate(180deg);
}

/* Task display when a task is selected */
.task-display-text.selected {
    transition: color 0.3s ease;
}

.task-display-icon.selected {
    transition: color 0.3s ease;
}

/* Clean Task Dropdown - Left Aligned */
.task-dropdown-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: rgba(18, 18, 18, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    max-height: 200px;
    width: 250px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.task-dropdown-popup.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.task-dropdown-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    box-sizing: border-box;
}

.task-dropdown-content::-webkit-scrollbar {
    width: 4px;
}

.task-dropdown-content::-webkit-scrollbar-track {
    background: transparent;
}

.task-dropdown-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.task-dropdown-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Add Task Button */
.add-task-btn {
    width: 100%;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    color: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.add-task-btn:hover {
    background: linear-gradient(135deg, #7C3AED, #A855F7);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.add-task-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.add-task-icon {
    font-size: 14px;
    font-weight: bold;
}

/* Task List - No scrolling, handled by parent */
.task-list {
    display: block;
}

.no-tasks-message {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    padding: 20px;
    font-style: italic;
}

/* Optimized Task Item */
.task-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
    min-height: 36px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
}

.task-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.task-item.selected {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3);
}

.task-item.selected:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(99, 102, 241, 0.8);
}

.task-color-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.task-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-delete-btn {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 4px;
    color: #EF4444;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 10px;
    flex-shrink: 0;
    opacity: 0.8;
}

.task-delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    opacity: 1;
}

/* Task spacer for "None" option */
.task-spacer {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: auto;
}

/* None option styling */
.task-item.none-option {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
    padding-bottom: 4px;
    background: rgba(255, 255, 255, 0.02);
}

/* ===== Break / Quit Tooltip (Timer Mode Only) ===== */
.break-quit-tooltip {
	position: absolute;
	background: rgba(15, 18, 25, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 6px;
	padding: 8px;
	min-width: 180px;
	max-width: 210px;
	min-height: 36px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	z-index: 2000;
	transform: translateY(-10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.break-quit-tooltip.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(-20px);
}

.break-quit-tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	transform: translateX(-50%);
	border-width: 6px 6px 0 6px;
	border-style: solid;
	border-color: rgba(15, 18, 25, 0.95) transparent transparent transparent;
}

.break-tooltip-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
	width: 100%;
}

.break-btn,
.quit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2px;
	user-select: none;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.break-btn { background: #16a34a; color: #0a0f14; }
.break-btn:hover { filter: brightness(1.05); }
.break-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.quit-btn { 
	background: #ef4444; 
	color: #0a0f14; 
	min-width: 50px;
	flex-shrink: 0;
}
.quit-btn:hover { filter: brightness(1.05); }

.break-min-input {
	width: 40px;
	height: 24px;
	margin-left: 6px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	cursor: text;
	appearance: textfield;
	-moz-appearance: textfield;
}

.break-min-input::-webkit-outer-spin-button,
.break-min-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.break-btn.counting {
	background: #22c55e;
	color: #0a0f14;
}

.break-input-container {
	display: flex;
	align-items: center;
	gap: 2px;
}

.break-arrow-btn {
	width: 16px;
	height: 12px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.break-arrow-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

.break-arrow-btn:active {
	background: rgba(255, 255, 255, 0.3);
}

.task-item.none-option:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Task Modal */
.task-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.task-modal.show {
    opacity: 1;
}

.task-modal-container {
    background: rgba(20, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 90%;
    max-width: 380px; /* Reduced from 450px */
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.task-modal.show .task-modal-container {
    transform: scale(1);
}

.task-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.task-modal-header h2 {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.task-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.task-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.task-modal-content {
    padding: 15px 20px 20px;
}

/* Task Input Group */
.task-input-group {
    margin-bottom: 20px; /* Reduced from 25px */
}

.task-input-group label {
    display: block;
    color: white;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.task-name-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    color: white;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.task-name-input:focus {
    outline: none;
    border-color: #4F46E5;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.task-name-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.task-char-count {
    text-align: right;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.task-char-count.warning {
    color: #F59E0B;
}

.task-char-count.danger {
    color: #EF4444;
}

/* Task Color Group */
.task-color-group {
    margin-bottom: 20px; /* Reduced from 30px */
    display: flex;
    align-items: center;
    gap: 15px;
}

.task-color-group label {
    color: white;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    white-space: nowrap;
}

.task-color-picker {
    width: 60px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: none;
    padding: 0;
}

.task-color-picker:hover {
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

/* Task Modal Buttons */
.task-modal-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
}

.task-btn {
    padding: 10px 20px; /* Reduced padding */
    border-radius: 6px; /* Smaller border radius */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease; /* Faster transition */
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

.task-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.task-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.task-btn-primary {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: white;
}

.task-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #4338CA, #6D28D9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.task-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .time-selector {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .task-selector {
        right: 20px;
    }
    
    .task-dropdown-popup {
        min-width: 330px; /* Increased from 250px to accommodate wider dropdown */
        right: -80px; /* Extend 80px to the right on mobile too */
        width: calc(100% + 80px); /* Extend width by 80px on mobile */
    }
    
    .task-modal-container {
        width: 95%;
        margin: 15px; /* Reduced margin */
        max-width: 350px; /* Smaller max width on mobile */
    }
    
    .task-modal-header,
    .task-modal-content {
        padding: 15px 20px; /* Reduced padding on mobile */
    }
}

/* YouTube Mini Player Styles - Redesigned */
.youtube-mini-player {
    position: fixed;
    width: var(--player-width, 420px);
    height: var(--player-height, 300px);
    background: #181818;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1 !important; /* Below timer container and time selector, above background (1) */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    top: 20px;
    left: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: grab;
    transition: width 0.3s ease, height 0.3s ease;
    margin: 0;
    padding: 0;
}

.youtube-mini-player:active {
    cursor: grabbing;
}

.youtube-mini-player.hidden {
    display: none;
}

/* 16:9 aspect ratio for video container */
#youtube-player-container {
    width: 100%;
    height: calc(var(--player-width, 420px) * 9 / 16);
    background: #000;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    display: block;
    position: relative;
}

/* Reset iframe styles */
#youtube-player-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Single row compact controls */
.player-controls {
    width: 100%;
    height: 30px; /* Reduced height for more compact controls */
    background: #282828;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    gap: 6px;
    min-height: 30px;
    margin: 0;
    flex-shrink: 0;
}

/* Left side: Auto-play toggle */
.auto-play-control {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 1;
}

.auto-play-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #ccc;
    white-space: nowrap;
}

.auto-play-toggle input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    width: 24px;
    height: 12px;
    background: #444;
    border-radius: 6px;
    position: relative;
    transition: background 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #666;
    border-radius: 50%;
    top: 1px;
    left: 1px;
    transition: transform 0.3s;
}

.auto-play-toggle input:checked + .toggle-slider {
    background: #4CAF50;
}

.auto-play-toggle input:checked + .toggle-slider::before {
    transform: translateX(12px);
    background: white;
}

.toggle-label {
    font-size: 11px;
    color: #aaa;
    user-select: none;
}

/* Center: Play controls */
.player-center-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    order: 2;
    flex: 0 0 auto; /* Don't grow, don't shrink */
}

.player-controls button {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.player-controls button:hover {
    opacity: 1;
}

.player-controls button:active {
    opacity: 0.7;
}

/* Play/Pause button specific styling */
#yt-play-pause-btn {
    background: none !important;
    border: none !important;
    color: white !important;
    font-size: 18px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 5px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

#yt-play-pause-btn:hover {
    background: none !important;
    transform: none !important;
    opacity: 1 !important;
}

#yt-play-pause-btn:active {
    transform: none !important;
    opacity: 0.7 !important;
}

/* Right side: Playlist progress */
.playlist-progress {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 11px;
    color: #888;
    order: 3;
    min-width: 80px;
    text-align: right;
    flex: 0 0 auto; /* Don't grow, don't shrink */
    margin-right: 15px; /* Shift text to the left */
}

.playlist-progress.hidden {
    display: none;
}

/* Responsive sizing */
@media (max-width: 768px) {
    .youtube-mini-player {
        width: calc(100vw - 40px);
        max-width: 400px;
        height: auto;
    }

    .player-controls {
        padding: 0 10px;
        gap: 8px;
    }

    .player-center-controls {
        gap: 10px;
    }

    .player-controls button {
        font-size: 16px;
        width: 32px;
        height: 32px;
    }

    .toggle-label {
        display: none; /* Hide label on mobile */
    }
}

/* Pie Chart Widget Styles */
.pie-chart-widget {
    position: fixed;
    width: 160px;
    height: 160px;
    background: rgba(20, 20, 20, 0.6);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 1 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    top: 10px;
    right: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: grab;
}

.pie-chart-widget:active {
    cursor: grabbing;
}

.pie-chart-widget.hidden {
    display: none;
}


.pie-chart-widget canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.pie-chart-no-data {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

.pie-chart-no-data.hidden {
    display: none;
}

.pie-chart-no-data .no-data-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.pie-chart-no-data .no-data-text {
    font-size: 12px;
    opacity: 0.8;
}

/* Mobile responsive for pie chart widget */
@media (max-width: 768px) {
    .pie-chart-widget {
        width: 140px;
        height: 140px;
        top: 5px;
        right: 10px;
    }
}