stage 4/5/6: gauge gradient arc + sidebar sizing + nav hover states

- Gauge: SVG gradient arc violet>cyan>emerald>gold per manual spec
- Gauge: outer ring, inner radar rings, star glow, state classes
- Sidebar: gradient bg per manual (#07122D), flex layout, logo 190px max
- Nav items: 15px font, 14px radius, hover states, proper margin
- Quote card: 150px min-height, 16px radius, auto-bottom push

app.py

@@ -316,13 +316,26 @@ TOTEM_CSS = """
   width: 256px;
   flex: 0 0 256px;
   min-height: 100%;
-  border-right: 1px solid rgba(242, 193, 78, 0.22);
-  background: linear-gradient(180deg, #050d24 0%, #07122d 65%, #091733 100%);
-  padding: 20px 18px;
+  border-right: 1px solid rgba(246, 241, 232, 0.10);
+  background: linear-gradient(180deg, #07122D 0%, #081633 50%, #07122D 100%);
+  padding: 28px 0 24px 0;
   display: flex;
   flex-direction: column;
 }
 
+.totem-shell .totem-brand {
+  padding: 0 24px 0 24px;
+  margin-bottom: 28px;
+}
+
+.totem-shell .totem-brand-img {
+  width: 100%;
+  max-width: 190px;
+  height: auto;
+  display: block;
+  border-radius: 8px;
+}
+
 .totem-main {
   flex: 1;
   min-width: 0;
@@ -422,27 +435,35 @@ TOTEM_CSS = """
 
 .signal-track {
   fill: none;
-  stroke: rgba(174, 183, 204, 0.28);
-  stroke-width: 8;
+  stroke: rgba(246, 241, 232, 0.10);
+  stroke-width: 7;
 }
 
 .signal-progress {
   fill: none;
-  stroke: var(--totem-gold);
-  stroke-width: 8;
+  stroke: url(#gaugeGradient);
+  stroke-width: 7;
   stroke-linecap: round;
   transform: rotate(-90deg);
   transform-origin: 80px 80px;
+  filter: drop-shadow(0 0 6px rgba(138, 77, 255, 0.6));
 }
 
-.signal-core-ring {
-  fill: rgba(7, 18, 45, 0.7);
-  stroke: rgba(57, 201, 255, 0.55);
-  stroke-width: 1.5;
+.signal-outer-ring {
+  fill: none;
+  stroke: rgba(242, 193, 78, 0.28);
+  stroke-width: 1;
+}
+
+.signal-inner-ring {
+  fill: none;
+  stroke: rgba(57, 201, 255, 0.18);
+  stroke-width: 1;
 }
 
 .signal-star {
   fill: var(--totem-gold);
+  filter: drop-shadow(0 0 8px rgba(242, 193, 78, 0.7));
 }
 
 .totem-signal-label {
@@ -751,34 +772,47 @@ TOTEM_CSS = """
 }
 
 .totem-shell .totem-quote-card {
-  margin-top: auto;
-  padding: var(--space-5);
-  border-radius: var(--radius-card);
-  border: 1px solid rgba(242, 193, 78, 0.28);
-  background: radial-gradient(circle at 82% 70%, rgba(138, 77, 255, 0.22), transparent 45%),
-    linear-gradient(180deg, rgba(16, 26, 58, 0.95), rgba(11, 23, 51, 0.96));
+  margin: auto 20px 0 20px;
+  padding: 20px;
+  min-height: 150px;
+  border-radius: 16px;
+  border: 1px solid rgba(242, 193, 78, 0.35);
+  background: radial-gradient(circle at 82% 70%, rgba(138, 77, 255, 0.28), transparent 50%),
+    linear-gradient(180deg, rgba(13, 19, 48, 0.97), rgba(8, 14, 38, 0.98));
   color: rgba(246, 241, 232, 0.95);
   font-family: var(--font-display);
-  font-size: 20px;
-  line-height: 1.35;
+  font-size: 18px;
+  line-height: 1.4;
   font-style: italic;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
 .totem-shell .totem-nav-item {
   height: 48px;
   display: flex;
   align-items: center;
-  padding: 0 var(--space-4);
-  border-radius: 12px;
+  padding: 0 20px;
+  border-radius: 14px;
   color: rgba(246, 241, 232, 0.88);
-  margin-bottom: var(--space-2);
+  margin: 0 20px 4px 20px;
   border: 1px solid transparent;
   font-family: var(--font-ui);
+  font-size: 15px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.totem-shell .totem-nav-item:hover {
+  background: rgba(246, 241, 232, 0.06);
+  border-color: rgba(246, 241, 232, 0.12);
 }
 
 .totem-shell .totem-nav-item.active {
-  border-color: rgba(242, 193, 78, 0.45);
-  background: linear-gradient(90deg, rgba(242, 193, 78, 0.2), rgba(138, 77, 255, 0.2));
+  border-color: rgba(242, 193, 78, 0.65);
+  background: linear-gradient(90deg, rgba(242, 193, 78, 0.20), rgba(138, 77, 255, 0.20));
+  box-shadow: 0 0 24px rgba(242, 193, 78, 0.25);
 }
 
 .totem-shell .totem-muted {
@@ -1292,19 +1326,42 @@ def render_signal_gauge(value: int) -> str:
     circumference = 427.26
     progress = clamped / 100.0
     dash_offset = circumference * (1 - progress)
+    # Color state based on signal strength per manual spec
+    if clamped < 25:
+        state_class = "gauge-state-low"
+    elif clamped < 50:
+        state_class = "gauge-state-weak"
+    elif clamped < 70:
+        state_class = "gauge-state-developing"
+    elif clamped < 85:
+        state_class = "gauge-state-strong"
+    else:
+        state_class = "gauge-state-excellent"
     return f"""
-    <div class="totem-signal-wrap">
+    <div class="totem-signal-wrap {state_class}">
       <svg class="totem-signal" viewBox="0 0 160 160" role="img" aria-label="TOTEM Signal {clamped} percent">
+        <defs>
+          <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#8A4DFF"/>
+            <stop offset="40%" stop-color="#39C9FF"/>
+            <stop offset="75%" stop-color="#22B573"/>
+            <stop offset="100%" stop-color="#F2C14E"/>
+          </linearGradient>
+        </defs>
+        <!-- Outer decorative ring -->
+        <circle class="signal-outer-ring" cx="80" cy="80" r="76"></circle>
+        <!-- Track -->
         <circle class="signal-track" cx="80" cy="80" r="68"></circle>
+        <!-- Progress arc -->
         <circle
           class="signal-progress"
-          cx="80"
-          cy="80"
-          r="68"
+          cx="80" cy="80" r="68"
           style="stroke-dasharray:{circumference:.2f};stroke-dashoffset:{dash_offset:.2f};"
         ></circle>
-        <circle class="signal-core-ring" cx="80" cy="80" r="34"></circle>
-        <circle class="signal-core-ring" cx="80" cy="80" r="22"></circle>
+        <!-- Inner radar rings -->
+        <circle class="signal-inner-ring" cx="80" cy="80" r="52"></circle>
+        <circle class="signal-inner-ring" cx="80" cy="80" r="40"></circle>
+        <!-- Center star compass -->
         <path class="signal-star" d="M80 58 L84.7 73.5 L100.9 73.5 L87.8 82.9 L92.6 98.4 L80 89.1 L67.4 98.4 L72.2 82.9 L59.1 73.5 L75.3 73.5 Z"></path>
       </svg>
       <div class="totem-signal-label">TOTEM Signal {clamped}%</div>