/* ===========================================
   FDIC V2 — Complete Styles
   Government base (from V1) + Login + Dashboard
   =========================================== */

:root {
    --navy-900:#003256;
    --navy-800:#003d72;
    --navy-700:#004b8d;
    --navy-600:#374151;
    --gold-500:#fdb81e;
    --gold-600:#f5a623;
    --gold-700:#a07f3a;
    --white:#ffffff;
    --gray-50:#f9fafb;
    --gray-100:#f3f4f6;
    --gray-200:#e5e7eb;
    --gray-300:#d1d5db;
    --gray-600:#6b7280;
    --gray-700:#4b5563;
    --green-500:#10b981;
    --green-100:#d1fae5;
    --red-500:#ef4444;
    --red-100:#fee2e2;
    --font-heading:'Merriweather', serif;
    --font-body:'Open Sans', sans-serif;
    --glass-bg:rgba(255,255,255,0.92);
    --glass-border:rgba(255,255,255,0.3);
    --glass-shadow:0 8px 32px rgba(0,0,0,0.08);
    --spacing-xs:0.5rem;
    --spacing-sm:0.75rem;
    --spacing-md:1rem;
    --spacing-lg:1.5rem;
    --spacing-xl:2rem;
    --spacing-2xl:3rem;
    --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1);
    --radius-sm:0.375rem;
    --radius-md:0.5rem;
    --radius-lg:0.75rem;
    --radius-xl:1rem;
    --transition-base:250ms cubic-bezier(0.4, 0, 0.2, 1)
}

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

html, body { height:100%; -webkit-text-size-adjust:100% }

body {
    font-family:var(--font-body);
    background:linear-gradient(160deg, #e8ecf1 0%, #d5dce6 40%, #c8d1de 100%);
    color:var(--navy-900);
    line-height:1.6;
    min-height:100vh;
    display:flex;
    flex-direction:column
}

a { text-decoration:none; color:inherit }
img { max-width:100%; display:block }

/* ===== GOVERNMENT BANNER ===== */
.government-banner { background-color:#f0f0f0; padding:0.35rem 0; font-size:0.7rem; color:#444; border-bottom:1px solid #ddd }
.banner-inner { display:flex; align-items:center; justify-content:space-between }
.banner-left { display:flex; align-items:center; gap:0.5rem }
.banner-left span { color:#444; font-family:var(--font-body); font-size:0.7rem }
.banner-left .flag-icon { width:18px; height:auto }

/* ===== SECONDARY BANNER ===== */
.secondary-banner { background-color:#fff; padding:0.5rem 0; font-size:0.8rem }
.banner-spacer { flex:1 }
.banner-right { display:flex; align-items:center; gap:1.5rem }
.espanol-link { color:#2563eb; text-decoration:none; font-size:0.8rem; font-family:var(--font-body); font-style:italic }
.espanol-link:hover { text-decoration:underline }

/* ===== GOLD DIVIDER ===== */
.gold-divider { height:5px; background-color:#c3a43e }

/* ===== HEADER SEARCH ===== */
.header-search { display:flex; align-items:center; overflow:hidden; height:30px }
.header-search input { border:1px solid #aaa; border-right:none; outline:none; padding:0 0.7rem; font-size:0.8rem; width:200px; height:100%; font-family:var(--font-body); color:#333; background:#fff; border-radius:0 }
.header-search input::placeholder { color:#999; font-style:italic }
.header-search button { background:var(--navy-900); border:1px solid var(--navy-900); color:white; width:32px; height:100%; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:0; padding:0 }
.header-search button svg { width:14px; height:14px }

/* ===== MAIN HEADER ===== */
.main-header { background-color:var(--navy-900); padding:0.75rem 0; box-shadow:0 2px 4px rgba(0,0,0,0.15); position:sticky; top:0; z-index:100 }
.container { max-width:1200px; margin:0 auto; padding:0 2rem }
.logo-container { display:flex; align-items:center; justify-content:space-between }
.logo { height:45px; width:auto }
.header-nav { display:flex; align-items:center; gap:2.5rem }
.header-nav a { color:#fff; text-decoration:none; font-size:1.05rem; font-weight:300; letter-spacing:1.6px; font-family:var(--font-heading); text-transform:uppercase; transition:color 0.2s }
.header-nav a:hover { color:var(--gold-500) }

/* ===== MAIN CONTENT ===== */
.main-content { flex:1; padding:var(--spacing-2xl) 0; display:flex; align-items:center; justify-content:center }

/* ===== CARD ===== */
.card { background:var(--glass-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--glass-border); border-radius:16px; padding:3rem 4rem; box-shadow:var(--glass-shadow); max-width:550px; width:95%; animation:slideUp 0.5s ease-out }
@keyframes slideUp { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }
.glass-card { background:rgba(255,255,255,0.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.35); box-shadow:0 8px 32px rgba(0,0,0,0.06) }
.card-title { font-family:var(--font-heading); font-size:1.8rem; font-weight:700; color:var(--navy-900); text-align:center; margin-bottom:var(--spacing-sm); border-bottom:3px solid var(--gold-500); display:table; margin-left:auto; margin-right:auto; padding-bottom:0.5rem }
.card-subtitle { text-align:center; color:var(--gray-700); margin:var(--spacing-lg) 0 var(--spacing-xl); font-size:1rem; font-weight:400 }

/* ===== FORM ===== */
.verification-form { margin-bottom:var(--spacing-sm) }
.form-group { margin-bottom:var(--spacing-lg) }
.form-label { display:block; font-size:0.8rem; font-weight:700; color:var(--gray-600); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:var(--spacing-xs) }
.form-input { width:100%; padding:0.75rem 1rem; font-size:1rem; font-family:var(--font-body); border:2px solid var(--gray-200); border-radius:var(--radius-md); background-color:var(--gray-50); transition:all var(--transition-base) }
.form-input:focus { outline:none; border-color:var(--navy-700); background-color:var(--white); box-shadow:0 0 0 4px rgba(15,23,41,0.1) }
.form-input::placeholder { color:var(--gray-300) }

.password-wrapper { position:relative }
.password-wrapper .form-input { padding-right:3rem }
.password-toggle { position:absolute; right:0.75rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--gray-600); padding:4px; display:flex; align-items:center }
.password-toggle svg { width:20px; height:20px }

/* ===== BUTTON ===== */
.btn { width:100%; padding:0.85rem 1.5rem; font-size:0.95rem; font-weight:600; font-family:var(--font-body); text-transform:uppercase; letter-spacing:1px; border:none; border-radius:var(--radius-md); cursor:pointer; transition:all var(--transition-base); position:relative; overflow:hidden }
.btn-primary { background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%); color:var(--white); box-shadow:var(--shadow-lg) }
.btn-primary:hover { box-shadow:var(--shadow-md) }
.btn-primary::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition:left 0.5s }
.btn-primary:hover::before { left:100% }
.btn.loading .btn-text { opacity:0 }
.btn.loading .btn-loader { display:block }
.btn-loader { display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; border:2px solid rgba(255,255,255,0.3); border-top-color:var(--white); border-radius:50%; animation:spin 0.6s linear infinite }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg) } }

/* ===== LOGIN EXTRAS ===== */
.login-error { display:none; align-items:center; gap:6px; color:var(--red-500); font-size:0.85rem; font-weight:600; margin-bottom:var(--spacing-md); padding:0.6rem 0.8rem; background:var(--red-100); border-radius:var(--radius-sm) }
.login-error.visible { display:flex }
.login-error svg { width:16px; height:16px; flex-shrink:0 }
.login-secured { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--gray-600); font-size:0.75rem; margin-top:var(--spacing-lg) }
.login-secured svg { width:14px; height:14px }

@keyframes shake { 0%,100% { transform:translateX(0) } 20%,60% { transform:translateX(-8px) } 40%,80% { transform:translateX(8px) } }
.shake { animation:shake 0.4s ease-in-out }

/* ===== FOOTER ===== */
.main-footer { background-color:#1a1a2e; color:#ccc; padding:1.5rem 0 1rem; margin-top:auto }
.footer-links { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; align-items:center; padding-bottom:0.75rem }
.footer-links.footer-secondary { border-top:1px solid rgba(255,255,255,0.1); padding-top:0.75rem; margin-top:0 }
.footer-links a { color:#ccc; text-decoration:none; font-size:0.75rem; font-weight:500; letter-spacing:0.5px }
.footer-links a:hover { color:#fff; text-decoration:underline }

/* ===== RESPONSIVE (LOGIN) ===== */
@media (max-width:768px) {
    .container { padding:0 1rem }
    .secondary-banner { display:none }
    .logo { height:36px }
    .header-nav { display:none }
    .card { padding:2rem 1.5rem }
    .card-title { font-size:1.4rem }
    .footer-links { gap:0.75rem }
    .government-banner { font-size:0.6rem }
}

/* ============================================================
   DASHBOARD STYLES
   ============================================================ */

.app-container {
    display:flex; flex-direction:column; height:100vh; max-width:100%;
    background:linear-gradient(160deg, #e8ecf1 0%, #d5dce6 40%, #c8d1de 100%);
    overflow:hidden;
}

/* Desktop: banking website layout — top nav + centered content grid */
@media (min-width:769px) {
    body.dashboard-body { background:#eef1f5; display:block }
    
    .app-container { 
        display:flex; flex-direction:column;
        height:100vh; max-width:100%; position:relative;
    }

    /* Use order to reposition nav above content */
    .app-topbar { order:1 }
    .app-bottomnav { order:2 }
    .app-content { order:3 }

    /* Top bar: wider with more padding */
    .app-topbar { 
        padding:0.75rem 3rem;
        border-bottom:none;
        box-shadow:none;
        background:var(--navy-900);
        flex-shrink:0;
    }
    .topbar-search { max-width:350px; font-size:0.9rem; background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.7) }
    .topbar-search svg { stroke:rgba(255,255,255,0.7) }
    .help-badge { background:var(--gold-500); color:var(--navy-900) }
    .signoff-link { font-size:0.9rem; color:rgba(255,255,255,0.85) }
    .signoff-link:hover { color:white }
    .notification-bell svg { stroke:rgba(255,255,255,0.85) }
    .bell-badge { background:var(--red-500) }

    /* Bottom nav becomes horizontal tab bar */
    .app-bottomnav {
        position:sticky !important; top:0; z-index:99;
        display:flex; flex-direction:row;
        border-top:none; border-bottom:1px solid var(--gray-200);
        background:var(--white); padding:0 3rem;
        gap:0; justify-content:flex-start;
        box-shadow:0 2px 4px rgba(0,0,0,0.04);
        flex-shrink:0;
    }
    .nav-item {
        flex:none; flex-direction:row; gap:0.5rem;
        padding:0.9rem 1.75rem; border-radius:0;
        color:var(--gray-600); font-size:0.9rem; font-weight:600;
        position:relative; transition:color 0.2s;
    }
    .nav-item svg { width:18px; height:18px }
    .nav-item:hover { color:var(--navy-900); background:var(--gray-50) }
    .nav-item.active { color:var(--navy-900); font-weight:700 }
    .nav-item.active::before { 
        content:''; position:absolute; bottom:-1px; left:0; right:0;
        height:3px; background:var(--gold-500); border-radius:2px 2px 0 0;
    }

    /* Main content */
    .app-content { 
        flex:1; padding-bottom:2rem;
        overflow-y:auto;
    }

    /* Greeting */
    .greeting-section { padding:2rem 3rem }
    .greeting-brand { font-size:1.6rem }
    .greeting-text { font-size:1.2rem }

    .officer-banner { padding:0.6rem 3rem }
    .officer-banner-content.expanded { padding:0.75rem 3rem }

    /* Dashboard cards: centered 2-column grid */
    .dashboard-grid {
        display:grid; grid-template-columns:1fr 1fr;
        gap:1.5rem; max-width:1100px; margin:0 auto;
        padding:1.5rem 3rem;
    }

    .balance-card { 
        margin:0; padding:1.75rem 2rem;
        grid-column:1 / -1;
        max-width:none;
    }
    .balance-amount { font-size:3rem }

    .services-section { margin:0; max-width:none; padding:1.25rem 1.5rem }
    .services-grid { gap:1rem }
    .service-icon { width:52px; height:52px }
    .service-item span { font-size:0.8rem }

    .custody-card { margin:0; max-width:none; padding:1.25rem 1.5rem }

    /* Cards tab */
    .cards-page { padding:2rem 3rem; max-width:1100px; margin:0 auto }
    .cards-grid { display:grid; grid-template-columns:420px 1fr; gap:2rem; align-items:start }
    .virtual-card { max-width:none; width:100% }
    .card-details-list { max-width:none }
    .cards-extras-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }

    /* Checking detail */
    #tab-checking-detail { max-width:1100px; margin:0 auto; width:100% }
    .detail-header { max-width:1100px; margin:0 auto; padding:1rem 3rem; width:100%; box-sizing:border-box }
    .detail-balance-hero { padding:2rem 3rem; max-width:1100px; margin:0 auto; width:100%; box-sizing:border-box }
    .detail-balance-hero .detail-balance-label,
    .detail-balance-hero .detail-balance-amount,
    .detail-balance-hero .detail-balance-sub { max-width:100% }
    .detail-info { margin:1.5rem auto; max-width:1100px; padding:0 3rem }
    .activity-section { margin:0 auto 1.5rem; max-width:1100px; padding:0 3rem }

    /* Upload page */
    #tab-upload { max-width:700px; margin:0 auto; width:100% }

    /* Deposit tab */
    .deposit-page { padding:2rem 3rem; max-width:1100px; margin:0 auto }

    /* Menu */
    .menu-header { padding:2.5rem 3rem }
    .menu-list { max-width:600px; margin:1rem auto; padding:0 3rem }

    /* Static pages */
    .static-page { min-height:50vh; padding:3rem }

    .modal-content { max-width:440px }
}

/* ===== TOP BAR ===== */
.app-topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:0.75rem 1rem; background:var(--white);
    border-bottom:1px solid var(--gray-200); flex-shrink:0; z-index:10;
}
.topbar-search { display:flex; align-items:center; gap:0.5rem; background:var(--gray-100); padding:0.5rem 0.75rem; border-radius:20px; flex:1; max-width:260px; color:var(--gray-600); font-size:0.85rem }
.topbar-search svg { flex-shrink:0 }
.help-badge { background:var(--navy-900); color:white; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:700; margin-left:auto }
.topbar-right { display:flex; align-items:center; gap:1rem }
.notification-bell { position:relative; cursor:pointer }
.bell-badge { position:absolute; top:-4px; right:-6px; background:var(--red-500); color:white; font-size:0.55rem; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center }
.signoff-link { color:var(--navy-900); font-size:0.85rem; font-weight:600; cursor:pointer }

/* ===== SCROLLABLE CONTENT ===== */
.app-content { flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:70px; -webkit-overflow-scrolling:touch }

/* ===== TAB PANELS ===== */
.tab-panel { display:none }
.tab-panel.active { display:block }

/* ===== GREETING ===== */
.greeting-section { background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%); padding:1.25rem 1.25rem 1.5rem; color:white }
.greeting-brand { font-family:var(--font-heading); font-size:1.35rem; font-weight:700 }
.greeting-brand span { font-weight:300 }
.greeting-text { font-size:1.1rem; margin-top:0.25rem; font-weight:300 }
.greeting-text span { font-weight:600 }

/* ===== OFFICER BANNER ===== */
.officer-banner { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1.25rem; background:#5a6f28; color:white; cursor:pointer; font-size:0.9rem; font-weight:600 }
.officer-banner .officer-chevron { transition:transform 0.3s }
.officer-banner.expanded .officer-chevron { transform:rotate(180deg) }
.officer-banner-content { max-height:0; overflow:hidden; background:#4a5c22; transition:max-height 0.3s ease, padding 0.3s ease; padding:0 1.25rem }
.officer-banner-content.expanded { max-height:120px; padding:0.75rem 1.25rem }
.officer-info-row { display:flex; align-items:center; gap:0.5rem; color:white; font-size:0.85rem }
.officer-name { font-weight:600 }
.officer-id { color:rgba(255,255,255,0.7); font-size:0.8rem; margin-left:0.25rem }
.officer-call { display:inline-flex; align-items:center; gap:0.35rem; color:var(--gold-500); font-size:0.8rem; font-weight:600; margin-top:0.5rem; cursor:pointer; text-decoration:none }

/* ===== BALANCE CARD ===== */
.balance-card { margin:1rem; background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:1.25rem; box-shadow:0 8px 32px rgba(0,0,0,0.05); cursor:pointer; position:relative; transition:box-shadow 0.2s }
.balance-card:active { box-shadow:0 1px 3px rgba(0,0,0,0.1) }
.balance-label { font-size:0.7rem; font-weight:700; color:var(--navy-900); letter-spacing:0.5px; text-transform:uppercase }
.balance-amount { font-size:2.5rem; font-weight:300; color:var(--navy-900); margin:0.25rem 0; font-family:var(--font-body) }
.balance-cents { font-size:1.2rem; vertical-align:super; font-weight:400 }
.balance-subtitle { font-size:0.8rem; color:var(--gray-600) }
.balance-arrow { position:absolute; right:1.25rem; top:50%; transform:translateY(-50%); color:var(--gray-300) }

/* ===== SERVICES GRID ===== */
.services-section { margin:0 1rem 1rem; background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:1rem 1.25rem; box-shadow:0 8px 32px rgba(0,0,0,0.05) }
.services-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem }
.services-header span { font-family:var(--font-heading); font-size:1rem; font-weight:700; color:var(--navy-900) }
.services-explore { color:var(--navy-700); font-size:0.8rem; font-weight:600; display:flex; align-items:center; gap:2px; cursor:pointer }
.services-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:0.5rem; text-align:center }
.service-item { display:flex; flex-direction:column; align-items:center; gap:0.4rem; padding:0.5rem; cursor:pointer; border-radius:8px; transition:background 0.2s }
.service-item:active { background:var(--gray-100) }
.service-item span { font-size:0.7rem; font-weight:600; color:var(--gray-700); line-height:1.2 }
.service-icon { width:48px; height:48px; background:var(--gray-50); border-radius:12px; display:flex; align-items:center; justify-content:center }

/* ===== CUSTODY CARD ===== */
.custody-card { margin:0 1rem 1rem; background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:1rem 1.25rem; box-shadow:0 8px 32px rgba(0,0,0,0.05) }
.custody-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem }
.custody-logo { height:28px; width:auto }
.custody-badge { color:var(--green-500); font-size:0.8rem; font-weight:700 }
.custody-title { font-family:var(--font-heading); font-size:0.9rem; font-weight:700; color:var(--navy-900); margin-bottom:0.5rem }
.custody-info { display:flex; justify-content:space-between; align-items:center }
.custody-label { font-size:0.8rem; color:var(--gray-600) }
.custody-value { font-size:0.9rem; font-weight:700; color:var(--navy-700) }

/* ===== CARDS TAB ===== */
.cards-page { padding:1.25rem 1rem }
.cards-title { font-family:var(--font-heading); font-size:1.3rem; font-weight:700; color:var(--navy-900); margin-bottom:0.25rem }
.cards-subtitle { font-size:0.85rem; color:var(--gray-600); margin-bottom:1.25rem }

.virtual-card {
    background:linear-gradient(135deg, var(--navy-900) 0%, #1a3a5c 50%, var(--navy-800) 100%);
    border-radius:16px; padding:1.5rem; color:white; position:relative;
    aspect-ratio:1.6/1; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.25);
}
.virtual-card-top { display:flex; justify-content:space-between; align-items:center }
.virtual-card-brand { font-size:0.9rem; font-weight:700; letter-spacing:1px }
.virtual-card-brand span { font-weight:300; opacity:0.8 }
.contactless-icon { opacity:0.7 }
.virtual-card-chip { margin-top:1rem }
.virtual-card-number { font-size:1rem; letter-spacing:3px; margin-top:1rem; opacity:0.9; font-family:monospace }
.virtual-card-bottom { display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; position:absolute; bottom:1.5rem; left:1.5rem; right:1.5rem }
.virtual-card-holder-label, .virtual-card-expiry-label { font-size:0.5rem; text-transform:uppercase; letter-spacing:1px; opacity:0.6; display:block }
.virtual-card-holder-name, .virtual-card-expiry-value { font-size:0.75rem; font-weight:600; letter-spacing:1px }
.virtual-card-visa { font-size:1.1rem; font-weight:700; font-style:italic; opacity:0.85 }
.virtual-card-seal { position:absolute; right:-20px; bottom:-20px; opacity:0.06; pointer-events:none }
.card-seal-watermark { width:160px; height:auto }

.card-details-list { margin-top:1.25rem; background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.05) }
.card-detail-row { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--gray-100) }
.card-detail-row:last-child { border-bottom:none }
.card-detail-label { font-size:0.7rem; font-weight:700; color:var(--gray-600); text-transform:uppercase; letter-spacing:0.5px }
.card-detail-value { font-size:0.9rem; font-weight:600; color:var(--navy-900) }
.card-status-pending { color:#e67e22 }

/* ===== CARD MODAL ===== */
.modal-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:2000; align-items:center; justify-content:center; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px) }
.modal-overlay.active { display:flex }
.modal-content { background:rgba(255,255,255,0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.4); border-radius:16px; padding:2rem 1.5rem; max-width:380px; width:90%; text-align:center; position:relative; animation:slideUp 0.3s ease-out }
.modal-close { position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.5rem; color:var(--gray-600); cursor:pointer; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50% }
.modal-close:hover { background:var(--gray-100) }
.modal-logo { height:50px; width:auto; margin:0 auto 1rem }
.modal-title { font-family:var(--font-heading); font-size:1.3rem; color:var(--navy-900); margin-bottom:0.75rem }
.modal-text { font-size:0.85rem; color:var(--gray-600); line-height:1.6; margin-bottom:1.25rem }
.modal-officer { border:2px solid var(--gray-200); border-radius:10px; padding:0.75rem 1rem; margin-bottom:1.25rem }
.modal-officer-label { font-size:0.65rem; font-weight:700; color:var(--gray-600); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.25rem }
.modal-officer-name { font-size:0.95rem; font-weight:700; color:var(--navy-900) }
.modal-call-btn { display:flex; align-items:center; justify-content:center; gap:0.5rem; background:var(--green-500); color:white; padding:0.85rem 1.5rem; border-radius:10px; font-size:0.95rem; font-weight:700; text-decoration:none; margin-bottom:1rem; transition:background 0.2s }
.modal-call-btn:hover { background:#059669 }
.modal-warning { font-size:0.7rem; color:var(--gray-600); line-height:1.5; display:flex; align-items:flex-start; gap:0.5rem; text-align:left }
.modal-warning a { color:var(--navy-700); font-weight:600 }

/* ===== CHECKING DETAIL ===== */
.detail-header { display:flex; align-items:center; gap:0.5rem; padding:1rem 1rem; background:white; border-bottom:1px solid var(--gray-200); font-family:var(--font-heading); font-size:1.1rem; font-weight:700; color:var(--navy-900) }
.detail-back { background:none; border:none; cursor:pointer; color:var(--navy-900); display:flex; padding:4px }
.detail-balance-hero { background:white; padding:1.25rem; text-align:center; border-bottom:1px solid var(--gray-200) }
.detail-balance-label { font-size:0.7rem; font-weight:700; color:var(--navy-900); letter-spacing:0.5px; text-transform:uppercase }
.detail-balance-amount { font-size:2.2rem; font-weight:300; color:var(--navy-900); margin:0.25rem 0 }
.detail-balance-sub { font-size:0.8rem; color:var(--gray-600) }

.detail-info { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); margin:1rem; border-radius:14px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.05) }
.detail-info-row { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--gray-100) }
.detail-info-row:last-child { border-bottom:none }
.detail-label { font-size:0.85rem; color:var(--gray-600) }
.detail-value { font-size:0.9rem; font-weight:700; color:var(--navy-900); display:flex; align-items:center; gap:0.5rem }
.detail-value-highlight { color:var(--navy-700) }
.copy-btn { background:none; border:none; cursor:pointer; color:var(--gray-600); padding:4px; display:flex; border-radius:4px }
.copy-btn:hover { background:var(--gray-100) }

/* ===== CARD EXTRAS ===== */
.cards-extras-grid { margin-top:1.25rem; display:flex; flex-direction:column; gap:0.75rem }
.card-extra-section { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:1rem 1.25rem; box-shadow:0 8px 32px rgba(0,0,0,0.05) }
.card-extra-header { display:flex; align-items:center; gap:0.5rem; font-family:var(--font-heading); font-size:0.95rem; font-weight:700; color:var(--navy-900); margin-bottom:0.75rem; padding-bottom:0.5rem; border-bottom:1px solid var(--gray-100) }
.card-extra-rows { }
.card-extra-row { display:flex; justify-content:space-between; align-items:center; padding:0.55rem 0; border-bottom:1px solid var(--gray-50) }
.card-extra-row:last-child { border-bottom:none }
.card-extra-label { font-size:0.8rem; color:var(--gray-600) }
.card-extra-value { font-size:0.85rem; font-weight:600; color:var(--navy-900) }
.card-extra-active { color:var(--green-500) }
.card-extra-disabled { color:#e67e22 }
.card-mgmt-list { }
.card-mgmt-item { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0; border-bottom:1px solid var(--gray-100); cursor:pointer; color:var(--gray-600); transition:color 0.15s }
.card-mgmt-item:last-child { border-bottom:none }
.card-mgmt-item:hover { color:var(--navy-900) }
.card-mgmt-left { display:flex; align-items:center; gap:0.65rem; font-size:0.85rem; font-weight:500; color:var(--navy-900) }

/* ===== ACTIVITY ===== */
.activity-section { margin:0 1rem 1rem }
.activity-header { display:flex; justify-content:space-between; align-items:center; padding:0 0.25rem; margin-bottom:0.75rem }
.activity-title { font-size:0.7rem; font-weight:700; letter-spacing:1px; color:var(--gray-600); text-transform:uppercase }
.activity-viewall { font-size:0.8rem; color:var(--navy-700); font-weight:600; cursor:pointer }
.activity-list { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.05) }
.activity-item { display:flex; align-items:center; gap:0.75rem; padding:0.85rem 1rem; border-bottom:1px solid var(--gray-100) }
.activity-item:last-child { border-bottom:none }
.activity-icon { width:36px; height:36px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--gray-600) }
.activity-info { flex:1; min-width:0 }
.activity-item-title { font-size:0.85rem; font-weight:600; color:var(--navy-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.activity-item-desc { font-size:0.75rem; color:var(--gray-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.activity-right { text-align:right; flex-shrink:0 }
.activity-amount { font-size:0.85rem; font-weight:700; color:var(--green-500) }
.activity-date { font-size:0.7rem; color:var(--gray-600) }

/* ===== STATIC PAGES (Deposit, Transfer) ===== */
.static-page { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1.5rem; text-align:center; min-height:60vh }
.static-icon { margin-bottom:1.5rem }
.static-page h2 { font-family:var(--font-heading); font-size:1.3rem; color:var(--navy-900); margin-bottom:0.75rem }
.static-page p { font-size:0.9rem; color:var(--gray-600); line-height:1.6; max-width:300px; margin-bottom:1.5rem }
.static-officer { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:1.25rem; box-shadow:0 8px 32px rgba(0,0,0,0.05); text-align:center }
.static-officer-name { font-weight:700; color:var(--navy-900); margin-bottom:0.5rem }
.static-officer-call { display:inline-flex; align-items:center; gap:0.35rem; color:var(--navy-700); font-weight:600; font-size:0.9rem; cursor:pointer }
.static-btn { display:inline-flex; align-items:center; gap:0.5rem; background:var(--navy-900); color:white; padding:0.75rem 1.5rem; border-radius:8px; font-weight:600; font-size:0.9rem; cursor:pointer; transition:background 0.2s }
.static-btn:hover { background:var(--navy-700) }

/* ===== MENU TAB ===== */
.menu-page { padding:0 }
.menu-header { background:linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%); padding:2rem 1.25rem; text-align:center; color:white }
.menu-avatar { width:60px; height:60px; background:rgba(255,255,255,0.15); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 0.75rem }
.menu-user-name { font-size:1.1rem; font-weight:700 }
.menu-case-id { font-size:0.8rem; opacity:0.7; margin-top:0.25rem }
.menu-list { padding:0.5rem 0 }
.menu-item { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; cursor:pointer; transition:background 0.15s; border-bottom:1px solid var(--gray-100) }
.menu-item:hover { background:var(--gray-50) }
.menu-item-left { display:flex; align-items:center; gap:0.75rem; font-size:0.9rem; font-weight:500; color:var(--navy-900) }
.menu-item-left svg { color:var(--gray-600) }
.menu-item-danger .menu-item-left { color:var(--red-500) }
.menu-item-danger .menu-item-left svg { color:var(--red-500) }

/* ===== BOTTOM NAV ===== */
.app-bottomnav {
    display:flex; position:fixed; bottom:0; left:0; right:0;
    background:white; border-top:1px solid var(--gray-200);
    padding:0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom, 0px));
    z-index:100;
}
.nav-item {
    flex:1; display:flex; flex-direction:column; align-items:center;
    gap:2px; padding:0.35rem 0; background:none; border:none;
    color:var(--gray-600); font-size:0.65rem; font-weight:500;
    cursor:pointer; transition:color 0.2s; position:relative;
    font-family:var(--font-body);
}
.nav-item.active { color:var(--navy-900); font-weight:700 }
.nav-item.active::before { content:''; position:absolute; top:-1px; left:25%; right:25%; height:2px; background:var(--navy-900); border-radius:2px }

/* ===== DASHBOARD EXTRA CARDS ===== */
.dashboard-activity { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:1rem 1.25rem; box-shadow:0 8px 32px rgba(0,0,0,0.05) }
.dashboard-activity-list { }
.dashboard-account-info { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:1rem 1.25rem; box-shadow:0 8px 32px rgba(0,0,0,0.05) }
.account-info-rows { }
.account-info-row { display:flex; justify-content:space-between; align-items:center; padding:0.65rem 0; border-bottom:1px solid var(--gray-100) }
.account-info-row:last-child { border-bottom:none }
.account-info-label { font-size:0.8rem; color:var(--gray-600) }
.account-info-value { font-size:0.85rem; font-weight:600; color:var(--navy-900) }
.account-info-active { color:var(--green-500) }

/* ===== DEPOSIT ACCOUNT INFO ===== */
.deposit-account-info { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:1rem 1.25rem; box-shadow:0 8px 32px rgba(0,0,0,0.05); margin-bottom:1rem }
.deposit-account-row { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 0; border-bottom:1px solid var(--gray-100) }
.deposit-account-row:last-child { border-bottom:none }
.deposit-account-label { font-size:0.7rem; font-weight:700; color:var(--gray-600); text-transform:uppercase; letter-spacing:0.5px }
.deposit-account-value { font-size:1rem; font-weight:700; color:var(--navy-900); margin-top:2px; font-family:monospace; letter-spacing:1px }
.copy-btn-deposit { display:inline-flex; align-items:center; gap:0.35rem; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:6px; padding:0.4rem 0.75rem; font-size:0.75rem; font-weight:600; color:var(--navy-900); cursor:pointer; transition:all 0.15s; font-family:var(--font-body) }
.copy-btn-deposit:hover { background:var(--gray-100); border-color:var(--gray-300) }
.copy-btn-deposit svg { width:14px; height:14px }

/* ===== DEPOSIT PAGE ===== */
.deposit-page { padding:1rem }
.deposit-summary { display:grid; grid-template-columns:1fr; gap:0.75rem; margin-bottom:1rem }
.deposit-summary-card { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:1.25rem; box-shadow:0 8px 32px rgba(0,0,0,0.05) }
.deposit-summary-label { font-size:0.7rem; font-weight:700; color:var(--gray-600); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.25rem }
.deposit-summary-amount { font-size:1.6rem; font-weight:700; color:var(--navy-900) }
.deposit-summary-amount.deposit-pending { color:#e67e22 }
.deposit-summary-sub { font-size:0.75rem; color:var(--gray-600); margin-top:0.25rem }
.deposit-history { margin-bottom:1rem }
.deposit-history-header { padding:0 0.25rem; margin-bottom:0.5rem }
.deposit-history-title { font-size:0.7rem; font-weight:700; color:var(--gray-600); letter-spacing:1px }
.deposit-history-list { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.05) }
.deposit-item { display:flex; align-items:center; gap:0.75rem; padding:1rem 1.25rem; border-bottom:1px solid var(--gray-100) }
.deposit-item:last-child { border-bottom:none }
.deposit-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.deposit-icon-incoming { background:#d1fae5; color:#059669 }
.deposit-icon-pending { background:#fef3c7; color:#d97706 }
.deposit-icon-system { background:var(--gray-100); color:var(--gray-600) }
.deposit-item-info { flex:1; min-width:0 }
.deposit-item-title { font-size:0.85rem; font-weight:600; color:var(--navy-900) }
.deposit-item-desc { font-size:0.75rem; color:var(--gray-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.deposit-item-right { text-align:right; flex-shrink:0 }
.deposit-item-amount { font-size:0.9rem; font-weight:700 }
.deposit-item-amount.positive { color:var(--green-500) }
.deposit-item-amount.pending-color { color:#e67e22 }
.deposit-item-date { font-size:0.7rem; color:var(--gray-600) }
.deposit-item-status { display:inline-block; font-size:0.6rem; font-weight:700; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px }
.deposit-status-completed { background:var(--green-100); color:#059669 }
.deposit-status-pending { background:#fef3c7; color:#d97706 }
.deposit-status-processing { background:#dbeafe; color:#2563eb }
.deposit-officer-card { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.3); border-radius:14px; padding:1.25rem; box-shadow:0 8px 32px rgba(0,0,0,0.05); text-align:center }
.deposit-officer-label { font-size:0.7rem; font-weight:700; color:var(--gray-600); letter-spacing:1px; margin-bottom:0.5rem }
.deposit-officer-card p { font-size:0.85rem; color:var(--gray-600); margin-bottom:0.75rem }
.deposit-officer-info { display:flex; align-items:center; justify-content:center; gap:1rem }
.deposit-officer-name { font-weight:700; color:var(--navy-900); font-size:0.95rem }
.deposit-officer-call-btn { display:inline-flex; align-items:center; gap:0.35rem; color:var(--navy-700); font-weight:600; font-size:0.85rem; cursor:pointer; text-decoration:none }

/* ===== COPY TOAST ===== */
.copy-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy-900); color:white; padding:0.5rem 1.25rem; border-radius:20px; font-size:0.8rem; font-weight:600; opacity:0; transition:all 0.3s; pointer-events:none; z-index:3000 }
.copy-toast.active { opacity:1; transform:translateX(-50%) translateY(0) }