/* ═══════════════════════════════════════════════════════════
   📄 css/base.css - Base Styles & Layout
   ═══════════════════════════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    min-height: 100vh;
    padding: var(--spacing-lg);
    padding-bottom: 120px;
    color: var(--text-primary);
    transition: background var(--transition-normal), color var(--transition-normal);
}

/* ═══ App Container ═══ */
.app-container {
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr 420px;
    gap: var(--spacing-lg);
    position: relative;
}

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: var(--radius-lg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

/* ═══ Responsive ═══ */
@media (max-width: 1600px) {
    .app-container {
        grid-template-columns: 240px 1fr 380px;
    }
}