:root{
    --bg:#020617; --navy:#0f172a;
    --blue:#2563eb; --blue-2:#3b82f6; --cyan:#38bdf8;
    --red:#dc2626; --red-2:#ef4444; --orange:#f97316;
    --white:#fff; --muted:#cbd5e1; --soft:rgba(255,255,255,.72); --faint:rgba(255,255,255,.45);
    --line:rgba(59,130,246,.28); --line-2:rgba(255,255,255,.14);
    --blue-glow:0 0 24px rgba(59,130,246,.50); --red-glow:0 0 24px rgba(239,68,68,.48);
    --ok:#06c755; --err:#f87171;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Sarabun',system-ui,-apple-system,'Segoe UI',sans-serif;
    color:var(--white); line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden;
    background:
      radial-gradient(circle at 12% 6%, rgba(37,99,235,.32), transparent 30rem),
      radial-gradient(circle at 92% 3%, rgba(220,38,38,.24), transparent 28rem),
      linear-gradient(180deg,#020617 0%,#071129 42%,#020617 100%);
    background-attachment:fixed;
  }
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:46px 46px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 75%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 75%);}
  .wrap{max-width:640px;margin:0 auto;padding:0 16px 72px;position:relative;z-index:1}
  /* header / hero */
  header{padding:40px 20px 30px;text-align:center;position:relative;z-index:1;
    max-width:560px;margin:0 auto}
  .brand{display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
  .brand img{width:80px;height:80px;object-fit:contain;display:block;
    filter:drop-shadow(0 6px 16px rgba(37,99,235,.32)) drop-shadow(0 0 18px rgba(220,38,38,.20))}
  @media (max-width:640px){ .brand img{width:68px;height:68px} }

  header h1{font-family:'Prompt';font-weight:900;font-size:clamp(26px,5.4vw,34px);
    line-height:1.15;margin:18px 0 10px;letter-spacing:-.025em;
    text-shadow:0 0 28px rgba(59,130,246,.28)}
  header h1 span{display:inline-block;background:linear-gradient(90deg,var(--blue-2),var(--cyan) 50%,var(--red-2));
    -webkit-background-clip:text;background-clip:text;color:transparent}

  header p{margin:0 auto;color:var(--soft);font-size:14px;line-height:1.65;
    max-width:430px;font-weight:500}

  /* subtle gradient hairline divider between hero and form */
  header::after{content:"";display:block;width:120px;height:2px;
    margin:26px auto 0;border-radius:2px;
    background:linear-gradient(90deg,transparent,rgba(59,130,246,.55),rgba(239,68,68,.45),transparent)}
  /* stepper */
  .stepper{display:flex;justify-content:space-between;gap:8px;margin:24px 0 4px;position:relative}
  .stepper .st{flex:1;text-align:center;font-size:11.5px;color:var(--faint);position:relative}
  .stepper .st .n{width:34px;height:34px;border-radius:50%;background:rgba(2,6,23,.7);border:1.5px solid var(--line);
    display:flex;align-items:center;justify-content:center;margin:0 auto 7px;font-weight:800;font-family:'Prompt';color:var(--faint);transition:.2s;position:relative;z-index:1}
  .stepper .st.active .n{background:linear-gradient(135deg,var(--blue),var(--blue-2) 45%,var(--red));border-color:transparent;color:#fff;box-shadow:0 10px 26px rgba(220,38,38,.4),0 0 20px rgba(59,130,246,.45)}
  .stepper .st.done .n{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 0 16px rgba(6,199,85,.4)}
  .stepper .st.active span,.stepper .st.done span{color:#fff;font-weight:700}
  .stepper:before{content:"";position:absolute;top:17px;left:14%;right:14%;height:2px;background:var(--line-2);z-index:0}
  /* card */
  .card{padding:20px 18px;background:rgba(15,23,42,.78);border:1px solid var(--line);border-radius:18px;
    box-shadow:0 14px 36px rgba(0,0,0,.32),0 0 18px rgba(59,130,246,.10);
    backdrop-filter:blur(6px);margin-top:0}
  .sec{font-family:'Prompt';font-weight:800;font-size:15px;color:#fff;margin:2px 0 14px;
    display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
  .sec:before{content:"";width:4px;height:17px;border-radius:3px;
    background:linear-gradient(var(--blue-2),var(--red-2));box-shadow:0 0 10px rgba(59,130,246,.5)}
  .sec:first-child{margin-top:2px}
  .field{margin-bottom:15px}
  label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--muted)}
  label .req{color:var(--red-2)}
  input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
    width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(2,6,23,.58);
    color:#fff;font-family:inherit;font-size:14.5px;transition:border-color .15s,background .15s,box-shadow .15s}
  input::placeholder,textarea::placeholder{color:rgba(255,255,255,.36)}
  select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2393c5fd' stroke-width='2'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:36px}
  select option{background:#0b1326;color:#fff}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue-2);background:rgba(2,6,23,.85);
    box-shadow:0 0 0 4px rgba(59,130,246,.14),0 0 18px rgba(59,130,246,.28)}
  textarea{resize:vertical;min-height:90px}
  .counter{float:right;font-size:11px;color:var(--faint)}
  input.bad,select.bad,textarea.bad{border-color:var(--err)!important;box-shadow:0 0 0 3px rgba(248,113,113,.14),0 0 16px rgba(248,113,113,.22)!important}
  .errmsg{color:var(--err);font-size:11.5px;margin-top:5px;display:none}
  /* file */
  .file{display:flex;align-items:center;gap:10px;border:1px dashed var(--line);border-radius:14px;padding:13px 15px;cursor:pointer;background:rgba(2,6,23,.5);font-size:13.5px;color:var(--faint);transition:.15s}
  .file:hover{border-color:var(--blue-2);color:var(--cyan);box-shadow:0 0 16px rgba(59,130,246,.18)}
  .file input{display:none}
  .file .fname{color:#fff;font-weight:500}
  .filePrev{margin-top:8px;display:none}
  .filePrev img{max-height:130px;border-radius:11px;border:1px solid var(--line)}
  /* chips */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  /* Category grid mirrors the recruit form: 4 columns on desktop,
     2 on small screens so the chip text stays readable. */
  #categories{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media (max-width:640px){ #categories{grid-template-columns:repeat(2,minmax(0,1fr))} }
  .chip{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:13px;padding:12px 13px;cursor:pointer;font-size:13.5px;background:rgba(2,6,23,.5);transition:.14s;color:var(--muted)}
  .chip:hover{border-color:var(--blue-2);color:#fff}
  .chip input{accent-color:var(--blue-2);width:16px;height:16px}
  .chip.sel{border-color:transparent;color:#fff;background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(239,68,68,.18));box-shadow:0 0 0 1px rgba(59,130,246,.5),0 0 18px rgba(59,130,246,.28)}
  .radio-row{display:flex;gap:10px}
  .radio-row .chip{flex:1;justify-content:center;font-weight:600}
  /* buttons */
  .nav{display:flex;gap:10px;margin-top:24px}
  .btn{flex:1;min-height:52px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.18);font-family:'Prompt';font-weight:800;font-size:15px;cursor:pointer;transition:transform .18s,box-shadow .18s,filter .18s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .btn-primary{color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-2) 45%,var(--red));box-shadow:0 18px 40px rgba(220,38,38,.36),0 0 18px rgba(59,130,246,.28),inset 0 1px rgba(255,255,255,.18)}
  .btn-primary:hover{transform:translateY(-2px);filter:saturate(1.1);box-shadow:0 24px 56px rgba(220,38,38,.52),0 0 26px rgba(59,130,246,.42)}
  .btn-primary:active{transform:translateY(0)}
  .btn-submit{animation:ctaPulse 2.4s ease-in-out infinite}
  .btn-ghost{background:rgba(2,6,23,.4);border:1px solid var(--line-2);color:var(--soft)}
  .btn-ghost:hover{border-color:var(--blue-2);color:#fff}
  .step{display:none;animation:fadeUp .4s ease both}
  .step.show{display:flex;flex-direction:column;gap:14px;margin-top:14px}
  .note{background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.24);border-radius:14px;padding:13px 15px;font-size:12.5px;color:var(--cyan);margin-bottom:10px;box-shadow:0 0 18px rgba(56,189,248,.08)}
  .confirm{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;background:rgba(2,6,23,.5);color:var(--muted);border:1px solid var(--line);border-radius:14px;padding:15px}
  .confirm input{margin-top:3px;accent-color:var(--red-2);width:18px;height:18px}
  .confirm a{color:var(--cyan);font-weight:600}
  /* success */
  .done-screen{display:none;text-align:center;padding:56px 18px;animation:fadeUp .5s ease both}
  .done-screen .ic{width:90px;height:90px;border-radius:50%;background:var(--ok);margin:0 auto 22px;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 36px rgba(6,199,85,.45),0 0 30px rgba(6,199,85,.4)}
  .done-screen h2{font-family:'Prompt';font-size:25px;margin:0 0 8px;color:#fff;text-shadow:0 0 22px rgba(6,199,85,.4)}
  .done-screen p{color:var(--soft);font-size:14px;margin:0 auto;max-width:440px}
  .summary{text-align:left;background:rgba(15,23,42,.82);border:1px solid var(--line);border-radius:18px;padding:18px;margin:26px auto 0;max-width:480px;font-size:13px;box-shadow:0 0 24px rgba(59,130,246,.12)}
  .summary div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-2)}
  .summary div:last-child{border:0}
  .summary span:first-child{color:var(--faint)}
  .summary span:last-child{font-weight:600;text-align:right;color:#fff}
  footer{text-align:center;color:var(--faint);font-size:11.5px;padding:28px 16px 8px;position:relative;z-index:1}
  @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes ctaPulse{0%,100%{box-shadow:0 18px 48px rgba(220,38,38,.42),0 0 0 rgba(239,68,68,0)}50%{box-shadow:0 22px 64px rgba(239,68,68,.58),0 0 34px rgba(239,68,68,.42)}}

  /* ============ Auth Gate (Landing → Phone → OTP → Password) ============ */
  body.locked > header, body.locked > .wrap, body.locked > footer{display:none}
  body:not(.locked) > .auth-gate{display:none}

  .auth-gate{min-height:100dvh;display:grid;place-items:center;padding:22px;position:relative;z-index:1}
  .auth-card{position:relative;z-index:1;width:min(100%,430px);padding:34px 26px 26px;
    border:1px solid rgba(59,130,246,.34);border-radius:28px;text-align:center;
    background:linear-gradient(145deg,rgba(15,23,42,.94),rgba(15,23,42,.78)),
      radial-gradient(circle at top left,rgba(59,130,246,.18),transparent 45%),
      radial-gradient(circle at bottom right,rgba(239,68,68,.16),transparent 48%);
    box-shadow:0 28px 80px rgba(0,0,0,.46),0 0 24px rgba(59,130,246,.5),inset 0 1px rgba(255,255,255,.08);
    animation:fadeUp .35s ease both}
  .auth-card::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
    background:linear-gradient(135deg,rgba(59,130,246,.6),transparent 32%,rgba(239,68,68,.55));
    opacity:.44;filter:blur(16px)}
  .auth-card[hidden]{display:none}

  .auth-logo{width:104px;height:104px;margin:0 auto 14px;display:grid;place-items:center;
    filter:drop-shadow(0 0 22px rgba(59,130,246,.58)) drop-shadow(0 0 18px rgba(239,68,68,.42))}
  .auth-logo img{width:100%;height:100%;object-fit:contain}

  .auth-pill{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 14px;
    border-radius:999px;color:#fff;font-size:11.5px;font-weight:900;letter-spacing:.03em;
    border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(135deg,#06c755,#16a34a);
    box-shadow:0 0 24px rgba(34,197,94,.46)}
  .auth-pill .dot{width:7px;height:7px;border-radius:999px;background:#fff;box-shadow:0 0 14px #fff}

  .auth-card h2{margin:14px 0 6px;font-family:'Prompt';font-size:clamp(24px,6.5vw,32px);
    line-height:1.1;font-weight:900;letter-spacing:-.03em;color:#fff}
  .auth-card .subtitle{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.55}

  .auth-input{width:100%;min-height:54px;padding:0 16px;border-radius:16px;
    border:1px solid rgba(59,130,246,.30);background:rgba(2,6,23,.72);color:#fff;
    font-size:16px;font-weight:600;outline:none;transition:border-color .15s,box-shadow .15s;
    text-align:center;letter-spacing:.04em}
  .auth-input::placeholder{color:rgba(255,255,255,.35);font-weight:500;letter-spacing:.02em}
  .auth-input:focus{border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(59,130,246,.18)}
  .auth-input.otp{font-size:22px;letter-spacing:.5em;padding-left:.5em}
  .auth-input + .auth-input{margin-top:10px}

  .auth-primary{width:100%;min-height:54px;margin-top:14px;display:inline-flex;align-items:center;
    justify-content:center;gap:10px;padding:0 16px;border:1px solid rgba(59,130,246,.45);
    border-radius:16px;color:#fff;font-size:15px;font-weight:900;cursor:pointer;
    background:linear-gradient(135deg,rgba(37,99,235,.30),rgba(239,68,68,.18)),rgba(2,6,23,.72);
    box-shadow:0 0 24px rgba(59,130,246,.28),inset 0 1px rgba(255,255,255,.1);
    transition:transform .18s,box-shadow .18s,border-color .18s}
  .auth-primary:hover{transform:translateY(-2px);border-color:rgba(239,68,68,.56);
    box-shadow:0 0 34px rgba(59,130,246,.46),0 0 22px rgba(239,68,68,.34)}
  .auth-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
  .auth-primary svg{flex-shrink:0}

  .auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0;
    color:rgba(255,255,255,.5);font-size:11.5px;font-weight:700;letter-spacing:.14em}
  .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}

  .auth-err{margin-top:10px;font-size:12.5px;color:var(--err);min-height:18px;
    text-align:left;padding:0 4px}

  .auth-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2);
    color:rgba(255,255,255,.55);font-size:11.5px;line-height:1.7}
  .auth-foot a{color:#93c5fd;font-weight:800;text-decoration:none}
  .auth-foot a:hover{text-decoration:underline}

  .auth-back{display:inline-flex;align-items:center;gap:6px;background:transparent;
    border:0;color:rgba(255,255,255,.55);font-size:12.5px;font-weight:700;
    margin:-8px 0 8px;padding:6px 8px;cursor:pointer;border-radius:8px;align-self:flex-start;
    transition:color .15s,background .15s}
  .auth-back:hover{color:#fff;background:rgba(255,255,255,.05)}
  .auth-back-wrap{display:flex;justify-content:flex-start;margin-bottom:4px}

  .auth-recap{color:#93c5fd;font-weight:800}
  .auth-resend{margin-top:14px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.6)}
  .auth-resend button{background:transparent;border:0;color:#93c5fd;font-weight:800;
    cursor:pointer;padding:4px 8px;font-size:12.5px;font-family:inherit}
  .auth-resend button:disabled{color:rgba(255,255,255,.35);cursor:not-allowed}