/* Branded LOOP dialogs — consistent across mobile and desktop. */
.loop-dialog-backdrop{
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  padding:20px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:rgba(2,8,5,.78);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  animation:loop-backdrop-in .2s ease-out;
}
.loop-dialog{
  box-sizing:border-box;position:relative;overflow:hidden;width:min(100%,430px);
  padding:28px 25px 24px;border-radius:27px;
  border:1px solid rgba(183,255,74,.28);
  background:radial-gradient(circle at 18% 0%,rgba(183,255,74,.16),transparent 45%),
             linear-gradient(155deg,#182b20 0%,#111f17 48%,#0b1510 100%);
  box-shadow:0 30px 95px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06);
  color:#f7fff6;font-family:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  text-align:center;direction:inherit;animation:loop-dialog-in .23s cubic-bezier(.2,.8,.2,1);
}
.loop-dialog::after{
  content:"";position:absolute;inset:auto -25% -100px;
  height:170px;background:radial-gradient(ellipse,rgba(183,255,74,.065),transparent 70%);
  pointer-events:none;
}
.loop-dialog-brand{
  position:relative;z-index:1;width:128px;height:56px;margin:0 auto 14px;
  background:url("./loop-logo-clean.svg") no-repeat center / contain;
}
.loop-dialog-close{
  position:absolute;top:13px;left:14px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(220,248,216,.12);background:rgba(255,255,255,.045);
  color:#cfdecf;font-size:24px;line-height:1;cursor:pointer;
}
html[dir="ltr"] .loop-dialog-close{left:auto;right:14px}
.loop-dialog-close:hover{background:rgba(255,255,255,.1)}
.loop-dialog-symbol{
  position:relative;z-index:1;display:grid;place-items:center;
  width:65px;height:65px;margin:0 auto 15px;border-radius:50%;
  color:#b7ff4a;font:700 34px/1 "Space Grotesk",sans-serif;
  background:rgba(183,255,74,.13);border:1px solid rgba(183,255,74,.44);
  box-shadow:0 0 0 8px rgba(183,255,74,.04),0 0 36px rgba(183,255,74,.12);
}
.loop-dialog--danger{border-color:rgba(255,139,125,.35)}
.loop-dialog--danger .loop-dialog-symbol{
  color:#ff9f91;background:rgba(255,139,125,.11);
  border-color:rgba(255,139,125,.42);box-shadow:0 0 0 8px rgba(255,139,125,.035);
}
.loop-dialog-title{
  position:relative;z-index:1;margin:0 0 10px;
  color:#f7fff6;font:750 clamp(20px,5vw,24px)/1.6 "Alexandria","IBM Plex Sans Arabic",sans-serif;
}
.loop-dialog-message{
  position:relative;z-index:1;margin:0 auto 24px;max-width:34ch;
  font:400 14px/2 "IBM Plex Sans Arabic","Alexandria",system-ui,sans-serif;
  color:#c2d1c5;white-space:pre-line;overflow-wrap:anywhere;
}
.loop-dialog-actions{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap}
.loop-dialog-action{
  flex:1 1 120px;min-height:49px;border:0;border-radius:15px;
  padding:12px 16px;font:700 14px/1.4 "Alexandria",system-ui,sans-serif;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.loop-dialog-action--primary{
  background:#b7ff4a;color:#0c1b0d;box-shadow:0 9px 24px rgba(183,255,74,.19);
}
.loop-dialog-action--secondary{
  background:rgba(255,255,255,.065);color:#f5fff1;border:1px solid rgba(234,255,230,.13);
}
.loop-dialog-action:active{transform:scale(.985)}
.loop-dialog-action:focus-visible,.loop-dialog-close:focus-visible{
  outline:2px solid #d6ff91;outline-offset:3px;
}
@keyframes loop-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes loop-dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:430px){
  .loop-dialog{padding:25px 21px 22px;border-radius:24px}
  .loop-dialog-symbol{width:60px;height:60px}
  .loop-dialog-message{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .loop-dialog,.loop-dialog-backdrop{animation:none}
  .loop-dialog-action{transition:none}
}