body { background-color: #0d1117; color: #c9d1d9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; margin: 0; padding: 20px; }
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid #30363d; padding-bottom: 10px; }
        h1 { margin: 0; font-size: 22px; font-weight: 600; color: #58a6ff; }
        
        .fleet-control { background-color: #161b22; padding: 15px; border-radius: 8px; border: 1px solid #30363d; margin-bottom: 15px; }
        .device-selector-row { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }
        select { flex: 1; padding: 10px; font-size: 16px; background-color: #0d1117; color: white; border: 1px solid #30363d; border-radius: 6px; outline: none; }
        
        .controls { display: flex; gap: 10px; width: 100%; justify-content: space-between; margin-bottom: 15px; }
        .controls-group { display: flex; gap: 10px; flex: 2; }
        
        button { padding: 12px; font-size: 14px; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; transition: 0.2s; color: white; background-color: #21262d; border: 1px solid #30363d; }
        button:disabled { cursor: not-allowed; opacity: 0.3; }
        .btn-idle:not(:disabled):hover, .class-0 { background-color: #238636 !important; border-color: #2ea043 !important; }
        .btn-rattle:not(:disabled):hover, .class-1 { background-color: #d29922 !important; color: black !important; border-color: #e3b341 !important; }
        .btn-lift:not(:disabled):hover, .class-2 { background-color: #da3633 !important; border-color: #f85149 !important; }
        .btn-stop { background-color: #8b949e !important; color: black !important; display: none; flex: 1; }
        .btn-stop.active { display: block; }
        
        .chart-container { height: 25vh; width: 100%; margin-bottom: 15px; background-color: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 10px; box-sizing: border-box; }
        
        table { width: 100%; text-align: left; border-collapse: collapse; font-size: 14px; }
        th { padding: 10px; border-bottom: 1px solid #30363d; color: #8b949e; font-weight: 600; }
        td { padding: 10px; border-bottom: 1px solid #21262d; }
        .link-btn { color: #58a6ff; cursor: pointer; text-decoration: none; font-weight: bold; margin-right: 15px; border: none; background: none; font-size: 14px; }
        .link-btn:hover { text-decoration: underline; }
        .delete-btn { color: #f85149; cursor: pointer; text-decoration: none; font-weight: bold; border: none; background: none; font-size: 14px; }
        .delete-btn:hover { text-decoration: underline; }
        
        input[type="checkbox"] { accent-color: #58a6ff; width: 16px; height: 16px; cursor: pointer; }

        #scrubber-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0d1117; z-index: 1000; padding: 20px; box-sizing: border-box; overflow-y: auto; }
        #annotation-modal { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #161b22; border: 1px solid #58a6ff; padding: 15px; border-radius: 8px; z-index: 1001; width: 150px; box-shadow: 0 0 20px rgba(0,0,0,0.8); }
        .class-btn { display: block; width: 100%; margin-bottom: 5px; padding: 10px; cursor: pointer; font-weight: bold; border-radius: 4px; border: none; }