:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.08);
  --brand:#ff5a7a;
  --brand2:#ff9a3d;
  --shadow:0 10px 30px rgba(2,6,23,.07);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:var(--bg);
}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted);font-size:13px;line-height:1.4}

.topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter: blur(10px);border-bottom:1px solid var(--border)}
.topbar__inner{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 0}

.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit}
.brand__logo{font-weight:800;letter-spacing:.5px;font-size:20px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand__sub{font-size:12px;color:var(--muted)}

.topnav{display:flex;gap:12px;flex:1;justify-content:center}
.topnav a{color:var(--text);text-decoration:none;font-size:14px;padding:6px 10px;border-radius:999px}
.topnav a:hover{background:rgba(255,90,122,.08);color:var(--brand)}

.search{display:flex;gap:8px;align-items:center}
.search input{width:280px;max-width:35vw;padding:10px 12px;border-radius:10px;border:1px solid var(--border);outline:none}
.search input:focus{border-color:rgba(255,90,122,.35);box-shadow:0 0 0 4px rgba(255,90,122,.12)}
.search button{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,90,122,.35);background:rgba(255,90,122,.08);color:var(--brand);cursor:pointer}
.search button:hover{background:rgba(255,90,122,.12)}

.banner{margin:18px 0}
.banner__viewport{border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background:#fff}
.banner__track{display:flex;transition:transform 420ms ease;will-change:transform}
.banner__slide{min-width:100%;height:260px;position:relative}
.banner__slide a{display:block;width:100%;height:100%}
.banner__img{width:100%;height:100%;object-fit:cover;display:block}
.banner__overlay{position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.28) 55%, rgba(255,255,255,0) 100%)}
.banner__text{position:absolute;left:18px;top:18px;right:18px;max-width:62%}
.banner__title{margin:0 0 6px 0;font-size:22px;font-weight:900}
.banner__sub{margin:0;color:var(--muted);font-size:14px}
.banner__dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
.banner__dot{width:9px;height:9px;border-radius:999px;border:1px solid rgba(255,90,122,.28);background:rgba(255,90,122,.10);cursor:pointer}
.banner__dot.is-active{background:rgba(255,90,122,.70);border-color:rgba(255,90,122,.70)}

.hero{display:grid;grid-template-columns: 2.2fr 1fr;gap:16px;margin:18px 0}
.hero__left{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:16px;position:relative;overflow:hidden}
.hero__left::before{content:"";position:absolute;inset:-40px;background:radial-gradient(circle at 15% 20%, rgba(255,90,122,.16) 0%, rgba(255,90,122,0) 45%), radial-gradient(circle at 80% 10%, rgba(255,154,61,.16) 0%, rgba(255,154,61,0) 45%), radial-gradient(circle at 60% 90%, rgba(14,165,233,.14) 0%, rgba(14,165,233,0) 50%);pointer-events:none}
.hero__left > *{position:relative;z-index:1}
.hero__left h2{margin:0 0 10px 0;font-size:18px}
.hero__right .card{height:100%}

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:16px}

.hotlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hotitem{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:12px;border:1px solid var(--border)}
.hotitem:hover{border-color:rgba(255,90,122,.25);background:rgba(255,255,255,.6)}
.hotitem a{color:var(--text);text-decoration:none;font-weight:600}
.hotitem a:hover{color:var(--brand)}
.hotitem .meta{color:var(--muted);font-size:12px;white-space:nowrap}

.pillgrid{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 8px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);text-decoration:none;color:var(--text);font-size:13px}
.pill:hover{border-color:rgba(255,90,122,.25);color:var(--brand)}

.adbox{display:block;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:#fff}
.adbox:hover{border-color:rgba(255,90,122,.25)}
.adbox__img{width:100%;height:160px;object-fit:cover;display:block}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
.block{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:14px}
.block__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.block__hd h3{margin:0;font-size:16px}

.tabs{display:flex;gap:6px}
.tab{border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted);cursor:pointer}
.tab.is-active{border-color:rgba(255,90,122,.35);color:var(--brand);background:rgba(255,90,122,.08)}

.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.list li{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:8px 10px;border-radius:12px;border:1px solid var(--border)}
.list li:hover{border-color:rgba(255,90,122,.25)}
.list a{color:var(--text);text-decoration:none;font-size:14px;line-height:1.35}
.list a:hover{color:var(--brand)}
.list .tag{font-size:12px;color:var(--muted);white-space:nowrap}
.is-hidden{display:none}

.albums{margin:18px 0}
.albums__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.albums__hd h3{margin:0;font-size:16px}
.more{font-size:13px;color:var(--muted);text-decoration:none}
.more:hover{color:var(--brand)}

.albumgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.album{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.album__cover{height:110px;
  background:linear-gradient(135deg, rgba(255,90,122,.18), rgba(255,154,61,.20));
  background-size:cover;
  background-position:center;
  display:flex;align-items:flex-end;padding:10px;position:relative;
}
.album__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.68) 100%)}
.album__cover span{position:relative;z-index:1;font-size:12px;color:rgba(15,23,42,.75);font-weight:600}
.album__body{padding:10px}
.album__title{margin:0 0 6px 0;font-weight:700;font-size:13px}
.album__meta{color:var(--muted);font-size:12px}

.forum{margin:18px 0 40px}
.forum__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.forum__links a{display:inline-block;padding:8px 10px;border-radius:10px;border:1px solid var(--border);text-decoration:none;color:var(--text);font-size:13px}
.forum__links a:hover{border-color:rgba(255,90,122,.25);color:var(--brand)}

.footer{border-top:1px solid var(--border);background:#fff;padding:18px 0}
.footer__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.footer__links{display:flex;gap:12px;flex-wrap:wrap}
.footer__links a{color:var(--muted);text-decoration:none;font-size:13px}
.footer__links a:hover{color:var(--brand)}

/* Post page */
.post{padding:18px}
.post__crumb{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.post__back{color:var(--muted);text-decoration:none;font-size:13px}
.post__back:hover{color:var(--brand)}
.post__title{margin:6px 0 10px 0;line-height:1.25;font-size:24px}
.post__meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:13px}
.post__dot{opacity:.6}
.post__lead{margin:12px 0 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,90,122,.05)}
.post__lead p{margin:0;color:rgba(15,23,42,.82);line-height:1.65}
.post__body{margin-top:12px;line-height:1.85;font-size:15px}
.post__body p{margin:0 0 12px 0}
.post__hr{border:none;border-top:1px solid var(--border);margin:16px 0}
.post__footer{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.post__tags{display:flex;gap:8px;flex-wrap:wrap}
.tagpill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);text-decoration:none;color:var(--muted);font-size:12px;background:#fff}
.tagpill:hover{border-color:rgba(255,90,122,.25);color:var(--brand)}

@media (max-width: 920px){
  .grid{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .topnav{display:none}
  .albumgrid{grid-template-columns:repeat(2,1fr)}
  .search input{width:220px;max-width:50vw}
  .banner__slide{height:210px}
  .banner__text{max-width:92%}
}