Style intake cards to match mock with branded Excel/Word headers

app.py

@@ -604,37 +604,90 @@ TOTEM_CSS = """
 #totem-intake-mount #intake-row {
   display: grid !important;
   grid-template-columns: repeat(2, minmax(280px, 1fr));
-  gap: 14px;
+  gap: 16px;
   margin: 0;
 }
 
 #totem-intake-mount #intake-row > .gr-column {
-  border: 1px solid rgba(205, 123, 255, 0.42);
-  border-radius: 14px;
+  border: 1px solid rgba(236, 130, 214, 0.48);
+  border-radius: 16px;
   background:
-    radial-gradient(600px 180px at 100% 0%, rgba(125, 68, 209, 0.24), transparent 62%),
-    linear-gradient(180deg, rgba(13, 22, 58, 0.95), rgba(8, 14, 40, 0.95));
-  box-shadow: inset 0 0 0 1px rgba(255, 216, 126, 0.12);
-  padding: 10px 12px 12px !important;
+    radial-gradient(520px 190px at 100% 0%, rgba(126, 72, 196, 0.32), transparent 70%),
+    radial-gradient(420px 220px at 0% 100%, rgba(43, 69, 154, 0.22), transparent 72%),
+    linear-gradient(180deg, rgba(17, 20, 63, 0.96), rgba(10, 14, 42, 0.96));
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 212, 123, 0.16),
+    0 8px 22px rgba(4, 6, 22, 0.48);
+  padding: 12px 14px 14px !important;
+  min-height: 172px;
+}
+
+#totem-intake-mount #intake-row .intake-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+#totem-intake-mount #intake-row .intake-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+#totem-intake-mount #intake-row .intake-brand img {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  object-fit: cover;
+  box-shadow: 0 0 0 1px rgba(255, 220, 170, 0.14);
 }
 
-#totem-intake-mount #intake-row .gr-markdown p {
-  margin: 2px 0 8px !important;
-  color: #f8e6b7 !important;
+#totem-intake-mount #intake-row .intake-brand strong {
+  display: block;
+  color: #f4ece2;
+  font-size: 34px;
+  line-height: 1.05;
+  margin-bottom: 2px;
+}
+
+#totem-intake-mount #intake-row .intake-brand span {
+  display: block;
+  color: rgba(215, 223, 243, 0.88);
+  font-size: 20px;
   letter-spacing: 0.02em;
 }
 
+#totem-intake-mount #intake-row .intake-cloud {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 1px solid rgba(206, 136, 254, 0.42);
+  display: grid;
+  place-items: center;
+  font-size: 26px;
+  color: #d7b6ff;
+  background: rgba(31, 33, 79, 0.45);
+}
+
 #totem-intake-mount #intake-row .gr-file {
-  border: 1px dashed rgba(202, 125, 255, 0.45) !important;
+  border: 1px dashed rgba(205, 135, 255, 0.5) !important;
   border-radius: 12px !important;
-  background: rgba(10, 19, 52, 0.82) !important;
-  min-height: 102px;
+  background: rgba(8, 15, 44, 0.62) !important;
+  min-height: 56px;
+  max-height: 56px;
+  overflow: hidden;
 }
 
 #totem-intake-mount #intake-row button {
   border-radius: 10px !important;
 }
 
+#totem-intake-mount #intake-row .gr-file .wrap {
+  min-height: 56px !important;
+}
+
 @media (max-width: 1080px) {
   #totem-intake-mount #intake-row {
     grid-template-columns: 1fr;
@@ -3072,11 +3125,22 @@ with gr.Blocks(title="TOTEM Studio") as demo:
             gr.Markdown("### Intake Windows")
             with gr.Row(elem_id="intake-row"):
                 with gr.Column(scale=1, elem_id="workbook-intake-panel"):
-                    gr.Markdown("**Workbook Upload**")
+                    gr.HTML(
+                        """
+                        <div class="intake-card-head">
+                          <div class="intake-brand">
+                            <img src="/gradio_api/file=assets/Brand/excel.png" alt="Excel" />
+                            <div><strong>Workbook</strong><span>Drop .xlsx</span></div>
+                          </div>
+                          <div class="intake-cloud">☁</div>
+                        </div>
+                        """
+                    )
                     dashboard_workbook_file = gr.File(
                         label="Workbook (.xlsx or .xlsm)",
                         file_types=[".xlsx", ".xlsm"],
                         type="filepath",
+                        show_label=False,
                     )
                     dashboard_set_workbook = gr.Button("Set Active Workbook", variant="primary")
                     workbook_home_display = gr.Textbox(
@@ -3086,11 +3150,22 @@ with gr.Blocks(title="TOTEM Studio") as demo:
                     )
 
                 with gr.Column(scale=1, elem_id="codex-panel"):
-                    gr.Markdown("**Manuscript Upload**")
+                    gr.HTML(
+                        """
+                        <div class="intake-card-head">
+                          <div class="intake-brand">
+                            <img src="/gradio_api/file=assets/Brand/word.png" alt="Word" />
+                            <div><strong>Manuscript</strong><span>Drop .docx</span></div>
+                          </div>
+                          <div class="intake-cloud">☁</div>
+                        </div>
+                        """
+                    )
                     dashboard_manuscript_file = gr.File(
                         label="Manuscript (.txt, .docx, or .pdf)",
                         file_types=[".txt", ".docx", ".pdf"],
                         type="filepath",
+                        show_label=False,
                     )
                     dashboard_manuscript_analyze = gr.Button(
                         "Analyze Manuscript (No Auto-Score)",