fix: rewrite Swiss and Brutalist themes with surgical selectors, no more broken icons

themes/brutalist.css

@@ -1,8 +1,11 @@
 /*
  * Outlook Relook — Brutalist Theme
- * Stark minimalism. Monospace. Borders only, almost no fills.
+ *
- * High contrast. Maximum information density. No comfort.
+ * Stark. Monospace. High contrast. Maximum information density.
- * Inspired by terminal UIs, tax forms, and concrete architecture.
+ * Borders and text, almost no fills. Inverted hover states.
+ * Inspired by terminal UIs, Craigslist, and concrete architecture.
+ *
+ * Scoped to specific elements — never uses `*` selectors.
  */
 
 /* ============================================================
@@ -12,14 +15,15 @@ html[data-outlook-relook-scheme="light"] {
   --or-bg-primary: #ffffff;
   --or-bg-secondary: #ffffff;
   --or-bg-tertiary: #ffffff;
-  --or-bg-hover: transparent;
+  --or-bg-hover: #000000;
-  --or-bg-selected: transparent;
+  --or-bg-selected: #000000;
   --or-text-primary: #000000;
-  --or-text-secondary: #000000;
+  --or-text-secondary: #333333;
-  --or-text-tertiary: #555555;
+  --or-text-tertiary: #666666;
   --or-text-disabled: #999999;
+  --or-text-inverted: #ffffff;
   --or-border: #000000;
-  --or-border-light: #000000;
+  --or-border-light: #cccccc;
   --or-accent: var(--or-accent-override, #000000);
   --or-accent-hover: var(--or-accent-override, #333333);
   --or-shadow: none;
@@ -31,185 +35,213 @@ html[data-outlook-relook-scheme="light"] {
 html[data-outlook-relook-scheme="dark"] {
   --or-bg-primary: #000000;
   --or-bg-secondary: #000000;
-  --or-bg-tertiary: #000000;
+  --or-bg-tertiary: #0a0a0a;
-  --or-bg-hover: transparent;
+  --or-bg-hover: #ffffff;
-  --or-bg-selected: transparent;
+  --or-bg-selected: #ffffff;
   --or-text-primary: #ffffff;
-  --or-text-secondary: #ffffff;
+  --or-text-secondary: #cccccc;
-  --or-text-tertiary: #aaaaaa;
+  --or-text-tertiary: #888888;
   --or-text-disabled: #555555;
+  --or-text-inverted: #000000;
   --or-border: #ffffff;
-  --or-border-light: #ffffff;
+  --or-border-light: #333333;
   --or-accent: var(--or-accent-override, #ffffff);
   --or-accent-hover: var(--or-accent-override, #cccccc);
   --or-shadow: none;
 }
 
 /* ============================================================
-   TYPOGRAPHY — Monospace, tight, utilitarian
+   TYPOGRAPHY — Monospace on text elements only (not icons)
    ============================================================ */
-html[data-outlook-relook-scheme] *,
+html[data-outlook-relook-scheme] body,
-html[data-outlook-relook-scheme] *::before,
+html[data-outlook-relook-scheme] div,
-html[data-outlook-relook-scheme] *::after {
+html[data-outlook-relook-scheme] span,
+html[data-outlook-relook-scheme] p,
+html[data-outlook-relook-scheme] h1,
+html[data-outlook-relook-scheme] h2,
+html[data-outlook-relook-scheme] h3,
+html[data-outlook-relook-scheme] h4,
+html[data-outlook-relook-scheme] h5,
+html[data-outlook-relook-scheme] h6,
+html[data-outlook-relook-scheme] a,
+html[data-outlook-relook-scheme] li,
+html[data-outlook-relook-scheme] td,
+html[data-outlook-relook-scheme] th,
+html[data-outlook-relook-scheme] label,
+html[data-outlook-relook-scheme] input,
+html[data-outlook-relook-scheme] button,
+html[data-outlook-relook-scheme] select,
+html[data-outlook-relook-scheme] textarea {
   font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace !important;
-  letter-spacing: -0.03em !important;
   -webkit-font-smoothing: none !important;
-  font-smooth: never !important;
+  letter-spacing: -0.02em !important;
 }
 
+/* Smaller base size for density */
 html[data-outlook-relook-scheme] body {
   font-size: 12px !important;
 }
 
 /* ============================================================
-   STRIP EVERYTHING — more aggressive than Swiss
+   BODY
-   ============================================================ */
-html[data-outlook-relook-scheme] * {
-  border-radius: 0 !important;
-  text-shadow: none !important;
-  box-shadow: none !important;
-  background-image: none !important;
-  transition: none !important;
-  animation: none !important;
-}
-
-/* ============================================================
-   SURFACES — pure white/black, no distinction between panes
    ============================================================ */
 html[data-outlook-relook-scheme] body {
   background-color: var(--or-bg-primary) !important;
   color: var(--or-text-primary) !important;
 }
 
-/* Top bar — just a bottom border */
+/* ============================================================
+   TOP BAR — Heavy bottom border
+   ============================================================ */
 html[data-outlook-relook-scheme] [role="banner"],
 html[data-outlook-relook-scheme] header {
   background-color: var(--or-bg-primary) !important;
   border-bottom: 2px solid var(--or-border) !important;
+  box-shadow: none !important;
 }
 
-/* Folder pane — border only, no background change */
+/* ============================================================
-html[data-outlook-relook-scheme] [role="navigation"],
+   NAVIGATION / FOLDER PANE — Heavy right border
-html[data-outlook-relook-scheme] [role="complementary"] {
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="navigation"] {
   background-color: var(--or-bg-primary) !important;
   border-right: 2px solid var(--or-border) !important;
 }
 
-/* Message list — no background */
+html[data-outlook-relook-scheme] [role="complementary"] {
-html[data-outlook-relook-scheme] [role="listbox"],
-html[data-outlook-relook-scheme] [role="list"] {
-  background-color: var(--or-bg-primary) !important;
-}
-
-/* Message list items — borders only, no fills */
-html[data-outlook-relook-scheme] [role="option"],
-html[data-outlook-relook-scheme] [role="listitem"] {
-  background-color: transparent !important;
-  border-bottom: 1px solid var(--or-border) !important;
-  color: var(--or-text-primary) !important;
-  padding: 3px 8px !important;
-}
-
-/* Hover: invert colors instead of fill */
-html[data-outlook-relook-scheme="light"] [role="option"]:hover,
-html[data-outlook-relook-scheme="light"] [role="listitem"]:hover {
-  background-color: #000000 !important;
-  color: #ffffff !important;
-}
-
-html[data-outlook-relook-scheme="dark"] [role="option"]:hover,
-html[data-outlook-relook-scheme="dark"] [role="listitem"]:hover {
-  background-color: #ffffff !important;
-  color: #000000 !important;
-}
-
-/* Selected: invert */
-html[data-outlook-relook-scheme="light"] [role="option"][aria-selected="true"],
-html[data-outlook-relook-scheme="light"] [role="listitem"][aria-selected="true"] {
-  background-color: #000000 !important;
-  color: #ffffff !important;
-}
-
-html[data-outlook-relook-scheme="dark"] [role="option"][aria-selected="true"],
-html[data-outlook-relook-scheme="dark"] [role="listitem"][aria-selected="true"] {
-  background-color: #ffffff !important;
-  color: #000000 !important;
-}
-
-/* Reading pane */
-html[data-outlook-relook-scheme] [role="main"] {
   background-color: var(--or-bg-primary) !important;
 }
 
 /* ============================================================
-   TOOLBAR — stark, no visual weight
+   FOLDER TREE — Uppercase, dense, no fills
-   ============================================================ */
-html[data-outlook-relook-scheme] [role="toolbar"] {
-  background-color: var(--or-bg-primary) !important;
-  border-bottom: 1px solid var(--or-border) !important;
-}
-
-html[data-outlook-relook-scheme] [role="toolbar"] button,
-html[data-outlook-relook-scheme] [role="toolbar"] [role="button"] {
-  background-color: transparent !important;
-  border: 1px solid transparent !important;
-  color: var(--or-text-primary) !important;
-  text-transform: uppercase !important;
-  font-size: 10px !important;
-  letter-spacing: 0.05em !important;
-}
-
-html[data-outlook-relook-scheme] [role="toolbar"] button:hover,
-html[data-outlook-relook-scheme] [role="toolbar"] [role="button"]:hover {
-  border-color: var(--or-border) !important;
-  background-color: transparent !important;
-}
-
-/* ============================================================
-   BUTTONS — outlined only, never filled
-   ============================================================ */
-html[data-outlook-relook-scheme] button,
-html[data-outlook-relook-scheme] [role="button"] {
-  background-color: transparent !important;
-  color: var(--or-text-primary) !important;
-  border: 1px solid transparent !important;
-}
-
-html[data-outlook-relook-scheme] button:hover,
-html[data-outlook-relook-scheme] [role="button"]:hover {
-  border-color: var(--or-border) !important;
-}
-
-/* Links: same color as text, underlined */
-html[data-outlook-relook-scheme] a {
-  color: var(--or-text-primary) !important;
-  text-decoration: underline !important;
-}
-
-html[data-outlook-relook-scheme] a:hover {
-  text-decoration: none !important;
-}
-
-/* ============================================================
-   FOLDER PANE — all caps, no fills
    ============================================================ */
 html[data-outlook-relook-scheme] [role="treeitem"] {
   color: var(--or-text-primary) !important;
   background-color: transparent !important;
   text-transform: uppercase !important;
   font-size: 10px !important;
-  letter-spacing: 0.06em !important;
+  letter-spacing: 0.04em !important;
-  border-bottom: 1px solid var(--or-border-light) !important;
+  border-radius: 0 !important;
 }
 
 html[data-outlook-relook-scheme] [role="treeitem"]:hover {
-  text-decoration: underline !important;
+  background-color: var(--or-bg-hover) !important;
-  background-color: transparent !important;
+  color: var(--or-text-inverted) !important;
 }
 
-html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"] {
+html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"],
+html[data-outlook-relook-scheme] [role="treeitem"][aria-current="true"] {
   font-weight: 900 !important;
   background-color: transparent !important;
+  border-left: 3px solid var(--or-border) !important;
+}
+
+/* ============================================================
+   MESSAGE LIST
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="listbox"],
+html[data-outlook-relook-scheme] [role="list"] {
+  background-color: var(--or-bg-primary) !important;
+}
+
+/* Message rows — borders, no fills */
+html[data-outlook-relook-scheme] [role="option"],
+html[data-outlook-relook-scheme] [role="listitem"] {
+  background-color: transparent !important;
+  border-bottom: 1px solid var(--or-border-light) !important;
+  color: var(--or-text-primary) !important;
+  border-radius: 0 !important;
+}
+
+/* Hover: INVERT — the brutalist signature move */
+html[data-outlook-relook-scheme] [role="option"]:hover,
+html[data-outlook-relook-scheme] [role="listitem"]:hover {
+  background-color: var(--or-bg-hover) !important;
+  color: var(--or-text-inverted) !important;
+}
+
+/* Also invert child spans on hover */
+html[data-outlook-relook-scheme] [role="option"]:hover span,
+html[data-outlook-relook-scheme] [role="listitem"]:hover span,
+html[data-outlook-relook-scheme] [role="option"]:hover time,
+html[data-outlook-relook-scheme] [role="listitem"]:hover time {
+  color: var(--or-text-inverted) !important;
+}
+
+/* Selected: inverted */
+html[data-outlook-relook-scheme] [role="option"][aria-selected="true"],
+html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] {
+  background-color: var(--or-bg-selected) !important;
+  color: var(--or-text-inverted) !important;
+}
+
+html[data-outlook-relook-scheme] [role="option"][aria-selected="true"] span,
+html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] span,
+html[data-outlook-relook-scheme] [role="option"][aria-selected="true"] time,
+html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] time {
+  color: var(--or-text-inverted) !important;
+}
+
+/* ============================================================
+   READING PANE
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="main"] {
+  background-color: var(--or-bg-primary) !important;
+}
+
+/* ============================================================
+   TOOLBAR — Understated, uppercase buttons
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="toolbar"] {
+  background-color: var(--or-bg-primary) !important;
+  border-bottom: 1px solid var(--or-border-light) !important;
+  box-shadow: none !important;
+}
+
+html[data-outlook-relook-scheme] [role="toolbar"] button,
+html[data-outlook-relook-scheme] [role="toolbar"] [role="button"] {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  background-image: none !important;
+  border-radius: 0 !important;
+  text-transform: uppercase !important;
+  font-size: 10px !important;
+  letter-spacing: 0.03em !important;
+}
+
+html[data-outlook-relook-scheme] [role="toolbar"] button:hover,
+html[data-outlook-relook-scheme] [role="toolbar"] [role="button"]:hover {
+  background-color: var(--or-bg-hover) !important;
+  color: var(--or-text-inverted) !important;
+}
+
+/* ============================================================
+   BUTTONS — Outlined, never filled
+   ============================================================ */
+html[data-outlook-relook-scheme] button,
+html[data-outlook-relook-scheme] [role="button"] {
+  box-shadow: none !important;
+  background-image: none !important;
+}
+
+html[data-outlook-relook-scheme] button:hover,
+html[data-outlook-relook-scheme] [role="button"]:hover {
+  background-color: var(--or-bg-hover) !important;
+  color: var(--or-text-inverted) !important;
+}
+
+/* ============================================================
+   LINKS — Same as text, underlined
+   ============================================================ */
+html[data-outlook-relook-scheme] a {
+  color: var(--or-text-primary) !important;
+  text-decoration: underline !important;
+}
+
+html[data-outlook-relook-scheme] a:hover {
+  color: var(--or-text-inverted) !important;
+  background-color: var(--or-bg-hover) !important;
+  text-decoration: none !important;
 }
 
 /* ============================================================
@@ -228,20 +260,54 @@ html[data-outlook-relook-scheme] time {
 }
 
 /* ============================================================
-   DIALOGS — bordered box, no fill
+   TABS
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="tab"] {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  background-image: none !important;
+  text-transform: uppercase !important;
+  font-size: 10px !important;
+  letter-spacing: 0.04em !important;
+}
+
+html[data-outlook-relook-scheme] [role="tab"][aria-selected="true"] {
+  border-bottom: 2px solid var(--or-border) !important;
+  font-weight: 900 !important;
+}
+
+/* ============================================================
+   DIALOGS — Bordered, no fill, no rounding
    ============================================================ */
 html[data-outlook-relook-scheme] [role="dialog"],
 html[data-outlook-relook-scheme] [role="alertdialog"] {
   background-color: var(--or-bg-primary) !important;
   border: 2px solid var(--or-border) !important;
+  border-radius: 0 !important;
+  box-shadow: 8px 8px 0 var(--or-border) !important;
+}
+
+html[data-outlook-relook-scheme] [role="menu"] {
+  border-radius: 0 !important;
+  border: 1px solid var(--or-border) !important;
+  box-shadow: 4px 4px 0 var(--or-border) !important;
+}
+
+html[data-outlook-relook-scheme] [role="menuitem"] {
+  border-radius: 0 !important;
+}
+
+html[data-outlook-relook-scheme] [role="menuitem"]:hover {
+  background-color: var(--or-bg-hover) !important;
+  color: var(--or-text-inverted) !important;
 }
 
 /* ============================================================
-   SCROLLBARS — hairline
+   SCROLLBARS — Hairline
    ============================================================ */
 html[data-outlook-relook-scheme] ::-webkit-scrollbar {
-  width: 2px !important;
+  width: 3px !important;
-  height: 2px !important;
+  height: 3px !important;
 }
 
 html[data-outlook-relook-scheme] ::-webkit-scrollbar-track {

themes/swiss.css

@@ -1,8 +1,12 @@
 /*
  * Outlook Relook — Swiss / Helvetica Theme
- * Ruthlessly minimal. Black, white, grey, accent. Nothing else.
+ *
- * Helvetica Neue everywhere. Zero decoration. Grid discipline.
+ * Inspired by the International Typographic Style.
- * If an element doesn't serve the content, it should be invisible.
+ * Helvetica Neue. Black, white, grey, and one accent color.
+ * Grid discipline. Content-first. Zero ornament.
+ *
+ * IMPORTANT: We scope surgical resets to specific OWA containers.
+ * Never use `*` selectors — they break SVG icons, checkboxes, etc.
  */
 
 /* ============================================================
@@ -10,18 +14,19 @@
    ============================================================ */
 html[data-outlook-relook-scheme="light"] {
   --or-bg-primary: #ffffff;
-  --or-bg-secondary: #ffffff;
+  --or-bg-secondary: #fafafa;
-  --or-bg-tertiary: #f7f7f7;
+  --or-bg-tertiary: #f5f5f5;
   --or-bg-hover: #f0f0f0;
   --or-bg-selected: #f0f0f0;
-  --or-text-primary: #000000;
+  --or-text-primary: #111111;
   --or-text-secondary: #555555;
   --or-text-tertiary: #888888;
   --or-text-disabled: #bbbbbb;
-  --or-border: #000000;
+  --or-border: #d4d4d4;
-  --or-border-light: #e0e0e0;
+  --or-border-light: #ebebeb;
-  --or-accent: var(--or-accent-override, #ff0000);
+  --or-accent: var(--or-accent-override, #e60000);
   --or-accent-hover: var(--or-accent-override, #cc0000);
+  --or-accent-subtle: var(--or-accent-override, rgba(230, 0, 0, 0.06));
   --or-shadow: none;
 }
 
@@ -29,88 +34,129 @@ html[data-outlook-relook-scheme="light"] {
    DARK VARIANT
    ============================================================ */
 html[data-outlook-relook-scheme="dark"] {
-  --or-bg-primary: #0a0a0a;
+  --or-bg-primary: #111111;
-  --or-bg-secondary: #0a0a0a;
+  --or-bg-secondary: #161616;
-  --or-bg-tertiary: #141414;
+  --or-bg-tertiary: #1a1a1a;
-  --or-bg-hover: #1a1a1a;
+  --or-bg-hover: #222222;
-  --or-bg-selected: #1a1a1a;
+  --or-bg-selected: #222222;
-  --or-text-primary: #ffffff;
+  --or-text-primary: #ededed;
   --or-text-secondary: #aaaaaa;
   --or-text-tertiary: #666666;
   --or-text-disabled: #444444;
-  --or-border: #ffffff;
+  --or-border: #333333;
-  --or-border-light: #222222;
+  --or-border-light: #232323;
-  --or-accent: var(--or-accent-override, #ff3333);
+  --or-accent: var(--or-accent-override, #ff3b3b);
-  --or-accent-hover: var(--or-accent-override, #ff6666);
+  --or-accent-hover: var(--or-accent-override, #ff6b6b);
+  --or-accent-subtle: var(--or-accent-override, rgba(255, 59, 59, 0.1));
   --or-shadow: none;
 }
 
 /* ============================================================
-   TYPOGRAPHY — Helvetica Neue, aggressively applied
+   TYPOGRAPHY
+   Applied broadly but NOT with *, which breaks icon fonts/SVGs
    ============================================================ */
-html[data-outlook-relook-scheme] *,
+html[data-outlook-relook-scheme] body,
-html[data-outlook-relook-scheme] *::before,
+html[data-outlook-relook-scheme] div,
-html[data-outlook-relook-scheme] *::after {
+html[data-outlook-relook-scheme] span,
+html[data-outlook-relook-scheme] p,
+html[data-outlook-relook-scheme] h1,
+html[data-outlook-relook-scheme] h2,
+html[data-outlook-relook-scheme] h3,
+html[data-outlook-relook-scheme] h4,
+html[data-outlook-relook-scheme] h5,
+html[data-outlook-relook-scheme] h6,
+html[data-outlook-relook-scheme] a,
+html[data-outlook-relook-scheme] li,
+html[data-outlook-relook-scheme] td,
+html[data-outlook-relook-scheme] th,
+html[data-outlook-relook-scheme] label,
+html[data-outlook-relook-scheme] input,
+html[data-outlook-relook-scheme] button,
+html[data-outlook-relook-scheme] select,
+html[data-outlook-relook-scheme] textarea {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
-  letter-spacing: -0.02em !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
 }
 
-/* ============================================================
+/* Tighten letter-spacing on headings and UI text */
-   STRIP ALL DECORATION — the core Swiss principle
+html[data-outlook-relook-scheme] [role="banner"],
-   ============================================================ */
+html[data-outlook-relook-scheme] [role="toolbar"],
-html[data-outlook-relook-scheme] * {
+html[data-outlook-relook-scheme] [role="navigation"],
-  border-radius: 0 !important;
+html[data-outlook-relook-scheme] [role="listbox"],
-  text-shadow: none !important;
+html[data-outlook-relook-scheme] [role="list"] {
-  box-shadow: none !important;
+  letter-spacing: -0.01em !important;
-  background-image: none !important;
-  text-decoration-color: var(--or-text-primary) !important;
-  outline-color: var(--or-accent) !important;
-}
-
-/* Remove ALL gradients, transitions, and transforms from non-essential elements */
-html[data-outlook-relook-scheme] button,
-html[data-outlook-relook-scheme] [role="button"],
-html[data-outlook-relook-scheme] [role="tab"],
-html[data-outlook-relook-scheme] [role="menuitem"],
-html[data-outlook-relook-scheme] [role="option"],
-html[data-outlook-relook-scheme] [role="listitem"],
-html[data-outlook-relook-scheme] [role="treeitem"] {
-  transition: none !important;
-  animation: none !important;
 }
 
 /* ============================================================
-   SURFACES — flatten everything to white (or black in dark)
+   BODY & MAIN SURFACES
    ============================================================ */
 html[data-outlook-relook-scheme] body {
   background-color: var(--or-bg-primary) !important;
   color: var(--or-text-primary) !important;
 }
 
+/* ============================================================
+   TOP BAR / HEADER
+   Clean bottom edge, no shadow, no background noise
+   ============================================================ */
 html[data-outlook-relook-scheme] [role="banner"],
 html[data-outlook-relook-scheme] header {
   background-color: var(--or-bg-primary) !important;
   border-bottom: 1px solid var(--or-border) !important;
+  box-shadow: none !important;
 }
 
-html[data-outlook-relook-scheme] [role="navigation"],
+/* ============================================================
+   NAVIGATION / FOLDER PANE
+   Subtle background, clean right edge
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="navigation"] {
+  background-color: var(--or-bg-secondary) !important;
+  border-right: 1px solid var(--or-border) !important;
+}
+
+/* Complementary panels (right side panels) */
 html[data-outlook-relook-scheme] [role="complementary"] {
-  background-color: var(--or-bg-primary) !important;
+  background-color: var(--or-bg-secondary) !important;
-  border-right: 1px solid var(--or-border-light) !important;
 }
 
+/* ============================================================
+   FOLDER TREE — Clean text hierarchy
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="treeitem"] {
+  color: var(--or-text-secondary) !important;
+  border-radius: 0 !important;
+}
+
+html[data-outlook-relook-scheme] [role="treeitem"]:hover {
+  background-color: var(--or-bg-hover) !important;
+  color: var(--or-text-primary) !important;
+}
+
+html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"],
+html[data-outlook-relook-scheme] [role="treeitem"][aria-current="true"] {
+  color: var(--or-text-primary) !important;
+  font-weight: 600 !important;
+  background-color: var(--or-bg-selected) !important;
+  border-left: 2px solid var(--or-accent) !important;
+}
+
+/* ============================================================
+   MESSAGE LIST
+   ============================================================ */
 html[data-outlook-relook-scheme] [role="listbox"],
 html[data-outlook-relook-scheme] [role="list"] {
   background-color: var(--or-bg-primary) !important;
 }
 
+/* Message rows */
 html[data-outlook-relook-scheme] [role="option"],
 html[data-outlook-relook-scheme] [role="listitem"] {
-  background-color: transparent !important;
+  background-color: var(--or-bg-primary) !important;
   border-bottom: 1px solid var(--or-border-light) !important;
   color: var(--or-text-primary) !important;
+  border-radius: 0 !important;
 }
 
 html[data-outlook-relook-scheme] [role="option"]:hover,
@@ -118,30 +164,35 @@ html[data-outlook-relook-scheme] [role="listitem"]:hover {
   background-color: var(--or-bg-hover) !important;
 }
 
+/* Selected message — accent bar */
 html[data-outlook-relook-scheme] [role="option"][aria-selected="true"],
 html[data-outlook-relook-scheme] [role="listitem"][aria-selected="true"] {
-  background-color: var(--or-bg-selected) !important;
+  background-color: var(--or-accent-subtle) !important;
   border-left: 3px solid var(--or-accent) !important;
 }
 
+/* ============================================================
+   READING PANE
+   ============================================================ */
 html[data-outlook-relook-scheme] [role="main"] {
   background-color: var(--or-bg-primary) !important;
 }
 
 /* ============================================================
-   TOOLBAR — minimal, no background distinction
+   TOOLBAR / COMMAND BAR
    ============================================================ */
 html[data-outlook-relook-scheme] [role="toolbar"] {
   background-color: var(--or-bg-primary) !important;
   border-bottom: 1px solid var(--or-border-light) !important;
+  box-shadow: none !important;
 }
 
-/* Toolbar buttons: text only, no background */
+/* Toolbar buttons — muted, text-forward */
 html[data-outlook-relook-scheme] [role="toolbar"] button,
 html[data-outlook-relook-scheme] [role="toolbar"] [role="button"] {
-  background-color: transparent !important;
+  border-radius: 2px !important;
-  border: none !important;
+  box-shadow: none !important;
-  color: var(--or-text-primary) !important;
+  background-image: none !important;
 }
 
 html[data-outlook-relook-scheme] [role="toolbar"] button:hover,
@@ -150,12 +201,12 @@ html[data-outlook-relook-scheme] [role="toolbar"] [role="button"]:hover {
 }
 
 /* ============================================================
-   BUTTONS — understate everything
+   BUTTONS — Minimal, no heavy fills
    ============================================================ */
 html[data-outlook-relook-scheme] button,
 html[data-outlook-relook-scheme] [role="button"] {
-  background-color: transparent !important;
+  box-shadow: none !important;
-  color: var(--or-text-primary) !important;
+  background-image: none !important;
 }
 
 html[data-outlook-relook-scheme] button:hover,
@@ -163,39 +214,19 @@ html[data-outlook-relook-scheme] [role="button"]:hover {
   background-color: var(--or-bg-hover) !important;
 }
 
-/* Links: accent color, no underline by default */
+/* ============================================================
+   LINKS — Accent color
+   ============================================================ */
 html[data-outlook-relook-scheme] a {
   color: var(--or-accent) !important;
-  text-decoration: none !important;
 }
 
 html[data-outlook-relook-scheme] a:hover {
-  text-decoration: underline !important;
   color: var(--or-accent-hover) !important;
 }
 
 /* ============================================================
-   FOLDER PANE — text hierarchy only, no visual chrome
+   SECONDARY TEXT — Clear typographic hierarchy
-   ============================================================ */
-html[data-outlook-relook-scheme] [role="treeitem"] {
-  color: var(--or-text-secondary) !important;
-  background-color: transparent !important;
-}
-
-html[data-outlook-relook-scheme] [role="treeitem"]:hover {
-  color: var(--or-text-primary) !important;
-  background-color: transparent !important;
-  text-decoration: underline !important;
-}
-
-html[data-outlook-relook-scheme] [role="treeitem"][aria-selected="true"] {
-  color: var(--or-text-primary) !important;
-  font-weight: 700 !important;
-  background-color: transparent !important;
-}
-
-/* ============================================================
-   SECONDARY TEXT — clear hierarchy
    ============================================================ */
 html[data-outlook-relook-scheme] [role="option"] span,
 html[data-outlook-relook-scheme] [role="listitem"] span {
@@ -205,25 +236,52 @@ html[data-outlook-relook-scheme] [role="listitem"] span {
 html[data-outlook-relook-scheme] time {
   color: var(--or-text-tertiary) !important;
   font-size: 11px !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.03em !important;
 }
 
 /* ============================================================
-   DIALOGS & OVERLAYS
+   TABS — Flat, no pill shapes
+   ============================================================ */
+html[data-outlook-relook-scheme] [role="tab"] {
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  background-image: none !important;
+}
+
+html[data-outlook-relook-scheme] [role="tab"][aria-selected="true"] {
+  border-bottom: 2px solid var(--or-accent) !important;
+}
+
+/* ============================================================
+   DIALOGS & MENUS
    ============================================================ */
 html[data-outlook-relook-scheme] [role="dialog"],
 html[data-outlook-relook-scheme] [role="alertdialog"] {
   background-color: var(--or-bg-primary) !important;
   border: 1px solid var(--or-border) !important;
+  border-radius: 2px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
+}
+
+html[data-outlook-relook-scheme] [role="menu"],
+html[data-outlook-relook-scheme] [role="listbox"][aria-expanded] {
+  border-radius: 2px !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
+}
+
+html[data-outlook-relook-scheme] [role="menuitem"] {
+  border-radius: 0 !important;
+}
+
+html[data-outlook-relook-scheme] [role="menuitem"]:hover {
+  background-color: var(--or-bg-hover) !important;
 }
 
 /* ============================================================
-   SCROLLBARS — thin, monochrome
+   SCROLLBARS — Thin, monochrome
    ============================================================ */
 html[data-outlook-relook-scheme] ::-webkit-scrollbar {
-  width: 4px !important;
+  width: 6px !important;
-  height: 4px !important;
+  height: 6px !important;
 }
 
 html[data-outlook-relook-scheme] ::-webkit-scrollbar-track {
@@ -231,5 +289,10 @@ html[data-outlook-relook-scheme] ::-webkit-scrollbar-track {
 }
 
 html[data-outlook-relook-scheme] ::-webkit-scrollbar-thumb {
+  background: var(--or-border) !important;
+  border-radius: 3px !important;
+}
+
+html[data-outlook-relook-scheme] ::-webkit-scrollbar-thumb:hover {
   background: var(--or-text-tertiary) !important;
 }