* { margin:0; padding:0; box-sizing:border-box; }

body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; background:#f5f5f5; color:#333; line-height:1.6; }

.container { max-width:960px; margin:0 auto; padding:16px; }

/* Header */

.header { background:linear-gradient(135deg,#e74c3c,#c0392b); color:#fff; padding:40px 16px; text-align:center; position:relative; z-index:1; }

.header h1 { font-size:2em; margin-bottom:8px; line-height:1.2; }

.header p { opacity:0.9; font-size:1.1em; line-height:1.4; }

/* Sidebar */

.sidebar { position:fixed; left:0; top:151px; height:calc(100vh - 151px); width:36px; z-index:100; }

.sidebar:hover { width:160px; }

.sidebar:hover .sidebar-inner { width:160px; height:100%; background:#fff; box-shadow:2px 0 12px rgba(0,0,0,0.15); padding:8px; overflow-y:auto; }

.sidebar-list { display:flex; flex-direction:column; gap:4px; }

.sidebar-item { display:flex; justify-content:space-between; align-items:center; padding:6px 10px; background:#f8f9fa; border-radius:4px; text-decoration:none; color:#333; font-size:0.9em; transition:all .2s; white-space:nowrap; }

.sidebar-item:hover { background:#e74c3c; color:#fff; }

.sidebar-item.active { background:#e74c3c; color:#fff; font-weight:bold; }

.sidebar-item .count { font-size:0.7em; color:#888; background:#e0e0e0; padding:2px 6px; border-radius:10px; }

.sidebar-item:hover .count { color:#e74c3c; background:#fff; }

.sidebar-item.active .count { color:#e74c3c; background:#fff; }

@media (max-width:600px) { .sidebar { display:none; } }

/* Mobile: bottom nav + drawers (single consolidated 600px block) */

.mobile-menu-btn { display:none; }

.mobile-drawer { display:none; }

.mobile-drawer-backdrop { display:none; }

.bottom-nav { display:none; }

@media (max-width:600px) {

    .sidebar { display:none !important; }

    .sidebar-right { display:none !important; }

    .mobile-menu-btn { display:none !important; }

    .container { padding:16px 12px 76px 12px; }

    .header { padding:12px; }

    /* Bottom fixed tab bar: 首页 / 镇街 / 特色 / 客服 */

    .bottom-nav { display:flex; position:fixed; left:0; right:0; bottom:0; height:56px; background:#fff; border-top:1px solid #eee; box-shadow:0 -2px 8px rgba(0,0,0,0.08); z-index:210; }

    .bn-tab { flex:1; border:none; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:#888; cursor:pointer; font-size:1.5em; line-height:1; padding:0; }

    .bn-tab span.lbl { font-size:0.42em; margin-top:2px; letter-spacing:1px; }

    .bn-tab.active { color:#e74c3c; }

    /* Drawers */

    .mobile-drawer { display:block; position:fixed; top:0; width:200px; max-width:75vw; height:100vh; background:#fff; box-shadow:0 0 16px rgba(0,0,0,0.2); z-index:200; overflow-y:auto; padding:16px; transition:transform .3s ease; }

    .drawer-town { left:0; transform:translateX(-100%); }

    .drawer-town.open { transform:translateX(0); }

    .drawer-featured, .drawer-service { right:0; left:auto; transform:translateX(100%); }

    .drawer-featured.open, .drawer-service.open { transform:translateX(0); }

    .mobile-drawer-backdrop { display:block; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:199; opacity:0; pointer-events:none; transition:opacity .3s; }

    .mobile-drawer-backdrop.open { opacity:1; pointer-events:auto; }

    .drawer-title { font-size:1.1em; font-weight:bold; color:#e74c3c; padding-bottom:8px; border-bottom:2px solid #e74c3c; margin-bottom:12px; }

    .drawer-list { display:flex; flex-direction:column; gap:6px; }

    .drawer-item { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:#f8f9fa; border-radius:6px; text-decoration:none; color:#333; font-size:0.92em; }

    .drawer-item:active { background:#e74c3c; color:#fff; }

    .drawer-item .count { font-size:0.75em; color:#888; background:#e0e0e0; padding:2px 8px; border-radius:10px; }

}

/* Stats */

.stats { display:flex; justify-content:center; gap:32px; padding:20px 0; flex-wrap:wrap; }

.stat-item { text-align:center; }

.stat-num { font-size:2em; font-weight:bold; color:#e74c3c; }

.stat-label { font-size:0.9em; color:#666; margin-top:4px; }

/* Search */

.search-box { margin:20px 0; }

.search-box input { width:100%; padding:12px 16px; border:2px solid #ddd; border-radius:8px; font-size:1em; outline:none; }

.search-box input:focus { border-color:#e74c3c; }

/* Tabs */

.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }

.tab-btn { padding:8px 16px; border:2px solid #ddd; background:#fff; border-radius:20px; cursor:pointer; font-size:0.9em; transition:all .2s; }

.tab-btn.active { border-color:#e74c3c; background:#e74c3c; color:#fff; }

.tab-btn:hover { border-color:#e74c3c; }

/* Area filter */

.area-filter { margin-bottom:20px; }

.area-filter-title { font-size:0.9em; color:#666; margin-bottom:8px; }

.area-btns { display:flex; flex-wrap:wrap; gap:6px; }

.area-btn { padding:6px 12px; border:1px solid #ddd; background:#fff; border-radius:16px; cursor:pointer; font-size:0.8em; transition:all .2s; }

.area-btn.active { border-color:#3498db; background:#3498db; color:#fff; }

.area-btn:hover { border-color:#3498db; }

/* Cards */

.cards { display:grid; gap:16px; }

.card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); transition:transform .2s,box-shadow .2s; }

.card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.12); }

.card-body { padding:16px; }

.card-body h3 { font-size:1.2em; margin-bottom:8px; color:#333; }

.card-body h3 .alias { font-size:0.85em; color:#888; font-weight:normal; }

.card-meta { font-size:0.85em; color:#666; margin-bottom:8px; }

.card-intro { color:#555; margin-bottom:8px; line-height:1.5; }

.card-tags { margin-bottom:8px; }

.tag { display:inline-block; padding:2px 8px; background:#f0f0f0; border-radius:4px; font-size:0.75em; color:#666; margin-right:6px; margin-bottom:4px; }

.card-dishes { font-size:0.9em; color:#444; }

.card-dishes strong { color:#e74c3c; }

.tip { font-size:0.85em; color:#27ae60; margin-top:8px; padding:8px; background:#e8f8f5; border-radius:6px; }

.card.hidden { display:none; }

.no-results { text-align:center; padding:40px; color:#888; font-size:1.1em; }

/* Address link */

.address-link { color:#3498db; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }

.address-link:hover { color:#e74c3c; text-decoration:underline; }

.address-link:hover .addr-text { color:#e74c3c; }

.map-badge { background:#3498db; color:#fff; padding:1px 6px; border-radius:4px; font-size:0.75em; }

.address-link:hover .map-badge { background:#e74c3c; }

/* Section title */

.section-title { font-size:1.3em; margin:32px 0 16px; padding-bottom:8px; border-bottom:2px solid #e74c3c; color:#333; }

/* Dish cards */

.dish-card { background:#fff; padding:16px; border-radius:8px; margin-bottom:12px; }

.dish-card h3 { color:#e74c3c; margin-bottom:8px; }

.dish-card p { color:#555; margin-bottom:8px; }

.dish-place { color:#3498db; font-size:0.9em; }

/* Town section */

.town-section { background:#fff; padding:20px; border-radius:12px; margin-bottom:16px; }

.town-section h2 { color:#e74c3c; margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid #f0f0f0; }

.town-section h3 { color:#333; margin:16px 0 8px; font-size:1.1em; }

.town-section p { color:#555; margin-bottom:12px; }

.town-section ul { margin-left:20px; margin-bottom:12px; }

.town-section li { margin-bottom:4px; color:#555; }

/* Town list on homepage */

.town-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; margin:20px 0; }

.town-item { background:#fff; padding:16px; border-radius:8px; text-align:center; cursor:pointer; transition:all .2s; border:2px solid transparent; }

.town-item:hover { border-color:#e74c3c; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1); }

.town-item a { text-decoration:none; color:#333; display:block; }

.town-item .town-name { font-weight:bold; font-size:1.1em; margin-bottom:4px; }

.town-item .town-count { font-size:0.85em; color:#888; }

/* Footer */

.footer { text-align:center; padding:40px 16px; color:#888; font-size:0.9em; }

.footer p { margin-bottom:8px; }

/* Responsive */

/* Right sidebar (featured content) */

.sidebar-right { position:fixed; right:16px; top:160px; z-index:100; display:flex; flex-direction:column; gap:6px; }

.sidebar-right-item { display:flex; align-items:center; gap:8px; padding:8px 14px; background:#fff; border-radius:8px; text-decoration:none; color:#555; font-size:0.85em; box-shadow:0 1px 4px rgba(0,0,0,0.1); transition:all .2s; white-space:nowrap; }

.sidebar-right-item:hover { background:#e74c3c; color:#fff; transform:translateX(-4px); }

.sidebar-right-item .icon { font-size:1em; }

.sidebar-right-item .label { font-weight:500; }

/* Mid-range responsive: 601-900px */

@media (min-width:601px) and (max-width:900px) { .sidebar-right { display:none; } }

@media (max-width: 600px) {

    .sidebar-right { display:none !important; }

    .header h1 { font-size:1.5em; }

    .stats { gap:16px; }

    .stats { font-size:0.9em; }

    .area-btns { gap:4px; }

    .area-btn { font-size:0.75em; padding:3px 10px; }

    .town-grid { grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); }

}

/* CS Button */

.cs-btn { position:fixed; right:12px; bottom:84px; width:48px; height:48px; border-radius:50%; background:#27ae60; color:#fff; border:none; font-size:1.5em; box-shadow:0 4px 12px rgba(39,174,96,0.4); z-index:98; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .2s; }

.cs-btn:hover { transform:scale(1.1); }

.cs-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:300; align-items:center; justify-content:center; }

.cs-modal.open { display:flex; }

.cs-modal-content { background:#fff; border-radius:12px; width:90%; max-width:400px; max-height:80vh; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.3); }

.cs-modal-header { background:linear-gradient(135deg,#27ae60,#229954); color:#fff; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; }

.cs-modal-header h3 { margin:0; font-size:1.1em; }

.cs-modal-close { background:none; border:none; color:#fff; font-size:1.5em; cursor:pointer; padding:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; }

.cs-modal-body { padding:20px; max-height:60vh; overflow-y:auto; }

.cs-form-group { margin-bottom:16px; }

.cs-form-group label { display:block; margin-bottom:6px; font-size:0.9em; color:#555; font-weight:500; }

.cs-form-group input, .cs-form-group textarea { width:100%; padding:10px 12px; border:2px solid #ddd; border-radius:8px; font-size:0.85em; font-family:inherit; }

.cs-form-group input:focus, .cs-form-group textarea:focus { outline:none; border-color:#27ae60; }

.cs-form-group textarea { resize:vertical; min-height:100px; }

.cs-submit-btn { width:100%; padding:8px; background:linear-gradient(135deg,#27ae60,#229954); color:#fff; border:none; border-radius:8px; font-size:0.9em; cursor:pointer; transition:opacity .2s; }

.cs-submit-btn:hover { opacity:0.9; }

.cs-submit-btn:disabled { background:#95a5a6; cursor:not-allowed; }

.cs-success { text-align:center; padding:20px; }

.cs-success-icon { font-size:3em; color:#27ae60; margin-bottom:12px; }

.cs-success p { color:#555; margin:8px 0; }

@media (max-width:600px) { .cs-btn { bottom:140px; } }

.cs-hint { position:fixed; right:12px; bottom:140px; background:#fff; padding:8px 12px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.15); font-size:0.85em; color:#555; z-index:97; text-align:center; line-height:1.4; width:max-content; }

.cs-hint::after { content:''; position:absolute; right:20px; bottom:-8px; border:8px solid transparent; border-top-color:#fff; }

@media (max-width:600px) { .cs-hint { right:12px; bottom:196px; font-size:0.7em; } }