:root{
    --bg:#f8fafc;
    --surface:#fff;
    --text:#1e293b;
    --strong:#0f172a;
    --muted:#64748b;
    --light:#94a3b8;
    --border:#e2e8f0;
    --primary:#4f46e5;
    --dark:#3730a3;
    --soft:#eef2ff
}

*{
    box-sizing:border-box
}

html{
    scroll-behavior:smooth
}

body{
    margin:0;
    min-height:100vh;
    padding-bottom:48px;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased
}

a{
    color:inherit;text-decoration:none
}
    
button,input{font:inherit}

.site-header{
    position:sticky;
    top:0;z-index:50;height:64px;
    background:rgba(255,255,255,.84);border-bottom:1px solid rgba(226,232,240,.9);
    backdrop-filter:blur(12px)
}

.header-inner{
    width:min(calc(100% - 32px),1024px);height:64px;margin:auto;display:flex;align-items:center;
    justify-content:space-between
}

.brand{display:inline-flex;align-items:center;gap:9px}
.brand-icon{font-size:25px}
.brand-name{
    font-size:19px;font-weight:750;background:linear-gradient(90deg,#4f46e5,#7c3aed);
    -webkit-background-clip:text;background-clip:text;color:transparent
}

.record-count{
    padding:6px 10px;border-radius:999px;background:var(--soft);color:var(--primary);
    font-size:12px;font-weight:650
}

.page-main{width:min(calc(100% - 32px),1024px);margin:24px auto 0}

.hero{
    position:relative;overflow:hidden;padding:44px 42px;border-radius:28px;
    color:#fff;background:linear-gradient(135deg,#312e81,#1e1b4b 55%,#0f172a);
    box-shadow:0 18px 40px rgba(30,27,75,.18)
}

.hero-glow{
    position:absolute;width:190px;height:190px;
    border-radius:50%;filter:blur(50px);opacity:.28
}

.hero-glow-right{right:-60px;top:-65px;background:#6366f1}
.hero-glow-left{left:-60px;bottom:-75px;background:#8b5cf6}
.hero-content{position:relative;z-index:1;max-width:760px}
.hero-badge{
    display:inline-flex;padding:7px 11px;
    border-radius:999px;background:rgba(99,102,241,.28);
    color:#c7d2fe;font-size:12px;font-weight:650
}

.hero h1{
    margin:17px 0 12px;
    font-size:clamp(28px,4.2vw,33px);
    line-height:1.24;
    letter-spacing:-.9px;
}
.hero p{margin:0;color:#cbd5e1;font-size:15px;line-height:1.9}
.search-form{margin-top:24px}

.search-box{
    display:flex;align-items:center;gap:2px;min-height:54px;padding:7px;
    border-radius:16px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.22)
}

.search-icon{width:21px;height:21px;margin-left:13px;fill:none;stroke:#94a3b8;stroke-width:2}
.search-box input{
    width:100%;min-width:0;height:40px;padding:0 13px;border:0;
    outline:0;color:#1e293b;font-size:15px
}

.search-box button{
    width:80px;
    height:40px;
    padding:0 22px;border:0;
    border-radius:12px;
    background:var(--primary);
    color:#fff;cursor:pointer;
    font-size:14px;
    font-weight:650;
}

.search-box button:hover{background:var(--dark)}


.tag-section{margin-top:32px}
.article-section{margin-top:34px}
.section-heading{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-bottom:14px
}
.section-title{
    display:flex;align-items:center;margin:0;color:var(--strong);font-size:20px;
    line-height:1.4;font-weight:750
}

.section-icon{margin-right:9px;font-size:19px}
.all-tags{color:var(--primary);font-size:13px;font-weight:650}
.tag-cloud{display:flex;flex-wrap:wrap;gap:9px}
.topic-tag{
    display:inline-flex;align-items:center;gap:8px;padding:8px 12px;
    border:1px solid var(--border);border-radius:11px;background:#fff;
    color:#475569;font-size:13px
}

.topic-tag:hover{border-color:#a5b4fc;background:#f8f9ff}
.topic-name{font-weight:600}
.topic-count{padding:3px 7px;border-radius:6px;background:#f1f5f9;color:#94a3b8;font-size:11px}
.no-tags{color:var(--light);font-size:13px}
.sort-tabs{display:inline-flex;padding:4px;border-radius:10px;background:rgba(226,232,240,.75)}
.sort-tab{
    min-width:52px;padding:7px 13px;border:0;border-radius:7px;background:transparent;
    color:var(--muted);cursor:pointer;font-size:13px
}

.sort-tab.active{background:#fff;color:var(--text);font-weight:650;box-shadow:0 1px 4px rgba(15,23,42,.1)}.article-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.article-card{min-width:0;min-height:250px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--border);border-radius:19px;background:#fff;transition:.2s}.article-card:hover{border-color:#c7d2fe;box-shadow:0 12px 28px rgba(15,23,42,.08);transform:translateY(-2px)}.article-title{margin:0;color:var(--strong);font-size:21px;line-height:1.5;font-weight:750}.article-title a:hover{color:var(--primary)}.article-description{display:-webkit-box;margin:11px 0 0;overflow:hidden;color:var(--muted);font-size:14px;line-height:1.85;-webkit-box-orient:vertical;-webkit-line-clamp:3}.article-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:23px;padding-top:16px;border-top:1px solid #f1f5f9;color:var(--light);font-size:13px}.article-views{display:inline-flex;align-items:center}.article-views svg{width:16px;height:16px;margin-right:5px;fill:none;stroke:currentColor;stroke-width:1.8}.article-date{white-space:nowrap}.empty-state{grid-column:1/-1;padding:60px 20px;border:1px solid var(--border);border-radius:19px;background:#fff;text-align:center}.empty-icon{color:#cbd5e1;font-size:34px}.empty-state p{color:var(--light);font-size:13px}.site-footer{margin-top:46px;padding-top:24px;border-top:1px solid var(--border);text-align:center}.site-footer p{color:var(--light);font-size:12px}@media(max-width:760px){.header-inner,.page-main{width:min(calc(100% - 24px),1024px)}.site-header,.header-inner{height:58px}.brand-name{font-size:18px}.hero{padding:32px 22px;border-radius:23px}.hero h1{font-size:30px}.hero p{font-size:14px}.search-box input{font-size:14px}.article-grid{grid-template-columns:1fr}.article-card{min-height:0;padding:22px}.article-title{font-size:20px}}@media(max-width:430px){.hero{padding:27px 18px}.hero h1{font-size:27px}.hero p{font-size:13px}.record-count{font-size:10px}.section-title{font-size:18px}.article-card{padding:20px}.article-title{font-size:19px}.article-description{font-size:13px}.article-footer{font-size:12px}}