/* 防骗指南网 v3 - 仿chapan.cc风格 */
:root {
  --primary: #1a73e8; --primary-h: #1557b0; --bg: #fff; --bg-sec: #f5f6fa;
  --bg-card: #fff; --text: #1a1a2e; --text-sec: #666; --text-muted: #999;
  --border: #e8e8e8; --danger: #dc3545; --warning: #f59e0b; --info: #3b82f6;
  --safe: #10b981; --radius: 8px;
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}
[data-theme="dark"] {
  --bg: #0f172a; --bg-sec: #1e293b; --bg-card: #1e293b; --text: #e2e8f0;
  --text-sec: #94a3b8; --text-muted: #64748b; --border: #334155;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:16px/1.7 var(--font);color:var(--text);background:var(--bg);transition:background .3s,color .3s}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-h)}
img{max-width:100%;height:auto;display:block}
.container{max-width:1160px;margin:0 auto;padding:0 16px}
.container.narrow{max-width:780px}
.c-red{color:var(--danger)}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:100;background:var(--bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);height:58px}
.header-inner{display:flex;align-items:center;height:58px;gap:16px}
.logo{font-size:20px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px;flex-shrink:0}
.logo:hover{color:var(--text)}
.logo span{color:var(--primary)}
.logo-icon{width:30px;height:30px;background:linear-gradient(135deg,var(--primary),#6366f1);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700}
.nav{display:flex;gap:2px}
.nav a{padding:6px 14px;border-radius:6px;font-size:14px;font-weight:500;color:var(--text-sec);white-space:nowrap}
.nav a:hover,.nav a.active{color:var(--primary);background:var(--bg-sec)}
.theme-btn{width:34px;height:34px;border:none;border-radius:50%;background:transparent;cursor:pointer;font-size:16px;color:var(--text-sec);margin-left:auto;flex-shrink:0}

/* ===== Hero Section ===== */
.hero-section{background:var(--bg);padding:24px 0 0}
.hero-layout{display:grid;grid-template-columns:1fr 340px;gap:16px}
.hero-main .carousel{background:linear-gradient(135deg,var(--primary),#1e40af);border-radius:var(--radius);overflow:hidden;min-height:300px;position:relative}
.slide-link{display:block;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-decoration:none}
.slide-icon{font-size:64px;margin-bottom:12px}
.slide-text{text-align:center;padding:0 20px}
.slide-text h3{font-size:22px;font-weight:700;margin-bottom:6px}
.slide-text p{font-size:14px;opacity:.85}
.hero-side{display:flex;flex-direction:column;gap:12px}
.hero-item{position:relative;border-radius:var(--radius);overflow:hidden;flex:1;min-height:89px;display:block;color:#fff;text-decoration:none}
.hero-item-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hero-item-text{position:absolute;bottom:0;left:0;right:0;padding:20px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.hero-item-text h4{font-size:14px;font-weight:600;line-height:1.4}

/* ===== Notice Bar ===== */
.notice-bar{background:var(--bg-sec);border:1px solid var(--border);border-radius:6px;padding:8px 16px;margin:16px 0;font-size:13px;color:var(--text-sec)}
.notice-bar strong{color:var(--danger)}

/* ===== Main Layout ===== */
.main-section{display:grid;grid-template-columns:1fr 300px;gap:24px;padding:20px 0 40px}
.main-content{min-width:0}

/* ===== Section Title ===== */
.section-title{font-size:19px;font-weight:700;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--border)}
.section-title .badge{display:inline-block;width:4px;height:19px;background:var(--primary);border-radius:2px;margin-right:10px;vertical-align:middle}

/* ===== Post Item (chapan.cc风格) ===== */
.post-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;background:var(--bg-card);overflow:hidden;transition:box-shadow .2s}
.post-item:hover{box-shadow:0 3px 12px rgba(0,0,0,.08)}
.post-inner{display:flex}
.post-thumb{width:220px;min-height:140px;flex-shrink:0;overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-item:hover .post-thumb img{transform:scale(1.05)}
.post-body{flex:1;padding:16px 20px;display:flex;flex-direction:column}
.post-header{margin-bottom:6px}
.cat-label{display:inline-block;font-size:11px;padding:1px 8px;border-radius:3px;background:var(--bg-sec);color:var(--text-sec)}
.post-body h2{font-size:17px;font-weight:700;line-height:1.4;margin-bottom:6px}
.post-body h2 a{color:var(--text)}
.post-body h2 a:hover{color:var(--primary)}
.pin{display:inline-block;background:var(--danger);color:#fff;font-size:11px;font-weight:700;padding:0 6px;border-radius:3px;margin-right:4px;vertical-align:middle}
.post-excerpt{color:var(--text-sec);font-size:14px;line-height:1.6;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:13px;color:var(--text-muted)}
.post-meta .author{display:flex;align-items:center;gap:4px}
.post-meta .author img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.more-link{text-align:center;margin-top:20px;font-size:15px}

/* ===== Sidebar ===== */
.sidebar{position:sticky;top:74px}
.sidebar-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;background:var(--bg-card)}
.sidebar-title{font-size:15px;font-weight:700;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--border)}
.sidebar-title .badge{display:inline-block;width:4px;height:17px;background:var(--primary);border-radius:2px;margin-right:8px;vertical-align:middle}
/* Hot list */
.hot-list li{padding:9px 0;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:flex-start}
.hot-list li:last-child{border-bottom:none}
.hot-num{width:22px;height:22px;border-radius:5px;background:var(--bg-sec);color:var(--text-muted);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.hot-list li:nth-child(1) .hot-num,.hot-list li:nth-child(2) .hot-num,.hot-list li:nth-child(3) .hot-num{background:var(--danger);color:#fff}
.hot-list a{color:var(--text);font-size:14px;line-height:1.5}
.hot-list a:hover{color:var(--primary)}
/* Tag cloud */
.tag-cloud{display:flex;flex-wrap:wrap;gap:6px}
.tag-cloud a{padding:4px 12px;background:var(--bg-sec);border-radius:20px;font-size:13px;color:var(--text-sec)}
.tag-cloud a:hover{background:var(--primary);color:#fff}
/* Alarm card */
.alarm-card p{font-size:14px;line-height:1.9}

/* ===== Page Header ===== */
.page-header{background:var(--bg-sec);border-bottom:1px solid var(--border);padding:28px 0;text-align:center}
.page-header h1{font-size:24px;font-weight:800}
.page-header p{color:var(--text-sec);margin-top:4px;font-size:14px}

/* ===== Category Grid ===== */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.cat-card{padding:22px 14px;border:1px solid var(--border);border-radius:var(--radius);text-align:center;color:var(--text);background:var(--bg-card);display:block;transition:all .2s}
.cat-card:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.cat-icon{font-size:34px;margin-bottom:8px}
.cat-card h3{font-size:15px;font-weight:600;margin-bottom:4px}
.cat-card p{font-size:12px;color:var(--text-sec)}
.cat-count{display:inline-block;margin-top:6px;font-size:12px;color:var(--text-muted)}
.cat-exposed{border-color:var(--danger)!important}
.cat-exposed h3{color:var(--danger)}

/* ===== Article Detail ===== */
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;padding:24px 0 40px}
.article-main{min-width:0}
.article-hero{width:100%;height:240px;border-radius:var(--radius);overflow:hidden;margin-bottom:12px}
.article-hero img{width:100%;height:100%;object-fit:cover}
.breadcrumb{font-size:13px;color:var(--text-muted);margin-bottom:12px}
.breadcrumb a{color:var(--text-muted)}
.breadcrumb a:hover{color:var(--primary)}
.article{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:28px}
.article-header{margin-bottom:20px}
.article-header h1{font-size:24px;font-weight:800;line-height:1.35;margin-top:8px}
.article-meta{font-size:13px;color:var(--text-muted);margin-top:6px;display:flex;gap:16px}
.tag{display:inline-block;font-size:11px;padding:2px 10px;border-radius:20px;font-weight:600}
.tag-danger{background:#fef2f2;color:var(--danger)}
.tag-warning{background:#fffbeb;color:#b45309}
.tag-info{background:#eff6ff;color:var(--info)}
.tag-safe{background:#f0fdf4;color:var(--safe)}
.article-body h2{font-size:20px;font-weight:700;margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.article-body h3{font-size:17px;font-weight:600;margin:20px 0 8px}
.article-body p{margin-bottom:14px;font-size:15px;line-height:1.85}
.article-body ul,.article-body ol{margin:0 0 14px 0}
.article-body li{margin-bottom:4px;padding-left:20px;position:relative;font-size:15px}
.article-body ul li::before{content:'';position:absolute;left:4px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--text-muted)}
.article-body ol{counter-reset:list}
.article-body ol li{counter-increment:list}
.article-body ol li::before{content:counter(list)'.';position:absolute;left:0;font-weight:600;color:var(--primary)}
.article-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px;border:1px solid var(--border)}
.article-body th,.article-body td{padding:8px 12px;border:1px solid var(--border);text-align:left}
.article-body th{background:var(--bg-sec);font-weight:600}
.article-body blockquote{border-left:4px solid var(--primary);padding:12px 18px;background:var(--bg-sec);margin:16px 0;border-radius:0 6px 6px 0;color:var(--text-sec)}
.article-body .alert{padding:14px 18px;border-radius:6px;margin:16px 0;font-size:14px}
.article-body .alert-danger{background:#fef2f2;border-left:4px solid var(--danger)}
.article-body .alert-warning{background:#fffbeb;border-left:4px solid var(--warning)}
.article-body .alert-info{background:#eff6ff;border-left:4px solid var(--info)}

/* Article Nav */
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.article-nav a{display:block;padding:12px 16px;border:1px solid var(--border);border-radius:6px;font-size:14px;color:var(--text);transition:all .2s;line-height:1.4}
.article-nav a:hover{border-color:var(--primary)}
.nav-label{font-size:12px;color:var(--text-muted);margin-bottom:2px}
.nav-next{text-align:right}

/* ===== About ===== */
.about{padding:30px 0 50px}
.about h2{font-size:20px;font-weight:700;margin:28px 0 10px}
.about p{margin-bottom:14px;line-height:1.8}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--border);padding:28px 0;text-align:center;color:var(--text-muted);font-size:13px;margin-top:20px}

/* ===== Responsive ===== */
@media(max-width:900px){
  .hero-layout,.main-section,.article-layout{grid-template-columns:1fr}
  .hero-side{display:grid;grid-template-columns:1fr 1fr 1fr}
  .post-thumb{width:160px}
  .sidebar{position:static}
}
@media(max-width:640px){
  .post-inner{flex-direction:column}
  .post-thumb{width:100%;min-height:160px}
  .hero-side{grid-template-columns:1fr}
  .hero-side .hero-item{min-height:80px}
  .article{padding:18px}
  .article-header h1{font-size:20px}
  .article-nav{grid-template-columns:1fr}
  .article-hero{height:160px}
  .nav a{padding:6px 10px;font-size:13px}
}