* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
  :root{
    --page-bg:#c7c7c7;
    --screen-bg:#f1f1f3;
    --ink:#141416;
    --gray:#8f8f96;
    --dark-card:#202125;
    --green:#22c55e;
    --green-bright:#24d126;
    --green-dark:#1e9e4a;
    --green-tile:#e9f6ea;
    --green-badge:#dcf2de;
    --orange:#e8862e;
    --orange-tile:#fdf0e0;
    --blue:#3d7ded;
    --blue-tile:#e8f0fd;
    --track:#ececf0;
  }
  html,body{ height:100%; }
  body{
    font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
    background:var(--page-bg);
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; padding:30px 0;
  }
  .stage{ display:flex; align-items:center; gap:100px; transform:scale(1.06); }
  /* ---------- iPhone frame ---------- */
  .phone{
    width:411px; height:872px; flex:0 0 auto;
    background:#fbfbfb;
    border-radius:60px;
    padding:9px;
    box-shadow:0 0 0 1.5px #d8d8d8, 0 34px 70px -24px rgba(0,0,0,.22), inset 0 0 0 1px #efefef;
    position:relative;
  }
  .screen{
    width:393px; height:854px;
    background:var(--screen-bg);
    border-radius:51px;
    overflow:hidden;
    position:relative;
  }
  /* ---------- status bar ---------- */
  .statusbar{
    height:54px; display:flex; align-items:flex-end; justify-content:space-between;
    padding:0 30px 6px 34px; flex:0 0 auto;
  }
  .statusbar .time{ font-size:16px; font-weight:700; color:var(--ink); letter-spacing:.2px; }
  .statusbar .icons{ display:flex; align-items:center; gap:7px; color:var(--ink); }
  .col{ height:100%; overflow-y:auto; scrollbar-width:none; }
  .col::-webkit-scrollbar{ display:none; }
  .pad{ padding:0 22px; }
  /* ---------- HOME ---------- */
  .home-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 22px 14px;
  }
  .home-head h1{ font-size:21px; font-weight:700; color:var(--ink); letter-spacing:-.3px; }
  .home-head .actions{ display:flex; gap:18px; color:#3c3c40; }
  .balance-card{
    margin:0 22px;
    padding:20px 20px 16px;
    background:linear-gradient(180deg,#26272b 0%,#1d1e22 100%);
    border-radius:28px;
    box-shadow:0 14px 28px -12px rgba(20,20,25,.45);
  }
  .cardnum{
    display:flex; justify-content:center;
  }
  .cardnum .pill{
    display:flex; align-items:center; gap:9px;
    background:#33343a;
    border-radius:999px;
    padding:7px 16px 7px 8px;
  }
  .cardnum .pill span{ color:#fff; font-size:13.5px; font-weight:600; letter-spacing:1.5px; }
  .balance-label{ text-align:center; color:#9a9aa2; font-size:13.5px; font-weight:500; margin-top:16px; }
  .balance-value{ text-align:center; color:#fff; font-size:34px; font-weight:700; letter-spacing:-.5px; margin-top:2px; }
  .quick-actions{
    display:flex; justify-content:space-between; margin-top:16px; padding:0 4px;
  }
  .qa{ display:flex; flex-direction:column; align-items:center; gap:9px; }
  .qa .circle{
    width:52px; height:52px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #ffffff 0%, #f2f2f4 55%, #e4e4e8 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 8px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.9);
    color:#17171a;
  }
  .qa .lbl{ color:#9c9ca4; font-size:12.5px; font-weight:500; }
  .goals-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px 10px;
  }
  .goals-head h2{ font-size:17px; font-weight:700; color:var(--ink); }
  .goals-head a{ display:flex; align-items:center; gap:4px; color:#6d6d74; font-size:13px; font-weight:500; text-decoration:none; }
  .goal-card{
    background:#f8f8fa;
    border:1px solid #f0f0f2;
    border-radius:22px;
    margin:0 22px 11px;
    padding:13px 13px 13px;
    box-shadow:0 4px 12px -6px rgba(20,20,25,.05);
  }
  .goal-top{ display:flex; align-items:center; gap:12px; }
  .goal-top .tile{
    width:42px; height:42px; border-radius:14px;
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  }
  .goal-top .name{ font-size:15.5px; font-weight:700; color:var(--ink); flex:1; }
  .goal-top .chev{
    width:34px; height:34px; border-radius:12px; background:#f3f3f5;
    display:flex; align-items:center; justify-content:center; color:#4a4a4f;
  }
  .goal-progress{
    background:#ffffff;
    border:1px solid #f0f0f2;
    box-shadow:0 3px 8px -4px rgba(20,20,25,.06);
    border-radius:16px;
    margin-top:10px;
    padding:12px 14px 11px;
  }
  .gp-row{ display:flex; align-items:baseline; justify-content:space-between; }
  .gp-now{ font-size:14.5px; font-weight:700; color:var(--ink); }
  .gp-target{ font-size:13px; font-weight:500; color:#9a9aa1; }
  .gp-track{
    height:6px; background:#e8e8ec; border-radius:999px; margin:8px 0 8px; overflow:hidden;
  }
  .gp-fill{ height:100%; border-radius:999px; }
  .gp-left{ font-size:12.5px; font-weight:500; color:#3c3c41; }
  .gp-pct{ font-size:12.5px; font-weight:700; color:var(--ink); }
  /* tab bar */
  .tabbar{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:14px;
    background:#0c0c0e;
    border-radius:999px;
    display:flex; align-items:center; gap:6px;
    padding:8px;
    box-shadow:0 16px 30px -10px rgba(0,0,0,.45);
  }
  .tabbar .tab{
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#8d8d94;
  }
  .tabbar .tab.active{ background:#fff; color:#0c0c0e; }
  /* ---------- DETAIL ---------- */
  .detail-nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 22px 14px;
  }
  .detail-nav .back{ color:#3c3c40; display:flex; }
  .detail-nav h1{ font-size:16.5px; font-weight:700; color:var(--ink); }
  .detail-nav .dots{ color:#3c3c40; display:flex; }
  .detail-id{
    display:flex; align-items:flex-start; justify-content:space-between;
    padding:6px 22px 0;
  }
  .detail-id .tile{
    width:52px; height:52px; border-radius:17px; background:var(--green-tile);
    display:flex; align-items:center; justify-content:center;
  }
  .detail-id .right{ text-align:right; }
  .badge{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--green-badge);
    border-radius:999px;
    padding:5px 11px 5px 6px;
  }
  .badge .up{
    width:19px; height:19px; border-radius:50%; background:var(--green);
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .badge b{ color:var(--green-dark); font-size:13px; font-weight:700; }
  .detail-id .since{ color:#9a9aa1; font-size:12px; font-weight:500; margin-top:7px; }
  .detail-title{ padding:18px 22px 0; font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-.4px; }
  .detail-sub{ padding:5px 22px 0; font-size:13.5px; font-weight:500; color:#8f8f96; }
  .detail-progress{ padding:18px 22px 0; }
  .dp-row{ display:flex; align-items:baseline; justify-content:space-between; }
  .dp-now{ font-size:19px; font-weight:800; color:var(--ink); }
  .dp-target{ font-size:14px; font-weight:500; color:#9a9aa1; }
  .dp-track{ height:7px; background:#e6e6ea; border-radius:999px; margin:12px 0 10px; overflow:hidden; }
  .dp-fill{ height:100%; width:33%; background:var(--green); border-radius:999px; }
  .dp-left{ font-size:13px; font-weight:600; color:#3c3c41; }
  .dp-pct{ font-size:13px; font-weight:800; color:var(--ink); }
  .analytics{
    background:#fdfdfd;
    border:1px solid #ededf0;
    border-radius:24px;
    margin:16px 22px 0;
    padding:16px 18px 12px;
    box-shadow:0 4px 12px -6px rgba(20,20,25,.05);
  }
  .analytics h3{ font-size:15.5px; font-weight:700; color:var(--ink); }
  .analytics .avg{ font-size:12.5px; color:#9a9aa1; font-weight:500; margin-top:4px; }
  .analytics .avg b{ color:var(--ink); font-weight:700; }
  .chart{
    position:relative;
    height:160px;
    margin-top:14px;
    display:flex; align-items:flex-end; justify-content:space-between;
    padding:0 6px;
  }
  .chart .grid{ position:absolute; inset:0 0 0 0; display:flex; flex-direction:column; justify-content:space-between; }
  .chart .grid i{ display:block; height:1px; background:#f0f0f2; }
  .bar{
    width:28px; border-radius:14px;
    background-color:#343438;
    background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.13) 0 2.5px, rgba(255,255,255,0) 2.5px 6.5px);
    position:relative; z-index:1;
  }
  .chart-labels{
    display:flex; justify-content:space-between; padding:9px 6px 0;
  }
  .chart-labels span{ width:30px; text-align:center; font-size:12px; color:#9a9aa1; font-weight:500; }
  .tx-head{ padding:14px 22px 10px; font-size:16.5px; font-weight:700; color:var(--ink); }
  .tx-card{
    background:#fdfdfd;
    border:1px solid #ededf0;
    border-radius:22px;
    margin:0 22px 10px;
    padding:13px 16px;
    display:flex; align-items:center; gap:13px;
    box-shadow:0 4px 12px -6px rgba(20,20,25,.05);
  }
  .tx-avatar{
    width:46px; height:46px; border-radius:50%; background:#f3f3f5;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; position:relative; flex:0 0 auto;
  }
  .tx-avatar .mini{
    position:absolute; right:-3px; bottom:-3px;
    width:19px; height:19px; border-radius:50%; background:var(--green);
    border:2px solid #fdfdfd;
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .tx-info{ flex:1; }
  .tx-info .t{ font-size:14.5px; font-weight:700; color:var(--ink); }
  .tx-info .s{ font-size:12px; font-weight:500; color:#9a9aa1; margin-top:3px; }
  .tx-amt{ text-align:right; }
  .tx-amt .a{ font-size:14.5px; font-weight:700; color:var(--green-dark); }
  .tx-amt .h{ font-size:12px; font-weight:500; color:#9a9aa1; margin-top:3px; }
  .cta-wrap{
    position:absolute; left:0; right:0; bottom:0;
    padding:34px 22px 24px;
  }
  .cta-fade{
    position:absolute; left:0; right:0; bottom:0; height:135px; pointer-events:none;
    background:linear-gradient(180deg, rgba(241,241,243,0) 0%, rgba(241,241,243,.55) 45%, rgba(241,241,243,.9) 100%);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    mask-image:linear-gradient(180deg, transparent 0%, black 50%);
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, black 50%);
  }
  .cta{
    width:100%; height:56px; border:none; border-radius:999px;
    background:#101113; color:#fff;
    font-family:inherit; font-size:16px; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:0 14px 26px -10px rgba(0,0,0,.4);
    cursor:pointer;
  }
  .home-fade{
    position:absolute; left:0; right:0; bottom:0; height:130px; pointer-events:none;
    background:linear-gradient(180deg, rgba(241,241,243,0) 0%, rgba(241,241,243,.9) 55%, #f1f1f3 100%);
  }