Update app.py

app.py

@@ -19,343 +19,112 @@ else:
     logger.warning("HF_TOKEN not found - running without authentication")
 
 DATASET_NAME = "ysharma/build-small-hackathon-registrations"
+DISCORD_INVITE = "https://discord.gg/YHECTft87Z"
+DISCORD_CHANNEL = "build-small-hackathon-official"
+
 
 HEADER_HTML = """
-<div style="
-    background: linear-gradient(135deg, #f5ecd9 0%, #ebe0c4 50%, #dccfa8 100%);
-    border-radius: 20px;
-    padding: 0;
-    margin-bottom: 24px;
-    box-shadow: 0 10px 40px rgba(74, 49, 16, 0.15);
-    overflow: hidden;
-    border: 2px solid #8b6f47;
-">
-    <!-- Banner Placeholder (artwork coming soon) -->
-    <div style="
-        background: linear-gradient(135deg, #2d5016 0%, #4a7c2e 50%, #6b9039 100%);
-        padding: 56px 32px;
-        text-align: center;
-        position: relative;
-        color: #f5ecd9;
-        border-bottom: 2px solid #8b6f47;
-    ">
-        <div style="
-            font-size: 13px;
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            opacity: 0.85;
-            margin-bottom: 12px;
-        ">❋ Gradio &times; Hugging Face presents ❋</div>
-        <h1 style="
-            margin: 0 0 12px 0;
-            font-size: 44px;
-            font-weight: 800;
-            letter-spacing: -1px;
-            color: #f5ecd9;
-        ">🪵 Build Small Hackathon</h1>
-        <div style="
-            font-size: 20px;
-            font-style: italic;
-            margin-bottom: 8px;
-            color: #e8dcc0;
-        ">Making AI Fun Again</div>
-        <div style="font-size: 16px; opacity: 0.85;">May 29 – June 8, 2026 · Online &amp; Global</div>
-        <div style="
-            margin-top: 24px;
-            display: inline-block;
-            background: rgba(245, 236, 217, 0.15);
-            border: 1px dashed rgba(245, 236, 217, 0.5);
-            border-radius: 8px;
-            padding: 8px 16px;
-            font-size: 13px;
-            opacity: 0.85;
-        ">🗺️ event banner being illustrated · placeholder for now</div>
-    </div>
+<div class="bsh-banner">
+    <h1>🪵 Build Small Hackathon</h1>
+    <div class="tagline">Making AI Fun Again</div>
+    <div class="meta">May 29 – June 8, 2026 · Online &amp; Global</div>
+    <div class="placeholder">🗺️ event artwork being illustrated · placeholder for now</div>
+</div>
+"""
 
-    <!-- Content Section -->
-    <div style="padding: 28px 32px;">
-        <!-- Two Tracks -->
-        <a href="https://huggingface.co/build-small-hackathon" target="_blank" style="text-decoration: none;">
-            <div style="
-                background: rgba(74, 124, 46, 0.08);
-                border: 2px solid rgba(74, 124, 46, 0.35);
-                border-radius: 14px;
-                padding: 18px 22px;
-                margin-bottom: 14px;
-                transition: all 0.25s ease;
-            "
-            onmouseover="this.style.background='rgba(74, 124, 46, 0.15)'; this.style.transform='translateY(-2px)'"
-            onmouseout="this.style.background='rgba(74, 124, 46, 0.08)'; this.style.transform='translateY(0)'"
-            >
-                <div style="text-align: center; color: #2d5016; font-weight: 700; letter-spacing: 2px; font-size: 12px; margin-bottom: 14px;">
-                    ❋ TWO TRACKS ❋
-                </div>
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
-                    <div style="text-align: center;">
-                        <div style="font-size: 32px; margin-bottom: 6px;">🏡</div>
-                        <div style="color: #2d5016; font-weight: 700; font-size: 15px;">Backyard AI</div>
-                        <div style="color: #5d4a2e; font-size: 13px; line-height: 1.4; margin-top: 4px;">Solve a real problem for someone you know</div>
-                    </div>
-                    <div style="text-align: center;">
-                        <div style="font-size: 32px; margin-bottom: 6px;">🍄</div>
-                        <div style="color: #2d5016; font-weight: 700; font-size: 15px;">Thousand Token Wood</div>
-                        <div style="color: #5d4a2e; font-size: 13px; line-height: 1.4; margin-top: 4px;">Build something delightful and whimsical</div>
-                    </div>
-                </div>
-                <div style="text-align: center; margin-top: 14px; color: #6b4423; font-size: 12px;">
-                    Read the full chapter book → huggingface.co/build-small-hackathon
-                </div>
-            </div>
-        </a>
-
-        <!-- Three Rules + Coming Soon row -->
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;">
-            <div style="
-                background: rgba(139, 111, 71, 0.10);
-                border: 1px solid rgba(139, 111, 71, 0.35);
-                border-radius: 10px;
-                padding: 14px 16px;
-            ">
-                <div style="color: #6b4423; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; margin-bottom: 8px;">✦ THE 3 RULES</div>
-                <div style="color: #3a2a14; font-size: 13px; line-height: 1.7;">
-                    1. Models ≤ 32B parameters<br>
-                    2. Built on Gradio + Spaces<br>
-                    3. Demo video + social post
-                </div>
+INFO_ROW_HTML = """
+<div class="bsh-info-row">
+    <div class="bsh-card">
+        <div class="bsh-title">❋ Two Tracks</div>
+        <div class="bsh-content">
+            <div class="bsh-track">
+                <span class="bsh-emoji">🏡</span>
+                <span class="bsh-track-name">Backyard AI</span>
             </div>
-            <div style="
-                background: rgba(201, 176, 114, 0.20);
-                border: 1px solid rgba(201, 176, 114, 0.55);
-                border-radius: 10px;
-                padding: 14px 16px;
-            ">
-                <div style="color: #6b4423; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; margin-bottom: 8px;">🎁 PRIZES &amp; CREDITS</div>
-                <div style="color: #3a2a14; font-size: 13px; line-height: 1.7; font-style: italic;">
-                    Sponsor lineup, prize pool, and free API/compute credits announcing soon — sit tight, friend.
-                </div>
+            <div class="bsh-track-desc">Solve a real problem for someone you know</div>
+            <div class="bsh-track">
+                <span class="bsh-emoji">🍄</span>
+                <span class="bsh-track-name">Thousand Token Wood</span>
             </div>
+            <div class="bsh-track-desc">Build something delightful and whimsical</div>
         </div>
-
-        <!-- Discord Notice -->
-        <div style="
-            background: rgba(74, 124, 46, 0.10);
-            border: 1px solid rgba(74, 124, 46, 0.35);
-            border-radius: 10px;
-            padding: 14px 18px;
-            text-align: center;
-        ">
-            <p style="margin: 0; color: #2d5016; font-size: 14px; line-height: 1.6;">
-                💬 Join the <a href="https://discord.gg/92sEPT2Zhv" target="_blank" style="color: #4a7c2e; font-weight: 700; text-decoration: underline;">Gradio Discord</a>
-                channel <code style="background: rgba(45, 80, 22, 0.12); padding: 2px 7px; border-radius: 4px; font-size: 12px; color: #2d5016;">build-small-hackathon-official</code>
-                for office hours, AMAs, and support.
-            </p>
+    </div>
+    <div class="bsh-card">
+        <div class="bsh-title">✦ Three Rules</div>
+        <ol class="bsh-rules">
+            <li>Models ≤ 32B parameters</li>
+            <li>Built on Gradio + Spaces</li>
+            <li>Demo video + social post</li>
+        </ol>
+    </div>
+    <div class="bsh-card">
+        <div class="bsh-title">🎁 Prizes &amp; Credits</div>
+        <div class="bsh-content">
+            <div class="bsh-soon"><em>Sponsor lineup, prize pool, and free API/compute credits announcing soon — sit tight, friend.</em></div>
+            <div class="bsh-link">→ <a href="https://huggingface.co/build-small-hackathon" target="_blank">Read the chapter book</a></div>
         </div>
     </div>
 </div>
 """
 
-DEADLINES_HTML = """
-<div style="
-    background: #f5ecd9;
-    border: 2px solid #8b6f47;
-    border-radius: 16px;
-    padding: 22px 24px;
-    margin-bottom: 16px;
-    box-shadow: 0 4px 12px rgba(74, 49, 16, 0.10);
-    height: 100%;
-    box-sizing: border-box;
-">
-    <div style="text-align: center; color: #6b4423; font-weight: 800; letter-spacing: 2px; font-size: 13px; margin-bottom: 16px;">
-        ✦ TRAIL MAP — KEY DATES ✦
-    </div>
-    <div style="display: grid; gap: 10px; color: #3a2a14;">
-        <div style="display: flex; align-items: center; gap: 10px;">
-            <span style="font-size: 20px;">📅</span>
-            <div><strong>Registration closes:</strong> Wed, May 27, 2026 · 23:59 UTC</div>
-        </div>
-        <div style="display: flex; align-items: center; gap: 10px;">
-            <span style="font-size: 20px;">🎟️</span>
-            <div><strong>Credits assigned:</strong> Thu, May 28, 2026</div>
-        </div>
-        <div style="display: flex; align-items: center; gap: 10px;">
-            <span style="font-size: 20px;">🚀</span>
-            <div><strong>Hack window opens:</strong> Fri, May 29, 2026</div>
+DATES_ROW_HTML = """
+<div class="bsh-dates-row">
+    <div class="bsh-dates">
+        <div class="bsh-title">✦ Trail Map · Key Dates</div>
+        <div class="bsh-dates-grid">
+            <div>📅 <b>Reg closes:</b> Wed, May 27 · 23:59 UTC</div>
+            <div>🎟️ <b>Credits:</b> Thu, May 28</div>
+            <div>🚀 <b>Hack opens:</b> Fri, May 29</div>
+            <div>🏁 <b>Submit by:</b> Mon, June 8</div>
         </div>
-        <div style="display: flex; align-items: center; gap: 10px;">
-            <span style="font-size: 20px;">🏁</span>
-            <div><strong>Submissions due:</strong> Mon, June 8, 2026</div>
+        <div class="bsh-warn">⛔ No registrations accepted once the event starts. Lock it in before May 27!</div>
+    </div>
+    <div class="bsh-counter">
+        <div class="bsh-counter-title">🏕️ Hack opens in</div>
+        <div class="bsh-counter-target">May 29, 2026 · 00:00 UTC</div>
+        <div class="bsh-nums">
+            <div class="bsh-unit"><span class="bsh-num" id="bsh-days">--</span><span class="bsh-lbl">Days</span></div>
+            <div class="bsh-unit"><span class="bsh-num" id="bsh-hours">--</span><span class="bsh-lbl">Hrs</span></div>
+            <div class="bsh-unit"><span class="bsh-num" id="bsh-mins">--</span><span class="bsh-lbl">Min</span></div>
+            <div class="bsh-unit"><span class="bsh-num" id="bsh-secs">--</span><span class="bsh-lbl">Sec</span></div>
         </div>
-        <div style="
-            margin-top: 6px;
-            background: rgba(178, 60, 50, 0.10);
-            border: 1px solid rgba(178, 60, 50, 0.40);
-            border-radius: 8px;
-            padding: 10px 12px;
-            color: #8b2e25;
-            font-weight: 600;
-            text-align: center;
-            font-size: 13px;
-        ">⛔ No registrations accepted once the event starts. Lock it in before May 27!</div>
     </div>
 </div>
 """
 
-COUNTER = """
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: transparent; }
-        .countdown-container {
-            background: linear-gradient(135deg, #2d5016 0%, #1f3a0f 100%);
-            border: 2px solid #8b6f47;
-            border-radius: 16px;
-            padding: 24px 22px;
-            box-shadow: 0 4px 12px rgba(74, 49, 16, 0.20);
-            text-align: center;
-            color: #f5ecd9;
-            height: 100%;
-            box-sizing: border-box;
-        }
-        .title {
-            font-size: 14px;
-            font-weight: 800;
-            letter-spacing: 2px;
-            text-transform: uppercase;
-            color: #f5ecd9;
-            margin-bottom: 4px;
-        }
-        .subtitle {
-            font-size: 13px;
-            color: #c9b072;
-            margin-bottom: 20px;
-            font-style: italic;
-        }
-        .countdown {
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            gap: 10px;
-            flex-wrap: wrap;
-        }
-        .time-unit {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            min-width: 70px;
-        }
-        .circle { position: relative; width: 78px; height: 78px; margin-bottom: 6px; }
-        .circle svg { width: 100%; height: 100%; transform: rotate(-90deg); }
-        .circle-bg { fill: none; stroke: rgba(245, 236, 217, 0.15); stroke-width: 5; }
-        .circle-progress {
-            fill: none;
-            stroke: #c9b072;
-            stroke-width: 5;
-            stroke-linecap: round;
-            stroke-dasharray: 220;
-            stroke-dashoffset: 220;
-            transition: stroke-dashoffset 0.3s ease;
-        }
-        .number {
-            position: absolute; top: 50%; left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 22px; font-weight: 700;
-            color: #f5ecd9;
-            font-family: 'Courier New', monospace;
-        }
-        .label {
-            font-size: 10px;
-            font-weight: 700;
-            color: #c9b072;
-            text-transform: uppercase;
-            letter-spacing: 1.5px;
-        }
-        @media (max-width: 480px) {
-            .countdown { gap: 6px; }
-            .circle { width: 62px; height: 62px; }
-            .number { font-size: 18px; }
-        }
-    </style>
-</head>
-<body>
-    <div class="countdown-container">
-        <div class="title">🏕️ Hack window opens in</div>
-        <div class="subtitle">May 29, 2026 · 00:00 UTC</div>
-        <div class="countdown">
-            <div class="time-unit">
-                <div class="circle">
-                    <svg><circle class="circle-bg" cx="39" cy="39" r="35"></circle><circle class="circle-progress" cx="39" cy="39" r="35" id="days-progress"></circle></svg>
-                    <div class="number" id="days">00</div>
-                </div>
-                <div class="label">Days</div>
-            </div>
-            <div class="time-unit">
-                <div class="circle">
-                    <svg><circle class="circle-bg" cx="39" cy="39" r="35"></circle><circle class="circle-progress" cx="39" cy="39" r="35" id="hours-progress"></circle></svg>
-                    <div class="number" id="hours">00</div>
-                </div>
-                <div class="label">Hours</div>
-            </div>
-            <div class="time-unit">
-                <div class="circle">
-                    <svg><circle class="circle-bg" cx="39" cy="39" r="35"></circle><circle class="circle-progress" cx="39" cy="39" r="35" id="minutes-progress"></circle></svg>
-                    <div class="number" id="minutes">00</div>
-                </div>
-                <div class="label">Minutes</div>
-            </div>
-            <div class="time-unit">
-                <div class="circle">
-                    <svg><circle class="circle-bg" cx="39" cy="39" r="35"></circle><circle class="circle-progress" cx="39" cy="39" r="35" id="seconds-progress"></circle></svg>
-                    <div class="number" id="seconds">00</div>
-                </div>
-                <div class="label">Seconds</div>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Hack window opens May 29, 2026 at 00:00 UTC (month is 0-indexed: 4 = May)
-        const targetDate = new Date(Date.UTC(2026, 4, 29, 0, 0, 0));
-        function updateCountdown() {
-            const now = new Date();
-            const difference = targetDate.getTime() - now.getTime();
-            if (difference > 0) {
-                const days = Math.floor(difference / (1000 * 60 * 60 * 24));
-                const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-                const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
-                const seconds = Math.floor((difference % (1000 * 60)) / 1000);
-                document.getElementById('days').textContent = days.toString().padStart(2, '0');
-                document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
-                document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
-                document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
-                updateProgress('days-progress', days, 365);
-                updateProgress('hours-progress', hours, 24);
-                updateProgress('minutes-progress', minutes, 60);
-                updateProgress('seconds-progress', seconds, 60);
-            } else {
-                document.getElementById('days').textContent = '00';
-                document.getElementById('hours').textContent = '00';
-                document.getElementById('minutes').textContent = '00';
-                document.getElementById('seconds').textContent = '00';
-                updateProgress('days-progress', 0, 365);
-                updateProgress('hours-progress', 0, 24);
-                updateProgress('minutes-progress', 0, 60);
-                updateProgress('seconds-progress', 0, 60);
-            }
-        }
-        function updateProgress(elementId, current, max) {
-            const circle = document.getElementById(elementId);
-            const circumference = 220;
-            const progress = (current / max) * circumference;
-            const offset = circumference - progress;
-            circle.style.strokeDashoffset = offset;
+DISCORD_RIBBON_HTML = f"""
+<div class="bsh-discord">
+    💬 Join the <a href="{DISCORD_INVITE}" target="_blank">Gradio Discord</a> · channel <code>{DISCORD_CHANNEL}</code> · office hours, AMAs, and support.
+</div>
+"""
+
+COUNTDOWN_JS = """
+() => {
+    const targetDate = new Date(Date.UTC(2026, 4, 29, 0, 0, 0));
+    function update() {
+        const now = new Date();
+        const diff = targetDate - now;
+        let d, h, m, s;
+        if (diff <= 0) {
+            d = h = m = s = 0;
+        } else {
+            d = Math.floor(diff / 86400000);
+            h = Math.floor((diff % 86400000) / 3600000);
+            m = Math.floor((diff % 3600000) / 60000);
+            s = Math.floor((diff % 60000) / 1000);
         }
-        updateCountdown();
-        setInterval(updateCountdown, 1000);
-    </script>
-</body>
-</html>
+        const set = (id, v) => {
+            const el = document.getElementById(id);
+            if (el) el.textContent = String(v).padStart(2, '0');
+        };
+        set('bsh-days', d);
+        set('bsh-hours', h);
+        set('bsh-mins', m);
+        set('bsh-secs', s);
+    }
+    update();
+    setInterval(update, 1000);
+}
 """
 
 
@@ -507,7 +276,7 @@ def verify_registration(email, hf_username):
         if isinstance(prev, str):
             prev = prev.strip("[]'\"").replace("'", "")
 
-        quests = registration.get('bonus_quests', '') if hasattr(registration, 'get') else registration['bonus_quests']
+        quests = registration['bonus_quests'] if 'bonus_quests' in registration.index else ''
         if isinstance(quests, str):
             quests = quests.strip("[]'\"").replace("'", "")
         quests_str = quests if quests else "_None selected_"
@@ -543,7 +312,7 @@ def verify_registration(email, hf_username):
 - 🎟️ API & compute credits will be assigned on **Thu, May 28, 2026**
 - 🚀 Hack window opens **Fri, May 29, 2026**
 - 🏁 Submissions due **Mon, June 8, 2026**
-- 💬 Join the Gradio Discord channel `build-small-hackathon-official`: https://discord.gg/92sEPT2Zhv
+- 💬 Join the Gradio Discord channel `{DISCORD_CHANNEL}`: {DISCORD_INVITE}
 - 📧 Watch your email for important updates
 """
         logger.info(f"Verification successful for {email}")
@@ -615,9 +384,8 @@ def submit_registration(full_name, email, hf_username, gradio_usage,
 
 Thank you, **{full_name}**! Your spot is locked in.
 
-🎟️ API & compute credits will be assigned on **Thu, May 28, 2026**.<br>
-🚀 Hack window opens **Fri, May 29, 2026** · submissions due **Mon, June 8, 2026**.<br>
-💬 Join the Gradio Discord channel `build-small-hackathon-official` for office hours, AMAs, and support: https://discord.gg/92sEPT2Zhv<br>
+🎟️ Credits assigned **Thu, May 28** · 🚀 Hack opens **Fri, May 29** · 🏁 Submissions due **Mon, Jun 8**.<br>
+💬 Join the Gradio Discord channel `{DISCORD_CHANNEL}`: {DISCORD_INVITE}<br>
 📧 Watch your email for credits and updates.
 
 **See you in the woods! 🍄🪵**"""
@@ -648,43 +416,308 @@ else:
 
 custom_css = """
 .gradio-container {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    /* Brand color tokens — light mode defaults */
+    --bsh-card-bg: #fbf6e8;
+    --bsh-card-border: rgba(139, 111, 71, 0.30);
+    --bsh-text: #2a1d0a;
+    --bsh-text-soft: #6b4423;
+    --bsh-accent: #4a7c2e;
+    --bsh-accent-deep: #2d5016;
+    --bsh-banner-text: #f5ecd9;
+    --bsh-warn: #8b2e25;
+    --bsh-warn-bg: rgba(178, 60, 50, 0.10);
+    --bsh-warn-border: rgba(178, 60, 50, 0.40);
+    --bsh-counter-bg: linear-gradient(135deg, #2d5016 0%, #1f3a0f 100%);
+    --bsh-counter-num: #f5ecd9;
+    --bsh-counter-label: #c9b072;
+    --bsh-banner-bg: linear-gradient(135deg, #2d5016 0%, #4a7c2e 50%, #6b9039 100%);
+    --bsh-discord-bg: rgba(74, 124, 46, 0.08);
+    --bsh-link: #4a7c2e;
+}
+.dark .gradio-container,
+body.dark .gradio-container,
+.gradio-container.dark {
+    /* Brand color tokens — dark mode overrides */
+    --bsh-card-bg: #1f1a12;
+    --bsh-card-border: rgba(201, 176, 114, 0.35);
+    --bsh-text: #ede1c3;
+    --bsh-text-soft: #c9b072;
+    --bsh-accent: #9bc466;
+    --bsh-accent-deep: #6b9039;
+    --bsh-banner-text: #f5ecd9;
+    --bsh-warn: #ff9b8e;
+    --bsh-warn-bg: rgba(255, 122, 110, 0.12);
+    --bsh-warn-border: rgba(255, 122, 110, 0.40);
+    --bsh-counter-bg: linear-gradient(135deg, #1a2e0d 0%, #0c1606 100%);
+    --bsh-counter-num: #f5ecd9;
+    --bsh-counter-label: #c9b072;
+    --bsh-banner-bg: linear-gradient(135deg, #1a2e0d 0%, #2d5016 60%, #4a7c2e 100%);
+    --bsh-discord-bg: rgba(155, 196, 102, 0.08);
+    --bsh-link: #9bc466;
+}
+
+/* Banner */
+.bsh-banner {
+    background: var(--bsh-banner-bg);
+    color: var(--bsh-banner-text);
+    border-radius: 14px;
+    padding: 20px 22px;
+    margin: 0 0 12px 0;
+    text-align: center;
+    border: 1px solid var(--bsh-card-border);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
+}
+.bsh-banner h1 {
+    margin: 0 0 4px 0 !important;
+    font-size: 28px !important;
+    font-weight: 800 !important;
+    letter-spacing: -0.5px !important;
+    color: var(--bsh-banner-text) !important;
+    line-height: 1.15 !important;
+}
+.bsh-banner .tagline {
+    font-size: 16px;
+    font-style: italic;
+    opacity: 0.92;
+    margin-bottom: 4px;
+}
+.bsh-banner .meta {
+    font-size: 14px;
+    opacity: 0.85;
+}
+.bsh-banner .placeholder {
+    margin-top: 12px;
+    display: inline-block;
+    background: rgba(245, 236, 217, 0.12);
+    border: 1px dashed rgba(245, 236, 217, 0.40);
+    border-radius: 6px;
+    padding: 4px 12px;
+    font-size: 11px;
+    opacity: 0.80;
+    letter-spacing: 0.3px;
+}
+
+/* Three-card info row */
+.bsh-info-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 10px;
+    margin-bottom: 12px;
+}
+.bsh-card {
+    background: var(--bsh-card-bg);
+    border: 1px solid var(--bsh-card-border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    color: var(--bsh-text);
 }
+.bsh-title {
+    color: var(--bsh-text-soft);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    margin-bottom: 8px;
+}
+.bsh-content {
+    font-size: 13.5px;
+    line-height: 1.55;
+    color: var(--bsh-text);
+}
+.bsh-track {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    margin-top: 4px;
+}
+.bsh-emoji { font-size: 16px; line-height: 1; }
+.bsh-track-name {
+    font-weight: 700;
+    color: var(--bsh-accent);
+    font-size: 13.5px;
+}
+.bsh-track-desc {
+    font-size: 12px;
+    opacity: 0.82;
+    color: var(--bsh-text);
+    padding-left: 24px;
+    margin-bottom: 4px;
+    line-height: 1.4;
+}
+.bsh-rules {
+    margin: 0 !important;
+    padding-left: 18px !important;
+    color: var(--bsh-text);
+}
+.bsh-rules li {
+    font-size: 13.5px;
+    line-height: 1.7;
+    color: var(--bsh-text);
+}
+.bsh-soon {
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--bsh-text);
+    opacity: 0.92;
+}
+.bsh-link {
+    margin-top: 6px;
+    font-size: 12px;
+}
+.bsh-link a {
+    color: var(--bsh-link);
+    font-weight: 600;
+    text-decoration: underline;
+}
+
+/* Dates + countdown row */
+.bsh-dates-row {
+    display: grid;
+    grid-template-columns: 1.6fr 1fr;
+    gap: 10px;
+    margin-bottom: 14px;
+}
+.bsh-dates {
+    background: var(--bsh-card-bg);
+    border: 1px solid var(--bsh-card-border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    color: var(--bsh-text);
+}
+.bsh-dates-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6px 14px;
+    font-size: 13px;
+    color: var(--bsh-text);
+}
+.bsh-dates-grid b { color: var(--bsh-accent); font-weight: 700; }
+.bsh-warn {
+    margin-top: 10px;
+    background: var(--bsh-warn-bg);
+    border: 1px solid var(--bsh-warn-border);
+    border-radius: 6px;
+    padding: 6px 10px;
+    color: var(--bsh-warn);
+    font-size: 12px;
+    font-weight: 600;
+    text-align: center;
+}
+.bsh-counter {
+    background: var(--bsh-counter-bg);
+    border: 1px solid var(--bsh-card-border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    color: var(--bsh-counter-num);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.bsh-counter-title {
+    color: var(--bsh-counter-num);
+    font-size: 11px;
+    letter-spacing: 1.5px;
+    font-weight: 800;
+    text-transform: uppercase;
+    margin-bottom: 2px;
+}
+.bsh-counter-target {
+    color: var(--bsh-counter-label);
+    font-size: 11px;
+    font-style: italic;
+    margin-bottom: 8px;
+    opacity: 0.85;
+}
+.bsh-nums {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 4px;
+}
+.bsh-unit {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.bsh-num {
+    font-family: 'Courier New', monospace;
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--bsh-counter-num);
+    line-height: 1;
+}
+.bsh-lbl {
+    font-size: 9px;
+    letter-spacing: 1px;
+    color: var(--bsh-counter-label);
+    margin-top: 4px;
+    text-transform: uppercase;
+}
+
+/* Discord ribbon */
+.bsh-discord {
+    margin-top: 14px;
+    background: var(--bsh-discord-bg);
+    border: 1px solid var(--bsh-card-border);
+    border-radius: 8px;
+    padding: 10px 14px;
+    text-align: center;
+    color: var(--bsh-text);
+    font-size: 13px;
+}
+.bsh-discord a {
+    color: var(--bsh-link);
+    font-weight: 700;
+    text-decoration: underline;
+}
+.bsh-discord code {
+    background: var(--bsh-discord-bg);
+    border: 1px solid var(--bsh-card-border);
+    padding: 1px 6px;
+    border-radius: 4px;
+    font-size: 11.5px;
+    color: var(--bsh-text);
+}
+
+/* Buttons */
 #submit-btn {
     background: linear-gradient(135deg, #4a7c2e 0%, #2d5016 100%) !important;
-    border: 2px solid #6b4423 !important;
+    border: 1px solid #6b4423 !important;
     color: #f5ecd9 !important;
     font-weight: 700 !important;
-    font-size: 18px !important;
-    padding: 16px 32px !important;
-    border-radius: 12px !important;
-    box-shadow: 0 4px 12px rgba(74, 49, 16, 0.20) !important;
+    font-size: 16px !important;
+    padding: 12px 24px !important;
+    border-radius: 10px !important;
+    box-shadow: 0 3px 10px rgba(74, 49, 16, 0.18) !important;
     transition: all 0.25s ease !important;
 }
 #submit-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(74, 49, 16, 0.30) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 5px 14px rgba(74, 49, 16, 0.28) !important;
     background: linear-gradient(135deg, #5a8c3e 0%, #3d6020 100%) !important;
 }
-#submit-btn:active {
-    transform: translateY(0) !important;
-}
 #verify-btn {
     background: #6b4423 !important;
-    border: 2px solid #c9b072 !important;
+    border: 1px solid #c9b072 !important;
     color: #f5ecd9 !important;
     font-weight: 700 !important;
-    font-size: 16px !important;
-    padding: 12px 24px !important;
+    font-size: 14px !important;
+    padding: 10px 20px !important;
     border-radius: 8px !important;
-    box-shadow: 0 3px 10px rgba(74, 49, 16, 0.25) !important;
     transition: all 0.25s ease !important;
 }
 #verify-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 5px 15px rgba(74, 49, 16, 0.35) !important;
+    transform: translateY(-1px) !important;
     background: #7d5430 !important;
 }
+
+/* Responsive */
+@media (max-width: 760px) {
+    .bsh-info-row { grid-template-columns: 1fr; }
+    .bsh-dates-row { grid-template-columns: 1fr; }
+    .bsh-banner h1 { font-size: 24px !important; }
+}
 """
 
 
@@ -695,20 +728,14 @@ with gr.Blocks(
 ) as demo:
 
     gr.HTML(HEADER_HTML)
-
-    with gr.Row(equal_height=True):
-        with gr.Column(scale=1):
-            gr.HTML(DEADLINES_HTML)
-        with gr.Column(scale=1):
-            gr.HTML(COUNTER)
-
-    gr.Markdown("---")
+    gr.HTML(INFO_ROW_HTML)
+    gr.HTML(DATES_ROW_HTML)
 
     with gr.Tabs():
         with gr.Tab("📝 Register"):
             with gr.Row():
                 with gr.Column():
-                    gr.Markdown("## ❋ 1. Personal Information")
+                    gr.Markdown("### ❋ 1. Personal Information")
                     full_name = gr.Textbox(
                         label="Full Name *",
                         placeholder="Your full name as you'd like it on certificates",
@@ -716,7 +743,7 @@ with gr.Blocks(
                     )
                     email = gr.Textbox(
                         label="Email Address *",
-                        placeholder="Primary contact email (we'll send updates and credits info here)",
+                        placeholder="Primary contact email — we'll send updates and credits info here",
                         max_lines=1,
                     )
                     hf_username = gr.Textbox(
@@ -737,7 +764,7 @@ with gr.Blocks(
                     )
 
                 with gr.Column():
-                    gr.Markdown("## ❋ 2. Hackathon Participation")
+                    gr.Markdown("### ❋ 2. Hackathon Participation")
                     track_interest = gr.Radio(
                         label="Which track interests you most? *",
                         choices=[
@@ -784,7 +811,7 @@ with gr.Blocks(
 
             with gr.Row():
                 with gr.Column():
-                    gr.Markdown("## ❋ 3. Build Small Specifics")
+                    gr.Markdown("### ❋ 3. Build Small Specifics")
                     planned_small_model = gr.Textbox(
                         label="Which small model are you planning to use? (optional)",
                         placeholder="e.g. Llama-3.2-3B, Qwen2.5-7B, gemma-2-2b-it, SmolLM-1.7B...",
@@ -801,18 +828,18 @@ with gr.Blocks(
                             "📡 Sharing is Caring — share an agent trace",
                             "📓 Field Notes — write a blog post / report",
                         ],
-                        info="Pick as many as you'd like. You can change your mind during the event — this is just signal for us.",
+                        info="Pick as many as you'd like. Just signal for us — you can change your mind during the event.",
                     )
 
                 with gr.Column():
-                    gr.Markdown("## ❋ 4. Project Idea (optional)")
+                    gr.Markdown("### ❋ 4. Project Idea (optional)")
                     project_description = gr.Textbox(
                         label="What are you most excited to build?",
                         placeholder="A neighbor's recipe-translator? A whimsical mushroom-identifier? Tell us in a sentence or two.",
                         lines=4,
                     )
 
-                    gr.Markdown("## ❋ 5. Acknowledgment")
+                    gr.Markdown("### ❋ 5. Acknowledgment")
                     acknowledgment = gr.Checkbox(
                         label="I'm in. *",
                         info=(
@@ -873,11 +900,8 @@ with gr.Blocks(
 
         with gr.Tab("🔍 Verify Registration"):
             gr.Markdown("""
-            ## Check Your Registration Status
-
-            Enter your email address and Hugging Face username to verify your registration and view your details.
-
-            **Note:** Both email and username must match exactly for security purposes.
+            ### Check Your Registration Status
+            Enter your email address and Hugging Face username to verify your registration and view your details. Both must match exactly (case-insensitive) for security purposes.
             """)
             with gr.Row():
                 with gr.Column():
@@ -898,16 +922,14 @@ with gr.Blocks(
                         elem_id="verify-btn",
                     )
                 with gr.Column():
-                    gr.Markdown("""
-                    ### Need Help?
-
-                    - Make sure you enter the **exact** email and username you used during registration
-                    - Both fields are **case-insensitive** but must match your registration
-                    - If you can't find your registration and registration is still open (before May 27, 23:59 UTC), try registering again
-                    - Once registration closes, no new entries can be added
+                    gr.Markdown(f"""
+                    **Need Help?**
+                    - Use the **exact** email and username you registered with
+                    - Both fields are case-insensitive but must match
+                    - Registration is open until **Wed, May 27, 2026 · 23:59 UTC** — once it closes, no new entries can be added
 
                     **Support:**
-                    - Discord: https://discord.gg/92sEPT2Zhv (channel `build-small-hackathon-official`)
+                    - Discord: [{DISCORD_INVITE}]({DISCORD_INVITE}) (channel `{DISCORD_CHANNEL}`)
                     - Email: gradio-team@huggingface.co
                     """)
             verify_output = gr.Markdown()
@@ -917,11 +939,17 @@ with gr.Blocks(
                 outputs=verify_output,
             )
 
-    gr.Markdown("""
-    ---
-    ✦ **Questions?** Join the Gradio [Discord](https://discord.gg/92sEPT2Zhv) channel `build-small-hackathon-official` or email gradio-team@huggingface.co ✦
+    gr.HTML(DISCORD_RIBBON_HTML)
+
+    gr.Markdown(f"""
+    <div style="text-align: center; font-size: 12px; opacity: 0.75; margin-top: 8px;">
+    ✦ Questions? Email gradio-team@huggingface.co ✦
+    </div>
     """)
 
+    # Hook up the countdown JS — runs once on page load, then ticks every second
+    demo.load(fn=lambda: None, inputs=None, outputs=None, js=COUNTDOWN_JS)
+
 
 if __name__ == "__main__":
     demo.launch(allowed_paths=["."])