:root{
    /* colors tuned to screenshot */
    --bg:#f7f8fa;
    --card:#ffffff;
    --text:#14171F;
    --text2:#5C667A;
    --green:#00A26A;
    --green-soft:#E6F6EE;
    --green-border:#9BD9C1;
    --divider:#D9DEE6;
    --link:#0C6CDA;
    --status-bg:#0B0B0B;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);font-family:Roboto,system-ui,Segoe UI,Helvetica,Arial;color:var(--text)}
  .wrap{
    max-width:1700px; margin:18px auto; padding:14px;
    display:grid; grid-template-columns: 420px 1fr; gap:18px;
  }
  @media (max-width: 1200px){ .wrap{ grid-template-columns: 1fr; } }

  /* ===== Left controls ===== */
  .panel{
    background:#fff;border:1px solid #e6e9ef;border-radius:14px;padding:16px;box-shadow:0 3px 10px rgba(0,0,0,.04)
  }
  .panel h2{margin:6px 0 12px;font-size:18px}
  .panel label{display:block;font-size:12px;color:var(--text2);margin:10px 0 6px}
  .panel input[type="text"],
  .panel input[type="number"],
  .panel input[type="datetime-local"],
  .panel textarea,
  .panel select{
    width:100%;padding:10px 12px;border:1px solid #d6dce5;border-radius:10px;font:inherit;background:#fff
  }
  .panel textarea{min-height:70px;resize:vertical}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
  .btn{padding:10px 14px;border-radius:10px;border:1px solid #ffffff;background:#fff;cursor:pointer;font-weight:600}
  .btn.primary{background:var(--text);color:#fff;border-color:var(--text)}
  .note{font-size:12px;color:var(--text2);margin-top:6px}

  /* ===== Phone canvas (captured) ===== */
  .canvas{
    width:1272px;height:2800px; background:var(--card); position:relative; overflow:hidden;
    border:1px solid #ffffff; margin:auto; box-shadow:0 10px 30px rgba(0,0,0,.12);
  }

  /* Top Android status bar (mocked to your screenshot) */
  .status{
    position:absolute; inset:0 auto auto 0; width:1272px; height:130px; /* tall-ish to match */
    background:var(--status-bg); color:#fff; display:flex; align-items:flex-end; padding:0 30px 16px 30px;
    font-weight:700;
  }
  .status .time{font-size:52px; letter-spacing:.5px}
  .status .left-icons{display:flex; gap:22px; margin-left:20px; align-items:center}
  .status .right{margin-left:auto; display:flex; align-items:center; gap:26px; font-size:28px; font-weight:500}
  .status svg{display:block}

  /* App header row */
  .header{
    position:absolute; top:130px; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:34px 44px 4px; color:var(--text);
  }
  .header .title{font-size:52px; font-weight:700; letter-spacing:.5px}
  .header .help{font-size:40px; font-weight:700}
  .back{width:48px;height:48px;display:grid;place-items:center}

  /* Completed chip */
  .chip{
    position:absolute; top:330px; right:44px;
    background:#0BA569; color:#fff; font-weight:700;
    padding:18px 28px; border-radius:12px; font-size:38px;
  }

  /* Main content */
  .content{ position:absolute; top:260px; left:44px; right:44px; }
  .profile{ display:flex; gap:28px; align-items:center; }
  .avatar{ margin-top: 45px; width:152px;height:152px;border-radius:50%;object-fit:cover;background:#e9e9e9;border:2px solid #e6e6e6 }
  .name{ font-size:66px; font-weight:700; line-height:1.1; padding-top:73px }
  .sub{ font-size:46px; font-weight:500; margin-top:4px; display:flex; align-items:center; gap:14px}
  .stars{ margin-top:10px }
  .stars svg{ width:60px; height:60px; margin-right:6px }

  .meta{ margin-top:58px; font-size:42px; font-weight: 400; color:#211649 }
  .meta b{ color:var(--text) }

  .timeline{ margin-top:50px; display:grid; grid-template-columns: 34px 1fr; column-gap:18px }
  .tl-dot{ width:25px;height:25px;border-radius:50%; margin-top: -2px; margin-left: 6px;}
  .tl-line {
    width: 6px;
    margin-left: 3px;
    background-image: linear-gradient(to bottom, #61656b 50%, rgba(255,255,255,0) 0%);
    background-position: top;
    background-size: 6px 38px;
    background-repeat: repeat-y;
    justify-self: center;
}
  .tl-item{ margin-bottom:47px }
  .tl-item h4{ margin:0 0 10px; font-size:47px; font-weight:700; color:#818181 }
  .tl-item p{ margin:0; font-size:46px; color:#545962d6 }

  .section-divider{
    border-top:4px dashed #3d4044;
    margin:36px -43px;
  }

  .small{ font-size:40px; color:var(--text2); }
  .money{ font-size:96px; font-weight:700; display:flex; align-items:center; gap:18px; margin-top: 10px; color: #25164b; }
  .check-round{
    width:54px;height:54px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center
  }
  .check-round svg{ width:34px;height:34px }

  .links{ display:flex; gap:40px; flex-direction: column; align-items: flex-end; position: absolute; top: 1187px; left: 885px;}
  .link{ display:flex; align-items:center; gap:12px; font-size:40px; color:#00a26a; text-decoration: underline; }
  .link svg{ width:40px;height:40px }

  .plus{
    margin-top:70px; background:var(--green-soft); border:4px solid #00a26a; color:var(--green);
    padding:26px 32px; border-radius:26px; font-size:46px; font-weight:700; width:100%; text-align:center
  }

  .pref{
    margin-top:50px; border:4px solid var(--green); border-radius:26px; padding:28px 30px;
  }
  .pref h5{ margin:0 0 20px; font-size:48px; font-weight:700 }
  .pref p{ margin:0; font-size:38px; color:#7b828e; margin-right: 405px;line-height: 45px; font-family: sans-serif; }
  .pref .row{ display:flex; align-items:center; gap:16px }
  .pref h5 span { display: block;}

  .square-check{ margin-left:auto; width:56px;height:56px; border-radius:12px; background:#00a26a; display:grid; place-items:center;margin-top: 70px; }
  .square-check svg{ width:36px;height:36px }

  /* Huge bottom blank space to match screenshot */
  .spacer{ height:1050px } /* tweak for how tall your details are */

  /* Bottom gesture bar */
  .gesture{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:22px; width:250px; height:16px; background:#0a0a0a; border-radius:14px; opacity:.9;
  }

  #infoButton{
    color: #00A26A;
  }

  #dtLabel{
    margin-left: 10px;
  }