@charset "utf-8";
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; color:#1a1a1a; line-height:1.6; background:#f5f6f8; font-size:14px; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
input,button { font-family:inherit; outline:none; border:none; }
img { max-width:100%; vertical-align:middle; }

:root {
  --c-primary:#1d6fe0;
  --c-primary-light:#e8f1fd;
  --c-accent:#ff6b35;
  --c-accent-light:#fff3ec;
  --c-text:#1a1a1a;
  --c-text-sub:#666;
  --c-text-mute:#999;
  --c-border:#e8e8e8;
  --c-white:#fff;
  --radius:6px;
  --shadow:0 1px 4px rgba(0,0,0,.06);
}

.m-topbar { background:#f9fafc; border-bottom:1px solid var(--c-border); height:28px; line-height:28px; font-size:11px; color:var(--c-text-sub); padding:0 12px; display:flex; justify-content:space-between; }
.m-topbar .city { color:var(--c-primary); font-weight:500; }

.m-header { background:var(--c-white); box-shadow:var(--shadow); padding:10px 12px; display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:100; }
.m-logo { font-size:18px; font-weight:700; color:var(--c-primary); white-space:nowrap; }
.m-search { flex:1; display:flex; border:1px solid var(--c-primary); border-radius:20px; overflow:hidden; }
.m-search input { flex:1; padding:6px 12px; font-size:13px; border:none; }
.m-search button { padding:6px 14px; background:var(--c-primary); color:#fff; font-size:12px; font-weight:500; }
.m-back { font-size:18px; color:var(--c-primary); padding:4px 8px; }
.m-title { font-size:15px; font-weight:600; }

/* Hero with background image */
.m-hero { background:linear-gradient(135deg,#1d6fe0,#3b82f6); color:#fff; padding:28px 16px; text-align:center; }
.m-hero-bg { background:linear-gradient(135deg,rgba(29,111,224,.92) 0%,rgba(37,99,235,.88) 50%,rgba(59,130,246,.85) 100%), url('/static/www/images/hero_bg.png') center/cover no-repeat; }
.m-hero h1 { font-size:18px; font-weight:700; margin-bottom:4px; text-shadow:0 1px 3px rgba(0,0,0,.2); }
.m-hero p { font-size:11px; opacity:.95; }

/* Category grid with thumbnails */
.m-cat-grid { display:grid; grid-template-columns:repeat(4,1fr); background:var(--c-white); border-bottom:1px solid var(--c-border); }
.m-cat-item { padding:12px 4px; text-align:center; border-right:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; display:flex; flex-direction:column; align-items:center; }
.m-cat-item:nth-child(4n) { border-right:none; }
.m-cat-item .m-cat-thumb { width:36px; height:36px; object-fit:cover; border-radius:8px; margin-bottom:4px; }
.m-cat-item .icon { width:36px; height:36px; line-height:36px; margin:0 auto 4px; background:var(--c-primary-light); border-radius:8px; font-size:16px; color:var(--c-primary); }
.m-cat-item .m-cat-icon-svg { width:36px; height:36px; background:var(--c-primary); border-radius:8px; margin-bottom:4px; display:flex; align-items:center; justify-content:center; padding:5px; }
.m-cat-item .m-cat-icon-svg svg { width:100%; height:100%; }
.m-cat-item .name { font-size:11px; font-weight:500; }

.m-banner { background:var(--c-accent-light); color:var(--c-accent); text-align:center; padding:8px; font-size:12px; font-weight:500; }
.m-banner strong { font-size:14px; }

.m-section { padding:12px 12px 4px; }
.m-section h2 { font-size:16px; font-weight:600; margin-bottom:10px; display:flex; align-items:center; }
.m-section h2::before { content:""; width:3px; height:16px; background:var(--c-primary); border-radius:2px; margin-right:6px; }
.m-section .more { margin-left:auto; font-size:12px; color:var(--c-text-mute); font-weight:400; }

/* V2 service group */
.m-svc-group-head { display:flex; align-items:center; gap:6px; padding:8px 0 6px; }
.m-svc-group-head .m-svc-group-icon { width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; color:var(--c-primary); }
.m-svc-group-head .m-svc-group-icon svg { width:100%; height:100%; }
.m-svc-group-head span:nth-child(2) { font-size:14px; font-weight:600; }
.m-svc-group-head .m-svc-count { font-size:11px; color:var(--c-text-mute); margin-left:auto; }

/* V2 service cards with SVG image area */
.m-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.m-service-card { background:var(--c-white); border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; transition:all .15s; display:flex; flex-direction:column; }
.m-service-card:active { border-color:var(--c-primary); }
.m-svc-img { height:60px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.m-svc-img svg { width:40px; height:24px; opacity:.7; }
.m-svc-img-jiadian { background:linear-gradient(135deg,#fff3ec,#ffe0c8); }
.m-svc-img-qingxi { background:linear-gradient(135deg,#e8f5e9,#c8e6c9); }
.m-svc-img-shuma { background:linear-gradient(135deg,#f3e5f5,#e1bee7); }
.m-svc-img-jiaju { background:linear-gradient(135deg,#fff3e0,#ffe0b2); }
.m-svc-img-fangwu { background:linear-gradient(135deg,#e0f7fa,#b2ebf2); }
.m-svc-body { padding:8px 10px; }
.m-service-card h3 { font-size:13px; font-weight:600; margin-bottom:3px; }
.m-service-card .price { color:var(--c-accent); font-weight:700; font-size:13px; }
.m-service-card .sub { font-size:11px; color:var(--c-text-mute); margin-top:2px; }

.m-article-list { background:var(--c-white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.m-article-list li { padding:10px 14px; border-bottom:1px solid #f0f0f0; font-size:14px; }
.m-article-list li:last-child { border-bottom:none; }
.m-article-list a { color:var(--c-text); }
.m-article-list a:hover { color:var(--c-primary); }
.m-article-list .meta { font-size:11px; color:var(--c-text-mute); margin-top:2px; }

.m-wd-list { background:var(--c-white); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.m-wd-list li { padding:10px 14px; border-bottom:1px solid #f0f0f0; font-size:13px; }
.m-wd-list li:last-child { border-bottom:none; }

.m-container { padding:12px; }
.m-cat-hero { background:var(--c-white); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; margin-bottom:12px; }
.m-cat-hero h1 { font-size:16px; font-weight:700; margin-bottom:6px; }
.m-cat-hero .price { color:var(--c-accent); font-weight:700; font-size:15px; margin-bottom:4px; }
.m-cat-hero .info { font-size:12px; color:var(--c-text-sub); margin-top:4px; line-height:1.6; }
.m-cat-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.m-cat-tags a { padding:2px 8px; background:var(--c-primary-light); color:var(--c-primary); border-radius:10px; font-size:11px; }

/* Guarantee box */
.m-guarantee { background:var(--c-white); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; margin-bottom:12px; }
.m-guarantee h3 { font-size:14px; font-weight:600; margin-bottom:10px; }
.m-guarantee-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.m-g-item { font-size:12px; padding:8px 10px; background:var(--c-primary-light); border-radius:6px; text-align:center; color:var(--c-primary); font-weight:500; }

/* Review cards */
.m-review-list { display:flex; flex-direction:column; gap:8px; }
.m-review-card { background:var(--c-white); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px 14px; border-left:3px solid var(--c-accent); }
.m-review-card .content { font-size:13px; color:var(--c-text); line-height:1.6; margin-bottom:4px; }
.m-review-card .meta { font-size:11px; color:var(--c-text-mute); }

.m-article h1 { font-size:18px; font-weight:700; margin-bottom:6px; line-height:1.4; }
.m-article .article-meta { color:var(--c-text-mute); font-size:12px; margin-bottom:12px; }
.m-article .article-content { font-size:14px; line-height:1.8; }
.m-article .article-content h2 { font-size:16px; margin:14px 0 6px; }
.m-article .article-content p { margin-bottom:10px; }

.m-footer { background:#1a2332; color:#667; padding:16px 12px; text-align:center; font-size:11px; margin-top:16px; }
.m-footer p { margin-bottom:4px; }
.m-footer a { color:#667; }

.m-tabbar { position:sticky; bottom:0; left:0; right:0; background:var(--c-white); border-top:1px solid var(--c-border); display:flex; height:48px; z-index:100; }
.m-tabbar a { flex:1; text-align:center; padding:6px 0; font-size:11px; color:var(--c-text-mute); }
.m-tabbar a.active { color:var(--c-primary); }
.m-tabbar .icon { font-size:18px; display:block; margin-bottom:2px; }

.empty { color:var(--c-text-mute); text-align:center; padding:24px; font-size:13px; }

/* 拨号引导区块 */
.m-call-cta { background:linear-gradient(135deg,var(--c-primary-light),var(--c-accent-light)); border-radius:var(--radius); padding:14px 16px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.m-call-btn { background:var(--c-accent); color:#fff; padding:10px 20px; border-radius:20px; font-size:14px; font-weight:600; white-space:nowrap; }

/* 浮动拨号按钮 */
.m-float-call { position:fixed; right:12px; bottom:56px; z-index:99; background:var(--c-accent); color:#fff; padding:12px 18px; border-radius:24px; font-size:14px; font-weight:600; box-shadow:0 4px 12px rgba(255,107,53,.4); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }