:root{
    --bg:#f6f8fb;
    --card:#ffffff;
    --accent:#0f62fe;
    --muted:#6b7280;
    --success:#10b981;
    --danger:#ef4444;
    --radius:14px;
    --glass: rgba(15,98,254,0.06);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }

  /* Page layout */
  body{
    margin:0;
    background:linear-gradient(180deg,var(--bg),#ffffff 60%);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    color:#0f172a;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .container{
    width:100%;
    max-width:980px;
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:0 10px 30px rgba(2,6,23,0.08);
    padding:28px;
    border:1px solid rgba(2,6,23,0.04);
  }

  header.form-header{
    display:flex;
    gap:16px;
    align-items:center;
    margin-bottom:18px;
  }
  .badge{
    width:56px;
    height:56px;
    border-radius:12px;
    background:var(--glass);
    display:grid;
    place-items:center;
    font-weight:700;
    color:var(--accent);
    font-size:18px;
  }
  h1{ font-size:20px; margin:0; }
  p.lead{ margin:4px 0 0; color:var(--muted); font-size:14px; }

  form{
    margin-top:8px;
  }

  /* Grid */
  .grid{
    display:grid;
    gap:14px;
  }
  @media(min-width:800px){
    .grid.cols-2{
      grid-template-columns:1fr 1fr;
    }
    .grid.cols-3{
      grid-template-columns:1fr 1fr 1fr;
    }
  }

  /* Inputs */
  label{
    display:block;
    font-size:13px;
    margin-bottom:6px;
    color:#0f172a;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select{
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid rgba(15,23,42,0.08);
    background:linear-gradient(180deg, #fff, #fbfdff);
    font-size:14px;
    color:#0f172a;
    outline:none;
    transition:box-shadow .12s ease, border-color .12s ease, transform .06s ease;
  }
  input:focus, textarea:focus, select:focus{
    box-shadow: 0 6px 18px rgba(15,98,254,0.12);
    border-color:var(--accent);
    transform:translateY(-1px);
  }
  textarea{ min-height:110px; resize:vertical; }

  .hint{ font-size:12px; color:var(--muted); margin-top:6px; }

  /* Buttons */
  .form-actions{
    margin-top:16px;
    display:flex;
    gap:12px;
    align-items:center;
  }
  button.primary{
    background:var(--accent);
    color:white;
    padding:10px 16px;
    border-radius:10px;
    border:0;
    cursor:pointer;
    font-weight:600;
    box-shadow:0 8px 24px rgba(15,98,254,0.18);
  }
  button.secondary{
    background:transparent;
    color:var(--accent);
    padding:10px 14px;
    border-radius:10px;
    border:1px solid rgba(15,98,254,0.12);
    cursor:pointer;
  }

  /* Small helpers */
  .small{ font-size:13px; color:var(--muted); }
  .muted{ color:var(--muted); }
  .inline{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

  /* Feedback */
  .feedback{
    display:none;
    padding:12px 14px;
    border-radius:10px;
    font-weight:600;
    margin-left:auto;
  }
  .feedback.success{ background:rgba(16,185,129,0.08); color:var(--success); border:1px solid rgba(16,185,129,0.12); display:inline-block; }
  .feedback.error{ background:rgba(239,68,68,0.06); color:var(--danger); border:1px solid rgba(239,68,68,0.08); display:inline-block; }

  /* Fieldset grouping */
  fieldset{
    border:1px dashed rgba(2,6,23,0.04);
    padding:14px;
    border-radius:10px;
    margin:0;
  }
  legend{ font-size:13px; padding:0 6px; color:var(--muted); }

  /* Minor responsiveness */
  @media(max-width:640px){
    .form-actions{ flex-direction:column; align-items:stretch; }
    button.primary, button.secondary{ width:100%; }
  }

  /* accessibility focus visible strong outline for keyboard users */
  :focus{ outline-offset:3px; }
  :focus-visible{ outline:3px solid rgba(15,98,254,0.12); border-radius:8px; }