/* ETAP_CSP_PHASE5_v1 — auto-extracted from pro.html on 20260513_085657
   Original 1 <style> block(s) consolidated here.
   DO NOT edit by hand — re-run extract_inline_style.py to regenerate. */

/* === extracted block 1 from pro.html === */
/* ETAP_PRO_V2_SKIN_v1 — design tokens (sync with /v2) */
        :root {
            --ink: #0a0a0f;
            --cream: #faf7f0;
            --amber: #FBBF24;
            --amber-2: #FB923C;
            --rose: #F43F5E;
        }

        body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; background-color: #07070b; color: #faf7f0; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
        body.pro-v2 { padding-bottom: calc(64px + 12px + env(safe-area-inset-bottom)); }
        @media (min-width: 768px) { body.pro-v2 { padding-bottom: 0 !important; } }

        /* legacy retained */
        .safety-yellow { background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 100%); color: var(--ink); }
        .fade-in { animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
        .hide-scroll::-webkit-scrollbar { display: none; }
        .tab-active { border-bottom: 2px solid var(--amber); color: var(--amber); }
        .tab-inactive { border-bottom: 2px solid transparent; color: #52525b; }
        .chat-bg { background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); background-color: #000; }

        /* v2 reusable utilities (scoped via .pro-v2 to avoid hijacking modal/JS logic) */
        .pro-v2 .font-display { font-family: 'Bricolage Grotesque', 'Manrope', sans-serif; font-weight: 800; letter-spacing: -.035em; line-height: .95; }
        .pro-v2 .gradient-text { background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 55%, var(--rose) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .pro-v2 .glass-dark { background: rgba(10,10,15,.55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.06); }
        .pro-v2 .hero-mesh {
            background:
                radial-gradient(60% 60% at 18% 18%, rgba(251,191,36,.18) 0%, transparent 60%),
                radial-gradient(50% 60% at 90% 12%, rgba(244,63,94,.14) 0%, transparent 65%),
                radial-gradient(70% 70% at 80% 92%, rgba(251,146,60,.16) 0%, transparent 65%),
                radial-gradient(40% 50% at 18% 86%, rgba(99,102,241,.10) 0%, transparent 60%),
                #07070b;
        }
        .pro-v2 .surface-soft { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
        .pro-v2 .pill-amber { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: rgba(251,191,36,.12); color: var(--amber); border: 1px solid rgba(251,191,36,.25); }
        .pro-v2 .btn-primary { background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 100%); color: var(--ink); transition: transform 200ms cubic-bezier(.16,1,.3,1), box-shadow 200ms; box-shadow: 0 8px 24px -10px rgba(251,146,60,.5); }
        .pro-v2 .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(251,146,60,.65); }
        .pro-v2 .btn-ghost-light { color: #fafafa; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); transition: background 200ms; }
        .pro-v2 .btn-ghost-light:hover { background: rgba(255,255,255,.08); }
        .pro-v2 .marker-line { background-image: linear-gradient(120deg, rgba(251,191,36,.55) 0%, rgba(251,146,60,.45) 100%); background-size: 100% 32%; background-repeat: no-repeat; background-position: 0 88%; padding: 0 .12em; }

        /* ETAP_H1_BOTTOMNAV_v1 — mobile bottom-nav (scoped, NO :root pollution) */
        .nav-pill-glass {
            --nav-bg: rgba(10,10,15,.72);
            --nav-border: rgba(251,191,36,.20);
            --nav-idle: rgba(250,247,240,.68);
            --nav-active: var(--amber);
            position: fixed; left: 12px; right: 12px;
            bottom: max(12px, env(safe-area-inset-bottom));
            z-index: 50;
            display: flex; align-items: center; justify-content: space-between;
            height: 64px; padding: 0 6px;
            background: var(--nav-bg);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
            border-radius: 28px;
            border: 1px solid var(--nav-border);
            box-shadow: 0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
            font-family: 'Manrope', system-ui, -apple-system, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .nav-pill-glass .nav-item {
            flex: 1 1 0; min-width: 48px; min-height: 48px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 2px; padding: 6px 4px;
            color: var(--nav-idle); text-decoration: none; position: relative;
            transition: color 200ms cubic-bezier(.16,1,.3,1), transform 120ms ease-out;
        }
        .nav-pill-glass .nav-item svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms cubic-bezier(.16,1,.3,1); }
        .nav-pill-glass .nav-item span { font-size: 10px; font-weight: 600; letter-spacing: .01em; line-height: 1; opacity: .9; }
        .nav-pill-glass .nav-item:active { transform: scale(.94); }
        .nav-pill-glass .nav-item.is-active { color: var(--nav-active); }
        .nav-pill-glass .nav-item.is-active svg { transform: translateY(-1px); }
        .nav-pill-glass .nav-item.is-active::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--nav-active); box-shadow: 0 0 8px rgba(251,191,36,.7); animation: navDotIn 200ms cubic-bezier(.16,1,.3,1); }
        @keyframes navDotIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
        .nav-pill-glass .fab-wrap { flex: 0 0 auto; width: 78px; display: flex; align-items: center; justify-content: center; position: relative; }
        .nav-pill-glass .fab-amber { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 100%); box-shadow: 0 8px 24px rgba(251,191,36,.45), 0 2px 6px rgba(244,63,94,.25); transform: translateY(-12px); transition: transform 200ms cubic-bezier(.16,1,.3,1), box-shadow 200ms; position: relative; isolation: isolate; }
        .nav-pill-glass .fab-amber::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: radial-gradient(circle, rgba(251,191,36,.45) 0%, transparent 70%); z-index: -1; }
        .nav-pill-glass .fab-amber:hover { transform: translateY(-14px) scale(1.04); }
        .nav-pill-glass .fab-amber:active { transform: translateY(-14px) scale(.95); }
        .nav-pill-glass .fab-amber svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
        @media (min-width: 768px) { .nav-pill-glass { display: none; } }
        @media (prefers-reduced-motion: reduce) {
            .nav-pill-glass *, .nav-pill-glass *::after { transition: none !important; animation: none !important; }
        }