/* =========================================
   EMPTY STATE
========================================= */

.empty-state{

    margin-top:42px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:28px;

    padding:60px 32px;

    text-align:center;

    backdrop-filter:blur(12px);
}

.empty-state h2{

    font-size:2rem;

    margin-bottom:16px;

    font-weight:700;
}

.empty-state p{

    color:#b3b3b3;

    line-height:1.9;

    max-width:600px;

    margin:auto;
}



/* =========================================
   SAVED GRID
========================================= */

.saved-grid{

    display:grid;

    grid-template-columns:repeat(
        auto-fit,
        minmax(320px,1fr)
    );

    gap:24px;

    margin-top:38px;
}



/* =========================================
   SAVED CARD
========================================= */

.saved-card{

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:28px;

    padding:28px;

    backdrop-filter:blur(12px);

    transition:0.25s ease;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:300px;
}

.saved-card:hover{

    transform:translateY(-2px);

    border-color:rgba(255,255,255,0.14);
}



/* =========================================
   TOP SECTION
========================================= */

.saved-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;
}



/* =========================================
   BADGE
========================================= */

.saved-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,0,120,0.12);

    border:1px solid rgba(255,0,120,0.24);

    color:#ff8cc6;

    font-size:0.78rem;

    font-weight:600;

    text-transform:capitalize;
}



/* =========================================
   TITLE
========================================= */

.saved-card h3{

    font-size:1.2rem;

    line-height:1.5;

    margin-bottom:18px;

    font-weight:700;
}



/* =========================================
   CONTENT
========================================= */

.saved-card p{

    color:#c2c2c2;

    line-height:1.9;

    font-size:0.95rem;

    flex:1;
}



/* =========================================
   FOOTER
========================================= */

.saved-footer{

    margin-top:26px;
}



/* =========================================
   COPY BUTTON
========================================= */

.copy-btn{

    width:100%;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    color:white;

    border-radius:14px;

    padding:14px 18px;

    font-size:0.92rem;

    font-weight:600;

    cursor:pointer;

    transition:0.25s ease;
}

.copy-btn:hover{

    background:rgba(255,255,255,0.09);

    transform:translateY(-2px);
}



/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

    .saved-grid{

        grid-template-columns:1fr;
    }

    .saved-card{

        padding:24px;

        min-height:auto;
    }

    .empty-state{

        padding:48px 24px;
    }

    .empty-state h2{

        font-size:1.6rem;
    }

}