stage 4/5: wire brand assets + global #04081a dark background

- Replace cream #fffaf0 with #04081a across all gradio container CSS
- Dark theme tab bar + tab buttons (gold/violet on dark)
- Sidebar: wire Ui Totem.png logo image, flex column layout, quote card to bottom
- Hero: wire Hero.png as full-cover background image, z-index layering for text/gauge
- Add hero-star, quote-star accent elements
- Quote card: italic serif, auto margin push to bottom

app.py

@@ -65,19 +65,28 @@ CSS = """
 .gradio-container {
   max-width: none !important;
   padding: 0 !important;
-  background: #fffaf0 !important;
-  color: var(--studio-ink) !important;
+  background: #04081a !important;
+  color: #f6f1e8 !important;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
 }
 
+html, body {
+  background: #04081a !important;
+}
+
+.gradio-container > .tabs,
+.gradio-container > div {
+  background: #04081a !important;
+}
+
 footer { display: none !important; }
 
 .gradio-container [role="tablist"] {
   position: sticky !important;
   top: 0 !important;
   z-index: 60 !important;
-  background: #fffaf0 !important;
-  border-bottom: 1px solid var(--studio-line);
+  background: #04081a !important;
+  border-bottom: 1px solid rgba(242, 193, 78, 0.22) !important;
   padding: 8px 10px;
   gap: 8px;
   overflow: visible !important;
@@ -86,18 +95,18 @@ footer { display: none !important; }
 .gradio-container [role="tab"] {
   opacity: 1 !important;
   visibility: visible !important;
-  color: var(--studio-ink) !important;
-  background: #f4ecd6 !important;
-  border: 1px solid var(--studio-line) !important;
+  color: #aeb7cc !important;
+  background: rgba(7, 18, 45, 0.6) !important;
+  border: 1px solid rgba(242, 193, 78, 0.22) !important;
   border-radius: 8px !important;
   padding: 8px 14px !important;
   font-weight: 700 !important;
 }
 
 .gradio-container [role="tab"][aria-selected="true"] {
-  background: linear-gradient(90deg, #f5c93c, #e5a721) !important;
-  color: white !important;
-  border-color: #d99e1b !important;
+  background: linear-gradient(90deg, rgba(242, 193, 78, 0.25), rgba(138, 77, 255, 0.25)) !important;
+  color: #f2c14e !important;
+  border-color: rgba(242, 193, 78, 0.55) !important;
 }
 
 .nav-item[role="button"] {
@@ -305,6 +314,8 @@ TOTEM_CSS = """
   border-right: 1px solid rgba(242, 193, 78, 0.22);
   background: linear-gradient(180deg, #050d24 0%, #07122d 65%, #091733 100%);
   padding: 20px 18px;
+  display: flex;
+  flex-direction: column;
 }
 
 .totem-main {
@@ -679,24 +690,53 @@ TOTEM_CSS = """
 }
 
 .totem-shell .totem-brand {
-  font-family: var(--font-display);
-  font-size: 34px;
-  color: var(--totem-gold);
-  line-height: 1.1;
   margin-bottom: var(--space-6);
+  line-height: 1.1;
 }
 
-.totem-shell .totem-brand small {
+.totem-shell .totem-brand-img {
+  width: 100%;
+  max-width: 220px;
+  height: auto;
   display: block;
-  margin-top: var(--space-2);
-  font-family: var(--font-ui);
-  font-size: 12px;
-  letter-spacing: 1.5px;
-  color: rgba(174, 183, 204, 0.9);
+  border-radius: 10px;
+}
+
+.totem-hero-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: inherit;
+  z-index: 0;
+}
+
+.totem-hero-title,
+.totem-hero-subtitle,
+.totem-signal-wrap {
+  position: relative;
+  z-index: 1;
+}
+
+.totem-hero-star {
+  font-size: 22px;
+  vertical-align: super;
+  margin-left: 4px;
+  color: var(--totem-gold);
+}
+
+.totem-quote-star {
+  display: block;
+  font-size: 16px;
+  color: var(--totem-gold);
+  margin-bottom: var(--space-2);
+  opacity: 0.8;
 }
 
 .totem-shell .totem-quote-card {
-  margin-top: calc(var(--space-8) + var(--space-8));
+  margin-top: auto;
   padding: var(--space-5);
   border-radius: var(--radius-card);
   border: 1px solid rgba(242, 193, 78, 0.28);
@@ -704,8 +744,9 @@ TOTEM_CSS = """
     linear-gradient(180deg, rgba(16, 26, 58, 0.95), rgba(11, 23, 51, 0.96));
   color: rgba(246, 241, 232, 0.95);
   font-family: var(--font-display);
-  font-size: 24px;
-  line-height: 1.25;
+  font-size: 20px;
+  line-height: 1.35;
+  font-style: italic;
 }
 
 .totem-shell .totem-nav-item {
@@ -1199,9 +1240,14 @@ def render_sidebar(active: str = "Home") -> str:
 
     return f"""
     <aside class="totem-sidebar">
-      <div class="totem-brand">TOTEM Studio<small>Story intelligence OS</small></div>
+      <div class="totem-brand">
+        <img src="/file=assets/Brand/Ui Totem.png" alt="TOTEM Studio" class="totem-brand-img" />
+      </div>
       {''.join(items)}
-      <div class="totem-quote-card">Story intelligence turns inspiration into impact.</div>
+      <div class="totem-quote-card">
+        <span class="totem-quote-star">✦</span>
+        Story intelligence turns inspiration into impact.
+      </div>
     </aside>
     """
 
@@ -1255,7 +1301,8 @@ def render_hero(state: dict) -> str:
     signal = int(state.get("totem_signal", 0) or 0)
     return f"""
     <section class="totem-hero">
-      <h2 class="totem-hero-title">TOTEM Studio</h2>
+      <img src="/file=assets/Brand/Hero.png" alt="" class="totem-hero-bg" aria-hidden="true" />
+      <h2 class="totem-hero-title">TOTEM Studio<span class="totem-hero-star">✦</span></h2>
       <p class="totem-hero-subtitle">Data-driven insight for stronger stories.</p>
       {render_signal_gauge(signal)}
     </section>