:root{
    --bg:#060b16;
    --panel:#0c1222;
    --sheet:#1a1a1a;
    --line:rgba(255,255,255,.08);
    --text:#e9eefc;
    --muted:rgba(233,238,252,.65);
    --teal:#00c7b7;
    --blue1:#0d2a8f;
    --blue2:#0aa6a6;
    --shadow: 0 18px 60px rgba(0,0,0,.45);
    --r16:16px;
    --r22:22px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    color:var(--text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: radial-gradient(1200px 600px at 20% -10%, rgba(13,42,143,.55), transparent 60%),
                radial-gradient(900px 600px at 90% 0%, rgba(10,166,166,.38), transparent 55%),
                var(--bg);
  }
  
  /* Shared */
  .screen{padding:20px 18px 90px}
  .link{color:var(--teal); text-decoration:none; font-size:14px; float:right; margin-top:10px}
  .linkBtn{background:none;border:0;color:var(--teal);font-weight:700;cursor:pointer}
  .iconBtn{background:none;border:0;color:var(--muted);font-size:18px;cursor:pointer}
  .iconBtnGhost{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;border-radius:12px;padding:6px 10px;cursor:pointer}
  .circleBtn{width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
  .pillBtn{
    width:100%; padding:16px 18px;
    border:0; border-radius:999px;
    background:linear-gradient(90deg, #00c7b7, #00a4b8);
    color:#041018; font-weight:800; font-size:16px;
    box-shadow: 0 18px 40px rgba(0,199,183,.22);
    cursor:pointer;
  }
  .pillGhost{
    padding:10px 14px; border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.06);
    color:#fff; cursor:pointer;
  }
  
  /* Login */
  .login-screen{display:flex; align-items:center; justify-content:center; padding-bottom:20px}
  .login-wrap{width:min(460px,100%);}
  .brand{display:flex; align-items:center; gap:12px; margin-bottom:24px}
  .logoMark{
    width:56px;height:56px;border-radius:16px;
    background:rgba(255,255,255,.08);
    display:grid;place-items:center;
    font-weight:900; letter-spacing:.5px;
  }
  .brandText .bank{font-size:28px;font-weight:900}
  .brandText .tag{font-size:13px;color:var(--muted)}
  .login-title{font-size:28px;line-height:1.15;margin:10px 0 26px}
  .field label{display:block;color:var(--muted);font-size:13px;margin-bottom:10px}
  .inputWrap{
    display:flex; align-items:center; gap:10px;
    border-bottom: 2px solid rgba(0,199,183,.55);
    padding:10px 0;
  }
  .inputWrap input{
    flex:1; background:transparent; border:0; outline:none;
    color:#fff; font-size:16px; padding:8px 2px;
  }
  .legal{margin-top:18px;color:var(--muted);font-size:12.8px;line-height:1.4}
  .linkLite{color:var(--teal)}
  
  /* Dashboard */
  .topHeader{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
  .hello{font-size:18px;font-weight:800}
  .subHello{color:var(--muted);font-size:12.5px;margin-top:4px}
  .topBtns{display:flex;gap:10px}
  
  .cardHero{margin-top:18px}
  .heroCard{
    border-radius:22px;
    padding:18px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
      radial-gradient(900px 400px at 20% 0%, rgba(0,199,183,.22), transparent 55%),
      radial-gradient(900px 400px at 90% 0%, rgba(13,42,143,.30), transparent 60%);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
  }
  .heroTop{display:flex;justify-content:space-between;align-items:center}
  .chipMini{width:32px;height:22px;border-radius:6px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.12)}
  .heroBrand{font-weight:900;opacity:.9}
  .heroName{margin-top:18px;font-size:22px;font-weight:900}
  .heroAcc{margin-top:6px;color:rgba(255,255,255,.85);letter-spacing:.4px}
  .heroBottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px}
  .miniLabel{font-size:12px;color:rgba(255,255,255,.7)}
  .balWrap{display:flex;align-items:center;gap:10px}
  .bal{font-size:18px;font-weight:900;letter-spacing:.4px}
  
  .panel{
    margin-top:16px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:16px;
  }
  .panelTitle{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.85);font-weight:650}
  
  .quickGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
  .quickItem{
    text-decoration:none;color:#fff;
    display:flex;flex-direction:column;align-items:center;gap:10px;
  }
  .qiIcon{
    width:54px;height:54px;border-radius:16px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.09);
    display:grid;place-items:center;
    box-shadow: 0 10px 20px rgba(0,0,0,.2);
  }
  .qiTxt{font-size:12px;color:rgba(255,255,255,.85);text-align:center}
  
  .sectionHdr{font-weight:850;margin-bottom:12px}
  
  .loanRow,.productRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .loanCard,.productCard{
    border-radius:18px;
    padding:14px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
  }
  .loanGold{background: linear-gradient(135deg, rgba(255,193,7,.95), rgba(255,193,7,.55)); color:#101010}
  .loanSky{background: linear-gradient(135deg, rgba(125,210,255,.95), rgba(125,210,255,.50)); color:#06131f}
  .loanTitle{font-weight:950}
  .loanSub{margin-top:6px;font-size:12.5px;opacity:.9}
  .arrow{position:absolute;right:12px;top:10px;font-size:22px;font-weight:900;opacity:.7}
  
  .prodWarm{background: linear-gradient(135deg, rgba(255,120,40,.85), rgba(255,120,40,.35))}
  .prodGreen{background: linear-gradient(135deg, rgba(34,197,94,.80), rgba(34,197,94,.30))}
  .prodTitle{font-weight:950;font-size:16px}
  .prodSub{margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.9)}
  .prodBtn{
    margin-top:12px;
    border:1px solid rgba(255,255,255,.20);
    background:rgba(0,0,0,.20);
    color:#fff;
    border-radius:999px;
    padding:10px 12px;
    width:100%;
    cursor:pointer;
  }
  
  .ctaRow{
    display:flex;align-items:center;gap:12px;
    text-decoration:none;color:#fff;
  }
  .ctaIcon{
    width:48px;height:38px;border-radius:12px;
    background:rgba(255,255,255,.08);
    display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.08);
  }
  .ctaText{flex:1}
  .ctaTitle{font-weight:950}
  .ctaSub{color:var(--muted);font-size:12.5px;margin-top:4px}
  .ctaArrow{font-size:22px;opacity:.8}
  
  /* Bottom nav */
  .bottomNav{
    position:fixed;left:0;right:0;bottom:0;
    display:flex;justify-content:space-around;
    background:rgba(0,0,0,.55);
    border-top:1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    padding:10px 8px;
  }
  .bn{color:rgba(255,255,255,.65);text-decoration:none;font-size:12px;padding:10px 8px;border-radius:12px}
  .bn.active{color:var(--teal);background:rgba(0,199,183,.10)}
  
  /* Transactions */
  .trxTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .backBtn{
    width:44px;height:44px;border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.06);
    color:#fff;cursor:pointer;font-size:18px;
  }
  .miniCardStub{
    width:140px;height:80px;border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
  }
  
  .trxSheet{
    margin-top:10px;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.10);
    border-radius:26px;
    padding:14px;
  }
  .tabs{display:flex;justify-content:space-between;gap:12px;padding:6px 6px 0}
  .tab{
    flex:1;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.55);
    padding:12px 10px;
    font-weight:750;
    cursor:pointer;
    position:relative;
  }
  .tab.active{color:var(--teal)}
  .tab.active:after{
    content:"";
    position:absolute;left:18%;right:18%;bottom:0;
    height:3px;border-radius:999px;background:var(--teal);
  }
  
  .trxHdr{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:8px 8px 0}
  .trxHdr h2{margin:0;font-size:20px}
  .searchBar{padding:10px 8px 0}
  .searchBar input{
    width:100%;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    padding:12px 12px;
    color:#fff;
    outline:none;
  }
  
  .trxList{margin-top:10px}
  .trxRow{
    display:flex;justify-content:space-between;gap:14px;
    padding:14px 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
    text-decoration:none;color:#fff;
  }
  .trxLeft{display:flex;gap:12px;align-items:center;min-width:0}
  .trxIcon{
    width:40px;height:40px;border-radius:12px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    display:grid;place-items:center;
    flex:0 0 auto;
  }
  .trxTxt{min-width:0}
  .trxDate{font-size:12px;color:rgba(255,255,255,.55)}
  .trxDesc{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54vw}
  .trxAmt{font-weight:900;white-space:nowrap}
  .amtPos{color:#8ef3d8}
  .amtNeg{color:#ffb4b4}
  
  /* Bottom Sheet */
  .sheetBackdrop{
    position:fixed;inset:0;
    background:rgba(0,0,0,.55);
    opacity:0; pointer-events:none;
    transition:.18s;
  }
  .sheet{
    position:fixed;left:0;right:0;bottom:-70%;
    background:#5a5a5a22;
    backdrop-filter: blur(16px);
    border-top-left-radius:22px;border-top-right-radius:22px;
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
    padding:14px;
    transition:.22s;
  }
  .sheet.open{bottom:0}
  .sheetBackdrop.open{opacity:1;pointer-events:auto}
  .sheetHead{display:flex;align-items:center;gap:12px}
  .sheetIcon{
    width:46px;height:46px;border-radius:14px;
    background:rgba(255,255,255,.10);
    display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.10);
  }
  .sheetTitle{font-weight:950;font-size:18px;flex:1}
  .xBtn{border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer;opacity:.85}
  
  .sheetBody{margin-top:12px}
  .rRow{
    padding:12px 6px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .rLabel{font-size:12px;color:rgba(255,255,255,.55)}
  .rVal{margin-top:6px;font-weight:850}
  .toast{
    position:fixed;left:50%;bottom:92px;transform:translateX(-50%);
    background:rgba(0,0,0,.75);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    padding:10px 12px;
    border-radius:999px;
    font-size:13px;
    opacity:0; transition:.18s;
  }
  .toast.show{opacity:1}
  @media (min-width:720px){
    .screen{max-width:520px;margin:0 auto}
    .trxDesc{max-width:360px}
  }
  .mcRow{display:flex; align-items:center; gap:10px}

  .mcLogo{
    position:relative;
    width:34px;
    height:22px;
  }
  
  .mc{
    position:absolute;
    top:2px;
    width:18px;
    height:18px;
    border-radius:999px;
    opacity:.9;
  }
  
  .mc.c1{left:6px; background:#ff5f45;}
  .mc.c2{left:14px; background:#ffc24a; mix-blend-mode: screen;}
  .mcRow{display:flex; align-items:center; gap:10px}

  .mcImg{
    width:44px;
    height:auto;
    display:block;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
    opacity: .95;
  }
/* Realistic card hero */
.bankCard{
    position:relative;
    border-radius:22px;
    padding:18px;
    overflow:hidden;
    color:#e9eefc;
  
    background:
      radial-gradient(900px 280px at 20% 0%, rgba(255,255,255,.10), transparent 55%),
      radial-gradient(700px 300px at 85% 30%, rgba(0,199,183,.14), transparent 60%),
      linear-gradient(145deg, #111318 0%, #0b0d12 45%, #0b0d12 100%);
  
    border:1px solid rgba(255,255,255,.10);
    box-shadow: 0 20px 70px rgba(0,0,0,.55);
  }
  
  /* glossy diagonal shine like real plastic */
  .bankCard:before{
    content:"";
    position:absolute;
    inset:-40%;
    background: linear-gradient(120deg,
      transparent 35%,
      rgba(255,255,255,.14) 45%,
      transparent 60%
    );
    transform: rotate(12deg);
    opacity:.7;
    pointer-events:none;
  }
  
  .cardGloss{
    position:absolute;
    inset:0;
    background:
      radial-gradient(600px 220px at 30% 20%, rgba(255,255,255,.10), transparent 55%),
      radial-gradient(700px 240px at 80% 10%, rgba(255,255,255,.06), transparent 55%);
    pointer-events:none;
  }
  
  .cardTop{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    z-index:1;
  }
  
  .cardBrand{
    display:flex;
    flex-direction:column;
    gap:4px;
    letter-spacing:.4px;
  }
  .bankWord{font-weight:950; font-size:15px; opacity:.95}
  .creditWord{font-weight:700; font-size:12px; color:rgba(233,238,252,.70)}
  
  .mcImgCard{
    width:58px;
    height:auto;
    opacity:.95;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,.35));
  }
  
  .cardMid{
    position:relative;
    margin-top:18px;
    display:flex;
    align-items:center;
    gap:14px;
    z-index:1;
  }
  
  /* chip (no cartoon — metallic-ish) */
  .chip{
    width:46px; height:34px;
    border-radius:8px;
    background:
      linear-gradient(135deg, #f7d36a 0%, #d7a632 45%, #f4d97b 100%);
    box-shadow:
      inset 0 0 0 2px rgba(0,0,0,.18),
      0 10px 18px rgba(0,0,0,.35);
    position:relative;
  }
  .chip:before{
    content:"";
    position:absolute;
    inset:6px;
    border-radius:6px;
    background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(255,255,255,.10));
    opacity:.65;
  }
  
  /* contactless symbol */
  .contactless{
    display:flex;
    gap:5px;
    opacity:.9;
  }
  .contactless span{
    display:block;
    width:10px; height:10px;
    border:2px solid rgba(233,238,252,.75);
    border-left-color:transparent;
    border-bottom-color:transparent;
    border-radius:999px;
    transform: rotate(45deg);
  }
  .contactless span:nth-child(2){transform: rotate(45deg) scale(1.25)}
  .contactless span:nth-child(3){transform: rotate(45deg) scale(1.5)}
  
  /* card number: realistic spacing */
  .cardNumber{
    position:relative;
    margin-top:18px;
    font-weight:800;
    letter-spacing:3px;
    font-size:18px;
    color:rgba(233,238,252,.92);
    z-index:1;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
  }
  
  /* bottom area */
  .cardBottom{
    position:relative;
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    z-index:1;
  }
  
  .smallLabel{
    font-size:10.5px;
    letter-spacing:1px;
    color:rgba(233,238,252,.60);
  }
  
  .holderName{
    margin-top:6px;
    font-weight:900;
    letter-spacing:1px;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 48vw;
  }
  
  .balBlock{min-width: 40%;}
  .balRow{
    margin-top:6px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
  }
  
  .eyeBtn{
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.06);
    color:#fff;
    border-radius:12px;
    padding:6px 10px;
    cursor:pointer;
  }