.form-control,.form-select,textarea.form-control{border:1px solid #cbd5e1}
.form-control:hover,.form-select:hover,textarea.form-control:hover{border-color:#94a3b8}
.form-control:focus,.form-select:focus,textarea.form-control:focus{
    border-color:#0a7ea6;
    box-shadow:0 0 0 4px rgba(10,126,166,.16);
}
.pretty-field,.host-field{position:relative}
.pretty-control,.host-control{position:relative}
.pretty-field.is-bad,.host-field.is-bad{z-index:5;padding-bottom:3rem}
.pretty-float,.host-float{
    position:absolute;left:0;top:calc(100% + 10px);z-index:20;width:max-content;max-width:min(280px,calc(100vw - 48px));
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-6px) scale(.96);transform-origin:16px top;
    transition:opacity .2s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility .2s;
}
.pretty-field.is-bad .pretty-float,.pretty-field.is-bad .host-float,
.host-field.is-bad .pretty-float,.host-field.is-bad .host-float,
.pretty-float.is-on,.host-float.is-on{opacity:1;visibility:visible;transform:none}
.pretty-float-card,.host-float-card{
    position:relative;display:flex;align-items:flex-start;gap:10px;
    padding:10px 14px 10px 10px;border-radius:16px;
    color:#9f1239;font-size:.78rem;font-weight:650;line-height:1.35;
    background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
    border:1px solid rgba(251,113,133,.28);
    box-shadow:0 16px 40px rgba(190,18,60,.14),0 2px 6px rgba(15,23,42,.05);
}
.pretty-float-card::before,.host-float-card::before{
    content:"";position:absolute;left:22px;top:-5px;width:10px;height:10px;
    background:rgba(255,255,255,.95);border-left:1px solid rgba(251,113,133,.28);border-top:1px solid rgba(251,113,133,.28);
    transform:rotate(45deg);
}
.pretty-float-ico,.host-float-ico{
    position:relative;width:26px;height:26px;border-radius:9px;flex-shrink:0;
    display:grid;place-items:center;color:#fff;font-size:.7rem;
    background:linear-gradient(160deg,#fb7185,#e11d48);
    box-shadow:0 6px 14px rgba(225,29,72,.28);
}
.pretty-float-ico::after,.host-float-ico::after{
    content:"";position:absolute;inset:-4px;border-radius:12px;
    border:1.5px solid rgba(244,63,94,.35);animation:prettyPulse 1.6s ease-out infinite;
}
.pretty-ok-mark,.host-ok-mark{
    position:absolute;right:12px;top:50%;transform:translateY(-50%) scale(.6);
    color:#16a34a;opacity:0;pointer-events:none;transition:.2s ease;z-index:2;
}
.pretty-field.is-ok .pretty-ok-mark,.pretty-field.is-ok .host-ok-mark,
.host-field.is-ok .pretty-ok-mark,.host-field.is-ok .host-ok-mark{opacity:1;transform:translateY(-50%) scale(1)}
.pretty-field.is-bad .form-control,.pretty-field.is-bad .form-select,
.host-field.is-bad .form-control,.host-field.is-bad .form-select{
    background:#fff;border-color:#fb7185;
    box-shadow:0 0 0 4px rgba(251,113,133,.16),0 10px 24px rgba(244,63,94,.08);
}
.pretty-field.is-ok .form-control,.pretty-field.is-ok .form-select,
.host-field.is-ok .form-control,.host-field.is-ok .form-select{
    background:#f7fef9;border-color:#4ade80;
    box-shadow:0 0 0 4px rgba(74,222,128,.16);
}
.pretty-field.is-shake .pretty-control,.pretty-field.is-shake .host-control,.pretty-field.is-shake .field,
.host-field.is-shake .pretty-control,.host-field.is-shake .host-control{animation:prettyShake .4s ease}
.pretty-field .invalid-feedback,.host-field .invalid-feedback{display:none !important}
@keyframes prettyShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes prettyPulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.25);opacity:0}}
@keyframes hostShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes hostPulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.25);opacity:0}}