/* style.css — NeonGO Billing (Professional Neon) */
/* Цвет бренда: #00ffc3 (НЕОН) */

/* =========================
   DESIGN TOKENS
========================= */
:root{
  --neon: #00ffc3;
  --neon-2: rgba(0,255,195,.75);
  --neon-soft: rgba(0,255,195,.25);
  --neon-glow: rgba(0,255,195,.18);

  /* Чуть больше "зелёного", но остаёмся в чёрном неоне */
  --bg-0: #010504;   /* почти чёрный с зеленцой */
  --bg-1: #03110e;   /* глубокий тёмный teal */
  --bg-2: #050a09;   /* подложки */
  --bg-3: #070d0c;   /* карты/блоки */
  --bg-4: #0b1513;   /* hover/active мягко */

  --stroke: rgba(255,255,255,.10);
  --stroke-2: rgba(255,255,255,.14);
  --text: #eaf1ef;
  --text-2: rgba(234,241,239,.72);
  --text-3: rgba(234,241,239,.58);

  --danger: #ff5a5a;
  --warn: #ffd966;

  --r-10: 10px;
  --r-12: 12px;
  --r-14: 14px;
  --r-16: 16px;
  --shadow-1: 0 10px 22px rgba(0,0,0,.78);
  --shadow-2: 0 18px 46px rgba(0,0,0,.88);
  --shadow-neon: 0 0 18px rgba(0,255,195,.12);
}


/* Utility */
.tiny { font-size:15px; color:#9a9a9a; line-height:1.35; }
/* =========================
   RESET / BASE
========================= */
*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  min-height: 100%;
  font-family: system-ui, -apple-system, "Inter", sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* "Больше неона" в фоне: лёгкие ауры + тёмный teal */
  background:
    radial-gradient(1000px 620px at 12% 10%, rgba(0,255,195,0.14), transparent 55%),
    radial-gradient(900px 560px at 92% 92%, rgba(0,255,195,0.12), transparent 58%),
    radial-gradient(900px 520px at 75% 12%, rgba(0,255,195,0.08), transparent 60%),
    linear-gradient(135deg, var(--bg-1), var(--bg-0));
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

body{ overflow-x:hidden; }

/* Prevent layout shift from scrollbar (Chrome/Edge) */
html{ scrollbar-gutter: stable; overflow-x:hidden; }

/* =========================
   LINKS DEFAULT (глобально)
========================= */
a{ color:inherit; }

/* =========================
   ACCESSIBILITY / SELECTION
========================= */
::selection{
  background: rgba(0,255,195,.22);
  color: var(--text);
}

/* =========================
   WRAPPER / CARD
========================= */
.auth-wrapper{
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.auth-card{
  width:100%;
  max-width:420px;

  /* Профессиональная "стеклянная" карта с зелёным оттенком */
  background: rgba(3, 14, 12, 0.92);
  border-radius: var(--r-16);
  border: 1px solid rgba(0,255,195,0.22);
  box-shadow: var(--shadow-neon), var(--shadow-2);
  padding: 22px 22px 18px;
  /* Perf: avoid backdrop-filter blur (causes jank/flicker in some browsers) */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =========================
   HEADER
========================= */
.auth-header{ margin-bottom:18px; }

.auth-title{
  font-size:22px;
  font-weight:800;
  letter-spacing:.03em;
  color: var(--text);
}

.auth-subtitle{
  margin-top:6px;
  font-size:15px;
  color: var(--text-3);
}

/* =========================
   FORM (login / register)
========================= */
.auth-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:6px;
}

.auth-label{
  font-size:15px;
  color: var(--text-2);
  margin-bottom:4px;
}

.auth-field{ display:flex; flex-direction:column; }

.auth-input{
  width:100%;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 20% 0%, rgba(0,255,195,.06), transparent 55%),
    rgba(2, 8, 7, .92);

  padding: 10px 12px;
  font-size: 15px;
  color: var(--text);
  outline:none;
  transition: .18s border, .18s box-shadow, .18s background, .18s transform;
}

.auth-input::placeholder{ color: rgba(234,241,239,.42); }

.auth-input:focus{
  border-color: rgba(0,255,195,.72);
  box-shadow:
    0 0 0 2px rgba(0,255,195,.18),
    0 0 0 1px rgba(0,255,195,.18) inset;
}

/* =========================
   BUTTONS — GLOBAL SYSTEM
   (чтобы ВСЕ кнопки выглядели одинаково круто)
========================= */
.btn,
button.btn,
a.btn,
input[type="submit"].btn,
input[type="button"].btn,
input[type="reset"].btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 14px;
  cursor:pointer;
  text-decoration:none;
  white-space:normal !important;
  flex-wrap: wrap !important;
  text-align:center !important;
  line-height: 1.25 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;

  user-select:none;
  -webkit-tap-highlight-color: transparent;

  transition:
    .18s background,
    .18s border-color,
    .18s color,
    .18s box-shadow,
    .18s transform,
    .18s filter;
}

.btn:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(0,255,195,.24),
    0 0 0 1px rgba(0,255,195,.22) inset,
    0 10px 22px rgba(0,0,0,.76);
}

.btn:active{ transform: translateY(0); }

.btn[disabled],
.btn.disabled,
button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  filter:saturate(.85);
}

/* ===== PRIMARY (НЕОН) ===== */
.btn-primary,
.auth-button,
.wallet-main-btn{
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.20), transparent 40%),
    linear-gradient(90deg, var(--neon), rgba(0,255,195,.78));
  border-color: rgba(0,255,195,.65);
  color: #061010;
  text-transform: uppercase;
  letter-spacing: .06em;

  box-shadow:
    0 8px 20px rgba(0,0,0,.82),
    0 0 0 1px rgba(0,255,195,.12) inset,
    0 0 14px rgba(0,255,195,.22);
}

.btn-primary:hover,
.auth-button:hover,
.wallet-main-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.88),
    0 0 0 1px rgba(0,255,195,.16) inset,
    0 0 18px rgba(0,255,195,.26);
  filter: brightness(1.02);
}

.btn-primary:active,
.auth-button:active,
.wallet-main-btn:active{
  transform: translateY(0);
  box-shadow:
    0 7px 16px rgba(0,0,0,.86),
    0 0 0 1px rgba(0,255,195,.12) inset,
    0 0 12px rgba(0,255,195,.18);
}

/* ===== NEWS READ (отдельная кнопка для "Прочитано") ===== */
.btn-news-read{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,195,.18), transparent 45%),
    linear-gradient(135deg, rgba(0,255,195,.16), rgba(0,170,127,.10));
  border-color: rgba(0,255,195,.55);
  color: rgba(0,255,195,.96);
  font-weight: 950;
  letter-spacing: .02em;
  box-shadow:
    0 8px 18px rgba(0,0,0,.82),
    0 0 0 1px rgba(0,255,195,.12) inset,
    0 0 14px rgba(0,255,195,.14);
}

.btn-news-read:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow:
    0 10px 22px rgba(0,0,0,.88),
    0 0 0 1px rgba(0,255,195,.16) inset,
    0 0 18px rgba(0,255,195,.18);
}

.btn-news-read:active{ transform: translateY(0); }

/* чуть мягче для кошелька */
.wallet-main-btn{
  box-shadow:
    0 7px 18px rgba(0,0,0,.84),
    0 0 0 1px rgba(0,255,195,.10) inset,
    0 0 12px rgba(0,255,195,.18);
}

/* ===== GHOST / SECONDARY ===== */
.btn-ghost,
.dashboard-exit-btn,
.wallet-btn{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,195,.06), transparent 45%),
    rgba(2, 10, 9, .88);
  border-color: rgba(0,255,195,.18);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(0,0,0,.82);
}

.btn-ghost:hover,
.dashboard-exit-btn:hover,
.wallet-btn:hover{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,195,.08), transparent 50%),
    rgba(6, 20, 17, .88);
  border-color: rgba(0,255,195,.28);
  transform: translateY(-1px);
}

.btn-ghost:active,
.dashboard-exit-btn:active,
.wallet-btn:active{
  transform: translateY(0);
}

/* Служебные: чтобы формы с .auth-button и пр. не ломались */
.auth-button{ margin-top:8px; width:100%; }
.btn-primary{ width:100%; } /* как у тебя было — не ломает формы */

/* =========================
   LINKS / FOOTER (auth)
========================= */
.auth-footer{
  margin-top:14px;
  font-size:15px;
  color: var(--text-3);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
}

.auth-link{
  color: var(--neon);
  text-decoration:none;
  font-weight:700;
}

.auth-link:hover{ text-decoration: underline; }

/* =========================
   ALERTS
========================= */
.auth-alert{
  margin-bottom:10px;
  padding: 10px 11px;
  border-radius: 11px;
  font-size:15px;
  line-height:1.4;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2, 10, 9, .80);
}

.auth-alert-error{
  background: rgba(255, 90, 90, 0.12);
  border: 1px solid rgba(255, 90, 90, 0.55);
  color: #ffb1b1;
}

.auth-alert-success{
  background: rgba(0, 255, 195, 0.10);
  border: 1px solid rgba(0, 255, 195, 0.55);
  color: #b8fff0;
}

/* =========================
   MOBILE BASE
========================= */
@media (max-width: 480px){
  .auth-card{
    padding: 18px 16px 14px;
    border-radius: 14px;
  }
  .auth-title{ font-size:20px; }
  .auth-wrapper{
    padding:12px;
    padding-bottom:24px;
  }
  /* iOS/Safari: предотвращаем автозум при фокусе */
  .auth-input{ font-size:16px; }
}

/* =========================
   DASHBOARD (index.php)
========================= */
.dashboard-top{
  margin-bottom:18px;
  font-size:15px;
  color: var(--text-3);
  line-height:1.5;
}

.dashboard-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-bottom:18px;
}

/* Карточки */
.dash-card{
  border-radius: var(--r-14);
  border: 1px solid rgba(0,255,195,.12);
  background:
    radial-gradient(circle at top left, rgba(0,255,195,0.08), transparent 60%),
    rgba(2, 12, 10, .86);
  padding: 14px 13px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow: var(--shadow-1);
}

/* ===== Поддержка: непрочитанный ответ (синяя анимация) ===== */
.dash-card-support-unread{
  border-color: rgba(56, 151, 255, 0.55) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.86),
    0 0 0 1px rgba(56,151,255,0.20),
    0 0 28px rgba(56,151,255,0.22);
  position: relative;
  overflow: hidden;
}
.dash-card-support-unread::before{
  content:'';
  position:absolute;
  inset:-120px -180px auto auto;
  width:260px;
  height:260px;
  background: radial-gradient(circle at 30% 30%, rgba(56,151,255,0.32), transparent 60%);
  filter: none;
  animation: none;
  pointer-events:none;
}

.support-unread-pill{
  border-color: rgba(56,151,255,0.70) !important;
  color: rgba(208, 231, 255, 0.96) !important;
  background: rgba(56,151,255,0.12) !important;
  gap:8px;
  align-items:center;
}
.support-unread-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: rgba(56,151,255,0.95);
  box-shadow: 0 0 0 0 rgba(56,151,255,0.55);
  animation: none;
}



/* Ссылка-карточка */
.dash-card-link{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}

/* Поддержка: когда карточка переносится выше документации */
.dash-card-support-top{margin-bottom:12px;}


.dash-card-link:hover{
  border-color: rgba(0,255,195,0.30);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.86),
    0 0 0 1px rgba(0,255,195,0.12);
  transform: translateY(-1px);
  transition: .18s border-color, .18s box-shadow, .18s transform;
}

.dash-card-link:active{ transform: translateY(0); }

.dash-card-link:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(0,255,195,0.26),
    0 12px 28px rgba(0,0,0,0.86);
  border-color: rgba(0,255,195,0.40);
}

.dash-card-title{
  font-size:15px;
  font-weight:700;
  color: var(--text);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap: wrap;
  min-width: 0;
}

.dash-card-pill{
  font-size: 15px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,195,0.38);
  color: rgba(0,255,195,0.85);
  background: rgba(0,255,195,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* show full text: wrap by words (no ellipsis) */
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  flex-shrink: 1;

  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;

  line-height: 1.25;
  text-align: center;

  overflow: hidden;
  text-overflow: clip;
}

.dash-card-sub{
  font-size:15px;
  color: var(--text-3);
}

.dash-card-main-value{
  font-size: 20px;
  font-weight: 900;
  color: var(--neon);
  text-shadow: 0 0 10px rgba(0,255,195,.18);
}

/* Основное действие под карточками */
.dashboard-main-action{ margin-top:4px; }

/* Низ главной */
.dashboard-footer-row{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  font-size:15px;
  color: var(--text-3);
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.dashboard-footer-row form{ margin:0; }

.dashboard-footer-text{ max-width: 240px; }

/* Мобильная адаптация для главной */
@media (max-width: 480px){
  .dashboard-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .dash-card-title{ gap:4px; }
  .dash-card-pill{ font-size:13px; padding:2px 6px; }
}

/* =========================
   WALLET PAGE
========================= */
.wallet-balance{
  margin-bottom:18px;
  padding: 14px 12px;
  border-radius: var(--r-12);
  border: 1px solid rgba(0,255,195,.14);
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,195,.07), transparent 55%),
    rgba(2, 12, 10, .86);
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow: 0 10px 22px rgba(0,0,0,.72);
}

.wallet-balance-label{
  font-size:15px;
  color: var(--text-3);
}

.wallet-balance-value{
  font-size:22px;
  font-weight:900;
  color: var(--neon);
  text-shadow: 0 0 10px rgba(0,255,195,.18);
}

/* Дополнительные действия в кошельке */
.wallet-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:20px;
}

.wallet-btn{ flex: 1 1 140px; }

/* История операций */
.wallet-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.wallet-table{
  width:100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 500px;

  background: rgba(2, 10, 9, .86);
  border-radius: 12px;
  border: 1px solid rgba(0,255,195,.14);
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.72);
}

.wallet-table thead th{
  background: rgba(0, 255, 195, 0.06);
  color: rgba(234,241,239,.82);
  padding: 9px 10px;
  text-align:left;
  border-bottom: 1px solid rgba(0,255,195,.10);
  white-space:nowrap;
}

.wallet-table tbody td{
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(234,241,239,.78);
}

.wallet-table tbody tr:hover td{
  background: rgba(0,255,195,.04);
}

/* типы */
.wallet-type-deposit{ color: var(--neon); }
.wallet-type-withdraw,
.wallet-type-order{ color: #ff7b7b; }
.wallet-type-refund{ color: var(--warn); }

/* =========================
   MISC MOBILE
========================= */
@media (max-width: 480px){
  .wallet-table{ min-width: 100%; }
  .wallet-actions .btn,
  .wallet-actions .wallet-btn{ flex: 1 1 100%; }
}

/* =========================
   BILLING LOGO NeonGO .bot
========================= */
.billing-logo{
  display:flex;
  justify-content:center;
  margin-bottom:18px;
  margin-top:4px;
}

.billing-logo-title{
  font-size:24px;
  font-weight: 900;
  color: var(--neon);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-shadow: 0 0 16px rgba(0,255,195,.18);
}

/* мигающий курсор */
.billing-logo-caret{
  display:inline-block;
  width:6px;
  height:18px;
  margin-left:2px;
  border-radius:2px;
  background: var(--neon);
  /* курсор должен мигать (раньше мигал, но анимацию случайно выключили) */
  animation: billingCaretBlink 0.9s steps(1, end) infinite;
  transform: translateY(2px);
}

@keyframes billingCaretBlink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: 0; }
}




/* =========================
   TICKETS: MESSAGES
========================= */
.ticket-messages{
  max-height: 360px;
  overflow-y:auto;
  padding: 10px 6px;
  margin-bottom:10px;
  border-radius: 12px;

  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,195,.06), transparent 55%),
    rgba(2, 10, 9, .86);
  border: 1px solid rgba(0,255,195,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.72);
}

.ticket-message-row{ display:flex; margin-bottom:8px; }
.ticket-message-row.from-client{ justify-content:flex-end; }
.ticket-message-row.from-admin{ justify-content:flex-start; }

.ticket-bubble{
  max-width: 92%;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.42;
  box-shadow: 0 8px 18px rgba(0,0,0,.82);
}

.ticket-bubble-client{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,195,.08), transparent 55%),
    rgba(4, 28, 23, .86);
  border: 1px solid rgba(0,255,195,.28);
}

.ticket-bubble-admin{
  background: rgba(6, 16, 14, .86);
  border: 1px solid rgba(255,255,255,.10);
}

.ticket-meta{
  display:flex;
  justify-content:space-between;
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--text-3);
}

/* внутренние */
.ticket-bubble-internal{
  background: rgba(18, 18, 18, .78);
  border: 1px dashed rgba(255, 179, 71, .55);
  box-shadow: 0 0 14px rgba(255, 179, 71, 0.10);
}

.ticket-internal-label{
  display:inline-block;
  margin-left: 6px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ffb347;
  opacity: .92;
}

/* =========================
   DESKTOP SCALE UP
========================= */
@media (min-width: 1024px){
  /* Desktop: make layout almost full-width (but keep a premium max for huge monitors) */
  .auth-wrapper{
    padding: 20px 24px;
  }

  .auth-card{
    /* Near full browser width, with safe gutters */
    width: 100%;
    max-width: 1680px;
    /* safety: keep premium max-width; avoid ultra-wide repaint */
    /* max-width: none;  (removed) */
    padding: 34px 34px 26px;
    border-radius: 20px;
  }
.dashboard-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .dash-card{ padding: 18px 18px 16px; }

  .dash-card-main-value{ font-size: 26px; }

  .auth-title{ font-size: 28px; }

  .auth-subtitle,
  .dashboard-top{ font-size: 15px; }

  .btn{ font-size: 16px; padding: 12px 18px; }

  .auth-input{ font-size: 16px; padding: 12px 14px; }
}

@media (min-width: 1440px){
  /* Very wide screens: keep comfortable side gutters */
  .auth-wrapper{ padding: 24px 32px; }
  .auth-card{ max-width: 1760px; }
}/* =========================================================
   PRO TYPOGRAPHY + CONSISTENT FORMS (WOW readability)
   Added as an override layer (safe for existing layout)
========================================================= */

/* Better text rendering */
html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}

body{
  font-size: 16px;           /* base readability */
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--text);
}

/* Optional: make headings feel premium but not huge */
h1,h2,h3,h4{
  letter-spacing: .02em;
  line-height: 1.25;
  color: var(--text);
}

/* Make common text blocks more readable */
p, li, td, th, label{
  color: rgba(234,241,239,.82);
}

/* ---------------------------------------------------------
   Tables (global neon pro)
--------------------------------------------------------- */
.table-wrapper,
.table-wrap,
.bots-table-wrapper,
.wallet-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Global table style (won't break existing wallet-table) */
table{
  border-collapse: collapse;
}

/* If your project uses generic tables: */
.table,
.bots-table{
  width: 100%;
  min-width: 520px;
  background: rgba(2, 10, 9, .86);
  border: 1px solid rgba(0,255,195,.14);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.72);
}

.table thead th,
.bots-table thead th{
  background: rgba(0,255,195,.06);
  color: rgba(234,241,239,.86);
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0,255,195,.10);
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: .02em;
}

.table tbody td,
.bots-table tbody td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(234,241,239,.82);
}

.table tbody tr:hover td,
.bots-table tbody tr:hover td{
  background: rgba(0,255,195,.04);
}

/* ---------------------------------------------------------
   Pagination (global)
--------------------------------------------------------- */
.pagination,
.table-pagination{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  margin-top: 12px;
}

.pagination .btn,
.table-pagination .btn,
.pagination a,
.table-pagination a{
  min-width: 42px;
  height: 40px;
  padding: 0 12px;
}

.pagination .active,
.table-pagination .active{
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.20), transparent 40%),
    linear-gradient(90deg, var(--neon), rgba(0,255,195,.78));
  color: #061010;
  border: 1px solid rgba(0,255,195,.65);
}


/* ---------------------------------------------------------
   News modal layout (scroll-safe on mobile)
--------------------------------------------------------- */
.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.modal[style*="display:none"]{ /* keep hidden when inline hidden */
  display: none !important;
}

.modal-content{
  width: 100%;
  margin: 0 auto;
  max-height: calc(100vh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.news-modal-actions{
  position: sticky;
  bottom: -1px;
  padding-top: 12px;
  margin-top: 12px !important;
  background: linear-gradient(to top, rgba(3,14,12,.98), rgba(3,14,12,.70), rgba(3,14,12,0));
  border-top: 1px solid rgba(0,255,195,.12);
}


/* Обычный ряд действий без липкой затемнённой подложки —
   нужен там, где кнопки должны выглядеть как на docs.php без квадратного шлейфа. */
.modal-actions-plain{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.modal-actions-plain > .btn{
  align-self:flex-start;
}

/* Мягкая вторичная тень в той же логике, что и у эталонной кнопки сохранения из docs.php */
.btn-shadow-clean-secondary{
  box-shadow:
    0 8px 20px rgba(0,0,0,.82),
    0 0 0 1px rgba(0,255,195,.10) inset,
    0 0 12px rgba(0,255,195,.12);
}

.btn-shadow-clean-secondary:hover{
  box-shadow:
    0 10px 24px rgba(0,0,0,.88),
    0 0 0 1px rgba(0,255,195,.14) inset,
    0 0 16px rgba(0,255,195,.16);
}

.btn-shadow-clean-secondary:active{
  box-shadow:
    0 7px 16px rgba(0,0,0,.86),
    0 0 0 1px rgba(0,255,195,.10) inset,
    0 0 10px rgba(0,255,195,.12);
}

@media (max-width: 520px){
  .modal{ padding: 10px; }
  .modal-content{
    margin: 0 auto;
    max-height: calc(100vh - 20px);
  }
}

/* ---------------------------------------------------------
   Modals (if used) — subtle neon glass
--------------------------------------------------------- */
.modal,
.modal-content{
  border-radius: 14px;
}

.modal-content{
  background: rgba(3, 14, 12, 0.94);
  border: 1px solid rgba(0,255,195,.20);
  box-shadow: var(--shadow-neon), var(--shadow-2);
  /* Perf: avoid backdrop-filter blur (causes jank/flicker in some browsers) */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------------------------------------------------------
   Switches / toggles (generic)
--------------------------------------------------------- */
.switch,
.toggle,
.form-switch{
  --sw-h: 28px;
  --sw-w: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.switch input,
.toggle input,
.form-switch input{
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  border: 1px solid rgba(0,255,195,.26);
  background: rgba(2,10,9,.86);
  cursor: pointer;
  position: relative;
  outline: none;
  box-shadow: none;
  transition: .18s background, .18s border-color, .18s box-shadow;
}

.switch input::before,
.toggle input::before,
.form-switch input::before{
  content:"";
  position: absolute;
  top: 50%;
  left: 4px;
  width: calc(var(--sw-h) - 10px);
  height: calc(var(--sw-h) - 10px);
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(234,241,239,.75);
  box-shadow: 0 6px 14px rgba(0,0,0,.70);
  transition: .18s transform, .18s background;
}

.switch input:checked,
.toggle input:checked,
.form-switch input:checked{
  background: rgba(0,255,195,.12);
  border-color: rgba(0,255,195,.62);
  box-shadow: 0 0 0 2px rgba(0,255,195,.14);
}

.switch input:checked::before,
.toggle input:checked::before,
.form-switch input:checked::before{
  transform: translate(calc(var(--sw-w) - var(--sw-h)), -50%);
  background: var(--neon);
}

/* ---------------------------------------------------------
   Scrollbars (neon, but subtle)
--------------------------------------------------------- */
*::-webkit-scrollbar{ height: 10px; width: 10px; }
*::-webkit-scrollbar-track{ background: rgba(0,0,0,.35); border-radius: 999px; }
*::-webkit-scrollbar-thumb{
  background: rgba(0,255,195,.28);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.35);
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(0,255,195,.38); }

/* ---------------------------------------------------------
   Mobile safety: avoid breaking your layout
--------------------------------------------------------- */
@media (max-width: 480px){
  body{ font-size: 16px; }
  .table, .bots-table{ min-width: 100%; }
}

/* =========================================================
   TICKETS — SINGLE FINAL STYLE (Notebook left + stable bubble + quiet date)
   Goals:
   ✍️ text always left (like a notebook)
   🧱 bubble never breaks on short messages
   🕒 date always inside, bottom-right
   👁️ date is very subtle
========================================================= */

/* Safety for flex/grid shrinking */
.ticket-message-row,
.ticket-bubble,
.ticket-meta{ min-width: 0; }

/* Messages container keeps existing look; just ensure smooth scrolling */
.ticket-messages{
  -webkit-overflow-scrolling: touch;
}

/* Bubble layout: grid so time participates in width (prevents overflow) */
.ticket-bubble{
  display: inline-grid !important;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  row-gap: 4px;

  width: fit-content !important;
  max-width: 92% !important;

  text-align: left !important;
  padding: 10px 12px !important;
}

/* Name row (compact) */
.ticket-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;

  margin: 0 !important;
  line-height: 1.1 !important;

  font-size: 15px;
  color: var(--text-3);
}

/* Name (can truncate if needed) */
.ticket-who{
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Message text: notebook feel, keeps line breaks, wraps long tokens */
.ticket-text{
  color: var(--text);

  text-align: -webkit-match-parent !important;
  text-align: match-parent !important;

  white-space: pre-line !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Attachments: keep inside bubble */
.ticket-attachments{
  margin-top: 6px;
  font-size: 15px;
  color: var(--text-2);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ticket-attachments img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.70);
  margin-top: 8px;
}

/* =========================
   TICKETS: IMAGE MODAL (single instance)
   Fixes: mobile overflow + page freezing from repeated DOM inserts
========================= */
.ticket-img-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ticket-img-modal.is-open{ display:flex; }

.ticket-img-modal-dialog{
  width: min(980px, 100%);
  max-height: 92vh;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8, 8, 8, .92);
  box-shadow: 0 18px 46px rgba(0,0,0,.85);
  display: flex;
  flex-direction: column;
}

.ticket-img-modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(12,12,12,.92);
}

.ticket-img-modal-title{
  font-size: 15px;
  color: #cfcfcf;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-img-modal-close{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(4,4,4,.85);
  color: #ededed;
  border-radius: 10px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 15px;
}
.ticket-img-modal-close:hover{
  background: rgba(18,18,18,.9);
  border-color: rgba(255,255,255,.28);
}

.ticket-img-modal-body{
  padding: 12px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ticket-img-modal-body img{
  display:block;
  width: 100%;
  height: auto;
  max-height: 84vh;
  object-fit: contain;
  border-radius: 12px;
}

/* Date/time: in-flow, bottom-right inside bubble, very quiet */
.ticket-time,
.ticket-date,
.ticket-meta-date{
  position: static !important;      /* participate in layout width */
  justify-self: end !important;     /* right */
  align-self: end !important;       /* bottom */

  margin: 6px 0 0 0 !important;

  font-size: 15px !important;
  line-height: 1 !important;
  color: rgba(234,241,239,.22) !important;

  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Mobile: full width bubbles + even quieter time */
@media (max-width: 480px){
  .ticket-bubble{ max-width: 100% !important; }
  .ticket-time,
  .ticket-date,
  .ticket-meta-date{
    font-size: 9px !important;
    color: rgba(234,241,239,.18) !important;
  }
}


/* =========================
   PIN CHALLENGE (admin view)
========================= */
/* .ticket-text uses white-space: pre-line to preserve message formatting.
   PIN cards are UI blocks and must not inherit those line breaks/indents. */
.ticket-text .pin-card,
.ticket-text .pin-card *{
  white-space: normal !important;
}

.ticket-text .pin-card{
  margin-top: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pin-card-title{
  font-weight: 800;
  margin: 0 0 6px 0;
}

.pin-card-note{
  margin: 0 0 10px 0;
  color: var(--muted);
}

.pin-meta{
  display: inline-block;
  margin-left: 6px;
  font-size: 15px;
  opacity: .85;
}

/* Mobile fix: prevent iOS/Android visual viewport jump / zoom on PIN input focus */
.pin-form .pin-input{
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 640px){
  .pin-form{
    align-items: stretch;
  }

  .pin-form .pin-input,
  .pin-form .pin-btn{
    width: 100%;
    min-height: 44px;
  }
}


/* =========================
   SERVER STATS CHART (v1)
========================= */
.stats-panel{ padding:14px; }
.stats-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.stats-title{ font-weight:950; font-size:16px; color:#e9fff8; }
.stats-sub{ font-size:15px; color:rgba(255,255,255,.65); margin-top:4px; line-height:1.35; }

.stats-controls{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:12px;
}
.stats-field{ display:flex; flex-direction:column; gap:6px; min-width:180px; flex:1 1 200px; }
.stats-field span{ font-size:15px; color:rgba(255,255,255,.7); font-weight:800; letter-spacing:.2px; }
.stats-field .input{
  width:100%;
  background:#050505;
  border:1px solid rgba(0,255,195,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45) inset, 0 10px 30px rgba(0,255,195,.06);
  color:#eaeaea;
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.stats-field .input:focus{ border-color: rgba(0,255,195,.55); box-shadow: 0 0 0 4px rgba(0,255,195,.10); }

.stats-ranges{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex:2 1 280px;
  justify-content:flex-end;
  flex-wrap:wrap;
  min-width:0;
}
.range-btn{
  flex:0 0 auto;

  appearance:none; border:1px solid rgba(0,255,195,.18);
  background:#060606;
  color:#d9d9d9;
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
  font-size:15px;
  cursor:pointer;
  transition: transform .06s ease, border-color .15s ease, box-shadow .15s ease;
}
.range-btn:hover{ border-color: rgba(0,255,195,.45); box-shadow: 0 0 0 4px rgba(0,255,195,.10); }
.range-btn:active{ transform: scale(.98); }
.range-btn.is-active{
  border-color: rgba(0,255,195,.70);
  box-shadow: 0 0 0 4px rgba(0,255,195,.12), 0 12px 40px rgba(0,255,195,.10);
  color:#eafff8;
}

.stats-body{ margin-top:12px; }
.stats-legend{ font-size:15px; color:rgba(255,255,255,.75); margin-bottom:10px; }
.stats-legend-line b{ color:#eafff8; }

.stats-chart-wrap{
  background: linear-gradient(180deg, rgba(0,255,195,.06), rgba(0,0,0,.0));
  border:1px solid rgba(0,255,195,.16);
  border-radius:16px;
  padding:12px;
  overflow:hidden;
}
.stats-chart{ min-height:260px; position:relative; }
.stats-empty{ min-height:260px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:rgba(255,255,255,.70);
  font-weight:800;
  padding:12px;
}

.stats-bars{
  height:180px;
  display:flex;
  align-items:flex-end;
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
}
.stats-bars::-webkit-scrollbar{ height:8px; }
.stats-bars::-webkit-scrollbar-thumb{ background: rgba(0,255,195,.22); border-radius:999px; }
.stats-bars::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius:999px; }

.stats-bar{
  width:10px;
  min-width:10px;
  border-radius:10px;
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}
.stats-bar.g{ background: rgba(0,255,195,.85); }
.stats-bar.y{ background: rgba(255,193,7,.85); }
.stats-bar.r{ background: rgba(255,64,64,.85); }

.stats-bar:hover{ filter: brightness(1.08); transform: translateY(-1px); }

.stats-tip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform: translateX(-50%);
  background:#050505;
  border:1px solid rgba(0,255,195,.24);
  border-radius:12px;
  padding:10px 10px;
  min-width:160px;
  box-shadow: 0 18px 45px rgba(0,0,0,.55), 0 0 0 4px rgba(0,255,195,.06);
  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease;
  z-index:20;
}
.stats-bar:hover .stats-tip{ opacity:1; }
.stats-tip .k{ font-size:15px; color:rgba(255,255,255,.70); font-weight:900; margin-bottom:6px; }
.stats-tip .v{ font-size:15px; color:#eaeaea; font-weight:800; line-height:1.25; }

.stats-foot{
  margin-top:10px;
  font-size:15px;
  color:rgba(255,255,255,.70);
}
.stats-foot b{ color:#eafff8; }

@media (max-width: 720px){
  /* Mobile: don't squash the chart vertically (it becomes unreadable). */
  
  .stats-chart{ height:auto; min-height:260px; }
  .stats-empty{ min-height:260px; }
  .stats-bars{ height:180px; }
  .stats-ranges{
    width:100%;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }
  .stats-ranges::-webkit-scrollbar{ height:8px; }
  .stats-ranges::-webkit-scrollbar-thumb{ background: rgba(0,255,195,.22); border-radius:999px; }
  .stats-ranges::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius:999px; }

  .stats-field{ min-width: 0; }
  .stats-bar{ width:9px; min-width:9px; }
}


/* =========================
   SERVER STATS CHART (v2 hospital-style)
========================= */
.stats-scroll{
  /* Allow scrolling both directions when chart is wider than viewport */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.stats-scroll::-webkit-scrollbar{ height:10px; }
.stats-scroll::-webkit-scrollbar-thumb{ background: rgba(0,255,195,.22); border-radius:999px; }
.stats-scroll::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius:999px; }

.stats-svg{ display:block; }
.zone-green{ fill: rgba(0,255,195,.10); }
.zone-yellow{ fill: rgba(255,193,7,.10); }
.zone-red{ fill: rgba(255,64,64,.10); }

.grid{ stroke: rgba(255,255,255,.10); stroke-width:1; }
.grid-bold{ stroke: rgba(255,255,255,.16); stroke-width:1; }

.plot-border{ fill: transparent; stroke: rgba(0,255,195,.18); stroke-width:1; }

.line{ fill:none; stroke: rgba(0,255,195,.86); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.line-glow{ fill:none; stroke: rgba(0,255,195,.22); stroke-width:7; stroke-linejoin:round; stroke-linecap:round; filter: none; }

.dot{ fill: rgba(255,255,255,.70); }
.dot-ring{ fill: rgba(0,255,195,.95); stroke: rgba(0,255,195,.20); stroke-width:6; }

.y-label{ fill: rgba(255,255,255,.70); font-size:15px; font-weight:900; }
.x-label{ fill: rgba(255,255,255,.78); font-size:15px; font-weight:950; }
.x-sublabel{ fill: rgba(255,255,255,.48); font-size:15px; font-weight:900; }

.x-tick{ stroke: rgba(255,255,255,.20); stroke-width:1; }

.last-text{ fill: #eafff8; font-size:15px; font-weight:950; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width:3; }

@media (max-width: 720px){
  .stats-chart{ min-height:240px; }
  .stats-empty{ min-height:240px; }
}


/* Hover tooltip (exact values) */
.hover-line{ stroke: rgba(255,255,255,.22); stroke-width:1; stroke-dasharray: 3 4; }
.hover-dot{ fill: rgba(0,255,195,.95); stroke: rgba(0,0,0,.55); stroke-width:2; }
.hover-hit{ cursor: crosshair; }

.hover-tip-bg{
  fill: rgba(10,14,22,.92);
  stroke: rgba(0,255,195,.20);
  stroke-width:1;
}
.hover-tip-t1{ fill: rgba(255,255,255,.88); font-size:15px; font-weight:950; }
.hover-tip-t2{ fill: rgba(0,255,195,.95); font-size:15px; font-weight:950; }

/* ===== Overall (all-time) averages badges ===== */
.stats-overall{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  margin-top:10px;
  border:1px solid rgba(0,255,195,.18);
  border-radius:16px;
  background: rgba(8,14,20,.35);
  box-shadow: 0 0 20px rgba(0,255,195,.06) inset;
}
.stats-overall.is-loading{ opacity:.8; filter:saturate(.9); }
.overall-title{
  font-weight:900;
  color: rgba(255,255,255,.86);
  letter-spacing:.2px;
  white-space:nowrap;
}
.overall-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.overall-badge{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,255,195,.18);
  background: rgba(0,0,0,.18);
}
.overall-badge .k{ color: rgba(255,255,255,.70); font-weight:800; font-size:15px; }
.overall-badge .v{ color: rgba(0,255,195,.95); font-weight:950; font-size:15px; }
@media (max-width: 640px){
  .stats-overall{ flex-direction:column; align-items:flex-start; }
  .overall-badges{ justify-content:flex-start; }
}


/* Mobile: make hospital chart readable */
@media (max-width: 720px){
  .stats-chart-wrap{ padding: 10px; }
  .stats-scroll{ padding-bottom: 10px; }
}


/* ===== Mobile fixes for stats controls (avoid huge vertical gaps) ===== */
@media (max-width: 680px){
  .stats-controls{
    flex-direction: column;
    align-items: stretch;
  }
  /* In column flex, prevent items from stretching vertically */
  .stats-field{
    flex: 0 0 auto;
    min-width: 0;
  }
  .stats-ranges{
    flex: 0 0 auto;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .stats-ranges::-webkit-scrollbar{ height: 8px; }
  .range-btn{ white-space: nowrap; }
}


/* =========================================================
   admin_tasks.php — "Тихо удалить" (checkbox visibility)
   Goal: checked state must be obvious on dark neon UI
========================================================= */
.delete-silent-wrap{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,255,195,.18);
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,195,.08), transparent 55%),
    rgba(2, 10, 9, .86);
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
  cursor:pointer;
  user-select:none;
}

.neongo-check{
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 7px;
  border: 1px solid rgba(0,255,195,.55);
  background: rgba(0,0,0,.28);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  position: relative;
  cursor:pointer;
}

.neongo-check:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,255,195,.20), 0 0 0 1px rgba(0,0,0,.55) inset;
}

.neongo-check:checked{
  background: rgba(0,255,195,.20);
  border-color: rgba(0,255,195,.95);
  box-shadow: 0 0 0 3px rgba(0,255,195,.18), 0 0 16px rgba(0,255,195,.22);
}

.neongo-check:checked::after{
  content:"";
  position:absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid rgba(0,255,195,.98);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.delete-silent-text{
  font-size: 15px;
  font-weight: 900;
  color: rgba(234,241,239,.86);
  line-height: 1.2;
}

.delete-silent-badge{
  margin-left: auto;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,195,.42);
  background: rgba(0,255,195,.08);
  color: rgba(0,255,195,.92);
  font-weight: 950;
  font-size: 15px;
  letter-spacing: .06em;
}

.delete-silent-wrap .neongo-check:checked + .delete-silent-text{
  color: rgba(0,255,195,.98);
  text-shadow: 0 0 10px rgba(0,255,195,.16);
}

.delete-silent-wrap .neongo-check:checked ~ .delete-silent-badge{
  display:inline-flex;
}


/* =========================================================
   Billing News (index.php)
========================================================= */
.news-card{
  grid-column: 1 / -1;
  padding: 14px 14px 12px;
}

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

.news-controls{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.news-perpage{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2, 8, 7, .65);
}

.news-perpage-label{
  font-size: 15px;
  color: var(--text-3);
  white-space:nowrap;
}

.news-perpage-select{
  border-radius: 10px;
  border: 1px solid rgba(0,255,195,.22);
  background: rgba(2,10,9,.86);
  color: var(--text);
  padding: 6px 10px;
  font-weight: 800;
  outline: none;
}

.news-unread-pill{
  margin-left: 10px;
  border-color: rgba(0,255,195,0.45);
  background: rgba(0,255,195,0.10);
}

.news-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.news-item{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 12%, rgba(0,255,195,.07), transparent 45%),
    rgba(2, 8, 7, .78);
  padding: 12px 12px 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.62);
}

.news-unread{
  /* unread news highlight (override global .news-item border-color from theme tweaks) */
  border-color: rgba(0,255,195,0.46) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.72) !important,
    0 0 0 1px rgba(0,255,195,0.10) !important,
    0 0 18px rgba(0,255,195,0.16) !important;
}

/* Extra specificity safety */
.news-item.news-unread{
  border-color: rgba(0,255,195,0.46) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.72) !important,
    0 0 0 1px rgba(0,255,195,0.10) !important,
    0 0 18px rgba(0,255,195,0.16) !important;
}

.news-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.news-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 950;
  letter-spacing: .02em;
  color: var(--text);
}

.news-date{
  font-size: 15px;
  color: var(--text-3);
  white-space:nowrap;
}

.news-body{
  margin-top: 8px;
  color: rgba(234,241,239,.76);
  font-size: 15px;
  line-height: 1.45;
  max-height: 220px;
  overflow:auto;
  padding-right: 4px;
}

.news-actions{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.news-admin-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.news-badge-new,
.news-badge-read{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .04em;
  white-space:nowrap;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
}

.news-badge-new{
  border-color: rgba(0,255,195,.50);
  background: rgba(0,255,195,.12);
  color: #a9ffea;
}

.news-badge-read{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,241,239,.60);
}

.news-pagination-wrap{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}


.news-page-info{
  width: 100%;
  text-align: center;
}

.news-page-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 52px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,195,.22);
  background: rgba(0,255,195,.08);
  color: var(--text);
  font-weight: 900;
}

/* Compact buttons helpers */
.btn-xs{
  padding: 8px 12px !important;
  min-height: 38px;
}


.btn-sm{
  padding: 10px 14px !important;
  min-height: 42px;
}
.btn-danger{
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.12), transparent 40%),
    linear-gradient(90deg, rgba(255,90,90,.95), rgba(255,90,90,.70));
  color: #160606;
  border: 1px solid rgba(255,90,90,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.70);
}

.btn-danger:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
  border-color: rgba(255,90,90,.70);
}

@media (max-width: 420px){
  .news-card{ padding: 12px 12px 10px; }
  .news-body{ max-height: 260px; }
  .news-date{ width:100%; text-align:right; }
  .news-actions{ justify-content:flex-start; }
}


/* ===== Billing News: admin icons + right-aligned "Прочитано" ===== */
.news-top-right{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding-right: 0; /* default: no right offset (for non-admin users) */
}

.news-admin-icons{
  display:flex;
  align-items:center;
  gap:6px;
}

.news-icon-btn{
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(0,255,195,.22);
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,195,.08), transparent 55%),
    rgba(2, 10, 9, .88);
  box-shadow: 0 10px 22px rgba(0,0,0,.62);
  cursor:pointer;
  transition: .16s transform, .16s border-color, .16s box-shadow, .16s filter;
}

.news-icon-btn svg{
  width:18px;
  height:18px;
  fill: rgba(0,255,195,.92);
  opacity: .95;
}

.news-icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,255,195,.45);
  box-shadow:
    0 12px 28px rgba(0,0,0,.72),
    0 0 0 4px rgba(0,255,195,.08);
}

.news-icon-btn:active{ transform: translateY(0); }

.news-icon-btn.news-icon-danger{
  border-color: rgba(255,90,90,.38);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,90,90,.10), transparent 55%),
    rgba(18, 6, 6, .55);
}
.news-icon-btn.news-icon-danger svg{ fill: rgba(255,90,90,.92); }

.news-actions{
  align-items:center;
  justify-content:space-between;
}
.news-actions-left,
.news-actions-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.news-actions-right{ margin-left:auto; }

/* Mobile: keep icons from squeezing content */
@media (max-width: 420px){
  .news-icon-btn{ width:38px; height:38px; min-width:38px; min-height:38px; border-radius:12px; }
  .news-top-right{ width:100%; padding-right: 0; }
  .news-date{ width:100%; text-align:right; }

  }


/* =========================================================
   Billing News Loader (index.php)
========================================================= */
.news-loader{
  width:100%;
  min-height: 140px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,255,195,.14);
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 12%, rgba(0,255,195,.10), transparent 55%),
    rgba(2, 8, 7, .70);
  box-shadow: 0 12px 28px rgba(0,0,0,.62);
  padding: 14px 12px;
  text-align:center;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
  will-change: opacity, transform;
}

.news-loader-inner{
  width:100%;
  max-width: 420px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.news-loader-text{
  min-width: 0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.news-loader-spinner{
  width:42px;
  height:42px;
  border-radius: 999px;
  border: 2px solid rgba(0,255,195,.20);
  border-top-color: rgba(0,255,195,.92);
  border-right-color: rgba(0,255,195,.55);
  box-shadow:
    0 0 0 4px rgba(0,255,195,.06),
    0 0 16px rgba(0,255,195,.14);
  animation: newsLoaderSpin .9s linear infinite;
  flex: 0 0 42px;
  transform-origin: 50% 50%;
  will-change: transform;
}

.news-loader-title{
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(234,241,239,.92);
  font-size: 15px;
}

.news-loader-sub{
  margin-top: 4px;
  color: rgba(234,241,239,.62);
  font-size: 15px;
  line-height: 1.25;
}

@media (max-width: 420px){
  .news-loader{
    min-height: 120px;
    padding: 12px 10px;
  }
  .news-loader-inner{ gap:10px; }
  .news-loader-spinner{ width:38px; height:38px; flex-basis:38px; }
}

.news-loader.news-loader-hide{
  opacity: 0;
  transform: translateY(-4px);
  filter: none;
  pointer-events: none;
}

.news-loader-dots{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left: 6px;
  vertical-align: middle;
}

.news-loader-dots span{
  width:4px;
  height:4px;
  border-radius:999px;
  background: rgba(0,255,195,.92);
  opacity: .28;
  animation: newsLoaderDotPulse .95s ease-in-out infinite;
  will-change: transform, opacity;
}

.news-loader-dots span:nth-child(2){ animation-delay: .14s; }
.news-loader-dots span:nth-child(3){ animation-delay: .28s; }

@keyframes newsLoaderSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@keyframes newsLoaderDotPulse{
  0%, 80%, 100%{
    opacity: .28;
    transform: translateY(0) scale(1);
  }
  40%{
    opacity: 1;
    transform: translateY(-2px) scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce){
  .news-loader-spinner,
  .news-loader-dots span{
    animation: none !important;
  }
}



/* =========================================================
   ADMIN MANAGEMENT CARD (index.php)
   Purple separated card for admin/support tools
========================================================= */
.admin-card{
  grid-column: 1 / -1; /* full width like News */
}

.dash-card-admin{
  border-color: rgba(167, 96, 255, .28);
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(167, 96, 255, .18), transparent 55%),
    radial-gradient(700px 420px at 95% 110%, rgba(107, 90, 255, .14), transparent 58%),
    rgba(10, 8, 18, .58);
  box-shadow:
    0 14px 34px rgba(0,0,0,.82),
    0 0 0 1px rgba(167, 96, 255, .10) inset,
    0 0 26px rgba(167, 96, 255, .12);
}

.dash-card-admin .dash-card-title{
  color: rgba(245, 240, 255, .96);
}

.dash-card-admin .admin-pill{
  border-color: rgba(167, 96, 255, .55);
  background: rgba(167, 96, 255, .12);
  color: rgba(230, 214, 255, .96);
}

.admin-links{
  margin-top: 12px;

  /* Center buttons on any width (including the last row) */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  justify-content: center;   /* <-- keeps rows centered */
  align-items: stretch;
}


/* admin buttons inside purple card */
.admin-link-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  /* sizing for flex layout in .admin-links */
  flex: 1 1 210px;
  max-width: 360px;

  min-height: 48px;
  padding: 12px 12px;
  border-radius: 14px;

  border: 1px solid rgba(167, 96, 255, .28);
  background:
    radial-gradient(circle at 18% 20%, rgba(167, 96, 255, .12), transparent 55%),
    rgba(2, 10, 9, .55);

  color: rgba(245, 240, 255, .90);
  font-weight: 900;
  /* allow long labels to wrap nicely on narrow screens */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.15;
  /* smooth scaling for different viewports */
  font-size: clamp(13px, 2.8vw, 16px);
  letter-spacing: .01em;
  text-decoration:none;

  box-shadow: 0 12px 26px rgba(0,0,0,.72);
  transition: .16s transform, .16s border-color, .16s box-shadow, .16s filter;
}

.admin-link-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(167, 96, 255, .52);
  box-shadow:
    0 14px 34px rgba(0,0,0,.80),
    0 0 0 4px rgba(167, 96, 255, .08);
  filter: brightness(1.03);
}

.admin-link-btn:active{ transform: translateY(0); }

.admin-link-btn:focus-visible{
  outline: none;
  border-color: rgba(167, 96, 255, .70);
  box-shadow:
    0 0 0 2px rgba(167, 96, 255, .22),
    0 14px 34px rgba(0,0,0,.82);
}

@media (max-width: 900px){
  /* keep, but the auto-fit grid already adapts */
  .admin-links{ grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
}

@media (max-width: 480px){
  .admin-links{ grid-template-columns: 1fr; }
  .admin-link-btn{ font-size: 15px; }
}


/* ---------------------------------------------------------
   Tickets: unread highlight (like index support badge)
--------------------------------------------------------- */
.ticket-row-unread td{
  background: rgba(56,151,255,0.10);
  font-weight: 700;
}
.ticket-row-unread:hover td{
  background: rgba(56,151,255,0.14);
}
.ticket-row-unread td:first-child{
  border-left: 3px solid rgba(56,151,255,0.65);
}
.ticket-unread-badge{
  display:inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .04em;
  border-radius: 999px;
  border: 1px solid rgba(56,151,255,0.55);
  color: rgba(214,232,255,0.95);
  background: rgba(56,151,255,0.16);
  box-shadow: 0 0 18px rgba(56,151,255,0.18);
  animation: none;
  vertical-align: middle;
}
/* =========================================================
   ADMIN TICKETS — CREATE BUTTON (NeonGO style)
========================================================= */
.btn-create-ticket{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 10px 18px;
  border-radius: 14px;

  font-size:15px;
  font-weight:900;
  letter-spacing:.02em;

  color:#061010;

  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.25), transparent 45%),
    linear-gradient(90deg, var(--neon), rgba(0,255,195,.78));

  border: 1px solid rgba(0,255,195,.65);

  box-shadow:
    0 0 0 2px rgba(0,255,195,.15),
    0 10px 22px rgba(0,0,0,.55),
    0 0 18px rgba(0,255,195,.22);

  cursor:pointer;
  transition: all .18s ease;
  width:auto !important;
  text-transform:none !important;
}

.btn-create-ticket:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(0,255,195,.25),
    0 16px 30px rgba(0,0,0,.75),
    0 0 24px rgba(0,255,195,.35);
}

.btn-create-ticket:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 2px rgba(0,255,195,.15),
    0 6px 14px rgba(0,0,0,.65),
    0 0 12px rgba(0,255,195,.25);
}


/* =========================================================
   about.php — mobile/tablet safety (tariffs + mini-cards)
   Fixes:
   - "Поддержка клиентов" never overflows
   - PRIME badge "Максимум" stays visible on small widths
========================================================= */

.neo-about-mini-item{ min-width: 0; }
.neo-about-mini-title{
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.neo-about-mini-sub{ text-align: center; }

.neo-tariff-top{ flex-wrap: wrap; align-items: flex-start; }
.neo-tariff-name{ min-width: 0; flex: 1 1 auto; }
.neo-tariff-badge{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 820px){
  .neo-about-mini{ grid-template-columns: 1fr !important; }
}

@media (max-width: 620px){
  .neo-about-mini-title{ font-size: 13px !important; letter-spacing: .10em !important; }
  .neo-tariff-top{ justify-content: flex-start !important; }
  .neo-tariff-badge{ white-space: normal !important; line-height: 1.2 !important; }
}


/* ===== NeonGO mobile-safe fixes for rent plans ===== */
.plan-badge,
.plan-badge-best{
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  line-height: 1.15;
}

.plan-card-top{ flex-wrap: wrap; }

.plan-price{
  white-space: normal;
  max-width: 100%;
}


.plan-price-free{
  display:inline-block;
  font-weight: 900;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow:
    0 0 10px rgba(0,255,195,.28),
    0 0 24px rgba(0,255,195,.14);
  filter: saturate(1.08);
}

.plan-card .plan-price-suf{
  white-space: nowrap;
}

.plan-card input:checked ~ .plan-card-body .plan-price-free,
.plan-card.is-checked .plan-price-free{
  text-shadow:
    0 0 12px rgba(0,255,195,.36),
    0 0 28px rgba(0,255,195,.18);
}

.plan-cta-dot{
  min-width: 10px;
  min-height: 10px;
  flex: 0 0 10px;
  aspect-ratio: 1/1;
}
@media (max-width: 520px){
  .plan-card-top{ flex-direction: column; align-items:flex-start; }
  .plan-price{ text-align:left; }
}


/* =========================================================
   about.php — Tabs responsive for any viewport width
   (prevents cutting titles on нестандартных расширениях)
========================================================= */
.neo-tabs{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:8px;
  align-items:stretch;
}
.neo-tab{
  width:100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.15;
}
@media (max-width: 340px){
  .neo-tabs{ grid-template-columns: 1fr; }
}


/* =========================
   REALTIME STATUS UI
   (badge removed by request)
========================= */
.rt-status-cell{ position:relative; }
.rt-status-label{ vertical-align:middle; }


.rt-spinner{
  display:inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left:8px;
  border-radius:50%;
  border:0.15em solid rgba(0,255,195,.25);
  border-top-color: rgba(0,255,195,.95);
  animation: rt-spin 0.8s linear infinite;
  vertical-align:middle;
  box-shadow: 0 0 0.6em rgba(0,255,195,.18);
}



.rt-actions-muted{
  font-size:14px;
  color:#9aa0a6;
}


/* =========================================================
   LIGHTNESS TUNE (2026-02-19)
   Цель: чуть светлее/читабельнее, без смены концепции (тот же неон/структура)
   ---------------------------------------------------------
   Этот блок идёт В КОНЦЕ файла и аккуратно переопределяет
   ключевые токены/фоны, не ломая существующую верстку.
========================================================= */
:root{
  /* Чуть подняли яркость фонов, сохранив teal/неон */
  --bg-0: #071514;
  --bg-1: #0a2a25;
  --bg-2: #0b1c19;
  --bg-3: #102220;
  --bg-4: #15312e;

  /* Немного контрастнее границы на более светлом фоне */
  --stroke: rgba(255,255,255,.12);
  --stroke-2: rgba(255,255,255,.18);

  /* Тени делаем мягче (меньше "провал" в чёрное) */
  --shadow-1: 0 10px 22px rgba(0,0,0,.60);
  --shadow-2: 0 18px 46px rgba(0,0,0,.70);
}

/* Карточки/модалки — поднимаем фон на пару тонов */
.auth-card{
  background: rgba(10, 26, 24, 0.92);
}

.modal{
  background: rgba(0,0,0,.45);
}
.modal-content{
  background: rgba(12, 28, 26, 0.92);
}

/* Таблицы — чтобы не были "чёрной дырой" */
.table,
.bots-table{
  background: rgba(12, 28, 26, .82);
  box-shadow: 0 10px 22px rgba(0,0,0,.58);
}
.table thead th,
.bots-table thead th{
  background: rgba(0,255,195,.08);
}

/* Глобальные контролы (инпуты/селекты/текстарии) — чуть светлее */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select{
  background:
    radial-gradient(circle at 18% 0%, rgba(0,255,195,.07), transparent 55%),
    rgba(12, 28, 26, .90);
}

/* Точечные тёмные элементы */
.stats-field .input{
  background: #0b1a18;
}
.range-btn{
  background: #0c1e1b;
  color: #eaeaea;
}

/* =========================================================
   LIGHTNESS TUNE v2 (2026-02-19)
   Goal: noticeably brighter, same NeonGO vibe, no layout changes.
   Strategy: override tokens + backgrounds + main surfaces.
========================================================= */
:root{
  /* Keep brand neon */
  --neon: #00ffc3;

  /* Brighter surfaces (less "pure black") */
  --bg-0: #060f0e;   /* page base */
  --bg-1: #0a1715;   /* gradient base */
  --bg-2: #0b1412;   /* underlays */
  --bg-3: #0e1b18;   /* cards */
  --bg-4: #122320;   /* hover */

  /* More readable text + separators */
  --stroke: rgba(255,255,255,.14);
  --stroke-2: rgba(255,255,255,.18);

  --text: #f2fbf8;
  --text-2: rgba(242,251,248,.82);
  --text-3: rgba(242,251,248,.66);

  /* Softer shadows (less heavy black) */
  --shadow-1: 0 10px 22px rgba(0,0,0,.55);
  --shadow-2: 0 18px 46px rgba(0,0,0,.62);
  --shadow-neon: 0 0 18px rgba(0,255,195,.14);
}

html, body{
  /* Brighter backdrop while keeping neon auras */
  background:
    radial-gradient(1100px 700px at 12% 10%, rgba(0,255,195,0.18), transparent 58%),
    radial-gradient(1000px 620px at 92% 92%, rgba(0,255,195,0.16), transparent 60%),
    radial-gradient(900px 520px at 75% 12%, rgba(0,255,195,0.10), transparent 62%),
    radial-gradient(1200px 900px at 50% 45%, rgba(255,255,255,0.06), transparent 62%),
    linear-gradient(135deg, var(--bg-1), var(--bg-0));
  color: var(--text);
}

/* Main surfaces: brighten a bit (glass stays glass) */
.auth-card{
  background: rgba(10, 26, 23, 0.92) !important;
  border-color: rgba(0,255,195,0.24) !important;
  box-shadow: var(--shadow-neon), var(--shadow-2) !important;
}

.dash-card,
.wallet-balance,
.ticket-messages,
.wallet-table,
.news-item,
.table,
.bots-table,
.stats-chart-wrap,
.delete-silent-wrap{
  background:
    radial-gradient(circle at 18% 12%, rgba(0,255,195,0.09), transparent 55%),
    rgba(10, 26, 23, .82) !important;
  border-color: rgba(0,255,195,.16) !important;
  box-shadow: var(--shadow-1) !important;
}

/* Make text blocks more readable */
.dashboard-top,
.dash-card-sub,
.wallet-balance-label,
.news-body,
.ticket-attachments,
.auth-subtitle{
  color: var(--text-3) !important;
}

p, li, td, th, label{
  color: var(--text-2);
}

/* Inputs: lighter field background + clearer border */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select,
.auth-input{
  background:
    radial-gradient(circle at 18% 0%, rgba(0,255,195,.08), transparent 55%),
    rgba(9, 22, 20, .92) !important;
  border-color: rgba(0,255,195,.44) !important;
  color: rgba(242,251,248,.94) !important;
}

input::placeholder,
textarea::placeholder{
  color: rgba(242,251,248,.50) !important;
}

input:focus,
textarea:focus,
select:focus,
.auth-input:focus{
  border-color: rgba(0,255,195,.95) !important;
  box-shadow: 0 0 0 2px rgba(0,255,195,.20) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(0,255,195,.10), transparent 55%),
    rgba(12, 30, 27, .94) !important;
}

/* Tables: brighter header + row hover */
.wallet-table thead th,
.table thead th,
.bots-table thead th{
  background: rgba(0,255,195,0.08) !important;
  color: rgba(242,251,248,.90) !important;
}

.wallet-table tbody td,
.table tbody td,
.bots-table tbody td{
  color: rgba(242,251,248,.86) !important;
}

.wallet-table tbody tr:hover td,
.table tbody tr:hover td,
.bots-table tbody tr:hover td{
  background: rgba(0,255,195,.06) !important;
}

/* Buttons: keep style, lift contrast on dark surfaces */
.btn-ghost,
.dashboard-exit-btn,
.wallet-btn{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,195,.08), transparent 50%),
    rgba(10, 26, 23, .78) !important;
  border-color: rgba(0,255,195,.22) !important;
}

/* Modals: lighter overlay + clearer content */
.modal{ background: rgba(0,0,0,.45) !important; }
.modal-content{
  background: rgba(12, 30, 27, 0.95) !important;
  border-color: rgba(0,255,195,0.24) !important;
}

/* Scrollbars: slightly brighter thumb for visibility */
*::-webkit-scrollbar-thumb{
  background: rgba(0,255,195,.32) !important;
}
*::-webkit-scrollbar-thumb:hover{
  background: rgba(0,255,195,.42) !important;
}

/* =========================================================
   END LIGHTNESS TUNE v2
========================================================= */

/* =========================================================
   LIGHTNESS TUNE v3 (2026-02-19)
   Fix: "fat/double" input borders — return to thin premium lines.
   Works even if earlier override layers exist.
========================================================= */

/* Make form borders thin like original (single 1px line) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select,
.auth-input{
  border-width: 1px !important;
  border-style: solid !important;

  /* thinner look: less saturated border on dark glass */
  border-color: rgba(255,255,255,.12) !important;

  /* remove any extra "inner line" / double shadow */
  box-shadow: none !important;
  outline: none !important;
}

/* Keep neon on focus, but avoid thick ring */
input:focus,
textarea:focus,
select:focus,
.auth-input:focus{
  border-color: rgba(0,255,195,.72) !important;

  /* very subtle glow (doesn't look like 2nd border) */
  box-shadow: 0 0 0 1px rgba(0,255,195,.14) !important;
}

/* Placeholder stays readable but soft */
input::placeholder,
textarea::placeholder{
  color: rgba(234,241,239,.44) !important;
}

/* If browser adds default focus outlines */
*:focus{ outline: none; }

/* =========================================================
   END LIGHTNESS TUNE v3
========================================================= */

/* =========================================================
   FORMS THIN v4 (2026-02-19)
   Goal: restore ultra-thin premium borders (no double rings),
         while keeping readability.
========================================================= */

/* Base controls (including .auth-input) */
.auth-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select{
  border-width: 1px !important;           /* cannot be less than 1px reliably */
  border-style: solid !important;

  /* visually thinner: lower-contrast border (like original) */
  border-color: rgba(255,255,255,.10) !important;

  /* remove any "double border" look */
  box-shadow: none !important;
  outline: none !important;
}

/* Focus: subtle single glow, NOT a thick ring and no inset line */
.auth-input:focus,
input:focus,
textarea:focus,
select:focus{
  border-color: rgba(0,255,195,.62) !important;
  box-shadow: 0 0 0 1px rgba(0,255,195,.12) !important;  /* thin glow */
}

/* If somewhere there is an inset focus line — kill it */
.auth-input:focus{
  box-shadow: 0 0 0 1px rgba(0,255,195,.12) !important;
}

/* Keep placeholders soft */
input::placeholder,
textarea::placeholder{
  color: rgba(234,241,239,.42) !important;
}

/* =========================================================
   END FORMS THIN v4
========================================================= */

/* =========================================================
   FIX: Featured dashboard cards outline (Rent + Support)
   - Rent card: thin GREEN outline always visible
   - Support card when unread: outline turns BLUE and stays BLUE on hover
   (restores behavior that worked with old_style.css)
========================================================= */
.dash-card-featured{
  position: relative; /* needed for ::after outline */
}

/* Always-visible thin outline for featured cards */
.dash-card-featured::after{
  content:'';
  position:absolute;
  inset:0;
  border: 1px solid rgba(0,255,195,0.55);
  border-radius: inherit;
  pointer-events:none;
}

/* Keep green on hover for featured cards */
.dash-card-featured:hover::after{
  border-color: rgba(0,255,195,0.78);
}

/* Support unread = BLUE outline (override featured green) */
.dash-card-support-unread::after{
  border-color: rgba(56,151,255,0.78) !important;
}

/* When hovering unread support card, keep BLUE border + BLUE glow */
.dash-card-support-unread.dash-card-link:hover{
  border-color: rgba(56,151,255,0.78) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,0.90),
    0 0 0 1px rgba(56,151,255,0.24),
    0 0 30px rgba(56,151,255,0.26) !important;
}
.dash-card-support-unread.dash-card-link:hover::after{
  border-color: rgba(56,151,255,0.92) !important;
}


/* =========================
   Docs WYSIWYG (Documentation editor)
   ========================= */

.doc-link{
    color:#00ffc3;
    text-decoration:none;
    border-bottom:1px dashed rgba(0,255,195,.55);
}
.doc-link:hover{
    border-bottom-color: rgba(0,255,195,.9);
    filter: brightness(1.05);
}

.doc-neon{
    color:#00ffc3;
    font-weight: 700;
}

.doc-badge{
    display:inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;
    margin: 0 2px;
    white-space: normal;
    vertical-align: baseline;
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.doc-badge-red{
    background: rgba(255, 72, 72, .16);
    border: 1px solid rgba(255, 72, 72, .45);
    color: rgba(255, 160, 160, .98);
}
.doc-badge-yellow{
    background: rgba(255, 208, 0, .16);
    border: 1px solid rgba(255, 208, 0, .45);
    color: rgba(255, 236, 150, .98);
}
.doc-badge-green{
    background: rgba(0, 255, 150, .14);
    border: 1px solid rgba(0, 255, 150, .40);
    color: rgba(180, 255, 220, .98);
}
.doc-badge-gray{
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(245,248,247,.92);
}

.doc-editor{
    margin-top: 8px;
}
.doc-editor-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding: 10px 10px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(2, 8, 7, .55);
    box-shadow: 0 10px 22px rgba(0,0,0,.45);
}
.doc-ed-sep{
    width: 1px;
    background: rgba(255,255,255,.12);
    margin: 2px 6px;
}
.doc-ed-btn{
    appearance:none;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.25);
    color: rgba(240,248,246,.92);
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1;
    cursor:pointer;
    transition: transform .08s ease, border-color .12s ease, filter .12s ease;
    user-select:none;
}

.doc-ed-btn.active{
  border-color: rgba(0,255,195,.85) !important;
  box-shadow: 0 0 0 2px rgba(0,255,195,.18) inset;
  background: rgba(0,255,195,.12);
}
.doc-ed-btn:hover{
    border-color: rgba(0,255,195,.38);
    filter: brightness(1.05);
}
.doc-ed-btn:active{
    transform: translateY(1px);
}
.doc-ed-btn b, .doc-ed-btn i, .doc-ed-btn u, .doc-ed-btn s{ pointer-events:none; }

.doc-ed-btn.doc-ed-badge{
    font-weight: 800;
}
.doc-ed-btn.doc-ed-badge.red{ color: rgba(255, 150, 150, .98); border-color: rgba(255,72,72,.35); }
.doc-ed-btn.doc-ed-badge.yellow{ color: rgba(255, 236, 150, .98); border-color: rgba(255,208,0,.35); }
.doc-ed-btn.doc-ed-badge.green{ color: rgba(180, 255, 220, .98); border-color: rgba(0,255,150,.30); }
.doc-ed-btn.doc-ed-badge.gray{ color: rgba(245,248,247,.92); border-color: rgba(255,255,255,.18); }

.doc-editor-area{
    margin-top: 10px;
    min-height: 220px;
    max-height: 520px;
    overflow:auto;
    padding: 12px 12px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
    color: rgba(240,248,246,.92);
    line-height: 1.6;
    outline: none;
    word-break: break-word;
}
.doc-editor-area.is-empty:before{
    content: attr(data-placeholder);
    color: rgba(240,248,246,.35);
}
.doc-editor-area blockquote{
    margin: 10px 0;
    padding: 10px 12px;
    border-left: 3px solid rgba(0,255,195,.65);
    background: rgba(0,255,195,.06);
    border-radius: 12px;
}
.doc-editor-area p{ margin: 8px 0; }
.doc-editor-area ul, .doc-editor-area ol{ margin: 8px 0 8px 22px; }
.doc-editor-area code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12.5px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    padding: 1px 6px;
    border-radius: 8px;
}


/* =========================
   PERFORMANCE SAFETY (Chrome/GPU) — optional, user-controlled
   If OS asks for reduced transparency, disable heavy blurs.
========================= */
@media (prefers-reduced-transparency: reduce){
  .auth-card,
  .modal-content{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@keyframes rt-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* =========================
   Docs callout (no new tile)
========================= */
.docs-callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin: 14px 0 18px;
  padding: 14px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(0,255,195,.10), rgba(0,255,195,.04)),
    radial-gradient(120% 140% at 10% 0%, rgba(0,255,195,.16), rgba(0,0,0,0) 55%);
  border: 1px solid rgba(0,255,195,.20);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  position: relative;
  overflow:hidden;
}

.docs-callout::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(60% 120% at 0% 0%, rgba(0,255,195,.22), rgba(0,0,0,0) 60%);
  pointer-events:none;
}

.docs-callout-text{
  position:relative;
  z-index:1;
  min-width: 0;
}

.docs-callout-title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 15px;
  line-height: 1.15;
  margin-bottom: 4px;
}

.docs-callout-sub{
  font-size: 13px;
  line-height: 1.35;
  opacity: .86;
}

.docs-callout-btn{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #00110c;
  background: linear-gradient(90deg, var(--neon), rgba(0,255,195,.78));
  border: 1px solid rgba(0,255,195,.65);
  box-shadow: 0 14px 26px rgba(0,255,195,.18);
  white-space:nowrap;
  flex-shrink: 0;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.docs-callout-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 28px rgba(0,255,195,.22);
}

.docs-callout-btn:active{
  transform: translateY(0px) scale(.99);
}

.docs-callout-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  line-height: 1;
  transform: none;
}

.docs-callout-arrow-svg{
  display:block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.docs-callout-arrow-svg path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 520px){
  .docs-callout{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 12px;
  }
  .docs-callout-btn{
    justify-content: center;
    width: 100%;
    min-height: 44px;
    font-size: 14px;
    gap: 10px;
  }

  .docs-callout-arrow{
    width: 19px;
    height: 19px;
  }
}

/* Neon highlight helper */
.neo-hl{color: var(--neon); text-shadow: 0 0 18px rgba(0,255,195,0.20); font-weight: 900;}


/* =========================================================
   GREEN BASE TUNE v4 (2026-03-20)
   Goal: noticeably greener site base, less pure black,
   while preserving the mint brand accent.
========================================================= */
:root{
  --bg-0: #0a1916;
  --bg-1: #10312a;
  --bg-2: #122722;
  --bg-3: #16332d;
  --bg-4: #1c4038;

  --stroke: rgba(156, 255, 224, .14);
  --stroke-2: rgba(156, 255, 224, .20);

  --text: #f1fbf7;
  --text-2: rgba(241,251,247,.84);
  --text-3: rgba(241,251,247,.66);

  --shadow-1: 0 10px 22px rgba(0,0,0,.42);
  --shadow-2: 0 18px 46px rgba(0,0,0,.52);
  --shadow-neon: 0 0 20px rgba(0,255,195,.12);
}

html, body{
  background:
    radial-gradient(1200px 760px at 12% 8%, rgba(0,255,195,.18), transparent 58%),
    radial-gradient(980px 620px at 86% 88%, rgba(0,255,195,.12), transparent 60%),
    radial-gradient(860px 500px at 78% 14%, rgba(0,255,195,.09), transparent 60%),
    radial-gradient(1000px 780px at 50% 45%, rgba(138, 255, 220, .05), transparent 65%),
    linear-gradient(135deg, var(--bg-1), var(--bg-0)) !important;
  color: var(--text);
}

.auth-card,
.dash-card,
.wallet-balance,
.ticket-messages,
.wallet-table,
.news-item,
.table,
.bots-table,
.stats-chart-wrap,
.delete-silent-wrap,
.modal-content,
.chart-card,
.overview-grid > *,
.server-card,
.card-block{
  background:
    radial-gradient(circle at 18% 12%, rgba(0,255,195,.08), transparent 55%),
    rgba(18, 39, 34, .88) !important;
  border-color: rgba(0,255,195,.14) !important;
  box-shadow: var(--shadow-1) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select,
.auth-input{
  background:
    radial-gradient(circle at 18% 0%, rgba(0,255,195,.07), transparent 55%),
    rgba(14, 31, 27, .94) !important;
  border-color: rgba(0,255,195,.24) !important;
  color: rgba(241,251,247,.96) !important;
}

input:focus,
textarea:focus,
select:focus,
.auth-input:focus{
  background:
    radial-gradient(circle at 18% 0%, rgba(0,255,195,.10), transparent 55%),
    rgba(18, 41, 35, .96) !important;
}

.table thead th,
.bots-table thead th,
.wallet-table thead th,
.mini-table thead,
.cheat-table thead{
  background: rgba(0,255,195,.07) !important;
}

.table tbody tr:hover td,
.bots-table tbody tr:hover td,
.wallet-table tbody tr:hover td,
.mini-table tbody tr:hover td,
.cheat-table tbody tr:hover td{
  background: rgba(0,255,195,.06) !important;
}

.btn-ghost,
.dashboard-exit-btn,
.wallet-btn,
.range-btn,
.health-pill,
.copy-btn,
.cheat-toggle,
.plan-chip,
.neo-chip,
.neo-tab{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,195,.07), transparent 50%),
    rgba(16, 35, 31, .86) !important;
  border-color: rgba(0,255,195,.16) !important;
}

.modal,
.image-modal,
.preview-modal{
  background: rgba(4, 14, 11, .56) !important;
}

*::-webkit-scrollbar-track{
  background: rgba(7, 24, 20, .55) !important;
}

*::-webkit-scrollbar-thumb{
  background: rgba(0,255,195,.28) !important;
}

*::-webkit-scrollbar-thumb:hover{
  background: rgba(0,255,195,.40) !important;
}


/* =========================
   RENT SUMMARY CARDS
========================= */
.rent-summary-card{
  margin-top: 12px;
  padding: 16px 18px !important;
  border: 1px solid rgba(0,255,195,.16) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 16% 14%, rgba(0,255,195,.09), transparent 54%),
    linear-gradient(180deg, rgba(19, 41, 36, .96), rgba(13, 29, 26, .96)) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.44),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
}

.rent-summary-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px !important;
  align-items: stretch;
}

.rent-summary-col{
  min-width: 0 !important;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(3, 12, 10, .18);
  border: 1px solid rgba(255,255,255,.05);
}

.rent-summary-title{
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #f2faf7;
}

.rent-summary-col > div:not(.rent-summary-title){
  line-height: 1.5;
}

.rent-summary-col > div:nth-child(2){
  margin-top: 10px !important;
}

.rent-summary-col > div + div{
  margin-top: 8px !important;
}

@media (max-width: 640px){
  .rent-summary-card{
    padding: 14px !important;
  }

  .rent-summary-grid{
    grid-template-columns: 1fr;
    gap: 12px !important;
  }

  .rent-summary-col{
    padding: 12px 13px;
  }
}

/* ===== bots_rent_new.php — soften black tariff tiles to dark green ===== */
.plan-card{
  border-color: rgba(116, 187, 154, 0.18) !important;
  background:
    radial-gradient(700px 220px at 15% 10%, rgba(0,255,195,0.10), transparent 60%),
    rgba(7, 24, 19, 0.84) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.62) !important;
}

.plan-card:hover{
  border-color: rgba(0,255,195,0.24) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(0,255,195,0.10) inset !important;
}

.plan-card input:checked ~ .plan-card-body{
  background:
    radial-gradient(700px 260px at 20% 10%, rgba(0,255,195,0.16), transparent 62%),
    rgba(9, 32, 25, 0.90) !important;
}

.plan-card:has(input:checked),
.plan-card.is-checked{
  border-color: rgba(0,255,195,0.48) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.70), 0 0 0 1px rgba(0,255,195,0.14) inset, 0 0 18px rgba(0,255,195,0.12) !important;
}

.plan-card:focus-within{
  box-shadow:
    0 0 0 2px rgba(0,255,195,0.22),
    0 18px 46px rgba(0, 0, 0, 0.70) !important;
}

.plan-cta{
  border-top-color: rgba(168, 224, 196, 0.10) !important;
}


/* ===== admin_blacklist ===== */
.admin-blacklist-card{
    max-width: 1760px;
}
.admin-blacklist-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(260px, 1fr));
    gap:12px;
}
.admin-blacklist-search{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
.admin-blacklist-search .auth-input{
    flex:1 1 260px;
    min-width:220px;
}
.admin-blacklist-table td{
    vertical-align:top;
}
.mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    word-break: break-all;
}
.muted{
    color: rgba(240,248,246,.58);
}
.hint{
    margin-top:12px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background: rgba(255,255,255,.04);
    color: rgba(240,248,246,.82);
    font-size:15px;
    line-height:1.55;
}
@media (max-width: 820px){
    .admin-blacklist-grid{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   VISIT STATS CARD (index.php, admin only)
========================================================= */
.dash-card-visit-stats{
  border-color: rgba(0, 214, 255, .26);
  background:
    radial-gradient(620px 360px at 0% 0%, rgba(0, 214, 255, .14), transparent 55%),
    radial-gradient(560px 320px at 100% 100%, rgba(0, 255, 195, .10), transparent 58%),
    rgba(3, 12, 18, .86);
}

.visit-stats-grid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.visit-stat-item{
  border-radius: 14px;
  border: 1px solid rgba(0, 214, 255, .18);
  background: rgba(6, 16, 24, .82);
  padding: 12px 12px 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.visit-stat-item-wide{
  grid-column: 1 / -1;
}

.visit-stat-label{
  font-size: 14px;
  color: var(--text-3);
}

.visit-stat-value{
  margin-top: 6px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: rgba(220, 252, 255, .98);
  text-shadow: 0 0 12px rgba(0, 214, 255, .18);
}

@media (max-width: 640px){
  .visit-stats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tickets-filters{
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,214,255,.14);
  background: rgba(6,16,24,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.tickets-filters-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.tickets-filter-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tickets-filter-field span{
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}

.tickets-filters-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tickets-filters-actions .btn{
  min-width: 180px;
  text-align: center;
}

@media (max-width: 640px){
  .tickets-filters{
    padding: 12px;
  }

  .tickets-filters-actions .btn{
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   Rent agreement note + modal (bots_rent_new.php)
========================================================= */
.agreement-rent-note{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(234,241,239,.62);
}

.agreement-rent-checkbox{
  width: 14px;
  height: 14px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--neon);
  opacity: .78;
  cursor: default;
}

.agreement-rent-link{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: rgba(0,255,195,.78);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s ease, text-shadow .18s ease;
}

.agreement-rent-link:hover,
.agreement-rent-link:focus-visible{
  color: rgba(0,255,195,.98);
  text-shadow: 0 0 10px rgba(0,255,195,.18);
  outline: none;
}

.agreement-modal-content{
  position: relative;
  max-width: 760px;
  max-height: min(80vh, 760px);
  padding: 18px;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

.agreement-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: auto;
  height: auto;
  padding: 8px 10px;
  z-index: 2;
}

.agreement-modal-header{
  padding-right: 42px;
  margin-bottom: 12px;
}

.agreement-modal-title{
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.agreement-modal-subtitle{
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(234,241,239,.58);
}

.agreement-modal-updated{
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.3;
  color: rgba(234,241,239,.42);
}

.agreement-modal-scroll{
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(80vh - 142px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,255,195,.12);
  background: rgba(0,0,0,.16);
  color: rgba(234,241,239,.80);
  font-size: 13.5px;
  line-height: 1.55;
}

.agreement-modal-scroll h3{
  margin: 16px 0 7px;
  font-size: 15px;
  color: rgba(234,241,239,.94);
}

.agreement-modal-scroll h3:first-of-type{
  margin-top: 10px;
}

.agreement-modal-scroll p{
  margin: 0 0 8px;
}

.agreement-muted-text{
  margin-top: 14px !important;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(234,241,239,.54);
}

.agreement-modal-actions{
  margin-top: 12px;
  justify-content: flex-end;
}

@media (max-width: 520px){
  .agreement-rent-note{
    font-size: 12px;
    gap: 6px;
  }

  .agreement-modal-content{
    max-height: calc(100vh - 20px);
    padding: 14px;
  }

  .agreement-modal-title{
    font-size: 17px;
  }

  .agreement-modal-scroll{
    max-height: calc(100vh - 154px);
    padding: 10px 11px;
    font-size: 13px;
  }

  .agreement-modal-actions .btn{
    width: 100%;
  }
}

/* Support response time block on dashboard */
.support-response-wrap{
  align-items: stretch;
}

.support-response-card{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,255,195,.20);
  background:
    radial-gradient(circle at 18% 15%, rgba(0,255,195,.12), transparent 58%),
    rgba(12, 34, 30, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  color: rgba(234,241,239,.82);
  line-height: 1.25;
}

.support-response-label{
  font-size: 13px;
  font-weight: 700;
  color: rgba(234,241,239,.62);
  white-space: nowrap;
}

.support-response-time{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: #a9ffea;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(0,255,195,.16);
}

.support-response-note{
  margin-top: 8px;
  max-width: 560px;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(234,241,239,.55);
}

@media (max-width: 560px){
  .support-response-wrap{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .support-response-wrap .dash-kpi-green,
  .support-response-card{
    width: 100%;
  }

  .support-response-card{
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 9px 11px;
    text-align: center;
  }

  .support-response-label{
    width: 100%;
    white-space: normal;
    font-size: 12.5px;
    text-align: center;
  }

  .support-response-time{
    width: 100%;
    white-space: normal;
    text-align: center;
    font-size: 14.5px;
  }

  .support-response-note{
    font-size: 12px;
  }
}

/* =========================
   Billing News rich content (same visual rules as docs_topic.php)
   ========================= */
.news-body{
    white-space: normal;
}
.news-body a{
    color:#00ffc3;
    text-decoration:none;
    border-bottom:1px dashed rgba(0,255,195,.55);
}
.news-body a:hover{
    border-bottom-color: rgba(0,255,195,.9);
}
.news-body blockquote{
    margin: 12px 0;
    padding: 10px 12px;
    border-left: 3px solid rgba(0,255,195,.65);
    background: rgba(0,255,195,.06);
    border-radius: 12px;
}
.news-body p{ margin: 10px 0; }
.news-body ul, .news-body ol{ margin: 10px 0 10px 22px; }
.news-body code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12.5px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    padding: 1px 6px;
    border-radius: 8px;
}