* { 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:122px; height:calc(100vh - 122px); 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 drawer */

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

.mobile-drawer { display:block; position:fixed; top:0; left:0; width:100%; height:100vh; background:#fff; z-index:200; transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; pointer-events:none; }

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

@media (max-width:600px) {

    .mobile-menu-btn { display:flex; align-items:center; justify-content:center; position:fixed; right:12px; bottom:24px; width:48px; height:48px; border-radius:50%; background:#e74c3c; color:#fff; border:none; font-size:1.3em; box-shadow:0 4px 12px rgba(231,76,60,0.4); z-index:99; cursor:pointer; }

    .mobile-drawer { display:block; position:fixed; top:0; left:-160px; width:140px; height:100vh; background:#fff; box-shadow:2px 0 16px rgba(0,0,0,0.2); z-index:200; transition:left .3s ease; overflow-y:auto; padding:8px; pointer-events:none; }

    .mobile-drawer.open { left:0; pointer-events:auto; }

    .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 { display:flex; justify-content:space-between; align-items:center; font-size:1em; font-weight:bold; color:#c0392b; padding-bottom:12px; border-bottom:2px solid #e74c3c; margin-bottom:16px; }

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

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

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

    .drawer-item.current { background:#e74c3c; color:#fff; font-weight:bold; }

    .drawer-section-title { font-size:0.75em; color:#999; padding:4px 8px; font-weight:bold; }

    .drawer-item .count { font-size:0.7em; color:#888; background:#e0e0e0; padding:2px 6px; 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:0.9em; 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-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.7em; 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 */

.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 grid */

.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; }



/* ──── 通用板块样式 ──── */



/* 时令日历 */

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

.calendar-month { background:#fff; border-radius:10px; padding:14px; box-shadow:0 1px 4px rgba(0,0,0,0.08); border-top:3px solid #e74c3c; }

.calendar-month .month-label { font-weight:bold; color:#e74c3c; font-size:0.95em; margin-bottom:8px; }

.calendar-month .item { font-size:0.85em; color:#555; padding:2px 0; line-height:1.4; }

.calendar-month .note { font-size:0.75em; color:#999; margin-top:4px; font-style:italic; }



/* 手信卡片 */

.shoushen-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin:16px 0; }

.shoushen-card { background:#fff; border-radius:10px; padding:16px; box-shadow:0 1px 4px rgba(0,0,0,0.08); }

.shoushen-card .s-name { font-weight:bold; font-size:1.05em; color:#333; margin-bottom:6px; }

.shoushen-card .s-brand { color:#e74c3c; font-size:0.9em; margin-bottom:4px; }

.shoushen-card .s-info { font-size:0.85em; color:#666; margin-bottom:4px; }

.shoushen-card .s-where { font-size:0.8em; color:#888; background:#f5f5f5; padding:4px 8px; border-radius:4px; margin-top:6px; display:inline-block; }



/* 典故卡片 */

.diangu-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; margin:16px 0; }

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

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

.diangu-card .dish-img { width:100%; max-height:220px; object-fit:cover; display:block; }

.diangu-card .card-body { padding:16px; }

.diangu-card .card-body h3 { color:#e74c3c; font-size:1.05em; margin-bottom:8px; }

.diangu-card .card-body p { color:#555; font-size:0.88em; line-height:1.7; margin-bottom:8px; }

.diangu-card .town-tag { display:inline-block; background:#e74c3c; color:#fff; font-size:0.75em; padding:2px 10px; border-radius:10px; margin-bottom:8px; }



/* 镇代表菜对照表 */

.dish-table { width:100%; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.08); margin:16px 0; }

.dish-table th { background:#e74c3c; color:#fff; padding:10px 12px; text-align:left; font-size:0.9em; }

.dish-table td { padding:8px 12px; border-bottom:1px solid #eee; font-size:0.85em; color:#555; vertical-align:top; }

.dish-table tr:last-child td { border-bottom:none; }

.dish-table tr:hover td { background:#fdf8f8; }

.dish-table .dish-name { color:#c0392b; font-weight:bold; }



/* 导航入口 */

.nav-cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:0 0 20px; }

.nav-card { background:#fff; border-radius:10px; padding:12px 14px; text-align:center; text-decoration:none; color:#333; box-shadow:0 1px 4px rgba(0,0,0,0.08); transition:all .2s; border:2px solid transparent; }

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

.nav-card .nav-icon { font-size:1.4em; margin-bottom:4px; }

.nav-card .nav-title { font-weight:bold; font-size:0.9em; margin-bottom:2px; }

.nav-card .nav-desc { font-size:0.75em; color:#888; }

/* 面包屑行 + 返回首页按钮 */

.breadcrumb-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }

.breadcrumb-row .breadcrumb { margin-bottom:0; }

.back-home-btn { background:#fff; border:1.5px solid #e74c3c; color:#e74c3c; border-radius:20px; padding:5px 16px; font-size:0.8em; text-decoration:none; white-space:nowrap; transition:all .2s; }

.back-home-btn:hover { background:#e74c3c; color:#fff; }

.breadcrumb { font-size:0.8em; color:#888; margin-bottom:14px; }

.breadcrumb a { color:#e74c3c; text-decoration:none; }

.breadcrumb a:hover { text-decoration:underline; }



/* 介绍文字块 */

.intro-block { background:#fff; border-radius:10px; padding:16px; margin:16px 0; box-shadow:0 1px 4px rgba(0,0,0,0.08); }

.intro-block p { color:#555; font-size:0.9em; line-height:1.7; }



/* 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; } }



/* Responsive */

@media (max-width: 600px) {

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

    .stats { gap:16px; }

    .area-btns { gap:4px; }

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

    .calendar-grid { grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }

    .shoushen-grid { grid-template-columns:1fr; }

    .dish-table { font-size:0.8em; }

    .nav-cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:0 0 20px; }

    .nav-card { padding:10px 12px; }

    .nav-card .nav-icon { font-size:1.3em; margin-bottom:2px; }

    .nav-card .nav-title { font-size:0.8em; margin-bottom:1px; }

    .nav-card .nav-desc { font-size:0.7em; }

    .diangu-grid { grid-template-columns:1fr; }

}