:root{
    --blue:#4CB7F5;
    --blue2:#1F93E6;
    --ink:#0B1220;
    --text:#0D0F10;
    --muted:#6C7782;
  
    --bg:#F7FBFF;
    --card: rgba(255,255,255,.86);
    --stroke: rgba(15, 23, 42, .10);
  
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, .10);
    --shadow-md: 0 14px 45px rgba(15, 23, 42, .14);
    --shadow-lg: 0 26px 80px rgba(15, 23, 42, .18);
  
    --radius: 22px;
    --radius-lg: 28px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%; width:100%}
  
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:
      radial-gradient(circle at 20% 10%, rgba(76,183,245,.22), transparent 45%),
      radial-gradient(circle at 90% 20%, rgba(31,147,230,.18), transparent 45%),
      radial-gradient(circle at 30% 95%, rgba(76,183,245,.14), transparent 55%),
      #F7FBFF;
    color:var(--text);
  
    /* ✅ FULL WIDTH + allow scroll */
    overflow-x:hidden;
    overflow-y:auto;
  }
  
  .app{
    width:100vw;
    height:100vh;
    position:relative;
  
    /* ✅ allow screens to manage their own scroll */
    overflow:visible;
  }
  
  /* screens */
  .screen{position:absolute; inset:0; display:none;}
  .screen.active{display:block}
  
  /* ✅ FLEX screen structure so lists can scroll properly */
  .screenFlex{
    height:100%;
    display:flex;
    flex-direction:column;
  }
  
  /* ✅ this is the scrollable content area */
  .screenBody{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* layout (FULL WIDTH — no 430px lock) */
  .contentShell{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0 16px;
  }
  .contentPad{padding-top:14px; padding-bottom:16px}
  
  /* typography */
  .h1{margin:0; font-size:28px; font-weight:950; letter-spacing:-.4px}
  .h2{margin:14px 0 10px; font-size:16px; font-weight:950; letter-spacing:-.2px}
  .sub{margin:6px 0 14px; color:var(--muted); font-weight:650}
  .muted{color:var(--muted); font-size:12.5px; font-weight:650}
  .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
  
  /* cards */
  .card{
    background: var(--card);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
  }
  .glass{
    background:
      radial-gradient(circle at 20% 0%, rgba(76,183,245,.16), transparent 60%),
      rgba(255,255,255,.82);
  }
  .panel{
    padding:16px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: rgba(255,255,255,.86);
    border:1px solid var(--stroke)
  }
  
  /* buttons */
  .btn{
    border:none;
    padding:13px 14px;
    border-radius:999px;
    font-weight:900;
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  }
  .btn:active{transform:scale(.99)}
  .btnWide{width:100%}
  .btnPrimary{
    color:white;
    background: linear-gradient(90deg, var(--blue2), var(--blue));
    box-shadow: 0 12px 26px rgba(31,147,230,.22);
  }
  .btnGhost{
    background: rgba(255,255,255,.75);
    border:1px solid rgba(15,23,42,.10);
    color: var(--ink);
  }
  .linkBtn{
    border:none;
    background:transparent;
    color:#1b3446;
    font-weight:850;
    cursor:pointer;
  }
  .iconBtn{
    border:none;
    background: rgba(255,255,255,.75);
    border:1px solid rgba(15,23,42,.10);
    width:40px; height:40px;
    border-radius:14px;
    cursor:pointer;
  }
  .iconChip{
    border:none;
    background: rgba(255,255,255,.25);
    border:1px solid rgba(255,255,255,.45);
    color:white;
    padding:9px 12px;
    border-radius:999px;
    font-weight:900;
    cursor:pointer;
    backdrop-filter: blur(10px);
  }
  .chipBtn{
    border:none;
    background: rgba(31,147,230,.10);
    border:1px solid rgba(31,147,230,.15);
    color:#12445f;
    padding:10px 12px;
    border-radius:14px;
    font-weight:900;
    cursor:pointer;
  }
  .chip{
    padding:6px 10px;
    border-radius:999px;
    background: rgba(31,147,230,.12);
    border:1px solid rgba(31,147,230,.16);
    color:#12445f;
    font-weight:900;
    font-size:12px;
  }
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:999px;
    font-weight:900;
    font-size:12px;
  }
  .pill.soft{
    background: rgba(31,147,230,.10);
    border:1px solid rgba(31,147,230,.14);
    color:#12445f;
  }
  
  /* top band login */
  .topBand{position:relative; padding:18px 0 0;}
  .waves{
    position:absolute; left:0; right:0; top:0; height:130px;
    background:
      radial-gradient(circle at 20% 55%, rgba(76,183,245,.28) 0 55%, transparent 56%),
      radial-gradient(circle at 60% 50%, rgba(31,147,230,.20) 0 58%, transparent 59%),
      radial-gradient(circle at 92% 50%, rgba(76,183,245,.16) 0 55%, transparent 56%);
    pointer-events:none;
  }
  .brandInline{display:flex; flex-direction:column; gap:4px}
  .brandStack{text-align:center}
  .brandMark{
    font-weight:1000;
    letter-spacing:.5px;
    font-size:64px;
    line-height:1;
    text-transform:lowercase;
    color:white;
  }
  .brandSub{font-weight:850; margin-top:8px; font-size:22px; color:white; opacity:.95}
  .brandMark.small{font-size:40px; color:#0c1c2c}
  .brandSub.small{font-size:14px; color:#0c1c2c; margin:0; opacity:.8}
  
  /* splash */
  .splash{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:14px;
    background: linear-gradient(135deg, var(--blue2), var(--blue));
  }
  .splashHint{color:white; opacity:.95; font-weight:850}
  
  /* login fields */
  .field{margin:12px 0}
  .field label{display:block; font-size:12px; font-weight:850; color:var(--muted); margin:0 0 6px}
  .input{
    width:100%;
    background: rgba(255,255,255,.95);
    border:1px solid rgba(15, 23, 42, .12);
    border-radius:18px;
    padding:14px 14px;
    font-size:15.5px;
    outline:none;
  }
  .input:focus{
    border-color: rgba(31,147,230,.65);
    box-shadow: 0 0 0 5px rgba(31,147,230,.12);
  }
  .inputRow{position:relative}
  .inputRow .iconBtn{
    position:absolute;
    right:8px; top:50%;
    transform: translateY(-50%);
    width:38px; height:38px;
    border-radius:14px;
  }
  
  /* remember switch */
  .rowBetween{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 14px}
  .switchWrap{display:flex; align-items:center; gap:10px; font-weight:900; color:#1b3446; font-size:12px}
  .switchWrap input{display:none}
  .switch{
    width:44px; height:26px; border-radius:999px; background:#dfe7ec; position:relative; display:inline-block;
  }
  .switch::after{
    content:""; width:20px; height:20px; border-radius:50%;
    position:absolute; top:3px; left:3px;
    background:white; box-shadow: 0 8px 18px rgba(0,0,0,.15);
    transition:.2s ease;
  }
  .switchWrap input:checked + .switch{background: rgba(31,147,230,.35)}
  .switchWrap input:checked + .switch::after{left:21px}
  
  /* promo */
  .promo{
    position:relative;
    margin:14px 0 10px;
    border-radius:22px;
    padding:14px;
    overflow:hidden;
    background: linear-gradient(90deg, rgba(31,147,230,.95), rgba(76,183,245,.70));
    color:white;
    box-shadow: var(--shadow-md);
  }
  .promoTop{display:flex; gap:8px; align-items:baseline; opacity:.95}
  .miniMark{font-weight:1000; text-transform:lowercase}
  .miniSub{font-weight:850; font-size:12px; opacity:.9}
  .promoTitle{margin-top:10px; font-weight:1000; letter-spacing:.4px}
  .promoMini{margin-top:6px; font-weight:850; opacity:.9}
  .promoGlow{
    position:absolute; inset:-40px -60px auto auto;
    width:220px; height:220px; border-radius:50%;
    background: rgba(255,255,255,.25);
    filter: blur(2px);
  }
  
  /* dots */
  .dots{display:flex; justify-content:center; gap:8px; margin:10px 0 6px}
  .dot{width:8px; height:8px; border-radius:50%; background:#d7e3ea}
  .dot.active{background:#6aaed8}
  
  /* bottomBar */
  .bottomBar{
    display:flex; gap:10px;
    background: rgba(15,17,18,.92);
    border:1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding:12px 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.22);
  }
  .bottomBtn{
    flex:1;
    border:none;
    background:transparent;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-weight:850;
    cursor:pointer;
    opacity:.95;
  }
  .bIco{font-size:18px}
  
  /* loading */
  .loading{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
  }
  .loadingCard{
    width:min(520px, 100%);
    background: rgba(255,255,255,.86);
    border:1px solid rgba(15,23,42,.10);
    border-radius: 28px;
    box-shadow: var(--shadow-lg);
    padding:18px;
    text-align:center;
  }
  .loadingLogo{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
  .loaderRing{
    width:54px; height:54px; border-radius:50%;
    margin:10px auto 12px;
    border:5px solid rgba(31,147,230,.18);
    border-top-color: rgba(31,147,230,.95);
    animation: spin 1s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .loadingTitle{font-weight:950}
  .loadingSub{margin-top:4px; color:var(--muted); font-weight:700}
  .loadingBar{
    margin-top:14px;
    height:10px;
    background: rgba(15,23,42,.08);
    border-radius:999px;
    overflow:hidden;
  }
  .loadingFill{
    height:100%;
    width:0%;
    background: linear-gradient(90deg, var(--blue2), var(--blue));
  }
  
  /* top nav */
  .topNav{
    position:sticky;
    top:0;
    z-index:5;
    background: rgba(255,255,255,.75);
    border-bottom:1px solid rgba(15,23,42,.08);
    backdrop-filter: blur(10px);
  }
  .topNavInner{
    height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .topTitle{font-weight:950; letter-spacing:-.2px}
  
  /* hero */
  .hero{
    position:relative;
    background: linear-gradient(135deg, rgba(31,147,230,.92), rgba(76,183,245,.78));
    padding:14px 0 34px;
    overflow:hidden;
  }
  .heroInner{color:white}
  .helloLine{font-weight:850; opacity:.9}
  .helloName{font-size:22px; font-weight:1000; letter-spacing:-.2px; margin-top:2px}
  .helloMeta{margin-top:4px; opacity:.85; font-weight:750; font-size:12.5px}
  .heroQuick{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
  .heroPill{
    background: rgba(255,255,255,.20);
    border:1px solid rgba(255,255,255,.35);
    padding:8px 10px;
    border-radius:999px;
    font-weight:900;
    backdrop-filter: blur(10px);
  }
  .heroWave{
    position:absolute; left:-20px; right:-20px; bottom:-60px;
    height:140px;
    background:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.35), transparent 60%),
      radial-gradient(circle at 75% 30%, rgba(255,255,255,.25), transparent 60%);
    transform: rotate(-2deg);
  }
  
  /* sections */
  .sectionRow{display:flex; justify-content:space-between; align-items:center; margin-top:10px}
  
  /* accounts */
  .accountCard{
    margin-top:10px;
    padding:14px;
    border-radius: 26px;
    background: rgba(255,255,255,.82);
    border:1px solid rgba(15,23,42,.08);
    box-shadow: var(--shadow-sm);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .accLeft{display:flex; align-items:center; gap:10px; min-width:0}
  .accIcon{
    width:52px; height:52px;
    border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(31,147,230,.10);
    border:1px solid rgba(31,147,230,.14);
    box-shadow: var(--shadow-sm);
  }
  .accInfo{min-width:0}
  .accName{font-weight:1000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .accNo{margin-top:2px; color:var(--muted); font-weight:750; font-size:12px}
  .accRight{text-align:right}
  .accBal{font-weight:1000}
  
  /* quick actions */
  .quickGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .qBtn{
    border:none;
    background: rgba(255,255,255,.82);
    border:1px solid rgba(15,23,42,.08);
    border-radius: 24px;
    padding:14px;
    box-shadow: var(--shadow-sm);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    cursor:pointer;
  }
  .qBtn span{font-size:22px}
  .qBtn b{font-weight:1000}
  .qBtn small{color:var(--muted); font-weight:750}
  
  /* list items */
  .list{display:flex; flex-direction:column; gap:10px}
  .txItem{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border-radius: 24px;
    background: rgba(255,255,255,.82);
    border:1px solid rgba(15,23,42,.08);
    box-shadow: var(--shadow-sm);
    cursor:pointer;
  }
  .txAvatar{
    width:46px; height:46px;
    border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(31,147,230,.10);
    border:1px solid rgba(31,147,230,.14);
    font-size:18px;
    flex:0 0 auto;
  }
  .txMain{flex:1; min-width:0}
  .txName{font-weight:1000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .txMeta{margin-top:3px; display:flex; gap:10px; flex-wrap:wrap}
  .badge{
    font-size:12px;
    font-weight:900;
    padding:6px 10px;
    border-radius:999px;
    background: rgba(15,23,42,.06);
    color:#2b3b49;
  }
  .txRight{text-align:right}
  .txAmt{font-weight:1000}
  .txAmt.neg{color:#D43C3C}
  .txAmt.pos{color:#15A564}
  .txDate{margin-top:3px; color:var(--muted); font-weight:750; font-size:12px}
  
  /* activities header tools */
  .searchRow{display:flex; gap:10px; align-items:center}
  .searchBox{
    flex:1;
    display:flex;
    gap:10px;
    align-items:center;
    background: rgba(255,255,255,.82);
    border:1px solid rgba(15,23,42,.08);
    border-radius:999px;
    padding:12px 14px;
    box-shadow: var(--shadow-sm);
  }
  .searchBox input{
    border:none; outline:none; background:transparent; width:100%;
    font-weight:750;
  }
  .segmented{
    display:flex;
    gap:8px;
    margin:12px 0 10px;
    overflow:auto;
    padding-bottom:2px;
  }
  .seg{
    border:none;
    background: rgba(255,255,255,.78);
    border:1px solid rgba(15,23,42,.08);
    padding:10px 12px;
    border-radius:999px;
    font-weight:950;
    cursor:pointer;
    white-space:nowrap;
  }
  .seg.active{
    background: linear-gradient(90deg, var(--blue2), var(--blue));
    color:white;
    border-color: transparent;
  }
  .miniFilters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
  
  /* receipt */
  .receiptHeader{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    margin-top:8px;
  }
  .rAmount{font-size:26px; font-weight:1000; letter-spacing:-.4px}
  .rStatus{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px;
    border-radius:999px;
    background: rgba(255,255,255,.75);
    border:1px solid rgba(15,23,42,.10);
    font-weight:950;
  }
  .dotOk{width:10px; height:10px; border-radius:50%; background:#23B26B}
  
  .receiptCard{
    margin-top:12px;
    padding:14px;
    border-radius: 28px;
    background:
      radial-gradient(circle at 20% 0%, rgba(76,183,245,.16), transparent 60%),
      rgba(255,255,255,.82);
  }
  .k{color:var(--muted); font-weight:850; font-size:12px}
  .v{font-weight:950; color:var(--ink); margin-top:3px}
  .kv{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .hr{height:1px; background: rgba(15,23,42,.10); margin:12px 0}
  .kv2 .row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px dashed rgba(15,23,42,.12)}
  .kv2 .row:first-child{border-top:none}
  .breakdown{margin-top:6px}
  .bRow{display:flex; justify-content:space-between; padding:8px 0; font-weight:900}
  .bRow.total{border-top:1px solid rgba(15,23,42,.10); margin-top:6px; padding-top:10px}
  .note{margin-top:12px; color:var(--muted); font-weight:750; font-size:12.5px}
  
  .btnRow{display:flex; gap:10px; margin-top:12px}
  .btnRow .btn{flex:1}
  
  /* timeline */
  .timeline{margin-top:14px; display:flex; flex-direction:column; gap:10px}
  .tItem{display:flex; gap:10px; align-items:flex-start}
  .tDot{
    width:12px; height:12px; border-radius:50%;
    background: rgba(31,147,230,.65);
    margin-top:4px;
  }
  
  /* tab bar */
  .tabBar{
    position:sticky;
    bottom:0;
    margin: 10px 16px 16px;
    background: rgba(15,17,18,.92);
    border:1px solid rgba(255,255,255,.08);
    border-radius: 22px;
    padding:12px 10px;
    display:flex;
    gap:10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.22);
    backdrop-filter: blur(10px);
  }
  .tab{
    flex:1;
    border:none;
    background:transparent;
    color:white;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    font-size:12px;
    cursor:pointer;
    opacity:.78;
    font-weight:900;
  }
  .tab.active{opacity:1; transform: translateY(-1px)}
  .tab span{font-weight:900}
  
  /* drawer */
  .drawer{
    position:absolute;
    top:0; bottom:0; left:0;
    width:82%;
    max-width:330px;
    background: rgba(255,255,255,.92);
    border-right:1px solid rgba(15,23,42,.10);
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
    transform: translateX(-105%);
    transition:.25s ease;
    z-index:30;
    backdrop-filter: blur(12px);
  }
  .drawer.open{transform: translateX(0)}
  .scrim{
    position:absolute; inset:0;
    background: rgba(0,0,0,.35);
    opacity:0;
    pointer-events:none;
    transition:.2s ease;
    z-index:20;
  }
  .scrim.show{opacity:1; pointer-events:auto}
  .drawerHeader{
    padding:16px;
    background:
      radial-gradient(circle at 20% 0%, rgba(76,183,245,.18), transparent 60%),
      rgba(31,147,230,.10);
    display:flex; gap:12px; align-items:center;
  }
  .drawerAvatar{
    width:48px; height:48px;
    border-radius:18px;
    background: rgba(255,255,255,.40);
    border:1px solid rgba(255,255,255,.55);
  }
  .drawerName{font-weight:1000}
  .drawerMeta{margin-top:4px; color: rgba(15,23,42,.65); font-weight:800; font-size:12px}
  .drawerList{padding:10px}
  .drawerItem{
    width:100%;
    border:none;
    background:transparent;
    padding:12px 10px;
    border-radius:16px;
    display:flex; align-items:center; gap:10px;
    font-weight:950;
    cursor:pointer;
  }
  .drawerItem:hover{background: rgba(15,23,42,.06)}
  .dIco{width:26px; text-align:center}
  .drawerFooter{padding:14px}
  
  /* ✅ primary card */
  .primaryCard{
    margin-top: -24px;
    padding: 16px;
    border-radius: 28px;
    background:
      radial-gradient(circle at 20% 0%, rgba(255,255,255,.40), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.75));
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 22px 70px rgba(15,23,42,.14);
    backdrop-filter: blur(12px);
  }
  .pTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 14px;
  }
  .pUser{display:flex; align-items:center; gap:12px}
  .pAvatar{
    width:46px; height:46px;
    border-radius:18px;
    background: rgba(31,147,230,.12);
    border:1px solid rgba(31,147,230,.18);
    box-shadow: 0 10px 24px rgba(31,147,230,.14);
  }
  .pName{font-weight:1000; letter-spacing:-.2px}
  .pSub{margin-top:3px; font-size:12.5px; color:rgba(15,23,42,.55); font-weight:850}
  .pGrid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
  @media (max-width:390px){
    .pGrid{grid-template-columns:1fr}
  }
  .pItem{
    padding:12px;
    border-radius: 20px;
    background: rgba(255,255,255,.72);
    border:1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 30px rgba(15,23,42,.08);
  }
  .pItem .k{font-size:12px; font-weight:900; color:rgba(15,23,42,.55)}
  .pItem .v{margin-top:5px; font-weight:1000; color:var(--ink)}
  .pItem .v.big{font-size:18px}
  .pActions{
    display:flex;
    gap:10px;
    margin-top:14px;
  }
  .pActions .btn{flex:1}
  
  /* small-screen quickGrid */
  @media (max-width: 420px){
    .quickGrid{grid-template-columns:1fr}
  }