:root{
  --bg:#07101b;
  --panel:#0d1726;
  --line:#22354d;
  --line2:#3b82f6;
  --text:#e8f0fb;
  --muted:#97a9c0;
  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --blue:#60a5fa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Segoe UI,Arial,sans-serif;
  background:radial-gradient(circle at top left,#123a8a44,transparent 32%),linear-gradient(145deg,#050913,#0b1220 58%,#080d16);
  color:var(--text);
  display:grid;
  place-items:center;
  padding:16px;
}
.shell{width:min(500px,100%)}
.card{
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,#101a2bee,#0a1220f2);
  box-shadow:0 24px 72px #0008;
  padding:18px 24px 20px;
}
.eyebrow{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#93c5fd;font-weight:800;margin-bottom:10px}
h1{margin:0 0 6px;font-size:30px;line-height:1.05}
.hint{color:var(--muted);font-size:14px;line-height:1.45;margin:2px 0 14px}
.field{margin:0 0 12px}
label{display:block;font-size:12px;color:#a9bdd7;font-weight:800;margin-bottom:6px}
input,select{
  width:100%;border:1px solid #334155;background:#07101f;color:#fff;
  border-radius:14px;padding:13px 14px;font-size:15px;outline:none;
}
select{cursor:pointer}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #3b82f633}
.btn{
  width:100%;border:0;border-radius:14px;background:linear-gradient(135deg,#2563eb,#06b6d4);
  color:#fff;padding:13px 14px;font-weight:900;font-size:15px;cursor:pointer;
}
.btn.secondary{background:#172338;border:1px solid #304256}
.btn.ghost{background:transparent;border:1px solid var(--line);color:#cfe0f6}
.btn + .btn{margin-top:10px}
.inline-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.link-btn{
  appearance:none;background:none;border:0;padding:0;color:#8ec5ff;cursor:pointer;
  font-size:13px;font-weight:800;text-decoration:none;
}
.link-btn:hover{text-decoration:underline}
.check{display:flex;align-items:center;gap:8px;color:#cfdbeb;font-size:14px;margin:8px 0 14px}
.show-pass{margin:-4px 0 8px;color:#9fb2ca;font-size:13px}
.check input[type="checkbox"]{appearance:auto;width:18px;height:18px;margin:0;cursor:pointer;accent-color:#3b82f6}.check{cursor:pointer;user-select:none}
.msg{min-height:44px;margin-top:14px;border:1px solid var(--line);background:#0a1220;border-radius:14px;padding:10px 11px;color:#d4e2f5;white-space:pre-wrap;font-size:13px}
.msg:empty{display:none}
.msg.ok{border-color:#166534;color:#bbf7d0}
.msg.bad{border-color:#7f1d1d;color:#fecaca}
.msg.warn{border-color:#92400e;color:#fde68a}
.small{font-size:12px;color:var(--muted);line-height:1.45;margin-top:10px}
.hidden{display:none!important}
.footer{margin-top:14px;color:#6f839d;font-size:11px;text-align:center}
@media (max-width:560px){
  .card{padding:20px}
  .inline-actions{grid-template-columns:1fr}
  .links{flex-direction:column;align-items:flex-start}
}

.brand-logo{display:block;width:96px;height:96px;object-fit:contain;margin:0 auto 14px;filter:drop-shadow(0 0 20px #2b9cff55)}
.brand-head{text-align:center;margin:0 0 12px}.brand-head .hint{margin-bottom:0}


/* v020 compact header wordmark */
.kobadi-header-logo{display:block;width:min(430px,100%);height:auto;margin:0 auto 8px;object-fit:contain;border:0!important;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 0 18px rgba(0,190,255,.22));}
@media (max-width:560px){.kobadi-header-logo{width:min(320px,100%);margin-bottom:8px}.card{padding:16px 18px 18px}}


/* v020 compact logo spacing */
.card{padding:10px 24px 16px;}
.brand-head{text-align:center;margin:0 0 6px;}
.brand-head .hint{margin:2px 0 8px;}
.kobadi-header-logo{display:block;width:min(430px,100%);height:auto;margin:-2px auto 2px;object-fit:contain;border:0!important;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 0 18px rgba(0,190,255,.22));}
.field{margin:0 0 10px;}
.links{margin-top:12px;}
.footer{margin-top:10px;}
@media (max-width:560px){.kobadi-header-logo{width:min(320px,100%);margin:-2px auto 2px}.card{padding:10px 18px 16px}}