:root{--primary: #ff7e67;--primary-light: #ffb4a2;--bg-color: #fffaf0;--text-main: #2d3436;--text-sub: #636e72;--card-bg: rgba(255, 255, 255, .8);--shadow-sm: 0 4px 6px rgba(0,0,0,.05);--shadow-md: 0 10px 20px rgba(255, 126, 103, .15);--radius-lg: 24px}*{box-sizing:border-box;margin:0;padding:0;font-family:Nunito,PingFang SC,sans-serif}body{background:var(--bg-color);color:var(--text-main);overflow-x:hidden}.app-container{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at top right,#ffeaa7,#fffaf0 40%)}.main-content{flex:1;padding:80px 20px 20px;max-width:1000px;margin:0 auto;width:100%}.glass-header{position:fixed;top:0;left:0;right:0;height:64px;background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:center;padding:0 24px;z-index:100;border-bottom:1px solid rgba(255,255,255,.5)}.header-left,.header-right{display:flex;align-items:center;gap:12px}.logo-title{font-size:1.2rem;font-weight:800;color:var(--primary);display:flex;align-items:center;gap:8px}.logo-icon{font-size:1.5rem}.icon-btn{background:#fff;border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);color:var(--text-main);transition:transform .2s}.icon-btn:hover{transform:scale(1.1)}.sync-status{display:flex;align-items:center;gap:6px;font-size:.8rem;color:#0984e3;background:#e3f2fd;padding:4px 10px;border-radius:20px;font-weight:600}.spin-anim{animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.fav-nav-btn{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid transparent;padding:6px 16px;border-radius:20px;cursor:pointer;font-weight:600;color:var(--text-sub);transition:all .3s;box-shadow:var(--shadow-sm)}.fav-nav-btn.active{border-color:var(--primary);color:var(--primary)}.toast-msg{position:fixed;top:80px;left:50%;transform:translate(-50%);background:#2ecc71;color:#fff;padding:10px 24px;border-radius:30px;display:flex;align-items:center;gap:8px;font-weight:700;z-index:200;box-shadow:0 4px 12px #2ecc714d}.view-map{display:flex;flex-direction:column;gap:30px;height:calc(100vh - 100px)}.map-wrapper{flex:1;position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;display:flex;align-items:center;justify-content:center}.map-outline{width:100%;height:100%;max-height:500px}.city-pin{position:absolute;transform:translate(-50%,-50%);background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:10}.pin-marker{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.pin-dot{width:12px;height:12px;background:var(--primary);border-radius:50%;border:2px solid white;z-index:2;box-shadow:0 2px 4px #0003}.pin-pulse{position:absolute;width:100%;height:100%;background:var(--primary);border-radius:50%;animation:pulse 2s infinite;opacity:.6}@keyframes pulse{0%{transform:scale(1);opacity:.8}to{transform:scale(3);opacity:0}}.city-name{background:#ffffffe6;padding:2px 8px;border-radius:12px;font-size:.85rem;font-weight:700;color:var(--text-main);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.city-pin:hover .city-name{background:var(--primary);color:#fff}.health-tips-section{background:#fff;padding:20px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.section-title{display:flex;align-items:center;gap:8px;color:#00b894;margin-bottom:12px;font-size:1.1rem}.tips-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}.tips-scroll::-webkit-scrollbar{height:6px}.tips-scroll::-webkit-scrollbar-thumb{background:#dfe6e9;border-radius:10px}.tip-card{min-width:260px;background:#e8f8f5;padding:16px;border-radius:16px;scroll-snap-align:start;border-left:4px solid #00b894}.tip-card h4{color:#00b894;margin-bottom:6px;font-size:1rem}.tip-card p{font-size:.85rem;color:var(--text-sub);line-height:1.4}.view-list{display:flex;flex-direction:column;gap:24px}.city-hero{text-align:center;padding:20px 0}.city-hero h2{font-size:2rem;color:var(--primary);margin-bottom:12px;text-shadow:2px 2px 0px rgba(255,126,103,.1)}.ai-intro-box{background:linear-gradient(135deg,#fff,#fff0ed);padding:16px 24px;border-radius:16px;border:1px dashed var(--primary-light);display:inline-block;text-align:left;max-width:600px;margin:0 auto;box-shadow:var(--shadow-sm)}.ai-intro-box p{color:#d35400;font-size:.95rem;line-height:1.6;font-weight:500}.loading-skeleton{display:flex;flex-direction:column;gap:8px}.skel-line{height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px}.w-full{width:100%}.w-3\/4{width:75%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.search-bar{position:relative;max-width:400px;margin:0 auto;width:100%}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#a4b0be}.search-bar input{width:100%;padding:14px 20px 14px 48px;border-radius:30px;border:2px solid white;background:#fff;box-shadow:var(--shadow-sm);font-size:1rem;outline:none;transition:border-color .3s}.search-bar input:focus{border-color:var(--primary-light)}.food-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.food-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);position:relative;transition:box-shadow .3s;display:flex;flex-direction:column}.food-card:hover{box-shadow:var(--shadow-md)}.food-card-img{height:160px;background:#f8f9fa;display:flex;align-items:center;justify-content:center;padding:20px}.food-svg{width:100px;height:100px;filter:drop-shadow(0 8px 8px rgba(0,0,0,.1))}.food-card-info{padding:20px;flex:1}.food-card-info h3{font-size:1.2rem;margin-bottom:8px;color:var(--text-main)}.truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9rem;color:var(--text-sub);line-height:1.5}.fav-btn-absolute{position:absolute;top:16px;right:16px;background:#fff;border:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a;transition:transform .2s}.fav-btn-absolute:hover{transform:scale(1.1)}.empty-state{grid-column:1 / -1;text-align:center;padding:60px 20px;color:var(--text-sub)}.empty-icon{font-size:3rem;margin-bottom:16px;opacity:.5}.view-detail{max-width:600px;margin:0 auto}.detail-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}.detail-hero{height:250px;background:linear-gradient(135deg,#ffeaa7,#ffb4a2);display:flex;align-items:center;justify-content:center;position:relative}.detail-svg-wrapper{width:160px;height:160px;background:#ffffff80;border-radius:50%;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 10px 30px #0000001a}.big-fav-btn{position:absolute;bottom:-24px;right:32px;width:56px;height:56px;background:#fff;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000026;cursor:pointer;transition:transform .2s}.big-fav-btn:hover{transform:scale(1.1)}.detail-content{padding:40px 32px 32px}.detail-title{font-size:2rem;color:var(--text-main);margin-bottom:24px}.info-section{margin-bottom:24px}.info-section h3{font-size:1.1rem;color:var(--primary);margin-bottom:12px;display:flex;align-items:center;gap:8px}.info-section p{color:var(--text-sub);line-height:1.7;font-size:1rem}.health-box{background:#f0fdf4;padding:20px;border-radius:16px;border-left:4px solid #22c55e}.health-box h3{color:#16a34a}.health-box p{color:#15803d}