*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#0a0e27;color:#e0e0e0;line-height:1.6}#root{min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:20px;position:relative}h1{color:#00d9ff;text-align:center;margin-bottom:20px}p{text-align:center;margin-bottom:20px}.telemetry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}@media(max-width:768px){.telemetry-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.telemetry-grid{grid-template-columns:1fr}}.loading{text-align:center;font-size:18px;color:#8b9dc3;margin-top:50px;padding:40px;background-color:#1a1f3a;border-radius:8px}.status-banner{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-radius:8px;margin-bottom:20px;font-size:18px}.status-nominal{background-color:#1a4d2e;border-left:10px solid #4caf50}.status-warning{background-color:#4d3a1a;border-left:10px solid #ff9800}.status-critical{background-color:#4d1a1a;border-left:10px solid #f44336}.status-offline{background-color:gray;border-left:10px solid #0a0e27}.status-label{font-weight:500}.mission-time{font-family:Courier New,monospace}.telemetry-card{background-color:#1a1f3a;border:1px solid #2a3f5f;border-radius:8px;padding:20px;text-align:center;transition:transform .2s ease,box-shadow .2s ease}.telemetry-card:hover{transform:translateY(-4px);box-shadow:0 6px 12px #00d9ff33}.card-label{font-size:14px;color:#8b9dc3;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.card-value{font-size:36px;font-weight:700;color:#00d9ff;font-family:Courier New,monospace}.card-unit{font-size:18px;color:#8b9dc3;margin-left:6px}.telemetry-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}@media(max-width:768px){.telemetry-cards-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.telemetry-cards-grid{grid-template-columns:1fr}}.telemetry-graph{background-color:#1a1f3a;border:1px solid #2a3f5f;border-radius:8px;padding:20px;margin-bottom:20px}.graph-title{color:#00d9ff;font-size:18px;margin:0 0 15px;font-weight:600}.recharts-tooltip-wrapper{outline:none}.telemetry-graphs{margin-top:40px}.section-title{color:#00d9ff;font-size:24px;margin:0 0 20px;font-weight:600}.loading-screen{display:flex;justify-content:center;align-items:center;min-height:50vh}.loading-content{text-align:center}.loading-spinner{width:50px;height:50px;margin:0 auto 20px;border:4px solid #2a3f5f;border-top:4px solid #00d9ff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{color:#8b9dc3;font-size:18px;margin:0}.connection-status{position:absolute;top:20px;right:20px;background-color:#1a1f3a;border:1px solid #2a3f5f;border-radius:20px;padding:8px 16px;font-size:14px;z-index:10;display:flex;align-items:center;gap:12px}.status-main{display:flex;align-items:center;gap:8px}.status-dot{width:10px;height:10px;border-radius:50%;animation:pulse 2s ease-in-out infinite}.connected .status-dot{background-color:#4caf50;box-shadow:0 0 8px #4caf50}.disconnected .status-dot{background-color:#f44336;box-shadow:0 0 8px #f44336;animation:none}.status-text{color:#e0e0e0;font-weight:500}.status-metrics{display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid #2a3f5f;font-family:Courier New,monospace;font-size:12px}.latency{font-weight:700}.latency.good{color:#4caf50}.latency.ok{color:#ff9800}.latency.poor{color:#f44336}.packet-loss{color:#f44336;font-size:11px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media(max-width:768px){.connection-status{position:static;margin:0 auto 20px;width:fit-content;flex-wrap:wrap;justify-content:center}}.filter-bar{display:flex;align-items:flex-end;gap:16px;background-color:#1a1f3a;border:1px solid #2a3f5f;border-radius:8px;padding:16px 20px;margin-bottom:20px;flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;gap:6px}.filter-label{font-size:12px;color:#8b9dc3;text-transform:uppercase;letter-spacing:1px}.filter-input,.filter-select{background-color:#0a0e27;border:1px solid #2a3f5f;border-radius:6px;color:#e0e0e0;font-size:14px;padding:8px 12px;min-width:180px;outline:none;transition:border-color .2s ease}.filter-input:focus,.filter-select:focus{border-color:#00d9ff}.filter-select option{background-color:#1a1f3a}.filter-actions{display:flex;gap:8px}.btn-primary{background-color:#00d9ff;color:#0a0e27;border:none;border-radius:6px;padding:8px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s ease}.btn-primary:hover{opacity:.85}.btn-secondary{background-color:transparent;color:#8b9dc3;border:1px solid #2a3f5f;border-radius:6px;padding:8px 20px;font-size:14px;cursor:pointer;transition:border-color .2s ease,color .2s ease}.btn-secondary:hover{border-color:#00d9ff;color:#e0e0e0}.add-entry-form{margin-bottom:20px}.btn-toggle{background-color:transparent;color:#00d9ff;border:1px solid #00d9ff;border-radius:6px;padding:8px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s ease,color .2s ease;margin-bottom:12px}.btn-toggle:hover{background-color:#00d9ff;color:#0a0e27}.form-card{background-color:#1a1f3a;border:1px solid #2a3f5f;border-radius:8px;padding:20px}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-size:12px;color:#8b9dc3;text-transform:uppercase;letter-spacing:1px}.form-input{background-color:#0a0e27;border:1px solid #2a3f5f;border-radius:6px;color:#e0e0e0;font-size:14px;padding:8px 12px;outline:none;transition:border-color .2s ease;width:100%}.form-input:focus{border-color:#00d9ff}.form-input::-webkit-calendar-picker-indicator{filter:invert(.8);cursor:pointer;opacity:.7}.form-input::-webkit-calendar-picker-indicator:hover{opacity:1}.form-input option{background-color:#1a1f3a}.input-error{border-color:#f44336}.error-msg{font-size:12px;color:#f44336}.btn-submit{width:100%}.btn-primary:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.form-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.form-grid{grid-template-columns:1fr}}.telemetry-table-wrapper{background-color:#1a1f3a;border:1px solid #2a3f5f;border-radius:8px;overflow:hidden}.telemetry-table{width:100%;border-collapse:collapse;font-size:14px}.telemetry-table thead tr{background-color:#141829;border-bottom:1px solid #2a3f5f}.telemetry-table th{padding:12px 16px;text-align:left;font-size:12px;color:#8b9dc3;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}.telemetry-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease}.telemetry-table th.sortable:hover{color:#00d9ff}.sort-indicator{margin-left:4px;color:#00d9ff}.sort-indicator.inactive{color:#2a3f5f}.telemetry-table tbody tr{border-bottom:1px solid #2a3f5f;transition:background-color .15s ease}.telemetry-table tbody tr:last-child{border-bottom:none}.telemetry-table tbody tr:hover{background-color:#141829}.telemetry-table td{padding:12px 16px;color:#e0e0e0}.mono{font-family:Courier New,monospace}.status-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-nominal{background-color:#1a4d2e;color:#4caf50;border:1px solid #4caf50}.status-warning{background-color:#4d3a1a;color:#ff9800;border:1px solid #ff9800}.status-critical{background-color:#4d1a1a;color:#f44336;border:1px solid #f44336}.status-offline{background-color:#2a2a2a;color:gray;border:1px solid #808080}.btn-delete{background-color:transparent;color:#f44336;border:1px solid #f44336;border-radius:4px;padding:4px 12px;font-size:12px;cursor:pointer;transition:background-color .2s ease,color .2s ease}.btn-delete:hover{background-color:#f44336;color:#fff}.table-row-pad{pointer-events:none}.table-row-pad td{border-bottom:1px solid transparent}.table-row-pad:last-child td{border-bottom:none}.table-empty{padding:40px;text-align:center;color:#8b9dc3;font-size:14px}.pagination{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid #2a3f5f;background-color:#141829}.pagination-info{font-size:13px;color:#8b9dc3;font-family:Courier New,monospace}.pagination-controls{display:flex;align-items:center;gap:12px}.btn-page{background-color:transparent;color:#00d9ff;border:1px solid #2a3f5f;border-radius:6px;padding:6px 14px;font-size:13px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}.btn-page:hover:not(:disabled){border-color:#00d9ff;background-color:#00d9ff14}.btn-page:disabled{opacity:.3;cursor:not-allowed}.page-indicator{font-size:13px;color:#8b9dc3;min-width:50px;text-align:center}.td-page{min-height:100vh;background-color:#0a0e27;color:#e0e0e0;font-family:Segoe UI,sans-serif;padding:40px 24px}.td-header{max-width:1100px;margin:0 auto 32px}.td-title-group{display:flex;align-items:center;gap:12px;margin-bottom:6px}.td-title{font-size:24px;font-weight:700;color:#00d9ff;margin:0;letter-spacing:.5px}.td-content{max-width:1100px;margin:0 auto}.td-error{display:flex;align-items:center;justify-content:space-between;gap:16px;background-color:#4d1a1a;border:1px solid #f44336;border-radius:8px;color:#f44336;font-size:14px;padding:12px 16px;margin-bottom:16px}.td-retry{background-color:transparent;border:1px solid #f44336;border-radius:6px;color:#f44336;font-size:13px;padding:4px 14px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease,color .2s ease;flex-shrink:0}.td-retry:hover{background-color:#f44336;color:#fff}.td-loading{display:flex;align-items:center;gap:12px;color:#8b9dc3;font-size:14px;padding:40px 0;justify-content:center}@keyframes spin{to{transform:rotate(360deg)}}.td-spinner{display:inline-block;width:18px;height:18px;border:2px solid #2a3f5f;border-top-color:#00d9ff;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
