:root{--bg: #f8fafc;--header-bg: #ffffff;--primary: #2d3436;--accent: #0984e3;--border-red: #d63031;--sea: #e0f2fe}body{margin:0;font-family:Inter,-apple-system,sans-serif;background:var(--bg);color:var(--primary);overflow:hidden}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw}.main-header{height:80px;background:var(--header-bg);padding:0 40px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 15px #0000000d;z-index:100}.logo-section{display:flex;align-items:center;gap:15px}.icon-box{background:var(--accent);color:#fff;padding:10px;border-radius:12px;box-shadow:0 4px 10px #0984e34d}.logo-section h1{margin:0;font-size:20px;letter-spacing:-.5px}.badge-pro{font-size:10px;background:#f1f2f6;padding:2px 6px;border-radius:4px;vertical-align:middle}.cloud-status{margin:4px 0 0;font-size:12px;color:#94a3b8;display:flex;align-items:center;gap:4px}.header-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.progress-bar-container{width:200px;height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#00b894,#55efc4);transition:width .5s ease}.progress-text{font-size:12px;font-weight:600;color:#64748b}.content-area{flex:1;position:relative;overflow:hidden}.map-view{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#fff,#f1f5f9)}.map-controls{position:absolute;top:30px;left:30px;display:flex;flex-direction:column;gap:10px;z-index:10}.map-controls button{padding:10px 20px;border:none;background:#fff;border-radius:10px;box-shadow:0 4px 12px #00000014;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;transition:all .2s}.map-controls button:hover{transform:translateY(-2px);box-shadow:0 6px 15px #0000001f}.zoom-indicator{font-size:12px;color:#64748b;text-align:center}.svg-container{width:90%;max-width:1000px;transition:transform .4s cubic-bezier(.2,0,.2,1)}.china-map-svg{filter:drop-shadow(0 20px 50px rgba(0,0,0,.1));border-radius:20px;overflow:hidden}.national-border{fill:none;stroke:var(--border-red);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;pointer-events:none;stroke-dasharray:1000;animation:draw 3s ease forwards}@keyframes draw{0%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}.province-group{cursor:pointer}.province-dot{stroke:#fff;stroke-width:2;transition:all .3s}.province-dot.visited{filter:drop-shadow(0 0 8px currentColor);stroke-width:3}.province-group:hover .province-dot{transform:scale(1.5);stroke-width:4}.province-name{font-size:12px;font-weight:600;text-anchor:middle;fill:#475569;pointer-events:none}.sea-area{fill:#bae6fd66;stroke:#bae6fd;stroke-width:1;stroke-dasharray:5 5}.sea-label{font-size:14px;fill:#0369a1;font-weight:700;font-style:italic}.province-detail{padding:40px;max-width:1200px;margin:0 auto}.back-btn{background:#fff;border:none;padding:12px 24px;border-radius:12px;display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #0000000d;margin-bottom:40px}.detail-layout{display:grid;grid-template-columns:1fr 400px;gap:40px}.info-card{background:#fff;border-radius:30px;overflow:hidden;box-shadow:0 20px 40px #0000000d}.card-header{padding:50px 40px;color:#fff}.type-tag{background:#fff3;padding:4px 12px;border-radius:8px;font-size:12px;display:inline-block;margin-bottom:15px}.card-header h2{margin:0;font-size:48px;font-weight:800}.card-body{padding:40px}.desc-text{font-size:18px;line-height:1.6;color:#64748b;margin-bottom:40px}.city-section h3{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:20px}.city-grid{display:flex;flex-wrap:wrap;gap:12px}.city-pill{background:#f1f5f9;padding:10px 20px;border-radius:15px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}.city-dot{width:6px;height:6px;border-radius:50%}.visual-card{display:flex;flex-direction:column;gap:30px}.shape-box{height:400px;background:#fff;border-radius:30px;border:6px solid;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.abstract-shape{width:200px;height:200px;filter:blur(60px);opacity:.3;animation:float 6s infinite ease-in-out}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(20px,-20px)}}.achievement{background:#fff;padding:25px;border-radius:20px;display:flex;align-items:center;gap:20px;box-shadow:0 10px 25px #0000000d}.award-icon{color:#f1c40f}.achievement h4{margin:0;font-size:16px}.achievement p{margin:4px 0 0;font-size:13px;color:#94a3b8}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.loader{width:48px;height:48px;border:5px solid #e2e8f0;border-bottom-color:var(--accent);border-radius:50%;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.map-legend{margin-top:30px;display:flex;gap:25px;background:#fff;padding:12px 25px;border-radius:15px;font-size:13px;box-shadow:0 4px 10px #0000000d}.legend-item{display:flex;align-items:center;gap:8px}.dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1}.dot.visited{background:#00b894}.border-line{width:20px;height:3px;background:var(--border-red)}