.form-shell{
    max-width:720px;margin:0 auto;
    background:linear-gradient(180deg,var(--card-2),var(--card));
    border:1px solid var(--line-2);border-radius:var(--radius-lg);
    box-shadow:var(--shadow);overflow:hidden;position:relative;
  }
  .form-shell::before{
    content:"";position:absolute;inset:-1px;border-radius:var(--radius-lg);pointer-events:none;
    background:linear-gradient(160deg,rgba(34,197,94,.35),transparent 45%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
  }
  .form-head{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:24px 28px 18px;border-bottom:1px solid var(--line);
  }
  .form-head h2{font-size:21px;letter-spacing:-.5px;margin-bottom:3px}
  .form-head p{color:var(--muted);font-size:13.5px;margin:0}
  .progress{height:4px;background:rgba(255,255,255,.06)}
  .progress .bar{height:100%;width:33.33%;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .32s ease}
  .form-body{padding:28px}

  .q{display:none;animation:fade .28s ease}
  .q.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .step-label{color:var(--brand);font-weight:800;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
  .q h3{font-size:23px;letter-spacing:-.6px;margin-bottom:6px}
  .hint{color:var(--muted);font-size:14.5px;margin-bottom:20px}

  .field{margin-bottom:16px}
  .field label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
  .txt{
    width:100%;background:rgba(0,0,0,.28);border:1px solid var(--line-2);
    color:var(--text);font-family:inherit;font-size:15.5px;
    padding:14px 16px;border-radius:12px;transition:border-color .18s,box-shadow .18s;
  }
  .txt::placeholder{color:#5f7396}
  .txt:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(34,197,94,.16)}
  textarea.txt{min-height:104px;resize:vertical;line-height:1.55}
  .txt[aria-invalid="true"]{border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.15)}
  .err{display:none;color:#fca5a5;font-size:13px;margin-top:6px;font-weight:600}
  .err.show{display:block}

  /* radio / choice cards */
  .opt{
    display:block;position:relative;cursor:pointer;
    background:rgba(0,0,0,.22);border:1px solid var(--line-2);border-radius:14px;
    padding:16px 18px 16px 52px;margin-bottom:12px;transition:.18s;
  }
  .opt:hover{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.05)}
  .opt input{position:absolute;opacity:0;width:1px;height:1px}
  .opt .mark{
    position:absolute;left:18px;top:50%;transform:translateY(-50%);
    width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);transition:.18s;
  }
  .opt .mark::after{
    content:"";position:absolute;inset:3px;border-radius:50%;background:var(--brand);
    transform:scale(0);transition:transform .18s;
  }
  .opt input:checked ~ .mark{border-color:var(--brand)}
  .opt input:checked ~ .mark::after{transform:scale(1)}
  .opt input:checked ~ .t{color:var(--text)}
  .opt:has(input:checked){border-color:var(--brand);background:rgba(34,197,94,.08)}
  .opt input:focus-visible ~ .mark{outline:3px solid var(--accent);outline-offset:3px}
  .opt .t{display:block;font-weight:700;font-size:16px}
  .opt .d{display:block;color:var(--muted);font-weight:400;font-size:14px;margin-top:2px}

  /* colour swatches — real radios, keyboard accessible */
  .swatches{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:6px}
  .sw{position:relative;cursor:pointer}
  .sw input{position:absolute;opacity:0;width:1px;height:1px}
  .sw .chip{
    display:block;width:52px;height:52px;border-radius:14px;
    border:2px solid transparent;box-shadow:0 0 0 1px var(--line-2);transition:.18s;
  }
  .sw .nm{display:block;text-align:center;font-size:11.5px;color:var(--muted);margin-top:6px}
  .sw:hover .chip{transform:translateY(-2px)}
  .sw input:checked ~ .chip{border-color:var(--bg);box-shadow:0 0 0 3px var(--brand);transform:translateY(-2px)}
  .sw input:checked ~ .nm{color:var(--text);font-weight:700}
  .sw input:focus-visible ~ .chip{outline:3px solid var(--accent);outline-offset:3px}

  /* optional details disclosure */
  .more-toggle{
    width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px dashed var(--line-2);
    color:var(--text);font-family:inherit;font-weight:700;font-size:14.5px;
    padding:14px 16px;border-radius:12px;cursor:pointer;margin-top:20px;transition:.18s;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .more-toggle:hover{border-color:var(--brand);color:#86efac}
  .more-toggle .sign{color:var(--brand);font-size:18px;font-weight:800}
  .more-toggle .cap{font-weight:400;color:var(--muted);font-size:13px;display:block;margin-top:2px}
  .more-panel{display:none;margin-top:16px;padding-top:4px;border-top:1px solid var(--line)}
  .more-panel.open{display:block;animation:fade .28s ease}

  .upload-note{
    display:flex;gap:11px;align-items:flex-start;
    background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.28);
    border-radius:12px;padding:14px 16px;margin-top:16px;font-size:14px;color:var(--text-dim);
  }

  /* ===== FILE UPLOAD ===== */
  .drop{
    position:relative;display:block;width:100%;cursor:pointer;
    background:rgba(0,0,0,.22);border:2px dashed var(--line-2);border-radius:14px;
    padding:26px 18px;text-align:center;transition:.18s;
  }
  .drop:hover,.drop.over{border-color:var(--brand);background:rgba(34,197,94,.06)}
  .drop input[type=file]{position:absolute;opacity:0;width:1px;height:1px}
  .drop:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
  .drop .ic{font-size:26px;display:block;margin-bottom:8px}
  .drop b{display:block;font-size:15.5px;margin-bottom:3px}
  .drop .sm{color:var(--muted);font-size:13px}

  .files{list-style:none;margin-top:14px;display:grid;gap:9px}
  .file{
    display:flex;align-items:center;gap:12px;
    background:rgba(0,0,0,.26);border:1px solid var(--line-2);
    border-radius:12px;padding:10px 12px;
  }
  .file .thumb{
    width:42px;height:42px;flex:none;border-radius:9px;overflow:hidden;
    background:var(--bg-soft);display:grid;place-items:center;
    font-size:11px;font-weight:800;color:var(--muted);
  }
  .file .thumb img{width:100%;height:100%;object-fit:cover}
  .file .fi{flex:1;min-width:0}
  .file .fn{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .file .fs{color:var(--muted);font-size:12.5px}
  .file .fs.bad{color:#fca5a5}
  .file .fs.ok{color:#86efac}
  .file .prog{height:4px;background:rgba(255,255,255,.08);border-radius:99px;margin-top:6px;overflow:hidden}
  .file .prog i{display:block;height:100%;width:0;background:var(--brand);transition:width .2s}
  .file .rm{
    flex:none;background:none;border:1px solid var(--line-2);color:var(--muted);
    font-family:inherit;font-size:17px;line-height:1;cursor:pointer;
    width:34px;height:34px;border-radius:9px;transition:.18s;
  }
  .file .rm:hover{border-color:#f87171;color:#fca5a5}

  .form-nav{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:20px 28px;border-top:1px solid var(--line);background:rgba(0,0,0,.18);
  }
  .btn-sm{
    font-family:inherit;font-weight:800;font-size:15px;padding:13px 22px;
    border-radius:12px;cursor:pointer;border:none;transition:.2s;
  }
  .btn-back{background:transparent;color:var(--muted);border:1px solid var(--line-2)}
  .btn-back:hover{color:var(--text);border-color:var(--line-2)}
  .btn-next{background:var(--brand);color:#04120a;box-shadow:var(--shadow-brand)}
  .btn-next:hover{background:var(--brand-dark);transform:translateY(-2px)}
  .form-foot{text-align:center;color:var(--muted);font-size:13px;margin-top:16px}