Update app.py

app.py

@@ -1874,7 +1874,7 @@ def check_gradio_share_links_status(session_role=""):
 
 
 # -----------------------------------------------------------------------------
-# CSS Styles — Ivory / Burgundy / Rose-Gold redesign + Myanmar font
+# CSS Styles — Midnight Neon redesign + Myanmar font
 # -----------------------------------------------------------------------------
 FONT_FILENAME = os.getenv("VIP_MYANMAR_FONT", "Burma013-Regular.ttf").strip() or "Burma013-Regular.ttf"
 
@@ -1913,35 +1913,35 @@ MYANMAR_FONT_CSS = _load_embedded_myanmar_font_css()
 
 CUSTOM_CSS = MYANMAR_FONT_CSS + r"""
 :root {
-  --page: #f6f0eb;
-  --page-2: #efe4dc;
-  --surface: #fffaf6;
-  --surface-2: #f9efe9;
-  --surface-3: #f2e3da;
-  --ink: #2d1f24;
-  --text: #3a2730;
-  --muted: #7f6972;
-  --muted-2: #9b858d;
-  --burgundy: #7b2945;
-  --burgundy-deep: #5d1832;
-  --rose: #b45d78;
-  --rose-soft: #d99aae;
-  --gold: #b58a4b;
-  --gold-soft: #e7cfaa;
-  --green: #2f7d63;
-  --amber: #a86f21;
-  --red: #b5424f;
-  --line: rgba(103, 69, 80, .14);
-  --line-strong: rgba(123, 41, 69, .30);
-  --shadow: 0 18px 48px rgba(87, 53, 64, .10);
-  --shadow-soft: 0 8px 24px rgba(87, 53, 64, .08);
+  --page: #070b14;
+  --page-2: #0a1020;
+  --surface: #0e1628;
+  --surface-2: #121d33;
+  --surface-3: #18243c;
+  --surface-4: #1d2b47;
+  --ink: #e8edf8;
+  --text: #d7deed;
+  --muted: #98a6be;
+  --muted-2: #74849f;
+  --purple: #7c5cff;
+  --purple-2: #a855f7;
+  --cyan: #22d3ee;
+  --cyan-deep: #0891b2;
+  --gold: #f6c453;
+  --green: #2dd4a7;
+  --amber: #f59e0b;
+  --red: #fb7185;
+  --line: rgba(148, 163, 184, .16);
+  --line-strong: rgba(124, 92, 255, .42);
+  --shadow: 0 20px 60px rgba(0, 0, 0, .42);
+  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .30);
   --font-main: 'Burma013YF', 'Noto Sans Myanmar', 'Myanmar Text', 'Pyidaungsu', 'Segoe UI', sans-serif;
 }
 
 * {
   box-sizing: border-box;
   scrollbar-width: thin;
-  scrollbar-color: rgba(123, 41, 69, .24) rgba(255,255,255,.35);
+  scrollbar-color: rgba(124, 92, 255, .48) rgba(7, 11, 20, .75);
 }
 
 html, body, .gradio-container,
@@ -1964,9 +1964,9 @@ body, .gradio-container {
 
 body {
   background:
-    radial-gradient(circle at 8% 0%, rgba(180, 93, 120, .16), transparent 27%),
-    radial-gradient(circle at 96% 10%, rgba(181, 138, 75, .12), transparent 24%),
-    linear-gradient(180deg, #fbf6f2 0%, #f5eee9 44%, #eee3dc 100%) !important;
+    radial-gradient(circle at 12% 0%, rgba(124, 92, 255, .18), transparent 30%),
+    radial-gradient(circle at 92% 10%, rgba(34, 211, 238, .10), transparent 26%),
+    linear-gradient(180deg, #070b14 0%, #09101d 48%, #050913 100%) !important;
 }
 
 .gradio-container {
@@ -1984,10 +1984,10 @@ body {
   min-height: 188px;
   padding: 34px 38px;
   margin-bottom: 22px;
-  border: 1px solid rgba(123, 41, 69, .14);
+  border: 1px solid rgba(124, 92, 255, .28);
   border-radius: 28px;
   background:
-    linear-gradient(115deg, rgba(255,250,246,.97), rgba(248,235,228,.96)),
+    linear-gradient(115deg, rgba(14, 22, 40, .98), rgba(10, 16, 32, .98)),
     var(--surface);
   box-shadow: var(--shadow);
 }
@@ -2002,7 +2002,7 @@ body {
   line-height: 1;
   font-weight: 900;
   letter-spacing: -24px;
-  color: rgba(123, 41, 69, .055);
+  color: rgba(124, 92, 255, .08);
   pointer-events: none;
 }
 
@@ -2011,10 +2011,11 @@ body {
   position: absolute;
   left: 30px;
   bottom: 0;
-  width: 145px;
+  width: 168px;
   height: 5px;
   border-radius: 999px 999px 0 0;
-  background: linear-gradient(90deg, var(--burgundy), var(--rose), var(--gold));
+  background: linear-gradient(90deg, var(--purple), var(--cyan), var(--gold));
+  box-shadow: 0 0 22px rgba(34, 211, 238, .30);
 }
 
 .hero-badge {
@@ -2025,25 +2026,26 @@ body {
   align-items: center;
   gap: 8px;
   padding: 7px 12px;
-  border: 1px solid rgba(181, 138, 75, .30);
+  border: 1px solid rgba(34, 211, 238, .30);
   border-radius: 999px;
-  color: #7a5527;
-  background: rgba(255, 248, 233, .84);
+  color: #8be9f7;
+  background: rgba(34, 211, 238, .08);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 1.1px;
-  box-shadow: 0 4px 14px rgba(181,138,75,.08);
+  box-shadow: 0 0 22px rgba(34, 211, 238, .06);
 }
 
 .hero h1 {
   position: relative;
   z-index: 1;
   margin: 14px 0 8px;
-  color: var(--burgundy-deep) !important;
+  color: #eef2ff !important;
   font-size: clamp(30px, 4vw, 46px);
   line-height: 1.15;
   font-weight: 900;
   letter-spacing: -.8px;
+  text-shadow: 0 0 24px rgba(124, 92, 255, .22);
 }
 
 .hero p {
@@ -2060,31 +2062,29 @@ body {
 .glass-card, .login-card {
   border: 1px solid var(--line) !important;
   border-radius: 22px !important;
-  background: rgba(255, 250, 246, .92) !important;
+  background: rgba(14, 22, 40, .94) !important;
   box-shadow: var(--shadow-soft) !important;
   padding: 24px !important;
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(14px);
 }
 
 .glass-card:hover {
-  border-color: rgba(123, 41, 69, .22) !important;
-  box-shadow: 0 14px 36px rgba(87,53,64,.11) !important;
+  border-color: rgba(124, 92, 255, .34) !important;
+  box-shadow: 0 14px 38px rgba(0, 0, 0, .38) !important;
 }
 
 .login-card {
   max-width: 500px !important;
   margin: 34px auto !important;
   padding: 32px !important;
-  border-top: 4px solid var(--burgundy) !important;
+  border-top: 4px solid var(--purple) !important;
 }
 
-.section-title {
-  margin-bottom: 16px;
-}
+.section-title { margin-bottom: 16px; }
 
 .section-title h2 {
   margin: 0 0 7px;
-  color: var(--burgundy-deep) !important;
+  color: #e9e7ff !important;
   font-size: 20px;
   font-weight: 900;
   letter-spacing: -.15px;
@@ -2102,12 +2102,11 @@ body {
   position: relative;
   overflow: hidden;
   min-height: 116px;
-  border: 1px solid rgba(123, 41, 69, .12) !important;
+  border: 1px solid rgba(124, 92, 255, .20) !important;
   border-radius: 20px !important;
-  background:
-    linear-gradient(145deg, rgba(255,253,251,.98), rgba(249,239,233,.95)) !important;
+  background: linear-gradient(145deg, rgba(18,29,51,.98), rgba(11,18,34,.98)) !important;
   padding: 15px 18px !important;
-  box-shadow: 0 10px 28px rgba(87,53,64,.07) !important;
+  box-shadow: 0 10px 28px rgba(0,0,0,.26) !important;
 }
 
 .stat-card::before {
@@ -2117,7 +2116,7 @@ body {
   left: 0;
   width: 100%;
   height: 4px;
-  background: linear-gradient(90deg, var(--burgundy), var(--rose-soft));
+  background: linear-gradient(90deg, var(--purple), var(--cyan));
 }
 
 .stat-card label,
@@ -2127,7 +2126,7 @@ body {
 }
 
 .stat-card input {
-  color: var(--burgundy-deep) !important;
+  color: #c9c2ff !important;
   background: transparent !important;
   border: 0 !important;
   font-size: 28px !important;
@@ -2137,47 +2136,40 @@ body {
   box-shadow: none !important;
 }
 
-.amount-card::before {
-  background: linear-gradient(90deg, var(--gold), #d6b36f);
-}
-
-.amount-card input {
-  color: #8a6028 !important;
-}
+.amount-card::before { background: linear-gradient(90deg, var(--gold), var(--cyan)); }
+.amount-card input { color: #ffd97a !important; }
 
 /* ---------- Inputs ---------- */
 .gradio-container input:not([type="range"]),
 .gradio-container textarea,
 .gradio-container select {
   color: var(--ink) !important;
-  background: #fffdfb !important;
-  border: 1px solid rgba(103, 69, 80, .18) !important;
+  background: #0a1221 !important;
+  border: 1px solid rgba(148, 163, 184, .20) !important;
   border-radius: 13px !important;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
 }
 
 .gradio-container input::placeholder,
-.gradio-container textarea::placeholder {
-  color: #b09ca4 !important;
-}
+.gradio-container textarea::placeholder { color: #65758f !important; }
 
 .gradio-container input:focus,
 .gradio-container textarea:focus,
 .gradio-container select:focus {
-  border-color: rgba(123, 41, 69, .50) !important;
-  box-shadow: 0 0 0 4px rgba(180, 93, 120, .10) !important;
+  border-color: rgba(124, 92, 255, .72) !important;
+  box-shadow: 0 0 0 4px rgba(124, 92, 255, .12) !important;
   outline: none !important;
 }
 
 /* ---------- Buttons ---------- */
 .primary-action, .admin-action {
   min-height: 49px !important;
-  border: 1px solid rgba(93, 24, 50, .20) !important;
+  border: 1px solid rgba(124, 92, 255, .36) !important;
   border-radius: 14px !important;
   padding: 10px 20px !important;
-  color: #fffaf7 !important;
-  background: linear-gradient(110deg, var(--burgundy-deep), var(--burgundy) 55%, var(--rose)) !important;
-  box-shadow: 0 10px 24px rgba(123, 41, 69, .20) !important;
+  color: #f4f2ff !important;
+  background: linear-gradient(110deg, #5b46d8, var(--purple) 55%, var(--purple-2)) !important;
+  box-shadow: 0 10px 26px rgba(124, 92, 255, .22) !important;
   font-size: 14px !important;
   font-weight: 900 !important;
   transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
@@ -2185,35 +2177,35 @@ body {
 
 .primary-action:hover, .admin-action:hover {
   transform: translateY(-2px);
-  filter: saturate(1.06) brightness(1.02);
-  box-shadow: 0 14px 28px rgba(123, 41, 69, .25) !important;
+  filter: saturate(1.08) brightness(1.06);
+  box-shadow: 0 14px 32px rgba(124, 92, 255, .32) !important;
 }
 
 button.secondary,
 button[aria-label="secondary"] {
-  color: var(--burgundy-deep) !important;
-  background: #fffaf6 !important;
-  border-color: rgba(123, 41, 69, .20) !important;
+  color: #b9c5dc !important;
+  background: #111b2f !important;
+  border-color: rgba(148, 163, 184, .22) !important;
   border-radius: 12px !important;
 }
 
 button.secondary:hover,
 button[aria-label="secondary"]:hover {
-  background: #f7e9e7 !important;
+  color: #8be9f7 !important;
+  background: #16243d !important;
+  border-color: rgba(34, 211, 238, .28) !important;
 }
 
 /* ---------- Tabs ---------- */
-.tabs {
-  gap: 15px !important;
-}
+.tabs { gap: 15px !important; }
 
 .tab-nav {
   padding: 7px !important;
   margin-bottom: 16px !important;
   border: 1px solid var(--line) !important;
   border-radius: 16px !important;
-  background: rgba(255, 250, 246, .80) !important;
-  box-shadow: 0 7px 20px rgba(87,53,64,.06) !important;
+  background: rgba(9, 16, 29, .90) !important;
+  box-shadow: 0 7px 20px rgba(0,0,0,.22) !important;
 }
 
 .tab-nav button {
@@ -2223,9 +2215,9 @@ button[aria-label="secondary"]:hover {
 }
 
 .tab-nav button.selected {
-  color: #fffaf6 !important;
-  background: linear-gradient(110deg, var(--burgundy-deep), var(--burgundy)) !important;
-  box-shadow: 0 7px 18px rgba(123, 41, 69, .18) !important;
+  color: #f2f0ff !important;
+  background: linear-gradient(110deg, #4f3bc5, var(--purple)) !important;
+  box-shadow: 0 7px 18px rgba(124, 92, 255, .24) !important;
 }
 
 /* ---------- Tables ---------- */
@@ -2233,41 +2225,32 @@ button[aria-label="secondary"]:hover {
   border: 1px solid var(--line) !important;
   border-radius: 16px !important;
   overflow: hidden !important;
-  background: #fffdfb !important;
-  box-shadow: 0 7px 22px rgba(87,53,64,.06) !important;
+  background: #0b1323 !important;
+  box-shadow: 0 7px 22px rgba(0,0,0,.24) !important;
 }
 
-.dataframe table {
-  background: #fffdfb !important;
-}
+.dataframe table { background: #0b1323 !important; }
 
 .dataframe th {
-  color: #fff9f5 !important;
-  background: linear-gradient(180deg, #71304a, #5d1832) !important;
-  border-color: rgba(255,255,255,.10) !important;
+  color: #dff9ff !important;
+  background: linear-gradient(180deg, #183555, #10233a) !important;
+  border-color: rgba(148,163,184,.10) !important;
   font-size: 12px !important;
   font-weight: 900 !important;
 }
 
 .dataframe td {
-  color: var(--ink) !important;
-  background: #fffdfb !important;
-  border-color: rgba(103, 69, 80, .09) !important;
+  color: #cbd5e6 !important;
+  background: #0b1323 !important;
+  border-color: rgba(148,163,184,.08) !important;
   font-size: 12px !important;
 }
 
-.dataframe tbody tr:nth-child(even) td {
-  background: #fbf4ef !important;
-}
-
-.dataframe tbody tr:hover td {
-  background: #f5e6e5 !important;
-}
+.dataframe tbody tr:nth-child(even) td { background: #0e182a !important; }
+.dataframe tbody tr:hover td { background: #15223a !important; }
 
 /* ---------- Gradio service monitor ---------- */
-.gradio-monitor-wrap {
-  padding: 16px 18px !important;
-}
+.gradio-monitor-wrap { padding: 16px 18px !important; }
 
 .gradio-monitor-head {
   display: flex;
@@ -2279,16 +2262,12 @@ button[aria-label="secondary"]:hover {
 
 .gradio-monitor-head h3 {
   margin: 0;
-  color: var(--burgundy-deep);
+  color: #d8d4ff;
   font-size: 17px;
   font-weight: 900;
 }
 
-.gradio-monitor-head p {
-  margin: 4px 0 0;
-  color: var(--muted);
-  font-size: 12px;
-}
+.gradio-monitor-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
 
 .gradio-service-card {
   display: flex;
@@ -2298,7 +2277,7 @@ button[aria-label="secondary"]:hover {
   padding: 15px 17px;
   border: 1px solid var(--line);
   border-radius: 15px;
-  background: #fffdfb;
+  background: #0b1425;
 }
 
 .gradio-service-title {
@@ -2320,57 +2299,28 @@ button[aria-label="secondary"]:hover {
   font-size: 10px;
   font-weight: 900;
   letter-spacing: .35px;
-  background: rgba(255,255,255,.64);
-}
-
-.gradio-service-detail {
-  margin-top: 5px;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.gradio-service-meta {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 7px 12px;
-  color: var(--muted-2);
-  font-size: 11px;
+  background: rgba(255,255,255,.025);
 }
 
+.gradio-service-detail { margin-top: 5px; color: var(--muted); font-size: 12px; }
+.gradio-service-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px 12px; color: var(--muted-2); font-size: 11px; }
 .gradio-service-meta b { color: var(--ink); }
-.gradio-service-meta a { color: var(--burgundy) !important; text-decoration: none; font-weight: 850; }
+.gradio-service-meta a { color: var(--cyan) !important; text-decoration: none; font-weight: 850; }
 
-.service-ok {
-  border-color: rgba(47, 125, 99, .24);
-  background: rgba(47, 125, 99, .055);
-}
-.service-ok .service-dot,
-.service-ok .service-pill { color: var(--green); }
-
-.service-warn {
-  border-color: rgba(168, 111, 33, .25);
-  background: rgba(168, 111, 33, .055);
-}
-.service-warn .service-dot,
-.service-warn .service-pill { color: var(--amber); }
-
-.service-down {
-  border-color: rgba(181, 66, 79, .24);
-  background: rgba(181, 66, 79, .055);
-}
-.service-down .service-dot,
-.service-down .service-pill { color: var(--red); }
-
-.service-idle .service-dot,
-.service-idle .service-pill { color: var(--muted); }
+.service-ok { border-color: rgba(45, 212, 167, .25); background: rgba(45, 212, 167, .055); }
+.service-ok .service-dot, .service-ok .service-pill { color: var(--green); }
+.service-warn { border-color: rgba(245, 158, 11, .25); background: rgba(245, 158, 11, .055); }
+.service-warn .service-dot, .service-warn .service-pill { color: var(--amber); }
+.service-down { border-color: rgba(251, 113, 133, .25); background: rgba(251, 113, 133, .055); }
+.service-down .service-dot, .service-down .service-pill { color: var(--red); }
+.service-idle .service-dot, .service-idle .service-pill { color: var(--muted); }
 
 /* ---------- Generated key ---------- */
 .key-output textarea {
   min-height: 60px !important;
-  color: var(--burgundy-deep) !important;
-  background: linear-gradient(180deg, #fffaf4, #f7ece6) !important;
-  border: 1px dashed rgba(181, 138, 75, .55) !important;
+  color: #8be9f7 !important;
+  background: linear-gradient(180deg, #0a1728, #0a1221) !important;
+  border: 1px dashed rgba(34, 211, 238, .50) !important;
   font-family: 'SFMono-Regular', Consolas, 'Myanmar Text', monospace !important;
   font-size: 18px !important;
   font-weight: 900 !important;
@@ -2382,34 +2332,29 @@ button[aria-label="secondary"]:hover {
   display: inline-block;
   padding: 4px 9px;
   border-radius: 999px;
-  color: #2f6f59;
-  background: rgba(47, 125, 99, .08);
-  border: 1px solid rgba(47, 125, 99, .18);
+  color: #63e6c7;
+  background: rgba(45, 212, 167, .08);
+  border: 1px solid rgba(45, 212, 167, .20);
   font-size: 11px;
   font-weight: 900;
 }
 
 .permission-badge.restricted {
-  color: #8a6028;
-  background: rgba(181, 138, 75, .09);
-  border-color: rgba(181, 138, 75, .24);
+  color: #ffd166;
+  background: rgba(246, 196, 83, .08);
+  border-color: rgba(246, 196, 83, .22);
 }
 
 /* ---------- Markdown / alerts ---------- */
-.gradio-container .prose {
-  color: var(--text) !important;
-}
-
-.gradio-container .prose strong {
-  color: var(--burgundy-deep) !important;
-}
+.gradio-container .prose { color: var(--text) !important; }
+.gradio-container .prose strong { color: #bcb5ff !important; }
 
 .login-error-alert {
   padding: 12px 14px;
-  border: 1px solid rgba(181,66,79,.25);
+  border: 1px solid rgba(251,113,133,.28);
   border-radius: 13px;
-  color: #8f2938;
-  background: rgba(181,66,79,.06);
+  color: #ff9aae;
+  background: rgba(251,113,133,.07);
 }
 
 /* ---------- Footer ---------- */
@@ -2424,54 +2369,29 @@ button[aria-label="secondary"]:hover {
 }
 
 @media (max-width: 760px) {
-  .gradio-container {
-    padding: 12px 10px 30px !important;
-  }
-  .hero {
-    min-height: 155px;
-    padding: 25px 21px;
-    border-radius: 20px;
-  }
-  .hero::before {
-    right: 11px;
-    top: -18px;
-    font-size: 125px;
-  }
-  .hero::after {
-    left: 20px;
-    width: 100px;
-  }
-  .glass-card, .login-card {
-    padding: 16px !important;
-    border-radius: 16px !important;
-  }
-  .stat-card {
-    min-height: 102px;
-  }
-  .stat-card input {
-    font-size: 23px !important;
-  }
-  .gradio-service-card {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-  .gradio-service-meta {
-    justify-content: flex-start;
-  }
+  .gradio-container { padding: 12px 10px 30px !important; }
+  .hero { min-height: 155px; padding: 25px 21px; border-radius: 20px; }
+  .hero::before { right: 11px; top: -18px; font-size: 125px; }
+  .hero::after { left: 20px; width: 110px; }
+  .glass-card, .login-card { padding: 16px !important; border-radius: 16px !important; }
+  .stat-card { min-height: 102px; }
+  .stat-card input { font-size: 23px !important; }
+  .gradio-service-card { align-items: flex-start; flex-direction: column; }
+  .gradio-service-meta { justify-content: flex-start; }
 }
 """
 
 
 theme = gr.themes.Soft(
-    primary_hue="rose",
-    secondary_hue="amber",
-    neutral_hue="stone",
+    primary_hue="indigo",
+    secondary_hue="cyan",
+    neutral_hue="slate",
     radius_size="lg",
 ).set(
-    body_background_fill="#f6f0eb",
-    body_text_color="#3a2730",
-    block_background_fill="#fffaf6",
-    block_border_color="rgba(103, 69, 80, 0.14)",
+    body_background_fill="#070b14",
+    body_text_color="#d7deed",
+    block_background_fill="#0e1628",
+    block_border_color="rgba(148, 163, 184, 0.16)",
 )