/* ============================================
   LAYOUT STYLES
   Container, Header, Grid, Footer
   ============================================ */

/* Container */
.container { 
    max-width: 1280px; 
    margin: 0 auto; 
    padding: var(--spacing-xl) var(--spacing-lg); 
}

/* Header */
header { 
    text-align: center; 
    margin-bottom: 40px; 
    padding: 20px 0; 
}

.logo-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-bottom: 12px;
}

.logo-svg {
    height: 48px;
    width: auto;
    display: block;
}

header p { 
    color: rgba(255,255,255,0.85); 
    font-size: 15px; 
    font-weight: 500; 
}

/* Main Grid Layout */
.main-grid { 
    display: grid; 
    grid-template-columns: 1fr 400px; 
    gap: 28px; 
    align-items: start; 
}

@media (max-width: 1000px) { 
    .main-grid { 
        grid-template-columns: 1fr; 
    } 
}

/* Sidebar */
.sidebar { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

/* Card Component */
.card { 
    background: var(--bg-secondary); 
    border-radius: var(--radius-xl); 
    box-shadow: 0 8px 32px var(--shadow-lg); 
    padding: var(--spacing-lg);
}

.card-title { 
    font-size: 16px; 
    font-weight: 700;
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; 
    gap: 12px;
    color: var(--text-primary);
}

.card-title .number { 
    width: 32px; 
    height: 32px; 
    background: var(--bg-primary); 
    color: white; 
    border-radius: var(--radius-md); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 14px; 
    font-weight: 700;
}

/* Footer */
footer { 
    text-align: center; 
    margin-top: 40px; 
    padding: 24px; 
    color: rgba(255,255,255,0.7); 
    font-size: 13px;
}

footer a { 
    color: white; 
    text-decoration: none; 
    font-weight: 600;
}

footer a:hover { 
    text-decoration: underline; 
}