/* ============ АТОМЫ, вторая волна ============ */

/* ---------- Аватар ---------- */
.avatar{
  width:40px; height:40px; flex:none; border-radius:50%;
  border:2px solid var(--ink); background:var(--surface-soft);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"JetBrains Mono",monospace; font-weight:800; font-size:.8rem;
  color:var(--ink); overflow:hidden; user-select:none;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar-lg{width:56px; height:56px; font-size:1rem}
.avatar-sm{width:30px; height:30px; font-size:.66rem; border-width:1.5px}

/* ---------- Тултип ---------- */
.tip{position:relative; display:inline-flex}
.tip::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 10px); left:50%;
  translate:-50% 4px; opacity:0; pointer-events:none;
  background:var(--ink); color:var(--page);
  font-family:"JetBrains Mono",monospace; font-size:.68rem; font-weight:750;
  letter-spacing:.03em; white-space:nowrap;
  padding:7px 11px; border-radius:10px;
  transition:opacity var(--t-fast) ease, translate var(--t-fast) ease;
}
.tip:hover::after,.tip:focus-visible::after{opacity:1; translate:-50% 0}
/* нижние строки таблицы: тултип раскрывается вниз */
.tip-b::after{bottom:auto; top:calc(100% + 10px); translate:-50% -4px}
.tip-b:hover::after,.tip-b:focus-visible::after{opacity:1; translate:-50% 0}

/* ---------- Прогресс-бар ---------- */
.progress{
  height:12px; border:2px solid var(--ink); border-radius:999px;
  background:var(--surface); overflow:hidden;
}
.progress > i{
  display:block; height:100%; border-radius:999px;
  background:var(--aqua); transition:width var(--t-settle) ease;
}
.progress.warn > i{background:var(--yellow)}
.progress.err > i{background:var(--red)}

/* ---------- Таблица ---------- */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:2px solid var(--ink); border-radius:var(--radius-alert);
  background:var(--surface); overflow:hidden; font-size:.95rem;
}
.table th{
  text-align:left; padding:13px 16px;
  font-family:"JetBrains Mono",monospace; font-size:.68rem; font-weight:750;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  border-bottom:2px solid var(--ink); background:var(--surface-soft);
}
.table td{padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tr{transition:background var(--t-fast) ease}
.table tbody tr:hover{background:var(--surface-soft)}
.table .num{font-family:"JetBrains Mono",monospace; font-weight:750}
.table-scroll{overflow-x:auto; border-radius:var(--radius-alert)}
.table-scroll .table{min-width:640px}

/* ---------- Пагинация ---------- */
.pagination{display:flex; gap:8px; flex-wrap:wrap}
.pg-num{
  min-width:44px; min-height:44px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--ink); border-radius:var(--radius-toggle);
  background:var(--surface); color:var(--ink);
  font-family:"JetBrains Mono",monospace; font-weight:750; font-size:.84rem;
  cursor:pointer; transition:transform var(--t-fast) ease, background var(--t-fast) ease;
}
.pg-num:hover{transform:translate(-2px,-2px)}
.pg-num:active{transform:none}
.pg-num[aria-current="page"]{background:var(--red); color:var(--on-color)}
.pg-num:disabled{opacity:.4; cursor:default; transform:none}

/* ---------- Дропдаун (details) ---------- */
.dropdown{position:relative; display:inline-block}
.dropdown > summary{list-style:none; cursor:pointer}
.dropdown > summary::-webkit-details-marker{display:none}
.dropdown-menu{
  position:absolute; z-index:60; top:calc(100% + 10px); left:0;
  min-width:220px; display:grid; gap:3px; padding:12px;
  border:2px solid var(--ink); border-radius:var(--radius-alert);
  background:var(--surface);
  box-shadow:8px 8px 0 var(--control-shadow);
}
.dropdown-menu a,.dropdown-menu button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border-radius:10px; border:0;
  background:transparent; color:var(--ink); font-weight:600; font-size:.95rem;
  cursor:pointer; text-align:left; transition:background var(--t-fast) ease;
}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--surface-soft)}
.dropdown-menu .sep{height:1px; background:var(--line); margin:6px 4px}
.dropdown-right .dropdown-menu{left:auto; right:0}

/* ---------- Модалка ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:100;
  background:color-mix(in srgb, var(--ink) 42%, transparent);
  display:grid; place-items:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity var(--t-theme) ease;
}
.modal-backdrop.open{opacity:1; pointer-events:auto}
.modal{
  width:min(520px,100%); max-height:calc(100vh - 40px); overflow:auto;
  background:var(--surface); color:var(--ink);
  border:2px solid var(--ink); border-radius:var(--radius-card);
  padding:clamp(24px,3vw,32px);
  box-shadow:12px 12px 0 var(--control-shadow);
  translate:0 10px; transition:translate var(--t-theme) ease;
}
.modal-backdrop.open .modal{translate:0 0}
.modal h3{margin-bottom:8px}
.modal .modal-sub{color:var(--muted); font-size:.95rem; margin-bottom:22px}
.modal .modal-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; margin-top:26px}

/* ---------- Тосты ---------- */
.toasts{
  position:fixed; z-index:120; right:16px; bottom:16px;
  display:grid; gap:10px; width:min(360px, calc(100vw - 32px));
}
.toast{
  display:flex; gap:12px; align-items:flex-start;
  border:2px solid var(--ink); border-radius:var(--radius-alert);
  background:var(--surface); padding:14px 16px; font-size:.92rem;
  box-shadow:6px 6px 0 var(--control-shadow);
  animation:toast-in var(--t-settle) ease both;
}
@keyframes toast-in{from{opacity:0; translate:0 8px} to{opacity:1; translate:0 0}}
.toast .ico{flex:none; width:20px; height:20px; margin-top:1px}
.toast-ok{border-color:var(--aqua)} .toast-ok .ico{color:var(--aqua)}
.toast-err{border-color:var(--red)} .toast-err .ico{color:var(--red)}
.toast strong{display:block; font-weight:750}

/* ---------- Skeleton ---------- */
.skeleton{
  border-radius:10px;
  background:linear-gradient(90deg, var(--surface-soft) 25%, var(--surface) 50%, var(--surface-soft) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- Пустое состояние ---------- */
.empty{
  display:grid; place-items:center; gap:14px; text-align:center;
  padding:clamp(36px,5vw,64px) 24px;
  border:2px dashed var(--line); border-radius:var(--radius-card);
  color:var(--muted);
}
.empty strong{color:var(--ink); font-family:"Unbounded",sans-serif; font-size:1.05rem; font-weight:650}

/* ---------- Метрика ---------- */
.metric{display:grid; gap:2px}
.metric .val{font-family:"JetBrains Mono",monospace; font-weight:800; font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:-0.04em}
.metric .lbl{font-family:"JetBrains Mono",monospace; font-size:.68rem; font-weight:750; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}