Brought over .common from nutty.gg premium

.common/styles/global.css

@@ -28,7 +28,7 @@ body {
     padding: 0;
     font-family: Inter, system-ui, sans-serif;
     /* font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; */
-	/* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; */
+    /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; */
     color: white;
     background-color: var(--background-color);
 }
@@ -311,6 +311,17 @@ iframe {
 /*** DIALOG ***/
 /**************/
 
+.dialog-wrapper {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+    backdrop-filter: blur(var(--blur-intensity));
+}
+
 .dialog {
     font-size: 1em;
     background-color: var(--dialog-background);
@@ -327,7 +338,7 @@ iframe {
     border: 1px solid #40404080;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
     z-index: 1000;
-    /* above overlay */
+    backdrop-filter: blur(var(--blur-intensity));
 }
 
 .dialog-nav-button {
@@ -384,4 +395,98 @@ select {
     color: #fff;
     cursor: pointer;
     min-width: 8em;
+}
+
+/***************/
+/*** SIDEBAR ***/
+/***************/
+
+#sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 250px;
+    /* expanded width */
+    height: 100vh;
+    color: #fff;
+    overflow: hidden;
+    transition: width 0.3s ease;
+    backdrop-filter: blur(var(--blur-intensity));
+    /* <-- adds the blur */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
+}
+
+#sidebar.collapsed {
+    width: 3em;
+    /* collapsed width */
+}
+
+#sidebar button {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.5em;
+    padding: 0.5em 1em;
+    border-radius: 0;
+}
+
+#sidebar .sidebar-menu {
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+
+#sidebar.collapsed .sidebar-menu {
+    opacity: 1;
+}
+
+#collapse-sidebar-btn {
+    width: 100%;
+    background: none;
+    border: none;
+    color: #fff;
+    cursor: pointer;
+    justify-content: flex-end !important;
+}
+
+.sidebar-item {
+    padding: 0.75em 1em;
+    text-align: left;
+    background: none;
+    border: none;
+    color: inherit;
+    font-size: 1em;
+    cursor: pointer;
+    white-space: nowrap;
+    /* prevent line breaks */
+    overflow: hidden;
+    /* hide overflow text */
+    text-overflow: ellipsis;
+    /* optional: show "..." if needed */
+}
+
+#sidebar.collapsed .sidebar-item {
+    justify-content: center;
+    padding: 0.75em 0;
+}
+
+.sidebar-label {
+    display: inline-block;
+}
+
+#sidebar.collapsed .sidebar-label {
+    display: none;
+}
+
+.sidebar-item svg {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+
+.sidebar-spacer {
+    flex: 1;
+}
+
+.sidebar-item:hover {
+    background-color: #333;
 }