Upload 2 files

src/ui/components.py

@@ -0,0 +1,345 @@
+"""
+Human+ Reusable UI Components
+Prinsip refactor: gunakan Streamlit native sebanyak mungkin.
+HTML hanya untuk elemen dekoratif (hero logo, gradient) yang
+tidak ada padanan native-nya.
+"""
+
+import streamlit as st
+from typing import Literal, Optional
+from ui.theme import COLORS, BIOMARKER_STATUS, PROTOCOL_SECTIONS
+
+
+# ════════════════════════════════════════════════
+# HERO & NAVIGATION
+# ════════════════════════════════════════════════
+
+def render_hero(
+    subtitle: str = "Upload hasil lab Anda → Dapatkan rekomendasi IV drip & protocol personal"
+):
+    """
+    Hero header — HTML dipertahankan hanya untuk gradient text logo
+    yang tidak bisa dibuat dengan st.title() biasa.
+    """
+    st.markdown(
+        """
+        <div style="text-align:center; padding: 32px 0 8px;">
+            <p style="
+                font-size:0.72rem; font-weight:600;
+                letter-spacing:0.2em; text-transform:uppercase;
+                color:#4a4a6a; margin-bottom:6px;
+            ">Human+ Bali · By Benjamin White</p>
+            <h1 style="
+                font-family:'DM Serif Display', Georgia, serif;
+                font-size:2.6rem; font-weight:900; line-height:1;
+                background: linear-gradient(135deg, #a78bfa, #38bdf8, #22d3ee);
+                -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+                background-clip: text; margin:0 0 8px;
+            ">Lab-to-Protocol</h1>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+    st.caption(f"🧬 {subtitle}")
+    st.write("")
+
+
+def render_step_indicator(current_step: int):
+    """
+    3-step progress indicator menggunakan st.columns + native markdown.
+    Tidak ada HTML kompleks — hanya emoji dan teks.
+    """
+    steps = ["📤 Upload", "🔬 Analisis", "📋 Protocol"]
+    cols = st.columns(3)
+
+    for i, (col, label) in enumerate(zip(cols, steps), 1):
+        with col:
+            if i < current_step:
+                # Done
+                st.markdown(
+                    f"<div style='text-align:center; color:#10b981; font-size:0.75rem; font-weight:700'>✓ {label}</div>",
+                    unsafe_allow_html=True,
+                )
+            elif i == current_step:
+                # Active
+                st.markdown(
+                    f"<div style='text-align:center; color:#8b5cf6; font-size:0.75rem; font-weight:700'>◉ {label}</div>",
+                    unsafe_allow_html=True,
+                )
+            else:
+                # Pending
+                st.markdown(
+                    f"<div style='text-align:center; color:#4a4a6a; font-size:0.75rem;'>○ {label}</div>",
+                    unsafe_allow_html=True,
+                )
+
+    st.divider()
+
+
+def render_trust_badges():
+    """Trust badges menggunakan st.columns — tidak ada HTML."""
+    col1, col2, col3, col4 = st.columns(4)
+    badges = [
+        ("🔒", "Stateless"),
+        ("🗑️", "Tidak disimpan"),
+        ("⚡", "Gemini AI"),
+        ("🌿", "Human+ Bali"),
+    ]
+    for col, (icon, text) in zip([col1, col2, col3, col4], badges):
+        with col:
+            st.caption(f"{icon} {text}")
+    st.write("")
+
+
+def render_section_label(text: str, icon: str = ""):
+    """
+    Section label menggunakan st.markdown dengan minimal styling —
+    hanya border-left yang tidak ada padanan native.
+    """
+    prefix = f"{icon} " if icon else ""
+    st.markdown(
+        f"<p style='font-size:0.7rem; font-weight:700; letter-spacing:0.14em; "
+        f"color:#8b8ba7; border-left:2px solid #8b5cf6; padding-left:8px; "
+        f"margin:20px 0 10px;'>{prefix}{text}</p>",
+        unsafe_allow_html=True,
+    )
+
+
+# ════════════════════════════════════════════════
+# LOADING STATES
+# ════════════════════════════════════════════════
+
+ANALYSIS_STEPS = [
+    "Membaca dokumen PDF",
+    "Mengidentifikasi biomarker",
+    "Mencocokkan dengan range Human+",
+    "Menyusun temuan utama",
+]
+
+PROTOCOL_STEPS = [
+    "Mengambil knowledge base Human+",
+    "Menyesuaikan dengan hasil lab Anda",
+    "Menyusun rekomendasi IV drip",
+    "Finalisasi protocol personal",
+]
+
+
+def render_loading_steps(steps: list[str], current_index: int):
+    """
+    Loading steps menggunakan st.markdown per baris — lebih stabil
+    dari satu blok HTML besar.
+    """
+    for i, step in enumerate(steps):
+        if i < current_index:
+            icon, color = "✓", "#10b981"
+        elif i == current_index:
+            icon, color = "◉", "#8b5cf6"
+        else:
+            icon, color = "○", "#4a4a6a"
+
+        st.markdown(
+            f"<p style='color:{color}; font-size:0.85rem; margin:4px 0;'>"
+            f"{icon} &nbsp; {step}</p>",
+            unsafe_allow_html=True,
+        )
+
+
+def render_progress_bar(value: float, label: str = ""):
+    """Native st.progress — tidak butuh HTML sama sekali."""
+    if label:
+        st.caption(label)
+    st.progress(value)
+
+
+# ════════════════════════════════════════════════
+# BIOMARKER COMPONENTS
+# ════════════════════════════════════════════════
+
+StatusType = Literal["optimal", "warning", "danger", "neutral"]
+
+_STATUS_EMOJI = {
+    "optimal": "🟢",
+    "warning": "🟡",
+    "danger":  "🔴",
+    "neutral": "⚪",
+}
+
+_STATUS_COLOR = {
+    "optimal": "#10b981",
+    "warning": "#f59e0b",
+    "danger":  "#ef4444",
+    "neutral": "#6b7280",
+}
+
+
+def render_biomarker_row(
+    name: str,
+    value: str,
+    unit: str,
+    status: StatusType,
+    reference: str = "",
+):
+    """
+    Biomarker row menggunakan st.columns + st.metric.
+    Jauh lebih stabil dari HTML div, metric punya built-in styling.
+    Border kiri status tetap pakai satu baris HTML minimal.
+    """
+    color = _STATUS_COLOR.get(status, "#6b7280")
+    emoji = _STATUS_EMOJI.get(status, "⚪")
+
+    # Border kiri berwarna — satu-satunya HTML di sini
+    st.markdown(
+        f"<div style='border-left:3px solid {color}; padding-left:10px; margin:2px 0 0;'>",
+        unsafe_allow_html=True,
+    )
+
+    col_name, col_val = st.columns([3, 1])
+    with col_name:
+        st.markdown(f"**{emoji} {name}**")
+        if reference:
+            st.caption(f"Target Human+: {reference}")
+    with col_val:
+        st.metric(
+            label=unit,
+            value=value,
+            label_visibility="visible",
+        )
+
+    st.markdown("</div>", unsafe_allow_html=True)
+    st.write("")
+
+
+def render_biomarker_summary_banner(optimal: int, warning: int, danger: int):
+    """
+    Summary count banner menggunakan st.columns + st.metric native.
+    Tidak ada HTML sama sekali.
+    """
+    total = optimal + warning + danger
+    st.caption(f"🔬 RINGKASAN BIOMARKER — {total} MARKER DIANALISIS")
+
+    col1, col2, col3 = st.columns(3)
+    with col1:
+        st.metric(label="🔴 Perlu Perhatian", value=str(danger))
+    with col2:
+        st.metric(label="🟡 Sub-Optimal", value=str(warning))
+    with col3:
+        st.metric(label="🟢 Optimal", value=str(optimal))
+
+    st.write("")
+
+
+def render_biomarker_chip(name: str, status: StatusType):
+    """Inline chip menggunakan caption + emoji — tidak butuh HTML."""
+    emoji = _STATUS_EMOJI.get(status, "⚪")
+    st.caption(f"{emoji} {name}")
+
+
+# ════════════════════════════════════════════════
+# PROTOCOL COMPONENTS
+# ════════════════════════════════════════════════
+
+def render_protocol_section(
+    section_key: str,
+    content: str,
+    custom_icon: str = "",
+    custom_title: str = "",
+    accent_color: str = "",
+):
+    """
+    Protocol section menggunakan st.expander native sebagai container,
+    dengan header yang jelas. Content di-render sebagai st.markdown biasa.
+    """
+    cfg = PROTOCOL_SECTIONS.get(section_key, {
+        "icon": custom_icon or "📋",
+        "title": custom_title or "Section",
+        "color": accent_color or COLORS["accent_violet"],
+    })
+
+    icon  = custom_icon  or cfg["icon"]
+    title = custom_title or cfg["title"]
+
+    with st.expander(f"{icon} {title}", expanded=True):
+        if content and content.strip():
+            st.markdown(content)
+        else:
+            st.caption("Tidak ada data untuk section ini.")
+
+
+# ════════════════════════════════════════════════
+# ERROR & EMPTY STATES
+# ════════════════════════════════════════════════
+
+def render_error_state(
+    title: str = "Terjadi Kesalahan",
+    message: str = "Silakan coba lagi.",
+    retry_label: str = "Coba Lagi",
+    show_contact: bool = False,
+):
+    """Error state menggunakan st.error native — selalu render dengan benar."""
+    st.error(f"**{title}**\n\n{message}", icon="⚠️")
+    if show_contact:
+        st.caption("Butuh bantuan? Hubungi [@bennywhitethatsright](https://instagram.com/bennywhitethatsright)")
+
+
+def render_empty_state(
+    emoji: str = "🧬",
+    title: str = "Belum ada data",
+    message: str = "",
+):
+    """Empty state menggunakan st.info native."""
+    st.info(f"{emoji} **{title}**\n\n{message}" if message else f"{emoji} **{title}**")
+
+
+# ═════════════════════════���══════════════════════
+# FOOTER
+# ════════════════════════════════════════════════
+
+def render_footer():
+    """Footer menggunakan st.divider + st.caption native."""
+    st.divider()
+    st.caption(
+        "**FROM INJURED → OPTIMIZED**  \n"
+        "Human+ Bali · Didirikan oleh Benjamin White · "
+        "[@bennywhitethatsright](https://instagram.com/bennywhitethatsright)  \n"
+        "*Data Anda tidak disimpan. Aplikasi 100% stateless. "
+        "Bukan pengganti konsultasi medis.*"
+    )
+
+
+# ════════════════════════════════════════════════
+# UTILITY CARDS
+# ════════════════════════════════════════════════
+
+def render_info_card(title: str, body: str, icon: str = "ℹ️"):
+    """
+    Info card menggunakan st.info — native, selalu render.
+    Body sebaiknya plain text, bukan HTML.
+    """
+    # Strip HTML tags sederhana dari body sebelum render
+    import re
+    clean_body = re.sub(r"<[^>]+>", "", body).strip()
+    st.info(f"{icon} **{title}**\n\n{clean_body}")
+
+
+def render_success_banner(title: str, subtitle: str = ""):
+    """Success banner menggunakan st.success native."""
+    text = f"**{title}**"
+    if subtitle:
+        text += f"\n\n{subtitle}"
+    st.success(text, icon="✅")
+
+
+def render_highlight_quote(text: str):
+    """
+    Motivational quote — satu-satunya komponen yang tetap pakai
+    HTML minimal karena border-left gradient tidak ada di native Streamlit.
+    """
+    st.markdown(
+        f"<blockquote style='"
+        f"border-left:3px solid #8b5cf6; padding:12px 16px; margin:16px 0; "
+        f"background:rgba(109,40,217,0.06); border-radius:0 8px 8px 0;'>"
+        f"<em style='color:#c4c4e0;'>{text}</em><br>"
+        f"<small style='color:#4a4a6a;'>— Benjamin White, Founder Human+ Bali</small>"
+        f"</blockquote>",
+        unsafe_allow_html=True,
+    )

src/ui/styles.py

@@ -0,0 +1,522 @@
+"""
+Human+ Custom CSS Injection
+Prinsip: override hanya yang perlu, jangan ganggu layout internal Streamlit.
+"""
+
+import streamlit as st
+from ui.theme import COLORS, FONTS
+
+
+def inject_custom_css():
+    st.markdown(_build_css(), unsafe_allow_html=True)
+
+
+def _build_css() -> str:
+    c = COLORS
+    f = FONTS
+
+    return f"""
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+
+<style>
+
+/* ════════════════════════════════════════════════
+   CSS VARIABLES
+════════════════════════════════════════════════ */
+:root {{
+    --bg-deep:       {c['bg_deep']};
+    --bg-surface:    {c['bg_surface']};
+    --bg-elevated:   {c['bg_elevated']};
+    --bg-line:       {c['bg_line']};
+    --grad-from:     {c['grad_from']};
+    --grad-to:       {c['grad_to']};
+    --text-primary:  {c['text_primary']};
+    --text-secondary:{c['text_secondary']};
+    --text-tertiary: {c['text_tertiary']};
+    --optimal:       {c['optimal']};
+    --warning:       {c['warning']};
+    --danger:        {c['danger']};
+    --accent-violet: {c['accent_violet']};
+    --accent-cyan:   {c['accent_cyan']};
+    --font-body:     {f['body']};
+    --font-display:  {f['display']};
+    --font-mono:     {f['mono']};
+}}
+
+/* ════════════════════════════════════════════════
+   PAGE BACKGROUND
+════════════════════════════════════════════════ */
+html, body, [data-testid="stApp"], .stApp {{
+    background-color: var(--bg-deep) !important;
+}}
+
+.main .block-container {{
+    padding: 0 16px 80px !important;
+    max-width: 680px !important;
+    margin: 0 auto !important;
+}}
+
+/* ════════════════════════════════════════════════
+   HIDE STREAMLIT CHROME
+════════════════════════════════════════════════ */
+#MainMenu, footer, header {{ visibility: hidden; height: 0; }}
+[data-testid="stToolbar"],
+[data-testid="stSidebarNav"] {{ display: none; }}
+
+/* ════════════════════════════════════════════════
+   TYPOGRAPHY
+   SCOPE KETAT — jangan override elemen interaktif
+════════════════════════════════════════════════ */
+
+/* Body font hanya untuk konten markdown */
+[data-testid="stMarkdownContainer"] {{
+    font-family: var(--font-body) !important;
+}}
+
+[data-testid="stMarkdownContainer"] p,
+[data-testid="stMarkdownContainer"] li {{
+    color: var(--text-secondary) !important;
+    line-height: 1.65 !important;
+    font-size: 0.9rem;
+}}
+
+/* Headings dalam markdown */
+[data-testid="stMarkdownContainer"] h1,
+[data-testid="stMarkdownContainer"] h2,
+[data-testid="stMarkdownContainer"] h3 {{
+    font-family: var(--font-display) !important;
+    color: var(--text-primary) !important;
+    line-height: 1.25 !important;
+    margin-top: 1.2em;
+    margin-bottom: 0.4em;
+}}
+
+/* Code */
+[data-testid="stMarkdownContainer"] code {{
+    font-family: var(--font-mono) !important;
+    background: var(--bg-elevated) !important;
+    border: 1px solid var(--bg-line) !important;
+    border-radius: 4px !important;
+    color: var(--accent-cyan) !important;
+    padding: 1px 5px;
+    font-size: 0.82em;
+}}
+
+/* Caption */
+[data-testid="stCaptionContainer"] {{
+    color: var(--text-tertiary) !important;
+    font-size: 0.78rem !important;
+}}
+
+/* ════════════════════════════════════════════════
+   BUTTONS
+   FIX: box-sizing + scoped selector
+════════════════════════════════════════════════ */
+[data-testid="stButton"] > button {{
+    box-sizing: border-box !important;
+    font-family: var(--font-body) !important;
+    font-weight: 600 !important;
+    font-size: 0.88rem !important;
+    border-radius: 9999px !important;
+    border: none !important;
+    padding: 10px 24px !important;
+    min-height: 44px !important;
+    width: 100% !important;
+    cursor: pointer !important;
+    white-space: normal !important;
+    overflow: visible !important;
+    word-break: break-word !important;
+    line-height: 1.4 !important;
+    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s !important;
+    /* Default: gradient primary */
+    background: linear-gradient(135deg, var(--grad-from), var(--grad-to)) !important;
+    color: #fff !important;
+    box-shadow: 0 4px 18px rgba(109,40,217,0.3) !important;
+}}
+
+[data-testid="stButton"] > button:hover {{
+    opacity: 0.9 !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 24px rgba(109,40,217,0.45) !important;
+}}
+
+[data-testid="stButton"] > button:active {{
+    transform: translateY(0) !important;
+    opacity: 1 !important;
+}}
+
+/* Secondary button — override gradient */
+[data-testid="stButton"] > button[kind="secondary"] {{
+    background: transparent !important;
+    border: 1px solid var(--bg-line) !important;
+    color: var(--text-secondary) !important;
+    box-shadow: none !important;
+}}
+
+[data-testid="stButton"] > button[kind="secondary"]:hover {{
+    border-color: var(--accent-violet) !important;
+    color: var(--text-primary) !important;
+    box-shadow: none !important;
+    transform: none !important;
+    opacity: 1 !important;
+}}
+
+/* Download button */
+[data-testid="stDownloadButton"] > button {{
+    box-sizing: border-box !important;
+    background: var(--bg-elevated) !important;
+    border: 1px solid var(--bg-line) !important;
+    color: var(--text-primary) !important;
+    border-radius: 9999px !important;
+    font-family: var(--font-body) !important;
+    font-weight: 600 !important;
+    font-size: 0.85rem !important;
+    min-height: 44px !important;
+    width: 100% !important;
+    padding: 10px 20px !important;
+    box-shadow: none !important;
+    transition: border-color 0.15s, box-shadow 0.15s !important;
+    white-space: normal !important;
+    overflow: visible !important;
+    word-break: break-word !important;
+    line-height: 1.4 !important;
+}}
+
+[data-testid="stDownloadButton"] > button:hover {{
+    border-color: var(--accent-violet) !important;
+    box-shadow: 0 0 16px rgba(109,40,217,0.2) !important;
+    transform: none !important;
+    opacity: 1 !important;
+}}
+
+/* Link button */
+[data-testid="stLinkButton"] > a {{
+    box-sizing: border-box !important;
+    display: block !important;
+    text-align: center !important;
+    border-radius: 9999px !important;
+    background: linear-gradient(135deg, var(--grad-from), var(--grad-to)) !important;
+    color: #fff !important;
+    font-family: var(--font-body) !important;
+    font-weight: 600 !important;
+    font-size: 0.88rem !important;
+    padding: 10px 24px !important;
+    min-height: 44px !important;
+    line-height: 1.4 !important;
+    text-decoration: none !important;
+    border: none !important;
+    box-shadow: 0 4px 18px rgba(109,40,217,0.3) !important;
+    transition: opacity 0.15s !important;
+}}
+
+[data-testid="stLinkButton"] > a:hover {{
+    opacity: 0.88 !important;
+}}
+
+/* ════════════════════════════════════════════════
+   FILE UPLOADER
+   FIX: jangan override internal layout — hanya warna border & background
+════════════════════════════════════════════════ */
+[data-testid="stFileUploader"] {{
+    background: var(--bg-surface) !important;
+    border-radius: 12px !important;
+}}
+
+/* Border hanya pada dropzone, bukan seluruh widget */
+[data-testid="stFileUploaderDropzone"] {{
+    background: var(--bg-elevated) !important;
+    border: 1.5px dashed var(--bg-line) !important;
+    border-radius: 10px !important;
+    transition: border-color 0.2s !important;
+}}
+
+[data-testid="stFileUploaderDropzone"]:hover {{
+    border-color: var(--accent-violet) !important;
+}}
+
+/* Label di atas dropzone */
+[data-testid="stFileUploader"] > label {{
+    color: var(--text-secondary) !important;
+    font-family: var(--font-body) !important;
+    font-size: 0.88rem !important;
+    margin-bottom: 6px !important;
+    display: block !important;
+}}
+
+/* Teks instruksi dalam dropzone — jangan ubah layout, hanya warna */
+[data-testid="stFileUploaderDropzoneInstructions"] > div > span {{
+    color: var(--text-tertiary) !important;
+    font-family: var(--font-body) !important;
+    font-size: 0.82rem !important;
+}}
+
+[data-testid="stFileUploaderDropzoneInstructions"] > div > small {{
+    color: var(--text-tertiary) !important;
+    font-size: 0.72rem !important;
+}}
+
+/* Browse button dalam uploader — scope ketat */
+[data-testid="stFileUploaderDropzone"] button {{
+    background: var(--bg-elevated) !important;
+    border: 1px solid var(--accent-violet) !important;
+    color: var(--accent-violet) !important;
+    border-radius: 6px !important;
+    font-family: var(--font-body) !important;
+    font-size: 0.8rem !important;
+    padding: 5px 14px !important;
+    min-height: unset !important;
+    width: auto !important;
+    box-shadow: none !important;
+    font-weight: 500 !important;
+}}
+
+/* Cegah pseudo-element Streamlit render teks "Upload" ganda */
+[data-testid="stFileUploaderDropzone"] button::before,
+[data-testid="stFileUploaderDropzone"] button::after {{
+    display: none !important;
+    content: none !important;
+}}
+
+[data-testid="stFileUploaderDropzone"] button:hover {{
+    background: rgba(109,40,217,0.15) !important;
+    transform: none !important;
+    opacity: 1 !important;
+}}
+
+/* ════════════════════════════════════════════════
+   EXPANDER
+   FIX: summary layout agar tidak overlap
+════════════════════════════════════════════════ */
+[data-testid="stExpander"] {{
+    background: var(--bg-surface) !important;
+    border: 1px solid var(--bg-line) !important;
+    border-radius: 12px !important;
+    overflow: visible !important;
+    margin-bottom: 10px !important;
+}}
+
+/* summary adalah elemen native <summary> — gunakan flex untuk align */
+[data-testid="stExpander"] summary {{
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    padding: 14px 16px !important;
+    background: var(--bg-surface) !important;
+    cursor: pointer !important;
+    list-style: none !important;   /* hapus default marker */
+    min-height: 48px !important;
+    box-sizing: border-box !important;
+}}
+
+/* Teks judul expander — target span teks saja, bukan SVG */
+[data-testid="stExpander"] summary > p {{
+    font-family: var(--font-body) !important;
+    font-weight: 600 !important;
+    font-size: 0.92rem !important;
+    color: var(--text-primary) !important;
+    line-height: 1.4 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    white-space: normal !important;
+    overflow: visible !important;
+    word-break: break-word !important;
+    flex: 1 !important;
+    min-width: 0 !important;
+}}
+
+/* Span dalam summary: hanya styling teks, TIDAK flex:1 agar tidak ganggu SVG */
+[data-testid="stExpander"] summary span {{
+    font-family: var(--font-body) !important;
+    font-weight: 600 !important;
+    font-size: 0.92rem !important;
+    color: var(--text-primary) !important;
+    line-height: 1.4 !important;
+    white-space: normal !important;
+    overflow: visible !important;
+    word-break: break-word !important;
+    /* TIDAK ada flex: 1 di sini — SVG arrow juga <span>, akan berebut space */
+}}
+
+/* Arrow SVG — flex-shrink:0 agar tidak terkompresi */
+[data-testid="stExpander"] summary svg {{
+    flex-shrink: 0 !important;
+    min-width: 16px !important;
+    color: var(--text-tertiary) !important;
+}}
+
+[data-testid="stExpander"] summary:hover {{
+    background: var(--bg-elevated) !important;
+}}
+
+/* Body expander */
+[data-testid="stExpander"] > div[data-testid="stExpanderDetails"] {{
+    background: var(--bg-elevated) !important;
+    border-top: 1px solid var(--bg-line) !important;
+    padding: 16px !important;
+}}
+
+/* ════════════════════════════════════════════════
+   METRIC
+════════════════════════════════════════════════ */
+[data-testid="stMetric"] {{
+    background: var(--bg-elevated) !important;
+    border: 1px solid var(--bg-line) !important;
+    border-radius: 10px !important;
+    padding: 10px 12px !important;
+}}
+
+[data-testid="stMetricLabel"] > div {{
+    color: var(--text-tertiary) !important;
+    font-size: 0.72rem !important;
+    font-family: var(--font-body) !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.04em !important;
+}}
+
+[data-testid="stMetricValue"] > div {{
+    color: var(--text-primary) !important;
+    font-family: var(--font-mono) !important;
+    font-size: 1.3rem !important;
+    font-weight: 700 !important;
+}}
+
+/* ════════════════════════════════════════════════
+   ALERTS (st.success, st.error, st.info, st.warning)
+════════════════════════════════════════════════ */
+[data-testid="stAlert"] {{
+    border-radius: 10px !important;
+    font-family: var(--font-body) !important;
+    font-size: 0.88rem !important;
+    border-width: 1px !important;
+    border-style: solid !important;
+}}
+
+/* Scope teks alert agar tidak dioverride oleh global p/span */
+[data-testid="stAlert"] p,
+[data-testid="stAlert"] span {{
+    font-family: var(--font-body) !important;
+    line-height: 1.55 !important;
+}}
+
+/* ════════════════════════════════════════════════
+   PROGRESS BAR
+════════════════════════════════════════════════ */
+[data-testid="stProgressBar"] > div {{
+    background: var(--bg-elevated) !important;
+    border-radius: 9999px !important;
+    height: 6px !important;
+}}
+
+[data-testid="stProgressBar"] > div > div {{
+    background: linear-gradient(90deg, var(--grad-from), var(--grad-to)) !important;
+    border-radius: 9999px !important;
+}}
+
+/* ════════════════════════════════════════════════
+   DIVIDER
+════════════════════════════════════════════════ */
+hr {{
+    border: none !important;
+    border-top: 1px solid var(--bg-line) !important;
+    margin: 20px 0 !important;
+}}
+
+/* ════════════════════════════════════════════════
+   COLUMNS — pastikan tidak ada overflow
+════════════════════════════════════════════════ */
+[data-testid="stHorizontalBlock"] {{
+    gap: 8px !important;
+    align-items: stretch !important;
+}}
+
+[data-testid="stHorizontalBlock"] > div {{
+    min-width: 0 !important;
+    overflow: hidden !important;
+}}
+
+/* Expander di dalam kolom tidak boleh terpotong */
+[data-testid="stHorizontalBlock"] > div:has([data-testid="stExpander"]) {{
+    overflow: visible !important;
+}}
+
+/* Step indicator teks — cegah meluber keluar kolom */
+[data-testid="stHorizontalBlock"] > div > div[data-testid="stMarkdownContainer"] {{
+    overflow: hidden !important;
+    max-width: 100% !important;
+}}
+
+/* ════════════════════════════════════════════════
+   SCROLLBAR
+════════════════════════════════════════════════ */
+::-webkit-scrollbar {{ width: 4px; height: 4px; }}
+::-webkit-scrollbar-track {{ background: var(--bg-deep); }}
+::-webkit-scrollbar-thumb {{
+    background: var(--bg-line);
+    border-radius: 9999px;
+}}
+::-webkit-scrollbar-thumb:hover {{ background: var(--accent-violet); }}
+
+/* ════════════════════════════════════════════════
+   MOBILE RESPONSIVE
+════════════════════════════════════════════════ */
+@media (max-width: 480px) {{
+    .main .block-container {{
+        padding: 0 10px 80px !important;
+    }}
+
+    [data-testid="stButton"] > button,
+    [data-testid="stDownloadButton"] > button {{
+        font-size: 0.85rem !important;
+        padding: 10px 16px !important;
+        min-height: 46px !important;
+    }}
+
+    [data-testid="stExpander"] summary {{
+        padding: 12px 12px !important;
+    }}
+
+    [data-testid="stExpander"] summary > p,
+    [data-testid="stExpander"] summary span {{
+        font-size: 0.85rem !important;
+        white-space: normal !important;
+        overflow: visible !important;
+    }}
+
+    [data-testid="stMetricValue"] > div {{
+        font-size: 1.1rem !important;
+    }}
+}}
+
+/* ════════════════════════════════════════════════
+   ATMOSPHERIC ORBS (background depth)
+════════════════════════════════════════════════ */
+.hp-orbs {{
+    position: fixed; inset: 0;
+    pointer-events: none; z-index: 0;
+    overflow: hidden;
+}}
+.hp-orb {{
+    position: absolute; border-radius: 50%;
+    filter: blur(90px); opacity: 0.06;
+}}
+.hp-orb-1 {{
+    width: 450px; height: 450px;
+    background: {c['grad_from']};
+    top: -120px; right: -120px;
+}}
+.hp-orb-2 {{
+    width: 320px; height: 320px;
+    background: {c['grad_to']};
+    bottom: 80px; left: -100px;
+}}
+
+</style>
+
+<!-- Background orbs -->
+<div class="hp-orbs">
+    <div class="hp-orb hp-orb-1"></div>
+    <div class="hp-orb hp-orb-2"></div>
+</div>
+"""