
:root{
  --c-brand:#0e9f8a;          /* 品牌青绿 */
  --c-brand-dark:#0a8271;
  --c-brand-light:#e6f7f4;
  --c-accent:#ff7a32;          /* 活力橙 */
  --c-accent-light:#fff3eb;
  --c-blue:#3b82f6;
  --c-ink:#1c2433;
  --c-gray:#5f6b7a;
  --c-gray-l:#8a95a5;
  --c-line:#e8ebf0;
  --c-bg:#f4f6f9;
  --c-white:#fff;
  --radius:14px;
  --shadow:0 12px 34px rgba(14,30,60,.10);
  --shadow-sm:0 4px 14px rgba(14,30,60,.07);
}

body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;color:var(--c-ink);background:var(--c-bg);line-height:1.6;-webkit-font-smoothing:antialiased}

.section{padding:54px 0}

.btn-primary{background:linear-gradient(135deg,var(--c-brand),#12c0a6);color:#fff;box-shadow:0 6px 16px rgba(14,159,138,.32)}

.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(14,159,138,.4)}

.main-nav a{padding:12px 18px;font-size:15px;font-weight:500;color:var(--c-ink);border-radius:8px;transition:.2s;position:relative}


/* ===== Hero 搜索区 ===== */

.hero{background:linear-gradient(135deg,#0d9c87 0%,#0ea5c8 60%,#0b7fb0 100%);color:#fff;position:relative;overflow:hidden;padding:56px 0 90px}

.hero::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60" opacity="0.08"><circle cx="30" cy="30" r="1.2" fill="white"/><circle cx="2" cy="10" r="0.8" fill="white"/><circle cx="52" cy="20" r="0.9" fill="white"/><circle cx="20" cy="50" r="1" fill="white"/></svg>');background-size:60px 60px}

.hero .container{position:relative;z-index:2;text-align:center}

.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:6px 18px;border-radius:50px;font-size:13px;letter-spacing:1px;color:#e6fff9}

.hero h1{font-size:44px;line-height:1.2;font-weight:800;margin:20px auto 14px;max-width:820px}

.hero h1 .gr{background:linear-gradient(90deg,#8ef0dc,#ffbe8a);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero p.sub{font-size:17px;color:#d7f4ee;max-width:660px;margin:0 auto 30px}

.big-search{max-width:720px;margin:0 auto;background:#fff;border-radius:50px;padding:7px;display:flex;align-items:center;box-shadow:0 18px 48px rgba(0,60,51,.28)}

.big-search input{flex:1;border:none;outline:none;background:transparent;font-size:16px;padding:12px 20px;color:var(--c-ink)}

.big-search .btn{padding:14px 30px;border-radius:42px;font-size:15px;flex-shrink:0}

.search-kw{margin-top:16px;font-size:13px;color:#bfefe5;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}

.search-kw b{color:#ffe8d2;font-weight:600}

.search-kw a{color:#eafaf7;border:1px solid rgba(255,255,255,.25);padding:3px 12px;border-radius:30px;transition:.2s}

.search-kw a:hover{background:rgba(255,255,255,.18);color:#fff}


/* ===== 快捷分类横条 ===== */

.quick-cats{position:relative;z-index:5;margin-top:-50px}

.quick-cats .container{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:22px 16px;border:1px solid var(--c-line)}

.quick-cats .qk-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}

.qk-cell{text-align:center;padding:12px 6px;border-radius:12px;transition:.22s;cursor:pointer}

.qk-cell:hover{background:var(--c-brand-light);transform:translateY(-3px)}

.qk-cell .qk-ico{width:48px;height:48px;margin:0 auto 8px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px}

.qk-cell b{font-size:13px;font-weight:600}

.qk-cell span{font-size:11px;color:var(--c-gray-l);display:block}

.qc1{background:#e6f7f4}.qc2{background:#fff3eb}.qc3{background:#eef4ff}.qc4{background:#fdf0ff}.qc5{background:#fff8e6}.qc6{background:#eaf7f9}.qc7{background:#f4f0ff}.qc8{background:#fdf1f3}


/* ===== 区块标题 ===== */

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px}

.sec-head .sh-tit{display:flex;align-items:center;gap:10px}

.sec-head h2{font-size:24px;font-weight:800;color:var(--c-ink)}

.sec-head h2 i{font-style:normal;color:var(--c-brand)}

.sec-head .sh-sub{font-size:13px;color:var(--c-gray-l);margin-top:2px}

.sec-head .sh-more{font-size:13px;color:var(--c-gray);transition:.2s}

.sec-head .sh-more:hover{color:var(--c-brand)}

.sec-head .sh-flag{width:8px;height:22px;border-radius:4px;background:linear-gradient(180deg,var(--c-brand),var(--c-accent))}


/* ===== 问答主区 ===== */

.q-main{display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:start}


/* 问答面板 */

.panel{background:#fff;border:1px solid var(--c-line);border-radius:16px;overflow:hidden}

.panel-tabs{display:flex;gap:4px;padding:14px 20px 0;flex-wrap:wrap}

.ptab{padding:7px 16px;border-radius:20px;font-size:13.5px;cursor:pointer;color:var(--c-gray);background:#f2f4f8;border:none;transition:.2s;font-weight:500}

.ptab.active{background:var(--c-brand);color:#fff}

.q-item{display:flex;gap:14px;padding:16px 20px;border-bottom:1px solid #f2f4f8;cursor:pointer;transition:.2s}

.q-item:last-child{border:none}

.q-item:hover{background:#fafcfe}

.q-av{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#e6f7f4,#eef4ff);display:flex;align-items:center;justify-content:center;font-size:19px}

.q-c{flex:1;min-width:0}

.q-t{font-size:15.5px;font-weight:600;color:var(--c-ink);transition:.2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.q-item:hover .q-t{color:var(--c-brand)}

.q-txt{font-size:13px;color:var(--c-gray-l);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.q-meta{margin-top:9px;display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--c-gray-l);flex-wrap:wrap}

.q-meta .ctg{background:var(--c-brand-light);color:var(--c-brand-dark);padding:2px 10px;border-radius:20px;font-weight:600}

.q-meta .ctg.o{background:var(--c-accent-light);color:#d95f12}

.q-meta .ctg.b{background:#eef4ff;color:#2b5fc7}

.q-meta .ctg.p{background:#f4f0ff;color:#7a4bd0}

.q-meta .mk{display:flex;align-items:center;gap:4px}

.q-meta .st{color:var(--c-accent);font-weight:600}

.q-side{flex-shrink:0;text-align:center;width:52px}

.q-side .cnt{font-size:18px;font-weight:800;color:var(--c-brand)}

.q-side .cnt.o{color:var(--c-accent)}

.q-side span{font-size:11px;color:var(--c-gray-l)}

.panel-foot{padding:14px 20px;text-align:center;border-top:1px solid var(--c-line);color:var(--c-gray);font-size:13.5px;cursor:pointer;transition:.2s}

.panel-foot:hover{color:var(--c-brand);background:#fafcfe}

.w-title .hot-fire{color:var(--c-accent)}

.hot-list a{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--c-line)}

.hot-list a:last-child{border:none}

.hot-list .rk{flex-shrink:0;width:22px;text-align:center;font-weight:800;font-size:15px;color:#c3cad6;-webkit-text-stroke:1px #c3cad6;color:transparent}

.hot-list .rk.top{color:#fff;-webkit-text-stroke:0;background:linear-gradient(135deg,#ff7a32,#ff9352);width:20px;height:20px;border-radius:6px;font-size:12px;display:flex;align-items:center;justify-content:center}

.hot-list .rk.t2{color:#fff;-webkit-text-stroke:0;background:linear-gradient(135deg,#e88d3a,#f0a45a);width:20px;height:20px;border-radius:6px;font-size:12px;display:flex;align-items:center;justify-content:center}

.hot-list .rk.t3{color:#fff;-webkit-text-stroke:0;background:#cab27a;width:20px;height:20px;border-radius:6px;font-size:12px;display:flex;align-items:center;justify-content:center}

.hot-list .hk{flex:1;font-size:14px;transition:.2s;line-height:1.5}

.hot-list a:hover .hk{color:var(--c-brand)}

.hot-list .hn{flex-shrink:0;font-size:12px;color:var(--c-gray-l)}

.ask-ad{background:linear-gradient(135deg,var(--c-brand),#0ea5c8);border-radius:16px;padding:24px;color:#fff;position:relative;overflow:hidden}

.ask-ad::after{content:"?";position:absolute;right:-18px;bottom:-36px;font-size:110px;color:rgba(255,255,255,.14);font-weight:800}

.ask-ad h4{font-size:18px;margin-bottom:6px;color:#e6fff9}

.ask-ad p{font-size:13px;color:#d7f4ee;margin-bottom:16px}

.ask-ad .btn{width:100%;justify-content:center;background:#fff;color:var(--c-brand)}

.ask-ad .btn:hover{background:#e6fff9}

.tag-cloud a{display:inline-block;background:#f2f4f8;color:var(--c-gray);padding:6px 14px;border-radius:8px;font-size:13px;margin:0 8px 10px 0;transition:.2s;cursor:pointer}

.tag-cloud a:hover{background:var(--c-brand);color:#fff}

.tag-cloud a.s2{font-size:14px}.tag-cloud a.s3{font-size:15px;color:var(--c-brand);font-weight:600}.tag-cloud a.s4{font-size:16px;color:var(--c-accent);font-weight:700}


/* ===== 黄页分类导航 ===== */

.yellow .sec-bg{background:#fff;border:1px solid var(--c-line);border-radius:18px;padding:30px}

.yp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

.yp-col{background:var(--c-bg);border-radius:14px;padding:16px 18px}

.yp-col h5{font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}

.yp-col h5 .yi{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}

.yp-col a{display:block;font-size:13px;color:var(--c-gray);padding:5px 0;transition:.15s;position:relative;padding-left:12px}

.yp-col a::before{content:"›";position:absolute;left:0;color:var(--c-brand)}

.yp-col a:hover{color:var(--c-brand);padding-left:16px}

.yp-col .yp-more{color:var(--c-accent);font-weight:600}

.yp-c1 h5 .yi{background:#e6f7f4}.yp-c2 h5 .yi{background:#fdf0ff}.yp-c3 h5 .yi{background:#fff8e6}.yp-c4 h5 .yi{background:#eef4ff}


/* ===== 区县/部门导航（对接 spider 版块数据）===== */

.dept-zone{background:#fff;border:1px solid var(--c-line);border-radius:18px;padding:26px 26px 18px;margin-bottom:22px}

.dept-zone .dz-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}

.dept-zone .dz-title{font-size:17px;font-weight:700;display:flex;align-items:center;gap:10px}

.dept-zone .dz-title .flag{width:8px;height:20px;border-radius:4px;background:linear-gradient(180deg,var(--c-brand),var(--c-accent))}

.dept-zone .dz-title em{font-style:normal;color:var(--c-brand)}

.dept-zone .dz-sub{font-size:12.5px;color:var(--c-gray-l);margin-top:3px}

.dept-zone .dz-more{font-size:13px;color:var(--c-gray);transition:.2s}

.dept-zone .dz-more:hover{color:var(--c-brand)}

.dz-block{margin-bottom:18px}

.dz-block:last-child{margin-bottom:0}

.dz-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--c-ink);margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed var(--c-line)}

.dz-label .lb-ico{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px}

.dz-lb1 .lb-ico{background:#e6f7f4}.dz-lb2 .lb-ico{background:#fdf0ff}

.dz-label .lb-n{font-size:11px;color:var(--c-gray-l);font-weight:400;margin-left:auto}

.dept-tags{display:flex;flex-wrap:wrap;gap:9px}

.dtag{background:#f3f5f9;color:var(--c-gray);font-size:13px;padding:6px 14px;border-radius:8px;cursor:pointer;transition:.18s;border:1px solid transparent}

.dtag:hover{background:var(--c-brand);color:#fff;transform:translateY(-2px)}

.dtag .dt-count{font-size:11px;color:var(--c-gray-l);margin-left:4px}

.dtag:hover .dt-count{color:#e6fff9}

.dtag.hot{background:var(--c-brand-light);color:var(--c-brand-dark);font-weight:600}

.dtag.hot:hover{background:var(--c-brand);color:#fff}

/* ===== 本地商家推荐 ===== */

.merch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.merch-card{background:#fff;border:1px solid var(--c-line);border-radius:16px;overflow:hidden;transition:.25s;cursor:pointer}

.merch-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}

.merch-img{height:130px;background:linear-gradient(135deg,#e6f7f4,#d4f3ee);display:flex;align-items:center;justify-content:center;font-size:46px;position:relative}

.merch-img .mtag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);color:var(--c-accent);font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600}

.merch-img .mbadge{position:absolute;top:10px;right:10px;background:rgba(255,122,50,.9);color:#fff;font-size:11px;padding:3px 9px;border-radius:6px;font-weight:600}

.merch-bd{padding:14px 16px}

.merch-bd b{font-size:15.5px;color:var(--c-ink);display:block}

.merch-bd .m-tag{font-size:12px;color:var(--c-gray-l);margin-top:4px}

.merch-bd .m-tag b{display:inline;color:var(--c-brand);font-size:12px}

.merch-bd .m-bot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}

.merch-bd .m-stars{color:#ffa52f;font-size:12.5px}

.merch-bd .m-num{font-size:12px;color:var(--c-gray-l)}

.merch-bd .m-go{font-size:12px;color:var(--c-brand);font-weight:600}


/* ===== 同城快报 ===== */

.news-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}

.news-feature{position:relative;border-radius:16px;overflow:hidden;min-height:260px;display:flex;align-items:flex-end;cursor:pointer}

.news-feature .nf-bg{position:absolute;inset:0;background:linear-gradient(160deg,#0ea5c8,#0b7fb0 60%,#0d9c87)}

.news-feature .nf-ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,20,30,.82))}

.news-feature .nf-txt{position:relative;z-index:2;padding:26px;color:#fff}

.news-feature .nf-cat{display:inline-block;background:var(--c-accent);color:#fff;font-size:12px;padding:4px 12px;border-radius:20px;margin-bottom:10px;font-weight:600}

.news-feature h3{font-size:21px;font-weight:700;line-height:1.4}

.news-feature .nf-meta{font-size:12.5px;color:#cfeaf0;margin-top:10px}

.news-list{background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:8px 20px}

.news-list a{display:flex;gap:14px;padding:13px 0;border-bottom:1px dashed var(--c-line);align-items:center}

.news-list a:last-child{border:none}

.news-list .nd{flex-shrink:0;text-align:center;width:46px;background:var(--c-brand-light);border-radius:10px;padding:6px 2px}

.news-list .nd b{display:block;font-size:18px;color:var(--c-brand);line-height:1}

.news-list .nd span{font-size:10.5px;color:var(--c-gray-l)}

.news-list .nt{flex:1;font-size:14px;transition:.2s;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.news-list a:hover .nt{color:var(--c-brand)}

footer{background:#101d2b;color:#8ba0ba;margin-top:0}

.f-desc{max-width:1100px;margin:14px auto 0;font-size:11.5px;line-height:1.9;color:#5d7490;text-align:left}

.f-desc b{color:#7d93ad;font-weight:600}

@media(max-width:1024px){
  .quick-cats .qk-grid{grid-template-columns:repeat(4,1fr)}
  .q-main{grid-template-columns:1fr}
  .merch-grid{grid-template-columns:repeat(2,1fr)}
  .yp-grid{grid-template-columns:repeat(2,1fr)}
  .news-layout{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .section{padding:40px 0}
  .h-search{display:none}
  .menu-toggle{display:block}
  .main-nav{display:none}
  .main-nav.open{display:block}
  .main-nav .container{flex-direction:column;align-items:flex-start}
  .main-nav a{width:100%}
  .hero{padding:44px 0 90px}
  .hero h1{font-size:30px}
  .hero p.sub{font-size:15px}
  .big-search{flex-direction:column;border-radius:18px;padding:10px;gap:8px}
  .big-search input{border:1px solid var(--c-line);border-radius:12px;width:100%}
  .big-search .btn{width:100%}
  .quick-cats .qk-grid{grid-template-columns:repeat(4,1fr)}
  .merch-grid{grid-template-columns:1fr}
  .yp-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .topbar .tb-left .noti{display:none}
}
