/* =========================================================
   TRNG page (Bootstrap-friendly compact UI)
   ========================================================= */

.trng-page{
  max-width: 1100px;
  margin: 0 auto;
}

/* -----------------------------
   TOP BAR (compact sticky)
------------------------------ */
.trng-topbar{
  border-radius: 12px;
}

.trng-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.trng-row-left{
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  min-width: 0;
}

.trng-row-right{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

/* field blocks */
.trng-field{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trng-w-count{ width: 92px; }
.trng-w-range{ width: 280px; }
@media (max-width: 520px){
  .trng-w-range{ width: 100%; }
}

/* buttons/inputs compact tuning (not tiny) */
.trng-topbar .btn.btn-sm,
.trng-topbar .btn-group-sm > .btn{
  padding-top: .18rem;
  padding-bottom: .18rem;
}

.trng-topbar .form-control-sm,
.trng-topbar .form-select-sm{
  padding-top: .18rem;
  padding-bottom: .18rem;
  min-height: calc(1.5em + .5rem + 2px);
}

.trng-topbar .form-label.small{
  line-height: 1.05;
}

.trng-status{
  border-radius: 999px;
  padding: .25rem .55rem;
}

/* advanced area */
.trng-advanced{
  width: 100%;
}
.trng-advanced-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.trng-advanced-hint{
  flex: 1 1 auto;
  min-width: 220px;
}

/* errors */
.trng-live{
  width: 100%;
  margin-top: 8px;
}

/* -----------------------------
   RESULTS
------------------------------ */
.trng-results{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* -----------------------------
   BATCH CARD
------------------------------ */
.trng-batch{
  border-radius: 14px;
  overflow: hidden;
}

.trng-batch .card-body{
  padding: 14px;
}

.trng-batch-head{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.trng-batch-title{
  font-weight: 700;
  font-size: 0.98rem;
}

.trng-ts{
  font-weight: 500;
  opacity: .75;
  margin-left: 6px;
  font-size: .85rem;
}

.trng-meta{
  font-size: .85rem;
  opacity: .75;
}

.trng-batch-actions{
  display: flex;
  gap: 6px;
  align-items: center;
}

.trng-batch-body{
  margin-top: 10px;
}

/* -----------------------------
   Single number (beauty)
------------------------------ */
.trng-one-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 6px;
}

.trng-one{
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: clamp(44px, 7vw, 86px);
  line-height: 1;
  letter-spacing: .5px;
  text-align: center;
  color: #0d6efd; /* bootstrap primary */
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(13,110,253,.35);
  background: rgba(13,110,253,.06);
  min-width: min(520px, 100%);
}

/* -----------------------------
   Chip grid for multiple numbers
------------------------------ */
.trng-chip-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 992px){
  .trng-chip-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 576px){
  .trng-chip-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.trng-chip{
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.18);
  padding: 10px 10px 8px;
  background: rgba(255,255,255,.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}

.trng-chip-num{
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.1;
  color: #0d6efd;
}

.trng-chip-idx{
  margin-top: 2px;
  font-size: .75rem;
  opacity: .75;
}

/* small polishing */
.trng-results-header{
  padding: 0 2px;
}

/* =========================================================
   TRNG Waves Loader (radio-style)
   ========================================================= */

.trng-status-wrap{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.trng-waves{
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  filter: drop-shadow(0 0 10px rgba(13,110,253,.18));
}

/* core (center) */
.trng-core{
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.15));
  outline: 2px solid rgba(13,110,253,.45);
  box-shadow:
    0 0 0 3px rgba(13,110,253,.10),
    0 0 14px rgba(13,110,253,.25);
}

/* rings */
.trng-ring{
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 2px solid rgba(13,110,253,.55);
  opacity: 0;
  animation: trng-wave 1.35s ease-out infinite;
}

/* slightly different tints */
.trng-ring-1{ border-color: rgba(13,110,253,.55); animation-delay: 0s; }
.trng-ring-2{ border-color: rgba(25,135,84,.45); animation-delay: .18s; }
.trng-ring-3{ border-color: rgba(255,193,7,.45); animation-delay: .36s; }

@keyframes trng-wave{
  0%   { width: 8px;  height: 8px;  opacity: .0; }
  10%  { opacity: .85; }
  100% { width: 34px; height: 34px; opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .trng-ring{ animation: none; opacity: .55; width: 26px; height: 26px; }
}


/* ============================
   Sticky TRNG topbar (под header)
   ============================ */

/* высоту хедера выставим JS-ом */
:root{
  -trng-topbar-h: 0px; /* JS выставляет фактическую высоту панели */
}

/* сам sticky */
.trng-topbar{
  position: sticky !important;
  top: 0 !important;           /* ✅ как в костях */
  z-index: 1200 !important;               /* выше контента/карточек */
}

/* лёгкий фон, чтобы при наложении было красиво */
.trng-topbar.card{
  backdrop-filter: blur(8px);
}

/* Offcanvas/backdrop всегда поверх, но sticky не нужно занижать до 5 */
@media (max-width: 991.98px){
  .offcanvas{ z-index: 2200 !important; }
  .offcanvas-backdrop{ z-index: 2190 !important; }

  /* header поверх всего, sticky под ним */
  header#header_id{ z-index: 2300 !important; }
  .trng-topbar{ z-index: 1200 !important; }
}

/* Чтобы карточка не пряталась под sticky-панелью при scrollIntoView */
.trng-batch{
  scroll-margin-top: calc(var(--trng-topbar-h) + 55px); /* ✅ без header */
}

/* вместо отрицательного margin лучше обнулить верхний отступ контейнера именно на этой странице */
#wrapper_main_menu_content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.trng-page{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* Важно: sticky ломается, если у родителя overflow hidden/auto/scroll.
   На TRNG-странице делаем контейнер “не ломающим”. */
.trng-page{
  overflow: visible !important;
}


@media (max-width: 991.98px){
  header#header_id{ z-index: 2300 !important; } /* хедер с кнопкой меню */
}

/* highlight.js: чтобы тема гарантированно применялась */
#id_content pre code.hljs{
  display:block;
  padding: 12px 14px;
  border-radius: 10px;
  overflow-x: auto;
}

/* если хочешь, чтобы фон был как у github-dark темы (она сама задаст), можно не трогать background */

/* ============================
   KaTeX: формулы не должны расширять страницу
   ============================ */

/* страховка от горизонтального скролла страницы */
.trng-page,
#id_content,
#id_content .card-body,
#id_content article {
  overflow-x: hidden;
}

/* контейнер-скроллер только для формулы */
.trng-math-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

/* сам блок формулы делаем “шириной по содержимому” */
.trng-math {
  display: inline-block;
  width: max-content;
  max-width: none;
}

/* KaTeX display иногда создаёт блочные элементы — заставляем их быть “по содержимому” */
.trng-math .katex-display {
  margin: 0;               /* убираем лишние вертикальные отступы */
  display: inline-block;   /* ключевое */
  width: max-content;      /* ключевое */
  max-width: none;
  text-align: left;        /* чтобы не уезжало при прокрутке */
}

/* чтобы внутри KaTeX не было внезапных переносов */
.trng-math .katex,
.trng-math .katex-display,
.trng-math .katex-html {
  white-space: nowrap;
}

/* чуть компактнее на мобильных */
@media (max-width: 576px) {
  .trng-math-scroll {
    padding: 6px 8px;
    border-radius: 12px;
  }
}

/* =========================================
   FIX: base.html row has m-1 + mt-2 (pushes content down)
   This page only: pull content back up
   ========================================= */

/* mt-2 = 0.5rem, m-1(top) = 0.25rem => total 0.75rem */
#wrapper_main_menu_content{
  margin-top: -0.75rem !important;
}