:root{
    --cute-bg-1:#fff6fb;
    --cute-bg-2:#f4fff7;
    --cute-bg-3:#f2f8ff;
    --cute-primary:#ff77b7;
    --cute-primary-2:#7cc7ff;
    --cute-text:#3f4a63;
    --cute-muted:#7b88a8;
}
body{
    background:
        radial-gradient(circle at 8% 8%, #ffd9ee 0 6%, transparent 7%),
        radial-gradient(circle at 92% 12%, #d9eeff 0 7%, transparent 8%),
        linear-gradient(135deg, var(--cute-bg-1), var(--cute-bg-2) 48%, var(--cute-bg-3));
    color:var(--cute-text);
}
.article-shell{max-width:1180px;margin:0 auto;padding:10px 14px 26px;}
.hero{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    padding:26px 22px;
    background:linear-gradient(120deg,#ffffffd6,#fff0f8d6,#ecf9ffd6);
    box-shadow:0 16px 35px rgba(104,126,175,.15);
    border:1px solid rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
}
.hero::before,.hero::after{
    content:"";position:absolute;border-radius:999px;z-index:0;
    background:linear-gradient(135deg,#ffc2e3,#bfe9ff);
    opacity:.35;
}
.hero::before{width:180px;height:180px;right:-40px;top:-40px;}
.hero::after{width:120px;height:120px;left:-30px;bottom:-30px;}
.hero h1,.hero p,.hero .chips{position:relative;z-index:1;}
.hero h1{font-size:30px;margin:0 0 10px;font-weight:900;letter-spacing:.5px;}
.hero p{margin:0;color:var(--cute-muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chip{
    border-radius:999px;padding:7px 13px;font-size:13px;
    background:#fff;border:1px solid #ffd5e9;color:#e2589f;
}

.toolbar{
    margin-top:16px;
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:10px;
    align-items:center;
    background:#ffffffcc;
    border:1px solid #eef2ff;
    border-radius:16px;
    padding:12px;
}
.toolbar input,.toolbar select{
    border:1px solid #e5eafe;border-radius:12px;padding:10px 12px;
    background:#fff;color:#445270;
}

.article-grid{
    margin-top:16px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.article-card{
    display:flex;flex-direction:column;gap:10px;
    background:#fff;
    border:1px solid #ebeffa;
    border-radius:18px;
    padding:14px;
    box-shadow:0 10px 24px rgba(58,88,141,.08);
    text-decoration:none;
    color:inherit;
    transition:transform .2s ease, box-shadow .2s ease;
}
.article-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(58,88,141,.14)}
.article-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.badge-year{
    font-size:12px;border-radius:999px;padding:4px 9px;
    background:linear-gradient(90deg,#ffd2ea,#d7efff);
    color:#6a4f77;font-weight:700;
}
.date{font-size:12px;color:#8a96b2}
.title{font-size:18px;font-weight:800;line-height:1.35;color:#2f3c5a;margin:0}
.desc{font-size:14px;color:#657391;line-height:1.6;margin:0;min-height:44px}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.read-btn{
    font-size:13px;font-weight:700;color:#fff;background:linear-gradient(90deg,#ff7cbc,#7fc8ff);
    border-radius:999px;padding:7px 12px;
}

.empty-tip{text-align:center;padding:26px;color:#8a97b3;display:none}

@media (max-width:980px){
    .article-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:700px){
    .hero h1{font-size:24px}
    .toolbar{grid-template-columns:1fr;}
    .article-grid{grid-template-columns:1fr;}
}