:root {
    --app-max-width: 1040px;
    /* Responsive gutters using clamp */
    --app-gutter: clamp(16px, 4vw, 32px);
    --app-section-gap: clamp(16px, 2.5vw, 28px);
    
}

/* 
   APP LAYOUT UTILITIES 
   Single source of truth for Home & Profile layout 
*/

.app-container {
    width: min(var(--app-max-width), calc(100vw - 24px));
    margin: 0 auto;

    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* Ensure navbar inner container matches app content exactly */
.navbar.compact .app-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Standard page wrapper to handle top spacing consistently */
.app-page {
    padding-top: var(--app-section-gap);
    min-height: calc(100vh - var(--header-height-compact));
    position: relative;
    z-index: 2;
}

.mk4-app .app-page {
    background-color: #1a1a1c38;
    padding: 20px;
    top: 76px;
    border-radius: 15px;
}

/* Shared Glass Card Style */
.glass-card {
    border-radius: var(--radius-card);
    padding: 1.5rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
    transition: transform 0.2s ease, border-color 0.2s ease;
    background:rgba(97, 101, 119, 0.05);
}

.glass-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.1);
}