moving a LOT of stuff around in web ui

webui/src/components/BatteryBar/index.jsx

@@ -2,6 +2,7 @@
 // Purpose: Defines the Battery Bar module and the local helpers/components used in this file.
 // Scope: Keeps behavior unchanged while isolating this concern into a clear, single-responsibility unit.
 import React from 'react';
+import './styles.css';
 import { WARN_DISPLAY_PERCENT } from '../../lib/battery.js';
 
 const WARN_FLASH_MS = 1600;

webui/src/components/BatteryBar/styles.css

@@ -0,0 +1,4 @@
+  @keyframes batteryTickWarn { 0%, 49% { background-color: rgba(255,255,255,.95); } 50%, 100% { background-color: rgba(239,68,68,.95); } }
+  .battery-tick-warn { animation: batteryTickWarn .4s steps(2,end) infinite; }
+  @keyframes batteryUrgentFlash { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
+  .battery-urgent-flash { animation: batteryUrgentFlash .4s steps(2,end) infinite; }