chore(starting from new):

styles/bar.css

@@ -1,214 +0,0 @@
-#bar {
-  padding: 0px 5px 0px 5px;
-  margin: 1px;
-  transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
-  background-color: var(--surface);
-  /* Bar background */
-}
-
-#start-container,
-#center-container,
-#end-container {
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
-#bar-corner * {
-  background-color: var(--surface);
-}
-
-/**
- * ── Workspace ─────────────────────────────────────────────────────────
- */
-#workspaces {
-  font-style: normal;
-  background-color: var(--surface-container);
-  padding: 4px;
-  margin-top: 1px;
-  margin-bottom: 1px;
-  border-radius: 8px;
-}
-
-/**
- * ── Update ────────────────────────────────────────────────────────────
- */
-#update {
-  background-color: var(--surface-container);
-  margin-top: 1px;
-  margin-bottom: 1px;
-  border-radius: 8px;
-  padding: 1px;
-  min-width: 24px;
-  min-height: 24px;
-  transition: background-color 0.1s ease;
-}
-
-#update:hover {
-  background-color: var(--surface-bright);
-}
-
-#update:active {
-  color: var(--shadow);
-  background-color: var(--primary);
-}
-
-#update-icon {
-  color: var(--primary);
-  font-size: 20px;
-  padding: 1px;
-  border-radius: 11px;
-  transition: all 0.1s ease;
-}
-
-#updated-icon {
-  color: var(--primary);
-  font-size: 20px;
-  padding: 4px;
-  border-radius: 8px;
-  transition: all 0.1s ease;
-}
-
-#update-label {
-  color: var(--primary);
-  font-size: 10px;
-  font-weight: bold;
-  padding: 0px;
-  margin-right: 4px;
-  border-radius: 8px;
-  transition: all 0.1s ease;
-}
-
-/**
- * ── Clock ─────────────────────────────────────────────────────────────
- */
-#datetime {
-  background-color: var(--surface-container);
-  margin-top: 1px;
-  margin-bottom: 1px;
-  padding: 4px;
-  border-radius: 8px;
-}
-
-#datetime:hover {
-  background-color: var(--surface-bright);
-}
-
-/**
- * ── Tray ──────────────────────────────────────────────────────────────
- */
-#tray {
-  background-color: var(--surface-container);
-  margin-top: 1px;
-  margin-bottom: 1px;
-  padding: 4px;
-  border-radius: 8px;
-}
-
-#tray > button {
-  margin: 0px;
-  padding: 0px;
-}
-
-menu {
-  border: solid 1px var(--outline-variant);
-  border-radius: 16px;
-  background-color: var(--surface);
-  padding: 6px;
-}
-
-menu > menuitem {
-  border-radius: 10px;
-  padding: 6px 10px;
-}
-
-menu > menuitem:hover {
-  background-color: var(--surface-bright);
-}
-
-menu > menuitem:hover > label {
-  color: var(--on-surface);
-}
-
-/**
- * ── Logo ──────────────────────────────────────────────────────────────
- */
-#button-bar {
-  background-color: var(--surface-container);
-  margin-top: 1px;
-  padding: 4px;
-  border-radius: 8px;
-  margin-bottom: 1px;
-  transition: all 0.1s ease;
-}
-
-#button-bar-label {
-  color: var(--primary);
-  font-size: 24px;
-  border-radius: 8px;
-  transition: all 0.1s ease;
-}
-
-#button-bar:hover #button-bar-label {
-  background-color: var(--surface_bright);
-}
-
-#button-bar:active #button-bar-label {
-  color: var(--shadow);
-  background-color: var(--primary);
-}
-
-/**
- * ── System Indicator ─────────────────────────────────────────────────
- */
-#system-indicator {
-  background-color: var(--surface-container);
-  margin-top: 1px;
-  padding: 4px;
-  margin-bottom: 1px;
-  border-radius: 8px;
-}
-
-#system-indicator-icon {
-  font-size: 20px;
-}
-
-#system-notif-label {
-  font-size: 18px;
-}
-
-/**
- * ── Metric ────────────────────────────────────────────────────────────
- */
-#metrics {
-  background-color: var(--surface-container);
-  border-radius: 8px;
-}
-
-#metrics-circle {
-  color: var(--surface-bright);
-  border: 3px solid var(--primary);
-}
-
-#metrics-circle.bat {
-  border: 3px solid var(--green);
-}
-
-#metrics-circle.alert {
-  border: 3px solid var(--red-dim);
-}
-
-#metrics-icon {
-  font-size: 15px;
-}
-
-#metrics-icon.alert {
-  color: var(--red-dim);
-}
-
-#metrics-level {
-  font-weight: bold;
-}
-
-#metrics-sep {
-  min-width: 6px;
-}