/* ============================================================
   ui.css — sayt ichidagi dialoglar

   Ikki mavzuda ishlaydi: to'q (kabinet, admin) va och (MGR).
   Rang o'zgaruvchilari orqali moslashadi.
   ============================================================ */

.ui-back{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;
  padding:20px;
  background:rgba(8,14,26,.55);
  backdrop-filter:blur(5px);
  animation:uiFade .16s ease;
}
.ui-back.show{display:flex}

@keyframes uiFade{from{opacity:0}to{opacity:1}}
@keyframes uiUp{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.ui-box{
  width:min(390px,100%);
  padding:26px 24px 20px;
  border-radius:22px;
  text-align:center;
  animation:uiUp .2s cubic-bezier(.2,.9,.3,1);

  /* to'q mavzu — kabinet va admin */
  background:#101a2c;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  color:#f7f9fc;
}

/* och mavzu — MGR sahifalari */
body:has(.page > .wrap) .ui-box,
body:has(.page > .shell) .ui-box{
  background:#fff;
  border-color:#e5eaf2;
  box-shadow:0 30px 70px rgba(17,24,39,.2);
  color:#162132;
}

.ui-ic{
  width:52px;height:52px;margin:0 auto 16px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:24px;font-weight:700;
  background:rgba(124,92,255,.14);color:#a78fff;
}
.ui-ic.danger{background:rgba(239,68,68,.13);color:#ef4444}
.ui-ic.ok    {background:rgba(34,197,94,.13);color:#22c55e}

.ui-title{
  margin:0 0 9px;font-size:17px;font-weight:650;letter-spacing:-.02em;
}
.ui-text{
  margin:0 0 22px;
  font-size:13px;line-height:1.65;
  color:#8fa1be;
  word-break:break-word;
}
body:has(.page > .wrap) .ui-text,
body:has(.page > .shell) .ui-text{color:#6b7c96}

.ui-acts{display:flex;gap:9px}

.ui-btn{
  flex:1;height:44px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#c3d0e5;
  font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:.15s;
}
.ui-btn:hover{background:rgba(255,255,255,.09)}

body:has(.page > .wrap) .ui-btn,
body:has(.page > .shell) .ui-btn{
  border-color:#e5eaf2;background:#f6f8fc;color:#4a5a72;
}
body:has(.page > .wrap) .ui-btn:hover,
body:has(.page > .shell) .ui-btn:hover{background:#eef2f8}

.ui-btn.primary{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,#7c3aed,#4f46e5 55%,#3b82f6);
  box-shadow:0 10px 24px rgba(79,70,229,.26);
}
.ui-btn.danger{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,#ef4444,#dc2626);
  box-shadow:0 10px 24px rgba(239,68,68,.24);
}
.ui-btn.primary:hover,
.ui-btn.danger:hover{filter:brightness(1.06)}

@media (max-width:480px){
  .ui-box{padding:22px 18px 16px;border-radius:19px}
  .ui-acts{flex-direction:column-reverse}
  .ui-btn{width:100%}
}

/* ============================================================
   Telefonda maydonga bosilganda yaqinlashmasin

   iOS 16px dan kichik matnli maydonga fokus tushganda sahifani
   kattalashtiradi. Barcha maydonlarga aniq o'lcham beramiz.
   ============================================================ */

@media (max-width: 820px){
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=url],
  input[type=number],
  input[type=password],
  input[type=search],
  select,
  textarea{
    font-size:16px !important;
  }

  /* joylashuv buzilmasligi uchun balandlikni saqlaymiz */
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=url],
  input[type=number],
  input[type=password],
  input[type=search],
  select{
    min-height:44px;
  }
}