* { margin: 0; padding: 0; }body { font-family: Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; }.container { max-width: 800px; margin: 0 auto; background: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden; }h1 { background: linear-gradient(45deg, #ff6b6b, #ffa726); color: white; text-align: center; padding: 20px; margin: 0; }nav { background: #f8f9fa; padding: 15px; border-bottom: 1px solid #dee2e6; display: flex; flex-wrap: wrap; gap: 10px; }nav a { color: #495057; text-decoration: none; padding: 8px 16px; border-radius: 5px; transition: background 0.3s; white-space: nowrap; }nav a:hover { background: #e9ecef; }.status-card, .config-card, .info-card, .action-card, .help-card { margin: 20px; padding: 20px; border: 1px solid #dee2e6; border-radius: 8px; background: #f8f9fa; }.status-card { background: linear-gradient(135deg, #e3f2fd 0%, #f1f8e9 100%); border-left: 4px solid #2196f3; }.time-display { margin-top: 15px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 8px; border: 1px solid #e0e0e0; }.time-display p { margin: 5px 0; font-size: 18px; }.config-card { background: white; border: 1px solid #dee2e6; }.help-card { background: #e7f3ff; border-left: 4px solid #2196f3; }h2, h3 { color: #343a40; margin-bottom: 15px; }label { display: block; margin-bottom: 5px; font-weight: bold; color: #495057; }input, select { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ced4da; border-radius: 5px; font-size: 16px; }input:focus, select:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25); }.btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background 0.3s; margin-right: 10px; }.btn-primary { background: #007bff; color: white; }.btn-primary:hover { background: #0056b3; }.btn-warning { background: #ffc107; color: #212529; }.btn-warning:hover { background: #e0a800; }.btn-info { background: #17a2b8; color: white; }.btn-info:hover { background: #138496; }.network-item { padding: 10px; margin: 5px 0; background: white; border: 1px solid #dee2e6; border-radius: 5px; cursor: pointer; transition: background 0.3s; }.network-item:hover { background: #e9ecef; }.solar-card, .solar-times-card, .solar-chart-card { margin: 20px; padding: 20px; border: 1px solid #dee2e6; border-radius: 8px; background: linear-gradient(135deg, #fff5e6 0%, #e6f3ff 100%); border-left: 4px solid #ffa726; }.solar-position { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }.position-display { display: flex; gap: 30px; flex-wrap: wrap; }.position-item { text-align: center; min-width: 120px; }.position-item h3 { color: #666; margin-bottom: 10px; font-size: 14px; }.position-value { font-size: 36px; font-weight: bold; color: #ff6b6b; margin-bottom: 5px; }.position-unit { font-size: 12px; color: #888; margin-bottom: 5px; }.position-cardinal { font-size: 14px; font-weight: bold; color: #4ecdc4; }.position-status { font-size: 14px; font-weight: bold; color: #2ecc71; }.position-distance { font-size: 12px; color: #888; }.solar-compass { position: relative; width: 200px; height: 200px; margin: 0 auto; }.compass-circle { width: 100%; height: 100%; border: 3px solid #ddd; border-radius: 50%; position: relative; background: radial-gradient(circle, #f8f9fa 0%, #e9ecef 100%); transition: box-shadow 0.3s; }.compass-circle.sun-visible { box-shadow: 0 0 20px rgba(255, 193, 7, 0.5); background: radial-gradient(circle, #fff9c4 0%, #f8f9fa 100%); }.compass-pointer { position: absolute; top: 10px; left: 50%; width: 4px; height: 80px; background: #ff6b6b; transform-origin: center bottom; transform: translateX(-50%) rotate(0deg); transition: transform 0.5s ease; }.compass-pointer::before { content: ''; position: absolute; top: 0; left: 50%; width: 12px; height: 12px; background: #ffa726; border-radius: 50%; transform: translateX(-50%); }.compass-labels { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }.compass-n { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-weight: bold; color: #666; }.compass-e { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-weight: bold; color: #666; }.compass-s { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); font-weight: bold; color: #666; }.compass-w { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-weight: bold; color: #666; }.solar-times { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }.time-item { text-align: center; min-width: 120px; }.time-item h3 { color: #666; margin-bottom: 10px; font-size: 14px; }.time-value { font-size: 24px; font-weight: bold; color: #4ecdc4; }.chart-container { text-align: center; margin: 20px 0; }.chart-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; color: #333; }.chart-status { font-size: 14px; margin-bottom: 10px; padding: 5px 10px; border-radius: 5px; display: inline-block; }.chart-status.loading { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }.chart-status.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }.chart-status.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }.chart-legend { display: flex; justify-content: center; gap: 20px; margin-top: 10px; flex-wrap: wrap; }.legend-item { display: flex; align-items: center; gap: 5px; font-size: 14px; }.legend-color { width: 20px; height: 3px; border-radius: 2px; }@media (max-width: 600px) { .container { margin: 10px; border-radius: 5px; } nav { padding: 10px; } nav a { padding: 6px 12px; font-size: 14px; } .time-display p { font-size: 16px; } .position-display { justify-content: center; } .solar-times { justify-content: center; } .solar-compass { width: 150px; height: 150px; } .chart-legend { flex-direction: column; align-items: center; } }#static_ip_config { background: #f0f8ff; padding: 15px; border-radius: 5px; margin: 10px 0; border: 1px solid #d0e0f0; }input[type='text'][pattern] { font-family: monospace; }.tracker-card { margin: 20px; padding: 20px; border: 1px solid #dee2e6; border-radius: 8px; background: linear-gradient(135deg, #e6f7ff 0%, #fff0e6 100%); border-left: 4px solid #17a2b8; }.tracker-position { display: flex; gap: 30px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }.tracker-info { background: rgba(255,255,255,0.8); padding: 15px; border-radius: 8px; border: 1px solid #e0e0e0; min-width: 250px; }.tracker-info p { margin: 8px 0; font-size: 14px; }.position-value#tracker-azimuth, .position-value#tracker-elevation { color: #17a2b8; }.tracker-controls { margin-top: 20px; }.tracker-controls button, .tracker-controls a { margin: 5px; }.ota-card, .upload-card, .progress-card {   margin: 20px; padding: 20px; border: 1px solid #dee2e6; border-radius: 8px;   background: linear-gradient(135deg, #e8f4fd 0%, #f0f8ff 100%); border-left: 4px solid #007bff; }.ota-info { display: flex; gap: 30px; flex-wrap: wrap; }.version-info, .memory-info { flex: 1; min-width: 250px; background: rgba(255,255,255,0.8);   padding: 15px; border-radius: 8px; border: 1px solid #e0e0e0; }.memory-bar { width: 100%; height: 20px; background: #e9ecef; border-radius: 10px;   overflow: hidden; margin: 10px 0; }.memory-used { height: 100%; background: linear-gradient(90deg, #28a745 0%, #ffc107 70%, #dc3545 90%);   transition: width 0.3s ease; }.memory-legend { display: flex; gap: 15px; font-size: 12px; }.legend-used { color: #28a745; } .legend-free { color: #6c757d; }.upload-methods { display: flex; gap: 30px; flex-wrap: wrap; }.method-web, .method-ide { flex: 1; min-width: 300px; background: rgba(255,255,255,0.9);   padding: 20px; border-radius: 8px; border: 1px solid #ddd; }.file-info { margin: 15px 0; padding: 10px; background: #f8f9fa; border-radius: 5px;   border: 1px solid #e9ecef; min-height: 40px; }.upload-controls { margin-top: 15px; }.ide-config { background: #f8f9fa; padding: 15px; border-radius: 5px; margin: 10px 0;   border: 1px solid #e9ecef; }.ide-config code { background: #e9ecef; padding: 2px 6px; border-radius: 3px; font-family: monospace; }.help-text { font-size: 14px; color: #6c757d; font-style: italic; }.progress-container { margin: 20px 0; }.progress-bar { width: 100%; height: 30px; background: #e9ecef; border-radius: 15px;   overflow: hidden; position: relative; }.progress-fill { height: 100%; background: linear-gradient(90deg, #007bff 0%, #28a745 100%);   width: 0%; transition: width 0.3s ease; border-radius: 15px; }.progress-text { display: flex; justify-content: space-between; margin-top: 10px; font-weight: bold; }.progress-status { background: rgba(255,255,255,0.9); padding: 15px; border-radius: 8px;   margin: 15px 0; border: 1px solid #ddd; }.progress-warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404;   padding: 15px; border-radius: 8px; margin-top: 15px; text-align: center; }.manual-controls button { margin: 5px; min-width: 80px; touch-action: manipulation;   user-select: none; -webkit-user-select: none; }.manual-controls button:active { transform: scale(0.95);   box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); }#motor-status { padding: 5px; border-radius: 4px; background: #f0f0f0;   text-align: center; font-size: 14px; color: #333; }.checkbox-group { margin: 10px 0; }.checkbox-label { display: flex; align-items: center; cursor: pointer; }.checkbox-label input[type='checkbox'] { margin-right: 8px; width: 18px; height: 18px; cursor: pointer; }.checkbox-label span { line-height: 1.4; }@keyframes blink-excellent { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }@keyframes blink-good { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }@keyframes blink-fair { 0%, 100% { opacity: 1; } 40%, 60% { opacity: 0.3; } }@keyframes blink-poor { 0%, 100% { opacity: 1; } 30%, 70% { opacity: 0.2; } }.signal-excellent { animation: blink-excellent 2s ease-in-out infinite; }.signal-good { animation: blink-good 1.5s ease-in-out infinite; }.signal-fair { animation: blink-fair 1s ease-in-out infinite; }.signal-poor { animation: blink-poor 0.6s ease-in-out infinite; }