/**
 * Design System e Isolamento CSS - Mobile-First
 * Fernanda Ribeiro · Roleta Premium
 */
@layer frr-reset, frr-tokens, frr-base, frr-components, frr-mobile;

@layer frr-tokens {
    :root, .frr-app {
        --frr-paper: #F6EFE3; --frr-paper-deep: #EFE5D4; --frr-bg: #FBF7F0; --frr-surface: #FFFFFF;
        --frr-surface-alt: #F3EADB; --frr-champagne: #EADCC2; --frr-gold-900: #6E5220; --frr-gold-700: #8C6B2F;
        --frr-gold-600: #A67F3C; --frr-gold-500: #B8935A; --frr-gold-400: #C9A96A; --frr-gold-200: #E3D2AC;
        --frr-onyx: #14110E; --frr-onyx-soft: #221D18; --frr-ink: #1A1611; --frr-ink-soft: #3B342A;
        --frr-muted: #7A7062; --frr-on-gold: #FFFDF8; --frr-on-dark: #F6EFE3; --frr-border: #E2D5BC;
        --frr-border-strong: #CDB88F; --frr-font-display: "Cormorant Garamond", Georgia, serif;
        --frr-font-ui: "Inter", system-ui, -apple-system, sans-serif; --frr-radius-sm: 8px; --frr-radius-md: 12px;
    }
}

@layer frr-reset {
    .frr-body-standalone {
        margin: 0; padding: 0; background-color: var(--frr-bg); color: var(--frr-ink);
        font-family: var(--frr-font-ui); -webkit-font-smoothing: antialiased; transition: background-color 0.3s ease;
    }
    .frr-body-standalone.frr-dark-mode { background-color: var(--frr-onyx); color: var(--frr-on-dark); }
    .frr-app, .frr-app *, .frr-app *::before, .frr-app *::after {
        box-sizing: border-box; -webkit-tap-highlight-color: transparent;
    }
}

@layer frr-base {
    .frr-app {
        min-height: 100vh; display: flex; flex-direction: column; align-items: center;
        justify-content: center; padding: 20px 14px; width: 100%;
    }
    .frr-app[data-frr-theme="dark"] { color: var(--frr-on-dark); }
    #frr-app-root { width: 100%; max-width: 440px; margin: 0 auto; text-align: center; }
    .frr-brand-logo-wrap {
        display: flex; justify-content: center; align-items: center;
        margin: 0 auto 12px auto; width: 100%;
    }
    .frr-brand-logo-img {
        max-width: min(210px, 70vw); max-height: 85px; width: auto; height: auto;
        object-fit: contain; display: block; margin: 0 auto;
    }
    .frr-app[data-frr-theme="dark"] .frr-brand-logo-img {
        filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.08));
    }
    .frr-celebration-pill {
        display: inline-block; padding: 4px 14px; margin: 8px 0 10px 0; font-size: 11px; font-weight: 700;
        letter-spacing: 0.14em; color: var(--frr-gold-700); text-transform: uppercase; border-radius: 999px;
        background: linear-gradient(90deg, rgba(140, 107, 47, 0.12), rgba(201, 169, 106, 0.3), rgba(140, 107, 47, 0.12));
        border: 1px solid var(--frr-gold-400);
    }
    .frr-app[data-frr-theme="dark"] .frr-celebration-pill {
        color: var(--frr-gold-400); background: rgba(201, 169, 106, 0.15); box-shadow: 0 0 10px rgba(201, 169, 106, 0.2);
    }
    .frr-title-brand {
        font-family: var(--frr-font-display); font-size: clamp(26px, 7vw, 36px); font-weight: 700;
        letter-spacing: 0.18em; color: var(--frr-ink); margin: 0; line-height: 1.15; text-transform: uppercase;
    }
    .frr-app[data-frr-theme="dark"] .frr-title-brand { color: #FFFFFF; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
    .frr-subtitle-brand {
        font-family: var(--frr-font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.28em;
        color: var(--frr-ink-soft); margin: 4px 0 12px 0; text-transform: uppercase;
    }
    .frr-app[data-frr-theme="dark"] .frr-subtitle-brand { color: rgba(255, 255, 255, 0.88); }
    #fr-floating-widget-container { display: none !important; }
    .frr-hairline {
        height: 1px; margin: 12px auto; max-width: 220px;
        background: linear-gradient(90deg, transparent, var(--frr-gold-500) 20%, var(--frr-gold-400) 50%, var(--frr-gold-500) 80%, transparent);
    }
    .frr-headline-invite {
        font-family: var(--frr-font-display); font-size: 19px; letter-spacing: 0.08em;
        color: var(--frr-ink); margin: 10px 0 4px 0; font-weight: 700;
    }
    .frr-app[data-frr-theme="dark"] .frr-headline-invite { color: #FFFFFF; }
    .frr-tagline-invite { font-size: 13.5px; color: var(--frr-muted); margin: 0 0 18px 0; line-height: 1.4; }
    .frr-app[data-frr-theme="dark"] .frr-tagline-invite { color: #A89D8D; }
}

@layer frr-components {
    .frr-step-card {
        background: var(--frr-surface); border: 1px solid var(--frr-border); border-radius: var(--frr-radius-md);
        padding: 24px 20px; box-shadow: 0 8px 24px rgba(20, 17, 14, 0.05); transition: background-color 0.3s, border-color 0.3s;
    }
    .frr-app[data-frr-theme="dark"] .frr-step-card { background: #1C1713; border-color: #3B3227; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
    .frr-label { display: block; font-size: 13px; font-weight: 600; text-align: left; margin-bottom: 6px; color: var(--frr-ink-soft); }
    .frr-app[data-frr-theme="dark"] .frr-label { color: #D6C8B4; }
    .frr-phone-row { display: flex; gap: 8px; margin-bottom: 16px; }
    .frr-ddi-badge {
        background: var(--frr-paper); border: 1px solid var(--frr-border); border-radius: var(--frr-radius-sm);
        padding: 12px 14px; font-size: 14px; font-weight: 500; color: var(--frr-ink); display: flex; align-items: center; flex-shrink: 0;
    }
    .frr-app[data-frr-theme="dark"] .frr-ddi-badge { background: #2A221B; color: var(--frr-on-dark); border-color: #3B3227; }
    .frr-input {
        width: 100%; min-height: 48px; background: #FFFFFF; border: 1px solid var(--frr-border); border-radius: var(--frr-radius-sm);
        padding: 12px 14px; font-size: 16px; color: var(--frr-ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s;
    }
    .frr-app[data-frr-theme="dark"] .frr-input { background: #241D17; color: #FFFFFF; border-color: #3B3227; }
    .frr-input:focus { border-color: var(--frr-gold-700); box-shadow: 0 0 0 2px rgba(140, 107, 47, 0.2); }
    .frr-app[data-frr-theme="dark"] .frr-input:focus { border-color: var(--frr-gold-400); box-shadow: 0 0 0 2px rgba(201, 169, 106, 0.3); }
    .frr-btn {
        width: 100%; min-height: 48px; border: none; border-radius: var(--frr-radius-sm); padding: 14px 20px;
        font-size: 14px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer;
        touch-action: manipulation; transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    }
    .frr-btn-primary { background: var(--frr-gold-700); color: var(--frr-on-gold); }
    .frr-app[data-frr-theme="dark"] .frr-btn-primary { background: #9A7534; box-shadow: 0 4px 14px rgba(154, 117, 52, 0.4); }
    .frr-btn-primary:active { transform: scale(0.98); }
    .frr-terms-hint { font-size: 12px; color: var(--frr-muted); margin: 12px 0 0 0; line-height: 1.4; }
    .frr-form-stack { display: flex; flex-direction: column; gap: 12px; text-align: left; }
    .frr-form-row { display: flex; gap: 10px; }
    .frr-form-col { flex: 1; min-width: 0; }
    .frr-form-col-2 { flex: 2; min-width: 0; }
    .frr-checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--frr-muted); margin-top: 4px; cursor: pointer; }
    .frr-checkbox-input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--frr-gold-700); flex-shrink: 0; }

    /* Roleta de Alta Joalheria */
    .frr-wheel-container {
        position: relative; width: min(320px, 86vw); height: min(320px, 86vw);
        margin: 18px auto; touch-action: manipulation;
    }
    .frr-wheel-pointer {
        position: absolute; z-index: 12; display: flex; align-items: center; justify-content: center;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); pointer-events: none;
    }
    /* Layout 1: Diamante Imperial no Topo (12h) */
    .frr-wheel-container[data-layout="imperial_diamond"] .frr-wheel-pointer,
    .frr-wheel-container:not([data-layout]) .frr-wheel-pointer {
        top: -20px; left: 50%; transform: translateX(-50%); width: 42px; height: 50px;
    }
    /* Layout 2: Gema Lateral com Diamante na Esquerda (9h) */
    .frr-wheel-container[data-layout="lateral_gem"] .frr-wheel-pointer {
        top: 50%; left: -22px; transform: translateY(-50%); width: 50px; height: 42px;
    }
    /* Layout 3: Ouro Nobre Classico */
    .frr-wheel-container[data-layout="celebration_gold"] .frr-wheel-pointer {
        top: -14px; left: 50%; transform: translateX(-50%); width: 28px; height: 32px;
    }
    .frr-pointer-classic {
        width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;
        border-top: 22px solid #E5C378; filter: drop-shadow(0 1px 1px #8C6B2F); position: relative;
    }
    .frr-pointer-classic::after {
        content: ''; position: absolute; top: -21px; left: -9px;
        width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent;
        border-top: 17px solid #FFF2BA;
    }
    .frr-canvas-wheel {
        width: 100% !important; height: 100% !important; border-radius: 50%;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 3px #8C6B2F, 0 0 22px rgba(212, 175, 55, 0.35);
        display: block; transition: transform 0.2s ease;
    }
    .frr-spin-center-btn {
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: min(84px, 25vw); height: min(84px, 25vw); border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #FFFDF9 0%, #F5EADB 45%, #D4AF37 100%);
        border: 3.5px solid #8C6B2F; color: #3A2610; cursor: pointer;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.95);
        z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 1px; padding: 2px; transition: transform 0.15s ease, box-shadow 0.15s ease; outline: none;
    }
    .frr-spin-center-btn:hover {
        transform: translate(-50%, -50%) scale(1.04);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 20px rgba(212, 175, 55, 0.4);
    }
    .frr-spin-center-btn:active { transform: translate(-50%, -50%) scale(0.96); }
    .frr-spin-center-btn.spinning { opacity: 0.8; filter: brightness(1.08); }
    .frr-spin-diamond-icon { display: block; filter: drop-shadow(0 1px 2px rgba(184, 134, 11, 0.3)); }
    .frr-spin-label {
        font-family: var(--frr-font-display); font-size: 13px; font-weight: 800;
        letter-spacing: 0.16em; line-height: 1; color: #38240D; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    .frr-spin-bottom-gem { font-size: 8px; color: #8C6B2F; line-height: 1; margin-top: -1px; }
    .frr-spin-phrases {
        min-height: 30px; margin-top: 14px; font-family: var(--frr-font-display); font-size: 17px;
        font-style: italic; font-weight: 600; color: var(--frr-gold-700); letter-spacing: 0.03em;
        transition: opacity 0.22s ease, transform 0.22s ease;
    }
    .frr-app[data-frr-theme="dark"] .frr-spin-phrases { color: var(--frr-gold-400); }

    /* Voucher e Resultado */
    .frr-voucher-percent {
        font-size: clamp(44px, 12vw, 54px); font-weight: 700; color: var(--frr-gold-700);
        font-family: var(--frr-font-display); line-height: 1; margin: 12px 0 2px 0;
    }
    .frr-app[data-frr-theme="dark"] .frr-voucher-percent { color: var(--frr-gold-400); }
    .frr-voucher-box { background: var(--frr-paper); border: 1px dashed var(--frr-gold-500); border-radius: var(--frr-radius-sm); padding: 14px 12px; margin: 16px 0; }
    .frr-app[data-frr-theme="dark"] .frr-voucher-box { background: #241D17; border-color: var(--frr-gold-400); }
    .frr-voucher-label { font-size: 11px; text-transform: uppercase; color: var(--frr-muted); }
    .frr-voucher-code { font-size: 22px; font-weight: 700; letter-spacing: 0.14em; color: var(--frr-gold-700); margin: 6px 0; }
    .frr-app[data-frr-theme="dark"] .frr-voucher-code { color: var(--frr-gold-400); }
    .frr-btn-copy {
        background: transparent; border: 1px solid var(--frr-gold-500); border-radius: 4px; padding: 6px 14px;
        font-size: 12px; font-weight: 600; cursor: pointer; color: var(--frr-gold-700); touch-action: manipulation;
    }
    .frr-app[data-frr-theme="dark"] .frr-btn-copy { color: var(--frr-gold-400); border-color: var(--frr-gold-400); }
    .frr-voucher-zap-hint { color: var(--frr-muted); font-size: 11.5px; margin-top: 8px; }
    .frr-btn-redeem { display: flex; align-items: center; justify-content: center; text-decoration: none; gap: 8px; }
    .frr-public-footer { margin-top: 24px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--frr-muted); }
    .frr-glow-17 { border: 2px solid var(--frr-gold-400) !important; animation: frr-pulse-glow 2s infinite ease-in-out; }
    @keyframes frr-pulse-glow {
        0%, 100% { box-shadow: 0 0 15px rgba(201, 169, 106, 0.35); }
        50% { box-shadow: 0 0 30px rgba(201, 169, 106, 0.85); }
    }

    /* Botão Pílula Oficial de Agendamento (Widget Modal Popup) */
    .fr-widget-pill-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        padding: 14px 26px; border-radius: 9999px; font-size: 14.5px; font-weight: 700;
        letter-spacing: 0.3px; cursor: pointer; text-decoration: none; width: 100%;
        box-sizing: border-box; transition: all 0.3s ease-in-out; margin-top: 12px; outline: none;
    }
    .fr-pill-gold {
        background: linear-gradient(135deg, #D4AF37 0%, #F3E5AB 50%, #AA771C 100%);
        background-size: 200% 200%; animation: frGoldGlow 4s ease infinite;
        color: #0A0A0A; border: 1px solid rgba(255, 215, 0, 0.5);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 4px 18px rgba(212, 175, 55, 0.3);
    }
    .fr-pill-gold:hover {
        background: #000000; color: #D4AF37; border-color: #D4AF37;
        transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
    }
    .fr-pill-black {
        background: #050505; color: #FFFFFF; border: 1px solid rgba(212, 175, 55, 0.4);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
    .fr-pill-black:hover {
        background: #1A1611; color: #F3E5AB; border-color: #D4AF37;
        transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
    }
    @keyframes frGoldGlow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* Modal de Agendamento Direto VIP */
    .frr-sched-backdrop {
        position: fixed; inset: 0; z-index: 99999; background: rgba(10, 8, 6, 0.85);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        display: none; align-items: center; justify-content: center; padding: 14px;
        animation: frrFadeIn 0.25s ease;
    }
    .frr-sched-box {
        background: linear-gradient(170deg, #FFFFFF 0%, #FDFBF7 40%, #F6EFE2 100%);
        border: 1.5px solid #dfc384; border-radius: 20px; width: 100%; max-width: 440px;
        max-height: 92vh; overflow-y: auto; overflow-x: hidden; padding: 24px 20px; text-align: center;
        box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 35px rgba(212,175,55,0.2); position: relative;
    }
    .frr-app[data-frr-theme="dark"] .frr-sched-box {
        background: linear-gradient(170deg, #221a12 0%, #17120c 100%); color: var(--frr-on-dark); border-color: #795d28;
    }
    .frr-sched-close {
        position: absolute; top: 12px; right: 14px; background: none; border: none;
        font-size: 24px; line-height: 1; cursor: pointer; color: var(--frr-muted); transition: color 0.2s;
    }
    .frr-sched-close:hover { color: #8C6B2F; }
    .frr-sched-badge {
        display: inline-block; padding: 4px 12px; background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(184,134,11,0.25));
        border: 1px solid rgba(212,175,55,0.45); border-radius: 20px; font-size: 10px; font-weight: 700;
        letter-spacing: 0.1em; color: #8C6B2F; text-transform: uppercase; margin-bottom: 6px;
    }
    .frr-sched-title { font-family: var(--frr-font-display); font-size: 22px; font-weight: 700; color: #2A2216; margin: 0 0 2px 0; }
    .frr-app[data-frr-theme="dark"] .frr-sched-title { color: #f5eedb; }
    .frr-sched-subtitle { font-size: 12px; font-weight: 600; color: #8C6B2F; margin: 0 0 12px 0; }
    .frr-sched-vip-card {
        background: linear-gradient(135deg, rgba(248,244,235,0.95), rgba(241,233,218,0.95));
        border: 1px solid rgba(212,175,55,0.35); border-radius: 12px; padding: 9px 12px; margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(184,134,11,0.06);
    }
    .frr-app[data-frr-theme="dark"] .frr-sched-vip-card { background: #2c2217; border-color: #5d461f; }
    .frr-sched-label {
        font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
        color: #5A4B37; display: flex; align-items: center; gap: 6px; margin: 10px 0 5px 0; text-align: left;
    }
    .frr-app[data-frr-theme="dark"] .frr-sched-label { color: #d6c6aa; }
    .frr-step-num {
        display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
        border-radius: 50%; background: #D4AF37; color: #FFF; font-size: 10px; font-weight: 800;
    }
    .frr-sched-date-input {
        width: 100%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgba(212,175,55,0.4);
        font-family: var(--frr-font-ui); font-size: 14px; font-weight: 600; text-align: center;
        background: #FFFDF9; color: var(--frr-ink); outline: none; transition: border-color 0.2s;
    }
    .frr-app[data-frr-theme="dark"] .frr-sched-date-input { background: #1f170f; color: #fff; border-color: #795d28; }
    .frr-slots-grid {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 6px 0 14px 0;
        max-height: 180px; overflow-y: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: #D4AF37 transparent;
    }
    .frr-time-chip {
        padding: 9px 3px; border-radius: 8px; border: 1px solid rgba(212,175,55,0.35);
        background: #FFFDF9; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all 0.2s ease;
        color: #4A3E2D; outline: none;
    }
    .frr-app[data-frr-theme="dark"] .frr-time-chip { background: #261e14; color: #e8d9c5; border-color: #5d461f; }
    .frr-time-chip:hover { border-color: #D4AF37; background: #FAF5EA; transform: translateY(-1px); }
    .frr-time-chip.active {
        background: linear-gradient(135deg, #DFBA67 0%, #B8860B 100%); color: #FFFFFF;
        border-color: #F6E6B4; box-shadow: 0 4px 12px rgba(184,134,11,0.4); transform: translateY(-1px);
    }
    .frr-btn-sched-confirm {
        width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid #F6E6B4;
        background: linear-gradient(135deg, #D4AF37 0%, #AA771C 50%, #D4AF37 100%); color: #1E1402;
        font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
        cursor: pointer; box-shadow: 0 6px 20px rgba(184,134,11,0.35); transition: all 0.2s ease; outline: none;
    }
    .frr-btn-sched-confirm:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
    .frr-btn-sched-confirm:disabled { opacity: 0.6; cursor: not-allowed; }
    .frr-appt-success { padding: 4px 0 6px; animation: frrFadeIn 0.35s ease; }
    .frr-appt-emblem { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; background: radial-gradient(circle, #FFFDF8 0%, #F5E8C7 100%); border: 2px solid #D4AF37; box-shadow: 0 0 16px rgba(212,175,55,0.35); display: flex; align-items: center; justify-content: center; }
    .frr-appt-ticket { background: #FFFDF9; border: 1.5px dashed rgba(212,175,55,0.45); border-radius: 12px; padding: 10px 14px; margin: 10px 0; text-align: center; }
    .frr-app[data-frr-theme="dark"] .frr-appt-ticket { background: #221a12; border-color: #795d28; }
    .frr-btn-appt-gold { width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid #F6E6B4; background: linear-gradient(135deg, #DFBA67 0%, #C59B27 50%, #9E7412 100%); color: #1A1305; font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 15px rgba(184,134,11,0.32); transition: all 0.2s ease; margin-top: 10px; }
    .frr-btn-appt-gold:hover { filter: brightness(1.08); transform: translateY(-1px); color: #1A1305; }
    .frr-btn-appt-whatsapp { width: 100%; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: linear-gradient(135deg, #059669 0%, #047857 100%); color: #FFFFFF; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 14px rgba(5,150,105,0.25); transition: all 0.2s ease; margin-top: 8px; }
    .frr-btn-appt-whatsapp:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .frr-btn-appt-close { background: none; border: none; color: #7A7062; font-size: 12px; font-weight: 600; cursor: pointer; margin-top: 10px; padding: 4px; text-decoration: underline; transition: color 0.2s; }
    .frr-btn-appt-close:hover { color: #8C6B2F; }
    .frr-proto-pill { display: inline-block; padding: 4px 10px; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.45); color: #8C6B2F; border-radius: 6px; font-family: monospace; font-size: 12px; font-weight: 700; margin: 4px 0; }
    .frr-fallback-hint { margin-top: 10px; font-size: 11.5px; color: var(--frr-muted); }
    .frr-fallback-hint a { color: var(--frr-gold-700); text-decoration: underline; }
    @keyframes frrFadeIn { from { opacity: 0; } to { opacity: 1; } }
}

@layer frr-mobile {
    @media (max-width: 480px) {
        .frr-app { padding: 14px 10px; justify-content: flex-start; }
        .frr-brand-logo-img { max-width: 175px; max-height: 70px; }
        .frr-title-brand { font-size: 21px; letter-spacing: 0.12em; }
        .frr-subtitle-brand { font-size: 11px; margin-bottom: 8px; }
        .frr-headline-invite { font-size: 17px; }
        .frr-tagline-invite { font-size: 13px; margin-bottom: 14px; }
        .frr-step-card { padding: 18px 12px; }
        .frr-form-row { flex-direction: column; gap: 12px; }
        .frr-phone-row { margin-bottom: 12px; }
        .frr-btn { font-size: 13px; }
    }
}