redesign

frontend/src/styles/global.css

@@ -974,18 +974,18 @@ code, pre, kbd, samp {
 .btn--primary {
   background: var(--mauve);
   color: var(--rosewater);
-  border-color: var(--mauve);
-  box-shadow: 0 4px 0 -2px color-mix(in srgb, var(--mauve) 55%, var(--crust));
+  border-color: color-mix(in srgb, var(--mauve) 80%, var(--crust));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
 }
 .btn--primary:hover {
   transform: translateY(-1px);
   background: var(--red);
-  border-color: var(--red);
-  box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--red) 55%, var(--crust));
+  border-color: color-mix(in srgb, var(--red) 80%, var(--crust));
+  box-shadow: 0 7px 16px -7px color-mix(in srgb, var(--red) 65%, transparent);
 }
 .btn--primary:active {
-  transform: translateY(1px);
-  box-shadow: 0 1px 0 -1px color-mix(in srgb, var(--mauve) 55%, var(--crust));
+  transform: translateY(0);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 .btn--ghost {
   color: var(--subtext1);
@@ -1023,7 +1023,30 @@ code, pre, kbd, samp {
 .btn--icon.btn--sm { width: 2rem; }
 .btn--block { width: 100%; }
 
-/* ───── Top-bar controls — one height, one language ───── */
+/* ───── Top-bar controls — one height, one language ─────
+ * `.topbar-cluster` lays the chrome controls out as one tidy, right-aligned
+ * group that wraps as a unit (never a ragged full-width column on mobile).
+ * Every control is the same 2rem height; icon-only variants are exact
+ * squares so they line up cleanly next to each other. */
+.topbar-cluster {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  justify-content: flex-start;
+}
+@media (min-width: 768px) {
+  .topbar-cluster { justify-content: flex-end; }
+}
+/* A hairline divider between the public controls and the admin group. */
+.topbar-divider {
+  align-self: stretch;
+  width: 1px;
+  margin: 0.15rem 0.15rem;
+  background: var(--surface2);
+  flex: none;
+}
+
 .topbar-control {
   display: inline-flex;
   align-items: center;
@@ -1031,6 +1054,7 @@ code, pre, kbd, samp {
   gap: 0.4rem;
   height: 2rem;
   padding: 0 0.7rem;
+  flex: none;
   font-family: var(--font-display);
   font-style: italic;
   font-size: 0.85rem;
@@ -1055,17 +1079,25 @@ code, pre, kbd, samp {
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--mauve) 40%, transparent);
 }
 .topbar-control:disabled { opacity: 0.5; cursor: default; }
-.topbar-control svg { width: 14px; height: 14px; flex-shrink: 0; }
+.topbar-control svg { width: 15px; height: 15px; flex-shrink: 0; }
+/* Exact-square icon-only variant — keeps the row aligned. */
+.topbar-control--icon { width: 2rem; padding: 0; }
 .topbar-control--danger:hover {
   color: var(--red);
   border-color: color-mix(in srgb, var(--red) 55%, var(--surface2));
 }
-/* Native <select> variant — leave room for the chevron overlay */
+/* Native <select> variant — leave room for the chevron overlay.
+ * Fixed width so switching themes never resizes the whole top bar. */
 select.topbar-control {
   appearance: none;
   -webkit-appearance: none;
   padding-right: 1.9rem;
 }
+select.topbar-control.theme-select {
+  width: 8.75rem;
+  justify-content: flex-start;
+  text-align: left;
+}
 .topbar-control kbd {
   display: inline-flex;
   align-items: center;
@@ -1079,6 +1111,23 @@ select.topbar-control {
   color: var(--subtext0);
 }
 
+/* Responsive collapse — below a breakpoint a control drops its label and
+ * becomes an exact 2rem square so the cluster stays a tidy aligned row on
+ * phones. Written unlayered (not Tailwind utilities) so it reliably wins
+ * over the `.topbar-control` base in the Tailwind v4 cascade. */
+.topbar-control .tc-label { display: inline; }
+@media (max-width: 1023px) {
+  .topbar-control .tc-kbd { display: none; }
+}
+@media (max-width: 767px) {
+  .topbar-control.tc-collapse-md { width: 2rem; padding: 0; }
+  .topbar-control.tc-collapse-md .tc-label { display: none; }
+}
+@media (max-width: 639px) {
+  .topbar-control.tc-collapse-sm { width: 2rem; padding: 0; }
+  .topbar-control.tc-collapse-sm .tc-label { display: none; }
+}
+
 /* Form input look */
 .field-input {
   width: 100%;