body{margin-top:40px;background:var(--bg-primary)}
.layout-container{display:flex;min-height:100vh}
.sidebar{width:min(40%,max(31%,calc(31% + 9 * (1150px - 100vw) / 382)));min-height:100vh;height:auto;overflow-y:auto;border-right:1px solid var(--border-color)}
.main-content{width:min(69%,max(60%,calc(69% - 9 * (1150px - 100vw) / 382)));padding:0 5px}

/* Brand Reviews */
.brand-reviews-title {
    font-weight:700;
    letter-spacing:.02em;
    text-align:center;
    text-transform:uppercase;
    padding:14px 0;
    margin:0;
    border-bottom:1px solid var(--com-border-color);
    background:#7c7c7c;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--text-primary);
}
.brand-review-card {
    position:relative;
    display:block;
    width:100%;
    height:160px;
    overflow:hidden;
    background:var(--bg-secondary);
    text-decoration:none;
    color:var(--text-primary);
    transition:all 0.3s ease;
}
.brand-review-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    background:var(--bg-primary);
    transition:transform 0.3s ease;
}
.brand-reviews .review-caption-wrap {
    position:absolute;
    left:0;
    right:0;
    bottom:10%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.brand-reviews .review-caption {
    position:static;
    padding:1px 5px;
    background-image:url('https://cdn.phonehubpic.fun/svg/back.png');
    background-repeat:repeat;
    background-size:auto;
    color:#fff;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
}
.brand-reviews .review-title {
    font-size:clamp(0.8rem,2.2vw,1rem);
    font-weight:600;
    line-height:1.3;
    color:#fff;
    text-shadow:1px 1px 2px rgba(0,0,0,.8);
    transition:color 0.3s ease;
}
.brand-review-card:hover .brand-review-image{transform:scale(1.05)}
.brand-review-card:hover .review-title{color:#ff0000 !important}
.brand-review-image{width:-webkit-fill-available}

/* ===== NEWS CARD STYLES (matching index.css) ===== */
.news-card{
    background:var(--bg-bg-rumorcard);
    border:1px solid var(--com-border-color);
    margin:0 10px;
    margin-bottom:calc(0.5vw + 4px);
    display:flex;
    overflow:hidden;
    position:relative;
    align-items:stretch;
    border-radius:0;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    max-height:clamp(163px,15vw,180px);
    min-height:clamp(163px,15vw,180px);
    backdrop-filter:blur(10px);
    transform:translateY(0);
    cursor:pointer;
    text-decoration:none;
    color:var(--text-primary);
}
.news-card:hover{
    transform:translateY(0);
    box-shadow:0 6px 20px rgba(0,0,0,0.12);
    border-color:var(--com-border-color);
}
.news-card::before{content:none !important}
.news-card:hover::before{content:none}
.news-image-container{
    margin:0;
    padding:0;
    position:relative;
    overflow:hidden;
    background-color:var(--com-border-color);
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 40%;
    max-width:40%;
    border-right:1px solid var(--bg-maincontent);
    transition:all 0.3s ease;
}
.news-image-container::after{content:none !important}
.news-img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(0.95);
    transition:filter 0.3s ease;
    image-rendering:-webkit-optimize-contrast;
}
.news-card:hover .news-img{
    transform:none !important;
    filter:brightness(1.12);
}
.news-content{
    width:60%;
    padding:0 4px;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    flex-grow:1;
    flex-shrink:1;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
    overflow-wrap:anywhere;
}
.news-content-inner{
    display:flex;
    flex-direction:column;
    flex-grow:1;
    flex-shrink:1;
    min-width:0;
    overflow:hidden;
    box-sizing:border-box;
    overflow-wrap:anywhere;
}
.news-model{
    font-family:Arial,sans-serif;
    font-size:clamp(17px,1.4vw,23px);
    margin:0;
    line-height:1.3;
    overflow:hidden;
    -webkit-line-clamp:3;
    line-clamp:3;
    color:var(--text-secondary);
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    text-decoration:none !important;
    transition:color 0.2s ease;
}
.news-card:hover .news-model{color:#1991ff !important}
.news-desc{
    color:var(--text-secondary);
    line-height:1.2;
    letter-spacing:0.04em;
    font-size:clamp(13px,1.5vw,14px);
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    opacity:0.85;
    transition:opacity 0.2s ease;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
.news-card:hover .news-desc{opacity:0.85 !important}
.news-time{
    color:var(--text-secondary);
    text-align:end;
    margin-right:4px;
    font-size:clamp(12px,1.5vw,11px);
    opacity:0.7;
    font-weight:600;
    align-self:flex-end;
    margin-top:auto;
    padding-top:8px;
    transition:opacity 0.2s ease;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
.news-card:hover .news-time{opacity:0.7 !important}
.image-not-found{
    display:none;
    color:var(--text-secondary);
    font-size:11px;
    text-align:center;
    padding:10px;
    opacity:0.7;
}

/* News list grid matching index */
.news-list{
    display:grid;
    grid-template-columns:2fr;
    margin-top:10px;
}

/* No data */
.no-data{
    text-align:center;
    padding:50px 20px;
    color:var(--text-secondary);
    font-size:clamp(16px,2vw,22px);
}

/* ===== MEDIA QUERIES (matching index.css) ===== */
@media (max-width:950px){
    .news-card{margin:0}
}
@media (max-width:768px){
    .sidebar{display:none !important}
    .main-content{width:100%}
    .news-card{
        min-height:150px;
        margin-bottom:0;
        margin:0;
        padding:7px 5px;
        border-bottom:1px solid var(--com-border-color);
        background-color:var(--bg-primary);
    }
    .news-img{height:100%;margin-right:0}
    .news-list{margin-top:0}
    .news-model{font-size:17px;line-height:17px;color:var(--text-primary)}
}
@media (max-width:528px){
    .news-image-container{flex:0 0 40%;max-width:40%}
}
@media (max-width:480px){
    .news-card{
        margin:0;
        min-height:100px;
        padding:7px 5px;
        border-bottom:1px solid var(--com-border-color);
        background-color:var(--bg-primary);
    }
    .news-img{height:100%;margin-right:0}
    .news-content{padding:calc(0.5vw + 5px);justify-content:space-between}
    .news-model{font-size:14px;line-height:17px;color:var(--text-primary)}
    .news-desc{display:none}
    .news-time{text-align:start}
    .news-content-inner{flex-grow:0}
}
@media (max-width:319px){
    .news-model{font-size:clamp(13px,1.5vw,14px)}
}

/* ===== DARK THEME (matching index.css) ===== */
[data-theme="dark"] .news-card{
    background:linear-gradient(135deg,var(--bg-bg-rumorcard) 0%,rgba(35,35,35,0.95) 100%);
    border-color:rgba(255,255,255,0.08);
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    border:1px solid rgba(255,255,255,0.05);
}
[data-theme="dark"] .news-card:hover{
    transform:translateY(0);
    box-shadow:0 8px 24px rgba(0,0,0,0.4) !important;
    border-color:rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .news-card::before{content:none !important}
[data-theme="dark"] .news-image-container{
    background:linear-gradient(135deg,rgba(40,40,40,0.9) 0%,rgba(25,25,25,0.95) 100%);
    border-right-color:rgba(255,255,255,0.08);
}
[data-theme="dark"] .news-model{color:var(--text-primary);text-shadow:0 1px 2px rgba(0,0,0,0.3)}
[data-theme="dark"] .news-desc{color:var(--text-secondary);opacity:0.85}
[data-theme="dark"] .news-time{color:var(--text-secondary);opacity:0.6}

/* Overrides to ensure no unwanted hover effects */
.news-card:hover{transform:translateY(0) !important}
.news-card::before{content:none !important}
.news-image-container::after{content:none !important}
.news-card:hover .news-img{transform:none !important;filter:brightness(1.12) !important}
.news-card:hover .news-model{color:#1991ff !important}
.news-card:hover .news-desc{opacity:0.85 !important}
.news-card:hover .news-time{opacity:0.7 !important}