/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: color 0.3s ease, background-color 0.3s ease;
}

body {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    background-color: #f5f3e9; /* Vintage beige background */
}

/* Desktop */
.desktop {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #f5f3e9; /* Vintage paper beige */
    background-image: 
        linear-gradient(0deg, rgba(220, 215, 200, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 215, 200, 0.4) 1px, transparent 1px);
    background-size: 40px 40px; /* Create a subtle graph paper effect */
    overflow: hidden;
}

/* Stars Background Animation */
.desktop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(220, 215, 200, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 40% 70%, rgba(220, 215, 200, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 65% 15%, rgba(220, 215, 200, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 85% 50%, rgba(220, 215, 200, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 30% 95%, rgba(220, 215, 200, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 50% 40%, rgba(220, 215, 200, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 90% 75%, rgba(220, 215, 200, 0.3) 1px, transparent 1px);
    background-size: 200px 200px;
    animation: starsShimmer 100s linear infinite;
    z-index: 0;
}

@keyframes starsShimmer {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 200px 200px;
    }
}

/* Desktop Icons */
.desktop-icons {
    position: absolute;
    left: 10px;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1;
}

.icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 92px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    padding: 5px;
    border-radius: 5px;
    position: relative;
}

.icon:hover {
    transform: scale(1.03);
    background-color: rgba(255, 255, 255, 0.2);
}

.icon:active {
    transform: scale(0.98);
}

@keyframes iconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.icon.selected .icon-img {
    animation: iconPulse 1s ease-in-out;
    box-shadow: 0 0 0 2px rgba(30, 144, 255, 0.5);
}

.icon-img {
    width: 52px;
    height: 52px;
    background-color: #ffffff;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: #00432a;
    margin-bottom: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.icon:hover .icon-img {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

.icon-text {
    font-size: 12px;
    color: #052b21;
    max-width: 92px;
    text-shadow: none;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 2px 4px;
    margin-top: 4px;
    font-weight: 500;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.theme-dark .icon-text {
    color: #eee;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    background-color: rgba(40, 40, 40, 0.7);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.theme-midnight .icon-text {
    color: #e0e6ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    background-color: rgba(10, 20, 50, 0.7);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px rgba(50, 100, 255, 0.2);
}

.theme-miami .icon-text {
    color: #222;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Taskbar */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #dad7cd; /* Vintage off-white */
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
    z-index: 100;
    animation: slideIn 0.5s ease-out;
    border-top: 1px solid #bbb;
}

@keyframes slideIn {
    from { transform: translateY(40px); }
    to { transform: translateY(0); }
}

.start-button {
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 30px;
    background-color: #e6e2d7; /* Off-white */
    border-radius: 4px;
    margin-right: 15px;
    cursor: pointer;
    border: 1px solid #bbb;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), 
                inset -1px -1px 0 rgba(0, 0, 0, 0.1);
}

.start-button i {
    margin-right: 8px;
    color: #333;
    font-size: 14px;
}

.start-button:hover {
    background-color: #f0ece2;
}

.taskbar-items {
    display: flex;
    flex: 1;
    height: 100%;
    overflow-x: auto;
    gap: 5px;
}

.taskbar-item {
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 30px;
    background-color: #e6e2d7;
    border-radius: 4px;
    color: #333;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    border: 1px solid #bbb;
    min-width: 120px;
    max-width: 200px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), 
                inset -1px -1px 0 rgba(0, 0, 0, 0.1);
}

.taskbar-item::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0078d7;
    transition: width 0.2s ease;
}

.taskbar-item.active::after {
    width: 100%;
}

.taskbar-item:hover::after {
    width: 100%;
}

.system-tray {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.time-date {
    font-size: 12px;
    color: #333;
    padding: 0 10px;
}

/* Windows Container */
.windows-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    pointer-events: none;
    z-index: 10;
}

/* Window Styling */
.window {
    position: absolute;
    background-color: #f0ece2; /* Vintage cream color */
    border: 1px solid #bbb;
    border-radius: 5px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    min-height: 200px;
    display: none;
    flex-direction: column;
    pointer-events: auto;
    overflow: hidden;
    z-index: 20;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
    box-shadow: 
        inset 1px 1px 0 rgba(255, 255, 255, 0.7),
        2px 2px 5px rgba(0, 0, 0, 0.2);
}

.window.active {
    box-shadow: 
        inset 1px 1px 0 rgba(255, 255, 255, 0.7),
        3px 3px 12px rgba(0, 0, 0, 0.25);
}

.window.opening {
    animation: windowOpen 0.3s ease forwards;
}

.window.closing {
    animation: windowClose 0.3s ease forwards;
}

@keyframes windowOpen {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes windowClose {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.9); opacity: 0; }
}

.window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    height: 30px;
    background: linear-gradient(to bottom, #e6e2d7, #dad7cd); /* Vintage gradient header */
    cursor: move;
    border-bottom: 1px solid #bbb;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transition: background-color 0.3s ease;
}

.window-title {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    color: #333;
    cursor: default;
}

.window-title i {
    margin-right: 8px;
    color: #333;
}

.window-title span {
    color: #333; /* Default dark color */
    transition: color 0.3s ease;
}

.theme-classic .window-title span {
    color: #333;
}

.theme-miami .window-title span {
    color: #fff;
}

.theme-dark .window-title span {
    color: #eee;
}

.theme-midnight .window-title span {
    color: #8fb3ff;
}

.window-controls {
    display: flex;
}

.window-controls button {
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    margin-left: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color: #555;
    transition: background-color 0.2s ease;
}

.window-controls .minimize {
    background-color: #f7d154;
    border: 1px solid #d9b244;
}

.window-controls .maximize {
    background-color: #62c462;
    border: 1px solid #4cae4c;
}

.window-controls .close {
    background-color: #ee5f5b;
    border: 1px solid #bd362f;
}

.window-controls button:hover {
    filter: brightness(1.1);
}

.window-controls .close:hover {
    color: #eee;
}

.window-content {
    flex: 1;
    overflow: auto;
    padding: 15px;
    background-color: #f5f3e9; /* Vintage paper color */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #333;
}

/* Improve heading sizes so content fits within window */
.window-content h2 {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.service-item h3,
.help-option h3,
.security-item h3 {
    font-size: 18px;
}

.help-content {
    max-width: 720px; /* limit width for readability */
}

/* Service Items */
.service-item {
    background-color: #e6e2d7;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}

.service-item:hover {
    transform: translateY(-2px);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
}

.service-item h3 {
    margin-bottom: 10px;
    color: #0078d7;
}

.service-item h3 i {
    margin-right: 8px;
}

/* Compliance Items */
.compliance-item {
    background-color: #e6e2d7;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}

.compliance-item:hover {
    transform: translateY(-2px);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
}

.compliance-item h3 {
    margin-bottom: 10px;
    color: #0078d7;
}

/* Security Grid */
.security-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.security-item {
    background-color: #e6e2d7;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}

.security-item:hover {
    transform: translateY(-2px);
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
}

.security-item i {
    font-size: 24px;
    margin-bottom: 10px;
    color: #0078d7;
}

.security-item h3 {
    margin-bottom: 10px;
    color: #0078d7;
}

/* Contact Form */
.contact-form {
    max-width: 600px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    min-height: 100px;
    resize: vertical;
}

.submit-btn {
    padding: 8px 20px;
    background-color: #0078d7;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.submit-btn:hover {
    background-color: #0063b1;
}

.contact-info {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
}

.contact-info p {
    margin-bottom: 10px;
}

.contact-info i {
    margin-right: 8px;
    color: #0078d7;
}

/* About Content */
.about-content {
    line-height: 1.5;
}

.about-content p {
    margin-bottom: 15px;
}

.about-content h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.about-content ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

.about-content li {
    margin-bottom: 5px;
}

/* Help Content */
.help-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.help-content h2 {
    margin-bottom: 15px;
    color: #0078d7;
    text-align: center;
}

.help-intro {
    text-align: center;
    margin-bottom: 20px;
}

.help-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    margin-bottom: 30px;
}

.help-option {
    background-color: #e6e2d7;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}

.help-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    border-color: #0078d7;
}

.help-option i {
    font-size: 24px;
    margin-bottom: 15px;
    color: #0078d7;
}

.help-option h3 {
    margin-bottom: 10px;
    color: #0078d7;
}

.help-option p {
    color: #555;
}

.quick-contact {
    text-align: center;
    width: 100%;
}

.quick-contact h3 {
    margin-bottom: 15px;
    color: #0078d7;
}

.quick-contact-options {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.quick-contact-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background-color: #e6e2d7;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quick-contact-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-color: #0078d7;
}

.quick-contact-option i {
    font-size: 20px;
    margin-bottom: 8px;
    color: #0078d7;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .desktop-icons {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    
    .icon {
        width: 60px;
    }
    
    .window {
        width: 90% !important;
        height: 80% !important;
        left: 5% !important;
        top: 10% !important;
    }
    
    .security-grid {
        grid-template-columns: 1fr;
    }
    
    .help-options {
        grid-template-columns: 1fr;
    }
    
    .quick-contact-options {
        flex-direction: column;
    }
    
    .quick-contact-option {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .desktop-icons {
        justify-content: center;
        top: 10px;
        left: 0;
        right: 0;
    }
    
    .icon {
        width: 50px;
    }
    
    .icon-img {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .icon-text {
        font-size: 10px;
    }
    
    .start-button span {
        display: none;
    }
    
    .window {
        width: 95% !important;
        height: 85% !important;
        left: 2.5% !important;
        top: 7.5% !important;
    }
    
    .window-header {
        height: 24px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 6px;
    }
}

/* Success Message Styling */
.success-message {
    text-align: center;
    padding: 30px;
    animation: fadeIn 0.5s ease;
}

.success-message i {
    font-size: 48px;
    color: #0078d7;
    margin-bottom: 15px;
}

.success-message h3 {
    color: #0078d7;
    margin-bottom: 10px;
}

.success-message p {
    color: #555;
}

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

/* Particles Background */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
}

/* Welcome Overlay */
.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(245, 243, 233, 0.97); /* Vintage paper off-white */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.welcome-overlay.hide {
    opacity: 0;
    pointer-events: none;
}

.welcome-content {
    text-align: center;
    max-width: 600px;
    padding: 30px;
    animation: fadeInUp 0.8s ease;
}

.logo-animation {
    margin-bottom: 20px;
    position: relative;
}

.logo-animation i {
    font-size: 60px;
    color: #0078d7;
    animation: pulse 2s infinite;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-top: 10px;
    letter-spacing: 1px;
}

.welcome-message h1 {
    font-size: 28px;
    color: #0078d7;
    margin-bottom: 15px;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}

.welcome-message p {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

.progress-bar {
    width: 300px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin-top: 20px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0;
    background-color: #006039; /* Rolex Green */
    animation: loadProgress 3.5s ease-in-out forwards;
}

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

@keyframes fadeInUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes loadProgress {
    from { width: 0; }
    to { width: 100%; }
}

/* Enhanced Styling for Classic Feel */
.icon {
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.icon:hover {
    background-color: rgba(0, 120, 215, 0.1);
}

.icon-img {
    border: 1px solid #bbb;
    background-color: #e6e2d7;
}

.icon:hover .icon-img {
    background-color: #f0ece2;
}

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

/* Window Styles Update for Classic Feel */
.window {
    border-radius: 2px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.window.opening {
    animation: windowOpen 0.25s ease forwards;
}

.window.closing {
    animation: windowClose 0.25s ease forwards;
}

@keyframes windowOpen {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes windowClose {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.95); opacity: 0; }
}

/* Taskbar Enhancements */
.taskbar {
    background-color: #dad7cd;
    height: 36px;
    border-top: 1px solid #bbb;
}

@keyframes slideIn {
    from { transform: translateY(36px); }
    to { transform: translateY(0); }
}

.taskbar-item {
    font-size: 11px;
}

.taskbar-item::after {
    background-color: #0078d7;
}

.taskbar-item.active::after {
    width: 100%;
}

.taskbar-item:hover::after {
    width: 100%;
}

/* Media Player Styling */
.media-player-content {
    background-color: #e6e2d7;
    color: #333;
}

.player-display {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.track-info {
    color: #0078d7;
}

.control-btn {
    background-color: #f5f3e9;
    border: 1px solid #ccc;
}

.control-btn:hover {
    background-color: #f0ece2;
}

.volume-fill {
    background-color: #0078d7;
}

.playlist-item {
    background-color: #f5f3e9;
    border-bottom-color: #e0e0e0;
}

.playlist-item.active {
    background-color: rgba(0, 120, 215, 0.1);
    color: #0078d7;
}

/* Custom Scrollbar for Retro Feel */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

::-webkit-scrollbar-track {
    background-color: #e6e2d7;
    border: 1px solid #ccc;
}

::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border: 1px solid #bbb;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

::-webkit-scrollbar-button {
    background-color: #e6e2d7;
    border: 1px solid #ccc;
    height: 14px;
    width: 14px;
}

::-webkit-scrollbar-button:hover {
    background-color: #d5d5d5;
}

/* Context Menu Retro Style */
.context-menu {
    background-color: #e6e2d7;
    border: 1px solid #bbb;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 11px;
    z-index: 9000; /* Lower than easter egg menu */
}

.context-menu-item {
    color: #333;
}

.context-menu-item i {
    color: #0078d7;
}

.context-menu-item:hover {
    background-color: rgba(0, 120, 215, 0.1);
}

.context-menu-separator {
    background-color: #ccc;
}

/* Personalize Window Styles */
.personalize-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.personalize-content h2 {
    margin-bottom: 15px;
    color: #0078d7;
}

.personalize-content p {
    margin-bottom: 20px;
    text-align: center;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    margin-bottom: 30px;
}

.theme-option {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.theme-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.theme-option.selected {
    border-color: #006039; /* Rolex green color for selection */
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.theme-preview {
    height: 80px;
    width: 100%;
}

.classic-preview {
    background: linear-gradient(to bottom, #e6e2d7, #f5f3e9);
    border-bottom: 1px solid #ccc;
}

.miami-preview {
    background: linear-gradient(135deg, #ff00aa, #00ccff);
}

.dark-preview {
    background: linear-gradient(to bottom, #333, #222);
}

.midnight-preview {
    background: linear-gradient(to bottom, #000b34, #000);
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 65% 15%, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
}

.theme-name {
    text-align: center;
    padding: 8px 0;
    color: #333; /* Default color for light themes */
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0 0 8px 8px;
}

.theme-dark .theme-name,
.theme-midnight .theme-name {
    color: #fff; /* White text for dark themes */
    background-color: rgba(0, 0, 0, 0.7);
}

/* Theme preview text colors in selection window */
.dark-preview .theme-name,
.midnight-preview .theme-name {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
}

.personalize-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.apply-theme-btn {
    background-color: #006039; /* Rolex green color */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.apply-theme-btn:hover {
    background-color: #007744;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.theme-success {
    margin-top: 15px;
    color: #006039;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.3s ease;
}

/* Theme: Classic (Default) */
.theme-classic {
    /* These styles are already defined in the document by default */
}

/* Theme: Miami Vice */
.theme-miami {
    /* Body and background */
    background-color: #000;
}

.theme-miami .desktop {
    background-color: #000;
    background-image: none;
}

.theme-miami .desktop::before {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 0, 170, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 40% 70%, rgba(0, 204, 255, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 65% 15%, rgba(255, 0, 170, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 85% 50%, rgba(0, 204, 255, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 30% 95%, rgba(255, 0, 170, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 50% 40%, rgba(0, 204, 255, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 90% 75%, rgba(255, 0, 170, 0.2) 1px, transparent 1px);
}

/* Icons */
.theme-miami .icon-text {
    color: #222;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.7);
}

.theme-miami .icon-img {
    background: linear-gradient(135deg, #ff6ec4, #7873f5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.theme-miami .icon:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.theme-miami .icon:hover .icon-img {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Windows and UI elements */
.theme-miami .window {
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 204, 255, 0.5);
    box-shadow: 0 0 20px rgba(255, 0, 170, 0.3);
}

.theme-miami .window-header {
    background: linear-gradient(to right, #ff00aa, #00ccff);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.theme-miami .window-title {
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.theme-miami .window-content {
    background-color: #000;
    color: #fff;
}

/* Taskbar */
.theme-miami .taskbar {
    background-color: rgba(0, 0, 0, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-miami .start-button {
    background: linear-gradient(to right, #ff00aa, #00ccff);
    color: #fff;
    border: none;
}

.theme-miami .taskbar-item {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.theme-miami .taskbar-item::after {
    background: linear-gradient(to right, #ff00aa, #00ccff);
}

.theme-miami .time-date {
    color: #fff;
}

/* Form elements */
.theme-miami .service-item,
.theme-miami .compliance-item,
.theme-miami .security-item,
.theme-miami .help-option,
.theme-miami .quick-contact-option {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.theme-miami .service-item h3,
.theme-miami .compliance-item h3,
.theme-miami .security-item h3,
.theme-miami .help-option h3,
.theme-miami .help-content h2 {
    color: #00ccff;
}

.theme-miami .service-item i,
.theme-miami .security-item i,
.theme-miami .help-option i,
.theme-miami .quick-contact-option i {
    color: #ff00aa;
}

.theme-miami .form-group input,
.theme-miami .form-group select,
.theme-miami .form-group textarea {
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.theme-miami .submit-btn {
    background: linear-gradient(to right, #ff00aa, #00ccff);
    border: none;
}

/* Theme: Dark */
.theme-dark {
    /* Body and background */
    background-color: #222;
}

.theme-dark .desktop {
    background-color: #222;
    background-image: 
        linear-gradient(0deg, rgba(60, 60, 60, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60, 60, 60, 0.4) 1px, transparent 1px);
}

.theme-dark .desktop::before {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(100, 100, 100, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 40% 70%, rgba(100, 100, 100, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 65% 15%, rgba(100, 100, 100, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 85% 50%, rgba(100, 100, 100, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 30% 95%, rgba(100, 100, 100, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 50% 40%, rgba(100, 100, 100, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 90% 75%, rgba(100, 100, 100, 0.3) 1px, transparent 1px);
}

/* Icons */
.theme-dark .icon-text {
    color: #eee;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    background-color: rgba(40, 40, 40, 0.7);
}

.theme-dark .icon-img {
    background: linear-gradient(135deg, #3a3a3a, #222);
    border: 1px solid rgba(70, 70, 70, 0.6);
    color: #aaa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.theme-dark .icon:hover {
    background-color: rgba(70, 70, 70, 0.3);
}

.theme-dark .icon:hover .icon-img {
    color: #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* Windows and UI elements */
.theme-dark .window {
    background-color: #333;
    border: 1px solid #444;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.theme-dark .window-header {
    background: linear-gradient(to bottom, #444, #333);
    border-bottom: 1px solid #222;
}

.theme-dark .window-title {
    color: #fff;
}

.theme-dark .window-content {
    background-color: #333;
    color: #ddd;
}

/* Taskbar */
.theme-dark .taskbar {
    background-color: #333;
    border-top: 1px solid #444;
}

.theme-dark .start-button {
    background-color: #444;
    color: #fff;
    border: 1px solid #555;
}

.theme-dark .start-button i {
    color: #fff;
}

.theme-dark .taskbar-item {
    background-color: #444;
    border: 1px solid #555;
    color: #fff;
}

.theme-dark .time-date {
    color: #fff;
}

/* Form elements */
.theme-dark .service-item,
.theme-dark .compliance-item,
.theme-dark .security-item,
.theme-dark .help-option,
.theme-dark .quick-contact-option {
    background-color: #444;
    border: 1px solid #555;
    color: #ddd;
}

.theme-dark .service-item h3,
.theme-dark .compliance-item h3,
.theme-dark .security-item h3,
.theme-dark .help-option h3,
.theme-dark .help-content h2 {
    color: #0078d7;
}

.theme-dark .form-group input,
.theme-dark .form-group select,
.theme-dark .form-group textarea {
    background-color: #444;
    border: 1px solid #555;
    color: #fff;
}

.theme-dark .form-group label {
    color: #ddd;
}

.theme-dark .submit-btn {
    background-color: #0078d7;
}

/* Theme: Midnight */
.theme-midnight {
    /* Body and background */
    background-color: #000;
}

.theme-midnight .desktop {
    background-color: #000b34;
    background-image: none;
}

.theme-midnight .desktop::before {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 65% 15%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 85% 50%, rgba(255, 255, 255, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 30% 95%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 90% 75%, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    animation: starsShimmer 120s linear infinite;
}

/* Icons */
.theme-midnight .icon-text {
    color: #e0e6ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    background-color: rgba(10, 20, 50, 0.7);
}

.theme-midnight .icon-img {
    background: linear-gradient(135deg, #0a2050, #051030);
    border: 1px solid rgba(30, 80, 180, 0.5);
    color: #7a9aff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(100, 150, 255, 0.15), 0 0 8px rgba(50, 100, 255, 0.2);
}

.theme-midnight .icon:hover {
    background-color: rgba(30, 80, 180, 0.2);
}

.theme-midnight .icon:hover .icon-img {
    color: #a0c0ff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(100, 150, 255, 0.2), 0 0 12px rgba(50, 100, 255, 0.3);
}

/* Windows and UI elements */
.theme-midnight .window {
    background-color: rgba(0, 10, 40, 0.9);
    border: 1px solid rgba(0, 100, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 100, 255, 0.2);
}

.theme-midnight .window-header {
    background: linear-gradient(to bottom, #001a4d, #000c33);
    border-bottom: 1px solid rgba(0, 100, 255, 0.3);
}

.theme-midnight .window-title {
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 100, 255, 0.5);
}

.theme-midnight .window-content {
    background-color: rgba(0, 10, 30, 0.8);
    color: #bcd4ff;
}

/* Taskbar */
.theme-midnight .taskbar {
    background-color: rgba(0, 10, 40, 0.9);
    border-top: 1px solid rgba(0, 100, 255, 0.3);
}

.theme-midnight .start-button {
    background-color: #001a4d;
    color: #fff;
    border: 1px solid rgba(0, 100, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 100, 255, 0.3);
}

.theme-midnight .start-button i {
    color: #fff;
}

.theme-midnight .taskbar-item {
    background-color: #000c33;
    border: 1px solid rgba(0, 100, 255, 0.3);
    color: #fff;
}

.theme-midnight .taskbar-item::after {
    background-color: rgba(0, 100, 255, 0.7);
}

.theme-midnight .time-date {
    color: #fff;
}

/* Form elements */
.theme-midnight .service-item,
.theme-midnight .compliance-item,
.theme-midnight .security-item,
.theme-midnight .help-option,
.theme-midnight .quick-contact-option {
    background-color: rgba(0, 20, 60, 0.6);
    border: 1px solid rgba(0, 100, 255, 0.3);
    color: #bcd4ff;
}

.theme-midnight .service-item h3,
.theme-midnight .compliance-item h3,
.theme-midnight .security-item h3,
.theme-midnight .help-option h3,
.theme-midnight .help-content h2 {
    color: #40a0ff;
}

.theme-midnight .service-item i,
.theme-midnight .compliance-item i,
.theme-midnight .security-item i,
.theme-midnight .help-option i,
.theme-midnight .quick-contact-option i {
    color: #40a0ff;
}

.theme-midnight .form-group input,
.theme-midnight .form-group select,
.theme-midnight .form-group textarea {
    background-color: rgba(0, 10, 30, 0.8);
    border: 1px solid rgba(0, 100, 255, 0.3);
    color: #fff;
}

.theme-midnight .form-group label {
    color: #bcd4ff;
}

.theme-midnight .submit-btn {
    background-color: #0050cc;
}

/* Welcome Overlay Theme Adjustments */
.theme-miami .welcome-overlay {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.97), rgba(0, 204, 255, 0.97));
}

.theme-miami .welcome-message h1,
.theme-miami .logo-text {
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.theme-miami .welcome-message p {
    color: #fff;
}

.theme-miami .progress-bar {
    background-color: rgba(0, 0, 0, 0.3);
}

.theme-miami .progress-fill {
    background-color: #006039; /* Rolex Green */
}

.theme-dark .welcome-overlay {
    background-color: rgba(40, 40, 40, 0.97);
}

.theme-dark .welcome-message h1,
.theme-dark .logo-text {
    color: #a9c4f5;
}

.theme-dark .welcome-message p {
    color: #ddd;
}

.theme-dark .progress-bar {
    background-color: #444;
}

.theme-midnight .welcome-overlay {
    background-color: rgba(0, 10, 40, 0.97);
}

.theme-midnight .welcome-message h1,
.theme-midnight .logo-text {
    color: #8fb3ff;
    text-shadow: 0 0 10px rgba(0, 100, 255, 0.5);
}

.theme-midnight .welcome-message p {
    color: #bcd4ff;
}

.theme-midnight .progress-bar {
    background-color: rgba(0, 20, 60, 0.6);
}

.theme-midnight .progress-fill {
    background-color: #006039; /* Rolex Green */
}

/* Mute Button Styles */
.mute-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.mute-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.mute-button i {
    font-size: 18px;
}

/* Style for muted state */
.mute-button.muted {
    color: #f44336;
}

/* Theme-specific mute button styles */
.theme-miami .mute-button {
    color: #fff;
}

.theme-dark .mute-button {
    color: #ddd;
}

.theme-midnight .mute-button {
    color: #8fb3ff;
}

/* Theme-specific welcome overlay progress bars - all using Rolex Green */
.theme-miami .progress-fill,
.theme-dark .progress-fill,
.theme-midnight .progress-fill {
    background: none;
    background-color: #006039 !important;
}

/* Chat Button Styles */
.chat-button {
    position: fixed;
    bottom: 60px;
    right: 20px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: #006039; /* Rolex Green by default (Classic theme) */
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    z-index: 999;
    font-weight: 500;
}

.chat-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.chat-button i {
    font-size: 20px;
    margin-right: 10px;
}

/* Chat Window Styles */
.chat-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 !important;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #f9f9f9;
}

.message {
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 10px;
    max-width: 80%;
    word-wrap: break-word;
    animation: messageIn 0.3s ease-out;
}

.user-message {
    align-self: flex-end;
    background-color: #006039; /* Rolex Green by default */
    color: white;
    margin-left: auto;
}

.bot-message {
    align-self: flex-start;
    background-color: #e9e9e9;
    color: #333;
}

.chat-input-container {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
    background-color: #fff;
}

#chat-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
}

#chat-send-btn {
    background-color: #006039; /* Rolex Green by default */
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#chat-send-btn:hover {
    background-color: #00502f; /* Darker Rolex Green */
}

@keyframes messageIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Theme-specific chat styling */
/* Miami Vice Theme */
.theme-miami .chat-button {
    background: linear-gradient(135deg, #ff00aa 0%, #00ccff 100%);
}

.theme-miami .user-message {
    background: linear-gradient(135deg, #ff00aa 0%, #00ccff 100%);
}

.theme-miami #chat-send-btn {
    background: linear-gradient(135deg, #ff00aa 0%, #00ccff 100%);
}

.theme-miami #chat-send-btn:hover {
    background: linear-gradient(135deg, #e6009a 0%, #00b8e6 100%);
}

/* Dark Theme */
.theme-dark .chat-button {
    background-color: #2c2c2c;
}

.theme-dark .chat-messages {
    background-color: #333;
    color: #eee;
}

.theme-dark .user-message {
    background-color: #555;
}

.theme-dark .bot-message {
    background-color: #222;
    color: #ddd;
}

.theme-dark .chat-input-container {
    background-color: #333;
    border-top-color: #444;
}

.theme-dark #chat-input {
    background-color: #444;
    color: #eee;
    border-color: #555;
}

.theme-dark #chat-send-btn {
    background-color: #555;
}

.theme-dark #chat-send-btn:hover {
    background-color: #666;
}

/* Midnight Theme */
.theme-midnight .chat-button {
    background-color: #000;
}

.theme-midnight .chat-messages {
    background-color: #030d20;
    color: #8fb3ff;
}

.theme-midnight .user-message {
    background-color: #000;
    color: #8fb3ff;
}

.theme-midnight .bot-message {
    background-color: #051940;
    color: #b0c8ff;
}

.theme-midnight .chat-input-container {
    background-color: #030d20;
    border-top-color: #051940;
}

.theme-midnight #chat-input {
    background-color: #051940;
    color: #8fb3ff;
    border-color: #072761;
}

.theme-midnight #chat-send-btn {
    background-color: #000;
}

.theme-midnight #chat-send-btn:hover {
    background-color: #072761;
}

/* Chat Separator */
.chat-separator {
    text-align: center;
    margin: 15px 0;
    position: relative;
}

.chat-separator span {
    display: inline-block;
    padding: 0 10px;
    background: #f9f9f9;
    color: #999;
    font-size: 12px;
    position: relative;
    z-index: 1;
}

.chat-separator::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #ddd;
    z-index: 0;
}

/* Theme-specific chat separator styles */
.theme-miami .chat-separator span {
    background: linear-gradient(135deg, rgba(255, 0, 170, 0.1) 0%, rgba(0, 204, 255, 0.1) 100%);
    color: rgba(255, 255, 255, 0.7);
}

.theme-miami .chat-separator::before {
    background: linear-gradient(90deg, rgba(255, 0, 170, 0.3), rgba(0, 204, 255, 0.3));
}

.theme-dark .chat-separator span {
    background-color: #333;
    color: #999;
}

.theme-dark .chat-separator::before {
    background-color: #555;
}

.theme-midnight .chat-separator span {
    background-color: #030d20;
    color: #8fb3ff;
}

.theme-midnight .chat-separator::before {
    background-color: #072761;
}

/* Transcript Button Styles */
.transcript-btn {
    display: block;
    width: 100%;
    padding: 8px 15px;
    margin-top: 10px;
    background-color: #006039; /* Rolex Green */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.transcript-btn:hover {
    background-color: #00502f;
}

.transcript-btn i {
    margin-right: 8px;
}

/* Theme-specific transcript button styles */
.theme-miami .transcript-btn {
    background: linear-gradient(135deg, #ff00aa 0%, #00ccff 100%);
}

.theme-miami .transcript-btn:hover {
    background: linear-gradient(135deg, #e6009a 0%, #00b8e6 100%);
}

.theme-dark .transcript-btn {
    background-color: #555;
    color: #eee;
}

.theme-dark .transcript-btn:hover {
    background-color: #666;
}

.theme-midnight .transcript-btn {
    background-color: #051940;
    color: #8fb3ff;
}

.theme-midnight .transcript-btn:hover {
    background-color: #072761;
}

/* Base accent color used for headings and interactive elements */
h1, h2, h3, 
.window-content h2,
.help-option h3,
.service-item h3,
.security-item h3,
.icon-text,
.help-content h2,
.quick-contact h3 {
    color: #4285f4; /* Default blue accent color */
    transition: color 0.3s ease;
}

a, .help-option i, .service-item i, .security-item i {
    color: #4285f4; /* Default blue accent color */
    transition: color 0.3s ease;
}

/* Theme-specific accent colors */
/* Classic theme - Rolex Green */
.theme-classic h1, 
.theme-classic h2, 
.theme-classic h3,
.theme-classic .window-content h2,
.theme-classic .help-option h3,
.theme-classic .service-item h3,
.theme-classic .security-item h3,
.theme-classic .icon-text,
.theme-classic .help-content h2,
.theme-classic .quick-contact h3 {
    color: #006039; /* Rolex Green */
}

.theme-classic a, 
.theme-classic .help-option i, 
.theme-classic .service-item i, 
.theme-classic .security-item i {
    color: #006039; /* Rolex Green */
}

/* Miami Vice theme - Pink/Blue gradient for headings and solid colors for icons */
.theme-miami h1, 
.theme-miami h2, 
.theme-miami h3,
.theme-miami .window-content h2,
.theme-miami .help-content h2,
.theme-miami .quick-contact h3 {
    background: linear-gradient(135deg, #ff00aa 0%, #00ccff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.theme-miami .help-option h3,
.theme-miami .service-item h3,
.theme-miami .security-item h3,
.theme-miami .icon-text {
    color: #00ccff; /* Miami Vice blue */
}

.theme-miami a, 
.theme-miami .help-option i, 
.theme-miami .service-item i, 
.theme-miami .security-item i {
    color: #ff00aa; /* Miami Vice pink */
}

/* Dark theme - Light gray/blue accent */
.theme-dark h1, 
.theme-dark h2, 
.theme-dark h3,
.theme-dark .window-content h2,
.theme-dark .help-option h3,
.theme-dark .service-item h3,
.theme-dark .security-item h3,
.theme-dark .icon-text,
.theme-dark .help-content h2,
.theme-dark .quick-contact h3 {
    color: #a9c4f5; /* Light blue-gray */
}

.theme-dark a, 
.theme-dark .help-option i, 
.theme-dark .service-item i, 
.theme-dark .security-item i {
    color: #6f9aee; /* Medium blue-gray */
}

/* Midnight theme - Deep blue accent */
.theme-midnight h1, 
.theme-midnight h2, 
.theme-midnight h3,
.theme-midnight .window-content h2,
.theme-midnight .help-option h3,
.theme-midnight .service-item h3,
.theme-midnight .security-item h3,
.theme-midnight .icon-text,
.theme-midnight .help-content h2,
.theme-midnight .quick-contact h3 {
    color: #8fb3ff; /* Bright blue accent */
}

.theme-midnight a, 
.theme-midnight .help-option i, 
.theme-midnight .service-item i, 
.theme-midnight .security-item i {
    color: #3676ff; /* Deep blue accent */
}

/* Progress Bar Colors (already updated to Rolex Green in previous changes) */
.progress-fill {
    background-color: #006039; /* Rolex Green */
}

/* Welcome Message Text Colors */
.welcome-message h1 {
    color: #4285f4; /* Default blue */
    transition: color 0.3s ease;
}

.welcome-message p {
    color: #555;
    transition: color 0.3s ease;
}

/* Theme-specific welcome message text colors */
.theme-classic .welcome-message h1 {
    color: #006039; /* Rolex Green */
}

/* Update any remaining misc theme-specific accent colors */
.theme-classic .submit-btn,
.theme-classic .chat-button,
.theme-classic .transcript-btn,
.theme-classic #chat-send-btn {
    background-color: #006039; /* Rolex Green */
}

.theme-classic .submit-btn:hover,
.theme-classic .chat-button:hover,
.theme-classic .transcript-btn:hover,
.theme-classic #chat-send-btn:hover {
    background-color: #00502f; /* Darker Rolex Green */
}

/* Add any other elements that need theme-specific colors here */

/* Additional Theme-specific window elements */
/* Window titles */
.window-title span {
    color: #333; /* Default dark color */
    transition: color 0.3s ease;
}

.theme-classic .window-title span {
    color: #333;
}

.theme-miami .window-title span {
    color: #fff;
}

.theme-dark .window-title span {
    color: #eee;
}

.theme-midnight .window-title span {
    color: #8fb3ff;
}

/* Taskbar items */
.taskbar-item {
    background-color: rgba(255, 255, 255, 0.2);
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-classic .taskbar-item {
    background-color: rgba(255, 255, 255, 0.2);
    color: #333;
}

.theme-miami .taskbar-item {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
}

.theme-dark .taskbar-item {
    background-color: rgba(255, 255, 255, 0.1);
    color: #eee;
}

.theme-midnight .taskbar-item {
    background-color: rgba(0, 26, 77, 0.4);
    color: #8fb3ff;
}

/* Form button text colors - improve contrast */
.submit-btn,
.transcript-btn,
.apply-theme-btn {
    color: white;
    font-weight: 500;
}

/* Apply special handling for gradient text in Miami Vice theme */
.theme-miami .welcome-message h1 {
    background: linear-gradient(135deg, #ff00aa 0%, #00ccff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Override for elements that should not use gradient text in Miami Vice */
.theme-miami .chat-messages,
.theme-miami .chat-input-container,
.theme-miami #chat-input {
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: inherit;
}

/* Fix welcome message in all themes */
.theme-dark .welcome-message h1,
.theme-dark .logo-text {
    color: #a9c4f5;
}

.theme-midnight .welcome-message h1,
.theme-midnight .logo-text {
    color: #8fb3ff;
}

/* Fix progress bar to use Rolex Green across all themes */
.progress-bar {
    background-color: rgba(255, 255, 255, 0.3);
}

.progress-fill {
    background-color: #006039 !important; /* Rolex Green with !important to override any theme styles */
}

/* Add specific UI element color fixes for each theme */
/* Help options */
.help-option {
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.theme-classic .help-option {
    background-color: rgba(240, 240, 235, 0.7);
}

.theme-classic .help-option:hover {
    background-color: rgba(0, 96, 57, 0.1); /* Rolex Green with opacity */
}

.theme-miami .help-option {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
}

.theme-miami .help-option:hover {
    background-color: rgba(255, 0, 170, 0.2);
}

.theme-dark .help-option {
    background-color: rgba(40, 40, 40, 0.7);
    color: #eee;
}

.theme-dark .help-option:hover {
    background-color: rgba(80, 80, 80, 0.7);
}

.theme-midnight .help-option {
    background-color: rgba(5, 25, 64, 0.7);
    color: #8fb3ff;
}

.theme-midnight .help-option:hover {
    background-color: rgba(7, 39, 97, 0.7);
}

/* Service items and security items */
.theme-classic .service-item,
.theme-classic .security-item {
    background-color: rgba(240, 240, 235, 0.7);
}

.theme-classic .service-item:hover,
.theme-classic .security-item:hover {
    background-color: rgba(0, 96, 57, 0.1);
}

.theme-miami .service-item,
.theme-miami .security-item {
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
}

.theme-miami .service-item:hover,
.theme-miami .security-item:hover {
    background-color: rgba(255, 0, 170, 0.2);
}

.theme-dark .service-item,
.theme-dark .security-item {
    background-color: rgba(40, 40, 40, 0.7);
    color: #eee;
}

.theme-dark .service-item:hover,
.theme-dark .security-item:hover {
    background-color: rgba(80, 80, 80, 0.7);
}

.theme-midnight .service-item,
.theme-midnight .security-item {
    background-color: rgba(5, 25, 64, 0.7);
    color: #8fb3ff;
}

.theme-midnight .service-item:hover,
.theme-midnight .security-item:hover {
    background-color: rgba(7, 39, 97, 0.7);
}

/* Update accent/highlight colors to change with themes */
/* Base accent color definitions */
a {
    color: #0078d7; /* Default blue */
    transition: color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
    color: #0078d7; /* Default blue */
    transition: color 0.3s ease;
}

/* Theme-specific accent colors */
.theme-classic a,
.theme-classic h1,
.theme-classic h2, 
.theme-classic h3, 
.theme-classic h4, 
.theme-classic h5, 
.theme-classic h6,
.theme-classic .window-title-icon,
.theme-classic .window-header,
.theme-classic .select-dropdown,
.theme-classic .contact-form label {
    color: #006039; /* Rolex Green */
}

.theme-miami a,
.theme-miami h1,
.theme-miami h2, 
.theme-miami h3, 
.theme-miami h4, 
.theme-miami h5, 
.theme-miami h6,
.theme-miami .window-title-icon,
.theme-miami .window-header,
.theme-miami .select-dropdown,
.theme-miami .contact-form label {
    color: #ff00aa; /* Miami Pink */
}

.theme-dark a,
.theme-dark h1,
.theme-dark h2, 
.theme-dark h3, 
.theme-dark h4, 
.theme-dark h5, 
.theme-dark h6,
.theme-dark .window-title-icon,
.theme-dark .window-header,
.theme-dark .select-dropdown,
.theme-dark .contact-form label {
    color: #a9c4f5; /* Light blue-gray */
}

.theme-midnight a,
.theme-midnight h1,
.theme-midnight h2, 
.theme-midnight h3, 
.theme-midnight h4, 
.theme-midnight h5, 
.theme-midnight h6,
.theme-midnight .window-title-icon,
.theme-midnight .window-header,
.theme-midnight .select-dropdown,
.theme-midnight .contact-form label {
    color: #8fb3ff; /* Deep blue */
}

/* Special handling for links on hover */
.theme-classic a:hover {
    color: #00432a; /* Darker Rolex Green */
}

.theme-miami a:hover {
    color: #cc0088; /* Darker Miami Pink */
}

.theme-dark a:hover {
    color: #c8d9ff; /* Lighter blue-gray */
}

.theme-midnight a:hover {
    color: #b0c8ff; /* Lighter deep blue */
}

/* Special handling for buttons in forms */
.theme-classic .submit-btn,
.theme-classic .apply-theme-btn,
.theme-classic .transcript-btn,
.theme-classic button[type="submit"] {
    background-color: #006039; /* Rolex Green */
}

.theme-miami .submit-btn,
.theme-miami .apply-theme-btn,
.theme-miami .transcript-btn,
.theme-miami button[type="submit"] {
    background: linear-gradient(135deg, #ff00aa 0%, #00ccff 100%);
}

.theme-dark .submit-btn,
.theme-dark .apply-theme-btn,
.theme-dark .transcript-btn,
.theme-dark button[type="submit"] {
    background-color: #3a4c6d;
}

.theme-midnight .submit-btn,
.theme-midnight .apply-theme-btn,
.theme-midnight .transcript-btn,
.theme-midnight button[type="submit"] {
    background-color: #1a3366;
}

/* Media player styling */
.theme-classic .media-controls button {
    background-color: rgba(0, 96, 57, 0.2);
    color: #006039;
}

.theme-miami .media-controls button {
    background-color: rgba(255, 0, 170, 0.2);
    color: #ff00aa;
}

.theme-dark .media-controls button {
    background-color: rgba(169, 196, 245, 0.2);
    color: #a9c4f5;
}

.theme-midnight .media-controls button {
    background-color: rgba(143, 179, 255, 0.2);
    color: #8fb3ff;
}

/* Progress bar theme colors for media player */
.theme-classic .media-progress-bar .media-progress-fill {
    background-color: #006039;
}

.theme-miami .media-progress-bar .media-progress-fill {
    background: linear-gradient(135deg, #ff00aa 0%, #00ccff 100%);
}

.theme-dark .media-progress-bar .media-progress-fill {
    background-color: #a9c4f5;
}

.theme-midnight .media-progress-bar .media-progress-fill {
    background-color: #8fb3ff;
}

/* Theme-specific focus states */
.theme-classic input:focus,
.theme-classic textarea:focus,
.theme-classic select:focus {
    border-color: #006039;
    box-shadow: 0 0 0 2px rgba(0, 96, 57, 0.2);
}

.theme-miami input:focus,
.theme-miami textarea:focus,
.theme-miami select:focus {
    border-color: #ff00aa;
    box-shadow: 0 0 0 2px rgba(255, 0, 170, 0.2);
}

.theme-dark input:focus,
.theme-dark textarea:focus,
.theme-dark select:focus {
    border-color: #a9c4f5;
    box-shadow: 0 0 0 2px rgba(169, 196, 245, 0.2);
}

.theme-midnight input:focus,
.theme-midnight textarea:focus,
.theme-midnight select:focus {
    border-color: #8fb3ff;
    box-shadow: 0 0 0 2px rgba(143, 179, 255, 0.2);
}

/* Theme-specific selection highlights */
.theme-classic ::selection {
    background-color: rgba(0, 96, 57, 0.3);
    color: #000;
}

.theme-miami ::selection {
    background-color: rgba(255, 0, 170, 0.3);
    color: #fff;
}

.theme-dark ::selection {
    background-color: rgba(169, 196, 245, 0.3);
    color: #fff;
}

.theme-midnight ::selection {
    background-color: rgba(143, 179, 255, 0.3);
    color: #fff;
}

/* Fix any unthemed window or control elements */
.window-header {
    transition: background-color 0.3s ease;
}

.theme-classic .window-header {
    background-color: #e8e6de;
}

.theme-miami .window-header {
    background: linear-gradient(90deg, rgba(255, 0, 170, 0.7) 0%, rgba(0, 204, 255, 0.7) 100%);
    color: white;
}

.theme-dark .window-header {
    background-color: #2c2c2c;
    color: #eee;
}

.theme-midnight .window-header {
    background-color: #051940;
    color: #8fb3ff;
}

/* End of theme-specific styles */

/* Easter Egg Menu Styles */
.easter-egg-menu {
    z-index: 20000; /* Much higher than regular context menu */
    border: 3px solid #006039; /* Thicker Rolex Green border */
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 15px rgba(0, 96, 57, 0.5); /* Add a glow effect */
}

.easter-egg-menu .context-menu-item {
    color: #006039; /* Rolex Green text */
}

.easter-egg-menu .context-menu-item:hover {
    background-color: rgba(0, 96, 57, 0.1); /* Rolex Green with opacity */
}

/* Secret Terminal Styles */
.terminal-content {
    background-color: #000;
    color: #0f0;
    font-family: 'Courier New', monospace;
    padding: 10px;
}

.terminal-output {
    height: 280px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.terminal-output p {
    margin: 0;
    padding: 2px 0;
    line-height: 1.3;
}

.terminal-input-container {
    display: flex;
    align-items: center;
}

.terminal-prompt {
    color: #0f0;
    margin-right: 5px;
}

.terminal-input {
    flex: 1;
    background-color: transparent;
    border: none;
    color: #0f0;
    font-family: 'Courier New', monospace;
    outline: none;
}

/* Enhanced Media Player Styles */
.media-player-content {
    padding: 15px;
}

.album-art {
    text-align: center;
    margin-bottom: 10px;
}

.album-art i {
    font-size: 48px;
    color: #006039; /* Rolex Green */
    display: inline-block;
}

.theme-miami .album-art i {
    background: linear-gradient(135deg, #ff00aa 0%, #00ccff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.theme-dark .album-art i {
    color: #a9c4f5;
}

.theme-midnight .album-art i {
    color: #8fb3ff;
}

.player-display {
    margin-bottom: 15px;
}

.media-progress-bar {
    height: 8px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin: 8px 0;
    cursor: pointer;
}

.media-progress-fill {
    height: 100%;
    background-color: #006039; /* Rolex Green */
    border-radius: 4px;
    width: 0%;
    transition: width 0.1s linear;
}

.player-time {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #777;
}

.media-controls {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.control-btn {
    background: none;
    border: none;
    font-size: 16px;
    margin-right: 10px;
    cursor: pointer;
    color: #333;
}

.play-btn {
    font-size: 20px;
}

.volume-control {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.volume-icon {
    margin-right: 5px;
    cursor: pointer;
}

.volume-slider {
    width: 60px;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    cursor: pointer;
}

.volume-fill {
    height: 100%;
    background-color: #006039; /* Rolex Green */
    border-radius: 2px;
    width: 70%;
}

.player-playlist {
    max-height: 100px;
    overflow-y: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 10px;
}

.playlist-item {
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 2px;
}

.playlist-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.playlist-item.active {
    background-color: rgba(0, 96, 57, 0.1); /* Rolex Green with opacity */
    font-weight: bold;
}

.track-number {
    min-width: 20px;
    font-size: 12px;
    color: #777;
}

.playlist-item.active .track-number {
    color: #006039; /* Rolex Green */
}

.playlist-title {
    font-weight: 500;
    display: block;
}

.playlist-artist {
    font-size: 12px;
    color: #777;
    display: block;
}

.track-duration {
    margin-left: auto;
    font-size: 12px;
    color: #777;
}

/* Konami Code Effect */
.konami-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.5s ease-in-out;
}

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

.konami-active {
    overflow: hidden;
}

.konami-content {
    background-color: #f5f3e9;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 96, 57, 0.8);
    max-width: 500px;
    width: 90%;
    color: #333;
    position: relative;
    border: 3px solid #006039;
}

.konami-content h1 {
    color: #006039;
    margin-bottom: 20px;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.konami-icon {
    font-size: 40px;
    color: #006039;
    margin-bottom: 20px;
    animation: pulse 1.5s infinite;
}

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

.konami-close-btn {
    background-color: #006039;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
    margin-top: 20px;
}

.konami-close-btn:hover {
    background-color: #00502f;
}

/* Snake Game Styles */
#snake-game {
    margin: 20px auto;
    width: 300px;
}

#snake-canvas {
    border: 2px solid #006039;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #f5f3e9;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    outline: none; /* Remove default focus outline */
}

#snake-canvas:focus {
    border-color: #00502f;
    box-shadow: 0 0 15px rgba(0, 96, 57, 0.6);
}

.game-info {
    margin-top: 15px;
    font-size: 14px;
    color: #333;
}

.game-info p {
    margin: 5px 0;
}

#snake-score {
    font-weight: bold;
    color: #006039;
}

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

/* ASCII Art Window */
.ascii-art-content {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.ascii-art-content h2 {
    margin-bottom: 10px;
    color: #006039;
}

.ascii-art-content p {
    margin-bottom: 20px;
}

.ascii-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.ascii-option {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ascii-option:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

.ascii-option:active {
    background-color: #d0d0d0;
    transform: translateY(1px);
}

.ascii-display {
    flex: 1;
    background-color: #000;
    border-radius: 4px;
    padding: 15px;
    overflow: auto;
    font-family: 'Courier New', monospace;
}

#ascii-output {
    color: #0f0;
    white-space: pre;
    font-size: 12px;
    line-height: 1.2;
    margin: 0;
}

/* Theme-specific styles */
.theme-miami .ascii-art-content h2 {
    color: #ff00aa;
}

.theme-miami .ascii-option {
    background: linear-gradient(135deg, #ff00aa22 0%, #00ccff22 100%);
    border-color: #ff00aa;
}

.theme-miami .ascii-option:hover {
    background: linear-gradient(135deg, #ff00aa44 0%, #00ccff44 100%);
}

.theme-miami .ascii-display {
    background-color: #222;
    border: 1px solid #ff00aa;
}

.theme-miami #ascii-output {
    color: #ff00aa;
}

.theme-dark .ascii-art-content h2 {
    color: #a9c4f5;
}

.theme-dark .ascii-option {
    background-color: #333;
    border-color: #444;
    color: #eee;
}

.theme-dark .ascii-option:hover {
    background-color: #444;
    border-color: #555;
}

.theme-dark .ascii-display {
    background-color: #111;
    border: 1px solid #444;
}

.theme-dark #ascii-output {
    color: #a9c4f5;
}

.theme-midnight .ascii-art-content h2 {
    color: #8fb3ff;
}

.theme-midnight .ascii-option {
    background-color: #051940;
    border-color: #1a3366;
    color: #eee;
}

.theme-midnight .ascii-option:hover {
    background-color: #0a2955;
    border-color: #264a80;
}

.theme-midnight .ascii-display {
    background-color: #000;
    border: 1px solid #1a3366;
}

.theme-midnight #ascii-output {
    color: #8fb3ff;
}

/* Weather Widget */
.weather-widget {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 220px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 100;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.weather-header {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #006039;
    color: white;
}

.weather-header i {
    margin-right: 8px;
    font-size: 16px;
}

.weather-content {
    padding: 15px;
}

.weather-location {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
}

.weather-temp-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.weather-icon {
    font-size: 32px;
    margin-right: 15px;
    color: #006039;
}

.weather-temp {
    font-size: 28px;
    font-weight: 600;
    color: #333;
}

.weather-description {
    font-size: 14px;
    margin-bottom: 12px;
    color: #555;
}

.weather-details {
    display: flex;
    justify-content: space-between;
}

.weather-detail {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #666;
}

.weather-detail i {
    margin-right: 5px;
    color: #006039;
}

/* Theme-specific weather widget styles */
.theme-miami .weather-widget {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ff00aa;
}

.theme-miami .weather-header {
    background: linear-gradient(135deg, #ff00aa, #00c3ff);
}

.theme-miami .weather-icon,
.theme-miami .weather-detail i {
    color: #ff00aa;
}

.theme-dark .weather-widget {
    background-color: rgba(40, 44, 52, 0.85);
    border: 1px solid #555;
}

.theme-dark .weather-header {
    background-color: #1e2127;
}

.theme-dark .weather-location,
.theme-dark .weather-temp,
.theme-dark .weather-description {
    color: #e6e6e6;
}

.theme-dark .weather-detail {
    color: #bbb;
}

.theme-dark .weather-icon,
.theme-dark .weather-detail i {
    color: #61afef;
}

.theme-midnight .weather-widget {
    background-color: rgba(13, 17, 23, 0.85);
    border: 1px solid #30363d;
}

.theme-midnight .weather-header {
    background-color: #0d1117;
}

.theme-midnight .weather-location,
.theme-midnight .weather-temp,
.theme-midnight .weather-description {
    color: #c9d1d9;
}

.theme-midnight .weather-detail {
    color: #8b949e;
}

.theme-midnight .weather-icon,
.theme-midnight .weather-detail i {
    color: #58a6ff;
}

/* Adding styles for the Tools window and components at the end of the file */

/* Tools icon styling */
.tools-icon {
    background-color: #2b3a55;
    color: #fff;
}

.theme-miami .tools-icon {
    background: linear-gradient(135deg, #ff6b6b, #ff9e7d);
    color: #fff;
}

.theme-dark .tools-icon {
    background-color: #444;
    color: #0cd0e6;
}

.theme-midnight .tools-icon {
    background-color: #1a1a2e;
    color: #7b68ee;
}

/* Tools content styling */
.tools-content {
    padding: 20px;
    overflow-y: auto;
}

.tools-content h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.tools-content h3 i {
    margin-right: 8px;
}

.tools-content p {
    margin-bottom: 20px;
}

.tools-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 15px;
}

.category-btn {
    padding: 8px 15px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.category-btn:hover {
    background-color: #e9e9e9;
}

.category-btn.active {
    background-color: #0078d7;
    color: #fff;
    border-color: #0078d7;
}

.tools-search {
    position: relative;
    margin-bottom: 20px;
}

.tools-search input {
    width: 100%;
    padding: 10px 15px 10px 35px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.95rem;
}

.tools-search i {
    position: absolute;
    left: 12px;
    top: 12px;
    color: #777;
}

.tools-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tool-item {
    display: flex;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.tool-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.theme-miami .tool-item {
    background-color: #fff1f8;
    border-color: #ff9bca;
}

.theme-dark .tool-item {
    background-color: #333;
    border-color: #444;
}

.theme-midnight .tool-item {
    background-color: #1f1f35;
    border-color: #372f6e;
}

.tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #f0f6ff;
    border-radius: 8px;
    margin-right: 15px;
    flex-shrink: 0;
}

.tool-icon i {
    font-size: 28px;
    color: #0078d7;
}

.theme-miami .tool-icon {
    background-color: #ffe0f0;
}

.theme-dark .tool-icon {
    background-color: #272727;
}

.theme-midnight .tool-icon {
    background-color: #28284e;
}

.tool-details {
    flex: 1;
}

.tool-details h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.tool-details p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.theme-dark .tool-details p {
    color: #bbb;
}

.theme-midnight .tool-details p {
    color: #a9a9c8;
}

.tool-description {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #555;
    margin-bottom: 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, margin-bottom 0.3s ease;
}

.tool-item.expanded .tool-description {
    max-height: 120px;
    margin-bottom: 15px;
}

.theme-dark .tool-description {
    color: #999;
}

.theme-midnight .tool-description {
    color: #8585ad;
}

.tool-actions {
    display: flex;
    gap: 10px;
}

.tool-action-btn {
    padding: 7px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid #ccc;
}

.tool-action-btn i {
    margin-right: 5px;
}

.tool-action-btn:hover {
    background-color: #f5f5f5;
}

.tool-action-btn[data-action="open-tool"] {
    background-color: #0078d7;
    color: #fff;
    border-color: #0078d7;
}

.tool-action-btn[data-action="open-tool"]:hover {
    background-color: #0066b8;
}

.tool-info-toggle {
    padding: 7px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid #ccc;
}

.tool-info-toggle i {
    margin-right: 5px;
}

.tool-info-toggle:hover {
    background-color: #f5f5f5;
}

.tool-item.expanded .tool-info-toggle {
    background-color: #f0f0f0;
}

.tools-footer {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.1);
    font-size: 0.85rem;
    color: #666;
}

.tools-footer p {
    margin-bottom: 8px;
}

.tools-footer i {
    margin-right: 5px;
}

.theme-miami .category-btn.active {
    background-color: #ff2a98;
    border-color: #ff2a98;
}

.theme-dark .category-btn {
    background-color: #444;
    border-color: #555;
    color: #ddd;
}

.theme-dark .category-btn:hover {
    background-color: #505050;
}

.theme-dark .category-btn.active {
    background-color: #46a7ff;
    border-color: #46a7ff;
    color: #fff;
}

.theme-dark .tools-search input {
    background-color: #333;
    border-color: #444;
    color: #ddd;
}

.theme-dark .tools-search i,
.theme-dark .tools-footer {
    color: #aaa;
}

.theme-dark .tool-info-toggle,
.theme-dark .tool-action-btn {
    border-color: #555;
    color: #ddd;
}

.theme-dark .tool-info-toggle:hover,
.theme-dark .tool-action-btn:hover {
    background-color: #444;
}

.theme-dark .tool-item.expanded .tool-info-toggle {
    background-color: #444;
}

.theme-midnight .category-btn {
    background-color: #232346;
    border-color: #373764;
    color: #ddd;
}

.theme-midnight .category-btn:hover {
    background-color: #2d2d56;
}

.theme-midnight .category-btn.active {
    background-color: #7b68ee;
    border-color: #7b68ee;
    color: #fff;
}

.theme-midnight .tools-search input {
    background-color: #1a1a33;
    border-color: #373764;
    color: #ddd;
}

.theme-midnight .tools-search i,
.theme-midnight .tools-footer {
    color: #9999b9;
}

.theme-midnight .tool-info-toggle,
.theme-midnight .tool-action-btn {
    border-color: #373764;
    color: #ddd;
}

.theme-midnight .tool-info-toggle:hover,
.theme-midnight .tool-action-btn:hover {
    background-color: #272750;
}

.theme-midnight .tool-item.expanded .tool-info-toggle {
    background-color: #272750;
}

.theme-midnight .tools-footer {
    border-color: rgba(255,255,255,0.1);
}

.theme-dark .tools-footer {
    border-color: rgba(255,255,255,0.1);
}

.theme-midnight .tool-action-btn[data-action="open-tool"] {
    background-color: #7b68ee;
    border-color: #7b68ee;
}

.theme-midnight .tool-action-btn[data-action="open-tool"]:hover {
    background-color: #6a57dd;
}

.theme-dark .tool-action-btn[data-action="open-tool"] {
    background-color: #46a7ff;
    border-color: #46a7ff;
}

.theme-dark .tool-action-btn[data-action="open-tool"]:hover {
    background-color: #3596ee;
}

/* Classic theme icon styling */
.theme-classic .icon-text {
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.6);
}

.theme-classic .icon-img {
    background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #444;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.theme-classic .icon:hover {
    background-color: rgba(220, 220, 220, 0.5);
}

.theme-classic .icon:hover .icon-img {
    background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
    color: #222;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 1);
}

/* Specific icon styling */
.help-icon i { color: #4285f4; }
.services-icon i { color: #ea4335; }
.compliance-icon i { color: #34a853; }
.security-icon i { color: #fbbc05; }
.contact-icon i { color: #673ab7; }
.about-icon i { color: #ff6d00; }
.tools-icon i { color: #0097a7; }

/* Theme-specific icon colors */
.theme-dark .help-icon i { color: #5c9aff; }
.theme-dark .services-icon i { color: #ff7875; }
.theme-dark .compliance-icon i { color: #52d273; }
.theme-dark .security-icon i { color: #ffd54f; }
.theme-dark .contact-icon i { color: #b39ddb; }
.theme-dark .about-icon i { color: #ff9e40; }
.theme-dark .tools-icon i { color: #4dd0e1; }

.theme-midnight .help-icon i { color: #5c9aff; }
.theme-midnight .services-icon i { color: #ff7875; }
.theme-midnight .compliance-icon i { color: #52d273; }
.theme-midnight .security-icon i { color: #ffd54f; }
.theme-midnight .contact-icon i { color: #b39ddb; }
.theme-midnight .about-icon i { color: #ff9e40; }
.theme-midnight .tools-icon i { color: #4dd0e1; }

.theme-miami .help-icon i { color: #fff; }
.theme-miami .services-icon i { color: #fff; }
.theme-miami .compliance-icon i { color: #fff; }
.theme-miami .security-icon i { color: #fff; }
.theme-miami .contact-icon i { color: #fff; }
.theme-miami .about-icon i { color: #fff; }
.theme-miami .tools-icon i { color: #fff; }