/* WhyPay? — Material Design 3 · Deep Navy + V-Green Authority Theme */

:root {
    /* M3 Primary — Deep Navy (Authority) */
    --primary: #1B2A4A;
    --primary-dark: #0F1D36;
    --primary-light: #3D5A80;
    --primary-bg: #EEF1F6;
    --primary-container: #D1DAE8;
    /* M3 Tonal Action — V-Green (Success / CTA) */
    --accent: #00B894;
    --accent-dark: #009975;
    --accent-light: #55EFC4;
    --accent-bg: #E6F9F3;
    --accent-container: #A8F0D8;
    /* Semantic */
    --success: #00B894;
    --success-bg: #E6F9F3;
    --warning: #FDCB6E;
    --warning-bg: #FFF8E7;
    --danger: #E17055;
    --danger-bg: #FDECEB;
    /* M3 Surface hierarchy */
    --text: #1B2A4A;
    --text-sec: #4A5568;
    --text-light: #A0AEC0;
    --bg: #F7F8FA;
    --card: #FFFFFF;
    --surface-1: #F0F2F7;
    --surface-2: #E8ECF2;
    --border: #E2E8F0;
    /* Elevation (M3 tonal) */
    --shadow-sm: 0 1px 3px rgba(27,42,74,0.06);
    --shadow: 0 2px 12px rgba(27,42,74,0.08);
    --shadow-md: 0 4px 20px rgba(27,42,74,0.10);
    --shadow-lg: 0 8px 32px rgba(27,42,74,0.14);
    /* 8dp grid system */
    --radius: 16px;
    --radius-sm: 12px;
    --radius-lg: 24px;
    --transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
    --chat-bg: #F0F2F7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: 'Heebo', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

#app {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    background: var(--card);
    box-shadow: 0 0 40px rgba(0,0,0,0.08);
}

/* ═══ Screens ════════════════════════════════════════════════════════════════ */
.screen { display: none; flex-direction: column; height: 100%; }
.screen.active { display: flex; animation: fadeUp 0.25s ease; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══ Upload Screen — Landing Page (M3 Authority) ════════════════════════════ */
#screenUpload {
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
    position: relative;
}

/* Top bar — M3 Surface container, centered logo */
.lp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: white;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.lp-logo-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.lp-logo-img-big {
    height: 44px;
    width: auto;
    display: block;
    object-fit: contain;
}

.lp-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    padding: 6px 14px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition);
}
.lp-login-btn:hover { background: var(--primary); color: white; }
.lp-login-btn svg { flex-shrink: 0; }

.lp-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-bg);
    color: var(--accent-dark);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-lg);
}

.lp-badge-dot {
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse-dot 1.8s ease infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.7); }
}

/* Scrollable area */
.lp-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 32px;
}

/* Hero — M3 Deep Navy surface */
.lp-hero {
    background: linear-gradient(165deg, #1B2A4A 0%, #243B63 50%, #2D4A7A 100%);
    padding: 36px 24px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(0,184,148,0.06) 0%, transparent 60%),
                radial-gradient(circle at 70% 80%, rgba(85,239,196,0.04) 0%, transparent 50%);
}

.lp-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,184,148,0.15);
    color: var(--accent-light);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: var(--radius-lg);
    margin-bottom: 18px;
    border: 1px solid rgba(0,184,148,0.25);
    position: relative;
}

.lp-h1 {
    font-size: 26px;
    font-weight: 900;
    color: white;
    line-height: 1.25;
    margin-bottom: 12px;
    position: relative;
}

.lp-h1 span {
    color: var(--accent-light);
}

.lp-hero-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin-bottom: 24px;
    position: relative;
}

/* Stats — M3 tonal surface elevation */
.lp-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 16px 8px;
    border: 1px solid rgba(255,255,255,0.12);
    position: relative;
    backdrop-filter: blur(8px);
}

.lp-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.lp-stat-num {
    font-size: 22px;
    font-weight: 900;
    color: white;
    letter-spacing: -0.5px;
}

.lp-stat-lbl {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
}

.lp-stat-div {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.25);
}

/* Upload section — M3 elevated card */
.lp-upload-wrap {
    margin: -18px 20px 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.lp-upload-zone {
    padding: 28px 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    border: 2px dashed transparent;
    border-radius: 20px;
}

.lp-upload-zone:hover, .lp-upload-zone.dragover {
    background: var(--accent-bg);
    border-color: var(--accent);
}

.lp-upload-pulse {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.lp-upload-circle {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(0,184,148,0.12), 0 0 0 16px rgba(0,184,148,0.05);
    animation: upload-pulse 2.5s ease infinite;
}

@keyframes upload-pulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(0,184,148,0.12), 0 0 0 16px rgba(0,184,148,0.05); }
    50% { box-shadow: 0 0 0 14px rgba(0,184,148,0.08), 0 0 0 24px rgba(0,184,148,0.03); }
}

.lp-upload-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 5px;
}

.lp-upload-hint {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 18px;
}

.lp-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent);
    color: white;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    padding: 14px 32px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,184,148,0.35);
    transition: var(--transition);
}

.lp-upload-zone:hover .lp-upload-btn {
    background: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,184,148,0.4);
}

/* Manual entry divider + button */
.lp-manual-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px 0;
}
.lp-manual-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.lp-manual-or {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
}

.lp-manual-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: calc(100% - 40px);
    margin: 12px 20px 0;
    padding: 16px 20px;
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-md);
}
.lp-manual-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}
.lp-manual-btn svg { flex-shrink: 0; color: white; }

/* How it works — animated steps */
.lp-how {
    padding: 32px 20px 0;
}

.lp-how-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-align: center;
}

.lp-steps-animated {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.lp-astep {
    background: white;
    border-radius: 20px;
    padding: 24px 20px 20px;
    text-align: center;
    width: 100%;
    box-shadow: var(--shadow-md);
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    animation: stepReveal 0.6s ease forwards;
}
.lp-astep[data-step="1"] { animation-delay: 0.1s; }
.lp-astep[data-step="2"] { animation-delay: 0.35s; }
.lp-astep[data-step="3"] { animation-delay: 0.6s; }

@keyframes stepReveal {
    to { opacity: 1; transform: translateY(0); }
}

.lp-astep-num {
    position: absolute;
    top: -12px;
    right: 20px;
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    font-size: 13px;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(27,42,74,0.25);
}

.lp-astep-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    animation: iconBounce 2s ease infinite;
}
.lp-astep[data-step="1"] .lp-astep-icon { animation-delay: 0s; }
.lp-astep[data-step="2"] .lp-astep-icon { animation-delay: 0.7s; }
.lp-astep[data-step="3"] .lp-astep-icon { animation-delay: 1.4s; }

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.lp-astep-icon-1 { background: var(--primary-bg); color: var(--primary); }
.lp-astep-icon-2 { background: var(--accent-bg); color: var(--accent-dark); }
.lp-astep-icon-3 { background: #E8F5E9; color: #2E7D32; }

.lp-astep-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}

.lp-astep-sub {
    font-size: 12.5px;
    color: var(--text-sec);
    line-height: 1.5;
}

.lp-astep-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
}

.lp-astep-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-light);
    opacity: 0;
    animation: dotFade 1.5s ease infinite;
}
.lp-astep-dot:nth-child(1) { animation-delay: 0s; }
.lp-astep-dot:nth-child(2) { animation-delay: 0.2s; }
.lp-astep-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotFade {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Trust bar */
.lp-trust {
    display: flex;
    justify-content: center;
    gap: 0;
    padding: 20px 20px 0;
    flex-wrap: wrap;
    gap: 8px;
}

.lp-trust-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sec);
    background: white;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

/* ══ Hero CTA button — above the fold ══ */
.lp-hero-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 16px 24px;
    background: var(--accent); color: white;
    border: none; border-radius: var(--radius-lg);
    font-size: 16px; font-weight: 800; font-family: inherit;
    cursor: pointer; margin: 24px 0 6px; position: relative;
    box-shadow: 0 6px 24px rgba(0,184,148,0.4);
    transition: var(--transition);
    animation: ctaGlow 2.5s ease infinite;
}
.lp-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,184,148,0.5); }
@keyframes ctaGlow {
    0%,100% { box-shadow: 0 6px 24px rgba(0,184,148,0.4); }
    50% { box-shadow: 0 6px 32px rgba(0,184,148,0.55), 0 0 60px rgba(0,184,148,0.15); }
}
.lp-hero-cta-sub { font-size: 12px; color: rgba(255,255,255,0.7); text-align: center; margin-bottom: 20px; position: relative; }

/* ══ Bombshell — Vardi ruling ══ */
.lp-bomb { margin: 0 16px; padding: 24px 20px; background: linear-gradient(135deg, #0F1D36, #1B2A4A); border-radius: var(--radius-lg); color: white; position: relative; overflow: hidden; }
.lp-bomb::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 90% 10%, rgba(0,184,148,0.12) 0%, transparent 50%); }
.lp-bomb-badge { display:inline-block; background:rgba(0,184,148,0.15); color:var(--accent-light); font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; margin-bottom:14px; border:1px solid rgba(0,184,148,0.25); position:relative; }
.lp-bomb-title { font-size:20px; font-weight:900; line-height:1.3; margin-bottom:12px; position:relative; }
.lp-bomb-title em { color:var(--accent-light); font-style:normal; }
.lp-bomb-text { font-size:13.5px; line-height:1.6; color:rgba(255,255,255,0.8); margin-bottom:16px; position:relative; }
.lp-bomb-hl { display:flex; gap:10px; background:rgba(0,184,148,0.1); border:1px solid rgba(0,184,148,0.2); border-radius:var(--radius); padding:14px; margin-bottom:18px; position:relative; }
.lp-bomb-hl span { font-size:20px; flex-shrink:0; }
.lp-bomb-hl p { font-size:13px; line-height:1.55; color:rgba(255,255,255,0.9); }
.lp-bomb-cta { display:block; width:100%; padding:14px; background:var(--accent); color:white; border:none; border-radius:var(--radius); font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; text-align:center; position:relative; box-shadow:0 4px 16px rgba(0,184,148,0.35); transition:var(--transition); }
.lp-bomb-cta:hover { background:var(--accent-dark); transform:translateY(-1px); }

/* ══ Shocking facts ══ */
.lp-facts { padding:28px 16px 0; }
.lp-facts-title { font-size:18px; font-weight:900; color:var(--text); text-align:center; margin-bottom:18px; line-height:1.3; }
.lp-fact-card { background:white; border-radius:var(--radius-lg); padding:24px 20px; text-align:center; box-shadow:var(--shadow-md); margin-bottom:12px; }
.lp-fact-pop { opacity:0; transform:translateY(16px); animation:factPop 0.5s ease forwards; }
.lp-fact-pop[data-delay="0.1"]  { animation-delay:0.15s; }
.lp-fact-pop[data-delay="0.25"] { animation-delay:0.35s; }
.lp-fact-pop[data-delay="0.4"]  { animation-delay:0.55s; }
@keyframes factPop { to { opacity:1; transform:translateY(0); } }
.lp-fact-emoji { font-size:32px; margin-bottom:8px; }
.lp-fact-big { font-size:32px; font-weight:900; color:var(--primary); letter-spacing:-1px; margin-bottom:4px; }
.lp-fact-label { font-size:14px; font-weight:700; color:var(--text); margin-bottom:6px; }
.lp-fact-detail { font-size:12.5px; color:var(--text-sec); line-height:1.5; }

/* ══ Did-you-know carousel ══ */
.lp-dyk { padding:28px 0 0; }
.lp-dyk-title { font-size:20px; font-weight:900; color:var(--primary); text-align:center; margin-bottom:4px; padding:0 16px; }
.lp-dyk-sub { font-size:12px; color:var(--text-light); text-align:center; margin-bottom:14px; padding:0 16px; }
.lp-dyk-carousel { position:relative; }
.lp-dyk-track {
    display:flex; gap:12px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:6px 16px 14px;
    scrollbar-width:none;
}
.lp-dyk-track::-webkit-scrollbar { display:none; }
.lp-dyk-card {
    flex:0 0 85%;
    scroll-snap-align:center;
    background:white;
    border-radius:var(--radius);
    padding:20px 18px;
    box-shadow:var(--shadow-md);
    border-right:4px solid var(--primary-light);
    min-height:140px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.lp-dyk-card p { font-size:14px; line-height:1.65; color:var(--text); }
.lp-dyk-card em { color:var(--danger); font-style:normal; font-weight:700; }
.lp-dyk-tag { display:inline-block; font-size:11px; font-weight:800; color:var(--accent-dark); background:var(--accent-bg); padding:3px 12px; border-radius:10px; margin-bottom:10px; align-self:flex-start; }
.lp-dyk-accent { background:var(--primary); border-color:var(--accent); }
.lp-dyk-accent p { color:rgba(255,255,255,0.95); }
.lp-dyk-accent em { color:var(--accent-light); }
.lp-dyk-accent .lp-dyk-tag { background:rgba(0,184,148,0.2); color:var(--accent-light); }
.lp-dyk-dots { display:flex; justify-content:center; gap:6px; padding:4px 0 0; }
.lp-dyk-dot { width:7px; height:7px; border-radius:50%; background:var(--border); transition:all 0.3s; }
.lp-dyk-dot.active { background:var(--primary); width:22px; border-radius:10px; }

/* ══ Mid-page CTA ══ */
.lp-mid-cta { text-align:center; padding:28px 20px 0; }
.lp-mid-cta-q { font-size:15px; font-weight:700; color:var(--text-sec); margin-bottom:12px; }
.lp-mid-cta-btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:white; border:none; border-radius:var(--radius-lg); padding:14px 28px; font-size:15px; font-weight:800; font-family:inherit; cursor:pointer; box-shadow:0 4px 18px rgba(0,184,148,0.35); transition:var(--transition); }
.lp-mid-cta-btn:hover { background:var(--accent-dark); transform:translateY(-2px); }

/* ══ Camera cities ══ */
.lp-cities { padding:28px 16px 0; }
.lp-cities-title { font-size:17px; font-weight:900; color:var(--text); text-align:center; margin-bottom:6px; line-height:1.3; }
.lp-cities-title span { color:var(--danger); }
.lp-cities-sub { font-size:13px; color:var(--text-sec); text-align:center; margin-bottom:16px; line-height:1.5; }
.lp-city-tags { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.lp-city-tag { display:inline-flex; align-items:center; gap:4px; background:white; border:1px solid var(--border); padding:6px 14px; border-radius:20px; font-size:13px; font-weight:600; color:var(--text); }
.lp-city-tag small { font-size:10px; color:var(--danger); font-weight:800; }
.lp-city-more { background:var(--primary); color:white; border-color:var(--primary); font-size:12px; }

/* ══ Bottom CTA ══ */
.lp-bottom-cta { text-align:center; padding:32px 20px; margin-top:8px; background:linear-gradient(180deg,transparent,var(--primary-bg)); }
.lp-bottom-title { font-size:18px; font-weight:900; color:var(--primary); margin-bottom:16px; line-height:1.3; }
.lp-bottom-btn { display:inline-block; background:var(--primary); color:white; border:none; border-radius:var(--radius-lg); padding:16px 36px; font-size:16px; font-weight:800; font-family:inherit; cursor:pointer; box-shadow:var(--shadow-lg); transition:var(--transition); }
.lp-bottom-btn:hover { background:var(--primary-dark); transform:translateY(-2px); }
.lp-bottom-sub { font-size:13px; color:var(--text-sec); margin-top:10px; font-weight:600; }

/* ══ Footer ══ */
.lp-footer { background:var(--primary-dark); padding:32px 20px 24px; text-align:center; margin-top:8px; }
.lp-footer-logo { margin-bottom:16px; }
.lp-footer-logo-img { height:32px; filter:brightness(0) invert(1); opacity:0.9; }
.lp-footer-tagline { font-size:12px; color:rgba(255,255,255,0.5); margin-top:4px; }
.lp-footer-links { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
.lp-footer-link { color:rgba(255,255,255,0.7); font-size:13px; font-weight:600; text-decoration:none; transition:color 0.2s; }
.lp-footer-link:hover { color:var(--accent-light); }
.lp-footer-copy { font-size:11px; color:rgba(255,255,255,0.35); line-height:1.5; }

/* ══ Legal Pages (about / contact / privacy / terms) ══ */
#screenLegal { background: var(--bg); }
.lg-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: white;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0; position: relative; z-index: 2;
}
.lg-back-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: var(--surface-1); border: none; border-radius: 50%;
    color: var(--text); cursor: pointer;
}
.lg-back-btn:hover { background: var(--surface-2); }
.lg-header-logo { height: 32px; object-fit: contain; }
.lg-scroll {
    flex: 1; overflow-y: auto;
    padding: 24px 20px 40px;
    -webkit-overflow-scrolling: touch;
}
.lg-title {
    font-size: 24px; font-weight: 900; color: var(--primary);
    margin-bottom: 6px; line-height: 1.3;
}
.lg-subtitle {
    font-size: 13px; color: var(--text-sec);
    margin-bottom: 24px;
}
.lg-section { margin-bottom: 24px; }
.lg-h2 {
    font-size: 16px; font-weight: 800; color: var(--primary);
    margin-bottom: 8px; padding-right: 12px;
    border-right: 3px solid var(--accent);
}
.lg-p {
    font-size: 14px; color: var(--text);
    line-height: 1.75; margin-bottom: 10px;
}
.lg-ul { padding-right: 20px; margin-bottom: 10px; }
.lg-ul li {
    font-size: 14px; color: var(--text);
    line-height: 1.75; margin-bottom: 6px;
}
.lg-info-card {
    background: white; border-radius: var(--radius);
    padding: 16px; margin: 12px 0;
    box-shadow: var(--shadow-sm);
    border-right: 3px solid var(--accent);
}
.lg-info-card strong { color: var(--primary); display: block; margin-bottom: 4px; }
.lg-info-card a { color: var(--accent-dark); text-decoration: none; font-weight: 700; }
.lg-price-grid {
    display: grid; grid-template-columns: 1fr; gap: 10px;
    margin: 12px 0;
}
.lg-price-card {
    background: white; border-radius: var(--radius);
    padding: 14px 16px; box-shadow: var(--shadow-sm);
    display: flex; justify-content: space-between; align-items: center;
    border: 1.5px solid var(--border);
}
.lg-price-card strong { color: var(--primary); font-size: 15px; }
.lg-price-card span { color: var(--accent-dark); font-weight: 900; font-size: 16px; }
.lg-warn {
    background: #FFF8E7; border: 1px solid #FDCB6E;
    border-radius: var(--radius); padding: 14px;
    font-size: 13px; color: #8B6914; line-height: 1.6;
    margin: 12px 0;
}
.lg-warn strong { color: #5C4A0E; }
.lg-updated {
    font-size: 12px; color: var(--text-light);
    text-align: center; margin-top: 24px;
    padding-top: 16px; border-top: 1px solid var(--border);
}

/* Legacy selectors kept for JS compatibility */
.upload-card { }

.upload-zone { }

.upload-zone:hover, .upload-zone.dragover { }

.upload-icon { color: var(--primary-light); margin-bottom: 14px; }
.upload-main { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.upload-sub { font-size: 13px; color: var(--text-light); }

/* ── Privacy badge ───────────────────────────────────────────────────────── */
.privacy-badge {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 12px;
    padding: 10px 14px;
    margin: 0 16px 12px;
    font-size: 12.5px;
    color: #166534;
    line-height: 1.5;
}
.pb-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
.pb-text strong { font-weight: 700; }

/* ── Manual entry toggle ─────────────────────────────────────────────────── */
.manual-toggle-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 8px 16px 0;
    background: none;
    border: 1.5px dashed #B8C4D4;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, border-color 0.2s;
}
.manual-toggle-btn:hover { background: #EEF1F6; border-color: var(--primary); }

/* ── Manual entry form ───────────────────────────────────────────────────── */
.manual-form {
    background: white;
    border-radius: 20px;
    margin: 12px 16px;
    padding: 20px 16px 16px;
    box-shadow: 0 2px 16px rgba(27,42,74,.10);
}
.mf-header { margin-bottom: 16px; }
.mf-title { display: block; font-size: 16px; font-weight: 700; color: var(--text-main); }
.mf-subtitle { display: block; font-size: 12px; color: var(--text-light); margin-top: 2px; }
.mf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.mf-field { display: flex; flex-direction: column; gap: 4px; }
.mf-field-full { grid-column: 1 / -1; }
.mf-label { font-size: 12px; font-weight: 600; color: var(--text-sec); }
.mf-req { color: var(--danger); }
.mf-input {
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    direction: ltr;
    text-align: left;
}
.mf-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,184,148,0.1); }
.mf-camera-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 14px;
    cursor: pointer;
    line-height: 1.5;
}
.mf-camera-check input[type='checkbox'] { margin-top: 2px; flex-shrink: 0; }
.mf-error { font-size: 12px; color: var(--danger); margin-bottom: 10px; }
.mf-submit-btn {
    width: 100%;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,184,148,0.3);
    transition: var(--transition);
}
.mf-submit-btn:hover { opacity: 0.9; }
.mf-auto-note {
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
    margin: -4px 0 12px;
}

.upload-preview { position: relative; }
.upload-preview img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    background: #f5f5f5;
    display: block;
}

.change-btn {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.65);
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.upload-loading {
    text-align: center;
    padding: 32px 20px;
}

.upload-loading p {
    font-size: 16px;
    font-weight: 600;
    margin-top: 16px;
}

.loading-sub {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-sec);
    margin-top: 4px;
}

.scan-preview-wrap {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 16px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(27,42,74,0.2);
}
.scan-preview-img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    display: block;
    background: #f0f0f0;
    border-radius: 12px;
}
.scan-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(27,42,74,0.08) 0%, transparent 50%, rgba(27,42,74,0.08) 100%);
    border-radius: 12px;
}
.scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #1B2A4A 20%, #3D5A80 50%, #1B2A4A 80%, transparent 100%);
    box-shadow: 0 0 12px 4px rgba(27,42,74,0.6);
    animation: scan-move 1.8s ease-in-out infinite;
    top: 0;
}
@keyframes scan-move {
    0%   { top: 0%; }
    50%  { top: calc(100% - 3px); }
    100% { top: 0%; }
}
.scan-status { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; text-align: center; }

/* ═══ Analysis Loading Screen ══════════════════════════════════════════════ */
#screenAnalysis {
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #f0eeff 0%, #ffffff 100%);
    padding: 40px 24px;
}
.sa-wrap { text-align: center; width: 100%; }
.sa-anim {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}
.sa-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: sa-spin 2s linear infinite;
}
.sa-ring-1 { border-top-color: var(--primary); animation-duration: 1.5s; }
.sa-ring-2 { border-right-color: var(--accent); animation-duration: 2.2s; inset: 12px; animation-direction: reverse; }
.sa-ring-3 { border-bottom-color: var(--primary-light); animation-duration: 3s; inset: 24px; }
@keyframes sa-spin { to { transform: rotate(360deg); } }
.sa-brain {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    animation: sa-pulse 2s ease infinite;
}
@keyframes sa-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.sa-title { font-size: 20px; font-weight: 900; color: var(--text); margin-bottom: 8px; }
.sa-sub { font-size: 14px; color: var(--text-sec); margin-bottom: 24px; }
.sa-progress {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 28px;
}
.sa-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 10px;
    width: 0%;
    transition: width 0.4s ease;
    animation: sa-progress-auto 12s ease-out forwards;
}
@keyframes sa-progress-auto {
    0%{width:0%} 20%{width:25%} 50%{width:55%} 80%{width:80%} 100%{width:92%}
}
.sa-tip-wrap {
    background: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
    text-align: right;
}
.sa-tip-label { font-size: 13px; font-weight: 700; color: var(--accent-dark); margin-bottom: 6px; }
.sa-tip-text { font-size: 14px; color: var(--text); line-height: 1.5; transition: opacity 0.3s ease; }

/* ═══ Chat Screen ════════════════════════════════════════════════════════════ */
#screenChat {
    flex-direction: column;
    height: 100%;
    background: var(--chat-bg);
}

/* Chat header */
.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--primary);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(27,42,74,0.2);
    position: relative;
    z-index: 10;
}

.chat-avatar {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    flex-shrink: 0;
}

.chat-title { flex: 1; }
.chat-name { font-size: 17px; font-weight: 700; display: block; }
.chat-status { font-size: 12px; opacity: 0.8; }

.new-ticket-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.new-ticket-btn:hover { background: rgba(255,255,255,0.3); }

/* Messages container */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
}

/* Message row */
.msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 88%;
    animation: msgIn 0.2s ease;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.msg-assistant { align-self: flex-start; }
.msg-user { align-self: flex-end; flex-direction: row-reverse; }

.msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 13px;
    font-weight: 900;
    text-decoration: line-through;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 2px;
}

.msg-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.55;
    max-width: 100%;
    word-break: break-word;
}

.msg-assistant .msg-bubble {
    background: var(--card);
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}

.msg-user .msg-bubble {
    background: var(--primary);
    color: white;
    border-bottom-left-radius: 4px;
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 12px 18px;
    align-items: center;
}

.typing-indicator span {
    width: 7px;
    height: 7px;
    background: var(--text-light);
    border-radius: 50%;
    animation: bounce 1.2s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* Option buttons */
.msg-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 12px 8px 12px;
    animation: msgIn 0.2s ease;
}

.opt-btn {
    background: var(--card);
    border: 1.5px solid var(--primary-light);
    color: var(--primary-dark);
    padding: 9px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.opt-btn:hover, .opt-btn:active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* Ticket summary in bubble */
.ticket-summary {
    background: var(--primary-bg);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 8px;
    font-size: 14px;
}

.ts-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    gap: 8px;
}

.ts-label { color: var(--text-sec); font-size: 13px; flex-shrink: 0; }
.ts-val { font-weight: 600; text-align: left; }
.ts-fine { color: var(--danger); font-size: 16px; font-weight: 800; }

.deadline-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.deadline-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 12px;
    background: #FFF3CD;
    border: 1px solid #FFD700;
    color: #856404;
}
.deadline-chip.urgent {
    background: #FFE5E5;
    border-color: #FF4444;
    color: #C0392B;
}
.deadline-chip.secondary {
    background: #E8F4FD;
    border-color: #3498DB;
    color: #1A6094;
}
.deadline-chip.warning {
    background: #FFF3CD;
    border-color: #FFC107;
    color: #856404;
}
.dc-icon { font-size: 18px; flex-shrink: 0; }
.dc-text { display: flex; flex-direction: column; }
.dc-num { font-size: 18px; font-weight: 900; line-height: 1; }
.dc-lbl { font-size: 11px; font-weight: 500; margin-top: 1px; }
.deadline-bonus {
    margin-top: 8px;
    padding: 8px 12px;
    background: #E8F8F2;
    border: 1px solid #27AE60;
    border-radius: 12px;
    font-size: 13px;
    color: #1A6B3F;
    font-weight: 600;
}

.submit-guide {
    background: #EAF4FB;
    border-right: 3px solid #2980B9;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.7;
}

/* Alerts in chat */
.alert-knockout {
    background: #FFF3CD;
    border-right: 3px solid #F39C12;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.alert-win {
    background: var(--success-bg);
    border-right: 3px solid var(--success);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.alert-lpr {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255, 200, 0, 0.4);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 8px;
    box-shadow: 0 4px 20px rgba(255, 200, 0, 0.1);
}
.lpr-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,200,0,0.15);
    color: #FFD700;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255,200,0,0.3);
    margin-bottom: 8px;
}
.lpr-title {
    font-size: 16px;
    font-weight: 800;
    color: #FFD700;
    margin-bottom: 10px;
    line-height: 1.3;
}
.lpr-ruling {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 10px;
    line-height: 1.5;
    margin-bottom: 8px;
}
.lpr-ruling strong { color: #FFD700; }
.lpr-city {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
}

/* Results */
.result-prob {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 4px;
    gap: 6px;
}

.prob-svg {
    width: 110px;
    height: 110px;
    transform: rotate(-90deg);
}

.prob-bg {
    fill: none;
    stroke: var(--border);
    stroke-width: 8;
}

.prob-arc {
    fill: none;
    stroke: var(--primary);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.5s ease;
}

.result-prob.high .prob-arc { stroke: var(--success); }
.result-prob.medium .prob-arc { stroke: var(--warning); }
.result-prob.low .prob-arc { stroke: var(--danger); }

.prob-center {
    position: absolute;
    display: flex;
    align-items: baseline;
    gap: 1px;
}

.result-prob {
    position: relative;
}

.prob-svg-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix prob center overlay */
.result-prob {
    position: relative;
}

.prob-num {
    font-size: 36px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.result-prob.high .prob-num { color: var(--success); }
.result-prob.medium .prob-num { color: #E67E22; }
.result-prob.low .prob-num { color: var(--danger); }

.prob-pct {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-light);
}

.prob-label {
    font-size: 13px;
    color: var(--text-sec);
    font-weight: 600;
}

/* Override prob-center to be inside SVG */
.msg-bubble .result-prob {
    min-width: 140px;
}

/* Arguments */
.chat-args {
    padding-right: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.chat-args li {
    font-size: 14px;
    line-height: 1.5;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: 8px;
    border-right: 3px solid var(--primary);
}

/* Appeal letter card */
.letter-card {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    font-size: 14px;
}

.letter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--primary-bg);
    font-weight: 700;
    font-size: 14px;
}

.letter-actions { display: flex; gap: 6px; }

.letter-btn {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.letter-btn:hover { background: var(--primary); color: white; border-color: var(--primary); }

.letter-body {
    padding: 14px;
    max-height: 240px;
    overflow-y: auto;
    line-height: 1.7;
    white-space: pre-wrap;
    font-size: 13px;
    background: var(--card);
}

/* Text input area */
.chat-input {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 12px;
    background: var(--card);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-input textarea {
    flex: 1;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 15px;
    font-family: inherit;
    resize: none;
    outline: none;
    line-height: 1.4;
    max-height: 120px;
    background: var(--bg);
    transition: var(--transition);
}

.chat-input textarea:focus {
    border-color: var(--primary);
    background: white;
}

.mic-btn {
    width: 38px;
    height: 38px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: var(--transition);
}
.mic-btn:hover { border-color: var(--primary); color: var(--primary); }
.mic-btn.recording {
    background: #FEE2E2;
    border-color: #EF4444;
    color: #EF4444;
    animation: pulse-mic 1s ease-in-out infinite;
}
@keyframes pulse-mic {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.send-btn {
    width: 42px;
    height: 42px;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}

.send-btn:hover { background: var(--primary-dark); transform: scale(1.05); }

/* Spinner */
.spinner-ring {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: #2D3436;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    z-index: 999;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Needle gauge ────────────────────────────────────────────────────────── */
.gauge-wrap {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.gauge-svg { width: 100%; }

.gauge-num {
    font-size: 18px;
    font-weight: 900;
    font-family: 'Heebo', sans-serif;
}

.gauge-label {
    font-size: 9px;
    fill: #636E72;
    font-family: 'Heebo', sans-serif;
}

/* ─── Map ─────────────────────────────────────────────────────────────────── */
.map-wrap {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    border: 1.5px solid var(--border);
}

.map-img {
    width: 100%;
    display: block;
    max-height: 160px;
    object-fit: cover;
}

.map-label {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-dark);
    background: var(--primary-bg);
}

/* ─── GIS card ────────────────────────────────────────────────────────────── */
.gis-card {
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
}

.gis-title {
    padding: 8px 12px;
    background: var(--primary-bg);
    font-weight: 700;
    font-size: 13px;
}

.gis-body {
    padding: 10px 12px;
    line-height: 1.6;
    color: var(--text);
}

.gis-conflict {
    padding: 8px 12px;
    background: #FFF3CD;
    border-top: 1px solid #FCE8A0;
    font-size: 13px;
    font-weight: 600;
    color: #856404;
    border-right: 3px solid #F39C12;
}

.gis-camera {
    padding: 7px 12px;
    background: #E8F4FD;
    border-top: 1px solid #B8D9F0;
    font-size: 13px;
    font-weight: 600;
    color: #1565C0;
    border-right: 3px solid #2196F3;
}

.gis-camera-defense {
    padding: 7px 12px;
    background: #F3F8FE;
    border-top: 1px solid #D0E8F8;
    font-size: 12px;
    color: #1565C0;
    line-height: 1.5;
}

/* ─── Curb color analysis card ───────────────────────────────────────────── */
.curb-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    font-size: 14px;
}

.curb-icon { font-size: 20px; flex-shrink: 0; }
.curb-label { flex: 1; }

.curb-gray   { background: #F5F5F5; border-color: #BDBDBD; }
.curb-blue   { background: #E3F2FD; border-color: #2196F3; color: #1565C0; }
.curb-red    { background: #FFEBEE; border-color: #F44336; color: #B71C1C; }
.curb-yellow { background: #FFFDE7; border-color: #FBC02D; color: #827717; }

.curb-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    padding: 0 4px;
}

/* ─── Online submission card ────────────────────────────────────────────── */
.metropark-card {
    border: 2px solid var(--primary-light);
    border-radius: 12px;
    padding: 14px;
    background: var(--primary-bg);
    text-align: center;
}

.mp-title {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 6px;
}

.mp-desc {
    font-size: 13px;
    color: var(--text-sec);
    margin-bottom: 12px;
    line-height: 1.5;
}

.mp-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(27,42,74,0.3);
}

.mp-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.mp-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ─── Submission result cards ─────────────────────────────────────────────── */
.submit-success {
    background: var(--success-bg);
    border: 1.5px solid var(--success);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.ss-icon { font-size: 32px; margin-bottom: 6px; }
.ss-title { font-size: 16px; font-weight: 800; color: #00835A; margin-bottom: 6px; }
.ss-ref { font-size: 15px; margin-bottom: 6px; }
.ss-note { font-size: 12px; color: var(--text-sec); }

.submit-fail {
    background: var(--warning-bg);
    border: 1.5px solid var(--warning);
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    line-height: 1.5;
}

/* ─── Class Action Opt-in card ────────────────────────────────────────────── */
.class-action-card {
    border: 2px solid #0044CC;
    border-radius: 12px;
    overflow: hidden;
    background: #F0F7FF;
}

.ca-header {
    padding: 10px 14px;
    background: #0044CC;
    color: white;
    font-size: 15px;
}

.ca-body {
    padding: 10px 14px 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}

.ca-checkbox-label {
    display: flex;
    align-items: flex-start;
    padding: 0 14px 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    gap: 6px;
}

.ca-submit-btn {
    display: block;
    width: calc(100% - 28px);
    margin: 0 14px 14px;
    padding: 10px;
    background: #0044CC;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.ca-submit-btn:hover { background: #0033AA; }
.ca-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ca-success {
    padding: 14px;
    font-size: 14px;
    color: #00835A;
    font-weight: 600;
    background: var(--success-bg);
}

/* ─── Location confirm card ───────────────────────────────────────────────── */
.loc-confirm-card {
    border: 2px solid var(--primary-light);
    border-radius: 12px;
    overflow: hidden;
    font-size: 14px;
}

.loc-confirm-title {
    padding: 10px 14px;
    background: var(--primary-bg);
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.loc-confirm-address {
    padding: 14px;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.5px;
    background: var(--card);
    color: var(--primary-dark);
    border-bottom: 1px solid var(--border);
}

/* Errors */
.err { color: var(--danger); font-size: 14px; }

/* Utility */
.hidden { display: none !important; }

/* ─── Tier selection card ────────────────────────────────────────────────── */
.tier-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
}
.tier-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text);
}
.tier-options {
    display: flex;
    gap: 10px;
}
.tier-option {
    flex: 1;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    position: relative;
    transition: var(--transition);
}
.tier-option.tier-featured {
    border-color: var(--primary);
    background: var(--primary-bg);
}
.tier-option.tier-selected {
    border-color: #22C55E;
    background: #F0FDF4;
}
.tier-badge {
    font-size: 10px;
    background: var(--primary);
    color: white;
    border-radius: 6px;
    padding: 2px 6px;
    margin-bottom: 6px;
    display: inline-block;
}
.tier-name { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.tier-price { font-size: 22px; font-weight: 900; color: var(--primary); margin-bottom: 6px; }
.tier-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.4; }
.tier-btn {
    width: 100%;
    padding: 8px 0;
    border: 2px solid var(--primary);
    border-radius: 8px;
    background: white;
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.tier-btn:hover { background: var(--primary); color: white; }
.tier-btn-featured { background: var(--primary); color: white; }
.tier-btn-featured:hover { background: var(--primary-dark, #1a3fa3); }

.fear-close {
    background: #FFF3CD;
    border-right: 3px solid #F39C12;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 10px;
}

/* ─── Inline payment widget (Sumit iframe inside chat bubble) ──────────── */
.pay-widget {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
    max-width: 400px;
}

.pay-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--primary);
    color: white;
}

.pay-widget-logo {
    height: 24px;
    width: auto;
    display: block;
    object-fit: contain;
}

.pay-widget-amount {
    font-size: 18px;
    font-weight: 900;
}

.pay-iframe-wrap {
    width: 100%;
    height: 360px;
    position: relative;
    background: #fafafa;
}

.pay-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.pay-widget-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    padding: 8px 12px;
    font-size: 11px;
    color: var(--text-sec);
    background: var(--bg);
    border-top: 1px solid var(--border);
    direction: rtl;
}

.pay-widget-footer svg {
    color: var(--success);
    flex-shrink: 0;
}

.pay-pci-notice {
    padding: 8px 14px;
    font-size: 11px;
    color: var(--text-sec);
    background: #fafafa;
    border-top: 1px solid var(--border);
    text-align: center;
    line-height: 1.5;
}

/* Animated widget collapse */
@keyframes pay-slide-up {
    from { transform: translateY(0); opacity: 1; max-height: 500px; }
    to   { transform: translateY(-20px); opacity: 0; max-height: 0; overflow: hidden; }
}
.pay-widget-closing {
    animation: pay-slide-up 0.36s ease forwards;
    pointer-events: none;
}

.pay-dev-notice {
    background: #E8F4FD;
    border: 1px solid #90CAF9;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #1565C0;
}

/* ─── ID upload card ─────────────────────────────────────────────────────── */
.id-upload-card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    text-align: center;
}

.id-upload-icon { font-size: 36px; margin-bottom: 8px; }

.id-upload-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}

.id-upload-sub {
    font-size: 12px;
    color: var(--text-sec);
    margin-bottom: 14px;
    line-height: 1.4;
}

.id-upload-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}

.id-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: white;
    color: var(--text);
    font-family: inherit;
    transition: var(--transition);
}

.id-upload-btn:hover { background: var(--bg); border-color: var(--primary); }

.id-upload-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.id-upload-primary:hover { background: var(--primary-dark); }

.id-upload-manual { margin-top: 4px; }

.id-manual-link {
    background: none;
    border: none;
    color: var(--text-sec);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
    padding: 0;
}

/* ─── Ironclad RR tracking barcode ──────────────────────────────────────── */
.tracking-rr {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 0;
    text-align: center;
}

.tracking-rr-label {
    font-size: 11px;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.tracking-rr-code {
    font-family: 'Courier New', monospace;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text);
    margin-bottom: 6px;
}

.tracking-rr-bars {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 32px;
    margin-bottom: 8px;
    gap: 1px;
}

.tracking-rr-link {
    display: inline-block;
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.tracking-rr-link:hover { text-decoration: underline; }

/* ── Subscriber Vault: stored docs card ──────────────────────────────── */
.vault-stored-card {
    background: linear-gradient(135deg, #f0faf4 0%, #e8f5ff 100%);
    border: 1.5px solid #34c759;
    border-radius: 16px;
    padding: 18px 20px;
    margin: 12px 0;
    direction: rtl;
}

.vault-stored-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vault-doc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.vault-doc-row.stored {
    background: rgba(52, 199, 89, 0.12);
    color: #1d7a38;
}

.vault-doc-row.missing {
    background: rgba(255, 149, 0, 0.10);
    color: #a05200;
}

.vault-doc-row .vault-doc-icon {
    font-size: 18px;
    margin-left: 8px;
}

.vault-doc-status {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.75;
}

.vault-stored-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.vault-use-btn {
    flex: 1;
    background: linear-gradient(135deg, #34c759, #30b955);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.vault-use-btn:hover { opacity: 0.88; }

.vault-refresh-btn {
    background: transparent;
    border: 1.5px solid #34c759;
    color: #34c759;
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.vault-refresh-btn:hover { background: rgba(52, 199, 89, 0.08); }

/* ── Subscriber Vault: consent dialog ───────────────────────────────── */
.vault-consent-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin: 12px 0;
    direction: rtl;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.vault-consent-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 10px;
}

.vault-consent-body {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 12px;
}

.vault-consent-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.vault-consent-list li {
    font-size: 13px;
    color: #333;
    padding: 5px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.vault-consent-list li::before {
    content: "✓";
    color: #34c759;
    font-weight: 700;
    flex-shrink: 0;
}

.vault-consent-legal {
    font-size: 11px;
    color: #999;
    line-height: 1.5;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-bottom: 16px;
}

.vault-consent-actions {
    display: flex;
    gap: 10px;
}

.vault-consent-yes {
    flex: 1;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.vault-consent-yes:hover { opacity: 0.88; }

.vault-consent-no {
    background: transparent;
    border: 1.5px solid var(--border);
    color: #666;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.vault-consent-no:hover { background: #f5f5f5; }

/* ══════════════════════════════════════════════════════════════════════════
   SDUI Case-Analysis Card — the money moment
   ══════════════════════════════════════════════════════════════════════════ */

.ca-card {
    border-radius: 20px;
    padding: 18px 16px 14px;
    margin: 6px 0;
    direction: rtl;
    position: relative;
    overflow: hidden;
}
.ca-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.ca-high  { background: linear-gradient(135deg, #0a2a1a 0%, #0f3d26 100%); border: 1px solid rgba(0,214,143,0.3); }
.ca-medium{ background: linear-gradient(135deg, #2a1f00 0%, #3d2e00 100%); border: 1px solid rgba(255,170,0,0.3); }
.ca-low   { background: linear-gradient(135deg, #2a0a0a 0%, #3d1010 100%); border: 1px solid rgba(255,107,107,0.3); }

/* Header */
.ca-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
}
.ca-header-icon { font-size: 18px; }
.ca-header-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    flex: 1;
}
.ca-confidence-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
}

/* Gauge + text row */
.ca-verdict-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.ca-gauge-wrap {
    flex-shrink: 0;
    width: 110px;
}
.ca-gauge-svg { width: 200px; height: 110px; }
.ca-gauge-num { font-size: 22px; font-weight: 900; }
.ca-gauge-sub { font-size: 11px; fill: rgba(255,255,255,0.5); }
.ca-verdict-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding-top: 4px;
}
.ca-insight {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    line-height: 1.4;
}
.ca-summary {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
}

/* Attack chips */
.ca-attacks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.ca-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.ca-chip-critical {
    background: rgba(255,50,50,0.18);
    border: 1px solid rgba(255,50,50,0.5);
    color: #ff8a8a;
    box-shadow: 0 0 10px rgba(255,50,50,0.25);
}
.ca-chip-high {
    background: rgba(255,150,0,0.15);
    border: 1px solid rgba(255,150,0,0.4);
    color: #ffb347;
    box-shadow: 0 0 8px rgba(255,150,0,0.2);
}
.ca-chip-support {
    background: rgba(100,180,255,0.12);
    border: 1px solid rgba(100,180,255,0.3);
    color: #90caff;
}
.ca-chip-weight {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.8;
    margin-right: 2px;
    transition: filter 0.6s ease;
}

/* Paywall: chip locked state */
.ca-chip-locked {
    cursor: default;
    position: relative;
}
.ca-chip-locked .ca-chip-label {
    opacity: 1;
}
.ca-chip-locked .ca-blurred {
    filter: blur(4px);
    user-select: none;
}
.ca-chip-lock-icon {
    font-size: 10px;
    opacity: 0.7;
    margin-right: 2px;
    flex-shrink: 0;
}
/* Chip unlock animation */
.ca-chip-unlocked .ca-chip-lock-icon { display: none; }
.ca-chip-unlocked {
    animation: chip-unlock 0.5s ease forwards;
}
@keyframes chip-unlock {
    0% { opacity: 0.7; transform: scale(0.97); }
    60% { transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

/* Locked letter preview */
.ca-letter-locked {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,0.1);
}
.ca-letter-blur-preview {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.5);
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
    padding: 16px;
    direction: rtl;
    white-space: pre-wrap;
    min-height: 120px;
}
.ca-lock-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,12,40,0.6) 0%, rgba(15,12,40,0.92) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px;
    text-align: center;
}
.ca-lock-icon {
    font-size: 28px;
    margin-bottom: 4px;
}
.ca-lock-title {
    font-size: 14px;
    font-weight: 800;
    color: white;
}
.ca-lock-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}

/* Unlocked letter */
.ca-letter-unlocked {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
}
.ca-unlock-flash {
    background: linear-gradient(90deg, #00B894, #00cec9);
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    text-align: center;
}
.ca-letter-reveal {
    animation: letter-reveal 0.8s ease forwards;
    padding: 14px;
    max-height: 280px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    white-space: pre-wrap;
}
@keyframes letter-reveal {
    0% { filter: blur(10px); opacity: 0; transform: translateY(6px); }
    100% { filter: blur(0); opacity: 1; transform: translateY(0); }
}

/* Cancellation stats bar */
.ca-stats-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.ca-stats-label {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}
.ca-stats-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.ca-stats-bar {
    height: 100%;
    background: linear-gradient(90deg, #00D68F, #00b8d9);
    border-radius: 3px;
    transition: width 1.2s ease-out;
}
.ca-stats-pct {
    font-size: 12px;
    font-weight: 700;
    color: #00D68F;
    white-space: nowrap;
    min-width: 32px;
    text-align: left;
}

/* Tier cards inside case-analysis */
.ca-tiers {
    display: flex;
    gap: 10px;
}
.ca-tier-option {
    flex: 1;
    border-radius: 14px;
    padding: 12px 10px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.18s, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
}
.ca-tier-option:active { transform: scale(0.97); }
.ca-tier-basic {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
}
.ca-tier-basic:hover { background: rgba(255,255,255,0.11); }
.ca-tier-ironclad {
    background: linear-gradient(135deg, rgba(102,126,234,0.25) 0%, rgba(118,75,162,0.25) 100%);
    border: 1px solid rgba(150,100,255,0.5);
    box-shadow: 0 0 16px rgba(120,80,255,0.2);
}
.ca-tier-ironclad-rec {
    border-color: rgba(200,160,255,0.7);
    box-shadow: 0 0 20px rgba(150,80,255,0.35);
}
.ca-tier-ironclad:hover { box-shadow: 0 0 24px rgba(150,80,255,0.5); }
.ca-tier-option:hover  { transform: translateY(-2px); }
.ca-tier-option.ca-tier-selected { ring: 2px; box-shadow: 0 0 0 2px #fff inset; }

.ca-tier-rec {
    font-size: 10px;
    font-weight: 700;
    color: #d4a3ff;
    margin-bottom: 4px;
}
.ca-tier-name {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
}
.ca-tier-price {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 3px 0;
}
.ca-tier-desc {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    line-height: 1.4;
}
.ca-tier-reasoning {
    font-size: 10px;
    color: #c4a0ff;
    margin-top: 4px;
    font-style: italic;
}

/* Ironclad shimmer */
@keyframes ca-shimmer {
    0%   { transform: translateX(140%) skewX(-15deg); }
    100% { transform: translateX(-40%) skewX(-15deg); }
}
.ca-tier-ironclad::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    animation: ca-shimmer 2.4s ease-in-out infinite;
    pointer-events: none;
}

/* New v2 tier cards */
.ca-tiers-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}
.ca-tier-v2 {
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 2px solid transparent;
}
.ca-tier-v2:active { transform: scale(0.98); }
.ca-tier-std {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
}
.ca-tier-std:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); }
.ca-tier-prem {
    background: linear-gradient(135deg, rgba(255,200,0,0.12), rgba(255,200,0,0.06));
    border-color: rgba(255,200,0,0.35);
}
.ca-tier-prem-rec {
    border-color: #FFD700;
    box-shadow: 0 0 16px rgba(255,215,0,0.25);
}
.ca-tv2-rec-badge {
    font-size: 11px;
    font-weight: 700;
    color: #FFD700;
    margin-bottom: 6px;
}
.ca-tv2-badge {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    margin-bottom: 4px;
}
.ca-tv2-price {
    font-size: 28px;
    font-weight: 900;
    color: white;
    margin-bottom: 8px;
    letter-spacing: -1px;
}
.ca-tv2-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    line-height: 1.55;
}
.ca-tv2-eta {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--primary-light);
    font-weight: 600;
}
.ca-headline {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    text-align: center;
    margin-bottom: 4px;
    padding: 0 8px;
}
.ca-gauge-center {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.ca-summary-box {
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
    margin-bottom: 12px;
    text-align: right;
}
.ca-cta-line {
    text-align: center;
    font-size: 15px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
    margin-bottom: 14px;
    padding: 0 4px;
}
.ca-cta-line strong { color: white; font-size: 18px; }
.ca-trust-line {
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Letter accordion */
.ca-letter-details {
    margin-top: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    overflow: hidden;
}
.ca-letter-toggle {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--primary);
    list-style: none;
    outline: none;
    direction: rtl;
}
.ca-letter-toggle::-webkit-details-marker { display: none; }
.ca-letter-details[open] .ca-letter-toggle { border-bottom: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════════════════
   Vault Dashboard Card (vd-*)
   ══════════════════════════════════════════════════════════════════════════ */

.vd-card {
    background: linear-gradient(135deg, #0f1b2d 0%, #1a2a40 100%);
    border: 1px solid rgba(100,160,255,0.25);
    border-radius: 18px;
    padding: 16px;
    direction: rtl;
    box-shadow: 0 4px 20px rgba(0,80,200,0.12);
}
.vd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}
.vd-saved {
    font-size: 13px;
    font-weight: 700;
    color: #00D68F;
    background: rgba(0,214,143,0.12);
    padding: 3px 10px;
    border-radius: 12px;
}
.vd-cases { margin-bottom: 12px; }
.vd-case-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 5px;
    background: rgba(255,255,255,0.04);
    font-size: 13px;
    transition: background 0.3s;
}
.vd-case-icon { font-size: 16px; flex-shrink: 0; }
.vd-case-num  { flex: 1; color: rgba(255,255,255,0.85); font-weight: 600; }
.vd-case-status {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
}
.vd-status-ok {
    color: #00D68F;
    background: rgba(0,214,143,0.12);
}
.vd-rr-link {
    font-size: 11px;
    color: #5bbcff;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(91,188,255,0.1);
}
.vd-rr-link:hover { text-decoration: underline; }
.vd-empty {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    text-align: center;
    padding: 12px 0;
}
.vd-docs { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; }
.vd-docs-title {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.vd-doc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
    margin-bottom: 5px;
}
.vd-doc-stored {
    background: rgba(0,214,143,0.1);
    border: 1px solid rgba(0,214,143,0.3);
    color: rgba(255,255,255,0.75);
}
.vd-doc-missing {
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.35);
}
.vd-doc-lock { font-size: 13px; cursor: help; }
.vd-doc-add  { font-size: 16px; color: rgba(255,255,255,0.3); }

/* SSE live-update flash */
@keyframes vd-flash { 0%{background:rgba(0,214,143,0.2)} 100%{background:rgba(255,255,255,0.04)} }
.vd-row-flash { animation: vd-flash 1.2s ease-out forwards; }

/* ═══════════════════════════════════════════════════════════════
   Auth card — password creation after payment (inside chat)
═══════════════════════════════════════════════════════════════ */
.auth-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(27,42,74,0.35);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
}
.auth-prompt {
    font-size: 14px;
    color: rgba(255,255,255,0.88);
    margin: 0 0 4px;
    line-height: 1.5;
}
.auth-email-display {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin: 0;
    padding: 6px 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
}
.auth-pw-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    direction: ltr;
    text-align: left;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.auth-pw-input:focus { border-color: #1B2A4A; }
.auth-pw-error {
    font-size: 12px;
    color: #FF7675;
    margin: -4px 0 0;
}
.auth-pw-btn {
    background: #1B2A4A;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 18px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}
.auth-pw-btn:hover { background: #0F1D36; }
.auth-pw-skip {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.35);
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
    text-align: center;
    font-family: inherit;
}
.auth-pw-skip:hover { color: rgba(255,255,255,0.6); }

/* Dashboard button in chat header */
.dashboard-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 7px;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    margin-right: 4px;
}
.dashboard-btn:hover { background: rgba(27,42,74,0.3); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   Screen 4: Login
═══════════════════════════════════════════════════════════════ */
#screenLogin {
    background: var(--primary-dark);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.auth-screen-wrap {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}
.auth-screen-logo { margin-bottom: 18px; }
.auth-screen-logo-img { height: 52px; object-fit: contain; }
.auth-screen-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 6px;
    text-align: center;
}
.auth-screen-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin: 0 0 28px;
    text-align: center;
}
.auth-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.auth-input {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    direction: ltr;
    text-align: left;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.auth-input:focus { border-color: var(--accent); background: rgba(0,184,148,0.06); }
.auth-error {
    font-size: 13px;
    color: #FF7675;
    background: rgba(255,118,117,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
}
.auth-submit-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 14px;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
    box-shadow: 0 4px 16px rgba(0,184,148,0.3);
    transition: var(--transition);
}
.auth-submit-btn:hover { opacity: 0.9; }
.auth-back-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    cursor: pointer;
    margin-top: 20px;
    font-family: inherit;
    padding: 6px;
}
.auth-back-btn:hover { color: rgba(255,255,255,0.7); }

/* ═══════════════════════════════════════════════════════════════
   Screen 5: Dashboard
═══════════════════════════════════════════════════════════════ */
#screenDashboard {
    background: #0F0C1E;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.db-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.db-back-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 6px 8px;
    cursor: pointer;
    color: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
}
.db-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #fff;
    font-size: 15px;
}
.db-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}
.db-loading, .db-error, .db-empty {
    text-align: center;
    color: rgba(255,255,255,0.4);
    padding: 40px 16px;
    font-size: 15px;
}
.db-user-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(27,42,74,0.25);
}
.db-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(27,42,74,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1B2A4A;
    flex-shrink: 0;
}
.db-user-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.db-user-email { font-size: 14px; font-weight: 600; color: #fff; }
.db-verified { font-size: 11px; color: #00B894; font-weight: 600; }
.db-unverified { font-size: 11px; color: #FDCB6E; }
.db-logout-btn {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 6px 12px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}
.db-logout-btn:hover { background: rgba(255,118,117,0.15); color: #FF7675; border-color: rgba(255,118,117,0.3); }

.db-section { margin-bottom: 24px; }
.db-section-title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin: 0 0 12px;
}
.db-ticket {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.db-ticket-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.db-ticket-num { font-size: 14px; font-weight: 700; color: #fff; }
.db-status {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}
.db-status-good { background: rgba(0,184,148,0.2); color: #00B894; }
.db-status-bad  { background: rgba(255,118,117,0.2); color: #FF7675; }
.db-status-pending { background: rgba(253,203,110,0.2); color: #FDCB6E; }
.db-status-neutral { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.db-ticket-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
}
.db-appeal-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
}
.db-appeal-prob {
    background: rgba(27,42,74,0.2);
    color: #3D5A80;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}
.db-appeal-result { color: rgba(255,255,255,0.5); }
.db-ticket-actions { margin-top: 8px; }
.db-status-select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    padding: 6px 10px;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    outline: none;
}
.db-status-select:focus { border-color: #1B2A4A; }

.db-docs-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-doc {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.07);
}
.db-doc-icon { font-size: 18px; }
.db-doc-name { flex: 1; font-size: 13px; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-doc-date { font-size: 11px; color: rgba(255,255,255,0.35); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   Screen 3b: Results Page (screenResults) — light theme
═══════════════════════════════════════════════════════════════ */
#screenResults {
    background: #FAFAFE;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.rs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}
.rs-back-btn {
    background: var(--primary-bg);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 7px 9px;
    cursor: pointer;
    color: var(--primary);
    display: flex;
    align-items: center;
}
.rs-header-logo { height: 32px; object-fit: contain; }
.rs-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40px;
}

/* ── Results page: Hero ─────────────────────────────────────────────────── */
.rs-hero {
    background: linear-gradient(150deg, #1B2A4A 0%, #2D4A7A 50%, #3D5A80 100%);
    padding: 32px 24px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.rs-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.rs-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 16px;
    position: relative;
}
.rs-gauge-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    position: relative;
}
.rs-gauge-svg {
    width: 260px;
    height: 145px;
    overflow: visible;
}
.rs-counter {
    font-size: 56px;
    font-weight: 900;
    color: #22C55E;
    line-height: 1;
    margin: -8px 0 2px;
    letter-spacing: -2px;
    position: relative;
    transition: color .3s;
}
.rs-gauge-label {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    margin: 0 0 6px;
    position: relative;
    transition: opacity .5s ease;
}
.rs-hero-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    margin: 0;
    position: relative;
}

/* ── Results page: Chips ────────────────────────────────────────────────── */
.rs-chips-section {
    padding: 16px 16px 4px;
    border-bottom: 1px solid var(--border);
    background: white;
}
.rs-chips-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-light);
    margin-bottom: 10px;
}
.rs-chips-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: none;
}
.rs-chips-row::-webkit-scrollbar { display: none; }
.rs-chip {
    flex-shrink: 0;
    background: var(--primary-bg);
    border: 1px solid rgba(27,42,74,0.2);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}
.rs-chip-ko {
    background: var(--warning-bg);
    border-color: rgba(253,203,110,0.5);
    color: #B7870D;
    font-weight: 700;
}

/* ── Results page: Location (edge-to-edge) ──────────────────────────────── */
.rs-location-section {
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    background: white;
}
.rs-location-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-light);
    padding: 14px 16px 8px;
}
.rs-location-link {
    display: block;
    text-decoration: none;
    position: relative;
}
.rs-location-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.rs-location-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 13px;
    color: #fff;
}
.rs-location-open {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 3px 8px;
    flex-shrink: 0;
}
/* Curb color badge — shown below Street View image */
.rs-curb-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid;
    font-size: 13px;
    color: var(--text);
    flex-wrap: wrap;
}
.rs-curb-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rs-curb-text { flex: 1; line-height: 1.4; }
.rs-curb-src {
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
}
.rs-location-warn {
    font-size: 13px;
    color: #B7870D;
    background: var(--warning-bg);
    border-top: 1px solid rgba(253,203,110,0.3);
    padding: 10px 16px;
}
.rs-location-note {
    font-size: 13px;
    color: var(--text-sec);
    padding: 8px 16px 12px;
    line-height: 1.5;
}

/* ── Results page: Cards (GIS) ──────────────────────────────────────────── */
.rs-card-wrap {
    padding: 16px 16px 0;
    background: #FAFAFE;
}
.rs-card {
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    background: white;
    box-shadow: var(--shadow);
}
.rs-gis-card {
    border: 1px solid rgba(27,42,74,0.15);
    background: white;
}
.rs-gis-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.rs-gis-summary {
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
}
.rs-gis-more {
    margin-top: 8px;
}
.rs-gis-toggle {
    font-size: 13px;
    color: var(--primary);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.rs-gis-toggle::-webkit-details-marker { display: none; }
.rs-gis-body {
    font-size: 13px;
    color: var(--text-sec);
    line-height: 1.6;
    margin-top: 8px;
}
.rs-gis-conflict {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #B7870D;
    padding: 8px 12px;
    background: var(--warning-bg);
    border-radius: 8px;
}
.rs-gis-camera {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-sec);
}

/* ── Results page: Tier cards ───────────────────────────────────────────── */
.rs-tiers-wrap {
    padding: 20px 16px 8px;
    background: #FAFAFE;
}
.rs-tiers-headline {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    text-align: center;
    margin-bottom: 18px;
}
/* Premium card — white + blue border + blue shadow */
.rs-tier-prem {
    background: white;
    border: 2px solid var(--primary);
    border-radius: 18px;
    padding: 20px 16px 16px;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 4px 24px rgba(27,42,74,0.18);
    transition: box-shadow 0.2s, transform 0.15s;
}
.rs-tier-prem:active { box-shadow: 0 6px 32px rgba(27,42,74,0.28); transform: translateY(-1px); }
.rs-tier-badge {
    position: absolute;
    top: -13px;
    right: 18px;
    background: linear-gradient(90deg, #1B2A4A, #2D4A7A);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: .02em;
}
/* Basic card — white outline */
.rs-tier-basic {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 18px;
    padding: 18px 16px 16px;
    margin-bottom: 12px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: border-color 0.2s;
}
.rs-tier-basic:active { border-color: var(--primary-light); }
.rs-tier-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}
.rs-tier-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}
.rs-tier-name-basic {
    color: var(--text-sec);
}
.rs-tier-tag {
    font-size: 12px;
    color: var(--primary);
    margin-top: 3px;
    font-weight: 600;
}
.rs-tier-tag-basic {
    color: var(--text-light);
}
.rs-tier-price-prem {
    font-size: 28px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}
.rs-tier-price-basic {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-sec);
    line-height: 1;
}
.rs-tier-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rs-tier-list li {
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rs-tier-list-basic li {
    color: var(--text-sec);
}
.rs-check {
    color: var(--primary);
    font-weight: 900;
    font-size: 15px;
    flex-shrink: 0;
}
.rs-btn-prem {
    width: 100%;
    background: linear-gradient(135deg, #1B2A4A, #2D4A7A);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 14px;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s;
    letter-spacing: .01em;
    box-shadow: 0 4px 14px rgba(27,42,74,0.35);
}
.rs-btn-prem:active { opacity: 0.88; }
.rs-btn-basic {
    width: 100%;
    background: transparent;
    color: var(--text-sec);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.rs-btn-basic:active { border-color: var(--primary-light); color: var(--primary); }

/* ── Results page: Trust bar ────────────────────────────────────────────── */
.rs-trust {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 18px 16px 32px;
    font-size: 12px;
    color: var(--text-light);
    border-top: 1px solid var(--border);
    background: #FAFAFE;
}
/* highlighted state (used in selectTier) */
.rs-tier-highlighted {
    box-shadow: 0 0 0 2.5px var(--primary), 0 4px 20px rgba(27,42,74,0.2);
}

/* ═══════════════════════════════════════════════════════════════
   Screens 3c & 3d: Payment + Submit (shared header/shell)
═══════════════════════════════════════════════════════════════ */
#screenPayment, #screenSubmit {
    background: #FAFAFE;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sp-back-btn {
    background: var(--primary-bg);
    border: none;
    border-radius: 10px;
    padding: 7px 9px;
    cursor: pointer;
    color: var(--primary);
    display: flex;
    align-items: center;
}
.sp-header-logo { height: 32px; object-fit: contain; }
.sp-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40px;
}
.sp-loading {
    text-align: center;
    padding: 56px 24px;
    color: var(--text-sec);
    font-size: 15px;
}

/* ── Payment screen ─────────────────────────────────────────────────────── */
.sp-tier-summary {
    background: linear-gradient(150deg, #1B2A4A 0%, #2D4A7A 100%);
    padding: 28px 24px;
    text-align: center;
    color: white;
}
.sp-tier-label {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.85;
    margin-bottom: 6px;
    letter-spacing: .03em;
}
.sp-tier-amount {
    font-size: 48px;
    font-weight: 900;
    color: #FFE066;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -1px;
}
.sp-tier-note {
    font-size: 12px;
    opacity: 0.7;
}
.sp-iframe-wrap {
    padding: 16px;
}
.sp-iframe-wrap iframe {
    width: 100%;
    height: 460px;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: block;
}
.sp-security {
    text-align: center;
    padding: 12px 20px 20px;
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.6;
}
.sp-dev-notice {
    text-align: center;
    padding: 40px 24px;
    font-size: 14px;
    color: var(--text-sec);
    background: var(--warning-bg);
    margin: 20px;
    border-radius: 12px;
}
.sp-pay-error {
    text-align: center;
    padding: 56px 24px 32px;
}
.sp-pay-error-icon { font-size: 44px; margin-bottom: 14px; }
.sp-pay-error-msg { font-size: 16px; color: var(--text-sec); margin-bottom: 24px; }
.sp-retry-btn {
    background: var(--primary-bg);
    color: var(--primary);
    border: 1.5px solid var(--primary-light);
    border-radius: 50px;
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

/* ── Payment method selection ───────────────────────────────────────────── */
.sp-methods {
    padding: 20px 16px 8px;
}
.sp-methods-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-sec);
    margin-bottom: 12px;
    text-align: center;
}
.sp-method-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 8px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s;
}
.sp-method-btn:hover { border-color: var(--primary); background: var(--primary-bg); }
.sp-method-btn:active { transform: scale(.98); }
.sp-method-card { border-color: var(--primary-light); background: var(--primary-bg); }
.sp-method-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: 8px;
    font-size: 18px;
    flex-shrink: 0;
}
.sp-method-label { flex: 1; text-align: right; }
.sp-method-badge {
    font-size: 10px;
    font-weight: 800;
    background: var(--primary);
    color: white;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* ── Native card form ──────────────────────────────────────────────────── */
.sp-card-form {
    padding: 20px 16px;
}
.sp-field {
    margin-bottom: 14px;
}
.sp-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sec);
    margin-bottom: 5px;
}
.sp-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    background: white;
    direction: ltr;
    text-align: left;
    transition: border-color .2s;
}
.sp-field input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}
.sp-field-row { display: flex; gap: 12px; }
.sp-field-half { flex: 1; }
.sp-pay-btn {
    width: 100%;
    padding: 15px;
    margin-top: 8px;
    background: linear-gradient(135deg, #1B5E20, #2E7D32);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s;
}
.sp-pay-btn:hover { filter: brightness(1.05); }
.sp-pay-btn:active { transform: scale(.98); }
.sp-pay-btn:disabled { opacity: .6; cursor: not-allowed; }
.sp-card-note {
    text-align: center;
    padding: 12px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.6;
}

/* ── Card form status indicators ───────────────────────────────────────── */
.sp-card-status {
    padding: 0 16px 16px;
}
.sp-status-step {
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sec);
    background: var(--bg-light);
    animation: fadeIn .3s ease;
}
.sp-status-step.active { color: var(--primary); background: var(--primary-bg); }
.sp-status-error {
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--danger);
    background: var(--danger-bg, #FEE2E2);
    animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Submit screen ──────────────────────────────────────────────────────── */
.ss-confirm-banner {
    background: linear-gradient(135deg, #00B894, #00A381);
    padding: 32px 24px;
    text-align: center;
    color: white;
}
.ss-confirm-icon { font-size: 44px; margin-bottom: 10px; }
.ss-confirm-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.ss-confirm-sub { font-size: 14px; opacity: 0.85; }
.ss-letter-details {
    margin: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: white;
}
.ss-letter-summary {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    background: var(--primary-bg);
    list-style: none;
}
.ss-letter-summary::-webkit-details-marker { display: none; }
.ss-letter-body {
    padding: 16px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.75;
    max-height: 220px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
}
.ss-letter-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: #FAFAFE;
}
.ss-letter-btn {
    flex: 1;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
}
.ss-form {
    padding: 20px 16px;
}
.ss-form-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 20px;
}
.ss-field { margin-bottom: 20px; }
.ss-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sec);
    margin-bottom: 8px;
}
.ss-optional {
    font-weight: 400;
    color: var(--text-light);
}
.ss-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-size: 18px;
    font-family: inherit;
    color: var(--text);
    background: white;
    box-sizing: border-box;
    outline: none;
    direction: ltr;
    text-align: center;
    letter-spacing: 3px;
}
.ss-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,42,74,0.1); }
.ss-file-row {
    display: flex;
    gap: 10px;
}
.ss-file-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    background: var(--primary-bg);
    border: 1.5px dashed rgba(27,42,74,0.3);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    text-align: center;
}
.ss-file-preview {
    font-size: 13px;
    color: var(--success);
    font-weight: 600;
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--success-bg);
    border-radius: 8px;
}
.ss-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #1B2A4A, #2D4A7A);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 15px;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(27,42,74,0.35);
    transition: opacity 0.2s;
}
.ss-submit-btn:disabled { opacity: 0.55; }
.ss-submit-note {
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 10px;
}

/* ── Signature pad ───────────────────────────────────────────────────────── */
.sig-pad-wrap {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    touch-action: none;
    margin-top: 8px;
}
.sig-pad-canvas {
    display: block;
    width: 100%;
    height: 110px;
    cursor: crosshair;
    background:
        repeating-linear-gradient(
            transparent,
            transparent 35px,
            #E9ECEF 35px,
            #E9ECEF 36px
        );
}
.sig-pad-clear {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 11px;
    color: var(--text-sec);
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px 10px;
    cursor: pointer;
}
.ss-sig-hint {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 5px;
    text-align: center;
}

/* ── Digital Vault Card ──────────────────────────────────────────────────── */
.vault-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 16px;
    margin: 20px 0 8px;
}
.vault-field-card {
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    margin: 0 16px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vault-input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 15px;
    font-family: 'Heebo', sans-serif;
    color: var(--text);
    background: #FAFAFE;
    outline: none;
    direction: rtl;
    transition: border-color 0.2s;
}
.vault-input:focus { border-color: var(--primary); background: #fff; }

.vault-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0 16px;
    overflow: hidden;
}
.vault-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    transition: background 0.2s;
}
.vault-row-done { background: #F0FDF7; }
.vault-row-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}
.vault-row-body {
    flex: 1;
    min-width: 0;
}
.vault-row-body-full {
    width: 100%;
}
.vault-row-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.vault-row-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.vault-row-btns {
    display: flex;
    gap: 8px;
}
.vault-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    background: var(--primary-bg);
    transition: background 0.15s, transform 0.1s;
}
.vault-upload-btn:active { transform: scale(0.97); }
.vault-row-status {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-light);
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.vault-row-status-done {
    color: var(--success);
    animation: vault-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes vault-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
.vault-row-sig {
    align-items: flex-start;
    flex-direction: row;
}
.vault-divider {
    height: 1px;
    background: var(--border);
    margin: 0 16px;
}

/* Vault CTA button */
.vault-cta-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 20px 16px 0;
    padding: 15px;
    font-size: 16px;
    font-weight: 800;
    font-family: 'Heebo', sans-serif;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    background: linear-gradient(135deg, #1B2A4A, #2D4A7A);
    color: #fff;
    box-shadow: 0 4px 14px rgba(27,42,74,0.35);
    transition: opacity 0.2s, transform 0.15s, background 0.3s;
}
.vault-cta-btn:disabled {
    background: #CCC;
    box-shadow: none;
    cursor: not-allowed;
}
.vault-cta-btn.vault-cta-full {
    background: linear-gradient(135deg, #10B981, #059669);
    box-shadow: 0 4px 20px rgba(16,185,129,0.45);
    animation: cta-glow 1.5s ease-in-out infinite alternate;
}
@keyframes cta-glow {
    from { box-shadow: 0 4px 16px rgba(16,185,129,0.4); }
    to   { box-shadow: 0 6px 28px rgba(16,185,129,0.65); }
}

/* ── Live Tracker (Submission Progress) ──────────────────────────────────── */
.tracker-wrap {
    padding: 24px 16px 40px;
    transition: filter 0.3s;
}
.tracker-blurred {
    filter: blur(4px);
    pointer-events: none;
}
.tracker-hero {
    text-align: center;
    margin-bottom: 24px;
}
.tracker-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin: 0 auto 14px;
}
.tracker-spinner-done {
    border-color: var(--success);
    animation: none;
}
.tracker-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}
.tracker-sub {
    font-size: 13px;
    color: var(--text-sec);
}
.tracker-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}
.tracker-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    animation: step-in 0.25s ease;
}
@keyframes step-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tracker-step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.tracker-step-done .tracker-step-dot {
    background: var(--success);
    color: #fff;
}
.tracker-step-active .tracker-step-dot {
    background: var(--primary-bg);
    border: 2px solid var(--primary);
    animation: step-pulse 0.9s ease-in-out infinite alternate;
}
.tracker-step-active {
    background: var(--primary-bg);
}
@keyframes step-pulse {
    from { border-color: var(--primary); }
    to   { border-color: var(--primary-light); }
}
.tracker-step-text {
    font-size: 13px;
    color: var(--text);
}
.tracker-note {
    text-align: center;
    font-size: 11px;
    color: var(--text-light);
    margin-top: 20px;
}

/* ── Victory Card ────────────────────────────────────────────────────────── */
.victory-wrap {
    padding: 32px 20px 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.victory-check svg {
    width: 72px;
    height: 72px;
    animation: victory-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes victory-pop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.victory-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
}
.victory-ref-box {
    background: var(--primary-bg);
    border: 1.5px solid var(--primary-light);
    border-radius: var(--radius-sm);
    padding: 12px 24px;
    margin: 4px 0;
}
.victory-ref-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.victory-ref-num {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary);
    margin-top: 4px;
    letter-spacing: 0.08em;
}
.victory-tracking {
    font-size: 13px;
    color: var(--text-sec);
    text-decoration: underline;
}
.victory-note {
    font-size: 13px;
    color: var(--text-sec);
    max-width: 280px;
}
.victory-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 300px;
}
.victory-btn-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Heebo', sans-serif;
    background: #1A365D;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(26,54,93,0.3);
    transition: opacity 0.2s;
}
.victory-btn-pdf:disabled { opacity: 0.55; }
.victory-btn-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    background: #25D366;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37,211,102,0.3);
}

/* Submit success state */
.ss-success {
    padding: 52px 24px 40px;
    text-align: center;
}
.ss-success-icon { font-size: 60px; margin-bottom: 18px; }
.ss-success-title { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.ss-success-ref { font-size: 14px; color: var(--text-sec); margin-bottom: 12px; }
.ss-tracking { font-size: 13px; margin-bottom: 16px; }
.ss-tracking a { color: var(--primary); }
.ss-success-note {
    font-size: 14px;
    color: var(--text-sec);
    line-height: 1.7;
    margin-bottom: 32px;
    padding: 0 8px;
}
.ss-done-btn {
    background: linear-gradient(135deg, #1B2A4A, #2D4A7A);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(27,42,74,0.3);
}

/* ── Submission progress view ───────────────────────────────────────────── */
.ss-progress-wrap {
    padding: 40px 24px 32px;
    text-align: center;
}
.ss-progress-hero {
    margin-bottom: 28px;
}
.ss-progress-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid var(--primary-bg);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: ss-spin 0.9s linear infinite;
    margin: 0 auto 16px;
}
.ss-spinner-done {
    border-color: var(--success);
    border-top-color: var(--success);
    animation: none;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-progress-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
}
.ss-progress-sub {
    font-size: 14px;
    color: var(--text-sec);
    min-height: 20px;
    transition: color 0.3s;
}
.ss-steps {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 16px;
    max-height: 180px;
    overflow-y: auto;
    text-align: right;
    margin-bottom: 16px;
}
.ss-step-row {
    font-size: 13px;
    color: var(--text-sec);
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
    animation: ss-fadeIn 0.3s ease;
}
.ss-step-row:last-child { border-bottom: none; }
@keyframes ss-fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ss-progress-note {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 8px;
}
.ss-error-wrap {
    padding: 52px 24px 40px;
    text-align: center;
}
.ss-error-icon { font-size: 48px; margin-bottom: 14px; }
.ss-error-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.ss-error-msg { font-size: 14px; color: var(--danger); margin-bottom: 16px; }

/* ── CAPTCHA overlay dialog ─────────────────────────────────────────────── */
.captcha-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.captcha-dialog {
    background: white;
    border-radius: 20px;
    padding: 28px 24px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.captcha-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}
.captcha-sub {
    font-size: 13px;
    color: var(--text-sec);
    margin-bottom: 20px;
    line-height: 1.5;
}
#captchaWidget {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}
.captcha-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #1B2A4A, #2D4A7A);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 10px;
    transition: opacity 0.2s;
}
.captcha-submit-btn:disabled { opacity: 0.45; cursor: default; }
.captcha-note {
    font-size: 11px;
    color: var(--text-light);
    line-height: 1.5;
}
.otp-input {
    width: 100%;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 6px;
    text-align: center;
    margin-bottom: 16px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.otp-input:focus { border-color: #1B2A4A; }

/* ── Camera capture screen ──────────────────────────────────────────────── */
#screenCamera {
    position: fixed;
    inset: 0;
    background: #000;
    overflow: hidden;
    z-index: 200;
}

#camVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cam-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 40px 0 32px;
}

/* dimmed areas outside the frame */
.cam-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.42);
    /* punch out the frame area */
    --fw: min(88vw, 360px);
    --fh: calc(var(--fw) * 1.414);  /* A4 ratio */
    --fx: calc((100% - var(--fw)) / 2);
    --fy: calc((100% - var(--fh)) / 2);
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect width='100%25' height='100%25' fill='white'/><rect x='calc((100%25 - min(88vw, 360px)) / 2)' y='calc((100%25 - min(88vw, 360px) * 1.414) / 2)' width='min(88vw, 360px)' height='calc(min(88vw, 360px) * 1.414)' rx='12' fill='black'/></svg>");
    pointer-events: none;
}

.cam-frame {
    position: relative;
    width: min(88vw, 360px);
    height: calc(min(88vw, 360px) * 1.414);
    border-radius: 10px;
    z-index: 1;
    transition: box-shadow 0.3s;
}

/* Corner markers */
.cam-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: #fff;
    border-style: solid;
    transition: border-color 0.3s;
}
.cam-corner--tl { top: -2px; left: -2px;  border-width: 3px 0 0 3px; border-radius: 6px 0 0 0; }
.cam-corner--tr { top: -2px; right: -2px; border-width: 3px 3px 0 0; border-radius: 0 6px 0 0; }
.cam-corner--bl { bottom: -2px; left: -2px;  border-width: 0 0 3px 3px; border-radius: 0 0 0 6px; }
.cam-corner--br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 6px 0; }

/* Frame colour states */
.cam-frame[data-state='gray']   .cam-corner { border-color: rgba(255,255,255,0.55); }
.cam-frame[data-state='yellow'] .cam-corner { border-color: #F6C90E; }
.cam-frame[data-state='green']  .cam-corner { border-color: #22C55E; }
.cam-frame[data-state='green'] { box-shadow: 0 0 0 2px #22C55E; }

/* Flash on capture */
.cam-frame--flash { animation: cam-flash 0.25s ease-out; }
@keyframes cam-flash {
    0%   { background: rgba(255,255,255,0.6); }
    100% { background: transparent; }
}

.cam-status {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,0.55);
    border-radius: 20px;
    padding: 7px 18px;
    text-align: center;
    backdrop-filter: blur(6px);
    transition: background 0.3s;
    z-index: 2;
    max-width: 80vw;
}
.cam-status[data-type='good']  { background: rgba(34,197,94,0.85); }
.cam-status[data-type='warn']  { background: rgba(246,201,14,0.85); color: #000; }
.cam-status[data-type='error'] { background: rgba(220,38,38,0.85); }

.cam-tip {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    text-align: center;
    z-index: 2;
}

.cam-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 32px;
    z-index: 2;
}

.cam-capture-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.cam-shutter-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cam-shutter-inner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.1s;
}
.cam-capture-btn:active .cam-shutter-inner { transform: scale(0.88); }

.cam-cancel-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* ── Camera source choice sheet ─────────────────────────────────────────── */
.cam-choice-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.cam-choice-sheet {
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 20px 16px 24px;
    width: 100%;
    max-width: 480px;
}
.cam-choice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cam-choice-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
    text-align: center;
}
.cam-choice-close {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-1); border: none; border-radius: 50%;
    color: var(--text-sec); cursor: pointer; flex-shrink: 0;
    transition: var(--transition);
}
.cam-choice-close:hover { background: var(--surface-2); color: var(--text); }
.cam-choice-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--surface-1);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: right;
    transition: background 0.15s;
}
.cam-choice-btn:active { background: var(--surface-2); }
.cam-choice-icon { font-size: 26px; flex-shrink: 0; }
.cam-choice-label { font-size: 15px; font-weight: 700; color: var(--text); display: block; }
.cam-choice-sub   { font-size: 12px; color: var(--text-sec); display: block; margin-top: 2px; }
.cam-choice-cancel {
    width: 100%;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-sec);
    cursor: pointer;
    margin-top: 4px;
    font-family: inherit;
    transition: var(--transition);
}
.cam-choice-cancel:hover { background: var(--surface-1); color: var(--text); }

/* ── STAGE A: Letter Review ─────────────────────────────────────────────── */
.lr-wrap {
    padding: 20px 16px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
}
.lr-header {
    text-align: center;
    padding: 8px 0 4px;
}
.lr-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #1B2A4A 0%, #2D4A7A 100%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 50px;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}
.lr-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 4px;
}
.lr-subtitle {
    font-size: 14px;
    color: var(--text-sec);
}
.lr-letter-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.lr-letter-scroll {
    padding: 20px;
    max-height: 220px;
    overflow-y: auto;
    direction: rtl;
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.lr-letter-body {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text);
    white-space: pre-wrap;
    direction: rtl;
    text-align: right;
}
.lr-letter-fade {
    height: 40px;
    background: linear-gradient(to top, white, transparent);
    margin-top: -40px;
    pointer-events: none;
}
.lr-disclaimer {
    background: #FFF8E7;
    border: 1px solid #FFD93D;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 12.5px;
    color: #856404;
    line-height: 1.6;
    direction: rtl;
    text-align: right;
}
.lr-disclaimer strong {
    font-weight: 700;
    color: #533f03;
}
.lr-sig-card,
.lr-sig-wrap {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.lr-sig-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    direction: rtl;
    text-align: right;
}
.lr-sig-hint {
    font-size: 11.5px;
    color: var(--text-sec);
    margin-top: 8px;
    text-align: center;
}
.lr-agree-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    direction: rtl;
    padding: 2px 0;
}
.lr-agree-check {
    width: 20px;
    height: 20px;
    accent-color: #1B2A4A;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}
.lr-agree-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    direction: rtl;
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
    cursor: pointer;
}
.lr-agree-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #1B2A4A;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}
.lr-cta-btn {
    width: 100%;
    background: linear-gradient(135deg, #1B2A4A 0%, #2D4A7A 100%);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(27,42,74,0.35);
}
.lr-cta-btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
    box-shadow: none;
}
.lr-cta-btn:not(:disabled):active { transform: scale(0.97); }

/* ── STAGE B: Document Upload ───────────────────────────────────────────── */
.du-wrap {
    padding: 20px 16px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 480px;
    margin: 0 auto;
}
.du-header { text-align: center; padding: 4px 0; }
.du-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 4px;
}
.du-sub {
    font-size: 13px;
    color: var(--text-sec);
}
.du-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.du-row {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: border-color 0.2s, background 0.2s;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.du-row.du-row-done {
    border-color: #00B894;
    background: #F0FDF8;
}
.du-row-icon {
    font-size: 26px;
    flex-shrink: 0;
    margin-top: 2px;
}
.du-row-body { flex: 1; min-width: 0; }
.du-row-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
    direction: rtl;
}
.du-row-note {
    font-size: 12px;
    color: var(--text-sec);
    line-height: 1.5;
    margin-bottom: 10px;
    direction: rtl;
}
.du-appendix-link {
    color: #1B2A4A;
    text-decoration: underline;
    font-weight: 600;
}
.du-upload-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.du-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #EEF1F6;
    color: #1B2A4A;
    border: 1px solid #DDD6FE;
    border-radius: 50px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.du-upload-btn:hover { background: #EDE9FE; }
.du-file-input { display: none; }
.du-file-name {
    font-size: 11.5px;
    color: #00B894;
    font-weight: 600;
    margin-top: 6px;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.du-status {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 4px;
    transition: transform 0.2s;
}
.du-status-done { color: #00B894; }
.du-cta-btn {
    width: 100%;
    background: linear-gradient(135deg, #1B2A4A 0%, #2D4A7A 100%);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(27,42,74,0.35);
}
.du-cta-btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
    box-shadow: none;
}
.du-cta-btn:not(:disabled):active { transform: scale(0.97); }
.du-submit-note {
    font-size: 12px;
    color: var(--text-light);
    text-align: center;
    margin-top: -8px;
}

/* ── Dual-upload sides (ID card front + back) ───────────────────────────── */
.du-side-wrap {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.du-side-wrap:first-of-type {
    margin-top: 8px;
    padding-top: 8px;
    border-top: none;
}
.du-side-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sec);
    margin-bottom: 6px;
    direction: rtl;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── gov.il instructions block ──────────────────────────────────────────── */
.du-gov-instructions {
    font-size: 12px;
    color: var(--text-sec);
    background: #F8F9FF;
    border: 1px solid #E0E7FF;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 6px 0 8px;
    line-height: 1.6;
    direction: rtl;
}

/* ── Document Bridge Card ───────────────────────────────────────────────── */
.bridge-wrap {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}
.bridge-check {
    font-size: 52px;
    line-height: 1;
    animation: bridge-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes bridge-pop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.bridge-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--text);
}
.bridge-sub {
    font-size: 15px;
    color: var(--text-sec);
    margin-top: -8px;
}
.bridge-vault-card {
    width: 100%;
    background: linear-gradient(135deg, #F0FDF8 0%, #E8F5FF 100%);
    border: 1.5px solid #A7F3D0;
    border-radius: 18px;
    padding: 18px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: right;
}
.bridge-vault-icon {
    font-size: 28px;
    flex-shrink: 0;
    margin-top: 2px;
}
.bridge-vault-body { flex: 1; }
.bridge-vault-title {
    font-size: 15px;
    font-weight: 800;
    color: #065F46;
    margin-bottom: 6px;
}
.bridge-vault-text {
    font-size: 13px;
    color: #047857;
    line-height: 1.6;
}
.bridge-vault-upgrade {
    font-size: 12px;
    color: #1B2A4A;
    font-weight: 600;
    margin-top: 8px;
    background: #EDE9FE;
    border-radius: 50px;
    padding: 4px 10px;
    display: inline-block;
}
.bridge-cta {
    width: 100%;
    background: linear-gradient(135deg, #1B2A4A 0%, #2D4A7A 100%);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(27,42,74,0.35);
    transition: transform 0.15s;
    margin-top: 8px;
}
.bridge-cta:active { transform: scale(0.97); }
.bridge-note {
    font-size: 12px;
    color: var(--text-light);
    margin-top: -8px;
}

/* ── Card Flow — Stage B Document Upload ────────────────────────────────── */
.cf-wrap {
    padding: 24px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 420px;
    margin: 0 auto;
}

/* Progress bar */
.cf-progress-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cf-progress-track {
    flex: 1;
    height: 6px;
    background: var(--border, #E5E7EB);
    border-radius: 99px;
    overflow: hidden;
}
.cf-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1B2A4A, #2D4A7A);
    border-radius: 99px;
    transition: width 0.4s ease;
}
.cf-progress-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sec);
    white-space: nowrap;
}

/* Intro card */
.cf-intro-card {
    width: 100%;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 20px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.cf-intro-icon { font-size: 48px; line-height: 1; }
.cf-intro-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
}
.cf-intro-sub {
    font-size: 14px;
    color: var(--text-sec);
    margin-top: -4px;
}
.cf-auto-list {
    width: 100%;
    background: #F0FDF8;
    border: 1px solid #A7F3D0;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: right;
    margin-top: 4px;
}
.cf-auto-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #065F46;
    direction: rtl;
}
.cf-check {
    width: 20px;
    height: 20px;
    background: #10B981;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Upload card */
.cf-card {
    width: 100%;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    transition: border-color 0.3s, background 0.3s;
}
.cf-card-done {
    border-color: #10B981;
    background: #F0FDF8;
}
@keyframes cf-flash {
    0%   { background: #F0FDF8; border-color: #10B981; }
    50%  { background: #D1FAE5; border-color: #059669; }
    100% { background: #F0FDF8; border-color: #10B981; }
}
.cf-card-flash { animation: cf-flash 0.5s ease; }

.cf-card-icon  { font-size: 44px; line-height: 1; }
.cf-card-title { font-size: 20px; font-weight: 800; color: var(--text); }
.cf-card-note  { font-size: 13px; color: var(--text-sec); line-height: 1.6; }

/* Tip box for document quality */
.cf-card-tip {
    font-size: 12px;
    color: #92400E;
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px 0;
    line-height: 1.5;
}

/* TA notice in intro */
.cf-ta-notice {
    font-size: 13px;
    font-weight: 600;
    color: #1E40AF;
    background: #EFF6FF;
    border: 1px solid #93C5FD;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 12px 0 0;
    text-align: center;
}

/* Identity form (TA portal) */
.cf-identity-form {
    padding: 12px 0 0;
}
.cf-identity-form .sp-field { margin-bottom: 12px; }
.cf-identity-note {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.6;
    text-align: center;
    margin: 12px 0;
    padding: 10px 12px;
    background: var(--bg-light);
    border-radius: 8px;
}

.cf-gov-link {
    font-size: 14px;
    font-weight: 700;
    color: #1B2A4A;
    text-decoration: none;
}
.cf-gov-link:hover { text-decoration: underline; }
.cf-gov-instructions {
    font-size: 12px;
    color: var(--text-sec);
    background: var(--bg, #F9FAFB);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 10px;
    padding: 8px 12px;
    line-height: 1.7;
    direction: rtl;
    text-align: right;
    width: 100%;
}

.cf-upload-btns {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
}
.cf-upload-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 12px;
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.cf-upload-btn:hover { background: #F3F4F6; border-color: #1B2A4A; }

.cf-file-name {
    font-size: 12px;
    color: #059669;
    font-weight: 600;
    text-align: center;
}
.cf-file-name.hidden { display: none; }

.cf-done-badge {
    font-size: 13px;
    font-weight: 700;
    color: #059669;
    background: #D1FAE5;
    border-radius: 50px;
    padding: 6px 14px;
}

/* Buttons */
.cf-next-btn, .cf-skip-btn, .cf-back-btn {
    width: 100%;
    border: none;
    border-radius: 50px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}
.cf-next-btn {
    background: linear-gradient(135deg, #1B2A4A 0%, #2D4A7A 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(27,42,74,0.35);
}
.cf-next-btn:active { transform: scale(0.97); }
.cf-skip-btn {
    background: transparent;
    color: var(--text-sec);
    font-size: 13px;
    padding: 8px 12px;
}
.cf-skip-btn:hover { color: var(--text); }
.cf-back-btn {
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #E5E7EB);
    color: var(--text);
}

/* Summary card */
.cf-summary-card {
    width: 100%;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 20px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.cf-summary-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: right;
}
.cf-summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    direction: rtl;
    padding: 6px 0;
    border-bottom: 1px solid var(--border, #E5E7EB);
}
.cf-summary-item:last-child { border-bottom: none; }
.cf-summary-done  { color: var(--text); }
.cf-summary-done span:first-child  { color: #10B981; font-weight: 800; }
.cf-summary-missing { color: var(--text-sec); }
.cf-summary-missing span:first-child { color: #D1D5DB; font-weight: 800; }

.cf-missing-warn {
    font-size: 13px;
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    padding: 10px 14px;
    width: 100%;
    text-align: center;
}

/* ── Email Preview Card (ep-*) ─────────────────────────────────────────────── */
.ep-wrap { margin: 12px 0; }

.ep-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    direction: rtl;
}

.ep-header-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F0FDF4;
    border-bottom: 1px solid #BBF7D0;
    padding: 10px 16px;
}
.ep-icon   { font-size: 18px; }
.ep-title  { flex: 1; font-size: 14px; font-weight: 700; color: #15803D; }
.ep-deadline-badge {
    font-size: 11px;
    font-weight: 700;
    background: #DCFCE7;
    color: #166534;
    border: 1px solid #86EFAC;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}

.ep-envelope {
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    padding: 10px 16px;
}
.ep-meta-row {
    display: flex;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 4px;
    align-items: baseline;
}
.ep-meta-row:last-child { margin-bottom: 0; }
.ep-meta-label { color: #6B7280; font-weight: 600; min-width: 52px; }
.ep-meta-val   { color: #111827; word-break: break-all; }

.ep-body { padding: 16px; }

.ep-legal-banner {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 1.6;
    color: #92400E;
}
.ep-legal-banner p, .ep-deadline-banner p { margin: 4px 0 0; }

.ep-deadline-banner {
    background: #EFF6FF;
    border: 1px solid #93C5FD;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.6;
    color: #1E40AF;
}

.ep-to-line {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px;
}

.ep-blur-wrap {
    position: relative;
    border: 1px dashed #D1D5DB;
    border-radius: 8px;
    padding: 14px;
    overflow: hidden;
    background: #FAFAFA;
}
.ep-blur-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    background: rgba(249,250,251,.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
    border-radius: 8px;
    gap: 6px;
}
.ep-blur-line {
    font-size: 13px;
    line-height: 1.8;
    color: #6B7280;
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

/* ── Official Appeal Document Preview (blurred) ────────────────────────── */
.ap-wrap { margin: 16px 0; }

.ap-document {
    background: #FFFDF7;
    border: 1px solid #D4C5A0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.06);
    direction: rtl;
    position: relative;
}
/* Paper texture effect */
.ap-document::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 27px,
        rgba(0,0,0,.02) 27px,
        rgba(0,0,0,.02) 28px
    );
    pointer-events: none;
    z-index: 0;
}

.ap-doc-header {
    text-align: center;
    padding: 24px 20px 16px;
    border-bottom: 2px solid #1B2A4A;
    position: relative;
    z-index: 1;
}
.ap-doc-logo {
    height: 28px;
    margin-bottom: 8px;
    opacity: 0.8;
}
.ap-doc-title {
    font-size: 22px;
    font-weight: 900;
    color: #1B2A4A;
    letter-spacing: 1px;
}
.ap-doc-subtitle {
    font-size: 15px;
    font-weight: 600;
    color: #4B5563;
    margin-top: 2px;
}

.ap-doc-meta {
    padding: 14px 20px;
    border-bottom: 1px solid #E5E0D0;
    background: rgba(255,253,247,.8);
    position: relative;
    z-index: 1;
}
.ap-meta-row {
    display: flex;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 4px;
    align-items: baseline;
}
.ap-meta-row:last-child { margin-bottom: 0; }
.ap-meta-label {
    color: #6B7280;
    font-weight: 700;
    min-width: 80px;
    font-size: 12px;
    text-transform: uppercase;
}
.ap-meta-val {
    color: #111827;
    font-weight: 600;
    font-size: 15px;
}

/* Attack teaser chips */
.ap-attacks-teaser {
    padding: 12px 20px;
    border-bottom: 1px solid #E5E0D0;
    position: relative;
    z-index: 1;
}
.ap-attacks-title {
    font-size: 11px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.ap-attacks-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-attack-chip {
    font-size: 12px;
    font-weight: 600;
    color: #15803D;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 20px;
    padding: 3px 10px;
}

/* Blurred legal body */
.ap-blur-section {
    position: relative;
    padding: 20px;
    min-height: 200px;
    z-index: 1;
}
.ap-blur-content {
    filter: blur(6px);
    -webkit-filter: blur(6px);
    user-select: none;
    pointer-events: none;
}
.ap-blur-para {
    font-size: 13px;
    line-height: 1.9;
    color: #374151;
    margin-bottom: 12px;
    text-align: justify;
}
.ap-blur-overlay-box {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,253,247,.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 3;
    text-align: center;
    padding: 20px;
}
.ap-blur-lock {
    font-size: 40px;
    margin-bottom: 10px;
    animation: lockPulse 2s ease-in-out infinite;
}
@keyframes lockPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.ap-blur-headline {
    font-size: 18px;
    font-weight: 800;
    color: #1B2A4A;
    margin-bottom: 6px;
}
.ap-blur-subtext {
    font-size: 13px;
    color: #4B5563;
    max-width: 280px;
    line-height: 1.5;
}

/* Signature area */
.ap-signature-area {
    padding: 16px 20px 20px;
    text-align: left;
    position: relative;
    z-index: 1;
}
.ap-sig-line {
    width: 140px;
    height: 1px;
    background: #9CA3AF;
    margin-bottom: 4px;
}
.ap-sig-label {
    font-size: 10px;
    color: #9CA3AF;
    font-weight: 600;
}

/* Giant CTA button */
.ap-cta-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 16px auto 0;
    padding: 18px 20px;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #388E3C 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(27,94,32,.35);
    transition: all .15s;
    line-height: 1.4;
}
.ap-cta-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 24px rgba(27,94,32,.45);
}
.ap-cta-btn:active { transform: scale(.98); }
.ap-cta-note {
    text-align: center;
    font-size: 11px;
    color: var(--text-light);
    margin: 8px 0 4px;
    padding: 0 16px;
}

/* ── Copy Protection ───────────────────────────────────────────────────── */
.ap-no-select {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Diagonal watermark */
.ap-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 28px;
    font-weight: 900;
    color: rgba(0,0,0,.04);
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    letter-spacing: 4px;
}

/* ── Killer Argument Section (REVEALED — not blurred) ──────────────────── */
.ap-killer-section {
    position: relative;
    z-index: 1;
    padding: 20px;
    border-top: 2px solid #16A34A;
    border-bottom: 2px solid #16A34A;
    background: linear-gradient(to bottom, #F0FDF4, #FFFFFF);
}
.ap-killer-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    background: #16A34A;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.ap-killer-label {
    font-size: 14px;
    font-weight: 800;
    color: #15803D;
    margin-bottom: 8px;
}
.ap-killer-text {
    font-size: 14px;
    line-height: 1.8;
    color: #1F2937;
    font-weight: 500;
    text-align: justify;
}

/* ── Choice Module (Option A vs Option B) ──────────────────────────────── */
.choice-module {
    padding: 20px 0 0;
}
.choice-title {
    font-size: 18px;
    font-weight: 800;
    color: #1F2937;
    text-align: center;
    margin-bottom: 16px;
}
.choice-card {
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1.5px solid #E5E7EB;
}
.choice-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}
.choice-card-name { font-size: 16px; font-weight: 800; }

/* Option A: DIY (grayed out, friction) */
.choice-diy {
    background: #F9FAFB;
    border-color: #D1D5DB;
    opacity: .85;
}
.choice-diy-header { background: #F3F4F6; }
.choice-diy .choice-card-name { color: #6B7280; }
.choice-diy-list {
    list-style: none; padding: 8px 16px 12px;
}
.choice-diy-list li {
    font-size: 13px; color: #6B7280; padding: 4px 0; line-height: 1.5;
}
.choice-diy-price {
    padding: 8px 16px 14px;
    font-size: 13px;
    color: #9CA3AF;
    font-weight: 600;
}

/* Option B: WhyPay (highlighted, green, recommended) */
.choice-wp {
    background: #fff;
    border-color: #16A34A;
    border-width: 2px;
    box-shadow: 0 4px 20px rgba(22,163,74,.15);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.choice-wp:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(22,163,74,.2); }
.choice-wp-header { background: linear-gradient(135deg, #F0FDF4, #DCFCE7); }
.choice-wp .choice-card-name { color: #15803D; }
.choice-badge-rec {
    font-size: 11px; font-weight: 800;
    background: #16A34A; color: #fff;
    padding: 3px 10px; border-radius: 20px;
}
.choice-wp-list {
    list-style: none; padding: 12px 16px 8px;
}
.choice-wp-list li {
    font-size: 14px; color: #1F2937; padding: 5px 0; line-height: 1.5;
}

/* Pricing section */
.choice-wp-price {
    padding: 4px 16px 4px;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
}
.choice-original-price {
    color: #9CA3AF;
    text-decoration: line-through;
    font-size: 16px;
    font-weight: 600;
    margin-left: 8px;
}
.choice-promo-price {
    color: #16A34A;
}
.choice-promo-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FCD34D;
    padding: 2px 8px;
    border-radius: 12px;
    margin-right: 8px;
    vertical-align: middle;
}
.choice-promo-note {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #16A34A;
    padding: 0 16px 8px;
}

.choice-wp-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 8px auto;
    padding: 16px;
    background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #388E3C 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(27,94,32,.3);
    transition: all .15s;
}
.choice-wp-btn:hover { filter: brightness(1.05); }
.choice-wp-btn:active { transform: scale(.98); }
.choice-wp-sub {
    text-align: center;
    font-size: 11px;
    color: #6B7280;
    padding: 4px 16px 14px;
}

/* Fine doubling warning */
.choice-fine-warn {
    text-align: center;
    font-size: 13px;
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 8px 0 0;
    line-height: 1.5;
}