:root{
    --bkash-pink:#E2136E;
    --bkash-pink-dark:#A80E52;
    --bkash-purple:#2B0A29;
    --ink:#1A1A1A;
    --paper:#FBF5F8;
    --line:#F0C4D9;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Segoe UI', 'Noto Sans Bengali', Roboto, Arial, sans-serif;
    background:var(--paper);
    color:var(--ink);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-bottom:48px;
  }

  /* ---- Header banner ---- */
  .header-banner{
    width:100%;
    max-width:600px;
    display:block;
    background:var(--bkash-purple);
  }
  .header-banner img{
    width:100%;
    display:block;
  }

  main{
    width:100%;
    max-width:480px;
    padding:0 16px;
  }

  .titleblock{
    text-align:center;
    margin:22px 0 20px;
  }
  h1{
    font-size:23px;
    margin:0 0 8px;
    color:var(--bkash-pink-dark);
    line-height:1.3;
  }
  p.sub{
    margin:0 auto;
    font-size:14px;
    color:#555;
    line-height:1.6;
    max-width:360px;
  }

  .card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
    width:100%;
    box-shadow:0 10px 28px rgba(226,19,110,.08);
  }

  #dropzone{
    border:2px dashed var(--bkash-pink);
    border-radius:14px;
    padding:28px 16px;
    text-align:center;
    cursor:pointer;
    background:#FFFBFD;
  }
  #dropzone:active{background:#FDEFF5;}
  #dropzone strong{color:var(--bkash-pink-dark); font-size:15px;}
  #dropzone small{display:block;margin-top:6px;color:#888;font-size:12.5px;}
  #fileInput{display:none;}

  .stage{display:none;}
  .stage.active{display:block;}

  .preview-stage{display:none;}
  .preview-stage.active{display:block;}
  .final-wrap{
    width:100%;
    aspect-ratio:1/1;
    border-radius:14px;
    overflow:hidden;
    background:#fafafa;
  }
  .final-wrap img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
  }
  .preview-stage #downloadBtn{
    width:100%;
    margin-top:16px;
  }
  .ghost-btn{
    width:100%;
    margin-top:10px;
    background:#fff;
    color:var(--bkash-pink-dark);
    border:1.5px solid var(--line);
  }
  .ios-only{display:none;}

  .canvas-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    border-radius:14px;
    overflow:hidden;
    background:
      linear-gradient(45deg,#eee 25%,transparent 25%) -10px 0/20px 20px,
      linear-gradient(-45deg,#eee 25%,transparent 25%) -10px 0/20px 20px,
      linear-gradient(45deg,transparent 75%,#eee 75%) 0 0/20px 20px,
      linear-gradient(-45deg,transparent 75%,#eee 75%) 0 0/20px 20px,
      #fafafa;
    touch-action:none;
    cursor:grab;
  }
  .canvas-wrap:active{cursor:grabbing;}
  #previewCanvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .circle-guide{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle closest-side, transparent 0%, transparent 99.3%, rgba(20,4,16,.6) 100%);
  }
  .circle-guide::after{
    content:'';
    position:absolute;
    inset:0;
    margin:auto;
    width:99.4%;
    height:99.4%;
    border-radius:50%;
    box-shadow:0 0 0 1.5px rgba(255,255,255,.85);
  }

  .controls{
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .controls label{
    font-size:12.5px;
    font-weight:600;
    color:#666;
    display:flex;
    justify-content:space-between;
  }
  input[type=range]{
    width:100%;
    height:34px;
    accent-color:var(--bkash-pink);
  }

  .actions{
    margin-top:18px;
    display:flex;
    gap:10px;
  }
  button{
    font-family:inherit;
    font-size:14.5px;
    font-weight:700;
    border-radius:10px;
    border:none;
    padding:14px 14px;
    cursor:pointer;
    flex:1;
    transition:transform .1s ease, opacity .15s ease;
  }
  button:active{transform:scale(.97);}
  #downloadBtn{
    background:var(--bkash-pink);
    color:#fff;
  }
  #resetBtn{
    background:#fff;
    color:var(--bkash-pink-dark);
    border:1.5px solid var(--line);
  }
  #confirmBtn{
    background:var(--bkash-pink);
    color:#fff;
  }
  #confirmBtn:disabled{
    opacity:.7;
    cursor:not-allowed;
  }
  #confirmBtn.loading{
    position:relative;
    color:transparent;
  }
  #confirmBtn.loading::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    margin:-8px 0 0 -8px;
    border:2px solid rgba(255,255,255,.5);
    border-top-color:#fff;
    border-radius:50%;
    animation:btn-spin .6s linear infinite;
  }
  @keyframes btn-spin{
    to{transform:rotate(360deg);}
  }

  .hint{
    margin-top:14px;
    font-size:12.5px;
    color:#999;
    text-align:center;
    line-height:1.5;
  }
  .drag-hint{
    margin-top:0;
    margin-bottom:10px;
  }

  footer{
    margin-top:30px;
    font-size:11.5px;
    color:#b3b3b3;
    text-align:center;
    padding:0 16px;
  }