/* Common UI polish: consistent top menu + smooth hover/press animations across all pages */

:root{
  --ui-bg: #0b1020;
  --ui-card: rgba(255,255,255,.06);
  --ui-card2: rgba(255,255,255,.08);
  --ui-border: rgba(255,255,255,.10);
  --ui-border2: rgba(255,255,255,.16);
  --ui-text: #eaf0ff;
  --ui-muted: rgba(234,240,255,.72);
}

/* ===== top bar / menu ===== */
.top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.row{
  display:flex;
  gap:12px;
  align-items:center;
}
.title{
  font-size:32px;
  font-weight:800;
  letter-spacing:.2px;
  color: var(--ui-text);
}
.muted{ color: var(--ui-muted); font-size:14px; }

.btn{
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  color: var(--ui-text);
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: transform .10s ease, border-color .15s ease, background .15s ease, box-shadow .20s ease;
  user-select:none;
  -webkit-appearance:none;
  appearance:none;
  font: inherit;
  white-space: nowrap;
}
.btn:hover{ background: var(--ui-card2); border-color: var(--ui-border2); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.menuWrap{ position:relative; }
.avatarBtn{
  width:40px; height:40px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--ui-card);
  border:1px solid var(--ui-border);
  cursor:pointer;
  transition: transform .10s ease, border-color .15s ease, background .15s ease;
}
.avatarBtn:hover{ background: var(--ui-card2); border-color: var(--ui-border2); transform: translateY(-1px); }
.avatarDot{ width:14px; height:14px; border-radius:999px; background:#6c6cff; box-shadow: 0 0 0 3px rgba(108,108,255,.18); }

.dropdown{
  position:absolute;
  right:0; top:52px;
  min-width: 260px;
  background: rgba(10,16,32,.88);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding: 10px;
  z-index: 20;
  display:none;
  animation: uiPop .12s ease-out;
}
@keyframes uiPop{
  from{ transform: translateY(-6px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
.ddHeader{ padding: 6px 8px 10px 8px; }
.ddTitle{ font-weight:900; color: var(--ui-text); }
.ddEmail{ font-size: 12px; color: var(--ui-muted); margin-top:4px; word-break: break-all; }
.ddHr{ height:1px; background: rgba(255,255,255,.10); margin: 8px 0; }
.ddSecTitle{ font-size:12px; color: rgba(234,240,255,.55); font-weight:800; padding: 4px 8px; }

.ddItem{
  width:100%;
  text-align:left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 10px;
  color: var(--ui-text);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  transition: background .15s ease, transform .10s ease, border-color .15s ease;
}
.ddItem:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.10); transform: translateY(-1px); }

/* ===== inputs / selects ===== */
.input, .select{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  color: var(--ui-text);
  padding: 10px 12px;
  outline: none;
  min-height: 40px;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.input{ min-width: 220px; }
.input::placeholder{ color: rgba(234,240,255,.45); }
.select{ cursor: pointer; }
.input:focus, .select:focus{ border-color: var(--ui-border2); }

/* ===== cards / panels: unify hover feel ===== */
.card, .stat, .mini, .panel, .tableWrap, .box, .block{
  transition: transform .10s ease, border-color .15s ease, background .15s ease, box-shadow .20s ease;
}
.card:hover, .stat:hover, .mini:hover, .panel:hover, .tableWrap:hover, .box:hover, .block:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}
.card:active, .stat:active, .mini:active, .panel:active, .tableWrap:active, .box:active, .block:active{
  transform: translateY(-1px);
}

/* ===== metric blocks (used for "Задержка выдачи" and "Лимит активных") ===== */
.grid2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .grid2{ grid-template-columns: 1fr; }
}

.cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .cards{ grid-template-columns: 1fr; }
}

.mini{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 14px 16px;
}
.mini .k{
  color: rgba(232,236,255,.74);
  font-size: 13px;
  line-height: 1.1;
}
.mini .v{
  margin-top: 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .2px;
}
.mini.small .v{ font-size: 24px; }

/* Prevent accidental hover-jumps on tiny chips */
.chip, .pill{
  transition: background .15s ease, border-color .15s ease;
}

/* ===== overrides to enforce identical sizing across pages (ui.css must win over inline styles) ===== */
.top{ margin-bottom: 18px !important; }

/* buttons: uniform size */
.btn{
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  min-height: 40px !important;
  line-height: 1 !important;
}
.btn.small{ min-height: 40px !important; padding: 10px 16px !important; }

/* avatar menu button */
.avatarBtn{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
}

/* dropdown menu: match /ui look everywhere */
.dropdown{
  top: 54px !important;
  width: min(390px, 90vw) !important;
  min-width: 0 !important;
  border-radius: 16px !important;
  padding: 12px !important;
  z-index: 50 !important;
  font-size: 16px !important;
}
.dropdown.open{ display:block !important; }

.ddHeader{ padding: 8px 10px 12px 10px !important; }
.ddSecTitle{ font-size: 12px !important; letter-spacing:.04em !important; }
.ddItem{ padding: 12px 14px !important; border-radius: 14px !important; font-size: 16px !important; }
.ddEmail{ font-size: 14px !important; opacity:.78 !important; }

/* Some pages use legacy class names in the dropdown header */
.dropdown .email{ font-weight: 900 !important; font-size: 16px !important; color: var(--ui-text) !important; }
.dropdown .sub{ font-size: 13px !important; color: var(--ui-muted) !important; margin-top: 2px !important; }