/* Themese */
:root {
      --radius: .625rem;
      --bg:        rgb(244, 241, 235);
      --bg-html:   white;
      --surface:   #ffffff;
      --text:      #1a1714;
      --text:     #7a746b;
      --accent:    #c8622a;
      --border:    #e2ddd6;
      --toggle-bg: #d6d0c8;
      --shadow:    rgba(0,0,0,0.07);
      --transition: 0.3s ease;
    }
    html.dark {
      --radius: .625rem;
      --bg:        #16140f;
      --bg-html:   black;
      --surface:   #211e17;
      --text:      #f0ebe2;
      --text:     #8a8278;
      --accent:    #e07840;
      --border:    #2e2b23;
      --toggle-bg: #3a3630;
      --shadow:    rgba(0,0,0,0.3);
    }

    /* Deuteranopia & Protanopia — blue/yellow axis */
/* Apply via: html[data-vision="deuteranopia"] */
html[data-vision="deuteranopia"] {
  --radius: .625rem;
  --bg:        rgb(255, 253, 208); /*Cream */
  --bg-html:   white;
  --surface:   #ffffff;
  --text:         rgb(0, 0, 84); 
  --text:     #7a746b;
  --accent:    #0072B2;  /* blue */
  --accent-2:  #E69F00;  /* orange */
  --accent-3:  #F0E442;  /* yellow */
  --border:    #e2ddd6;
  --toggle-bg: #d6d0c8;
  --shadow:    rgba(0,0,0,0.07);
  --transition: 0.3s ease;
}
html.dark[data-vision="deuteranopia"] {
  --radius: .625rem;
  --bg:        #16140f;
  --bg-html:   black; 
  --surface:   #211e17;
  --text:      rgb(202, 202, 49);/* Soft yellow */
  --text:     #8a8278;
  --accent:    #3A9FD8;  /* blue — lightened */
  --accent-2:  #F5B731;  /* orange — brightened */
  --accent-3:  #F5EC6A;  /* yellow — lightened */
  --border:    #2e2b23;
  --toggle-bg: #3a3630;
  --shadow:    rgba(0,0,0,0.3);
}


/* Tritanopia — red/green axis */
/* Apply via: html[data-vision="tritanopia"] */
html[data-vision="tritanopia"] {
  --radius: .625rem;
  --bg:        rgb(255, 253, 208); /*Cream */
  --bg-html:   white;
  --surface:   #ffffff;
  --text:      rgb(255, 140, 0); /*Deep Orange*/
  --text:     #7a746b;
  --accent:    #D62728;  /* red */
  --accent-2:  #2CA02C;  /* green */
  --accent-3:  #FF7F0E;  /* orange */
  --border:    #e2ddd6;
  --toggle-bg: #d6d0c8;
  --shadow:    rgba(0,0,0,0.07);
  --transition: 0.3s ease;
}
html.dark[data-vision="tritanopia"] {
  --radius: .625rem;
  --bg:        rgb(51, 51, 51); /*Dark Charcoal*/
  --bg-html:   black;
  --surface:   #211e17;
  --text:      #ff0000;   /* bright red*/
  --text:     #8a8278;
  --accent:    #EF5350;  /* red — lightened */
  --accent-2:  #4CAF50;  /* green — brightened */
  --accent-3:  #FFA040;  /* orange — lightened */
  --border:    #2e2b23;
  --toggle-bg: #3a3630;
  --shadow:    rgba(0,0,0,0.3);
}

/* Achromatopsia — lightness contrast only */
/* Apply via: html[data-vision="achromatopsia"] */
html[data-vision="achromatopsia"] {
  --radius: .625rem;
  --bg:        rgb(255, 253, 208); /*Cream */
  --bg-html:   white;
  --surface:   #ffffff;
  --text:      #111111;
  --text:     #888888;
  --accent:    #444444;  /* dark gray */
  --accent-2:  #888888;  /* mid gray */
  --accent-3:  #C0C0C0;  /* light gray */
  --border:    #C0C0C0;
  --toggle-bg: #C0C0C0;
  --shadow:    rgba(0,0,0,0.07);
  --transition: 0.3s ease;
}
html.dark[data-vision="achromatopsia"] {
  --radius: .625rem;
  --bg:        #111111;    /*Solid black */
  --bg-html:   black;
  --surface:   #222222;
  --text:      rgb(202, 202, 49);/* Soft yellow */
  --text:     #888888;
  --accent:    #C0C0C0;  /* light gray */
  --accent-2:  #888888;  /* mid gray */
  --accent-3:  #444444;  /* dark gray */
  --border:    #333333;
  --toggle-bg: #333333;
  --shadow:    rgba(0,0,0,0.3);
}

html{
   background-color: var(--bg-html);
    width: 100%;
     height: 100%;  
    content: "";
    position: absolute;
     z-index:-1;
     
}
    .body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-weight: 300;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 60px 20px 80px;
    }

    /* Header */
    .page-header {
      width: 100%;
      max-width: 680px;
      margin-bottom: 52px;
    }

    .label {
      font-family: 'DM Sans', sans-serif;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 14px;
    }

    h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(52px, 10vw, 88px);
      line-height: 0.95;
      letter-spacing: 0.02em;
      margin-bottom: 20px;
    }

    h1 span {
      color: var(--accent);
    }

    .subtitle {
      font-size: 15px;
      color: var(--text);
      line-height: 1.6;
      max-width: 420px;
    }

    /* Form card */
    .card {
      width: 100%;
      max-width: 680px;
      background: var(--surface);
      border: 1px solid var(--border);
      padding: 44px 48px;
    }

    .form-group {
      margin-bottom: 28px;
    }
 
    
    label {
      display: block;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 10px;
    }

    input, select, textarea {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      font-weight: 300;
      padding: 14px 16px;
      outline: none;
      transition: border-color 0.2s;
      appearance: none;
      -webkit-appearance: none;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--accent);
    }

    select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 16px center;
      cursor: pointer;
    }

    select option {
      background: var(--bg);
    }

    textarea {
      resize: vertical;
      min-height: 140px;
      line-height: 1.6;
    }

    /* File upload */
    .file-upload {
      border: 1px dashed var(--border);
      padding: 28px;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s;
      position: relative;
    }

    .file-upload:hover { border-color: var(--accent); }

    .file-upload input[type="file"] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
      padding: 0;
      border: none;
    }

    .file-upload-icon {
      font-size: 22px;
      margin-bottom: 8px;
    }

    .file-upload p {
      font-size: 13px;
      color: var(--text);
    }

    .file-upload span {
      color: var(--accent);
    }

    /* Row layout */
    .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    /* Terms */
    .terms {
      font-size: 12px;
      color: var(--text);
      line-height: 1.6;
      padding: 20px 0;
      border-top: 1px solid var(--border);
      margin-top: 8px;
      margin-bottom: 28px;
    }

    /* Submit button */
    .btn-submit {
      width: 100%;
      background: var(--accent);
      color: #0e0e0e;
      border: none;
      padding: 18px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.1s;
    }

    .btn-submit:hover { opacity: 0.88; }
    .btn-submit:active { transform: scale(0.99); }

    /* Success state */
    .success-msg {
      display: none;
      text-align: center;
      padding: 60px 40px;
    }

    .success-msg.visible { display: block; }

    .success-icon {
      font-size: 40px;
      margin-bottom: 20px;
    }

    .success-msg h2 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 42px;
      letter-spacing: 0.04em;
      margin-bottom: 12px;
      color: var(--accent);
    }

    .success-msg p {
      color: var(--text);
      font-size: 14px;
      line-height: 1.6;
    }

    /* Footer note */
    .footer-note {
      margin-top: 32px;
      font-size: 12px;
      color: #444;
      text-align: center;
    }

    @media (max-width: 540px) {
      .card { padding: 28px 20px; }
      .row { grid-template-columns: 1fr; }
    }