*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;color:#333}.container{max-width:1200px;margin:0 auto;padding:20px}.header{text-align:center;color:#fff;margin-bottom:30px}.header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.header p{font-size:1.1rem;opacity:.9}.card{background:#fff;border-radius:15px;padding:25px;margin-bottom:20px;box-shadow:0 8px 25px rgba(0,0,0,.1);transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 12px 35px rgba(0,0,0,.15)}.card h2{color:#4a5568;margin-bottom:20px;font-size:1.5rem;border-bottom:2px solid #e2e8f0;padding-bottom:10px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:20px;gap:20px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#4a5568}.form-group input,.form-group select{width:100%;padding:12px;border:2px solid #e2e8f0;border-radius:8px;font-size:16px;transition:border-color .3s ease}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary-color,#667eea);box-shadow:0 0 0 3px rgba(102,126,234,.1)}.btn{background:var(--theme-background,linear-gradient(135deg,#667eea 0,#764ba2 100%));color:#fff;padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;width:100%;margin-top:10px}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px rgba(102,126,234,.4)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.status{padding:12px;border-radius:8px;margin:10px 0;font-weight:500}.status.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.status.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.status.info{background:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.weather-data{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-gap:15px;gap:15px}.weather-item{text-align:center;padding:15px;background:#f8fafc;border-radius:10px;border:2px solid #e2e8f0}.weather-item .value{font-size:1.5rem;font-weight:700;color:var(--primary-color,#667eea);display:block}.weather-item .label{font-size:.9rem;color:#718096;margin-top:5px}.station-list{max-height:300px;overflow-y:auto}.station-item{background:#f8fafc;padding:15px;margin-bottom:10px;border-radius:8px;border-left:4px solid var(--card-border,#667eea)}.station-item h4{color:#4a5568;margin-bottom:5px}.station-item .station-info{font-size:.9rem;color:#718096}.forecast-history{max-height:400px;overflow-y:auto}.forecast-item{background:#f8fafc;padding:15px;margin-bottom:15px;border-radius:8px;border:2px solid #e2e8f0}.forecast-item .forecast-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.forecast-item .forecast-id{font-weight:700;color:var(--primary-color,#667eea)}.forecast-item .forecast-time{font-size:.9rem;color:#718096}.connection-status{position:fixed;top:20px;right:20px;padding:10px 15px;border-radius:20px;font-weight:600;z-index:1000}.connection-status.connected{background:#d4edda;color:#155724}.connection-status.disconnected{background:#f8d7da;color:#721c24}.loading{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid var(--primary-color,#667eea);border-radius:50%;animation:spin 1s linear infinite;margin-right:10px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:768px){.container{padding:10px}.header h1{font-size:2rem}.card{padding:20px}.weather-data{grid-template-columns:repeat(2,1fr)}}