diff --git a/yasb/styles.css b/yasb/styles.css
index b161401..0ca2a47 100644
--- a/yasb/styles.css
+++ b/yasb/styles.css
@@ -1,1094 +1,472 @@
+/*GENERAL CONFIGRATIONS*/
 :root {
-    --bar-dark-bg: rgba(36, 36, 36, 0.6);
-    --bar-light-bg: rgba(255, 255, 255, 0.75);
-    --bar-dark-border: #303030;
-    --bar-light-border: #e7e7e7;
-    --dark-menu-bg: rgba(36, 36, 36, 0.6);
-    --light-menu-bg: rgba(255, 255, 255, 0.75);
-    --dark-color: rgb(65, 65, 65);
-    --dark-dim-color: rgb(117, 117, 117);
-    --light-color: rgba(255, 255, 255, 0.9);
-    --light-dim-color: rgba(255, 255, 255, 0.6);
-    --dark-icon-color: rgb(36, 36, 36);
-    --light-icon-color: rgba(255, 255, 255, 0.9);
+  --bg-light: #e5e7eb;
+  --bg-light-hover: #d1d5db;
+  --bg-light-transparent: #e5e7eb71;
+  --text-dark: #18181b;
+  --text-gray: #59595f;
+  --text-gray-light: #4e525c;
+  --text-white: #ffffff;
+  --accent-blue: #0176a3;
+  --accent-blue-dark: #0078d4;
+  --accent-orange: #ff583b;
+  --accent-green: #199143;
+  --source-bg-default: #bac2de;
+  --slider-groove: #d9dbdf;
+  --slider-groove-hover: #a3a3a3;
+  --separator-color: #b8b7b7;
+  --notification-badge-bg: #18181b;
+  --notification-badge-text: #f9f9f9;
 }
-* {
-    font-size: 12px;
-    font-weight: 400;
-    font-family: "Segoe UI", "Segoe Fluent Icons"
-}
-.dark.yasb-bar {
-    background-color: var(--bar-dark-bg);
-    border-bottom: 1px solid var(--bar-dark-border);
-    padding: 0 12px;
-}
-.yasb-bar {
-    background-color: var(--bar-light-bg);
-    border-bottom: 1px solid var(--bar-light-border);
-    padding: 0 12px;
-}
-.tooltip {
-    background-color: rgba(36, 36, 36, 0.95);
-    border-radius: 4px;
-    color: rgba(255, 255, 255, 0.9);
-    padding: 5px 10px;
-    font-size: 12px;
-    font-family: 'Segoe UI';
-    font-weight: 600;
-    margin-top: 4px;
-}
-.context-menu,
-.context-menu .menu-checkbox {
-    background-color: rgba(26, 26, 26, 0.6);
-    padding: 4px 0px;
-    font-family: 'Segoe UI';
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.9);
-}
-.context-menu {
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.075);
-}
-.context-menu::right-arrow {
-    width: 8px;
-    height: 8px;
-    padding-right: 24px;
-}
-.context-menu::item,
-.context-menu .menu-checkbox {
-    background-color: transparent;
-    padding: 6px 12px;
-    margin: 2px 6px;
-    border-radius: 6px;
-    min-width: 100px;
-}
-.context-menu::item:selected,
-.context-menu .menu-checkbox:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-    color: #FFFFFF;
-}
-.context-menu::separator {
-    height: 1px;
-    background-color: #404040;
-    margin: 4px 8px;
-}
-.context-menu::item:disabled {
-    color: #666666;
-    background-color: transparent;
-}
-.context-menu .menu-checkbox .checkbox {
-    border: none;
-    padding: 8px 16px;
-    font-size: 12px;
-    margin: 0;
-    color: rgba(255, 255, 255, 0.9);
-    font-family: 'Segoe UI'
-}
-.context-menu .submenu::item:disabled {
-    margin: 0;
-    padding-left: 16px;
-}
-.context-menu .menu-checkbox .checkbox:unchecked {
-    color: rgba(255, 255, 255, 0.9);
-}
-.context-menu .menu-checkbox .checkbox::indicator {
-    width: 12px;
-    height: 12px;
-    margin-left: 0px;
-    margin-right: 8px;
-}
-.context-menu .menu-checkbox .checkbox::indicator:unchecked {
-    background: #444444;
-    border-radius: 2px;
-}
-.context-menu .menu-checkbox .checkbox::indicator:checked {
-    background: #4a90e2;
-    border-radius: 2px;
-}
-.context-menu .menu-checkbox .checkbox:focus {
-    outline: none;
-}
-.widget {
-    padding: 2px 8px 0 8px;
-    margin: 4px 0;
-    border-radius: 4px;
-}
-
 .widget .icon {
-    font-size: 16px;
-    font-weight: 400;
-    color: var(--dark-icon-color);
+  font-size: 16px;
 }
-.yasb-bar.dark .widget .icon {
-    font-size: 16px;
-    font-weight: 400;
-    color: var(--light-icon-color);
+/*KOMOREBI LAYOUT*/
+.komorebi-active-layout .label {
+  background-color: var(--bg-light);
+  color: var(--text-dark);
+  font-family: "Material Symbols Rounded";
+  font-size: 18.6667px;
+  font-weight: 450;
+  padding-right: 12px;
+  padding-left: 10px;
+  border-radius: 12px;
+  margin-left: 8px;
+  width: 20px;
 }
-.widget .label {
-    padding: 0px 0px 4px 4px;
-    color: var(--dark-color)
+.komorebi-layout-menu {
+  background-color: var(--bg-light);
+  color: var(--text-gray);
+  border-radius: 12px;
+  margin-left: 8px;
+  margin-top: 4px;
+}
+.komorebi-layout-menu:hover {
+  background-color: var(--bg-light-hover);
+  color: var(--text-dark);
+}
+.komorebi-layout-menu .menu-item {
+  padding: 8px 16px;
+  margin-top: 4px;
+  margin-left: 8px;
+  font-size: 16px;
+  color: var(--text-gray);
+}
+.komorebi-layout-menu .menu-item-icon {
+  font-family: "Material Symbols Rounded";
+  color: var(--text-gray);
+  font-size: 18px;
+}
+.komorebi-layout-menu .menu-item-icon:hover {
+  color: var(--accent-blue);
+}
+.komorebi-layout-menu .menu-item-text {
+  font-family: "Segoe UI Semibold";
+  padding-left: 4px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.komorebi-layout-menu .menu-item-text:hover {
+  color: var(--accent-blue);
+}
+.komorebi-layout-menu .separator {
+  max-height: 1px;
+  background-color: var(--separator-color);
+}
+/*KOMOREBI-WORKSPACES*/
+.komorebi-workspaces {
+  font-family: "Material Symbols Rounded";
+  background-color: transparent;
+  margin: 0 24px -2px 8px;
+  padding: 0 0 0 0;
+  border-radius: 6px;
+}
+.komorebi-workspaces .offline-status {
+  color: var(--bg-light-transparent);
+  font-size: 14px;
+  padding: 0 4px;
+  font-weight: bold;
+}
+.komorebi-workspaces .ws-btn {
+  font-family: "Material Symbols Rounded";
+  qproperty-text: "";
+  border: none;
+  width:0;
+  height:0;
+  font-size:22.6667px;
+}
+.komorebi-workspaces .ws-btn.populated {
+  width:0;
+  height:0;
+}
+.komorebi-workspaces .ws-btn.active {
+  font-weight:400;
+  background-color: var(--bg-light);
+  color: var(--text-dark);
+  margin: 0 4px 2px 2px;
+  border-radius: 12px;
+  padding: 6px 6px 6px 5px;
+  height: 24px;
+  width: 31px;
+}
+.komorebi-workspaces .ws-btn.button-1 {
+    font-family: "Material Symbols Rounded";
+    qproperty-text: "";
+}
+.komorebi-workspaces .ws-btn.button-2 {
+    font-family: "Material Symbols Rounded";
+    qproperty-text: "";
+}
+.komorebi-workspaces .ws-btn.button-3 {
+    font-family: "Material Symbols Rounded";
+    qproperty-text: "";
+}
+.komorebi-workspaces .ws-btn.button-4 {
+    font-family: "Material Symbols Rounded";
+    qproperty-text: "";
+}
+.komorebi-workspaces .ws-btn.button-5 {
+    font-family: "Material Symbols Rounded";
+    qproperty-text: "";
+}
+.komorebi-workspaces .ws-btn.button-6 {
+    font-family: "Material Symbols Rounded";
+    qproperty-text: "";
+}
+/*ACTIVE WINDOW*/
+.active-window-widget {
+  background-color: var(--bg-light);
+  padding-right: 20px;
+  padding-left: 20px;
+  border-radius: 12px;
+}
+.active-window-widget .label {
+  color: #000000;
+  font-family: "Segoe UI Semibold";
+  font-size: 16px;
+  font-weight: bold;
+}
+.active-window-widget .icon{
+  padding-right:10px;
+}
+/*AUDIO WIDGET*/
+.volume-widget {
+  margin-right: 8px;
+  padding-right: 15px;
+  padding-left: 12px;
+  background-color: var(--bg-light);
+  color:var(--text-dark);
+  border-radius: 12px;
+}
+.volume-widget .icon {
+  min-width:20px;
+  font-family: "Segoe Fluent Icons";
+  color: var(--text-dark);
+  font-size: 20px;
+  padding: 3px 0 0 0;
+  font-weight: bold;
+}
+.volume-widget .label {
+  font-family: "Segoe UI Semibold";
+  font-size: 16px;
+  font-weight: bold;
+  padding-left: 5px;
+  color: var(--text-dark);
+}
+/*AUDIO DROPDOWN*/
+.audio-menu {
+  background-color:var(--bg-light);
+  color: var(--text-dark);
+  border-radius:12px;
+}
+.audio-container .device {
+  font-family: "Segoe UI Semibold";
+  font-weight: bold;
+  background-color:var(--bg-light);
+  color: var(--text-dark);
+  border: none;
+  padding: 10px 8px 6px 4px;
+  margin: 2px 0;
+  font-size: 16px;
+  border-radius: 12px;
+}
+.audio-container .device.selected {
+  background-color: var(--bg-light);
+  color: var(--text-dark);
+}
+/*CLOCK / CALENDAR WIDGET*/
+.clock-widget {
+  background-color: var(--bg-light);
+  color: var(--text-dark);
+  padding-left: 18px;
+  padding-right: 18px;
+  margin-right: 2px;
+  margin-left: 2px;
+  border-radius: 12px;
+}
+.clock-widget .label {
+  background-color: var(--bg-light);
+  color: var(--text-dark);
+  font-family: "Segoe UI Semibold";
+  font-size: 16px;
+  font-weight: bold;
+}
+.calendar {
+  background-color: var(--bg-light);
+  color: var(--text-dark);
+}
+.calendar .calendar-table,.calendar .calendar-table .item {
+  background-color: var(--bg-light);
+  color: var(--text-dark);
+  font-family: "Segoe UI Semibold";
+  font-weight: bold;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  font-size: 16px;
+}
+.calendar .calendar-table .item.selected {
+  color: var(--bg-light);
+  background-color: var(--text-dark);
+  border-radius: 6px;
+}
+.calendar .day-label {
+  margin-top: 20px;
+}
+.calendar .day-label,.calendar .month-label,.calendar .date-label {
+  font-family: "Segoe UI Semibold";
+  font-size: 18px;
+  color: var(--text-dark);
+  font-weight: bold;
+  min-width: 160px;
+  max-width: 160px;
+}
+.calendar .month-label {
+  font-size: 16px;
+}
+.calendar .date-label {
+  font-size: 88px;
+  font-weight: 900;
+  margin-top: -20px;
+}
+/*MEDIA WIDGET*/
+.media-widget {
+  background-color: var(--bg-light);
+  border-radius: 12px;
+  padding-left: 12px;
+  padding-right: 10 px;
+  margin-right: 10px;
+  min-width: 400px;
+}
+.media-widget .label {
+  color: var(--text-dark);
+  background-color: var(--bg-light);
+  padding: 0 0 0 8px;
+  font-family: "Segoe UI Semibold";
+  font-size: 16px;
+  font-weight: bold;
+  min-width: 300px;
+}
+.media-widget .btn {
+  font-family: "Material Symbols Rounded";
+  color: var(--text-dark);
+  font-weight: 600;
+  font-size: 19px;
+  padding: 0 10px;
+}
+.media-widget .btn:hover,.media-widget .btn.play:hover {
+  color: var(--accent-blue);
+}
+.media-widget .btn.play {
+  background-color: var(--bg-light);
+  border-radius: 6px;
+  padding:0 4px;
+}
+.media-widget .btn.prev {
+  padding-right:1px;
+}
+.media-widget .btn.next {
+  padding-left: 2px;
+}
+.media-widget .btn.disabled:hover,.media-widget .btn.disabled {
+  font-family: "Segoe Variable Display";
+  color: var(--text-dark);
+  font-size: 19px;
+  background-color: var(--bg-light);
+}
+/*MEDIA POPUP*/
+.media-menu {
+  background-color: var(--bg-light);
+  border-radius: 12px;
+  min-height: 200px;
+  min-width: 500px;
+}
+.media-menu .title{
+  margin-left:20px;
+  margin-right:20px;
+}
+.media-menu .artist {
+  margin-left:21px;
+  margin-right:20px;
+}
+.media-menu .title,
+.media-menu .source {
+  font-weight: bold;
+  font-family: "Segoe UI Bold";
+  padding-bottom:10px;
+  color: var(--text-dark);
+}
+.media-menu .title {
+  font-size: 22px;
+  padding-top:18px;
+  letter-spacing:1px;
+}
+.media-menu .artist {
+  font-family: "Segoe UI Semibold";
+  font-size: 18px;
+  color: var(--text-dark);
+  padding-bottom: 10px;
+  padding-top:5px;
+}
+.media-menu .source {
+  color:transparent;
+}
+.media-menu .btn {
+  font-family: "Material Symbols Rounded";
+  min-width: 18px;
+  color: var(--text-dark);
+}
+.media-menu .btn.prev {
+  padding-left:18px;
+  font-size: 38px;
+  font-weight:300;
+}
+.media-menu .btn.play {
+  font-size: 48px;
+  font-weight: 300;
+}
+.media-menu .btn.pause {
+  font-size: 48px;
+  font-weight: 300;
+}
+.media-menu .btn.next {
+  font-size: 38px;
+  font-weight: 300;
+}
+.media-menu .btn:hover {
+  color: var(--text-dark);
+  background-color: transparent;
+}
+.media-menu .btn.disabled:hover,
+.media-menu .btn.disabled {
+  color: var(--text-gray-light);
+  background-color: rgba(0,0,0,0);
+}
+.media-menu .playback-time {
+  font-size: 16px;
+  font-family: "Segoe UI Semibold";
+  font-weight: bold;
+  color: var(--text-dark);
+  min-width: 100px;
+  margin-top:4px;
+  margin-bottom:10px;
+  border-radius:4px;
+}
+.media-menu .progress-slider {
+  height: 8px;
+  border-radius: 4px;
+  padding-bottom:16px;
+}
+.media-menu .progress-slider::groove {
+  background: var(--slider-groove);
+  height: 8px;
+  border-radius: 4px;
+}
+.media-menu .progress-slider::groove:hover {
+  height: 8px;
+  background: var(--slider-groove-hover);
+  border-radius: 4px;
+}
+.media-menu .progress-slider::sub-page {
+  background: var(--accent-blue-dark);
+  border-radius: 4px;
+  height: 8px;
+}
+/*NOTIFICATIONS*/
+.notification-widget {
+  background-color: var(--bg-light);
+  margin:0 10px 0 0;
+  border-radius: 12px;
+}
+.notification-widget .icon {
+  font-family: "Material Symbols Rounded";
+  qproperty-text: "";
+  padding: 2px 8px 0 0;
+  color: var(--text-dark);
+  font-size:21.667px;
+  font-weight:350;
+}
+.notification-widget .icon.new-notification {
+  font-size:21.667px;
+  qproperty-text: "";
+  color: var(--text-dark);
+}
+.notification-widget .label.new-notification {
+  width:0;
+  height:0;
+}
+.notification-widget .label {
+  color: transparent;
+  background:transparent;
+  max-width:0;
+  padding:0;
+  margin:0;
+}
+.notification-widget.notify {
+  font-family: "Material Symbols Rounded";
+}
+.apps-widget {
+  background-color: var(--bg-light);
+  color: var(--text-dark);
+  border-radius: 12px;
+  padding: 0 5px 0 12px;
+  margin:0 10px;
+}
+.apps-widget .widget-container {
+  padding:0 8px;
+}
+.apps-widget .widget-container .label { 
+  font-family: "Material Symbols Rounded"; 
+  font-size:18px;
+  max-width:32px;
+  min-width:26px;
 }
 
-.yasb-bar.dark .widget .label {
-    color: var(--light-color);
-}
-.widget:hover {
-    background-color: rgba(0, 0, 0, 0.08);
-}
-.dark .widget:hover {
-    background-color: rgba(255, 255, 255, 0.08);
-}
+/* Stack Widget*/
 
-/* Quick Launch Popup - main window */
-.quick-launch-popup .container {
-    background-color: var(--light-menu-bg);
-}
-.dark .quick-launch-popup .container {
-    background-color: var(--dark-menu-bg);
-}
-/* Search bar container */
-.quick-launch-popup .search {
-    padding: 12px 16px;
-    background-color: transparent;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-.dark .quick-launch-popup .search {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-}
-/* Search loader line color */
-.quick-launch-popup .search .loader-line {
-    color: #449bff;
-}
-.quick-launch-popup .search .search-icon {
-    font-family: "Segoe Fluent Icons";
-    font-size: 18px;
-    color: var(--dark-color);
-    padding-right: 8px;
-    min-width: 18px;
-}
-.dark .quick-launch-popup .search .search-icon {
-    color: var(--light-color);
-}
-.quick-launch-popup .search .search-submit-icon {
-    font-family: "Segoe Fluent Icons";
-    font-size: 18px;
-    color: var(--dark-color);
-    min-width: 18px;
-}
-.dark .quick-launch-popup .search .search-submit-icon {
-    color: var(--light-color);
-}
-.quick-launch-popup .search .search-input {
-    background: transparent;
-    border: none;
-    color: var(--dark-color);
-    font-size: 16px;
-    font-family: "Segoe UI";
-    font-weight: 400;
-    padding: 4px 0;
-}
-.dark .quick-launch-popup .search .search-input {
-    color: var(--light-color);
-}
-/* Search prefix styling (e.g., ">" for commands) */
-.quick-launch-popup .search .prefix {
-    background: #2167d8;
-    border-radius: 6px;
-    color: #ffffff;
-    padding: -2px 8px 0px 8px;
-    margin-top: 2px;
-    margin-right: 4px;
-    font-size: 13px;
-    font-weight: 600;
-    font-family: "Segoe UI";
-    max-height: 28px;
-}
-
-/* Results list */
-.quick-launch-popup .results {
-    background: transparent;
-    padding: 8px;
-}
-/* Individual result item here you can set font szie for title */
-.quick-launch-popup .results-list-view {
-    font-size: 14px;
-    font-family: "Segoe UI";
-    font-weight: 600;
-    color: var(--dark-color)
-}
-.dark .quick-launch-popup .results-list-view {
-    color: var(--light-color);
-}
-.quick-launch-popup .results-list-view .description {
-    color: var(--dark-dim-color);
-    font-size: 11px;
-    font-family: "Segoe UI";
-    font-weight: 600;
-}
-.dark .quick-launch-popup .results-list-view .description {
-    color: var(--light-dim-color);
-}
-.quick-launch-popup .results-list-view .separator {
-    color: var(--dark-dim-color);
-    font-size: 13px;
-    font-family: 'Segoe UI';
-    font-weight: 600;
-    padding: 4px 0 4px 12px;
-}
-/* Result item hover and selected states */
-.quick-launch-popup .results-list-view::item {
-    padding: 4px 12px;
-    border-radius: 8px;
-}
-.quick-launch-popup .results-list-view::item:hover,
-.quick-launch-popup .results-list-view::item:selected {
-    background-color: rgba(128, 130, 158, 0.1);
-}
-/* Empty state when no results found */
-.quick-launch-popup .results-empty-text {
-    font-size: 24px;
-    font-family: "Segoe UI";
-    color: rgb(255, 255, 255);
-    padding-top: 8px;
-}
-
-/* Preview Pane */
-.quick-launch-popup .preview {
-    background: rgba(0, 0, 0, 0);
-    border-left: 1px solid rgba(255, 255, 255, 0.06);
-}
-.quick-launch-popup .preview .preview-text {
-    font-size: 13px;
-    color: rgba(255, 255, 255, 0.85);
-    padding: 8px 12px;
-    font-family: "Segoe UI";
-    background-color: rgba(255, 255, 255, 0.03);
-    border: none;
-}
-.quick-launch-popup .preview .preview-image {
-    background-color: rgba(255, 255, 255, 0.03);
-    padding: 8px 12px;
-}
-.quick-launch-popup .preview .preview-meta {
-    padding: 6px 12px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    font-family: "Segoe UI";
-}
-.quick-launch-popup .preview .preview-meta .preview-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: rgb(255, 255, 255);
-    font-family: "Segoe UI";
-    margin-bottom: 10px;
-    margin-left: -2px;
-}
-
-.quick-launch-popup .preview .preview-meta .preview-subtitle {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.8);
-    font-family: "Segoe UI";
-    padding-bottom: 1px;
-}
-
-/* Preview inline edit form (.preview.edit) */
-.quick-launch-popup .preview.edit .preview-title {
-    font-size: 13px;
-    font-family: "Segoe UI";
-    font-weight: 600;
-    color: #ffffff;
-    padding: 8px 12px 4px 12px;
-}
-.quick-launch-popup .preview.edit .preview-line-edit {
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 4px;
-    color: #ffffff;
-    font-size: 13px;
-    font-family: "Segoe UI";
-    padding: 6px 8px;
-    margin: 0 12px;
-}
-.quick-launch-popup .preview.edit .preview-line-edit:focus {
-    border-color: rgba(255, 255, 255, 0.3);
-}
-.quick-launch-popup .preview.edit .preview-text-edit {
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 4px;
-    color: #ffffff;
-    font-size: 13px;
-    font-family: "Segoe UI";
-    padding: 6px 8px;
-    margin: 0 12px;
-}
-.quick-launch-popup .preview.edit .preview-text-edit:focus {
-    border-color: rgba(255, 255, 255, 0.3);
-}
-.quick-launch-popup .preview.edit .preview-actions {
-    padding: 8px 12px;
-}
-.quick-launch-popup .preview.edit .preview-btn {
-    background: rgb(45, 46, 48);
-    border: none;
-    border-radius: 4px;
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 12px;
-    font-family: "Segoe UI";
-    font-weight: 600;
-    padding: 4px 16px;
-}
-.quick-launch-popup .preview.edit .preview-btn:hover {
-    background: rgb(59, 60, 63);
-}
-.quick-launch-popup .preview.edit .preview-btn.save {
-    background: rgb(12, 81, 190);
-    color: #ffffff;
-}
-.quick-launch-popup .preview.edit .preview-btn.save:hover {
-    background: rgb(19, 90, 204);
-}
-
-.cpu-popup,
-.memory-popup {
-    background-color: var(--light-menu-bg);
-    min-width: 400px;
-    max-width: 400px;
-}
-.dark .cpu-popup,
-.dark .memory-popup {
-    background-color: var(--dark-menu-bg);
-    min-width: 400px;
-    max-width: 400px;
-}
-
-.cpu-popup .header,
-.memory-popup .header {
-    background: transparent;
-    padding: 12px 16px;
-}
-.cpu-popup .header .text,
-.memory-popup .header .text {
-    font-size: 16px;
-    font-family: "Segoe UI";
-
-}
-.cpu-popup .header .pin-btn,
-.memory-popup .header .pin-btn {
-    font-size: 14px;
-    background: transparent;
-    font-family: "Segoe Fluent Icons";
-    border: none;
-    padding: 6px;
-    color: var(--dark-dim-color)
-}
-.dark .cpu-popup .header .pin-btn,
-.dark .memory-popup .header .pin-btn {
-    color: var(--light-dim-color);
-}
-.cpu-popup .header .pin-btn:hover,
-.memory-popup .header .pin-btn:hover {
-    color: var(--dark-dim-color)
-}
-.dark .cpu-popup .header .pin-btn:hover,
-.dark .memory-popup .header .pin-btn:hover {
-    color: var(--light-dim-color);
-}
-.cpu-popup .header .pin-btn.pinned,
-.memory-popup .header .pin-btn.pinned {
-    color: var(--dark-color)
-}
-.dark .cpu-popup .header .pin-btn.pinned,
-.dark .memory-popup .header .pin-btn.pinned {
-    color: var(--light-color);
-}
-/* Graph area */
-.cpu-popup .graph-container,
-.memory-popup .graph-container {
-    background: transparent;
-    min-height: 64px;
-}
-.cpu-popup .cpu-graph,
-.memory-popup .memory-graph {
-    color: #0f6bff;
-    /* <-- set the graph line/fill color */
-}
-.cpu-popup .cpu-graph-grid,
-.memory-popup .memory-graph-grid {
-    color: rgba(0, 0, 0, 0.05);
-    /* set the grid line color */
-}
-.dark .cpu-popup .cpu-graph-grid,
-.dark .memory-popup .memory-graph-grid {
-    color: rgba(255, 255, 255, 0.05);
-    /* set the grid line color */
-}
-.cpu-popup .graph-title,
-.memory-popup .graph-title {
-    font-size: 12px;
-    color: var(--dark-dim-color);
-    font-family: 'Segoe UI';
-    padding: 0px 0px 4px 14px;
-}
-.dark .cpu-popup .graph-title,
-.dark .memory-popup .graph-title {
-    color: var(--light-dim-color);
-}
-/* Stats grid */
-.cpu-popup .stats,
-.memory-popup .stats {
-    background: transparent;
-    padding: 16px;
-}
-.cpu-popup .stats .stat-item,
-.memory-popup .stats .stat-item {
-    background-color: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.04);
-    border-radius: 8px;
-    padding: 8px 12px;
-    margin: 8px;
-}
-.cpu-popup .stats .stat-item,
-.memory-popup .stats .stat-item {
-    background-color: rgba(255, 255, 255, 0.35);
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    border-radius: 8px;
-    padding: 8px 12px;
-    margin: 8px;
-}
-.dark .cpu-popup .stats .stat-item,
-.dark .memory-popup .stats .stat-item {
-    background-color: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.04);
-    border-radius: 8px;
-    padding: 8px 12px;
-    margin: 8px;
-}
-.cpu-popup .stats .stat-label,
-.memory-popup .stats .stat-label {
-    font-size: 13px;
-    color: var(--dark-dim-color);
-    font-family: 'Segoe UI';
-    font-weight: 400;
-    padding: 6px 4px 2px 4px;
-}
-.dark .cpu-popup .stats .stat-label,
-.dark .memory-popup .stats .stat-label {
-    color: var(--light-dim-color);
-}
-.cpu-popup .stats .stat-value,
-.memory-popup .stats .stat-value {
-    font-size: 20px;
-    font-weight: 700;
-    color: var(--dark-color);
-    font-family: 'Segoe UI';
-    padding: 0 4px 12px 4px;
-}
-.dark .cpu-popup .stats .stat-value,
-.dark .memory-popup .stats .stat-value {
-    color: var(--light-color);
-}
-
-.power-menu-widget .label {
-    font-size: 16px;
-    padding: 0;
-}
-.power-menu-compact {
-    min-width: 260px;
-    background-color: var(--light-menu-bg)
-}
-.dark .power-menu-compact {
-    min-width: 260px;
-    background-color: var(--dark-menu-bg);
-}
-.power-menu-compact .profile-info {
-    padding: 12px 0 24px 0;
-}
-
-.power-menu-compact .profile-info .profile-username {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--dark-dim-color);
-    font-family: 'Segoe UI';
-    margin-top: 4px;
-}
-.dark .power-menu-compact .profile-info .profile-username {
-    color: var(--light-dim-color);
-}
-.power-menu-compact .profile-info .profile-account-type {
-    font-size: 12px;
-    color: #ffffff;
-    font-weight: 600;
-    margin-top: 8px;
-    font-family: 'Segoe UI';
-    background-color: #0f68dd;
-    padding: 2px 6px;
-    border-radius: 6px;
-}
-.power-menu-compact .profile-info .profile-email {
-    font-size: 13px;
-    color: var(--dark-dim-color);
-    margin-top: 2px;
-    font-family: 'Segoe UI';
-}
-.dark .power-menu-compact .profile-info .profile-email {
-    color: var(--light-dim-color);
-}
-.power-menu-compact .manage-accounts {
-    font-size: 12px;
-    background-color: rgba(255, 255, 255, 0.08);
-    font-family: 'Segoe UI';
-    font-weight: 600;
-    padding: 2px 8px;
-    margin-top: 16px;
-    border-radius: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-.power-menu-compact .manage-accounts:hover {
-    background-color: rgba(255, 255, 255, 0.15);
-}
-.power-menu-compact .buttons {
-    background-color: rgba(255, 255, 255, 0.35);
-    margin: 0 12px 12px 12px;
-    border-radius: 8px;
-}
-.dark .power-menu-compact .buttons {
-    background-color: rgba(255, 255, 255, 0.03);
-    margin: 0 12px 12px 12px;
-    border-radius: 8px;
-}
-.power-menu-compact .button {
-    padding: 8px 16px;
-    background-color: transparent;
-    border: none;
-    border-radius: 0;
-}
-.power-menu-compact .button.hover {
-    background-color: rgba(255, 255, 255, 0.4);
-}
-.dark .power-menu-compact .button.hover {
-    background-color: rgba(255, 255, 255, 0.05);
-}
-.power-menu-compact .button.lock.hover {
-    border-top-right-radius: 8px;
-    border-top-left-radius: 8px;
-}
-.power-menu-compact .button.shutdown.hover {
-    border-bottom-right-radius: 8px;
-    border-bottom-left-radius: 8px;
-}
-.power-menu-compact .button .icon {
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--dark-color);
-    padding-right: 10px;
-    min-width: 20px;
-}
-.dark .power-menu-compact .button .icon {
-    color: var(--light-color);
-}
-.power-menu-compact .button .label {
-    font-size: 13px;
-    font-weight: 500;
-    font-family: "Segoe UI";
-    color: var(--dark-dim-color)
-}
-.dark .power-menu-compact .button .label {
-    color: var(--light-dim-color);
-}
-
-.power-menu-compact .icon.hover,
-.power-menu-compact .label.hover {
-    color: var(--dark-color)
-}
-.dark .power-menu-compact .icon.hover,
-.dark .power-menu-compact .label.hover {
-    color: var(--light-color);
-}
-.dark .open-meteo-widget .icon {
-    color: #F6E3B4
-}
-.open-meteo-card {
-    background-color: var(--light-menu-bg);
-    min-width: 500px;
-}
-.dark .open-meteo-card {
-    background-color: var(--dark-menu-bg);
-    min-width: 500px;
-}
-.open-meteo-card-today .label {
-    font-size: 13px;
-    font-family: "Segoe UI";
-    font-weight: 400;
-    color: var(--dark-dim-color)
-}
-.dark .open-meteo-card-today .label {
-    color: var(--light-dim-color);
-}
-.open-meteo-card-today .label.location {
-    font-size: 32px;
-    font-weight: 700;
-    font-family: "Segoe UI";
-    color: var(--dark-color)
-}
-.dark .open-meteo-card-today .label.location {
-    color: var(--light-color);
-}
-.open-meteo-card-today .label.sunrisesunset {
-    font-size: 18px;
-    font-family: "Segoe UI";
-    font-weight: 600;
-    color: rgb(201, 204, 159);
-}
-.open-meteo-card-today .label.sunrisesunset-icon {
-    font-size: 16px;
-    color: rgb(201, 204, 159);
-    font-family: "Segoe Fluent Icons";
-    font-weight: 600;
-}
-.open-meteo-card-day {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    background-color: rgba(0, 0, 0, 0);
-    padding: 4px;
-    min-width: 70px;
-}
-.open-meteo-card-day .day-name {
-    font-family: "Segoe UI";
-    color: var(--dark-dim-color);
-    font-size: 12px;
-    font-weight: 600;
-}
-.dark .open-meteo-card-day .day-name {
-    color: var(--light-dim-color);
-}
-.open-meteo-card-day .day-temp-max {
-    font-family: "Segoe UI";
-    font-weight: 700;
-    font-size: 16px;
-    color: var(--dark-color);
-}
-.dark .open-meteo-card-day .day-temp-max {
-    color: var(--light-color);
-}
-
-.open-meteo-card-day .day-temp-min {
-    font-family: "Segoe UI";
-    color: var(--dark-color);
-    font-weight: 400;
-    font-size: 13px;
-}
-.dark .open-meteo-card-day .day-temp-min {
-    color: var(--light-color);
-}
-
-.open-meteo-card-day.active {
-    background-color: rgba(255, 255, 255, 0.35);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-}
-.dark .open-meteo-card-day.active {
-    background-color: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-}
-.open-meteo-card-day:hover {
-    background-color: rgba(255, 255, 255, 0.35);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-}
-.dark .open-meteo-card-day:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-}
-.open-meteo-card .hourly-container {
-    border: none;
-    background-color: transparent;
-    min-height: 120px;
-}
-.open-meteo-card .hourly-data {
-    font-size: 11px;
-    font-weight: 700;
-    font-family: "Segoe UI";
-}
-.open-meteo-card .hourly-data.temperature {
-    background-color: #c9be48;
-}
-.open-meteo-card .hourly-data.rain {
-    background-color: #4a90e2;
-}
-.open-meteo-card .hourly-data.snow {
-    background-color: #a0c4ff;
-}
-.open-meteo-card .hourly-data .hourly-rain-animation {
-    color: rgba(150, 200, 255, 40);
-    background-color: rgba(0, 0, 0, 0);
-}
-.open-meteo-card .hourly-data .hourly-snow-animation {
-    color: rgba(255, 255, 255, 150);
-    background-color: rgba(0, 0, 0, 0);
-}
-.open-meteo-card .hourly-data-buttons {
-    margin-top: 11px;
-    margin-left: 11px;
-}
-.open-meteo-card .hourly-data-button {
-    border-radius: 4px;
-    min-height: 24px;
-    min-width: 24px;
-    max-width: 24px;
-    max-height: 24px;
-    font-size: 14px;
-    color: rgba(255, 255, 255, 0.3);
-    border: 1px solid transparent;
-}
-.open-meteo-card .hourly-data-button.active {
-    color: #fff;
-    background-color: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-.open-meteo-card .search-head {
-    font-size: 18px;
-    font-family: "Segoe UI";
-    font-weight: 600;
-    color: rgba(255, 255, 255, 0.9);
-}
-.open-meteo-card .search-description {
-    font-size: 14px;
-    font-family: "Segoe UI";
-    font-weight: 400;
-    color: rgba(255, 255, 255, 0.7);
-    padding-bottom: 8px;
-}
-.open-meteo-card .no-data-icon {
-    font-size: 88px;
-}
-.open-meteo-card .no-data-text {
-    font-size: 16px;
-    font-family: "Segoe UI";
-    font-weight: 400;
-}
-/* search dialog */
-.open-meteo-card .search-input {
-    padding: 8px 12px;
-    border: 1px solid #5e6070;
-    border-radius: 6px;
-    background-color: rgba(17, 17, 27, 0.1);
-    color: #cdd6f4;
-    font-family: "Segoe UI";
-    font-size: 14px;
-}
-.open-meteo-card .search-input:focus {
-    border: 1px solid #89b4fa;
-    background-color: rgba(17, 17, 27, 0.2);
-}
-.open-meteo-card .search-results {
-    border: 1px solid #45475a00;
-    border-radius: 6px;
-    background-color: rgba(0, 0, 0, 0);
-    color: #cbced8;
-    font-size: 13px;
-    font-family: "Segoe UI";
-}
-.open-meteo-card .search-results::item {
-    padding: 6px;
-}
-.open-meteo-card .search-results::item:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-}
-
-.clock-widget .icon {
-    font-size: 14px;
-    padding-right: 4px;
-}
-.clock-widget .icon.alarm {
-    color: #f38ba8;
-    margin-left: 4px;
-}
-.clock-widget .label.alarm {
-    color: #74b0ff;
-    margin-left: 4px;
-}
-
-/* Calendar, Alarm, and Timer Popups */
-.clock-popup.alarm,
-.clock-popup.timer,
-.clock-popup.calendar {
-    min-width: 460px;
-    background-color: var(--light-menu-bg);
-}
-.dark .clock-popup.alarm,
-.dark .clock-popup.timer,
-.dark .clock-popup.calendar {
-    background-color: var(--dark-menu-bg);
-}
-.clock-popup.calendar .calendar-table,
-.clock-popup.calendar .calendar-table::item {
-    background-color: rgba(17, 17, 27, 0);
-    color: rgba(133, 144, 160, 0.85);
-    font-family: 'Segoe UI';
-    margin: 0;
-    padding: 0;
-    border: none;
-    outline: none;
-}
-.dark .clock-popup.calendar .calendar-table,
-.dark .clock-popup.calendar .calendar-table::item {
-    background-color: rgba(17, 17, 27, 0);
-    color: rgba(162, 177, 196, 0.85);
-}
-.clock-popup.calendar .calendar-table::item:selected {
-    color: #282936;
-    font-weight: bold;
-    background-color: #74b0ff;
+.komorebi-stack {
+    border-radius: 12px;
+    min-width:40px;
+    background-color: var(--bg-light-transparent);
+    color: var(--text-dark);
+    margin-right:10px;
+}
+.komorebi-stack .widget-container {
+    color: var(--text-dark);
     border-radius: 12px;
 }
-.clock-popup.calendar .day-label {
-    margin-top: 20px;
+.komorebi-stack .window .icon{
+  margin-left:4px;
+  padding:0 10px;
 }
-.clock-popup.calendar .day-label,
-.clock-popup.calendar .month-label,
-.clock-popup.calendar .year-label,
-.clock-popup.calendar .date-label {
-    font-family: 'Segoe UI';
-    font-size: 16px;
-    font-weight: 700;
-    min-width: 180px;
-    max-width: 180px;
-}
-.clock-popup.calendar .month-label {
-    font-weight: normal;
-}
-.clock-popup.calendar .year-label {
-    font-weight: normal;
-}
-.clock-popup.calendar .date-label {
-    font-size: 88px;
-    font-weight: 900;
-    margin-top: -20px;
-}
-
-/* Alarm and Timer Dialog Containers */
-.clock-popup.timer .clock-popup-container,
-.clock-popup.alarm .clock-popup-container {
-    padding: 16px;
-}
-.clock-popup.timer .clock-popup-footer,
-.clock-popup.alarm .clock-popup-footer {
-    padding: 16px;
-    border-top: 1px solid rgb(0, 0, 0);
-    background-color: rgba(0, 0, 0, 0.3);
-}
-.clock-popup .clock-label-timer {
-    font-size: 13px;
-    font-family: 'Segoe UI';
-    font-weight: 600;
-    color: #8d9196;
-}
-.clock-popup .clock-input-time {
-    font-size: 48px;
+.komorebi-stack .window {
     background-color: transparent;
     border: none;
-    font-family: monospace, "Tahoma", "Segoe UI";
-    font-weight: 600;
-    color: #ced3d8;
 }
-.clock-popup .clock-input-time.colon {
-    padding-bottom: 8px;
-}
-
-/* Dialog Buttons */
-.clock-popup .button {
-    border-radius: 4px;
-    font-family: 'Segoe UI';
-    font-weight: 600;
-    font-size: 13px;
-    min-height: 28px;
-    min-width: 64px;
-    margin: 4px 0;
-    background-color: rgba(255, 255, 255, 0.1);
-}
-.clock-popup .button.save,
-.clock-popup .button.start,
-.clock-popup .button.delete,
-.clock-popup .button.cancel {
-    min-width: 120px;
-}
-
-.clock-popup .button.save,
-.clock-popup .button.start {
-    background-color: rgba(0, 110, 255, 0.5);
-    margin-right: 8px;
-}
-
-.clock-popup .button.save:hover,
-.clock-popup .button.start:hover {
-    background-color: rgba(0, 110, 255, 0.7);
-}
-.clock-popup .button.delete {
-    background-color: rgba(255, 80, 80, 0.5);
-}
-.clock-popup .button.delete:hover {
-    background-color: rgba(255, 80, 80, 0.7);
-}
-.clock-popup .button.is-alarm-enabled {
-    background-color: rgba(0, 110, 255, 0.5);
-}
-.clock-popup .button.is-alarm-enabled:hover {
-    background-color: rgba(0, 110, 255, 0.7);
-}
-.clock-popup .button.is-alarm-disabled {
-    background-color: rgba(255, 255, 255, 0.2);
-}
-.clock-popup .button.day {
-    background-color: rgba(255, 255, 255, 0.1);
-    max-height: 20px;
-    min-height: 20px;
-}
-.clock-popup .button.day:checked {
-    background-color: rgba(0, 110, 255, 0.5);
-}
-.clock-popup .button.quick-option {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-.clock-popup .button.quick-option:checked {
-    background-color: rgba(0, 110, 255, 0.5);
-}
-.clock-popup .button:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-}
-.clock-popup .button:disabled {
-    background-color: rgba(100, 100, 100, 0.2);
-    color: rgba(150, 150, 150, 0.7);
-}
-.clock-popup .alarm-input-title {
-    font-size: 14px;
-    font-family: 'Segoe UI';
-    font-weight: 600;
-    color: #d2d6e2;
-    background-color: rgba(255, 255, 255, 0.1);
-    border: 1px solid transparent;
-    border-radius: 4px;
-    padding: 4px 8px;
-    margin-top: 8px;
-    outline: none;
-    min-width: 300px;
-}
-
-.clock-popup .alarm-input-title:focus {
-    border: 1px solid #0078D4;
-}
-
-/* Active Alarm Popup Window */
-.active-alarm-window {
-    background-color: rgba(255, 255, 255, 0.048);
-    max-width: 500px;
-    min-width: 500px;
-    padding: 32px;
-}
-.active-alarm-window .alarm-title-icon {
-    font-size: 64px;
-    color: #ffffff;
-    margin-bottom: 16px;
-}
-.active-alarm-window .alarm-title {
-    font-size: 24px;
-    font-family: 'Segoe UI';
-    font-weight: 600;
-    color: #ffffff;
-    max-width: 500px;
-    min-width: 500px;
-}
-.active-alarm-window .alarm-info {
-    font-size: 16px;
-    font-family: 'Segoe UI';
-    font-weight: 600;
-    color: #b2b6c0;
-    margin-bottom: 32px;
-}
-.active-alarm-window .button {
-    border-radius: 4px;
-    font-family: 'Segoe UI';
-    font-weight: 600;
-    font-size: 14px;
-    min-height: 36px;
-    min-width: 100px;
-    margin: 0 4px;
-    background-color: rgba(255, 255, 255, 0.1);
-}
-.active-alarm-window .button:hover {
-    background-color: rgba(255, 255, 255, 0.3);
-}
-
-.home-menu {
-    background-color: var(--light-menu-bg);
-}
-.dark .home-menu {
-    background-color: var(--dark-menu-bg);
-}
-.home-menu .menu-item {
-    color: var(--dark-color);
-    padding: 6px 48px 7px 16px;
-}
-.dark .home-menu .menu-item {
-    color: var(--light-color);
-}
-
-.home-menu .menu-item:hover {
-    background-color: rgba(128, 130, 158, 0.15);
-    color: #fff;
-}
-.home-menu .separator {
-    max-height: 1px;
-    background-color: rgba(128, 130, 158, 0.3);
-}
-
-.systray .button {
-    border-radius: 4px;
-    padding: 2px;
-    background: transparent;
-    border: none;
-    outline: none;
-}
-
-.systray .button:hover {
-    background: rgba(255, 255, 255, 0.2);
-}
-.systray .button.drag-over {
-    background: rgba(255, 255, 255, 0.4);
-}
-.systray .pinned-container.drop-target {
-    background: rgba(255, 255, 255, 0.1);
-}
-.systray .unpinned-visibility-btn {
-    border-radius: 4px;
-    height: 20px;
-    width: 16px;
-    border: none;
-    outline: none;
-}
-
-.systray .unpinned-visibility-btn:checked {
-    background: transparent;
-}
-.systray-popup .button.drag-over {
-    background-color: rgba(255, 255, 255, 0.2);
-}
-.systray .pinned-container.pinned-container.drop-target {
-    background-color: rgba(255, 255, 255, 0.1);
-}
-.systray-popup {
-    background-color: var(--light-menu-bg);
-    padding: 4px;
-}
-.dark .systray-popup {
-    background-color: var(--dark-menu-bg);
-}
-.systray-popup .button {
-    padding: 10px;
+.komorebi-stack .window.active {
+    background-color: var(--bg-light);
+    color: var(--text-dark);
+    border-radius: 12px;
+    height: auto;
     margin: 0;
-    border: 0;
-    border-radius: 6px;
-}
-.systray-popup .button:hover {
-    background-color: rgba(255, 255, 255, 0.3);
-}
-.dark .systray-popup .button:hover {
-    background-color: rgba(255, 255, 255, 0.05);
 }