theme selecter moved

frontend/static/style.css

@@ -223,17 +223,6 @@ body::selection {
   position: relative;
 }
 
-.theme-picker {
-  width: auto;
-  min-width: 132px;
-  padding: 8px 10px;
-  border: 1px solid var(--surface-2);
-  border-radius: 7px;
-  background: var(--surface-0);
-  color: var(--text);
-  font: inherit;
-}
-
 .menu-toggle {
   min-width: 0;
   padding: 10px 13px;
@@ -339,6 +328,86 @@ body::selection {
   color: var(--red);
 }
 
+.theme-submenu-container {
+  border-top: 1px solid var(--border);
+  margin-top: 6px;
+  padding-top: 6px;
+}
+
+.theme-submenu-container.hidden {
+  display: none;
+}
+
+.submenu-title {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  padding: 9px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.submenu-title:hover {
+  background: var(--surface-1);
+  color: var(--lavender);
+}
+
+.submenu-title::after {
+  content: ' ▼';
+  font-size: 0.7em;
+  opacity: 0.7;
+}
+
+.submenu-title[aria-expanded='true']::after {
+  transform: rotate(-180deg);
+  display: inline-block;
+}
+
+.submenu-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 8px;
+  margin-top: 4px;
+  border-radius: 6px;
+  background: var(--surface-1);
+}
+
+.submenu-options.hidden {
+  display: none;
+}
+
+.theme-option {
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.9rem;
+}
+
+.theme-option:hover {
+  background: var(--surface-0);
+  border-color: var(--lavender);
+  color: var(--lavender);
+}
+
+.theme-option.active {
+  background: var(--mauve);
+  border-color: var(--mauve);
+  color: var(--crust);
+  font-weight: 600;
+}
+
 main.container {
   position: relative;
   z-index: 1;