ui: comprehensive dark sustainability theme — panels, inputs, code, markdown tables

app.py

@@ -161,24 +161,38 @@ def dispatch(mode: str, image_path: str | None, head: str, jurisdiction: str):
 
 
 CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
 :root {
   --bg-0: #04080a;
+  --bg-1: #07120f;
+  --bg-2: #0a1f17;
   --emerald: #00d97e;
   --emerald-glow: #00ff8c;
   --cyan: #00e5ff;
   --leaf: #7dd3a8;
   --ink: #e6f3ec;
   --ink-dim: #8aa39a;
-  --line: rgba(125, 211, 168, 0.12);
+  --ink-muted: #5b7a70;
+  --line: rgba(125, 211, 168, 0.14);
+  --line-bright: rgba(125, 211, 168, 0.28);
+  --panel: rgba(10, 28, 22, 0.55);
+  --panel-hi: rgba(18, 42, 32, 0.72);
 }
-.gradio-container {
+
+/* ===== Page background ===== */
+html, body, gradio-app, .gradio-container {
   background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0, 217, 126, 0.18), transparent 60%),
               radial-gradient(ellipse 70% 50% at 85% 20%, rgba(0, 229, 255, 0.10), transparent 60%),
+              radial-gradient(ellipse 90% 70% at 50% 110%, rgba(0, 217, 126, 0.10), transparent 60%),
               linear-gradient(180deg, #04080a 0%, #061410 50%, #04080a 100%) !important;
   color: var(--ink) !important;
-  font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
 }
-#hero { padding: 28px 4px 8px; }
+.gradio-container { max-width: 1280px !important; margin: 0 auto !important; }
+
+/* ===== Hero ===== */
+#hero { padding: 32px 4px 12px; }
 #hero h1 {
   font-family: "Fraunces", Georgia, serif;
   font-weight: 400;
@@ -193,26 +207,290 @@ CSS = """
   -webkit-text-fill-color: transparent;
   font-weight: 300;
 }
-#hero p { color: var(--ink-dim); margin-top: 12px; max-width: 680px; }
+#hero p { color: var(--ink-dim); margin-top: 14px; max-width: 680px; line-height: 1.55; }
 #hero .chip {
   display: inline-flex; gap: 8px; align-items: center;
   padding: 6px 14px; border-radius: 999px;
-  border: 1px solid rgba(125, 211, 168, 0.28);
+  border: 1px solid var(--line-bright);
   background: linear-gradient(135deg, rgba(0, 217, 126, 0.08), rgba(0, 229, 255, 0.04));
   color: var(--leaf); font-size: 0.82rem; font-weight: 500;
 }
 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-glow);
-       box-shadow: 0 0 12px var(--emerald-glow); display: inline-block; }
-.gr-button-primary {
-  background: linear-gradient(135deg, var(--emerald), var(--cyan)) !important;
-  color: #04130c !important;
+       box-shadow: 0 0 12px var(--emerald-glow); display: inline-block;
+       animation: pulse 1.6s ease-in-out infinite; }
+@keyframes pulse { 0%,100% {opacity:1;} 50% {opacity:0.4;} }
+
+/* ===== Catch-all: every Gradio block becomes a glass panel ===== */
+.gradio-container [class*="block"],
+.gradio-container [class*="panel"],
+.gradio-container [class*="form"],
+.gradio-container .form,
+.gradio-container .block {
+  background: var(--panel) !important;
+  border: 1px solid var(--line) !important;
+  border-radius: 14px !important;
+  backdrop-filter: blur(10px);
+}
+/* Don't double-wrap rows/cols — they're transparent layout containers */
+.gradio-container [class*="row"],
+.gradio-container [class*="column"],
+.gradio-container [class*="group"]:not([class*="block"]) {
+  background: transparent !important;
   border: 0 !important;
+  backdrop-filter: none;
+}
+
+/* ===== Labels ===== */
+.gradio-container label,
+.gradio-container [class*="label"] {
+  color: var(--ink-dim) !important;
+  font-size: 0.78rem !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+/* ===== Inputs (textbox, dropdown, etc.) ===== */
+.gradio-container input[type="text"],
+.gradio-container input[type="number"],
+.gradio-container textarea,
+.gradio-container select,
+.gradio-container [class*="input"] input,
+.gradio-container [class*="textbox"] textarea {
+  background: rgba(4, 12, 9, 0.7) !important;
+  color: var(--ink) !important;
+  border: 1px solid var(--line) !important;
+  border-radius: 10px !important;
+  font-family: "Inter", sans-serif !important;
+}
+.gradio-container input:focus,
+.gradio-container textarea:focus,
+.gradio-container select:focus {
+  border-color: var(--emerald) !important;
+  outline: 0 !important;
+  box-shadow: 0 0 0 3px rgba(0, 217, 126, 0.15) !important;
+}
+
+/* ===== Dropdown menu ===== */
+.gradio-container [class*="dropdown"] [class*="options"],
+.gradio-container [class*="dropdown"] ul,
+.gradio-container [role="listbox"] {
+  background: var(--bg-1) !important;
+  border: 1px solid var(--line-bright) !important;
+  border-radius: 10px !important;
+  color: var(--ink) !important;
+}
+.gradio-container [role="option"] {
+  color: var(--ink) !important;
+}
+.gradio-container [role="option"]:hover,
+.gradio-container [role="option"][aria-selected="true"] {
+  background: rgba(0, 217, 126, 0.12) !important;
+  color: var(--emerald-glow) !important;
+}
+
+/* ===== Radio buttons ===== */
+.gradio-container [class*="radio"] label,
+.gradio-container input[type="radio"] + span,
+.gradio-container [role="radio"] {
+  background: rgba(4, 12, 9, 0.55) !important;
+  border: 1px solid var(--line) !important;
+  border-radius: 10px !important;
+  color: var(--ink-dim) !important;
+  padding: 8px 14px !important;
+  cursor: pointer !important;
+  font-weight: 500 !important;
+  text-transform: none !important;
+  letter-spacing: 0 !important;
+  font-size: 0.9rem !important;
+  transition: all 200ms;
+}
+.gradio-container [class*="radio"] input[type="radio"]:checked + span,
+.gradio-container [class*="radio"] [aria-checked="true"],
+.gradio-container [role="radio"][aria-checked="true"] {
+  background: linear-gradient(135deg, rgba(0, 217, 126, 0.18), rgba(0, 229, 255, 0.08)) !important;
+  border-color: var(--emerald) !important;
+  color: var(--emerald-glow) !important;
+}
+
+/* ===== Buttons ===== */
+.gradio-container button {
+  font-family: "Inter", sans-serif !important;
   font-weight: 600 !important;
+  border-radius: 999px !important;
+  transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
+}
+.gradio-container button[class*="primary"],
+.gradio-container .primary {
+  background: linear-gradient(135deg, var(--emerald) 0%, var(--cyan) 100%) !important;
+  color: #04130c !important;
+  border: 0 !important;
+  box-shadow: 0 6px 24px rgba(0, 217, 126, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
+}
+.gradio-container button[class*="primary"]:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 32px rgba(0, 217, 126, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
+}
+.gradio-container button[class*="secondary"],
+.gradio-container button:not([class*="primary"]) {
+  background: rgba(125, 211, 168, 0.06) !important;
+  color: var(--ink) !important;
+  border: 1px solid var(--line-bright) !important;
+}
+.gradio-container button:not([class*="primary"]):hover {
+  background: rgba(0, 217, 126, 0.12) !important;
+  border-color: var(--emerald) !important;
 }
-.gr-panel, .gr-block, .gr-form {
+
+/* ===== Image upload zone ===== */
+.gradio-container [class*="image"] [class*="upload"],
+.gradio-container [data-testid="image"],
+.gradio-container [class*="ImageUploader"] {
+  background: rgba(4, 12, 9, 0.55) !important;
+  border: 1.5px dashed var(--line-bright) !important;
+  border-radius: 14px !important;
+  color: var(--ink-dim) !important;
+  transition: all 220ms;
+}
+.gradio-container [class*="image"] [class*="upload"]:hover {
+  border-color: var(--emerald) !important;
+  background: rgba(0, 217, 126, 0.05) !important;
+}
+.gradio-container [class*="image"] svg {
+  color: var(--leaf) !important;
+}
+
+/* ===== Examples gallery ===== */
+.gradio-container [class*="examples"] table,
+.gradio-container [class*="example"] {
+  background: transparent !important;
+  border: 0 !important;
+}
+.gradio-container [class*="examples"] tr,
+.gradio-container [class*="example"] td {
   background: rgba(7, 18, 15, 0.6) !important;
-  border-color: var(--line) !important;
+  border: 1px solid var(--line) !important;
+  border-radius: 10px !important;
+  color: var(--ink-dim) !important;
+}
+.gradio-container [class*="examples"] tr:hover {
+  border-color: var(--emerald) !important;
+  background: rgba(0, 217, 126, 0.05) !important;
+}
+
+/* ===== Output: Markdown rendering ===== */
+.gradio-container [class*="markdown"],
+.gradio-container [class*="prose"] {
+  color: var(--ink) !important;
+  font-family: "Inter", sans-serif !important;
+}
+.gradio-container [class*="markdown"] h1,
+.gradio-container [class*="markdown"] h2,
+.gradio-container [class*="markdown"] h3 {
+  font-family: "Fraunces", Georgia, serif !important;
+  font-weight: 400 !important;
+  letter-spacing: -0.015em !important;
+  color: var(--ink) !important;
+  margin-top: 4px !important;
+}
+.gradio-container [class*="markdown"] h3 {
+  font-size: 1.4rem !important;
+  border-bottom: 1px solid var(--line) !important;
+  padding-bottom: 8px;
+}
+.gradio-container [class*="markdown"] strong { color: var(--ink) !important; }
+.gradio-container [class*="markdown"] em { color: var(--leaf) !important; font-style: italic; }
+.gradio-container [class*="markdown"] code {
+  background: rgba(0, 217, 126, 0.08) !important;
+  color: var(--leaf) !important;
+  font-family: "JetBrains Mono", ui-monospace, monospace !important;
+  padding: 2px 6px !important;
+  border-radius: 6px !important;
+  font-size: 0.86em !important;
+  border: 1px solid var(--line);
 }
+.gradio-container [class*="markdown"] table {
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+  width: 100%;
+  margin: 12px 0 !important;
+  border: 1px solid var(--line) !important;
+  border-radius: 10px !important;
+  overflow: hidden;
+}
+.gradio-container [class*="markdown"] th,
+.gradio-container [class*="markdown"] td {
+  padding: 10px 14px !important;
+  border-bottom: 1px solid var(--line) !important;
+  text-align: left !important;
+  background: rgba(7, 18, 15, 0.5) !important;
+}
+.gradio-container [class*="markdown"] tr:last-child td { border-bottom: 0 !important; }
+.gradio-container [class*="markdown"] th {
+  background: rgba(0, 217, 126, 0.06) !important;
+  color: var(--leaf) !important;
+  font-weight: 600 !important;
+  text-transform: uppercase;
+  font-size: 0.74rem;
+  letter-spacing: 0.08em;
+}
+
+/* ===== Output: Code block (JSON) ===== */
+.gradio-container [class*="code"] pre,
+.gradio-container [class*="code"] code,
+.gradio-container [class*="Code"] pre {
+  background: rgba(2, 8, 6, 0.92) !important;
+  color: #d2efe0 !important;
+  font-family: "JetBrains Mono", ui-monospace, monospace !important;
+  font-size: 0.82rem !important;
+  line-height: 1.6 !important;
+  border-radius: 12px !important;
+  border: 1px solid var(--line) !important;
+  padding: 16px !important;
+}
+.gradio-container [class*="code"] .token.string { color: #a5e8ff !important; }
+.gradio-container [class*="code"] .token.property,
+.gradio-container [class*="code"] .token.key { color: var(--leaf) !important; }
+.gradio-container [class*="code"] .token.number { color: #ffb547 !important; }
+.gradio-container [class*="code"] .token.boolean,
+.gradio-container [class*="code"] .token.null { color: #ff9bcc !important; }
+
+/* ===== Accordion ===== */
+.gradio-container [class*="accordion"] [class*="label"],
+.gradio-container details summary {
+  color: var(--leaf) !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-size: 0.78rem !important;
+  cursor: pointer;
+}
+
+/* ===== Section titles (gr.Markdown ### Capture / Passport) ===== */
+.gradio-container [class*="markdown"] > h3:first-child {
+  font-size: 1.6rem !important;
+  border-bottom: 0 !important;
+  padding-bottom: 0;
+  margin-bottom: 12px !important;
+  display: flex; align-items: center; gap: 12px;
+}
+.gradio-container [class*="markdown"] > h3:first-child::before {
+  content: "";
+  width: 28px; height: 1px;
+  background: linear-gradient(90deg, var(--emerald), transparent);
+}
+
+/* ===== Scrollbars ===== */
+.gradio-container ::-webkit-scrollbar { width: 8px; height: 8px; }
+.gradio-container ::-webkit-scrollbar-thumb { background: rgba(125, 211, 168, 0.18); border-radius: 4px; }
+.gradio-container ::-webkit-scrollbar-track { background: transparent; }
+
+/* ===== Selection ===== */
+::selection { background: rgba(0, 217, 126, 0.35); color: white; }
+
+/* ===== Footer ===== */
+.gradio-container a { color: var(--leaf) !important; }
+.gradio-container a:hover { color: var(--emerald-glow) !important; }
 """
 
 HERO_HTML = """