:root{
      /* --bg1:#6a11cb; --bg2:#2575fc; */
      /* --card:#ffffff; --text:#0f172a; --muted:#6b7280; */
      /* --ring:#2563eb; --border:#e5e7eb; --shadow:0 10px 30px rgba(2,6,23,.10); */
      --bg1:#0d2c53; --bg2:#37475a;
      --card:#ffffff; --text:#0f172a; --muted:#0d2c53;
      --ring:#364e6c; --border:#e5e7eb; --shadow:0 10px 30px rgba(2,6,23,.10);
      --radius:14px;
      --input-h:48px;
    }

    *{box-sizing:border-box}
    body{
      margin:0; min-height:100vh; display:grid; place-items:center;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
      color:var(--text);
      padding:24px;
    }
    /* profile set up css */

    .profile-set-up {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 2rem;
        }
        .profile-set-up .profile-container {
            max-width: 800px;
            width: 100%;
            background-color: white;
            padding: 2rem;
            border-radius: 1.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .profile-set-up .form-section {
            display: grid;
            gap: 1.5rem;
        }
        @media (min-width: 768px) {
            .profile-set-up .form-section {
                grid-template-columns: repeat(2, 1fr);
            }
        }
       
        .profile-set-up .input-group, .profile-set-up .textarea-group {
            display: flex;
            flex-direction: column;
        }
        .profile-set-up label {
            font-weight: 600;
            color: #4b5563;
            margin-bottom: 0.5rem;
        }
        .profile-set-up input[type="text"], .profile-set-up input[type="date"], .profile-set-up input[type="file"], .profile-set-up textarea, .profile-set-up select {
            border: 1px solid #d1d5db;
            padding: 0.75rem;
            border-radius: 0.5rem;
            transition: all 0.2s;
            outline: none;
        }
        .profile-set-up input:focus, .profile-set-up textarea:focus, .profile-set-up select:focus {
            border-color: #4f46e5;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
        }
        .profile-set-up .radio-group {
            display: flex;
            gap: 1.5rem;
        }
        .profile-set-up .radio-item {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        .profile-set-up .radio-item input[type="radio"] {
            margin-right: 0.5rem;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border: 2px solid #d1d5db;
            border-radius: 50%;
            transition: all 0.2s;
            position: relative;
        }
        .profile-set-up .radio-item input[type="radio"]:checked {
            background-color: #4f46e5;
            border-color: #4f46e5;
        }
        .profile-set-up .radio-item input[type="radio"]:checked::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            background-color: white;
            border-radius: 50%;
        }
        .profile-set-up .file-upload-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .profile-set-up .file-preview {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #e5e7eb;
            margin-bottom: 1rem;
        }
        .profile-set-up .upload-button {
            background-color: #4f46e5;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .profile-set-up .upload-button:hover {
            background-color: #4338ca;
        }
        .profile-set-up .hidden-file-input {
            display: none;
        }
/* profile setup css end */


    .card{
      width:100%; max-width:420px; background:var(--card);
      border-radius:0 0 14px 14px; box-shadow:var(--shadow);
      border:1px solid rgba(2,6,23,.06);
    }
    .header-bar{
        width: 100%;
        max-width: 420px;
        padding: 15px 35px;
        background: #0d2c53;;
        color: white;
        border-radius: 14px 14px 0 0;
        font-size: 18px;
        font-weight: 600;
        transition: 0.3s ease;
    }
    .signup-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: beige;
    }
    .signup-home{
      text-decoration: none;
      color: #4338ca;
      background: #d1d5db;
      padding: 5px;
      border-radius: 3px;
    }
    .form-inputs{padding:28px;}
    h1{margin:0 0 6px; font-size:1.6rem; letter-spacing:.2px}
    .sub{margin:0 0 20px; color:var(--muted); font-size:.95rem}

    .grid{
      display:grid; gap:14px;
      grid-template-columns:1fr;
    }
    @media (min-width:720px){
      .grid.two{grid-template-columns:1fr 1fr; gap:12px}
    }

    label{display:block; font-weight:600; font-size:.92rem; margin-bottom:6px}

    .field{
      position:relative;
    }
    .input{
      width:100%; height:var(--input-h);
      border:1px solid var(--border); border-radius:12px;
      padding:0 14px; font-size:1rem; outline:none; background:#fff;
      transition:border-color .15s, box-shadow .15s;
    }
    .input:focus{
      border-color:var(--ring);
      box-shadow:0 0 0 3px rgba(40, 92, 151, 0.15);
    }

    /* space for the icon inside password fields */
    .with-icon{ padding-right:46px; }

    /* icon button perfectly centered inside input */
    .icon-btn{
      position:absolute; inset-inline-end:10px; inset-block-start:50%;
      transform:translateY(-50%);
      width:34px; height:34px; display:flex; align-items:center; justify-content:center;
      border:none; background:transparent; padding:0; margin-top:3; cursor:pointer;
      color:var(--muted); border-radius:8px;
    }
    .icon-btn:hover{ color:var(--ring); background:rgba(37,99,235,.06) }
    .icon-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }

    .policy{
      display:flex; gap:10px; align-items:flex-start; color:#374151; font-size:.95rem;
      margin-top:6px;
    }
    .policy input{ margin-top:3px; color:var(--bg2); }
    .muted{ color:var(--bg2); font-size:.9rem }

    .btn{
      width:100%; height:48px; border:none; border-radius:12px; font-weight:700;
      background:#0d2c53; color:#fff; cursor:pointer; margin-top:6px; font-size:1rem;
      transition:filter .15s, transform .02s;
    }
    .btn:hover:not(:disabled){ filter:brightness(.95) }
    .btn:active:not(:disabled){ transform:translateY(1px) }
    .btn:disabled{ background:#6b819b;; cursor:not-allowed }

    .error{ color:#dc2626; font-size:.9rem; margin-top:6px; display:none }
    .error.show{ display:block }