1 files changed, 23 insertions, 6 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index da29027..2d1eb65 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -57,6 +57,19 @@ body {
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
+/* ── Icons ────────────────────────────────────────────────────────────────── */
+
+/* Sized in em and stroked in currentColor, so an icon inherits the size and
+   colour of whatever it sits next to and needs no rule of its own. Only the
+   places that want a fixed size say so below. */
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.14em;
+  flex-shrink: 0;
+}
+.icon.flip { transform: rotate(180deg); }
+
 /* ── Navigation ───────────────────────────────────────────────────────────── */
 
 .nav {
@@ -166,9 +179,10 @@ a:hover { text-decoration: underline; }
 .user-menu-item:hover { background: var(--bg-raised); }
 .user-menu-logout { color: var(--error); }
 
-.umi-icon { width: 18px; text-align: center; font-size: 0.95em; flex-shrink: 0; }
-.umi-arrow { margin-left: auto; font-size: 0.7em; color: var(--text-dim); }
-.umi-check { margin-left: auto; color: var(--accent); font-size: 0.85em; }
+.umi-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-secondary); }
+.umi-arrow { margin-left: auto; width: 13px; height: 13px; color: var(--text-dim); }
+.umi-check { margin-left: auto; width: 14px; height: 14px; color: var(--accent); }
+.user-menu-caret { width: 13px; height: 13px; color: var(--nav-text); opacity: 0.8; }
 .user-menu-sub { padding-left: 32px; }
 
 .nav-btn {
@@ -1250,9 +1264,11 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .nav-notif {
   position: relative;
-  color: var(--text);
+  /* --text is the page's text colour and the nav is dark: the emoji bell was
+     coloured so it showed anyway, a stroked one would have been invisible. */
+  color: var(--nav-text);
   text-decoration: none;
-  font-size: 1.1rem;
+  font-size: 1.25rem;
   margin-right: 4px;
 }
 .notif-badge {
@@ -1360,12 +1376,13 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   transition: border-color 0.12s, background 0.12s;
 }
 .option-card:hover { border-color: var(--accent); background: var(--bg-base); }
+.option-card.selected .option-icon { color: var(--accent); }
 .option-card.selected {
   border-color: var(--accent);
   background: color-mix(in srgb, var(--accent) 8%, var(--bg-base));
 }
 
-.option-icon { font-size: 1.5em; margin-bottom: 2px; }
+.option-icon { width: 26px; height: 26px; margin-bottom: 2px; color: var(--text-secondary); }
 .option-title { font-weight: 600; font-size: 0.9em; color: var(--text); }
 .option-desc { font-size: 0.75em; color: var(--text-dim); line-height: 1.3; }