:root {
    --lechler-blue: #003D8F;
}

.glass-container {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
    color: var(--lechler-blue);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    will-change: transform, background-color;
}

.glass-container:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

.glass-container.no-zoom:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.4);
    z-index: 1;
}

.title-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.title-container {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 1rem;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 15px 20px rgba(0, 0, 0, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    margin: 1.5rem auto 2.5rem;
    padding: 1.25rem 3rem;
    max-width: fit-content;
    min-width: 600px;
    transform: translateY(-5px);
}

.title-text {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    -webkit-text-stroke: 1px rgba(0, 61, 143, 0.3);
    text-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(0, 61, 143, 0.3),
        -1px -1px 0 rgba(0, 61, 143, 0.2),
        1px -1px 0 rgba(0, 61, 143, 0.2),
        -1px 1px 0 rgba(0, 61, 143, 0.2),
        1px 1px 0 rgba(0, 61, 143, 0.2);
    color: var(--lechler-blue);
}

.section-title {
    font-weight: 700;
    -webkit-text-stroke: 0.5px rgba(0, 61, 143, 0.2);
    text-shadow:
        -1px -1px 0 rgba(0, 61, 143, 0.1),
        1px -1px 0 rgba(0, 61, 143, 0.1),
        -1px 1px 0 rgba(0, 61, 143, 0.1),
        1px 1px 0 rgba(0, 61, 143, 0.1);
}

.welcome-card {
    max-width: 600px;
    margin: 2rem auto;
    transform: translateY(-5px);
}

.apps-container {
    max-width: 1000px;
    margin: 2rem auto;
    background: rgba(255, 255, 255, 0.2);
}

.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Debug styles - apply .sDebugStyle1..16 to any element for visual debugging */
.sDebugStyle1  { border: 3px solid #FF0000 !important; color: #FF0000 !important; } /* Red */
.sDebugStyle2  { border: 3px solid #00FF00 !important; color: #00FF00 !important; } /* Lime */
.sDebugStyle3  { border: 3px solid #0000FF !important; color: #0000FF !important; } /* Blue */
.sDebugStyle4  { border: 3px solid #FF00FF !important; color: #FF00FF !important; } /* Magenta */
.sDebugStyle5  { border: 3px solid #00FFFF !important; color: #00FFFF !important; } /* Cyan */
.sDebugStyle6  { border: 3px solid #FFA500 !important; color: #FFA500 !important; } /* Orange */
.sDebugStyle7  { border: 3px solid #FFD700 !important; color: #FFD700 !important; } /* Gold */
.sDebugStyle8  { border: 3px solid #8B00FF !important; color: #8B00FF !important; } /* Violet */
.sDebugStyle9  { border: 3px solid #FF1493 !important; color: #FF1493 !important; } /* DeepPink */
.sDebugStyle10 { border: 3px solid #00CED1 !important; color: #00CED1 !important; } /* DarkTurquoise */
.sDebugStyle11 { border: 3px solid #32CD32 !important; color: #32CD32 !important; } /* LimeGreen */
.sDebugStyle12 { border: 3px solid #DC143C !important; color: #DC143C !important; } /* Crimson */
.sDebugStyle13 { border: 3px solid #4169E1 !important; color: #4169E1 !important; } /* RoyalBlue */
.sDebugStyle14 { border: 3px solid #FF6347 !important; color: #FF6347 !important; } /* Tomato */
.sDebugStyle15 { border: 3px solid #2E8B57 !important; color: #2E8B57 !important; } /* SeaGreen */
.sDebugStyle16 { border: 3px solid #DAA520 !important; color: #DAA520 !important; } /* Goldenrod */