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

:root{
  --font:-apple-system,BlinkMacSystemFont,"Inter","SF Pro Display","Segoe UI",system-ui,sans-serif;
  --bg:#f2f2f7;
  --glass:rgba(255,255,255,.45);
  --glass-border:rgba(255,255,255,.6);
  --glass-shadow:0 8px 40px rgba(0,0,0,.06);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.45);
  --blur:48px;
  --text-1:#1d1d1f;
  --text-2:#6e6e73;
  --text-3:#aeaeb2;
  --accent:#0071e3;
  --accent-h:#0077ed;
  --input-bg:rgba(255,255,255,.5);
  --input-border:rgba(0,0,0,.06);
  --input-focus:rgba(0,113,227,.35);
  --dock-bg:rgba(255,255,255,.55);
  --dock-border:rgba(255,255,255,.65);
  --dock-hover:rgba(0,0,0,.05);
  --toast-ok:rgba(52,199,89,.92);
  --toast-err:rgba(255,59,48,.92);
  --toast-info:rgba(0,113,227,.92);
  --blob-1:#a5b4fc;--blob-2:#f9a8d4;--blob-3:#6ee7b7;--blob-4:#fcd34d;
}

[data-theme="dark"]{
  --bg:#000;
  --glass:rgba(44,44,46,.4);
  --glass-border:rgba(255,255,255,.06);
  --glass-shadow:0 8px 40px rgba(0,0,0,.3);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.05);
  --text-1:#f5f5f7;
  --text-2:#98989d;
  --text-3:#48484a;
  --accent:#0a84ff;
  --accent-h:#409cff;
  --input-bg:rgba(58,58,60,.35);
  --input-border:rgba(255,255,255,.04);
  --input-focus:rgba(10,132,255,.35);
  --dock-bg:rgba(44,44,46,.55);
  --dock-border:rgba(255,255,255,.06);
  --dock-hover:rgba(255,255,255,.06);
  --blob-1:#312e81;--blob-2:#831843;--blob-3:#064e3b;--blob-4:#78350f;
}

html{font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{
  min-height:100dvh;background:var(--bg);color:var(--text-1);
  display:flex;align-items:center;justify-content:center;
  padding:24px;padding-bottom:100px;overflow-x:hidden;
  transition:background-color .4s ease;
}

/* ── Blobs ── */
.blobs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{
  position:absolute;border-radius:50%;
  filter:blur(100px);opacity:.55;
  animation:drift 18s ease-in-out infinite alternate;
}
.blob:nth-child(1){width:420px;height:420px;background:var(--blob-1);top:-10%;left:-5%;animation-duration:20s}
.blob:nth-child(2){width:360px;height:360px;background:var(--blob-2);top:50%;right:-8%;animation-duration:24s;animation-delay:-4s}
.blob:nth-child(3){width:300px;height:300px;background:var(--blob-3);bottom:-5%;left:30%;animation-duration:22s;animation-delay:-8s}
.blob:nth-child(4){width:260px;height:260px;background:var(--blob-4);top:20%;left:55%;animation-duration:26s;animation-delay:-12s}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(60px,-40px) scale(1.08)}
  66%{transform:translate(-30px,50px) scale(.95)}
  100%{transform:translate(40px,30px) scale(1.05)}
}

/* ── Card ── */
.card{
  position:relative;z-index:1;
  width:100%;max-width:460px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
  backdrop-filter:blur(var(--blur)) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:28px;padding:48px 40px;
  box-shadow:var(--glass-shadow),var(--glass-inner);
  animation:cardIn .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(.97)}}
.card h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.card .sub{font-size:15px;color:var(--text-2);margin-bottom:36px}

/* ── Form ── */
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:8px}
.field input,.field textarea{
  width:100%;font-family:var(--font);font-size:15px;color:var(--text-1);
  background:var(--input-bg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--input-border);border-radius:14px;
  padding:14px 16px;outline:none;resize:vertical;
  transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus{border-color:var(--input-focus);box-shadow:0 0 0 3px var(--input-focus)}
.field textarea{min-height:120px}
.turnstile-wrap{margin-bottom:24px}

#submitBtn{
  width:100%;font-family:var(--font);font-size:16px;font-weight:600;
  color:#fff;background:var(--accent);border:none;border-radius:14px;
  padding:16px 24px;cursor:not-allowed;opacity:.5;
  transition:background .2s,transform .1s,opacity .3s,cursor 0s;
}
#submitBtn.enabled{opacity:1;cursor:pointer}
#submitBtn.enabled:hover{background:var(--accent-h)}
#submitBtn.enabled:active{transform:scale(.98)}

/* ── Dock ── */
.dock{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;
  background:var(--dock-bg);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
  backdrop-filter:blur(var(--blur)) saturate(180%);
  border:1px solid var(--dock-border);
  border-radius:18px;padding:8px 10px;
  box-shadow:var(--glass-shadow);
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s ease;
  z-index:100;
}
.dock.hidden{transform:translateX(-50%) translateY(calc(100% + 30px));opacity:0;pointer-events:none}
.dock-item{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:none;background:transparent;
  border-radius:12px;color:var(--text-2);cursor:pointer;
  transition:background .15s,color .15s,transform .15s;
  text-decoration:none;
}
.dock-item:hover{background:var(--dock-hover);color:var(--text-1);transform:scale(1.1)}
.dock-item:active{transform:scale(.95)}

/* ── Toast ── */
#toasts{
  position:fixed;top:24px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  z-index:200;pointer-events:none;
}
.toast{
  padding:14px 28px;border-radius:16px;
  font-family:var(--font);font-size:14px;font-weight:500;color:#fff;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 4px 20px rgba(0,0,0,.1);
  opacity:0;transform:translateY(-16px);
  transition:opacity .3s,transform .3s;
  pointer-events:auto;max-width:380px;text-align:center;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{background:var(--toast-ok)}
.toast.err{background:var(--toast-err)}
.toast.info{background:var(--toast-info)}

/* ── Responsive ── */
@media(max-width:540px){
  body{padding:16px;padding-bottom:90px}
  .card{padding:36px 24px;border-radius:24px}
  .card h1{font-size:24px}
  #toasts{top:16px;left:16px;right:16px;transform:none}
  .toast{max-width:none}
}