:root {
      --yellow: #FFCD00;
      --black: #262626;
      --purple: #6D5BF7;
      --purple-light: #8B7CF7;
      --light-gray: #D4D4D4;
      --green: #28C79D;
      --red: #FF3653;
      --subtle-gray: #E0E0E0;
      --white: #FFFFFF;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: linear-gradient(135deg, #F8F9FA 0%, #EEF0F2 100%);
      color: var(--black);
      min-height: 100vh;
      line-height: 1.5;
      padding: 2rem 1rem;
    }
    .container { max-width: 800px; margin: 0 auto; }
    .main-content { display: block; }
    .header { text-align: center; margin-bottom: 2rem; }
    .logo { display: inline-flex; align-items: center; margin-bottom: 1rem; }
    .logo svg { height: 32px; width: auto; }
    .header h1 { font-size: 1.75rem; font-weight: 700; color: var(--black); margin-bottom: 0.5rem; }
    .header p { color: #666; font-size: 0.95rem; }
    .header-note {
      margin-top: 1rem;
      padding: 0.75rem 1rem;
      background: #FFF9E6;
      border: 1px solid #FFE082;
      border-radius: 10px;
      font-size: 0.8rem;
      color: #5D4E37;
      text-align: left;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    .header-note p { color: #5D4E37; font-size: 0.8rem; margin-bottom: 0.25rem; }
    .header-note p:last-child { margin-bottom: 0; }
    .form-card {
      background: var(--white);
      border-radius: 20px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.08);
      padding: 2.5rem;
      border: 1px solid rgba(0,0,0,0.04);
    }
    .section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--subtle-gray); }
    .section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .section-title {
      font-size: 1rem; font-weight: 700; color: var(--purple);
      text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.25rem;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .section-title::before { content: ''; width: 4px; height: 18px; background: var(--yellow); border-radius: 2px; }
    .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 1.25rem; }
    .form-row-3 { grid-template-columns: repeat(3, 1fr); }
    .form-group { margin-bottom: 1.25rem; }
    .form-group:last-child { margin-bottom: 0; }
    label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.5rem; color: var(--black); }
    .required { color: var(--red); margin-left: 2px; }
    input, select, textarea {
      width: 100%; padding: 0.75rem 1rem; border: 2px solid #E8E8E8;
      border-radius: 10px; font-size: 0.95rem; font-family: inherit;
      transition: all 0.2s ease; background: #FAFAFA;
    }
    input:focus, select:focus, textarea:focus {
      outline: none; border-color: var(--purple); background: var(--white);
      box-shadow: 0 0 0 3px rgba(109, 91, 247, 0.1);
    }
    input::placeholder, textarea::placeholder { color: #AAA; }
    textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
    textarea.small { min-height: 70px; }
    .searchable-select { position: relative; }
    .searchable-select input { padding: 0.75rem 2.5rem 0.75rem 1rem; cursor: pointer; }
    .searchable-select::after {
      content: ''; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      width: 0; height: 0; border-left: 5px solid transparent;
      border-right: 5px solid transparent; border-top: 6px solid #888;
      pointer-events: none; transition: transform 0.2s;
    }
    .searchable-select.open::after { transform: translateY(-50%) rotate(180deg); }
    .select-dropdown {
      position: absolute; top: 100%; left: 0; right: 0; background: white;
      border: 2px solid var(--purple); border-radius: 10px; margin-top: 4px;
      max-height: 220px; overflow-y: auto; z-index: 100; display: none;
      box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    }
    .searchable-select.open .select-dropdown { display: block; }
    .select-option { padding: 0.7rem 1rem; cursor: pointer; transition: background 0.15s; font-size: 0.9rem; }
    .select-option:hover { background: rgba(109, 91, 247, 0.1); }
    .select-option.selected { background: var(--purple); color: white; }
    .select-option.highlighted { background: rgba(109, 91, 247, 0.15); }
    .no-results { padding: 1rem; text-align: center; color: #888; font-size: 0.9rem; }
    .radio-group { display: flex; gap: 1.5rem; margin-top: 0.5rem; }
    .radio-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
    .radio-option input { width: 18px; height: 18px; accent-color: var(--purple); cursor: pointer; }
    .radio-option span { font-size: 0.9rem; font-weight: 500; }
    .conditional-fields { margin-top: 1rem; padding: 1rem; background: #FAFAFA; border-radius: 10px; display: none; }
    .conditional-fields.show { display: block; animation: fadeIn 0.3s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
    .file-upload {
      border: 2px dashed #D0D0D0; border-radius: 10px; padding: 1.5rem;
      text-align: center; cursor: pointer; transition: all 0.2s ease; background: #FAFAFA;
    }
    .file-upload:hover { border-color: var(--purple); background: rgba(109, 91, 247, 0.03); }
    .file-upload-text { font-size: 0.9rem; color: #666; }
    .file-upload-text span { color: var(--purple); font-weight: 600; }
    .file-types { font-size: 0.75rem; color: #999; margin-top: 0.5rem; }
    #fileList { margin-top: 0.75rem; }
    .file-item {
      display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem;
      background: #F0F0F0; border-radius: 6px; margin-top: 0.5rem; font-size: 0.85rem; flex-wrap: wrap;
    }
    .file-item button { margin-left: auto; background: none; border: none; cursor: pointer; color: #888; font-size: 1rem; }
    .file-item button:hover { color: var(--red); }
    .checkbox-group {
      display: flex; align-items: center; gap: 0.75rem; padding: 1rem;
      background: #FAFAFA; border-radius: 10px; border: 1px solid #E8E8E8; cursor: pointer;
    }
    .checkbox-group input { width: 20px; height: 20px; accent-color: var(--purple); flex-shrink: 0; cursor: pointer; }
    .checkbox-group label { font-size: 0.85rem; color: #444; line-height: 1.5; font-weight: 400; margin-bottom: 0; cursor: pointer; flex: 1; }
    .checkbox-group a { color: var(--purple); text-decoration: none; font-weight: 600; }
    .signature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
    .signature-group { display: flex; flex-direction: column; }
    .signature-group label { margin-bottom: 0.5rem; }
    .signature-box {
      flex: 1; border: 2px solid #E8E8E8; border-radius: 10px; min-height: 52px;
      background: #FAFAFA; display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.2s; overflow: hidden;
    }
    .signature-box:hover { border-color: var(--purple); }
    .signature-box.has-signature { padding: 0.25rem; }
    .signature-box img { max-width: 100%; max-height: 60px; }
    .signature-placeholder { color: #AAA; font-size: 0.85rem; }
    .signature-group input { height: 52px; }
    .modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.6);
      display: none; align-items: center; justify-content: center;
      z-index: 1000; padding: 1rem; backdrop-filter: blur(4px);
    }
    .modal-overlay.show { display: flex; }
    .modal {
      background: white; border-radius: 16px; width: 100%; max-width: 500px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: modalIn 0.3s ease;
    }
    @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    .modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid #E8E8E8; display: flex; justify-content: space-between; align-items: center; }
    .modal-header h3 { font-size: 1.1rem; font-weight: 600; }
    .modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #888; line-height: 1; }
    .modal-close:hover { color: var(--black); }
    .modal-body { padding: 1.5rem; }
    .signature-canvas-wrapper { border: 2px solid #E8E8E8; border-radius: 10px; overflow: hidden; background: #FAFAFA; }
    #signatureCanvas { width: 100%; height: 200px; display: block; cursor: crosshair; touch-action: none; }
    .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #E8E8E8; display: flex; gap: 0.75rem; justify-content: flex-end; }
    .btn { padding: 0.7rem 1.25rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit; border: none; }
    .btn-secondary { background: #E8E8E8; color: var(--black); }
    .btn-secondary:hover { background: #D0D0D0; }
    .btn-primary { background: var(--purple); color: white; }
    .btn-primary:hover { background: var(--purple-light); }

    /* ② reCAPTCHA wrapper — centered, with spacing */
    .recaptcha-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 1.5rem;
      margin-bottom: 0.25rem;
    }

    .submit-btn {
      width: 100%; padding: 1rem; background: linear-gradient(135deg, var(--yellow) 0%, #FFD633 100%);
      color: var(--black); border: none; border-radius: 12px; font-size: 1rem; font-weight: 700;
      cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 205, 0, 0.3); margin-top: 1.5rem;
    }
    .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 205, 0, 0.4); }
    .submit-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
    .footer { text-align: center; margin-top: 1.5rem; font-size: 0.8rem; color: #888; }
    .footer a { color: var(--purple); text-decoration: none; }
    .success-state { display: none; text-align: center; padding: 3rem 2rem; }
    .success-state.show { display: block; }
    .success-icon {
      width: 80px; height: 80px; background: linear-gradient(135deg, var(--green) 0%, #3DD9B0 100%);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.5rem; font-size: 2.5rem; color: white; box-shadow: 0 10px 30px rgba(40, 199, 157, 0.3);
    }
    .success-state h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
    .success-state p { color: #666; }
    .error-state { display: none; text-align: center; padding: 2rem; background: #FFF5F5; border-radius: 10px; margin-top: 1rem; }
    .error-state.show { display: block; }
    .error-state p { color: var(--red); font-weight: 500; }
    @media (max-width: 768px) {
      body { padding: 1rem 0.75rem; }
      .form-card { padding: 1.5rem; }
      .form-row, .form-row-3 { grid-template-columns: 1fr; }
      .signature-row { grid-template-columns: 1fr; }
      .radio-group { flex-direction: column; gap: 0.75rem; }
      .modal { margin: 1rem; max-width: calc(100% - 2rem); }
      .modal-footer { flex-direction: column; }
      .modal-footer .btn { width: 100%; }
      .recaptcha-wrapper { transform: scale(0.9); transform-origin: center; }
    }
.hidden { display: none; }
.util-mb { margin-bottom: 0.75rem; }
.util-sig-hint { font-size: 0.8rem; color: #888; margin-top: 0.75rem; text-align: center; }