*{margin:0;padding:0;box-sizing:border-box}

/* === Base === */
body{background:#0a0a0a;color:#c8c8c8;font-family:'SF Mono','Fira Code','Cascadia Code',monospace;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.container{max-width:480px;width:100%}

/* === Header with stagger animation === */
h1{color:#00ff88;font-size:1.6rem;margin-bottom:.4rem;font-weight:700;letter-spacing:-.02em;opacity:0;animation:fadeUp .5s ease forwards}
p.sub{color:#555;font-size:.82rem;margin-bottom:2.2rem;line-height:1.5;opacity:0;animation:fadeUp .5s ease .1s forwards}

/* === Form fields with staggered entrance === */
.field{margin-bottom:1.4rem;position:relative;opacity:0;animation:fadeUp .4s ease forwards}
.field:nth-child(1){animation-delay:.15s}
.field:nth-child(2){animation-delay:.25s}
.field:nth-child(3){animation-delay:.35s}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

label{display:block;color:#888;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.45rem;font-weight:500;transition:color .3s}
label .req{color:#00ff88;margin-left:.15em}

/* Field focus → label highlight */
.field.focused label{color:#00ff88}

input,textarea{width:100%;background:#111;border:1px solid #222;color:#e0e0e0;font-family:inherit;font-size:1rem;padding:.75rem .9rem;border-radius:8px;outline:none;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease,transform .15s ease}
input:focus,textarea:focus{border-color:#00ff88;box-shadow:0 0 0 3px #00ff8818;background:#0d0d0d}
input.valid,textarea.valid{border-color:#00ff8866}
input.invalid,textarea.invalid{border-color:#ff4444;box-shadow:0 0 0 3px #ff444418}
input.invalid:focus,textarea.invalid:focus{border-color:#ff4444;box-shadow:0 0 0 3px #ff444425}
textarea{resize:vertical;min-height:140px}

/* === Inline error messages === */
.field-error{color:#ff4444;font-size:.72rem;margin-top:.35rem;display:none;line-height:1.4;padding-left:.1rem}
.field-error::before{content:'⚠ ';font-size:.65rem}
.field.has-error .field-error{display:block;animation:slideShake .35s ease}

@keyframes slideShake{
  0%{opacity:0;transform:translateX(-6px)}
  40%{opacity:1;transform:translateX(4px)}
  70%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}

/* Shake animation for invalid fields */
.field.shake input,.field.shake textarea{animation:fieldShake .4s ease}
@keyframes fieldShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
}

input::placeholder,textarea::placeholder{color:#333;transition:color .2s}
input:focus::placeholder,textarea:focus::placeholder{color:#444}

.char-count{text-align:right;font-size:.65rem;color:#333;margin-top:.25rem;transition:color .3s}
.char-count.active{color:#555}
.char-count.warn{color:#ff8800}
.char-count.danger{color:#ff4444}

/* === Submit button === */
button[type="submit"]{margin-top:.6rem;width:100%;background:#00ff88;color:#0a0a0a;border:none;padding:.85rem;font-family:inherit;font-size:.95rem;font-weight:700;border-radius:8px;cursor:pointer;transition:background .2s,opacity .2s,transform .15s,box-shadow .2s;position:relative;letter-spacing:.01em;opacity:0;animation:fadeUp .4s ease .45s forwards}
button[type="submit"]:hover{background:#00e67a;box-shadow:0 4px 20px #00ff8830}
button[type="submit"]:active{transform:scale(.98)}
button[type="submit"]:focus-visible{outline:2px solid #00ff88;outline-offset:3px}
button[type="submit"]:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* Spinner */
button .spinner{display:inline-block;width:15px;height:15px;border:2px solid #0a0a0a40;border-top-color:#0a0a0a;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:.45rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* === Status message === */
.msg{margin-top:1.3rem;padding:.8rem 1rem;border-radius:8px;font-size:.84rem;display:none;line-height:1.5;overflow:hidden}
.msg.ok{display:block;background:#00ff8812;color:#00ff88;border:1px solid #00ff8830;animation:msgIn .4s ease}
.msg.err{display:block;background:#ff444412;color:#ff5555;border:1px solid #ff444430;animation:msgIn .4s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px);max-height:0}to{opacity:1;transform:translateY(0);max-height:200px}}

/* === Honeypot === */
.honey{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* === Links === */
a{color:#00ff88;text-decoration:none;transition:opacity .2s}
a:hover{opacity:.8}
a:focus-visible{outline:2px solid #00ff88;outline-offset:2px;border-radius:2px}
.back{margin-top:2.5rem;text-align:center;opacity:0;animation:fadeUp .4s ease .55s forwards}
.back a{font-size:.8rem;color:#444;transition:color .3s}
.back a:hover{color:#00ff88}

/* === Success state === */
.success-state{display:none;text-align:center;padding:2rem 0}
.success-state.visible{display:block;animation:successIn .5s ease}
@keyframes successIn{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}

.success-state .check-circle{width:72px;height:72px;margin:0 auto 1.2rem;position:relative}
.success-state .check-circle svg{width:72px;height:72px}
.success-state .check-circle .circle{fill:none;stroke:#00ff88;stroke-width:2;stroke-dasharray:166;stroke-dashoffset:166;animation:circleIn .6s ease .2s forwards}
.success-state .check-circle .tick{fill:none;stroke:#00ff88;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:tickIn .3s ease .7s forwards}
@keyframes circleIn{to{stroke-dashoffset:0}}
@keyframes tickIn{to{stroke-dashoffset:0}}

.success-state h2{color:#00ff88;font-size:1.2rem;margin-bottom:.6rem;font-weight:700}
.success-state p{color:#666;font-size:.84rem;line-height:1.6;margin-bottom:1.5rem}
.success-state button{max-width:220px;margin:0 auto;display:block;background:transparent;border:1px solid #333;color:#888;font-size:.82rem;padding:.6rem 1.2rem;border-radius:8px;cursor:pointer;font-family:inherit;transition:border-color .25s,color .25s,transform .15s}
.success-state button:hover{border-color:#00ff88;color:#00ff88}
.success-state button:active{transform:scale(.97)}
.success-state button:focus-visible{outline:2px solid #00ff88;outline-offset:3px}

/* === Form hide/show transition === */
form{transition:opacity .3s ease,transform .3s ease}
form.hiding{opacity:0;transform:translateY(-10px);pointer-events:none}

/* === Keyboard hint === */
.kb-hint{text-align:center;margin-top:1rem;font-size:.65rem;color:#2a2a2a;transition:color .3s;opacity:0;animation:fadeUp .4s ease .6s forwards}
.kb-hint kbd{background:#161616;border:1px solid #2a2a2a;border-radius:3px;padding:.1em .35em;font-family:inherit;font-size:.6rem;margin:0 .1em}

/* === Network error state === */
.error-state{display:none;text-align:center;padding:2rem 0}
.error-state.visible{display:block;animation:successIn .5s ease}
.error-state .error-icon{font-size:2.5rem;margin-bottom:1rem;display:block}
.error-state h2{color:#ff5555;font-size:1.1rem;margin-bottom:.6rem;font-weight:700}
.error-state p{color:#666;font-size:.84rem;line-height:1.6;margin-bottom:1.5rem}
.error-state button{max-width:220px;margin:0 auto;display:block;background:transparent;border:1px solid #ff444440;color:#ff5555;font-size:.82rem;padding:.6rem 1.2rem;border-radius:8px;cursor:pointer;font-family:inherit;transition:border-color .25s,color .25s}
.error-state button:hover{border-color:#ff5555;color:#ff7777}

/* === Progress bar on submit === */
.progress-bar{position:fixed;top:0;left:0;height:2px;background:#00ff88;width:0;transition:width .3s ease;z-index:9999;box-shadow:0 0 8px #00ff8880}
.progress-bar.active{animation:progressPulse 2s ease infinite}
@keyframes progressPulse{0%,100%{opacity:1}50%{opacity:.7}}

/* === Responsive === */
@media(max-width:500px){
  body{padding:1.25rem .9rem;align-items:flex-start;padding-top:2.5rem}
  h1{font-size:1.4rem}
  p.sub{margin-bottom:1.8rem}
  .field{margin-bottom:1.3rem}
  input,textarea{font-size:16px;padding:.8rem .9rem}
  button[type="submit"]{padding:.9rem;font-size:1rem}
  .kb-hint{display:none}
}
@media(min-width:501px) and (max-width:768px){
  body{padding:2rem 1.5rem}
  .container{max-width:520px}
}
@media(min-width:769px){
  .container{padding:2rem}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}