*{ box-sizing:border-box; }

    body{
      margin:0;
      background:#f6f8fa;
      color:#111827;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height:1.45;
    }

    /* scoped styles */
    .kcc-form-scope .wrap{
      max-width: 980px;
      margin: 0 auto;
    }

    .kcc-form-scope .page-title{
      font-size: 1.5rem;
      margin: 0 0 10px;
      letter-spacing: .2px;
    }

    .kcc-form-scope .sub{
      margin: 0 0 16px;
      color:#6b7280;
      font-size:.98rem;
    }

    .kcc-form-scope form{
      background:#ffffff;
      border:1px solid #d0d7de;
      border-radius:14px;
      padding:18px;
      box-shadow:0 10px 25px rgba(0,0,0,.06);
    }

    .kcc-form-scope .section{
      margin-top:18px;
      padding-top:16px;
      border-top:1px dashed #e5e7eb;
    }

    .kcc-form-scope .section:first-child{
      margin-top:0;
      padding-top:0;
      border-top:none;
    }

    .kcc-form-scope .section h2{
      margin:0 0 12px;
      font-size:1.15rem;
    }

    .kcc-form-scope .section .section-hint{
      margin:-6px 0 14px;
      color:#6b7280;
      font-size:.9rem;
    }

    .kcc-form-scope .grid{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
    }

    @media (min-width:780px){
      .kcc-form-scope .grid{ grid-template-columns:1fr 1fr; }
    }

    .kcc-form-scope .field{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:0;
    }

    .kcc-form-scope .field.full{ grid-column:1 / -1; }

    .kcc-form-scope label{
      font-weight:650;
      font-size:.95rem;
    }

    .kcc-form-scope .req{
      color:#b00020;
      margin-left:4px;
    }

    .kcc-form-scope .hint{
      color:#6b7280;
      font-size:.85rem;
      margin-top:-2px;
    }

    .kcc-form-scope input,
    .kcc-form-scope select,
    .kcc-form-scope textarea{
      width:100%;
      border:1px solid #d0d7de;
      border-radius:12px;
      padding:10px 12px;
      font-size:.98rem;
      outline:none;
      background:#ffffff;
    }

    .kcc-form-scope textarea{
      resize:vertical;
      min-height:90px;
    }

    .kcc-form-scope input:focus,
    .kcc-form-scope select:focus,
    .kcc-form-scope textarea:focus{
      border-color:#4c8bf5;
      box-shadow:0 0 0 3px rgba(76,139,245,.18);
    }

    .kcc-form-scope .error{
      display:none;
      color:#b00020;
      font-size:.88rem;
    }

    .kcc-form-scope .error.show{ display:block; }

    .kcc-form-scope .invalid{
      border-color:#b00020 !important;
      box-shadow:0 0 0 3px rgba(176,0,32,.12) !important;
    }

    /* checkbox / radio blocks */
    .kcc-form-scope .option-list{
      border:1px solid #d0d7de;
      border-radius:12px;
      padding:10px 12px;
      display:flex;
      flex-direction:column;
      gap:10px;
      background:#ffffff;
    }

    .kcc-form-scope .option{
      display:flex;
      align-items:flex-start;
      gap:10px;
      font-size:.95rem;
      color:#111827;
    }

    .kcc-form-scope .option input{
      width:18px;
      height:18px;
      margin-top:2px;
    }

    .kcc-form-scope .actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:16px;
    }

    .kcc-form-scope button{
      border:0;
      border-radius:12px;
      padding:10px 14px;
      cursor:pointer;
      font-weight:650;
      font-size:.95rem;
    }

    .kcc-form-scope button[type="submit"]{
      background:#1f6feb;
      color:#ffffff;
    }

    .kcc-form-scope button[type="submit"]:hover{
      background:#1859c7;
    }

    .kcc-form-scope button[type="reset"]{
      background:#f3f4f6;
      color:#111827;
    }

    .kcc-form-scope button[type="reset"]:hover{
      background:#e5e7eb;
    }

    .kcc-form-scope .success{
      display:none;
      margin-top:14px;
      padding:12px;
      border-radius:12px;
      background:#eaf7ee;
      color:#0a7a2f;
      border:1px solid #b7e3c3;
    }

    .kcc-form-scope .links{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      font-size:.92rem;
    }

    .kcc-form-scope .links a{
      color:#1f6feb;
      text-decoration:none;
    }

    .kcc-form-scope .links a:hover{
      text-decoration:underline;
    }