diff --git a/web/src/App.tsx b/web/src/App.tsx
index 1195518..33699ab 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -193,13 +193,23 @@ function App() {
       }}>
         <div className={`app-runtime${hasCriticalEvents ? ' has-critical-alert' : ''}`}>
           {hasCriticalEvents && (
-            <a className="critical-alert-banner" href="/settings">
-              <span aria-hidden="true">⚠️</span>
-              <span>
-                System alert: {recentCriticalEvents.length} critical issues detected — go to Settings › Admin Panel
-              </span>
-              <span aria-hidden="true">⚠️</span>
-            </a>
+            <div className="critical-alert-banner-wrap" role="alert">
+              <div className="critical-alert-banner-inner">
+                <span aria-hidden="true" className="critical-alert-banner-icon">
+                  ⚠
+                </span>
+                <span className="critical-alert-banner-text">
+                  System alert: {recentCriticalEvents.length} critical{' '}
+                  {recentCriticalEvents.length === 1 ? 'issue' : 'issues'} detected.
+                </span>
+                <a
+                  className="critical-alert-banner-cta"
+                  href="/settings?section=Admin%20Panel"
+                >
+                  Go to Admin Panel
+                </a>
+              </div>
+            </div>
           )}
           <AppShell />
         </div>
diff --git a/web/src/layout-fixes.css b/web/src/layout-fixes.css
index 8e27afb..99c5e4e 100644
--- a/web/src/layout-fixes.css
+++ b/web/src/layout-fixes.css
@@ -234,3 +234,157 @@
   gap: 12px;
 }
 .saved-setups-header > div { flex: 1 1 280px; min-width: 0; }
+
+/* ============================================================================
+ * 22. Critical alert banner — refactored with structured inner content
+ *
+ * The original banner was a single anchor with three inline spans, with no
+ * width container, no wrapping, and a loud high-contrast red. The new
+ * structure has a wrapper + inner content row that wraps cleanly.
+ * ============================================================================ */
+.critical-alert-banner-wrap {
+  width: 100%;
+  max-width: 100%;
+  background: color-mix(in oklab, var(--card) 96%, var(--destructive));
+  border-bottom: 1px solid color-mix(in oklab, var(--destructive) 18%, var(--border));
+  color: var(--foreground);
+}
+
+.critical-alert-banner-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px 12px;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 9px 18px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.critical-alert-banner-icon {
+  flex-shrink: 0;
+  color: var(--destructive);
+  font-size: 14px;
+}
+
+.critical-alert-banner-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: center;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.critical-alert-banner-cta {
+  flex-shrink: 0;
+  color: var(--destructive);
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  white-space: nowrap;
+}
+.critical-alert-banner-cta:hover {
+  text-decoration-thickness: 2px;
+}
+
+@media (max-width: 560px) {
+  .critical-alert-banner-inner {
+    padding: 8px 12px;
+    font-size: 12px;
+    gap: 4px 10px;
+  }
+  .critical-alert-banner-text {
+    text-align: left;
+    flex: 1 1 100%;
+  }
+}
+
+/* ============================================================================
+ * 23. Sidebar brand / logo block — fix clipped icon and "ByteLyst / Trading OS"
+ *
+ * Two CSS rules competed (a 44x44 grid block at line 349 and a 56px-tall flex
+ * block at line 1546). The grid one made the brand text invisible; the flex
+ * one was too short and lacked flex layout. This sets up a proper:
+ *   icon (shrink-0) + text (min-w-0, two lines) inside a min-height container.
+ * ============================================================================ */
+.trading-sidebar-logo {
+  /* Layout */
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  gap: 12px !important;
+  width: auto !important;
+  min-height: 60px !important;
+  height: auto !important;
+  margin: 4px 4px 22px !important;
+  padding: 10px 14px !important;
+  /* Visuals */
+  border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--border)) !important;
+  border-radius: 14px !important;
+  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 62%, var(--bl-success))) !important;
+  box-shadow: 0 12px 30px color-mix(in oklab, var(--accent) 26%, transparent) !important;
+  color: var(--primary-foreground);
+  /* Don't clip the inner text/icon */
+  overflow: visible !important;
+}
+
+/* Lucide chart icon inside the logo block */
+.trading-sidebar-logo > svg {
+  flex-shrink: 0;
+  color: var(--primary-foreground);
+  width: 22px;
+  height: 22px;
+}
+
+.trading-sidebar-brand {
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center;
+  gap: 1px !important;
+  min-width: 0;
+  flex: 1 1 auto;
+  line-height: 1.2;
+}
+
+.trading-sidebar-brand strong,
+.trading-sidebar-brand span {
+  display: block;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.trading-sidebar-brand strong {
+  color: var(--primary-foreground) !important;
+  font-size: 14px !important;
+  font-weight: 800 !important;
+  line-height: 1.2 !important;
+}
+
+.trading-sidebar-brand span {
+  color: color-mix(in oklab, var(--primary-foreground) 80%, transparent) !important;
+  font-size: 11px !important;
+  font-weight: 600 !important;
+  line-height: 1.3 !important;
+  letter-spacing: 0.02em;
+}
+
+/* In the collapsed/icon-only sidebar (under 1280px tablet view), hide brand
+ * text but keep the icon centered. Existing stylesheet already does this for
+ * .trading-sidebar-brand { display: none } — make sure the logo block recenters. */
+@media (max-width: 1279px) {
+  .trading-sidebar-logo {
+    justify-content: center !important;
+    padding: 8px !important;
+    min-height: 52px !important;
+  }
+}
+
+/* In the bottom-nav mobile state (≤560px), the sidebar becomes a horizontal
+ * bar — the existing CSS hides the logo. Don't add anything that fights it. */