Update app.py

app.py

@@ -1,5 +1,5 @@
 # -*- coding: utf-8 -*-
-from typing import Optional
+from typing import Optional, Dict, Any
 import base64, mimetypes
 from html import escape
 from pathlib import Path
@@ -12,82 +12,104 @@ ASSETS   = BASE_DIR / "assets"
 # ========= META =========
 st.set_page_config(page_title="ST_LOG SUITE — Apps", page_icon="🧭", layout="wide")
 
-# ========= TEXT =========
-SUITE_NAME    = "ST_LOG SUITE"
-SUITE_TAGLINE = "Generating AI-Based Well Logging Profiles While Drilling"
-
-# ========= COLOR PALETTE =========
-NAVY_900 = "##388E3C"
-NAVY_700 = "##388E3C"
-SLATE_600 = "#4DD0E1"
-PAPER_TOP = "#D32F2F"
-PAPER_BOT = "#FFD54F"
-GOLD      = "#EAB308"
-
-# ========= SIZE & SPACING CONTROLS (EDIT THESE) =========
-TOP_PADDING_PX       = 50         # top padding of the whole page
-STRIP_GAP_PX         = 10         # space between pill and tagline
-STRIP_PILL_PAD_V_PX  = 8
-STRIP_PILL_PAD_H_PX  = 14
-STRIP_PILL_FONT_PX   = 16
-TAGLINE_FONT_PX      = 15
-STRIP_BELOW_GAP_PX   = 30         # space between the top-left strip row and the hero
-
-HERO_LOGO_WIDTH_PX   = 400        # width of the hero logo
-HERO_MARGIN_BOTTOM_PX= 30         # space under the hero logo
-
-GRID_GAP_PX          = 50         # space between cards
-CARD_WIDTH_PX        = 340        # card width
-CARD_RADIUS_PX       = 22
-CARD_BORDER_PX       = 2
-CARD_PAD_V_PX        = 24
-CARD_PAD_H_PX        = 20
-
-ICON_DIAM_PX         = 118        # outer circle
-ICON_IMG_PX          = 106        # image inside the circle
-
-TITLE_FONT_PX        = 25         # app title size
-BLURB_FONT_PX        = 16
-BUTTON_FONT_PX       = 16
-BUTTON_PAD_V_PX      = 12
-BUTTON_PAD_H_PX      = 20
-BUTTON_RADIUS_PX     = 14
-
-# ========= BEHAVIOR / OPTIONS =========
-SHOW_CARD_CHIP       = False      # show small suite chip inside each card?
-USE_TINTED_CARD_BG   = True       # very light background tint per card (3–5%)
-
-# ========= ASSETS =========
-HERO_LOGO = ASSETS / "AI_Suite_Log_logo.png"
-ICON_GR   = ASSETS / "GR_logo.png"
-ICON_TS   = ASSETS / "Ts_logo.png"
-ICON_TC   = ASSETS / "Tc_logo.png"
-
-APPS = [
+# ========= GLOBAL THEME (one place) =========
+THEME: Dict[str, Any] = {
+    "strip": {
+        "gap": 10,               # px between pill and tagline
+        "below_gap": 30,         # px between strip row and hero
+        "pill_pad_v": 8,         # px
+        "pill_pad_h": 14,        # px
+        "pill_font": 16,         # px
+        "tagline_font": 15,      # px
+        "bg1": "#90CAF9",        # strip gradient start
+        "bg2": "#90CAF9",        # strip gradient end
+        "text": "#EAB308",       # gold text in pill
+        "tagline_color": "#000000",
+    },
+    "page": {
+        "top_padding": 50,       # px top padding for page
+        "container_width": 1120, # max content width
+        "bg_radial": True,       # premium faint radial bg
+    },
+    "hero": {
+        "width": 400,            # px
+        "margin_bottom": 30,     # px space under hero
+        "logo": ASSETS / "AI_Suite_Log_logo.png",
+    },
+    "grid": {
+        "gap": 50,               # px between cards
+        "card_width": 340,       # default card width (px)
+    },
+    "card": {
+        "radius": 22,            # px
+        "border_width": 2,       # px
+        "pad_v": 24,             # px
+        "pad_h": 20,             # px
+        "border": "#0B1220",     # dark outline
+        "border_hover": "#1E293B",
+        "bg_top":  "#E57373",    # top colour of default card gradient
+        "bg_bot":  "#E57373",    # bottom colour of default card gradient
+        "title_color": "#0B1220",
+        "blurb_color": "#566275",
+    },
+    "icon": {
+        "diam": 118,             # px outer circle
+        "img":  106,             # px image
+        "circle_bg": "#F1F5F9",
+        "circle_border": "rgba(12,18,32,0.10)",
+    },
+    "button": {
+        "pad_v": 12,             # px
+        "pad_h": 20,             # px
+        "radius": 14,            # px
+        "bg1": "#90CAF9",
+        "bg2": "#90CAF9",
+        "text": "#EAB308",
+        "border": "rgba(11,18,32,.45)",
+    },
+}
+
+# ========= CARDS (content + per-card overrides) =========
+CARDS = [
     {
         "title": "ST_Log_GR",
-        "url":   "https://smart-thinking-gr.hf.space/",
         "blurb": "Real-time gamma-ray log prediction.",
-        "icon":  ICON_GR,
-        "tint":  "linear-gradient(180deg, rgba(14,116,144,0.05) 0%, rgba(14,116,144,0.02) 100%)",
+        "url":   "https://smart-thinking-gr.hf.space/",
+        "icon":  ASSETS / "GR_logo.png",
+        # Optional per-card overrides:
+        "style": {
+            "bg_top":  "rgba(14,116,144,0.05)",
+            "bg_bot":  "rgba(14,116,144,0.02)",
+            # "border":  "#0B1220",
+            # "title_color": "#0B1220",
+            # "blurb_color": "#566275",
+            # "width": 360, "radius": 24, "pad_v": 26, "pad_h": 22,
+            # "btn_bg1": "#0B1220", "btn_bg2": "#1F2937", "btn_text": "#FFFFFF",
+        },
     },
     {
         "title": "ST_Log_Sonic (Ts)",
-        "url":   "https://smart-thinking-sonic-ts.hf.space",
         "blurb": "Predict shear slowness (DtS) in real time.",
-        "icon":  ICON_TS,
-        "tint":  "linear-gradient(180deg, rgba(2,132,199,0.05) 0%, rgba(2,132,199,0.02) 100%)",
+        "url":   "https://smart-thinking-sonic-ts.hf.space",
+        "icon":  ASSETS / "Ts_logo.png",
+        "style": {
+            "bg_top":  "rgba(2,132,199,0.05)",
+            "bg_bot":  "rgba(2,132,199,0.02)",
+        },
     },
     {
         "title": "ST_Log_Sonic (Tc)",
-        "url":   "https://smart-thinking-sonic-tc.hf.space",
         "blurb": "Predict compressional slowness (DtC) in real time.",
-        "icon":  ICON_TC,
-        "tint":  "linear-gradient(180deg, rgba(99,102,241,0.05) 0%, rgba(99,102,241,0.02) 100%)",
+        "url":   "https://smart-thinking-sonic-tc.hf.space",
+        "icon":  ASSETS / "Tc_logo.png",
+        "style": {
+            "bg_top":  "rgba(99,102,241,0.05)",
+            "bg_bot":  "rgba(99,102,241,0.02)",
+        },
     },
 ]
 
-# ========= HELPERS =========
+# ========= Helpers =========
 def data_uri(path: Path) -> Optional[str]:
     if not path or not path.exists():
         return None
@@ -105,77 +127,90 @@ def img_tag(path: Path, alt: str, cls: str = "", style: str = "") -> str:
     style_attr = f' style="{style}"' if style else ""
     return f'<img{cls_attr}{style_attr} src="{uri}" alt="{escape(alt)}" />'
 
-# ========= CSS =========
+def get_style(card_style: Dict[str, Any], key: str, fallback_key: str = None):
+    if key in card_style:
+        return card_style[key]
+    if fallback_key:
+        return THEME["card"][fallback_key]
+    return None
+
+# ========= CSS (driven from THEME) =========
+strip = THEME["strip"]; page = THEME["page"]; hero = THEME["hero"]
+grid  = THEME["grid"];  card = THEME["card"];  icon = THEME["icon"]; button = THEME["button"]
+
+bg_radial_css = """
+background:
+  radial-gradient(980px 460px at 50% -140px,
+    rgba(2,12,30,0.06) 0%,
+    rgba(2,12,30,0.04) 28%,
+    rgba(255,255,255,0.98) 60%,
+    rgba(255,255,255,1) 100%);
+""" if page["bg_radial"] else "background: #fff;"
+
 st.markdown(f"""
 <style>
   :root {{
-    /* sizes */
-    --top-pad: {TOP_PADDING_PX}px;
-    --strip-gap: {STRIP_GAP_PX}px;
-    --strip-pill-pv: {STRIP_PILL_PAD_V_PX}px;
-    --strip-pill-ph: {STRIP_PILL_PAD_H_PX}px;
-    --strip-pill-fs: {STRIP_PILL_FONT_PX}px;
-    --tagline-fs: {TAGLINE_FONT_PX}px;
-    --strip-row-mb: {STRIP_BELOW_GAP_PX}px;
-
-    --hero-w: {HERO_LOGO_WIDTH_PX}px;
-    --hero-mb: {HERO_MARGIN_BOTTOM_PX}px;
-
-    --grid-gap: {GRID_GAP_PX}px;
-    --card-w: {CARD_WIDTH_PX}px;
-    --card-r: {CARD_RADIUS_PX}px;
-    --card-bw: {CARD_BORDER_PX}px;
-    --card-pv: {CARD_PAD_V_PX}px;
-    --card-ph: {CARD_PAD_H_PX}px;
-
-    --icon-d: {ICON_DIAM_PX}px;
-    --icon-img: {ICON_IMG_PX}px;
-
-    --title-fs: {TITLE_FONT_PX}px;
-    --blurb-fs: {BLURB_FONT_PX}px;
-    --btn-fs: {BUTTON_FONT_PX}px;
-    --btn-pv: {BUTTON_PAD_V_PX}px;
-    --btn-ph: {BUTTON_PAD_H_PX}px;
-    --btn-r: {BUTTON_RADIUS_PX}px;
-
-    /* colors */
-    --navy1: {NAVY_900};
-    --navy2: {NAVY_700};
-    --gold:  {GOLD};
-    --slate6:{SLATE_600};
-
-    /* outlines / 3D */
-    --card-stroke: {NAVY_900};
-    --card-stroke-hover: #1E293B;
+    --top-pad: {page["top_padding"]}px;
+
+    --strip-gap: {strip["gap"]}px;
+    --strip-row-mb: {strip["below_gap"]}px;
+    --strip-pill-pv: {strip["pill_pad_v"]}px;
+    --strip-pill-ph: {strip["pill_pad_h"]}px;
+    --strip-pill-fs: {strip["pill_font"]}px;
+    --tagline-fs: {strip["tagline_font"]}px;
+
+    --hero-w: {hero["width"]}px;
+    --hero-mb: {hero["margin_bottom"]}px;
+
+    --grid-gap: {grid["gap"]}px;
+    --card-w: {grid["card_width"]}px;
+    --card-r: {card["radius"]}px;
+    --card-bw: {card["border_width"]}px;
+    --card-pv: {card["pad_v"]}px;
+    --card-ph: {card["pad_h"]}px;
+
+    --icon-d: {icon["diam"]}px;
+    --icon-img: {icon["img"]}px;
+
+    --title-fs: 25px;
+    --blurb-fs: 16px;
+    --btn-fs: {button["pad_v"] + 4}px; /* just a simple mapping; override below if desired */
+
+    --stripBg1: {strip["bg1"]};
+    --stripBg2: {strip["bg2"]};
+    --stripText: {strip["text"]};
+    --taglineColor: {strip["tagline_color"]};
+
+    --cardStroke: {card["border"]};
+    --cardStrokeHover: {card["border_hover"]};
+
+    --btn1: {button["bg1"]};
+    --btn2: {button["bg2"]};
+    --btnText: {button["text"]};
+    --btnBorder: {button["border"]};
   }}
 
   html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
   [data-testid="stAppViewContainer"] > .main {{ padding-top: 0 !important; padding-bottom: 0 !important; }}
 
   .block-container {{
-    max-width: 1120px;
+    max-width: {page["container_width"]}px;
     min-height: 100vh;
     display: flex; flex-direction: column;
     gap: 14px;
     padding: var(--top-pad) 0 28px !important;
-    background:
-      radial-gradient(980px 460px at 50% -140px,
-        rgba(2,12,30,0.06) 0%,
-        rgba(2,12,30,0.04) 28%,
-        rgba(255,255,255,0.98) 60%,
-        rgba(255,255,255,1) 100%);
+    {bg_radial_css}
   }}
 
-  /* ===== TOP-LEFT STRIP ROW ===== */
+  /* ===== TOP-LEFT STRIP ===== */
   .suite-row {{
     display:flex; align-items:center; gap: var(--strip-gap);
     justify-content:flex-start; flex-wrap: wrap;
     margin: 0 0 var(--strip-row-mb) 0;
   }}
-
   .suite-pill {{
-    background: linear-gradient(90deg, var(--navy1) 0%, var(--navy2) 100%);
-    color: var(--gold);
+    background: linear-gradient(90deg, var(--stripBg1) 0%, var(--stripBg2) 100%);
+    color: var(--stripText);
     padding: var(--strip-pill-pv) var(--strip-pill-ph);
     border-radius: 999px;
     font-weight: 800; letter-spacing: .25px;
@@ -184,12 +219,12 @@ st.markdown(f"""
     white-space: nowrap;
   }}
   .suite-tagline {{
-    color: var(--slate6); font-weight: 600; opacity: .95;
+    color: var(--taglineColor); font-weight: 600; opacity: .95;
     font-size: var(--tagline-fs);
     white-space: nowrap;
   }}
 
-  /* HERO LOGO (below the strip) */
+  /* ===== HERO ===== */
   .hero {{ text-align:center; margin: 0 0 var(--hero-mb); }}
   .hero img {{
     width: var(--hero-w); max-width: 92vw; height: auto;
@@ -197,13 +232,12 @@ st.markdown(f"""
     filter: drop-shadow(0 6px 16px rgba(0,0,0,.10));
   }}
 
-  /* GRID */
+  /* ===== GRID ===== */
   .grid {{
     display: grid;
     grid-template-columns: repeat(3, var(--card-w));
     gap: var(--grid-gap);
-    justify-content: center;
-    align-items: stretch;
+    justify-content: center; align-items: stretch;
     margin-top: 10px;
   }}
   @media (max-width: 1120px) {{
@@ -213,25 +247,24 @@ st.markdown(f"""
     .grid {{ grid-template-columns: 1fr; }}
   }}
 
-  /* CARD — dark outline + premium 3D look */
+  /* ===== CARD (uses per-card CSS vars) ===== */
   .card {{
     position: relative;
-    width: var(--card-w);
-    border-radius: var(--card-r);
-    padding: var(--card-pv) var(--card-ph);
-    background: var(--card-bg, linear-gradient(180deg, {PAPER_TOP} 0%, {PAPER_BOT} 100%));
-    border: var(--card-bw) solid var(--card-stroke);
+    width: var(--c-w, var(--card-w));
+    border-radius: var(--c-radius, var(--card-r));
+    padding: var(--c-pv, var(--card-pv)) var(--c-ph, var(--card-ph));
+    background: linear-gradient(180deg, var(--c-bg-top, {card["bg_top"]}) 0%, var(--c-bg-bot, {card["bg_bot"]}) 100%);
+    border: var(--c-bw, var(--card-bw)) solid var(--c-border, var(--cardStroke));
     box-shadow:
       0 14px 32px rgba(2,20,35,.12),
       0 1px 0 rgba(255,255,255,0.90) inset,
       0 -1px 10px rgba(255,255,255,0.40) inset;
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
-    text-align:center; display:flex; flex-direction:column; gap:16px;
-    align-items: center;
+    text-align:center; display:flex; flex-direction:column; gap:16px; align-items: center;
   }}
   .card:hover {{
     transform: translateY(-6px) scale(1.01);
-    border-color: var(--card-stroke-hover);
+    border-color: var(--cardStrokeHover);
     box-shadow:
       0 22px 56px rgba(2,20,35,.18),
       0 1px 0 rgba(255,255,255,0.92) inset,
@@ -239,97 +272,118 @@ st.markdown(f"""
     filter: saturate(1.03);
   }}
 
-  .suite-chip {{
-    position: absolute; top: 12px; right: 12px;
-    background: linear-gradient(90deg, var(--navy1) 0%, var(--navy2) 100%);
-    color: var(--gold); padding: 6px 10px; border-radius: 999px;
-    font-weight: 700; font-size: 13px; letter-spacing: .2px;
-    box-shadow: 0 6px 14px rgba(2,12,30,.18);
-  }}
-
   .icon-wrap {{
-    width: var(--icon-d); height: var(--icon-d); border-radius: 9999px;
-    background: #F1F5F9;
-    display:grid; place-items:center;
-    border: 1px solid rgba(12,18,32,0.10);
+    width: var(--c-icon-d, {icon["diam"]}px); height: var(--c-icon-d, {icon["diam"]}px);
+    border-radius: 9999px; display:grid; place-items:center;
+    background: var(--c-icon-bg, {icon["circle_bg"]});
+    border: 1px solid var(--c-icon-border, {icon["circle_border"]});
     box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 22px rgba(2,20,35,.07);
   }}
   .icon-wrap img {{
-    width: var(--icon-img); height: var(--icon-img); border-radius:9999px; display:block;
+    width: var(--c-icon-img, {icon["img"]}px); height: var(--c-icon-img, {icon["img"]}px);
+    border-radius:9999px; display:block;
   }}
 
   .card h3 {{
-    margin: 0; font-size: var(--title-fs); font-weight: 900; color:#0b1220;
-    letter-spacing: .15px;
+    margin: 0; font-size: var(--c-title-fs, 25px); font-weight: 900;
+    color: var(--c-title-color, {card["title_color"]}); letter-spacing: .15px;
   }}
   .card p {{
-    color:#566275; min-height: 40px; margin: 0 10px; font-size: var(--blurb-fs);
+    color: var(--c-blurb-color, {card["blurb_color"]}); min-height: 40px; margin: 0 10px;
+    font-size: var(--c-blurb-fs, 16px);
   }}
 
   .btn {{
-    display:inline-block; padding: var(--btn-pv) var(--btn-ph); border-radius: var(--btn-r);
-    border: 1px solid rgba(11,18,32,.45);
-    background: linear-gradient(180deg, var(--navy1) 0%, var(--navy2) 100%);
-    font-weight: 800; letter-spacing:.3px; font-size: var(--btn-fs);
+    display:inline-block; padding: var(--c-btn-pv, {button["pad_v"]}px) var(--c-btn-ph, {button["pad_h"]}px);
+    border-radius: var(--c-btn-r, {button["radius"]}px);
+    border: 1px solid var(--c-btn-border, {button["border"]});
+    background: linear-gradient(180deg, var(--c-btn-bg1, {button["bg1"]}) 0%, var(--c-btn-bg2, {button["bg2"]}) 100%);
+    font-weight: 800; letter-spacing:.3px; font-size: var(--c-btn-fs, 16px);
     margin: 6px auto 0;
     box-shadow: 0 12px 28px rgba(11,18,32,.28), inset 0 1px 0 rgba(255,255,255,.10);
+    color: var(--c-btn-text, {button["text"]});
+    text-decoration: none;
   }}
   a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active, a.btn:focus {{
-    color: #ffffff !important; text-decoration: none !important;
+    color: var(--c-btn-text, {button["text"]}) !important; text-decoration: none !important;
   }}
   .btn:hover {{
     filter: brightness(1.03) saturate(1.04);
     transform: translateY(-1px);
     box-shadow: 0 16px 38px rgba(11,18,32,.36);
   }}
-  .btn:focus {{
-    outline: none;
-    box-shadow: 0 0 0 4px rgba(30,41,59,.28), 0 16px 38px rgba(11,18,32,.36);
-  }}
 
   .footer {{ text-align:center; color:#3f4a5a; font-size:0.96em; margin-top: 26px; }}
   .footer hr {{ margin: 12px 0; border-color: rgba(0,0,0,.08); }}
 </style>
 """, unsafe_allow_html=True)
 
-# ===== TOP-LEFT STRIP (then hero below) =====
+# ========= Strip (top-left) =========
 st.markdown(
     f"""
     <div class="suite-row">
-      <span class="suite-pill">{escape(SUITE_NAME)}</span>
-      <span class="suite-tagline">{escape(SUITE_TAGLINE)}</span>
+      <span class="suite-pill">{"ST_LOG SUITE"}</span>
+      <span class="suite-tagline">{"Generating AI-Based Well Logging Profiles While Drilling"}</span>
     </div>
     """,
     unsafe_allow_html=True,
 )
 
-# ===== HERO (logo below the strip) =====
-hero_html = img_tag(HERO_LOGO, "ST_LOG SUITE")
+# ========= Hero =========
+hero_html = img_tag(hero["logo"], "ST_LOG SUITE")
 st.markdown(f"<div class='hero'>{hero_html}</div>", unsafe_allow_html=True)
 
-# ===== CARDS =====
-def app_card(app: dict) -> str:
-    tint = app.get("tint") if USE_TINTED_CARD_BG else f"linear-gradient(180deg, {PAPER_TOP} 0%, {PAPER_BOT} 100%)"
-    icon_html = img_tag(app.get("icon"), "icon",
-                        style=f"width:{ICON_IMG_PX}px;height:{ICON_IMG_PX}px;border-radius:9999px;") \
-            if app.get("icon") and app["icon"].exists() else ""
+# ========= Cards =========
+def build_card_vars(style: Dict[str, Any]) -> str:
+    """Turn the per-card style dict into CSS variables for inline override."""
+    s = []
+    if "width"       in style: s.append(f"--c-w:{int(style['width'])}px")
+    if "radius"      in style: s.append(f"--c-radius:{int(style['radius'])}px")
+    if "pad_v"       in style: s.append(f"--c-pv:{int(style['pad_v'])}px")
+    if "pad_h"       in style: s.append(f"--c-ph:{int(style['pad_h'])}px")
+
+    if "bg_top"      in style: s.append(f"--c-bg-top:{style['bg_top']}")
+    if "bg_bot"      in style: s.append(f"--c-bg-bot:{style['bg_bot']}")
+    if "border"      in style: s.append(f"--c-border:{style['border']}")
+    if "border_width" in style: s.append(f"--c-bw:{int(style['border_width'])}px")
+
+    if "title_color" in style: s.append(f"--c-title-color:{style['title_color']}")
+    if "title_fs"    in style: s.append(f"--c-title-fs:{int(style['title_fs'])}px")
+    if "blurb_color" in style: s.append(f"--c-blurb-color:{style['blurb_color']}")
+    if "blurb_fs"    in style: s.append(f"--c-blurb-fs:{int(style['blurb_fs'])}px")
+
+    if "btn_bg1"     in style: s.append(f"--c-btn-bg1:{style['btn_bg1']}")
+    if "btn_bg2"     in style: s.append(f"--c-btn-bg2:{style['btn_bg2']}")
+    if "btn_text"    in style: s.append(f"--c-btn-text:{style['btn_text']}")
+    if "btn_border"  in style: s.append(f"--c-btn-border:{style['btn_border']}")
+    if "btn_fs"      in style: s.append(f"--c-btn-fs:{int(style['btn_fs'])}px")
+    if "btn_pad_v"   in style: s.append(f"--c-btn-pv:{int(style['btn_pad_v'])}px")
+    if "btn_pad_h"   in style: s.append(f"--c-btn-ph:{int(style['btn_pad_h'])}px")
+
+    if "icon_diam"   in style: s.append(f"--c-icon-d:{int(style['icon_diam'])}px")
+    if "icon_img"    in style: s.append(f"--c-icon-img:{int(style['icon_img'])}px")
+    if "icon_bg"     in style: s.append(f"--c-icon-bg:{style['icon_bg']}")
+    if "icon_border" in style: s.append(f"--c-icon-border:{style['icon_border']}")
+
+    return "; ".join(s)
+
+def app_card(card_cfg: Dict[str, Any]) -> str:
+    style = card_cfg.get("style", {})
+    vars_inline = build_card_vars(style)
+    icon_html = img_tag(card_cfg.get("icon"), "icon") if card_cfg.get("icon") and card_cfg["icon"].exists() else ""
     target = "_self"
-    chip = f"<div class='suite-chip'>{escape(SUITE_NAME)}</div>" if SHOW_CARD_CHIP else ""
-    style_vars = f"--card-bg:{tint};"
     return (
-        f"<div class='card' style='{style_vars}'>"
-        + chip
+        f"<div class='card' style='{vars_inline}'>"
         + f"<div class='icon-wrap'>{icon_html}</div>"
-        + f"<h3>{escape(app['title'])}</h3>"
-        + f"<p>{escape(app['blurb'])}</p>"
-        + f"<a class='btn' href='{escape(app['url'])}' target='{target}' rel='noopener'>Run App</a>"
+        + f"<h3>{escape(card_cfg['title'])}</h3>"
+        + f"<p>{escape(card_cfg['blurb'])}</p>"
+        + f"<a class='btn' href='{escape(card_cfg['url'])}' target='{target}' rel='noopener'>Run App</a>"
         + "</div>"
     )
 
-cards_html = "".join(app_card(a) for a in APPS)
-st.markdown(f"<div class='grid'>{cards_html}</div>", unsafe_allow_html=True)
+st.markdown("<div class='grid'>" + "".join(app_card(c) for c in CARDS) + "</div>", unsafe_allow_html=True)
 
-# ===== FOOTER =====
+# ========= Footer =========
 st.markdown(
     """
     <hr>