body,html{margin:0;padding:0;font-family:Arial;background:#eee}

/* WRAPPER */
.news-wrapper{
    max-width:800px;
    margin:0 auto;
    background:#fff;
    min-height:100vh;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.news-window{padding:15px;background:#f9f9f9}

.news-item{
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    padding:15px;
    margin-bottom:15px;
}

/* HEADER */
.news-id{
    display:flex;
color:#ffffff;
    justify-content:space-between;
    font-weight:bold;
    margin-bottom:8px;
}

.news-date{font-size:14px;color:#999}

/* IMAGE */
.news-item img{
    max-width:100%;
    border-radius:6px;
    margin-bottom:10px;
    cursor:pointer;
}

/* TEXT */
.news-text{
    max-height:80px;
    overflow:hidden;
    transition:max-height .3s ease;
}
.news-item.expanded .news-text{max-height:3000px}
.news-text p{
    text-align:justify;
    margin:0 0 10px;
    font-size:16px;
}

/* ACTIONS */
.news-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
}

.toggle-btn{
    background:none;
    border:none;
    color:#007bff;
    cursor:pointer;
}

.like-btn{
    background:none;
    border:none;
    cursor:pointer;
    font-size:20px;
    transition:transform .2s;
}
.like-btn:active{transform:scale(1.2)}
.like-btn:disabled{opacity:.5;cursor:not-allowed}

/* BADGE */
.badge-hot{
    background:linear-gradient(45deg,#ff9800,#ff5722);
    color:#fff;
    font-size:12px;
    padding:3px 8px;
    border-radius:12px;
    margin-left:6px;
    animation:pulse 1.5s infinite;
}
@keyframes pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.1)}
    100%{transform:scale(1)}
}

/* TOAST */
#likeToast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:#333;
    color:#fff;
    padding:10px 18px;
    border-radius:20px;
    font-size:14px;
    opacity:0;
    pointer-events:none;
    transition:.3s;
    z-index:9999;
}
#likeToast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* LIGHTBOX */
.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.8);
    display:flex;
    justify-content:center;
    align-items:center;
    visibility:hidden;
    z-index:9999;
}
.lightbox.active{visibility:visible}
.lightbox img{
    max-width:90%;
    max-height:90%;
    border-radius:8px;
}
.lightbox-close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:28px;
    color:#fff;
    cursor:pointer;
}