@media (max-width: 1024px){
  .login-screen,.main-grid{grid-template-columns:1fr}
  .login-hero{padding:42px 22px}
  .card{margin:18px auto;box-shadow:0 8px 24px rgba(0,0,0,.08)}
  .feature-row{grid-template-columns:1fr}
  .main-grid{grid-template-columns:1fr}
  .map-wrap{min-height:60vh}
}

@media (max-width: 640px){
  .dashboard{padding:12px}
  .map-wrap{min-height:58vh}
  .floating-info{left:12px;right:12px;top:12px;flex-direction:column;align-items:flex-start}
  .controls{right:12px;bottom:12px}
  .bottom-pill{left:12px;bottom:12px}
  .grid2{grid-template-columns:1fr}
}

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

    .playback-actions{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:768px)
{
    .header
    {
        flex-direction:column;

        align-items:flex-start;
    }

    .header-right
    {
        margin-top:15px;

        width:100%;

        display:flex;

        justify-content:space-between;

        align-items:center;
    }

     .session-info
     {
        font-size: 14px;
        padding: 6px 10px;
     }

    #logoutBtn
    {
        background: #ff3f8e;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        padding: 10px 24px;
        font-weight: 600;
        cursor: pointer;
        transition: .2s;
    }

    #logoutBtn:hover
    {
        /*background: #f8fafc;*/
        border-color: #9333ea;
    }

    

    .graph-summary
    {
        width:100%;

        justify-content:space-between;

        margin-top:15px;
    }

    .chart-container
    {
        height:260px;
    }
}

@media (min-width: 769px)
{
    .header{
        flex-direction:row;
        justify-content:space-between;
        align-items:flex-start;
    }

    .header-right{
        width:auto;
        margin-top:0;
    }

     .session-info
     {
        font-size: 18px;
        padding: 8px 14px;
     }

    #logoutBtn
    {
        background:#fff5f7;
        border-color:#fecdd3;
        color:#be123c;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        padding: 10px 24px;
        font-weight: 600;
        cursor: pointer;
        transition: .2s;
    }

    #logoutBtn:hover
    {
        background: #f8fafc;
        border-color: #9333ea;
    }
}

@media (max-width:768px)
{
    .site-title
    {
        font-size:38px;
    }

    .dashboard-title
    {
        font-size:15px;
    }

    .logged-user
    {
        font-size:17px;
    }
}

@media (max-width: 768px) {

    .login-visual {
        display: none;
    }

    .login-tagline {
        display: none;
    }

    .login-panel {
        position: relative;

        top: auto;
        left: auto;

        transform: none;

        width: 100%;
        min-height: 100vh;

        padding: 35px 24px;

        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 768px) {

    .mobile-tagline {
        display: block;

        margin: 18px 0 32px;

        color: #64748b;

        font-size: 15px;
        line-height: 1.6;
    }

    .mobile-tagline strong {
        display: block;

        margin-top: 4px;

        color: #111827;
    }
}