feat(ui): polish gradio archive workbench

src/ui/layout.py

@@ -21,31 +21,46 @@ from src.utils.zero_gpu import zero_gpu
 
 CHAT_EMPTY_MESSAGE = "Wake an object first."
 
+ARCHIVE_STATUS_EMPTY = """
+<div class="archive-status asleep">
+  <div>
+    <span class="archive-label">Archive Status <span class="lang-zh">档案状态</span></span>
+    <strong>Object asleep</strong>
+    <p>Drop in a photo or use a sample object to open a case file.</p>
+    <p class="lang-zh block">上传照片或使用示例物品来开启档案。</p>
+  </div>
+  <div class="status-pills">
+    <span>Case pending</span>
+    <span>Tiny models ready</span>
+  </div>
+</div>
+"""
+
 OBJECT_FILE_EMPTY = """
 <div class="archive-empty">
   <span class="archive-label">Object File <span class="lang-zh">物品档案</span></span>
-  <h3>No object awake yet.</h3>
-  <p>Upload or describe an everyday object to open its secret archive.</p>
-  <p class="lang-zh block">上传或描述一个日常物品后打开秘密档案。</p>
+  <h3>No case opened yet.</h3>
+  <p>The shelf is quiet. Wake an everyday object to see its file.</p>
+  <p class="lang-zh block">档案架仍然安静。唤醒一个日常物品后查看档案。</p>
 </div>
 """
 
 DIARY_EMPTY = """
 ### Secret Diary
 
-Wake an object to open its diary.
+Wake an object to open its private field notes.
 
 <div class="lang-zh block zh-helper">
-唤醒物品后阅读它的日记。
+唤醒物品后阅读它的秘密观察记录。
 </div>
 """
 
 SHARE_CARD_EMPTY = """
 <div class="objectverse-placeholder">
   <span>Share Card <span class="lang-zh">分享卡片</span></span>
-  <strong>Waiting for an object file.</strong>
-  <p>A screenshot-friendly archive card will appear here.</p>
-  <p class="lang-zh block">可截图分享的档案卡片会显示在这里。</p>
+  <strong>Evidence slot empty.</strong>
+  <p>A screenshot-friendly archive card appears after the object wakes.</p>
+  <p class="lang-zh block">物品醒来后，这里会出现可截图分享的档案卡片。</p>
 </div>
 """
 
@@ -218,6 +233,7 @@ GenerationUiResult = tuple[
     str,
     dict[str, Any] | None,
     list[dict[str, str]],
+    str,
 ]
 
 
@@ -249,17 +265,17 @@ def build_app() -> gr.Blocks:
         link_text_color_active_dark="#F5D061",
         link_text_color_visited="#D4AF37",
         link_text_color_visited_dark="#D4AF37",
-        block_background_fill="transparent",
-        block_background_fill_dark="transparent",
-        block_border_width="0px",
+        block_background_fill="rgba(30, 28, 25, 0.72)",
+        block_background_fill_dark="rgba(30, 28, 25, 0.72)",
+        block_border_width="1px",
         block_info_text_color="#A89B84",
         block_info_text_color_dark="#A89B84",
         block_label_text_color="#A89B84",
         block_label_text_color_dark="#A89B84",
         block_title_text_color="#E6E1D3",
         block_title_text_color_dark="#E6E1D3",
-        panel_background_fill="transparent",
-        panel_background_fill_dark="transparent",
+        panel_background_fill="rgba(30, 28, 25, 0.88)",
+        panel_background_fill_dark="rgba(30, 28, 25, 0.88)",
         accordion_text_color="#E6E1D3",
         accordion_text_color_dark="#E6E1D3",
         table_text_color="#E6E1D3",
@@ -310,12 +326,17 @@ def build_app() -> gr.Blocks:
                 f"""
                 <header id="objectverse-hero">
                   <div class="hero-copy">
-                    <span class="archive-label">Small Model Object Archive</span>
+                    <span class="archive-label">Gradio Small Model Lab</span>
                     <h1>{APP_TITLE}</h1>
                     <p class="hero-kicker">Every object has a secret life.</p>
-                    <p class="hero-feature">Build Small Hackathon entry: upload an object, wake its secret persona, read the diary, chat, and share the evidence. Tiny models, weird lives.</p>
+                    <p class="hero-feature">Upload a photo, wake a tiny object persona, read its diary, chat, and export the evidence.</p>
                     <p class="hero-kicker lang-zh block">万物日记：每个物品都有秘密人生。</p>
-                    <p class="hero-feature lang-zh block">Build Small 黑客松作品：上传物品，唤醒隐藏人格，读日记、追问它，再分享证据。小模型，怪人生。</p>
+                    <p class="hero-feature lang-zh block">上传照片，唤醒小模型生成的物品人格，阅读日记、对话并保存证据。</p>
+                    <div class="hero-badges" aria-label="Project badges">
+                      <span>Gradio Blocks</span>
+                      <span>Mock-safe MVP</span>
+                      <span>&lt; 32B params</span>
+                    </div>
                   </div>
                   <div class="top-controls" aria-label="Display controls">
                     <span>Language</span>
@@ -334,6 +355,7 @@ def build_app() -> gr.Blocks:
             zero_gpu_probe_output = gr.JSON(visible=False)
             vision_runtime_probe_button = gr.Button(visible=False)
             vision_runtime_probe_output = gr.JSON(visible=False)
+            archive_status = gr.HTML(value=ARCHIVE_STATUS_EMPTY, elem_id="archive-status", padding=False)
 
             with gr.Row(elem_id="intake", elem_classes=["content-section", "top-grid"]):
                 with gr.Column(scale=7, elem_classes=["archive-panel", "intake-panel"]):
@@ -346,7 +368,6 @@ def build_app() -> gr.Blocks:
                         placeholder="Drop an object photo here or click to upload.",
                         elem_id="object-upload",
                     )
-                    gr.HTML("""<div class="or-divider"><span>OR</span></div>""", padding=False)
                     description_input = gr.Textbox(
                         label=copy.DESCRIPTION_LABEL,
                         placeholder=copy.DESCRIPTION_PLACEHOLDER,
@@ -364,7 +385,7 @@ def build_app() -> gr.Blocks:
                         elem_id="personality-mode",
                         elem_classes=["mode-switch"],
                     )
-                    generate_button = gr.Button("Wake the Object", variant="primary", elem_id="wake-button")
+                    generate_button = gr.Button(copy.GENERATE_LABEL, variant="primary", elem_id="wake-button")
 
                 with gr.Column(scale=4, elem_classes=["archive-panel", "examples-panel"]):
                     gr.HTML(
@@ -374,6 +395,7 @@ def build_app() -> gr.Blocks:
                             <strong>Example Objects</strong>
                             <span class="lang-zh block">示例物品</span>
                           </div>
+                          <span class="example-badge">6 filed samples</span>
                         </div>
                         """,
                         padding=False,
@@ -390,7 +412,7 @@ def build_app() -> gr.Blocks:
 
             with gr.Row(elem_id="results", elem_classes=["content-section", "results-grid"]):
                 with gr.Column(scale=5, elem_classes=["archive-panel", "file-panel"]):
-                    gr.HTML(_panel_header("02", "Object File", "Structured understanding and persona.", "物品档案"), padding=False)
+                    gr.HTML(_panel_header("02", "Object File", "Structured understanding, persona, and evidence tags.", "物品档案"), padding=False)
                     object_file_summary = gr.HTML(value=OBJECT_FILE_EMPTY, elem_id="object-file-summary", padding=False)
 
                 with gr.Column(scale=6, elem_classes=["archive-panel", "diary-panel"]):
@@ -403,7 +425,7 @@ def build_app() -> gr.Blocks:
 
             with gr.Row(elem_id="share-chat", elem_classes=["content-section", "split-section"]):
                 with gr.Column(scale=5, elem_classes=["archive-panel", "share-panel"], elem_id="share-panel"):
-                    gr.HTML(_panel_header("04", "Share Card", "Fixed-width card for screenshots.", "分享卡片"), padding=False)
+                    gr.HTML(_panel_header("04", "Share Card", "Screenshot-friendly field evidence.", "分享卡片"), padding=False)
                     share_card = gr.HTML(value=SHARE_CARD_EMPTY, label=copy.SHARE_CARD_LABEL, padding=False)
 
                 with gr.Column(scale=4, elem_classes=["archive-panel", "chat-panel"], elem_id="chat-panel"):
@@ -437,6 +459,7 @@ def build_app() -> gr.Blocks:
             trace_path,
             result_state,
             chatbot,
+            archive_status,
         ]
 
         generate_button.click(
@@ -532,6 +555,7 @@ def _format_generation_result(result: GenerationResult) -> GenerationUiResult:
         result.trace_path,
         result.model_dump(mode="json"),
         _awake_chat_history(result),
+        _render_archive_status(result),
     )
 
 
@@ -541,11 +565,20 @@ def _render_object_file(result: GenerationResult) -> str:
     features = "".join(f"<li>{escape(feature)}</li>" for feature in obj.visible_features)
     tags = "".join(f"<span>{escape(tag)}</span>" for tag in persona.tags)
     confidence = f"{obj.confidence:.0%}"
+    case_id = _case_id(result)
+    runtime_badge = "mock-safe" if "mock" in result.trace.model_runtime["text"] else "llama.cpp"
+    evidence_tag = f"{result.trace.mode.lower()} witness"
     return f"""
     <article class="object-file-card">
+      <div class="case-strip">
+        <span>Case ID {escape(case_id)}</span>
+        <span>Awake</span>
+        <span>{escape(runtime_badge)}</span>
+      </div>
       <div class="file-meta">
         <span>Confidence {escape(confidence)}</span>
         <span>{escape(result.trace.mode)}</span>
+        <span>Evidence: {escape(evidence_tag)}</span>
       </div>
       <h3>{escape(persona.character_name)}</h3>
       <p class="object-name">{escape(obj.name)} / {escape(persona.object_name)}</p>
@@ -573,6 +606,27 @@ def _render_object_file(result: GenerationResult) -> str:
     """
 
 
+def _render_archive_status(result: GenerationResult) -> str:
+    obj = result.object_understanding.object
+    persona = result.persona.persona
+    case_id = _case_id(result)
+    return f"""
+    <div class="archive-status awake">
+      <div>
+        <span class="archive-label">Archive Status <span class="lang-zh">档案状态</span></span>
+        <strong>{escape(persona.character_name)} is awake</strong>
+        <p>Case {escape(case_id)} opened for {escape(obj.name)} with {obj.confidence:.0%} object confidence.</p>
+        <p class="lang-zh block">档案 {escape(case_id)} 已开启，物品识别置信度 {obj.confidence:.0%}。</p>
+      </div>
+      <div class="status-pills">
+        <span>Object awake</span>
+        <span>Diary unlocked</span>
+        <span>{escape(result.trace.mode)} mode</span>
+      </div>
+    </div>
+    """
+
+
 def _render_trace_summary(result: GenerationResult) -> str:
     return f"""
     <div class="trace-card">
@@ -615,9 +669,27 @@ def _generation_error(exc: Exception, description: str, mode: str) -> Generation
         "",
         None,
         [{"role": "assistant", "content": f"Generation failed: {error_type}"}],
+        f"""
+        <div class="archive-status error">
+          <div>
+            <span class="archive-label">Archive Status <span class="lang-zh">档案状态</span></span>
+            <strong>Case jammed</strong>
+            <p>{escape(error_type)}: {escape(error_message)}</p>
+            <p class="lang-zh block">生成失败，请换一个描述或示例物品再试。</p>
+          </div>
+          <div class="status-pills">
+            <span>Needs retry</span>
+            <span>{escape(mode)}</span>
+          </div>
+        </div>
+        """,
     )
 
 
+def _case_id(result: GenerationResult) -> str:
+    return result.trace.trace_id.replace("_", "-").upper()
+
+
 def _empty_chat_history() -> list[dict[str, str]]:
     return [{"role": "assistant", "content": CHAT_EMPTY_MESSAGE}]
 

src/ui/styles.css

@@ -1,21 +1,23 @@
 /*
- * Objectverse Diary - compact archive UI.
+ * Objectverse Diary - Gradio archive workbench UI.
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');
 
 :root {
   --ov-bg: #161513;
-  --ov-bg-panel: rgba(30, 28, 25, 0.72);
+  --ov-bg-panel: rgba(30, 28, 25, 0.82);
+  --ov-bg-panel-solid: #1f1d1a;
   --ov-bg-input: #1b1a18;
-  --ov-border-faint: rgba(212, 175, 55, 0.15);
+  --ov-border-faint: rgba(212, 175, 55, 0.16);
   --ov-border-light: rgba(212, 175, 55, 0.34);
   --ov-text-main: #e6e1d3;
   --ov-text-soft: #d6d1c4;
-  --ov-text-muted: #8b8678;
+  --ov-text-muted: #9d927d;
   --ov-text-dark: #2a261f;
   --ov-gold: #d4af37;
   --ov-gold-bright: #f5d061;
+  --ov-red: #d76b55;
   --font-typewriter: 'Courier Prime', 'Space Mono', 'Courier New', monospace;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-serif: Georgia, serif;
@@ -38,20 +40,20 @@ html[data-ov-lang="zh"] .lang-zh.block {
 html,
 body,
 gradio-app {
-  background: var(--ov-bg);
-  color: var(--ov-text-main);
   min-height: 100%;
   margin: 0;
   overflow-x: hidden;
+  background: var(--ov-bg);
+  color: var(--ov-text-main);
 }
 
 body::before {
   content: "";
   position: fixed;
   inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
-  pointer-events: none;
   z-index: 9999;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
 }
 
 .gradio-container {
@@ -79,8 +81,8 @@ footer,
 #app-container {
   max-width: 1180px;
   margin: 0 auto !important;
-  padding: 36px 24px 56px;
-  gap: 24px !important;
+  padding: 34px 24px 56px;
+  gap: 18px !important;
 }
 
 #objectverse-hero {
@@ -88,7 +90,7 @@ footer,
   justify-content: space-between;
   align-items: flex-start;
   gap: 24px;
-  padding-bottom: 22px;
+  padding: 22px 0 18px;
   border-bottom: 1px solid var(--ov-border-faint);
 }
 
@@ -96,8 +98,8 @@ footer,
   margin: 6px 0 8px;
   color: var(--ov-text-main) !important;
   font-family: var(--font-typewriter);
-  font-size: clamp(32px, 5vw, 48px);
-  line-height: 1.05;
+  font-size: 42px;
+  line-height: 1.08;
   letter-spacing: 0;
 }
 
@@ -105,16 +107,52 @@ footer,
   margin: 0;
   color: var(--ov-gold) !important;
   font-family: var(--font-serif);
-  font-size: 18px;
+  font-size: 17px;
   font-style: italic;
 }
 
 .hero-feature {
-  max-width: 680px;
-  margin: 12px 0 0;
+  max-width: 660px;
+  margin: 10px 0 0;
   color: var(--ov-text-soft) !important;
   font-size: 15px;
-  line-height: 1.65;
+  line-height: 1.6;
+}
+
+.hero-badges,
+.status-pills,
+.case-strip,
+.file-meta,
+.file-tags,
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.hero-badges {
+  margin-top: 14px;
+}
+
+.hero-badges span,
+.status-pills span,
+.case-strip span,
+.file-meta span,
+.file-tags span,
+.card-tags span,
+.example-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 3px 8px;
+  border: 1px solid var(--ov-border-light);
+  border-radius: 999px;
+  color: var(--ov-gold-bright) !important;
+  background: rgba(212, 175, 55, 0.06);
+  font-family: var(--font-typewriter);
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: normal;
 }
 
 .archive-label {
@@ -139,17 +177,18 @@ footer,
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-width: 92px;
-  border: 1px solid var(--ov-border-light);
-  border-radius: 4px;
   overflow: hidden;
+  border: 1px solid var(--ov-border-light);
+  border-radius: 6px;
+  background: rgba(22, 21, 19, 0.65);
 }
 
 .segmented-control button {
   min-height: 34px;
   padding: 0 12px;
-  background: transparent;
   border: 0;
   border-right: 1px solid var(--ov-border-faint);
+  background: transparent;
   color: var(--ov-text-muted);
   font-family: var(--font-typewriter);
   font-size: 12px;
@@ -163,33 +202,73 @@ footer,
 .segmented-control button:hover,
 .segmented-control button:focus,
 .segmented-control button.active {
-  color: var(--ov-gold);
-  background: rgba(212, 175, 55, 0.08);
+  color: var(--ov-text-dark);
+  background: var(--ov-gold);
   outline: none;
 }
 
+.archive-status {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 18px;
+  padding: 14px 16px;
+  border: 1px solid var(--ov-border-faint);
+  border-left: 4px solid var(--ov-border-light);
+  border-radius: 8px;
+  background: rgba(30, 28, 25, 0.72);
+}
+
+.archive-status strong {
+  display: block;
+  margin: 4px 0;
+  color: var(--ov-text-main) !important;
+  font-family: var(--font-typewriter);
+  font-size: 16px;
+}
+
+.archive-status p {
+  margin: 0;
+  color: var(--ov-text-muted) !important;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.archive-status.awake {
+  border-left-color: var(--ov-gold);
+}
+
+.archive-status.error {
+  border-left-color: var(--ov-red);
+}
+
 .content-section {
   display: flex !important;
-  gap: 24px !important;
-  margin: 0 0 2px;
+  gap: 18px !important;
+  margin: 0;
 }
 
 .archive-panel {
   position: relative;
-  padding: 22px;
-  background: var(--ov-bg-panel) !important;
+  padding: 18px;
   border: 1px solid var(--ov-border-faint) !important;
   border-radius: 8px;
+  background: var(--ov-bg-panel) !important;
 }
 
 .gradio-container .block,
 .gradio-container .form,
 .gradio-container .box {
-  background: transparent !important;
-  border: none !important;
+  border-color: var(--ov-border-faint) !important;
+  border-radius: 8px !important;
+  background: rgba(22, 21, 19, 0.52) !important;
   box-shadow: none !important;
 }
 
+.gradio-container .form {
+  gap: 12px !important;
+}
+
 .gradio-container label,
 .gradio-container span.svelte-1gfknul {
   color: var(--ov-text-muted) !important;
@@ -198,9 +277,9 @@ footer,
 
 .gradio-container input,
 .gradio-container textarea {
+  border: 1px solid rgba(212, 175, 55, 0.25) !important;
+  border-radius: 6px !important;
   background: var(--ov-bg-input) !important;
-  border: 1px solid var(--ov-border-light) !important;
-  border-radius: 4px !important;
   color: var(--ov-text-main) !important;
   font-family: var(--font-sans) !important;
 }
@@ -208,18 +287,14 @@ footer,
 .gradio-container input:focus,
 .gradio-container textarea:focus {
   border-color: var(--ov-gold) !important;
-  box-shadow: none !important;
+  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18) !important;
 }
 
 #object-upload {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   min-height: 176px;
-  padding: 34px 20px;
-  border: 2px dashed var(--ov-border-light) !important;
+  border: 1px dashed var(--ov-border-light) !important;
   border-radius: 8px;
-  background: transparent !important;
+  background: rgba(22, 21, 19, 0.38) !important;
   color: var(--ov-text-muted) !important;
   text-align: center;
 }
@@ -228,37 +303,11 @@ footer,
   color: var(--ov-text-muted) !important;
 }
 
-.or-divider {
-  position: relative;
-  margin: 18px 0;
-  text-align: center;
-}
-
-.or-divider::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  right: 0;
-  left: 0;
-  height: 1px;
-  background: var(--ov-border-faint);
-}
-
-.or-divider span {
-  position: relative;
-  z-index: 1;
-  padding: 0 14px;
-  background: var(--ov-bg-panel);
-  color: var(--ov-text-muted);
-  font-family: var(--font-typewriter);
-  font-size: 13px;
-}
-
 .mode-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin: 18px 0 12px;
+  margin: 16px 0 10px;
   color: var(--ov-text-main) !important;
   font-family: var(--font-typewriter);
 }
@@ -272,16 +321,16 @@ footer,
 #personality-mode .wrap {
   display: flex !important;
   flex-wrap: wrap !important;
-  gap: 10px !important;
+  gap: 8px !important;
 }
 
 #personality-mode label {
   flex: 1 1 120px;
-  min-height: 48px;
-  padding: 13px 10px !important;
-  border: 1px solid var(--ov-border-light) !important;
+  min-height: 44px;
+  padding: 10px !important;
+  border: 1px solid var(--ov-border-faint) !important;
   border-radius: 6px !important;
-  background: transparent !important;
+  background: rgba(22, 21, 19, 0.36) !important;
   text-align: center;
   cursor: pointer;
 }
@@ -290,13 +339,13 @@ footer,
   display: block;
   color: var(--ov-text-main) !important;
   font-family: var(--font-typewriter);
-  font-size: 14px;
+  font-size: 13px;
 }
 
 #personality-mode label:has(input:checked) {
   border-color: var(--ov-gold) !important;
-  background: rgba(212, 175, 55, 0.06) !important;
-  box-shadow: 0 0 0 1px var(--ov-gold) inset;
+  background: rgba(212, 175, 55, 0.1) !important;
+  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35) inset;
 }
 
 #personality-mode label:has(input:checked) span {
@@ -305,26 +354,29 @@ footer,
 
 #wake-button {
   width: 100%;
-  margin-top: 22px;
-  padding: 18px !important;
-  border: 0 !important;
-  border-radius: 4px !important;
+  margin-top: 18px;
+  padding: 15px !important;
+  border: 1px solid rgba(245, 208, 97, 0.4) !important;
+  border-radius: 6px !important;
   background: linear-gradient(180deg, #d8ac54 0%, #a67c2d 100%) !important;
   color: var(--ov-text-dark) !important;
   font-family: var(--font-typewriter);
-  font-size: 18px !important;
+  font-size: 16px !important;
   font-weight: 700;
-  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28), 0 4px 14px rgba(0, 0, 0, 0.34) !important;
+  box-shadow: none !important;
 }
 
 #wake-button:hover {
-  filter: brightness(1.08);
-  transform: translateY(-1px);
+  filter: brightness(1.07);
 }
 
 .example-header {
-  margin-bottom: 18px;
-  padding-bottom: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
   border-bottom: 1px solid var(--ov-border-faint);
 }
 
@@ -336,7 +388,7 @@ footer,
   font-weight: 400;
 }
 
-.example-header span {
+.example-header span:not(.example-badge) {
   color: var(--ov-text-muted) !important;
   font-size: 13px;
 }
@@ -344,11 +396,12 @@ footer,
 button.example-card {
   display: block;
   width: 100%;
-  margin-bottom: 10px !important;
-  padding: 14px !important;
+  min-height: 42px;
+  margin-bottom: 8px !important;
+  padding: 11px 12px !important;
   border: 1px solid var(--ov-border-faint) !important;
-  border-radius: 4px !important;
-  background: var(--ov-bg-input) !important;
+  border-radius: 6px !important;
+  background: rgba(22, 21, 19, 0.58) !important;
   color: var(--ov-text-main) !important;
   font-family: var(--font-typewriter) !important;
   text-align: left !important;
@@ -358,6 +411,7 @@ button.example-card {
 button.example-card:hover,
 button.example-card:focus {
   border-color: var(--ov-gold) !important;
+  background: rgba(212, 175, 55, 0.08) !important;
 }
 
 button.example-card * {
@@ -367,24 +421,24 @@ button.example-card * {
 .panel-header {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: 14px;
-  margin-bottom: 18px;
-  padding-bottom: 14px;
+  gap: 12px;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
   border-bottom: 1px solid var(--ov-border-faint);
 }
 
 .panel-header > span {
   color: var(--ov-gold) !important;
   font-family: var(--font-typewriter);
-  font-size: 16px;
+  font-size: 15px;
 }
 
 .panel-header h2 {
   margin: 0 0 4px;
   color: var(--ov-text-main) !important;
   font-family: var(--font-typewriter);
-  font-size: 22px;
-  line-height: 1.2;
+  font-size: 20px;
+  line-height: 1.25;
 }
 
 .panel-header h2 small,
@@ -402,7 +456,7 @@ button.example-card * {
 .diary-entry {
   color: var(--ov-text-soft) !important;
   font-family: var(--font-serif) !important;
-  font-size: 17px;
+  font-size: 16px;
   line-height: 1.75;
 }
 
@@ -412,7 +466,7 @@ button.example-card * {
   margin: 0 0 14px;
   color: var(--ov-gold) !important;
   font-family: var(--font-typewriter);
-  font-size: 17px;
+  font-size: 16px;
   line-height: 1.3;
   text-transform: uppercase;
 }
@@ -433,9 +487,11 @@ button.example-card * {
 
 .archive-empty,
 .objectverse-placeholder {
-  padding: 34px 24px;
+  padding: 28px 22px;
   border: 1px dashed var(--ov-border-light);
+  border-radius: 8px;
   color: var(--ov-text-muted) !important;
+  background: rgba(22, 21, 19, 0.32);
   text-align: center;
 }
 
@@ -467,14 +523,14 @@ button.example-card * {
   color: var(--ov-text-main) !important;
 }
 
+.case-strip {
+  margin-bottom: 12px;
+}
+
 .file-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
   margin-bottom: 12px;
 }
 
-.file-meta span,
 .object-name,
 .object-file-card dt,
 .object-file-card p,
@@ -527,22 +583,9 @@ button.example-card * {
 
 .file-tags,
 .card-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
   margin-top: 16px;
 }
 
-.file-tags span,
-.card-tags span {
-  padding: 4px 8px;
-  border: 1px solid var(--ov-border-light) !important;
-  border-radius: 999px;
-  color: var(--ov-gold-bright) !important;
-  font-family: var(--font-typewriter);
-  font-size: 12px;
-}
-
 .objectverse-card {
   max-width: 520px;
   padding: 22px;
@@ -565,7 +608,7 @@ button.example-card * {
 
 .card-quote {
   font-family: var(--font-serif);
-  font-size: 17px;
+  font-size: 16px;
   line-height: 1.65;
 }
 
@@ -577,8 +620,8 @@ button.example-card * {
 
 .quiet-button {
   border: 1px solid var(--ov-border-light) !important;
-  border-radius: 4px !important;
-  background: transparent !important;
+  border-radius: 6px !important;
+  background: rgba(22, 21, 19, 0.45) !important;
   color: var(--ov-gold) !important;
   font-family: var(--font-typewriter) !important;
 }
@@ -586,7 +629,7 @@ button.example-card * {
 .developer-details {
   border: 1px solid var(--ov-border-faint) !important;
   border-radius: 8px !important;
-  background: rgba(30, 28, 25, 0.42) !important;
+  background: rgba(30, 28, 25, 0.58) !important;
 }
 
 .developer-json-grid {
@@ -601,6 +644,10 @@ button.example-card * {
   color: var(--ov-text-main) !important;
 }
 
+.gradio-container :is(.chatbot, .json-holder, pre) {
+  background: rgba(22, 21, 19, 0.5) !important;
+}
+
 @media (max-width: 980px) {
   #app-container {
     padding: 28px 18px 44px;
@@ -609,12 +656,17 @@ button.example-card * {
   #objectverse-hero,
   .content-section,
   .split-section,
-  .developer-json-grid {
+  .developer-json-grid,
+  .archive-status {
     flex-direction: column !important;
   }
 
-  .top-controls {
+  .top-controls,
+  .archive-status {
     width: 100%;
+  }
+
+  .top-controls {
     justify-content: space-between;
   }
 }
@@ -625,7 +677,7 @@ button.example-card * {
   }
 
   .archive-panel {
-    padding: 18px;
+    padding: 16px;
   }
 
   .hero-copy h1 {
@@ -642,6 +694,15 @@ button.example-card * {
     line-height: 1.55;
   }
 
+  .hero-badges span,
+  .status-pills span,
+  .case-strip span,
+  .file-meta span,
+  .file-tags span,
+  .card-tags span {
+    font-size: 11px;
+  }
+
   #personality-mode label {
     flex: 1 1 45% !important;
     padding: 10px 6px !important;