* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --primary: #1a73e8;
  --primary-dark: #1557b0;
  --accent: #ff6b35;
  --bg: #f5f7fa;
  --white: #fff;
  --text: #333;
  --text-light: #666;
  --text-lighter: #999;
  --border: #e8e8e8;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --radius: 8px;
}

body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; color:var(--text); background:var(--bg); line-height:1.6; }

/* Header */
.header { background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.header-inner { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-icon { width:40px; height:40px; background:linear-gradient(135deg,var(--primary),#4a90ff); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:22px; font-weight:bold; flex-shrink:0; }
.logo-text { font-size:20px; font-weight:700; color:var(--primary); white-space:nowrap; }

/* City selector */
.city-selector { position:relative; margin-left:8px; }
.city-current { display:flex; align-items:center; gap:4px; padding:5px 10px; border:1px solid var(--border); border-radius:6px; font-size:13px; cursor:pointer; background:var(--white); color:var(--text); transition:border-color 0.2s; white-space:nowrap; }
.city-current:hover { border-color:var(--primary); }
.city-current .arrow { font-size:10px; color:var(--text-lighter); transition:transform 0.2s; }
.city-current.open .arrow { transform:rotate(180deg); }
.city-dropdown { display:none; position:absolute; top:100%; left:0; margin-top:4px; background:var(--white); border-radius:var(--radius); box-shadow:0 8px 30px rgba(0,0,0,0.15); z-index:200; width:420px; padding:16px; }
.city-dropdown.show { display:block; }
.city-dropdown h3 { font-size:14px; color:var(--text-light); margin-bottom:8px; font-weight:500; }
.city-hot { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.city-hot-btn { padding:5px 14px; border-radius:16px; border:1px solid var(--border); font-size:13px; cursor:pointer; background:var(--white); color:var(--text); transition:all 0.2s; text-decoration:none; display:inline-block; }
.city-hot-btn:hover { border-color:var(--primary); color:var(--primary); background:#f0f5ff; }
.city-hot-btn.active { background:var(--primary); color:var(--white); border-color:var(--primary); }
.city-letters { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:12px; }
.city-letter { width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; border-radius:4px; color:var(--primary); }
.city-letter:hover { background:#f0f5ff; }
.city-list { max-height:240px; overflow-y:auto; }
.city-list .letter-group { margin-bottom:12px; }
.city-list .letter-label { font-size:12px; color:var(--text-lighter); font-weight:700; padding:4px 0; border-bottom:1px solid var(--border); margin-bottom:6px; }
.city-list .letter-cities { display:flex; flex-wrap:wrap; gap:6px; }
.city-list .city-item { padding:4px 10px; font-size:13px; cursor:pointer; border-radius:4px; color:var(--text); transition:all 0.2s; text-decoration:none; display:inline-block; }
.city-list .city-item:hover { color:var(--primary); background:#f0f5ff; }
.city-list .city-item.active { color:var(--primary); font-weight:600; background:#f0f5ff; }
.city-list::-webkit-scrollbar { width:4px; }
.city-list::-webkit-scrollbar-thumb { background:#ddd; border-radius:2px; }

.nav { display:flex; gap:32px; list-style:none; }
.nav a { text-decoration:none; color:var(--text); font-size:15px; transition:color 0.2s; }
.nav a:hover,.nav a.active { color:var(--primary); }
.header-actions { display:flex; gap:12px; align-items:center; }
.btn { padding:8px 20px; border-radius:20px; font-size:14px; cursor:pointer; border:none; transition:all 0.2s; }
.btn-primary { background:var(--primary); color:var(--white); }
.btn-primary:hover { background:var(--primary-dark); }
.btn-outline { background:transparent; border:1px solid var(--primary); color:var(--primary); }
.btn-outline:hover { background:var(--primary); color:var(--white); }
.btn-accent { background:var(--accent); color:var(--white); }
.btn-accent:hover { background:#e55a2b; }

/* Hero */
.hero { background:linear-gradient(135deg,#e8f0fe 0%,#d4e4fd 50%,#e3edf9 100%); padding:60px 20px; text-align:center; }
.hero h1 { font-size:36px; color:var(--primary-dark); margin-bottom:12px; }
.hero p { font-size:16px; color:var(--text-light); margin-bottom:30px; }
.hero-search { display:flex; max-width:600px; margin:0 auto; gap:0; }
.hero-search input { flex:1; padding:14px 20px; border:2px solid var(--primary); border-right:none; border-radius:28px 0 0 28px; font-size:15px; outline:none; }
.hero-search input:focus { border-color:var(--primary-dark); }
.hero-search button { padding:14px 32px; background:var(--accent); color:var(--white); border:none; border-radius:0 28px 28px 0; font-size:16px; cursor:pointer; font-weight:600; transition:background 0.2s; }
.hero-search button:hover { background:#e55a2b; }
.hero-stats { display:flex; justify-content:center; gap:60px; margin-top:36px; }
.stat-item { text-align:center; }
.stat-num { font-size:28px; font-weight:700; color:var(--primary); }
.stat-label { font-size:13px; color:var(--text-lighter); margin-top:4px; }

/* Section Title */
.section { max-width:1200px; margin:0 auto; padding:50px 20px; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.section-title { font-size:22px; font-weight:700; position:relative; padding-left:14px; }
.section-title::before { content:''; position:absolute; left:0; top:4px; width:4px; height:20px; background:var(--primary); border-radius:2px; }
.section-more { color:var(--primary); text-decoration:none; font-size:14px; }
.section-more:hover { text-decoration:underline; }

/* Category Tabs */
.category-section { background:var(--white); border-bottom:1px solid var(--border); }
.cat-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); }
.cat-tab { padding:14px 28px; cursor:pointer; font-size:15px; color:var(--text-light); position:relative; transition:all 0.2s; user-select:none; }
.cat-tab:hover { color:var(--primary); }
.cat-tab.active { color:var(--primary); font-weight:600; }
.cat-tab.active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:var(--primary); }
.cat-content { display:none; padding:20px 0; flex-wrap:wrap; gap:8px 4px; }
.cat-content.active { display:flex; }
.cat-tag { display:inline-block; padding:6px 16px; background:var(--bg); border-radius:20px; font-size:13px; color:var(--text); text-decoration:none; transition:all 0.2s; white-space:nowrap; }
.cat-tag:hover { background:var(--primary); color:var(--white); }

/* Tutor Cards */
.tutor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px; }
.tutor-card { background:var(--white); border-radius:var(--radius); overflow:hidden; text-align:center; padding:20px 12px; box-shadow:var(--shadow); transition:transform 0.2s,box-shadow 0.2s; text-decoration:none; color:var(--text); cursor:pointer; }
.tutor-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.tutor-avatar { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#e8f0fe,var(--primary)); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--primary); font-weight:700; }
.tutor-name { font-size:15px; font-weight:600; margin-bottom:4px; }
.tutor-badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; margin-left:4px; }
.badge-verified { background:#e6f7e6; color:#2e7d32; }
.tutor-school { font-size:13px; color:var(--text-light); }

/* Order Cards */
.order-section-wrap { background:var(--white); padding:50px 0; }
.order-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.order-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:20px; transition:transform 0.2s,box-shadow 0.2s; text-decoration:none; color:var(--text); display:block; }
.order-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.order-subject { font-size:16px; font-weight:700; color:var(--primary-dark); margin-bottom:8px; }
.order-id { font-size:12px; color:var(--text-lighter); }
.order-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.order-tag { font-size:12px; padding:3px 10px; border-radius:12px; background:var(--bg); color:var(--text-light); }
.order-location { font-size:13px; color:var(--text-light); margin-top:8px; }
.order-req { font-size:13px; color:var(--text-light); margin-top:6px; line-height:1.5; }
.order-price { font-size:16px; font-weight:700; color:var(--accent); margin-top:12px; }

/* Testimonials */
.testimonial-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
.testimonial-card { background:var(--white); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.testimonial-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.testimonial-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#fce4ec,#ff6b35); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--white); font-weight:700; }
.testimonial-name { font-size:15px; font-weight:600; }
.testimonial-id { font-size:12px; color:var(--text-lighter); }
.testimonial-text { font-size:14px; color:var(--text-light); line-height:1.8; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* CTA Banner */
.cta { background:linear-gradient(135deg,var(--primary),#4a90ff); padding:50px 20px; text-align:center; color:var(--white); }
.cta h2 { font-size:28px; margin-bottom:12px; }
.cta p { font-size:15px; opacity:0.9; margin-bottom:28px; }
.cta .btn { font-size:16px; padding:12px 36px; }

/* Hot cities bar */
.hot-cities-bar { background:var(--white); padding:0 20px; border-bottom:1px solid var(--border); overflow-x:auto; }
.hot-cities-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:6px; padding:10px 0; }
.hot-cities-inner .hc-label { font-size:13px; color:var(--text-light); white-space:nowrap; margin-right:4px; }
.hot-cities-inner .hc-item { padding:3px 10px; font-size:13px; border-radius:12px; cursor:pointer; white-space:nowrap; color:var(--text); text-decoration:none; transition:all 0.2s; }
.hot-cities-inner .hc-item:hover { background:var(--bg); color:var(--primary); }
.hot-cities-inner .hc-item.current { background:var(--primary); color:var(--white); }

/* Footer */
.footer { background:#2c3e50; color:#bdc3c7; padding:40px 20px 20px; }
.footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; }
.footer h4 { color:var(--white); font-size:15px; margin-bottom:16px; }
.footer p,.footer a { font-size:13px; line-height:2; color:#bdc3c7; text-decoration:none; }
.footer a:hover { color:var(--white); }
.footer-bottom { max-width:1200px; margin:30px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); text-align:center; font-size:12px; }
.footer-beian { margin-top:8px; font-size:12px; }
.footer-beian a { color:#8a93a6; text-decoration:none; }
.footer-beian a:hover { color:var(--white); text-decoration:underline; }

/* Mobile Nav */
.mobile-menu-btn { display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--text); }
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:150; }
.overlay.show { display:block; }

/* Landing page styles */
.landing-hero { background:linear-gradient(135deg,#1a73e8 0%,#4a90ff 50%,#6cb2ff 100%); padding:80px 20px; text-align:center; color:var(--white); }
.landing-hero h1 { font-size:40px; margin-bottom:16px; }
.landing-hero p { font-size:18px; opacity:0.9; }
.landing-city-grid { max-width:1100px; margin:40px auto; padding:0 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.landing-city-card { background:var(--white); border-radius:var(--radius); padding:28px 20px; text-align:center; box-shadow:var(--shadow); text-decoration:none; color:var(--text); transition:transform 0.2s,box-shadow 0.2s; border:2px solid transparent; }
.landing-city-card:hover { transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.15); border-color:var(--primary); }
.landing-city-card .lc-icon { font-size:48px; margin-bottom:12px; }
.landing-city-card .lc-name { font-size:22px; font-weight:700; color:var(--primary-dark); margin-bottom:8px; }
.landing-city-card .lc-desc { font-size:13px; color:var(--text-light); }
.landing-features { max-width:1100px; margin:60px auto; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; }
.landing-feature { padding:24px; }
.landing-feature .lf-icon { font-size:36px; margin-bottom:12px; }
.landing-feature .lf-title { font-size:18px; font-weight:600; margin-bottom:8px; }
.landing-feature .lf-desc { font-size:14px; color:var(--text-light); line-height:1.6; }

@media (max-width:900px) {
  .nav { display:none; }
  .mobile-menu-btn { display:block; }
  .header-actions .btn-outline { display:none; }
  .city-selector { display:none; }
  .hero h1 { font-size:24px; }
  .hero-stats { gap:24px; }
  .stat-num { font-size:22px; }
  .tutor-grid { grid-template-columns:repeat(3,1fr); }
  .order-grid,.testimonial-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .cat-tab { padding:12px 16px; font-size:13px; }
  .city-dropdown { left:-100px; width:360px; }
  .landing-hero h1 { font-size:28px; }
  .landing-features { grid-template-columns:1fr; }
  .landing-city-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}
@media (max-width:480px) {
  .tutor-grid { grid-template-columns:repeat(2,1fr); }
  .hero-stats { gap:16px; }
  .city-dropdown { left:-150px; width:300px; }
}

/* ===== 城市 / 区页专属内容区（关于 XX 家教） ===== */
.di-wrap { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px 30px; }
.di-intro { font-size:15px; color:var(--text-light); line-height:1.9; margin-bottom:6px; }
.di-h3 { font-size:17px; font-weight:700; color:var(--text); margin:24px 0 12px; padding-left:12px; border-left:3px solid var(--primary); }
.di-list { list-style:none; }
.di-list li { font-size:14px; color:var(--text-light); line-height:1.9; padding-left:20px; position:relative; }
.di-list li::before { content:''; position:absolute; left:4px; top:12px; width:6px; height:6px; border-radius:50%; background:var(--primary); }
.di-faq { display:grid; gap:12px; }
.di-faq-item { background:var(--bg); border-radius:var(--radius); padding:16px 18px; }
.di-faq-item h4 { font-size:15px; font-weight:700; color:var(--text); margin-bottom:6px; }
.di-faq-item p { font-size:14px; color:var(--text-light); line-height:1.8; }
.di-siblings { margin-top:24px; padding-top:16px; border-top:1px solid var(--border); font-size:13px; color:var(--text-lighter); line-height:2; }
.di-siblings a { color:var(--primary); text-decoration:none; }
.di-siblings a:hover { text-decoration:underline; }
@media (max-width:768px) { .di-wrap { padding:20px 16px; } .di-h3 { font-size:16px; } }