feat(styles): restructure UI styles and add main composition

New Features
- Added styles/main.css aggregating imports and global defaults
- Renamed battery.css → battery-widget.css for widget-specific styling

Enhancements
- Added smooth transitions and hover effects in panel.css
- Improved OSD styling with rounded corners, translucent background, and better spacing
- Updated button margins, paddings, and border‑radius for consistency

Bug Fixes
- Fixed missing border‑radius and spacing in panel buttons
- Corrected workspace button active/urgent styling

styles/main.css

@@ -0,0 +1,34 @@
+@import url("./colors.css");
+@import url("./panel.css");
+@import url("./dock.css");
+@import url("./switcher.css");
+@import url("./launcher.css");
+@import url("./osd.css");
+@import url("./controlcenter.css");
+@import url("./notification.css");
+@import url("./dropdown.css");
+@import url("./about.css");
+@import url("./notification-center.css");
+@import url("./player.css");
+@import url("./widgets.css");
+@import url("./tray.css");
+@import url("./battery-widget.css");
+@import url("./lock.css");
+@import url("./todo.css");
+
+* {
+    all: unset;
+    color: var(--foreground);
+    font-size: unset;
+    font-family: "SF Pro Rounded";
+}
+
+#corner {
+    background-color: var(--shadow);
+    border-radius: 0;
+}
+
+#corner-container {
+    min-width: 20px;
+    min-height: 20px;
+}

styles/osd.css

@@ -0,0 +1,38 @@
+#osd {
+    background-color: alpha(#fff, 0.09);
+    padding: 12px 20px;
+    margin: 70px;
+    min-height: 200px;
+    border-radius: 16px;
+}
+
+#osd scale {
+    min-width: 180px;
+}
+
+#osd trough {
+    background: var(--surface);
+    min-height: 15px;
+    margin-right: 4px;
+    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    border-radius: 16px;
+}
+
+#osd trough highlight {
+    border-radius: 100px;
+    background: var(--primary);
+    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+#osd.muted trough highlight,
+#osd.muted slider,
+#osd scale.muted trough highlight,
+#osd scale.muted slider {
+    background-color: var(--surface-bright);
+}
+
+#brighntess-icons.muted,
+#vol-icon.muted,
+#mic-icon.muted {
+    color: var(--outline);
+}

styles/panel.css

@@ -1,12 +1,13 @@
 #panel {
-  background-color: @bg;
-  margin: -4px 0;
+    background-color: @bg;
+    margin: -4px 0;
+    transition: all 120ms ease-in-out;
 }
 
 #modules-left,
 #modules-right {
-  margin: 0 5px;
-  padding: 2px 0;
+    margin: 0 5px;
+    padding: 2px 0;
 }
 
 #panel-button:hover,
@@ -15,8 +16,8 @@
 #bt-button:hover,
 #tray-button:hover,
 #global-menu:hover,
-#workspaces > button:hover {
-  background-color: @hover;
+#workspaces>button:hover {
+    background-color: @hover;
 }
 
 #panel-button,
@@ -24,41 +25,43 @@
 #network-button,
 #bt-button,
 #tray-button {
-  margin: 5px 0;
-  padding: 0 2px;
-  border-radius: 8px;
+    margin: 5px 0;
+    padding: 0 2px;
+    border-radius: 8px;
 }
 
 #menubar label,
 #battery-label,
 #date-time {
-  font-weight: 500;
+    font-weight: 500;
 }
+
 #global-menu {
-  margin: 5px 2px;
-  padding: 0 5px;
-  border-radius: 5px;
+    margin: 5px 2px;
+    padding: 0 5px;
+    border-radius: 5px;
 }
+
 #date-time {
-  margin: 0 4px;
+    margin: 0 4px;
 }
 
-#workspaces > button {
-  margin: 6px 0;
-  padding: 0 16px;
-  border-radius: 8px;
-  min-width: 12px;
-  border: 1px solid @border;
+#workspaces>button {
+    margin: 6px 0;
+    padding: 0 16px;
+    border-radius: 8px;
+    min-width: 12px;
+    border: 1px solid @border;
 }
 
-#workspaces > button.active {
-  background-color: @active;
+#workspaces>button.active {
+    background-color: @active;
 }
 
-#workspaces > button.active label {
-  color: var(--shadow);
+#workspaces>button.active label {
+    color: var(--shadow);
 }
 
-#workspaces > button.urgent {
-  background-color: @urgent;
+#workspaces>button.urgent {
+    background-color: @urgent;
 }