:root{
  --primary:#3AA9FF;       /* 主题浅蓝 */
  --primary-600:#1E90FF;
  --bg:#F5FAFF;            /* 页面背景 */
  --card:#FFFFFF;          /* 卡片背景 */
  --ink:#243447;           /* 文字颜色 */
  --soft:#E6F4FF;          /* 装饰色 */
  --ring:rgba(58,169,255,.25);
}

*{ box-sizing:border-box }

body{
  margin:0;
  background:
    radial-gradient(800px 400px at 80% -10%, #EAF6FF 0%, transparent 60%),
    radial-gradient(700px 320px at -10% 30%, #E6F4FF 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
}

.wrap{ max-width:760px; padding:36px 20px 48px; margin:0 auto }

.card{
  position:relative; background:var(--card); border-radius:16px;
  padding:28px 24px; overflow:hidden;
  box-shadow:0 10px 24px rgba(30,144,255,.10), 0 2px 6px rgba(17,24,39,.06);
}
.card::before{
  content:""; position:absolute; top:-50px; right:-40px; width:160px; height:160px;
  background:var(--soft); border-radius:50%; filter:blur(2px);
}

.nav{ display:flex; justify-content:space-between; align-items:center; padding:8px 0 14px; }
.nav .left{ font-weight:700; color:#1f2937 }
.nav .right{ display:flex; gap:10px; align-items:center; font-size:14px; }
.nav a{ color:var(--primary-600); text-decoration:none; font-weight:700 }
.tag{ background:#EFF6FF; color:#1E40AF; border-radius:999px; padding:2px 10px; font-size:12px }

.header{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
.badge{ font-size:26px; background:var(--soft); padding:8px 12px; border-radius:12px }
.waves{ display:inline-block; transform-origin:70% 70%; animation:dolphin 2.2s ease-in-out infinite }
@keyframes dolphin{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-2px) rotate(-6deg) } }
.title{ margin:0; font-size:22px; font-weight:800; letter-spacing:.2px }
.sub{ margin:2px 0 0; color:#5b7083; font-size:14px }

.form{ margin-top:18px; display:grid; gap:16px }
.row{ display:grid; gap:8px }
label{ font-weight:600; font-size:14px }
.hint{ font-size:12px; color:#64748b }
.error{ font-size:12px; color:#d7263d; display:none }

input[type="text"], input[type="date"], input[type="email"], input[type="password"], input[type="tel"]{
  width:100%; padding:12px 14px; border:1.5px solid #e1e8f0; border-radius:12px; background:#fff; outline:none;
  transition:border .15s, box-shadow .15s, transform .05s; font-size:15px;
}
input:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring) }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px }

.btn{
  appearance:none; border:none; cursor:pointer; border-radius:12px;
  padding:12px 18px; font-weight:800; font-size:15px;
  transition:transform .05s ease, box-shadow .15s ease, background .2s ease;
  box-shadow:0 3px 0 rgba(0,0,0,.12);
}
.btn:active{ transform:translateY(1px); box-shadow:0 2px 0 rgba(0,0,0,.18) }
.btn.primary{ background:var(--primary); color:#fff }
.btn.primary:hover{ background:var(--primary-600) }
.btn.outline{ background:#fff; color:var(--primary); border:2px dashed var(--primary); box-shadow:none }
.btn.outline:hover{ background:#F0F8FF }

.footer{ margin-top:14px; font-size:12px; color:#94a3b8; display:flex; align-items:center; gap:6px }

@media (max-width:640px){ .grid-2{ grid-template-columns:1fr } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important } }