/* ... existing styles untouched initially ... */
:root {
    /* Pristine Fintech Light Theme (Dull Off-White) */
    --bg-color: #F1F5F9; 
    --bg-surface: #F8FAFC;
    
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    
    --accent-primary: #0F172A; /* Slate Black */
    --btn-text: #FFFFFF;
    --accent-hover: #334155;
    --accent-light: rgba(15, 23, 42, 0.05);

    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;

    --border-color: #E2E8F0;
    
    /* Typography */
    --font-family: 'Outfit', sans-serif;
    
    /* Spacing & Radii */
    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05);
}

[data-theme="dark"] {
    --bg-color: #0F172A; 
    --bg-surface: #1E293B;
    
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    
    --accent-primary: #3B82F6; /* Bright Trust Blue for dark mode */
    --btn-text: #FFFFFF;
    --accent-hover: #2563EB;
    --accent-light: rgba(59, 130, 246, 0.15);

    --border-color: #334155;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-family);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.5px; }
h1 { font-size: 2rem; }
p { color: var(--text-secondary); line-height: 1.5; }

/* Base App Container Setup */
.app-wrapper {
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-color);
    position: relative;
    transition: background-color 0.3s;
}

/* Hard Mobile Mockup for Desktop users */
@media (min-width: 500px) {
    body {
        background-color: #E2E8F0; /* Clean grey outside phone */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    [data-theme="dark"] body {
        background-color: #020617;
    }

    .app-wrapper {
        max-width: 420px;
        height: 85vh;
        min-height: unset;
        max-height: 850px;
        border-radius: 40px;
        outline: 14px solid #000; 
        box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        margin: auto;
        overflow: hidden; /* Hide outer scroll to fake the phone frame */
        position: relative;
    }
}