body {
              margin: 0;
              font-family: Arial, Helvetica, sans-serif;
            }

            .topnav {
              overflow: hidden;
              background-color: #ffffff;
            }

            .topnav a {
              float: left;
              color: #1a1a1a;
              text-align: center;
              padding: 12px 14px;
              text-decoration: none;
              font-size: 17px;
            }

            .topnav a:hover {
              background-color: #ddd;
              color: black;
            }

            .topnav a.active {
              background-color: #ffffff;
              color: black;
            }
								   
            .topnav-right {
              float: right;
            }

            .imager img {
              border: 1px solid #ddd;
              width: 150px;
              border-radius: 10%;
              margin: 20px;
            }

            .imager img:hover {
              box-shadow: 0 0 2px 1px rgba(151, 161, 165, 0.5);
									   
            }    


    .wrap {
      background: #fff;
      padding: 24px;
      border-radius: 16px;
      max-width: 900px;
      width: 100%;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    @media(max-width: 768px){
      .wrap { grid-template-columns: 1fr; }
    }
    textarea, select, input[type="file"] {
      width: 100%;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #ccc;
      margin-bottom: 12px;
    }
    button {
      padding: 10px 18px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font-weight: 600;
      margin-right: 8px;
    }
    .primary { background: #2563eb; color: #fff; }
    .secondary { background: #e5e7eb; }
    #previewBox {
      background: #fff;
      padding: 16px;
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    canvas { border-radius: 12px; }