* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: #0b1a2e; color: #fff; display: flex; flex-direction: column; min-height: 100vh; }
#header { background: linear-gradient(135deg, #0f2b4a, #1a4a7a); padding: 18px 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; flex: 0 0 auto; box-shadow: 0 2px 20px rgba(0,0,0,0.4); }
#header h1 { font-size: 24px; font-weight: 600; letter-spacing: 2px; }
#header h1 span { color: #4fc3f7; }
#controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#cityInput { padding: 10px 16px; border: none; border-radius: 8px; background: rgba(255,255,255,0.12); color: #fff; font-size: 14px; width: 200px; outline: none; transition: 0.3s; }
#cityInput:focus { background: rgba(255,255,255,0.2); }
#cityInput::placeholder { color: rgba(255,255,255,0.5); }
#searchBtn, #locateBtn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: 0.3s; }
#searchBtn { background: #4fc3f7; color: #0b1a2e; }
#searchBtn:hover { background: #29b6f6; transform: translateY(-1px); }
#locateBtn { background: rgba(255,255,255,0.15); color: #fff; }
#locateBtn:hover { background: rgba(255,255,255,0.25); }
#map { flex: 1 1 auto; height: auto; min-height: 320px; width: 100%; z-index: 1; }
#infoPanel { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; font-size: 14px; padding: 0 12px; }
#infoPanel .stat { display: flex; align-items: center; gap: 8px; }
#infoPanel .stat .label { color: rgba(255,255,255,0.5); }
#infoPanel .stat .value { color: #4fc3f7; font-weight: 600; }
.weather-popup { text-align: center; min-width: 160px; }
.weather-popup .city-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.weather-popup .temp { font-size: 36px; font-weight: 700; color: #4fc3f7; }
.weather-popup .desc { font-size: 14px; color: rgba(255,255,255,0.7); margin: 4px 0; }
.weather-popup .detail { font-size: 12px; color: rgba(255,255,255,0.5); display: flex; justify-content: center; gap: 16px; margin-top: 6px; }
.leaflet-popup-content-wrapper { background: rgba(11,26,46,0.95) !important; color: #fff !important; border-radius: 12px !important; border: 1px solid rgba(79,195,247,0.3); }
.leaflet-popup-tip { background: rgba(11,26,46,0.95) !important; }
.leaflet-control-zoom a { background: rgba(11,26,46,0.85) !important; color: #fff !important; border-color: rgba(79,195,247,0.3) !important; }
.loading { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(79,195,247,0.3); border-top-color: #4fc3f7; border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
#searchWrap { position: relative; }
#suggestions { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 260px; background: rgba(13,36,61,0.97); backdrop-filter: blur(12px); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); overflow: hidden; z-index: 1000; }
#suggestions.show { display: block; }
.sug-item { padding: 10px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sug-item:last-child { border-bottom: none; }
.sug-item:hover, .sug-item.active { background: rgba(79,195,247,0.14); }
.sug-item .sug-name { font-size: 14px; font-weight: 500; color: #fff; }
.sug-item .sug-sub { font-size: 12px; color: rgba(255,255,255,0.5); }
.sug-tip { padding: 10px 14px; font-size: 13px; color: rgba(255,255,255,0.55); }