/* In-page dialogs. Centred on the viewport rather than pinned to the top of
   the browser chrome, and in the CRM's own palette — the native confirm()
   sits in OS colours somewhere the reader is not looking. */

.uid-backdrop{position:fixed;inset:0;z-index:10000;display:flex;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.62);backdrop-filter:blur(2px);
  animation:uid-fade .12s ease-out}
@keyframes uid-fade{from{opacity:0}to{opacity:1}}

.uid-box{width:100%;max-width:440px;background:var(--card,#0d1430);
  border:1px solid var(--tile-line,#202733);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);padding:22px;
  animation:uid-rise .14s cubic-bezier(.2,.8,.3,1)}
@keyframes uid-rise{from{transform:translateY(8px) scale(.98);opacity:0}
  to{transform:none;opacity:1}}

.uid-msg{color:var(--text,#dfe4ec);font-size:14.5px;line-height:1.55;
  white-space:pre-wrap;margin-bottom:16px}

.uid-input{width:100%;margin-bottom:16px;background:var(--bg,#040a1c);
  border:1px solid var(--tile-line,#202733);color:var(--text,#dfe4ec);
  border-radius:9px;padding:10px 12px;font-size:14px}
.uid-input:focus{outline:none;border-color:var(--lime,#a78bfa);
  box-shadow:0 0 0 2px rgba(167,139,250,.18)}

/* The lent-control slot. The field above it already carries the 16px gap,
   so this only has to separate itself from the buttons below. */
.uid-extra{margin:0 0 16px}
.uid-extra .uid-extra-label{display:block;margin:0 0 6px;font-size:12px;
  color:var(--lime,#a78bfa);font-weight:700}
.uid-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.uid-actions .btn{padding:8px 18px;font-size:13.5px}

/* Destructive confirmations stay red, matching the rule everywhere else. */
.uid-ok.uid-danger{color:#ff8189;border-color:#5c2126}
.uid-ok.uid-danger:hover{background:rgba(255,129,137,.12)}

/* The sign-in look (opts.brand): title above, lime edge, logo, lime label,
   one full-width button, Cancel as a link — the same card as crm/login.php. */
.uid-backdrop{flex-direction:column}
.uid-title{color:var(--lime,#a78bfa);font-size:30px;font-weight:800;margin:0 0 22px;text-align:center}
/* The heading on a PLAIN dialog — inside the box, above the message, and lime
   like every other heading here. Not .uid-title: that one is the sign-in
   card's headline, centred at 30px above the box, which is a different thing
   in a different place and sharing the class would have meant one of the two
   getting the next correction by accident. */
.uid-head{color:var(--lime,#a78bfa);font-size:16px;font-weight:800;line-height:1.3;
  margin:0 0 10px;padding:0 0 9px;border-bottom:1px solid var(--tile-line,#202835)}
.uid-box.uid-brand{max-width:520px;border:1.5px solid var(--lime,#a78bfa);border-radius:22px;padding:30px 30px 26px}
.uid-logo{display:block;max-width:220px;max-height:110px;width:auto;height:auto;margin:0 auto 26px;object-fit:contain}
.uid-msg-quiet{color:var(--dim,#8a93a3);font-size:13px;margin-bottom:14px}
.uid-label{display:block;color:var(--lime,#a78bfa);font-weight:700;font-size:15px;margin:0 0 8px}
.uid-brand .uid-input{padding:14px 14px;font-size:16px;border-radius:12px;margin-bottom:18px}
.uid-actions.uid-stack{flex-direction:column-reverse;gap:14px}
.uid-actions.uid-stack .btn{width:100%;padding:12px 18px;font-size:16px;border-radius:12px}
.uid-actions.uid-stack .uid-link{background:transparent;border:0;color:var(--dim,#8a93a3);
  text-decoration:underline;font-size:15px;font-weight:500;padding:0}
.uid-actions.uid-stack .uid-link:hover{color:var(--text,#dfe4ec)}

/* Stop the page behind from scrolling while a dialog is up. */
body.uid-locked{overflow:hidden}

@media(max-width:520px){
  .uid-box{padding:18px}
  .uid-actions{flex-direction:column-reverse}
  .uid-actions .btn{width:100%}
}