/* Responsive Layouts */
@media (max-width: 980px) {
    .app {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 240px;
        transform: translateX(-102%);
        transition: transform 0.3s ease;
        z-index: 200;
        box-shadow: 20px 0 50px rgba(0,0,0,0.5);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar .logo span,
    .sidebar .nav-item span,
    .sidebar .sidebar-foot {
        display: block;
    }

    .overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 150;
        backdrop-filter: blur(4px);
    }

    .mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 20px;
        background: var(--sidebar-bg);
        border-bottom: 1px solid var(--border);
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-main);
        font-weight: 800;
    }

    .menu-btn {
        background: rgba(255,255,255,0.06);
        border: 1px solid var(--border);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        cursor: pointer;
        color: var(--text-main);
    }

    .main {
        padding: 16px;
    }

    .metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .two, .three {
        grid-template-columns: 1fr;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .login-box {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }

    .form-row, .alert-form {
        grid-template-columns: 1fr;
    }

    .market-grid-row1 {
        grid-template-columns: repeat(2, 1fr);
    }
    .market-grid-row2 {
        grid-template-columns: repeat(3, 1fr);
    }
    .index-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .signal-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .metrics {
        grid-template-columns: 1fr;
    }
    .market-grid-row1, .market-grid-row2, .index-grid {
        grid-template-columns: 1fr;
    }
}