/* nelka-cards — sober, mobile-first card UI. Brand blue #0048A8 */
:root{
  --blue:#0048A8;
  --blue-700:#003A87;
  --ink:#0c1116;
  --muted:#5b6675;
  --line:#e7eaef;
  --bg:#f4f6fa;
  --card:#ffffff;
  --ok:#1f9d57;
  --radius:18px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 12px 32px rgba(0,72,168,.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
}
.wrap{
  width:100%;
  max-width:440px;
  margin:0 auto;
  padding:max(24px,env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100dvh;
}
.brand{padding:8px 0 22px}
.brand-mark{
  font-weight:800;letter-spacing:-.02em;font-size:22px;color:var(--blue);
}
.brand-mark::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-left:3px;vertical-align:baseline}

.card,.done{
  width:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 22px;
  text-align:center;
}
.avatar{
  width:76px;height:76px;border-radius:50%;
  margin:0 auto 16px;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--blue),var(--blue-700));
  color:#fff;font-weight:700;font-size:27px;letter-spacing:.02em;
  box-shadow:0 8px 22px rgba(0,72,168,.28);
}
.name{font-size:24px;line-height:1.15;margin:0 0 4px;font-weight:750;letter-spacing:-.01em}
.role{margin:0 0 2px;color:var(--blue);font-weight:600;font-size:14px}
.tag{margin:0 0 22px;color:var(--muted);font-size:13.5px}
.lead-intro{margin:0 0 18px;font-size:15.5px;color:var(--ink)}

form{display:flex;flex-direction:column;gap:14px;text-align:left}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:12.5px;font-weight:600;color:var(--muted);padding-left:2px}
.field span small{font-weight:500;opacity:.7}
input[type=text],input[type=tel]{
  font:inherit;font-size:16px; /* 16px → no iOS zoom on focus */
  padding:13px 14px;
  border:1.5px solid var(--line);
  border-radius:12px;
  background:#fbfcfe;
  color:var(--ink);
  width:100%;
  transition:border-color .15s,box-shadow .15s;
}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,72,168,.14);background:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn{
  margin-top:4px;
  font:inherit;font-weight:700;font-size:16px;
  color:#fff;background:var(--blue);
  border:none;border-radius:12px;
  padding:15px 16px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,transform .06s;
}
.btn:hover{background:var(--blue-700)}
.btn:active{transform:translateY(1px)}
.fineprint{margin:16px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45}

.done{text-align:center}
.check{
  width:64px;height:64px;border-radius:50%;margin:4px auto 14px;
  display:grid;place-items:center;background:rgba(31,157,87,.12);color:var(--ok);
  font-size:32px;font-weight:700;
}
.done h2{margin:0 0 8px;font-size:22px}
.done p{margin:0 0 8px;color:var(--muted);font-size:15px;line-height:1.5}
.done strong{color:var(--ink)}
.hint{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;background:rgba(0,72,168,.05);border-radius:10px;padding:10px 12px}
.redl-wrap{margin-top:14px}
.link{color:var(--blue);font-size:13px;text-decoration:none;border-bottom:1px solid rgba(0,72,168,.3);padding-bottom:1px}

.foot{margin-top:auto;padding-top:26px}
.foot a{color:var(--muted);font-size:12.5px;text-decoration:none;letter-spacing:.01em}
.foot a:hover{color:var(--blue)}

/* index / picker */
.pick{width:100%;display:flex;flex-direction:column;gap:12px}
.pick a{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
}
.pick .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,var(--blue),var(--blue-700));color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px}
.pick b{font-size:16px;font-weight:700}
.pick small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}
.pick .chev{margin-left:auto;color:var(--muted)}

@media (prefers-color-scheme:dark){
  :root{
    --ink:#eef2f8;--muted:#9aa6b6;--line:#222a36;--bg:#0c1016;--card:#141a23;
    --blue:#5b9bff;--blue-700:#3f82f0;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.45);
  }
  input[type=text],input[type=tel]{background:#0f151d}
  input:focus{background:#0f151d}
  .btn{color:#06101f}
  .check{background:rgba(31,157,87,.18)}
}