Refine border hierarchy and color balance

app.py

@@ -1009,14 +1009,19 @@ CUSTOM_CSS = """
 :root, .gradio-container, .gradio-container.dark {
     --ovc-grad: linear-gradient(135deg, #4f46e5 0%, #2563eb 50%, #06b6d4 100%);
     --ovc-grad-soft: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(6,182,212,0.10));
-    --ovc-ring: rgba(79,70,229,0.40);
-    --ovc-ring-strong: rgba(79,70,229,0.62);
-    --ovc-line: rgba(100,116,139,0.34);
-    --ovc-line-strong: rgba(100,116,139,0.48);
-    --ovc-line-accent-soft: rgba(79,70,229,0.28);
-    --ovc-line-accent: rgba(79,70,229,0.40);
-    --ovc-line-accent-strong: rgba(79,70,229,0.58);
-    --ovc-line-cyan: rgba(6,182,212,0.26);
+    --ovc-ring: rgba(79,70,229,0.18);
+    --ovc-ring-strong: rgba(79,70,229,0.30);
+    --ovc-line-soft: rgba(148,163,184,0.18);
+    --ovc-line: rgba(148,163,184,0.26);
+    --ovc-line-strong: rgba(100,116,139,0.38);
+    --ovc-line-accent-soft: rgba(79,70,229,0.18);
+    --ovc-line-accent: rgba(79,70,229,0.28);
+    --ovc-line-accent-strong: rgba(79,70,229,0.40);
+    --ovc-line-cyan: rgba(6,182,212,0.18);
+    --ovc-surface-tint: rgba(248,250,252,0.74);
+    --ovc-surface-accent: rgba(79,70,229,0.035);
+    --ovc-shadow-soft: 0 1px 2px rgba(15,23,42,0.04), 0 10px 30px rgba(15,23,42,0.03);
+    --ovc-shadow-accent: 0 8px 28px rgba(79,70,229,0.08);
 }
 .gradio-container {
     max-width: 1480px !important;
@@ -1057,6 +1062,7 @@ CUSTOM_CSS = """
         repeating-linear-gradient(0deg, rgba(99,102,241,0.05) 0 1px, transparent 1px 28px),
         repeating-linear-gradient(90deg, rgba(99,102,241,0.05) 0 1px, transparent 1px 28px);
     border: 1px solid var(--ovc-line-accent-soft);
+    box-shadow: 0 10px 30px rgba(15,23,42,0.04);
     margin-bottom: 18px;
     position: relative;
     overflow: hidden;
@@ -1100,7 +1106,7 @@ CUSTOM_CSS = """
     padding: 7px 14px;
     border-radius: 999px;
     background: var(--background-fill-primary, #fff);
-    border: 1px solid var(--ovc-line-accent);
+    border: 1px solid var(--ovc-line-accent-soft);
     color: #4338ca;
     transition: transform 0.12s ease, box-shadow 0.18s ease,
                 background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
@@ -1112,7 +1118,7 @@ CUSTOM_CSS = """
     color: #fff;
     border-color: transparent;
     transform: translateY(-1px);
-    box-shadow: 0 6px 16px rgba(79,70,229,0.32);
+    box-shadow: 0 8px 20px rgba(79,70,229,0.18);
 }
 .gradio-container.dark .ovc-links a {
     background: rgba(30,41,59,0.7);
@@ -1124,30 +1130,34 @@ CUSTOM_CSS = """
 .ovc-card {
     border-radius: 16px !important;
     padding: 16px 18px !important;
-    border: 1px solid var(--ovc-line) !important;
+    border: 1px solid var(--ovc-line-soft) !important;
     background: var(--background-fill-primary) !important;
-    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
+    box-shadow: var(--ovc-shadow-soft);
     transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
     animation: ovc-fade-in 0.32s ease-out;
 }
 .ovc-card:hover {
-    border-color: var(--ovc-line-accent) !important;
-    box-shadow: 0 6px 22px rgba(15,23,42,0.07);
+    border-color: var(--ovc-line) !important;
+    box-shadow: 0 8px 24px rgba(15,23,42,0.06);
 }
 .ovc-card + .ovc-card {
     margin-top: 2px;
 }
 /* Primary outputs: subtle accent ring + lift */
 .ovc-card-primary {
-    border: 1px solid var(--ovc-ring) !important;
+    border: 1px solid var(--ovc-line-accent-soft) !important;
     background:
-        linear-gradient(180deg, rgba(79,70,229,0.025), rgba(6,182,212,0.012)),
+        linear-gradient(180deg, rgba(79,70,229,0.028), rgba(6,182,212,0.014)),
         var(--background-fill-primary) !important;
-    box-shadow: 0 4px 18px rgba(79,70,229,0.08) !important;
+    box-shadow:
+        inset 0 0 0 1px rgba(255,255,255,0.65),
+        var(--ovc-shadow-accent) !important;
 }
 .ovc-card-primary:hover {
-    border-color: var(--ovc-ring-strong) !important;
-    box-shadow: 0 10px 28px rgba(79,70,229,0.14) !important;
+    border-color: var(--ovc-line-accent) !important;
+    box-shadow:
+        inset 0 0 0 1px rgba(255,255,255,0.72),
+        0 10px 32px rgba(79,70,229,0.10) !important;
 }
 .ovc-card h3 {
     display: inline-flex;
@@ -1157,8 +1167,9 @@ CUSTOM_CSS = """
     font-weight: 700 !important;
     text-transform: uppercase;
     letter-spacing: 0.10em;
-    color: #4f46e5 !important;
-    background: rgba(79,70,229,0.08);
+    color: #3730a3 !important;
+    background: rgba(79,70,229,0.06);
+    border: 1px solid rgba(79,70,229,0.10);
     padding: 4px 10px !important;
     border-radius: 999px;
     margin: 0 0 12px !important;
@@ -1196,7 +1207,7 @@ CUSTOM_CSS = """
 .ovc-preset button {
     background: var(--ovc-grad-soft) !important;
     color: #4338ca !important;
-    border: 1px solid var(--ovc-line-accent-soft) !important;
+    border: 1px solid rgba(79,70,229,0.16) !important;
     border-radius: 10px !important;
     font-weight: 600 !important;
     transition: all 0.15s ease;
@@ -1279,9 +1290,10 @@ CUSTOM_CSS = """
 .ovc-card [data-testid="upload"],
 .ovc-card .wrap,
 .ovc-card .container {
-    border: 1px solid var(--ovc-line) !important;
+    border: 1px solid transparent !important;
     box-shadow: none !important;
     outline: none !important;
+    background: transparent !important;
 }
 .ovc-card .video-container,
 .ovc-card .image-container,
@@ -1289,8 +1301,11 @@ CUSTOM_CSS = """
 .ovc-card-primary .video-container,
 .ovc-card-primary .image-container,
 .ovc-card-primary .plot-container {
-    background: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(6,182,212,0.025)) !important;
-    border: 1px solid rgba(79,70,229,0.34) !important;
+    background:
+        linear-gradient(180deg, rgba(79,70,229,0.028), rgba(6,182,212,0.018)),
+        var(--ovc-surface-tint) !important;
+    border: 1px solid rgba(79,70,229,0.18) !important;
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.68) !important;
 }
 .ovc-card .upload-container,
 .ovc-card .video-container,
@@ -1302,6 +1317,10 @@ CUSTOM_CSS = """
 .ovc-card .upload-container,
 .ovc-card [data-testid="file-upload"] {
     min-height: 220px !important;
+    background:
+        linear-gradient(180deg, rgba(79,70,229,0.03), rgba(6,182,212,0.02)),
+        rgba(248,250,252,0.72) !important;
+    border: 1px solid rgba(79,70,229,0.16) !important;
 }
 .ovc-card .plot-container,
 .ovc-card [data-testid="plot"] {
@@ -1312,7 +1331,7 @@ CUSTOM_CSS = """
     min-height: 260px !important;
 }
 .ovc-card .gradio-video, .ovc-card .gradio-image, .ovc-card .gradio-plot {
-    border-color: var(--ovc-line) !important;
+    border-color: transparent !important;
     background: transparent !important;
     box-shadow: none !important;
     outline: none !important;
@@ -1339,8 +1358,8 @@ CUSTOM_CSS = """
 .ovc-stat {
     padding: 12px 14px;
     border-radius: 14px;
-    background: linear-gradient(135deg, rgba(79,70,229,0.07), rgba(6,182,212,0.04));
-    border: 1px solid var(--ovc-line-accent-soft);
+    background: linear-gradient(135deg, rgba(79,70,229,0.055), rgba(6,182,212,0.03));
+    border: 1px solid rgba(79,70,229,0.12);
     transition: transform 0.18s ease, box-shadow 0.18s ease;
 }
 .ovc-stat:hover {