/* ══════════════════════════════════════════════
   panel.css — Live Arcade Admin Panel
   Архитектура скролла:
   • html/body — overflow-x: clip (только горизонталь блокируется)
   • #app — flex-колонка, min-height: 100dvh
   • .topbar — sticky top: 0
   • .main-content — flex:1, overflow-y:auto (ЕДИНСТВЕННЫЙ скролл)
   • #sidebar — position:fixed, изолирован от потока
══════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   THEME TOKENS
────────────────────────────────────────── */
:root, [data-theme="arc-dark"] {
  --bg-root:    #080810;
  --bg-surface: #0e0e1a;
  --bg-card:    #13131f;
  --bg-hover:   #1a1a2e;
  --bg-input:   #0d0d1a;
  --border:        rgba(255,255,255,.07);
  --border-accent: rgba(168,85,247,.35);
  --text-primary:   #f0eeff;
  --text-secondary: #8b88b3;
  --text-muted:     #4e4b6a;
  --accent:      #a855f7;
  --accent-glow: rgba(168,85,247,.45);
  --accent-rgb:  168,85,247;
  --accent-2:    #22d3ee;
  --accent-3:    #f472b6;
  --green:   #34d399;
  --red:     #f87171;
  --yellow:  #fbbf24;
  --danger:  #dc2626;
  --warning: #d97706;
  --sidebar-w: 16.25rem;
  --topbar-h:  3.75rem;
  --radius:    .75rem;
  --radius-sm: .4375rem;
  --shadow:    0 .25rem 1.5rem rgba(0,0,0,.55);
  --font-body: 'Sora', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  /* Aliases */
  --bg: var(--bg-root); --bg-2: var(--bg-surface);
  --card: var(--bg-card); --card-bg: var(--bg-card);
  --hover: var(--bg-hover); --text: var(--text-primary); --font: var(--font-body);
}

[data-theme="cyber"] {
  --bg-root:#00000f; --bg-surface:#050512; --bg-card:#080820; --bg-hover:#0f0f2e; --bg-input:#040412;
  --border:rgba(0,255,200,.1); --border-accent:rgba(0,255,200,.4);
  --text-primary:#e0fff8; --text-secondary:#4ae8c8; --text-muted:#1a5a50;
  --accent:#00ffc8; --accent-glow:rgba(0,255,200,.5); --accent-rgb:0,255,200;
  --accent-2:#ff00aa; --accent-3:#ffe600; --danger:#dc2626; --warning:#d97706;
  --bg:var(--bg-root);--bg-2:var(--bg-surface);--card:var(--bg-card);--card-bg:var(--bg-card);--hover:var(--bg-hover);--text:var(--text-primary);--font:var(--font-body);
}

[data-theme="nord"] {
  --bg-root:#1a1d27; --bg-surface:#1e2130; --bg-card:#252840; --bg-hover:#2e3250; --bg-input:#191c2a;
  --border:rgba(255,255,255,.08); --border-accent:rgba(129,162,190,.4);
  --text-primary:#eceff4; --text-secondary:#88c0d0; --text-muted:#4c566a;
  --accent:#88c0d0; --accent-glow:rgba(136,192,208,.4); --accent-rgb:136,192,208;
  --accent-2:#bf616a; --accent-3:#a3be8c; --green:#a3be8c; --red:#bf616a; --yellow:#ebcb8b;
  --danger:#dc2626; --warning:#d97706;
  --bg:var(--bg-root);--bg-2:var(--bg-surface);--card:var(--bg-card);--card-bg:var(--bg-card);--hover:var(--bg-hover);--text:var(--text-primary);--font:var(--font-body);
}

[data-theme="ember"] {
  --bg-root:#100806; --bg-surface:#160d0a; --bg-card:#1c110d; --bg-hover:#251710; --bg-input:#110a07;
  --border:rgba(255,180,100,.07); --border-accent:rgba(251,113,33,.4);
  --text-primary:#fff4ee; --text-secondary:#c98060; --text-muted:#5a3020;
  --accent:#fb7121; --accent-glow:rgba(251,113,33,.45); --accent-rgb:251,113,33;
  --accent-2:#f472b6; --accent-3:#fbbf24; --danger:#dc2626; --warning:#d97706;
  --bg:var(--bg-root);--bg-2:var(--bg-surface);--card:var(--bg-card);--card-bg:var(--bg-card);--hover:var(--bg-hover);--text:var(--text-primary);--font:var(--font-body);
}

[data-theme="light"] {
  --bg-root:#f0f2f5; --bg-surface:#e8eaed; --bg-card:#fff; --bg-hover:#f1f5f9; --bg-input:#f8fafc;
  --border:#dee2e8; --border-accent:rgba(37,99,235,.35);
  --text-primary:#1a1d23; --text-secondary:#4b5563; --text-muted:#6b7280;
  --accent:#2563eb; --accent-glow:rgba(37,99,235,.25); --accent-rgb:37,99,235;
  --accent-2:#0891b2; --accent-3:#db2777; --green:#16a34a; --red:#ef4444; --yellow:#d97706;
  --danger:#dc2626; --warning:#d97706;
  --bg:var(--bg-root);--bg-2:var(--bg-surface);--card:var(--bg-card);--card-bg:var(--bg-card);--hover:var(--bg-hover);--text:var(--text-primary);--font:var(--font-body);
}
[data-theme="light"] .card      { box-shadow:0 .0625rem .25rem rgba(0,0,0,.06),0 .25rem 1rem rgba(0,0,0,.04); }
[data-theme="light"] .stat-card { box-shadow:0 .125rem .5rem rgba(0,0,0,.07); }
[data-theme="light"] .topbar    { background:#fff; }
[data-theme="light"] .modal     { background:#fff; }
[data-theme="light"] .main-content::before {
  background-image:linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px);
}

/* ──────────────────────────────────────────
   RESET & BASE
────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  font-size: 16px;
  /* Только горизонтальный скролл запрещён на уровне документа.
     clip не создаёт stacking context и не ломает position:fixed */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background: var(--bg-root);
  color: var(--text-primary);
  display: flex;
  min-height: 100dvh;
  overflow-x: clip;
}

::-webkit-scrollbar       { width:.3125rem; height:.3125rem; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--text-muted); border-radius:6.25rem; }

/* ──────────────────────────────────────────
   AUTH SCREEN
────────────────────────────────────────── */
#auth-screen {
  position:fixed; inset:0; z-index:1000;
  background:var(--bg-root);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.auth-bg { position:absolute; inset:0; overflow:hidden; }
.auth-bg::before {
  content:''; position:absolute;
  width:min(37.5rem,80vw); height:min(37.5rem,80vw);
  background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);
  top:-6.25rem; left:-6.25rem;
  animation:pulse-bg 6s ease-in-out infinite alternate;
}
.auth-bg::after {
  content:''; position:absolute;
  width:min(25rem,60vw); height:min(25rem,60vw);
  background:radial-gradient(circle,rgba(34,211,238,.2) 0%,transparent 70%);
  bottom:-3.125rem; right:-3.125rem;
  animation:pulse-bg 8s ease-in-out infinite alternate-reverse;
}
@keyframes pulse-bg {
  from { transform:scale(1) translate(0,0); }
  to   { transform:scale(1.3) translate(2.5rem,1.25rem); }
}

/* Floating orbs */
#auth-screen::before,#auth-screen::after {
  content:''; position:absolute; border-radius:50%;
  filter:blur(5rem); opacity:.18;
  animation:float-orb 12s ease-in-out infinite;
  pointer-events:none; z-index:0;
}
#auth-screen::before {
  width:31.25rem; height:31.25rem;
  background:radial-gradient(circle,var(--accent),transparent);
  top:-6.25rem; left:-6.25rem;
}
#auth-screen::after {
  width:25rem; height:25rem;
  background:radial-gradient(circle,var(--accent-3),transparent);
  bottom:-3.125rem; right:-6.25rem;
  animation-delay:-6s; animation-direction:reverse;
}
@keyframes float-orb {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(2.5rem,-1.875rem) scale(1.05); }
  66%      { transform:translate(-1.25rem,1.25rem) scale(.95); }
}

/* Карточка авторизации
   Источник проблемы: width:420px — теперь clamp */
.auth-card {
  position:relative; z-index:1;
  background:var(--bg-card); border:1px solid var(--border-accent);
  border-radius:1.25rem;
  padding:clamp(1.5rem,5vw,3rem) clamp(1.25rem,5vw,2.75rem);
  width:clamp(18rem,90vw,26.25rem);
  box-shadow:0 0 5rem var(--accent-glow),var(--shadow);
  animation:slide-up .5s cubic-bezier(.25,.8,.25,1);
}
@keyframes slide-up { from{opacity:0;transform:translateY(1.875rem)} to{opacity:1;transform:none} }
.auth-logo { text-align:center; margin-bottom:2rem; }
.auth-logo .brand {
  font-size:clamp(1.2rem,4vw,1.6rem); font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:-.03em;
}
.auth-logo .sub { font-size:.75rem; color:var(--text-muted); font-family:var(--font-mono); margin-top:.25rem; letter-spacing:.125em; text-transform:uppercase; }

/* ──────────────────────────────────────────
   FORM ELEMENTS
────────────────────────────────────────── */
.field { margin-bottom:1.125rem; }
.field label { display:block; font-size:.75rem; font-weight:600; color:var(--text-secondary); margin-bottom:.4375rem; text-transform:uppercase; letter-spacing:.05em; }
.field input,.field textarea,.field select {
  width:100%; padding:.6875rem .875rem;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text-primary);
  font-family:var(--font-body); font-size:.9375rem;
  transition:border .2s,box-shadow .2s; outline:none; max-width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--accent); box-shadow:0 0 0 .1875rem var(--accent-glow); }
.field select option { background:var(--bg-card); }
.field textarea { resize:vertical; min-height:5rem; }
.field-row { display:grid; gap:.875rem; }
.field-row.cols-2 { grid-template-columns:1fr 1fr; }
.field-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }

/* ──────────────────────────────────────────
   BUTTONS
────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.4375rem;
  padding:.5625rem 1.125rem; border:none; border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.875rem; font-weight:600;
  cursor:pointer; transition:all .2s; text-decoration:none;
  white-space:nowrap; max-width:100%;
}
.btn-primary  { background:var(--accent); color:#fff; box-shadow:0 .25rem 1.125rem var(--accent-glow); }
.btn-primary:hover  { filter:brightness(1.15); transform:translateY(-1px); }
.btn-secondary { background:var(--bg-hover); color:var(--text-primary); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--accent); }
.btn-danger  { background:rgba(248,113,113,.15); color:var(--red);   border:1px solid rgba(248,113,113,.3); }
.btn-danger:hover  { background:rgba(248,113,113,.25); }
.btn-success { background:rgba(52,211,153,.15); color:var(--green); border:1px solid rgba(52,211,153,.3); }
.btn-success:hover { background:rgba(52,211,153,.25); }
.btn-ghost   { background:transparent; color:var(--text-secondary); border:1px solid transparent; }
.btn-ghost:hover   { color:var(--text-primary); background:var(--bg-hover); border-color:var(--border); }
.btn-full { width:100%; justify-content:center; padding:.75rem; }
.btn-sm   { padding:.375rem .75rem; font-size:.8rem; }
.btn-icon { padding:.5rem; width:2.125rem; height:2.125rem; justify-content:center; }
.btn i+* { margin-left:.25rem; }
.btn i.fa-solid,.btn i.fa-regular,.btn i.fa-brands { pointer-events:none; }

/* ──────────────────────────────────────────
   SIDEBAR
────────────────────────────────────────── */
#sidebar {
  width:var(--sidebar-w); height:100dvh;
  background:var(--bg-surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; left:0; top:0; z-index:100;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s;
}
.sidebar-header { padding:1.5rem 1.25rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.sidebar-brand { font-size:1.1rem; font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.sidebar-tagline { font-size:.6875rem; font-family:var(--font-mono); color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; margin-top:.1875rem; }
.sidebar-app-badge {
  display:inline-flex; align-items:center; gap:.3125rem; margin-top:.5rem;
  padding:.1875rem .5rem; border-radius:6.25rem;
  font-size:.625rem; font-weight:700; font-family:var(--font-mono);
  text-transform:uppercase; letter-spacing:.0625em;
  border:1px solid var(--border-accent); color:var(--accent); background:rgba(168,85,247,.08); transition:all .3s;
}
.sidebar-app-badge.classic { color:var(--accent-2); background:rgba(34,211,238,.08); border-color:rgba(34,211,238,.35); }
.sidebar-app-badge .app-dot { width:.375rem; height:.375rem; border-radius:50%; background:var(--accent); }
.sidebar-app-badge.classic .app-dot { background:var(--accent-2); }

.sidebar-nav { flex:1; padding:.875rem .625rem; overflow-y:auto; overflow-x:hidden; }
.nav-section-label { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.125em; color:var(--text-muted); padding:.75rem .625rem .375rem; }
.nav-item {
  display:flex; align-items:center; gap:.6875rem; padding:.625rem .75rem;
  border-radius:var(--radius-sm); cursor:pointer; transition:all .18s;
  color:var(--text-secondary); font-size:.875rem; font-weight:500; position:relative;
}
.nav-item:hover { background:var(--bg-hover); color:var(--text-primary); }
.nav-item.active { background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(34,211,238,.08)); color:var(--accent); border:1px solid var(--border-accent); }
.nav-item .icon { width:1.125rem; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; font-size:.6875rem; font-family:var(--font-mono); background:var(--accent); color:#fff; padding:.125rem .4375rem; border-radius:6.25rem; min-width:1.25rem; text-align:center; }
.nav-badge.green  { background:var(--green); }
.nav-badge.red    { background:var(--red); }
.nav-badge.yellow { background:var(--yellow); color:#000; }
.sidebar-footer { padding:.875rem .625rem; border-top:1px solid var(--border); flex-shrink:0; }
.nav-item:hover::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:.1875rem; height:60%; background:var(--accent); border-radius:0 .1875rem .1875rem 0;
  animation:slide-in-bar .15s ease;
}
@keyframes slide-in-bar { from{height:0} to{height:60%} }

/* ──────────────────────────────────────────
   LAYOUT — ключевая архитектура
────────────────────────────────────────── */
#app {
  margin-left:var(--sidebar-w);
  flex:1; display:flex; flex-direction:column;
  min-height:100dvh;
  min-width:0; /* не схлопываться в flex */
}

.topbar {
  height:var(--topbar-h); background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.75rem; position:sticky; top:0; z-index:50;
  width:100%; flex-shrink:0;
}
.topbar-left  { display:flex; align-items:center; gap:.875rem; min-width:0; overflow:hidden; }
.page-title   { font-size:1rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-breadcrumb { font-size:.75rem; color:var(--text-muted); font-family:var(--font-mono); white-space:nowrap; }
.topbar-right { display:flex; align-items:center; gap:.625rem; flex-shrink:0; }
.server-status {
  display:flex; align-items:center; gap:.375rem;
  font-size:.75rem; font-family:var(--font-mono); color:var(--green);
  background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.2);
  padding:.3125rem .625rem; border-radius:6.25rem; white-space:nowrap;
}
.server-status .dot { width:.4375rem; height:.4375rem; border-radius:50%; background:var(--green); flex-shrink:0; animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.theme-picker { display:flex; gap:.25rem; }
.theme-dot { width:1.125rem; height:1.125rem; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .2s,border .2s; flex-shrink:0; }
.theme-dot:hover { transform:scale(1.2); }
.theme-dot.active { border-color:var(--text-primary); }

/* ── ГЛАВНЫЙ КОНТЕНТ — единственный вертикальный скролл ── */
.main-content {
  flex:1; padding:1.75rem;
  overflow-y:auto;
  /* overflow-x НЕ трогаем — table-wrap сам скроллит горизонтально */
  position:relative; min-width:0;
}
.main-content::before {
  content:''; position:fixed; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:3rem 3rem; pointer-events:none; z-index:0;
  animation:grid-drift 25s linear infinite;
}
@keyframes grid-drift { from{background-position:0 0} to{background-position:3rem 3rem} }
.page { display:none; }
.page.active { display:block; animation:fade-in .25s ease; }
@keyframes fade-in { from{opacity:0;transform:translateY(.5rem)} to{opacity:1;transform:none} }

/* ──────────────────────────────────────────
   SECTION / CARD
────────────────────────────────────────── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; gap:.75rem; flex-wrap:wrap; }
.section-title { font-size:1rem; font-weight:700; }
.section-sub   { font-size:.75rem; color:var(--text-muted); margin-top:.125rem; }
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.375rem; transition:border .2s; position:relative; min-width:0; overflow:hidden; }
.card:hover { border-color:rgba(168,85,247,.2); }
.card-title { font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.0625em; color:var(--text-secondary); margin-bottom:.875rem; }
.page.active .card { animation:card-in .35s ease-out both; }
.page.active .card:nth-child(2) { animation-delay:60ms; }
.page.active .card:nth-child(3) { animation-delay:120ms; }
.page.active .card:nth-child(4) { animation-delay:180ms; }
@keyframes card-in { from{opacity:0;transform:translateY(1rem) scale(.98)} to{opacity:1;transform:none} }

/* ──────────────────────────────────────────
   STATS GRID
   Было: minmax(220px,1fr) — вылезало на узких экранах
   Стало: min(13.75rem,100%) — никогда не шире контейнера
────────────────────────────────────────── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(13.75rem,100%),1fr));
  gap:1.125rem; margin-bottom:1.5rem;
}
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.375rem; position:relative; overflow:hidden; transition:transform .2s,border .2s; min-width:0; }
.stat-card:hover { transform:translateY(-2px); border-color:var(--border-accent); }
.stat-label  { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.0625em; color:var(--text-muted); margin-bottom:.5rem; }
.stat-value  { font-size:clamp(1.4rem,3vw,2rem); font-weight:800; font-family:var(--font-mono); line-height:1; }
.stat-change { font-size:.75rem; margin-top:.375rem; font-family:var(--font-mono); }
.stat-change.up   { color:var(--green); }
.stat-change.down { color:var(--red); }
.stat-icon { position:absolute; right:1.125rem; top:50%; transform:translateY(-50%); font-size:1.875rem; opacity:.15; pointer-events:none; }
.stat-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.625rem; }
.stat-icon-wrap { width:2.375rem; height:2.375rem; border-radius:.625rem; background:rgba(34,211,238,.12); display:flex; align-items:center; justify-content:center; color:var(--accent-2); font-size:.9375rem; flex-shrink:0; }
.stat-icon-wrap.green  { background:rgba(34,211,127,.12); color:var(--green); }
.stat-icon-wrap.red    { background:rgba(239,68,68,.12);  color:var(--danger); }
.stat-icon-wrap.yellow { background:rgba(251,189,35,.12); color:#fbbd23; }
.stat-icon-wrap.blue   { background:rgba(96,165,250,.12); color:#60a5fa; }
.stat-card-anim { animation:stat-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes stat-pop { from{opacity:0;transform:scale(.85) translateY(.625rem)} to{opacity:1;transform:none} }

/* ──────────────────────────────────────────
   CHARTS GRID
────────────────────────────────────────── */
.charts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr)); gap:1.125rem; margin-bottom:1.125rem; }
.chart-wrap  { height:13.75rem; position:relative; width:100%; min-width:0; }

/* ──────────────────────────────────────────
   TABLE
   table-wrap скроллит таблицу — это нормально
────────────────────────────────────────── */
.table-toolbar { display:flex; gap:.625rem; flex-wrap:wrap; align-items:center; margin-bottom:1.125rem; }
.search-input {
  flex:1; min-width:0; width:100%;
  padding:.5625rem .875rem; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-body); font-size:.875rem;
  outline:none; transition:border .2s,box-shadow .2s;
}
.search-input:focus { border-color:var(--accent); box-shadow:0 0 0 .1875rem var(--accent-glow); }
.filter-select {
  padding:.5625rem .875rem; background:var(--bg-input); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-body); font-size:.875rem;
  cursor:pointer; outline:none; max-width:100%;
}
/* удалено — единственное определение table-wrap ниже */
table { width:100%; border-collapse:collapse; }
thead th { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.0625em; color:var(--text-muted); padding:.6875rem .875rem; background:var(--bg-surface); border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; position:sticky; top:0; z-index:1; }
tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
tbody tr:hover { background:var(--bg-hover); }
tbody tr:last-child { border-bottom:none; }
td { padding:.75rem .875rem; font-size:.875rem; vertical-align:middle; }

/* ──────────────────────────────────────────
   BADGES
────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.1875rem .5625rem; border-radius:6.25rem; font-size:.6875rem; font-weight:700; white-space:nowrap; }
.badge-green  { background:rgba(52,211,153,.15);  color:var(--green);          border:1px solid rgba(52,211,153,.25); }
.badge-red    { background:rgba(248,113,113,.15); color:var(--red);            border:1px solid rgba(248,113,113,.25); }
.badge-purple { background:rgba(168,85,247,.15);  color:var(--accent);         border:1px solid rgba(168,85,247,.25); }
.badge-yellow { background:rgba(251,191,36,.15);  color:var(--yellow);         border:1px solid rgba(251,191,36,.25); }
.badge-cyan   { background:rgba(34,211,238,.15);  color:var(--accent-2);       border:1px solid rgba(34,211,238,.25); }
.badge-orange { background:rgba(251,113,33,.15);  color:#fb7221;               border:1px solid rgba(251,113,33,.25); }
.badge-gray   { background:rgba(139,136,179,.15); color:var(--text-secondary); border:1px solid rgba(139,136,179,.25); }
.badge-blue   { background:rgba(33,102,251,.15);  color:#216dfb;               border:1px solid rgba(33,91,251,.25); }

/* ──────────────────────────────────────────
   AVATAR
────────────────────────────────────────── */
.avatar { width:2.125rem; height:2.125rem; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; color:#fff; flex-shrink:0; }
.avatar-sm { width:1.625rem; height:1.625rem; font-size:.6875rem; }
.user-info { display:flex; align-items:center; gap:.625rem; min-width:0; }
.user-info .name  { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-info .email { font-size:.75rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.actions { display:flex; gap:.375rem; align-items:center; flex-shrink:0; }

/* ──────────────────────────────────────────
   SHOP GRID
   Было: minmax(260px,1fr) — вылезало
────────────────────────────────────────── */
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(16.25rem,100%),1fr)); gap:1.125rem; }
.shop-item-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .2s,border .2s; min-width:0; }
.shop-item-card:hover { transform:translateY(-4px); border-color:var(--border-accent); }
.shop-item-img { width:100%; height:8.75rem; object-fit:cover; background:var(--bg-hover); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:2.5rem; overflow:hidden; }
.shop-item-img img { width:100%; height:100%; object-fit:cover; }
.shop-item-body { padding:1rem; }
.shop-item-name  { font-weight:700; font-size:.9375rem; margin-bottom:.3125rem; }
.shop-item-price { font-family:var(--font-mono); font-size:.9rem; color:var(--accent); font-weight:600; }
.shop-item-cat   { font-size:.6875rem; color:var(--text-muted); margin-top:.25rem; }
.shop-item-footer { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; border-top:1px solid var(--border); background:var(--bg-surface); }

/* ──────────────────────────────────────────
   PANEL
────────────────────────────────────────── */
.panel { background:var(--bg-card); border:1px solid var(--border-accent); border-radius:var(--radius); padding:1.625rem; margin-bottom:1.5rem; }
.panel-title { font-size:.9375rem; font-weight:700; margin-bottom:1.375rem; display:flex; align-items:center; gap:.5625rem; }

/* ──────────────────────────────────────────
   IMAGE UPLOAD
────────────────────────────────────────── */
.img-upload-zone { border:2px dashed var(--border); border-radius:var(--radius-sm); padding:1.5rem; text-align:center; cursor:pointer; transition:border .2s,background .2s; position:relative; overflow:hidden; }
.img-upload-zone:hover,.img-upload-zone.drag-over { border-color:var(--accent); background:rgba(168,85,247,.05); }
.img-upload-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.img-upload-icon { font-size:2rem; margin-bottom:.5rem; opacity:.5; }
.img-upload-text { font-size:.8125rem; color:var(--text-muted); }
.img-preview { max-width:100%; max-height:11.25rem; border-radius:var(--radius-sm); object-fit:cover; display:none; margin:.625rem auto 0; }

/* ──────────────────────────────────────────
   TOAST
────────────────────────────────────────── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.625rem; max-width:calc(100vw - 3rem); }
.toast { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.8125rem 1.125rem; display:flex; align-items:center; gap:.6875rem; min-width:min(17.5rem,100%); max-width:23.75rem; box-shadow:var(--shadow); animation:toast-in .3s cubic-bezier(.25,.8,.25,1); }
.toast.removing { animation:toast-out .3s forwards; }
@keyframes toast-in  { from{opacity:0;transform:translateX(3.125rem)} to{opacity:1;transform:none} }
@keyframes toast-out { from{opacity:1;transform:none} to{opacity:0;transform:translateX(3.75rem) scale(.9)} }
.toast-success { border-left:.1875rem solid var(--green); }
.toast-error   { border-left:.1875rem solid var(--red); }
.toast-info    { border-left:.1875rem solid var(--accent); }
.toast-icon  { font-size:1.1rem; flex-shrink:0; }
.toast-text  { font-size:.875rem; flex:1; }
.toast-close { cursor:pointer; opacity:.5; font-size:.8rem; flex-shrink:0; }
.toast-close:hover { opacity:1; }

/* ──────────────────────────────────────────
   MODAL
────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; padding:1rem; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:var(--bg-card); border:1px solid var(--border-accent); border-radius:1.125rem; padding:2rem; width:100%; max-width:35rem; max-height:90dvh; overflow-y:auto; transform:scale(.92); transition:transform .25s; box-shadow:0 0 5rem var(--accent-glow); }
.modal-overlay.open .modal { transform:scale(1); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.625rem; }
.modal-title  { font-size:1.1rem; font-weight:700; }

/* ──────────────────────────────────────────
   ACTIVITY FEED
────────────────────────────────────────── */
.activity-feed { display:flex; flex-direction:column; }
.activity-item { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--border); animation:slide-in-left .3s ease both; }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:.5rem; height:.5rem; border-radius:50%; margin-top:.375rem; flex-shrink:0; }
.activity-icon-wrap { width:1.75rem; height:1.75rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.activity-text { font-size:.875rem; line-height:1.5; min-width:0; word-break:break-word; }
.activity-time { font-size:.6875rem; color:var(--text-muted); font-family:var(--font-mono); white-space:nowrap; }
@keyframes slide-in-left { from{opacity:0;transform:translateX(-.75rem)} to{opacity:1;transform:none} }

/* ──────────────────────────────────────────
   POST PREVIEW
────────────────────────────────────────── */
.post-row td:first-child { max-width:17.5rem; }
.post-title-cell { font-weight:600; font-size:.875rem; }
.post-content-preview { font-size:.75rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:15rem; }

/* ──────────────────────────────────────────
   PAGINATION
────────────────────────────────────────── */
.pagination { display:flex; align-items:center; justify-content:flex-end; gap:.25rem; margin-top:1rem; flex-wrap:wrap; }
.page-btn { width:2rem; height:2rem; border-radius:var(--radius-sm); background:var(--bg-hover); border:1px solid var(--border); color:var(--text-secondary); font-size:.8125rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.page-btn:hover  { border-color:var(--accent); color:var(--accent); }
.page-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ──────────────────────────────────────────
   ANALYTICS
────────────────────────────────────────── */
.analytics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr)); gap:1.125rem; }
.analytics-grid.wide { grid-template-columns:1fr; }
.leaderboard-row { display:flex; align-items:center; gap:.75rem; padding:.625rem 0; border-bottom:1px solid var(--border); animation:fade-up .3s ease both; min-width:0; }
.leaderboard-row:last-child { border-bottom:none; }
.leaderboard-rank { font-family:var(--font-mono); font-size:.8rem; font-weight:700; color:var(--text-muted); width:1.5rem; text-align:center; flex-shrink:0; }
.leaderboard-rank.top { color:var(--yellow); }
.leaderboard-name { flex:1; font-weight:600; font-size:.875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.leaderboard-val  { font-family:var(--font-mono); font-size:.875rem; color:var(--accent); flex-shrink:0; }
@keyframes fade-up { from{opacity:0;transform:translateY(.5rem)} to{opacity:1;transform:none} }

/* ──────────────────────────────────────────
   LOADING / EMPTY
────────────────────────────────────────── */
.loading-wrap { display:flex; align-items:center; justify-content:center; padding:3.75rem; color:var(--text-muted); gap:.75rem; }
.spinner { width:1.375rem; height:1.375rem; border-radius:50%; border:2px solid var(--border); border-top-color:var(--accent); animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.empty-state { text-align:center; padding:3.75rem 1.25rem; color:var(--text-muted); }
.empty-state .empty-icon { font-size:3rem; margin-bottom:.875rem; opacity:.4; }
.empty-state p { font-size:.9rem; }

/* ──────────────────────────────────────────
   TOGGLE
────────────────────────────────────────── */
.toggle { width:2.5rem; height:1.375rem; background:var(--bg-hover); border-radius:6.25rem; position:relative; cursor:pointer; border:1px solid var(--border); transition:background .2s; flex-shrink:0; }
.toggle.on { background:var(--accent); border-color:var(--accent); }
.toggle::after { content:''; position:absolute; left:.1875rem; top:.1875rem; width:.875rem; height:.875rem; border-radius:50%; background:#fff; transition:left .2s; }
.toggle.on::after { left:1.3125rem; }

/* ──────────────────────────────────────────
   PROGRESS BAR
────────────────────────────────────────── */
.progress-bar  { height:.375rem; background:var(--bg-hover); border-radius:6.25rem; overflow:hidden; }
.progress-fill { height:100%; border-radius:6.25rem; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .5s; }

/* ──────────────────────────────────────────
   INPUT GROUP
────────────────────────────────────────── */
.input-group { display:flex; max-width:100%; }
.input-group input { flex:1; border-radius:var(--radius-sm) 0 0 var(--radius-sm); border-right:none; min-width:0; }
.input-group .btn  { border-radius:0 var(--radius-sm) var(--radius-sm) 0; flex-shrink:0; }

/* ──────────────────────────────────────────
   DB SWITCHER
────────────────────────────────────────── */
.db-switcher-card { background:var(--bg-card); border:1px solid var(--border-accent); border-radius:var(--radius); padding:1.5rem; margin-bottom:1.125rem; }
.db-switcher-inner { display:flex; align-items:stretch; gap:1rem; flex-wrap:wrap; }
.db-option { flex:1; min-width:min(11.25rem,100%); padding:1.125rem 1.25rem; border-radius:var(--radius); border:2px solid var(--border); cursor:pointer; transition:all .25s; position:relative; overflow:hidden; }
.db-option.selected { border-color:var(--accent); background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(34,211,238,.04)); box-shadow:0 0 1.5rem var(--accent-glow); }
.db-option-label { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); margin-bottom:.375rem; }
.db-option-name  { font-size:1rem; font-weight:700; margin-bottom:.25rem; }
.db-option-sub   { font-size:.75rem; color:var(--text-muted); font-family:var(--font-mono); }
.db-option-check { position:absolute; top:.75rem; right:.75rem; width:1.25rem; height:1.25rem; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.6875rem; font-weight:700; opacity:0; transition:opacity .2s; }
.db-option.selected .db-option-check { opacity:1; }
.db-option-tables { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.625rem; }
.db-option-tables .tag { font-size:.625rem; }
.db-switch-arrow { font-size:1.5rem; color:var(--text-muted); flex-shrink:0; align-self:center; }

.settings-row { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; border-bottom:1px solid var(--border); gap:1rem; flex-wrap:wrap; }
.settings-row:last-child { border-bottom:none; }
.settings-row-info  { flex:1; min-width:0; }
.settings-row-label { font-size:.875rem; font-weight:600; margin-bottom:.1875rem; }
.settings-row-sub   { font-size:.75rem; color:var(--text-muted); }

/* ──────────────────────────────────────────
   HAMBURGER
────────────────────────────────────────── */
.hamburger { display:none; width:2.375rem; height:2.375rem; border-radius:var(--radius-sm); background:var(--bg-hover); border:1px solid var(--border); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:.3125rem; flex-shrink:0; transition:border .2s; }
.hamburger:hover { border-color:var(--accent); }
.hamburger span { display:block; width:1.125rem; height:.125rem; background:var(--text-primary); border-radius:.125rem; transition:transform .3s,opacity .3s,width .3s; transform-origin:center; }
.hamburger.open span:nth-child(1) { transform:translateY(.4375rem) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; width:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-.4375rem) rotate(-45deg); }
#sidebar-backdrop { display:none; position:fixed; inset:0; z-index:99; background:rgba(0,0,0,.65); backdrop-filter:blur(3px); opacity:0; transition:opacity .3s; pointer-events:none; }
#sidebar-backdrop.visible { opacity:1; pointer-events:auto; }

/* ──────────────────────────────────────────
   BOTTOM NAV
   Пустое пространство было из-за двойной высоты:
   height на nav + padding-bottom на bnav-inner.
   Теперь: nav = auto (по содержимому + padding),
   bnav-inner = фиксированные 3.625rem, padding-bottom на nav
────────────────────────────────────────── */
#bottom-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--bg-surface); border-top:1px solid var(--border);
  /* safe area padding только снизу, не влияет на bnav-inner */
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.bnav-inner {
  display: flex;
  align-items: stretch;
  height: 3.625rem;
  width: 100%;      /* ← КЛЮЧ: занять всю ширину родителя */
  padding: .25rem .5rem;
  gap: .25rem;
}
.bnav-item {
  flex: 1 1 0;      /* делим пространство ПОРОВНУ */
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem;
  cursor: pointer; transition: color .18s, background .15s;
  color: var(--text-muted);
  padding: .25rem .125rem;
  border-radius: .5rem;
  font-size: .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  -webkit-tap-highlight-color: transparent; position: relative;
  user-select: none;
}
.bnav-item:active { background:var(--bg-hover); }
.bnav-item.active { color:var(--accent); }
.bnav-item .bnav-icon { font-size:1.2rem; line-height:1; transition:transform .2s; }
.bnav-item.active .bnav-icon { transform:scale(1.18); }
.bnav-badge { position:absolute; top:.125rem; right:.125rem; min-width:1rem; height:1rem; border-radius:6.25rem; background:var(--red); color:#fff; font-size:.5625rem; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 .25rem; }

/* ══════════════════════════════════════════════════════
   ТАБЛИЦЫ
   Desktop  → горизонтальный скролл внутри .table-wrap
   Mobile   → карточки АВТОМАТИЧЕСКИ, без изменений HTML

   Как работает без data-label:
   - thead скрывается
   - каждый tr → карточка
   - td без лейблов показывают значение
   - последний td (actions) → подвал
   Если хочешь лейблы — добавь data-label="..." к td
══════════════════════════════════════════════════════ */

/* ── Desktop: таблицы скроллятся горизонтально ── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  border-radius: var(--radius);
  /* width: 100% чтобы не сжималась во flex-контексте */
  width: 100%;
  min-width: 0;
}
.table-wrap::-webkit-scrollbar { height: .25rem; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: .125rem; }

/* ──────────────────────────────────────────
   MOBILE TABLE → CARDS
   Работает для ЛЮБОЙ таблицы внутри .main-content
   Не нужен никакой доп. класс на HTML
────────────────────────────────────────── */
@media (max-width: 42.5em) {

  /* Сбрасываем контейнер */
  .main-content .table-wrap,
  .main-content .card .table-wrap {
    overflow: visible !important;
    background: transparent;
    border-radius: 0;
    border: none;
    width: 100%;
  }

  /* Прячем шапку */
  .main-content table thead {
    display: none;
  }

  /* tbody — flex-колонка карточек */
  .main-content table tbody {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    width: 100%;
  }

  /* tr → карточка */
  .main-content table tbody tr {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    border-bottom: none !important; /* сбрасываем строчный border */
    transition: border-color .18s;
    width: 100%;
  }
  .main-content table tbody tr:hover {
    border-color: var(--border-accent);
  }

  /* td → строка внутри карточки */
  .main-content table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5625rem .875rem;
    border-bottom: 1px solid var(--border);
    font-size: .875rem;
    min-width: 0;
    word-break: break-word;
    white-space: normal;
  }
  .main-content table tbody td:last-child {
    border-bottom: none;
  }

  /* Лейбл: data-label если есть */
  .main-content table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: .5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 4.5rem;
    line-height: 1.3;
  }

  /* Первая td → шапка карточки */
  .main-content table tbody td:first-child {
    padding: .875rem;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .07), transparent);
    border-bottom: 1px solid rgba(var(--accent-rgb), .15);
    font-weight: 600;
    font-size: .9375rem;
    align-items: flex-start;
    flex-direction: column;
    gap: .125rem;
  }
  .main-content table tbody td:first-child::before {
    color: var(--accent);
    font-size: .5rem;
  }

  /* Последняя td если содержит кнопки → подвал */
  .main-content table tbody td:last-child:has(.btn),
  .main-content table tbody td:last-child:has(.actions) {
    background: var(--bg-surface);
    padding: .625rem .875rem;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-start;
  }
  .main-content table tbody td:last-child:has(.btn) .btn,
  .main-content table tbody td:last-child:has(.actions) .btn,
  .main-content table tbody td[data-label=""] .btn {
    flex: 1;
    justify-content: center;
    min-width: 5rem;
    padding: .625rem .5rem;
    font-size: .8125rem;
  }
  .main-content table tbody td[data-label=""] {
    background: var(--bg-surface);
    padding: .625rem .875rem;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-start;
    border-bottom: none;
  }
  .main-content table tbody td[data-label=""]::before { display: none; }

  /* Значения справа для не-первых td */
  .main-content table tbody td:not(:first-child) .user-info,
  .main-content table tbody td:not(:first-child) .badge,
  .main-content table tbody td:not(:first-child) .avatar { margin-left: auto; }

  /* Скрытые на десктопе колонки — вернуть */
  .main-content table tbody td.col-email { display: flex !important; }

  /* .no-cards — таблица скроллится горизонтально даже на мобиле */
  .main-content .table-wrap.no-cards {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .main-content .table-wrap.no-cards table thead { display: table-header-group !important; }
  .main-content .table-wrap.no-cards table tbody { display: table-row-group !important; }
  .main-content .table-wrap.no-cards table tbody tr { display: table-row !important; border: none; }
  .main-content .table-wrap.no-cards table tbody td { display: table-cell !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE CARDS (renderUserMobileCard / renderUserRow JS)
   JS скрывает .table-wrap и рендерит .mobile-cards div.
   Эти стили обязательны — без них виден набросанный текст.
══════════════════════════════════════════════════════ */
.mobile-cards {
  display: none; /* JS ставит display:block на мобиле через renderUsersTable() */
  flex-direction: column;
  gap: .625rem;
  padding: .5rem 0;
}
.mobile-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s;
}
.mobile-card:hover { border-color: var(--border-accent); }

.mobile-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.07), transparent);
  border-bottom: 1px solid rgba(var(--accent-rgb),.15);
}
.mobile-card-header .user-info {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
  flex: 1;
}
.mobile-card-header .avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}
.mobile-card-header .name {
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-card-header .email {
  font-size: .72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-card-body {
  padding: .5rem .875rem;
}
.mobile-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .84rem;
}
.mobile-card-row:last-child { border-bottom: none; }
.mobile-card-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 3.5rem;
}

.mobile-card-footer {
  display: flex;
  gap: .5rem;
  padding: .625rem .875rem;
  background: var(--bg-surface);
  flex-wrap: wrap;
}
.mobile-card-footer .btn {
  flex: 1;
  justify-content: center;
  min-width: 5rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 2.5rem;
}

/* ══════════════════════════════════════════════════════
   POST MODERATION CARD
   Спроектирован для модераторов на мобиле:
   - большие кнопки (легко тапать большим пальцем)
   - контент сразу виден без скролла
   - approve/reject на всю ширину снизу
   
   HTML:
   <div class="modcard">
     <div class="modcard-meta">
       <div class="modcard-user">
         <div class="avatar avatar-sm">AB</div>
         <div>
           <div class="modcard-username">username</div>
           <div class="modcard-time">2 мин назад · Игры</div>
         </div>
       </div>
       <span class="modcard-flag modcard-flag--hate">Hate speech</span>
     </div>
     <div class="modcard-content">
       <div class="modcard-title">Заголовок поста</div>
       <div class="modcard-body">Текст поста...</div>
     </div>
     <div class="modcard-reports">
       <span class="modcard-stat"><i class="fa-solid fa-flag"></i> 3 жалобы</span>
       <span class="modcard-stat"><i class="fa-solid fa-eye"></i> 1.2K просмотров</span>
     </div>
     <div class="modcard-actions">
       <button class="modcard-btn modcard-btn--approve"><i class="fa-solid fa-check"></i> Одобрить</button>
       <button class="modcard-btn modcard-btn--skip"><i class="fa-solid fa-forward"></i></button>
       <button class="modcard-btn modcard-btn--reject"><i class="fa-solid fa-xmark"></i> Удалить</button>
     </div>
   </div>
══════════════════════════════════════════════════════ */

.modcard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .18s;
}
.modcard:hover { border-color: rgba(var(--accent-rgb), .3); }

/* Мета-строка: аватар + имя + флаг нарушения */
.modcard-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1rem .75rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .05), transparent);
}
.modcard-user { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.modcard-username { font-weight: 700; font-size: .9rem; color: var(--text-primary); }
.modcard-time { font-size: .6875rem; color: var(--text-muted); margin-top: .0625rem; }

/* Флаги типа нарушения */
.modcard-flag {
  font-size: .625rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: .25rem .625rem;
  border-radius: .375rem; flex-shrink: 0; white-space: nowrap;
}
.modcard-flag--hate    { background: rgba(248,113,113,.15); color: var(--red);    border: 1px solid rgba(248,113,113,.3); }
.modcard-flag--spam    { background: rgba(251,191,36,.15);  color: var(--yellow); border: 1px solid rgba(251,191,36,.3); }
.modcard-flag--nsfw    { background: rgba(168,85,247,.15);  color: var(--accent); border: 1px solid rgba(168,85,247,.3); }
.modcard-flag--abuse   { background: rgba(239,68,68,.15);   color: var(--danger); border: 1px solid rgba(239,68,68,.3); }
.modcard-flag--fraud   { background: rgba(251,113,33,.15);  color: #fb7121;       border: 1px solid rgba(251,113,33,.3); }
.modcard-flag--other   { background: rgba(139,136,179,.15); color: var(--text-secondary); border: 1px solid rgba(139,136,179,.3); }

/* Контент поста */
.modcard-content {
  padding: .875rem 1rem;
  flex: 1;
}
.modcard-title {
  font-weight: 700; font-size: 1rem; color: var(--text-primary);
  margin-bottom: .375rem; line-height: 1.35;
}
.modcard-body {
  font-size: .875rem; color: var(--text-secondary);
  line-height: 1.55;
  /* Показываем 4 строки, остальное скрыто */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.modcard-body.expanded {
  display: block;
  -webkit-line-clamp: unset;
}
.modcard-expand {
  font-size: .75rem; color: var(--accent); margin-top: .375rem;
  cursor: pointer; display: inline-block; font-weight: 600;
}
.modcard-expand:hover { text-decoration: underline; }

/* Медиа-превью (если есть картинка) */
.modcard-media {
  width: 100%; max-height: 12rem;
  object-fit: cover; display: block;
  border-bottom: 1px solid var(--border);
}

/* Статистика жалоб */
.modcard-reports {
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem 1rem .625rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.modcard-stat {
  display: flex; align-items: center; gap: .3rem;
  font-size: .75rem; color: var(--text-muted); font-family: var(--font-mono);
}
.modcard-stat i { font-size: .75rem; }
.modcard-stat.warn { color: var(--red); }

/* Блок кнопок — главное в UI модератора */
.modcard-actions {
  display: grid;
  /* approve | skip | reject */
  grid-template-columns: 1fr 2.75rem 1fr;
  gap: .5rem;
  padding: .75rem 1rem;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}
.modcard-btn {
  display: flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .75rem .5rem;
  border: none; border-radius: .5rem;
  font-family: var(--font-body); font-size: .875rem; font-weight: 700;
  cursor: pointer; transition: all .15s;
  /* Большие кнопки для пальцев — минимум 44px высота */
  min-height: 2.75rem;
  -webkit-tap-highlight-color: transparent;
}
.modcard-btn:active { transform: scale(.96); }

.modcard-btn--approve {
  background: rgba(52,211,153,.15);
  color: var(--green);
  border: 1.5px solid rgba(52,211,153,.3);
}
.modcard-btn--approve:hover { background: rgba(52,211,153,.25); border-color: var(--green); }
.modcard-btn--approve:active { background: rgba(52,211,153,.35); }

.modcard-btn--reject {
  background: rgba(248,113,113,.15);
  color: var(--red);
  border: 1.5px solid rgba(248,113,113,.3);
}
.modcard-btn--reject:hover { background: rgba(248,113,113,.25); border-color: var(--red); }
.modcard-btn--reject:active { background: rgba(248,113,113,.35); }

.modcard-btn--skip {
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  font-size: 1rem;
  padding: .75rem .5rem;
}
.modcard-btn--skip:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* Дополнительные действия (бан, предупреждение) */
.modcard-extra-actions {
  display: flex; gap: .375rem; flex-wrap: wrap;
  padding: 0 1rem .75rem;
  background: var(--bg-surface);
}
.modcard-extra-actions .btn { flex: 1; min-width: 6rem; font-size: .75rem; padding: .4375rem .5rem; }

/* Список карточек модерации */
.modcard-list { display: flex; flex-direction: column; gap: 1rem; }

/* ══════════════════════════════════════════════════════
   LIVESTREAM CARD
   Для страницы трансляций на мобиле
   
   HTML:
   <div class="streamcard">
     <div class="streamcard-preview">
       <img src="..." alt="...">
       <span class="streamcard-live">● LIVE</span>
       <span class="streamcard-viewers">1.2K</span>
     </div>
     <div class="streamcard-body">
       <div class="streamcard-title">Название стрима</div>
       <div class="streamcard-meta">
         <div class="avatar avatar-sm">ST</div>
         <span>StreamerName</span>
         <span class="badge badge-purple">Gaming</span>
       </div>
       <div class="streamcard-stats">...</div>
       <div class="streamcard-actions">...</div>
     </div>
   </div>
══════════════════════════════════════════════════════ */

.streamcard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s, transform .15s;
  display: flex;
  flex-direction: column;
}
.streamcard:hover { border-color: var(--border-accent); transform: translateY(-2px); }

/* Превью стрима */
.streamcard-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-hover);
  overflow: hidden;
  flex-shrink: 0;
}
.streamcard-preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.streamcard-preview-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--text-muted);
  background: linear-gradient(135deg, var(--bg-hover), var(--bg-surface));
}

/* LIVE бейдж и счётчик зрителей */
.streamcard-live {
  position: absolute; top: .625rem; left: .625rem;
  background: #dc2626; color: #fff;
  font-size: .625rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; padding: .1875rem .5rem;
  border-radius: .25rem; animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .75; }
}
.streamcard-live.offline {
  background: var(--bg-hover); color: var(--text-muted);
  animation: none;
}
.streamcard-viewers {
  position: absolute; top: .625rem; right: .625rem;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: .6875rem; font-weight: 700; font-family: var(--font-mono);
  padding: .1875rem .5rem; border-radius: .25rem;
  display: flex; align-items: center; gap: .25rem;
}
.streamcard-duration {
  position: absolute; bottom: .625rem; right: .625rem;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: .6875rem; font-family: var(--font-mono);
  padding: .125rem .4375rem; border-radius: .25rem;
}

/* Тело карточки */
.streamcard-body { padding: .875rem 1rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.streamcard-title {
  font-weight: 700; font-size: 1rem; color: var(--text-primary);
  line-height: 1.35; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.streamcard-meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .8125rem; color: var(--text-secondary);
}
.streamcard-stats {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  font-size: .75rem; color: var(--text-muted); font-family: var(--font-mono);
}
.streamcard-stat { display: flex; align-items: center; gap: .25rem; }

/* Кнопки управления стримом */
.streamcard-actions {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-top: auto; padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.streamcard-actions .btn { flex: 1; justify-content: center; min-width: 5rem; padding: .5625rem .5rem; }

/* Список стримов — адаптивная сетка */
.streamcard-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: 1rem;
}

/* На мобиле — одна колонка */
@media (max-width: 42.5em) {
  .streamcard-list { grid-template-columns: 1fr; }
  .streamcard:hover { transform: none; }
  .streamcard-body { padding: .75rem; }
  .streamcard-title { font-size: .9375rem; }
}

/* ══════════════════════════════════════════════════════
   СПЕЦИФИЧЕСКИЕ МОБИЛЬНЫЕ ФИКСЫ
   Security logs, Chat, любые узкие контейнеры
══════════════════════════════════════════════════════ */

/* Карточки внутри page не должны создавать overflow */
.page .card {
  min-width: 0;
  overflow: hidden;
}

/* Все flex и grid контейнеры внутри карточек — не вылезают */
.card > * { min-width: 0; }

/* Текст внутри ячеек не ломает таблицу */
@media (max-width: 42.5em) {

  /* Общий фикс — любые контейнеры не шире экрана */
  .page > * { max-width: 100%; }

  /* Security: log entries — IP адреса, user-agent длинные строки */
  .main-content table tbody td .mono,
  .main-content table tbody td code,
  .main-content table tbody td span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
    display: inline-block;
  }

  /* Chat messages — не вылезают */
  .chat-message,
  .message-row,
  .msg-row {
    max-width: 100%;
    word-break: break-word;
  }

  /* Аналитика — графики на всю ширину */
  .chart-wrap {
    height: 11rem;
    max-width: 100%;
  }

  /* Профиль — компактный на мобиле */
  .profile-card-main { flex-direction: column; align-items: flex-start; }

  /* Все grid-2 и grid-3 — одна колонка */
  .grid-2, .grid-3,
  .charts-grid, .analytics-grid,
  .cabinet-layout {
    grid-template-columns: 1fr !important;
    gap: .75rem;
  }

  /* Кнопки в section-header — полная ширина */
  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: .625rem;
  }
  .section-header .actions,
  .section-header > .btn {
    width: 100%;
    justify-content: center;
  }

  /* Тулбар таблиц — в колонку */
  .table-toolbar {
    flex-direction: column;
    gap: .5rem;
  }
  .table-toolbar .search-input,
  .table-toolbar .filter-select,
  .table-toolbar select,
  .table-toolbar input {
    width: 100%;
    min-width: 0;
  }

  /* Все поля формы — одна колонка */
  .field-row.cols-2,
  .field-row.cols-3 {
    grid-template-columns: 1fr;
  }

  /* DB switcher */
  .db-switcher-inner { flex-direction: column; }
  .db-switch-arrow { transform: rotate(90deg); }
  .db-option { min-width: 100%; }

  /* Connection method */
  .conn-method-grid { grid-template-columns: 1fr; }
  .conn-fields-grid { grid-template-columns: 1fr; }

  /* Stats — 2 колонки */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .625rem;
  }

  /* Модалки — снизу */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92dvh;
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 1.375rem 1rem;
  }

  /* Pagination — по центру */
  .pagination { justify-content: center; }

  /* admin dropdown */
  .admin-dropdown {
    position: fixed;
    right: .75rem;
    top: auto;
    bottom: calc(3.625rem + env(safe-area-inset-bottom, 0px) + .5rem);
    width: calc(100vw - 1.5rem);
    max-width: 22rem;
    transform-origin: bottom right;
  }
}

/* ──────────────────────────────────────────
   ADMIN AVATAR DROPDOWN
────────────────────────────────────────── */
.admin-avatar-wrap { position:relative; }
.admin-avatar-btn { display:flex; align-items:center; gap:.3125rem; background:none; border:none; cursor:pointer; padding:.1875rem .375rem .1875rem .1875rem; border-radius:6.25rem; transition:background .15s; }
.admin-avatar-btn:hover { background:var(--bg-hover); }
.admin-avatar-ring { width:2.125rem; height:2.125rem; border-radius:50%; padding:.125rem; background:linear-gradient(135deg,var(--accent),var(--accent-2)); flex-shrink:0; }
.admin-avatar-inner { width:100%; height:100%; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.03em; }
.admin-avatar-chevron { color:var(--text-muted); transition:transform .2s; flex-shrink:0; }
.admin-avatar-wrap.open .admin-avatar-chevron { transform:rotate(180deg); }

.admin-dropdown {
  display:none; flex-direction:column;
  position:absolute; top:calc(100% + .625rem); right:0;
  width:min(16.875rem,calc(100vw - 2rem));
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 1rem 3rem rgba(0,0,0,.45),0 .25rem .75rem rgba(0,0,0,.2);
  z-index:3000; overflow:hidden;
  opacity:0; transform:translateY(-.5rem) scale(.97); transform-origin:top right;
  transition:opacity .18s,transform .18s;
}
.admin-dropdown.visible { opacity:1; transform:translateY(0) scale(1); }
.admin-dd-header { display:flex; align-items:center; gap:.75rem; padding:1rem; background:linear-gradient(135deg,rgba(168,85,247,.12),transparent); }
.admin-dd-avatar-lg { width:2.875rem; height:2.875rem; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; color:#fff; flex-shrink:0; box-shadow:0 0 0 .125rem var(--bg-card),0 0 0 .25rem var(--accent); }
.admin-dd-info { min-width:0; }
.admin-dd-name { font-size:.9rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-dd-divider { height:1px; background:var(--border); }
.admin-dd-section-label { font-size:.625rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); padding:.625rem .875rem .25rem; }
.admin-dd-item { display:flex; align-items:center; gap:.5625rem; width:100%; padding:.5625rem .875rem; background:none; border:none; color:var(--text-primary); font-size:.875rem; font-family:var(--font-body); cursor:pointer; text-align:left; transition:background .12s; }
.admin-dd-item:hover { background:var(--bg-hover); }
.admin-dd-item svg { flex-shrink:0; opacity:.7; }
.admin-dd-item--disabled { opacity:.45; cursor:not-allowed; }
.admin-dd-item--disabled:hover { background:none; }
.admin-dd-item--danger { color:var(--red); }
.admin-dd-item--danger:hover { background:rgba(248,113,113,.08); }
.admin-dd-soon { margin-left:auto; font-size:.5625rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); background:var(--bg-hover); padding:.125rem .375rem; border-radius:.25rem; }
.admin-dd-themes { display:grid; grid-template-columns:1fr 1fr; gap:.375rem; padding:.375rem .875rem .625rem; }
.theme-opt { display:flex; align-items:center; gap:.5rem; padding:.4375rem .625rem; border-radius:.5rem; border:1px solid var(--border); background:var(--bg-root); color:var(--text-primary); font-size:.75rem; font-family:var(--font-body); cursor:pointer; transition:background .12s,border-color .12s,box-shadow .12s; }
.theme-opt:hover { background:var(--bg-hover); }
.theme-opt.active { border-color:var(--accent); background:rgba(var(--accent-rgb),.12); box-shadow:0 0 0 1px var(--accent); }
.theme-opt-swatch { width:.875rem; height:.875rem; border-radius:50%; flex-shrink:0; }
.admin-dd-toggle { display:flex; align-items:center; justify-content:space-between; padding:.5rem .875rem; cursor:pointer; font-size:.875rem; color:var(--text-primary); transition:background .12s; user-select:none; }
.admin-dd-toggle:hover { background:var(--bg-hover); }
.admin-dd-toggle>span { display:flex; align-items:center; gap:.5rem; }
.admin-dd-toggle>span svg { opacity:.7; }
.admin-dd-toggle input[type=checkbox] { display:none; }
.admin-dd-toggle-track { position:relative; width:2.125rem; height:1.125rem; background:var(--border); border-radius:.5625rem; flex-shrink:0; transition:background .2s; }
.admin-dd-toggle-track::after { content:''; position:absolute; top:.125rem; left:.125rem; width:.875rem; height:.875rem; border-radius:50%; background:#fff; transition:transform .2s; }
.admin-dd-toggle input:checked~.admin-dd-toggle-track { background:var(--accent); }
.admin-dd-toggle input:checked~.admin-dd-toggle-track::after { transform:translateX(1rem); }

/* ──────────────────────────────────────────
   CONNECTION METHOD
────────────────────────────────────────── */
.conn-method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.625rem; margin-top:.5rem; }
.conn-method-opt { position:relative; display:flex; flex-direction:column; align-items:center; gap:.25rem; padding:.875rem .625rem .75rem; border-radius:var(--radius); border:1.5px solid var(--border); background:var(--bg-root); cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; text-align:center; user-select:none; }
.conn-method-opt:hover { border-color:var(--accent); background:rgba(var(--accent-rgb),.06); }
.conn-method-opt.selected { border-color:var(--accent); background:rgba(var(--accent-rgb),.12); box-shadow:0 0 0 1px var(--accent); }
.conn-method-wip { opacity:.6; }
.conn-method-check { display:none; position:absolute; top:.375rem; right:.5rem; font-size:.625rem; color:var(--accent); font-weight:700; }
.conn-method-opt.selected .conn-method-check { display:block; }
.conn-method-icon  { font-size:1.375rem; line-height:1; }
.conn-method-label { font-size:.75rem; font-weight:600; color:var(--text-primary); }
.conn-method-sub   { font-size:.6875rem; color:var(--text-muted); line-height:1.4; }
.conn-method-badge { position:absolute; top:-.5rem; left:50%; transform:translateX(-50%); font-size:.5625rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; background:var(--accent-2); color:#000; padding:.125rem .4375rem; border-radius:.25rem; white-space:nowrap; }
.conn-fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:.625rem .875rem; }
.conn-hint { font-size:.75rem; color:var(--text-muted); margin-top:.5rem; padding:.5rem .75rem; background:var(--bg-root); border-radius:.5rem; border-left:.1875rem solid var(--border); line-height:1.5; }
.conn-hint code { font-family:var(--font-mono); font-size:.6875rem; background:var(--bg-hover); padding:.0625rem .3125rem; border-radius:.1875rem; }

/* ──────────────────────────────────────────
   PROFILE
────────────────────────────────────────── */
.profile-layout { display:flex; flex-direction:column; gap:1.25rem; }
.profile-card-main { display:flex; align-items:center; gap:1.75rem; background:var(--bg-card); border:1px solid var(--border); border-radius:1rem; padding:1.75rem; flex-wrap:wrap; min-width:0; }
.profile-avatar-wrap { position:relative; flex-shrink:0; }
.profile-avatar-ring { width:5.625rem; height:5.625rem; border-radius:50%; padding:.1875rem; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.profile-avatar-img { width:100%; height:100%; border-radius:50%; background:var(--bg-root); display:flex; align-items:center; justify-content:center; font-size:2.2rem; font-weight:700; color:var(--accent); overflow:hidden; }
.profile-avatar-badge { position:absolute; bottom:-.25rem; left:50%; transform:translateX(-50%); background:var(--accent); color:#000; font-size:.625rem; font-weight:700; padding:.125rem .5rem; border-radius:1.25rem; white-space:nowrap; }
.profile-info { flex:1; min-width:min(11.25rem,100%); }
.profile-name { font-size:clamp(1.1rem,3vw,1.6rem); font-weight:700; color:var(--text-primary); margin-bottom:.25rem; }
.profile-role { font-size:.8125rem; color:var(--accent); font-weight:600; margin-bottom:.5rem; }
.profile-meta-row { display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--text-muted); flex-wrap:wrap; }
.profile-meta-dot { opacity:.4; }
.profile-stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(7.5rem,100%),1fr)); gap:.875rem; }
.profile-stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:.75rem; padding:1.125rem 1rem; text-align:center; }
.profile-stat-val   { font-size:1.5rem; font-weight:700; color:var(--accent); margin-bottom:.25rem; }
.profile-stat-label { font-size:.6875rem; color:var(--text-muted); font-weight:500; }
.profile-session-info { padding:.5rem 0; }
.profile-session-row { display:flex; align-items:center; justify-content:space-between; padding:.625rem 0; border-bottom:1px solid var(--border); font-size:.8125rem; gap:.5rem; }
.profile-session-row:last-child { border-bottom:none; }
.profile-session-key { color:var(--text-muted); flex-shrink:0; }
.profile-session-val { color:var(--text-primary); font-weight:600; font-family:var(--font-mono); word-break:break-all; text-align:right; }

/* ──────────────────────────────────────────
   CABINET
────────────────────────────────────────── */
.cabinet-layout { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.cabinet-card { height:fit-content; }
.cabinet-avatar-section { display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; }
.cabinet-avatar-preview { width:5rem; height:5rem; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; color:#000; overflow:hidden; flex-shrink:0; }
.cabinet-avatar-actions { display:flex; flex-direction:column; gap:.5rem; }
#cabinet-pass-msg.ok  { color:var(--green); }
#cabinet-pass-msg.err { color:var(--danger); }

/* ──────────────────────────────────────────
   MOD CARDS
────────────────────────────────────────── */
.mod-card { display:flex; gap:.875rem; padding:.875rem 0; border-bottom:1px solid var(--border); min-width:0; }
.mod-card:last-child { border-bottom:none; }
.mod-card-cover { width:4.25rem; height:4.25rem; background:var(--bg-hover); border-radius:.625rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mod-card-info  { flex:1; min-width:0; }
.mod-card-title { font-weight:600; margin-bottom:.1875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mod-card-sub   { font-size:.75rem; color:var(--text-muted); margin-bottom:.125rem; }
.mod-card-desc  { font-size:.8rem; color:var(--text-muted); margin-top:.25rem; }
.mod-card-actions { display:flex; gap:.375rem; margin-top:.5rem; flex-wrap:wrap; }

/* ──────────────────────────────────────────
   GRIDS / LANG / UTILS
────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr)); gap:1.125rem; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));  gap:1.125rem; }

.lang-switcher { display:flex; gap:.125rem; align-items:center; background:var(--bg-root); border-radius:.5rem; padding:.1875rem; }
.lang-btn { background:transparent; border:none; cursor:pointer; font-size:.6875rem; font-weight:700; letter-spacing:.04em; color:var(--text-muted); padding:.25rem .4375rem; border-radius:.3125rem; transition:all .15s; }
.lang-btn:hover,.lang-btn.active { background:var(--accent); color:#fff; }

.mono        { font-family:var(--font-mono); }
.text-muted  { color:var(--text-muted); }
.text-accent { color:var(--accent); }
.text-green  { color:var(--green); }
.text-red    { color:var(--red); }
hr      { border:none; border-top:1px solid var(--border); margin:1.25rem 0; }
.tag    { display:inline-block; padding:.125rem .5rem; border-radius:.25rem; font-size:.6875rem; font-weight:600; font-family:var(--font-mono); background:var(--bg-hover); color:var(--text-secondary); border:1px solid var(--border); }
.divider { height:1px; background:var(--border); margin:1rem 0; }
@keyframes swipeHint { 0%,100%{transform:translateX(0);opacity:1} 40%{transform:translateX(-1.125rem);opacity:.6} }
.swipe-hint { animation:swipeHint 1.2s ease-in-out 1; }

/* ══════════════════════════════════════
   #APP-INNER layout
══════════════════════════════════════ */
#app-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100dvh;
  min-width: 0;
}

/* ══════════════════════════════════════
   GRID LAYOUTS
══════════════════════════════════════ */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.125rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem;
}

/* Security log panels */
#blocked-ips-list,
#login-logs-list,
#admin-logs-list {
  max-height: 22.5rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#violations-list {
  max-height: 25rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
#page-chats .table-wrap {
  max-height: 25rem;
  overflow-y: auto;
}

/* ══════════════════════════════════════════
   RESPONSIVE — TABLET ≤900px (56.25em)
══════════════════════════════════════════ */
@media (max-width:56.25em) {
  :root { --sidebar-w:15rem; }

  #sidebar { transform:translateX(calc(-1 * var(--sidebar-w))); box-shadow:none; }
  #sidebar.open { transform:translateX(0); box-shadow:.5rem 0 3.75rem rgba(0,0,0,.7); }
  #sidebar-backdrop { display:block; pointer-events:none; }
  #app { margin-left:0; }
  .hamburger { display:flex; }

  .topbar { padding:0 1rem; gap:.625rem; }
  .topbar-right { gap:.5rem; }
  #server-status-text { display:none; }
  .server-status { padding:.375rem .625rem; }
  .theme-picker { gap:.3125rem; }
  .theme-dot { width:1rem; height:1rem; }

  .main-content { padding:1.25rem 1rem; }

  .db-switcher-inner { flex-direction:column; }
  .db-switch-arrow { transform:rotate(90deg); }

  /* stats принудительно 2 колонки (авто-фит может дать 3 на планшете) */
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════════
   RESPONSIVE — PHONE ≤680px (42.5em)
══════════════════════════════════════════ */
@media (max-width:42.5em) {
  /* Bottom nav */
  #bottom-nav { display:block; }
  /* Отступ = высота нава (3.625rem) + safe area + запас */
  .main-content { padding-bottom:calc(3.625rem + env(safe-area-inset-bottom,0px) + 1rem); }

  /* ── TOUCH FIX: убираем 300ms задержку на всех интерактивных элементах ── */
  button, .btn, a, .nav-item, .bnav-item, .lang-btn, .theme-dot,
  .toggle, .db-option, .conn-method-opt, select, label,
  .admin-dd-item, .theme-opt, .admin-avatar-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── iOS ZOOM FIX: input с font-size < 16px вызывает авто-зум ── */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* Мобильные карточки */
  .mob-cards { display:flex; flex-direction:column; gap:.75rem; }
  /* Скрыть таблицу если рядом есть .mob-cards (через .has-mob-cards на родителе) */
  .has-mob-cards .table-wrap { display:none; }
  .table-wrap.hide-on-mobile { display:none; }
  .qmod-fab { display:flex; }
  .mobile-sidebar-extras { display:block; }

  /* Grid layouts → 1 колонка на мобиле */
  .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
  }
  /* Security — панели в колонку */
  #page-security .grid-3 {
    grid-template-columns: 1fr !important;
  }
  /* Security log panels — убираем max-height чтобы скроллить основной контент */
  #blocked-ips-list,
  #login-logs-list,
  #admin-logs-list {
    max-height: none;
    overflow-y: visible;
  }
  /* Chats — в колонку */
  #page-chats .grid-2 {
    grid-template-columns: 1fr !important;
  }
  #page-chats .table-wrap {
    max-height: none;
    overflow-x: auto;
  }
  /* Music — в колонку */
  #page-music .grid-2 {
    grid-template-columns: 1fr !important;
  }

  .section-header { flex-direction:column; align-items:stretch; }
  .section-header .btn { width:100%; justify-content:center; }

  .table-toolbar { flex-direction:column; }
  .table-toolbar input,.table-toolbar select { width:100%; }

  .topbar { height:3.25rem; }
  .page-title { font-size:.9rem; }
  .page-breadcrumb { display:none; }
  .btn[onclick="refreshCurrentPage()"] { display:none; }
  .col-email { display:none; }

  .stats-grid { grid-template-columns:repeat(2,1fr); gap:.625rem; }
  .stat-card  { padding:.875rem; }
  .stat-value { font-size:1.375rem; }

  .chart-wrap { height:11.875rem; }
  .shop-grid  { grid-template-columns:1fr; }

  /* Модалка снизу */
  .modal-overlay { align-items:flex-end; padding:0; }
  .modal { border-radius:1.25rem 1.25rem 0 0; max-height:92dvh; width:100%; max-width:100%; padding:1.5rem 1.125rem; }

  /* Тосты над навом */
  #toast-container { bottom:calc(4.25rem + env(safe-area-inset-bottom,0px)); right:.75rem; left:.75rem; }

  /* Профиль */
  .profile-card-main { padding:1.25rem; gap:1rem; }
  .cabinet-layout { grid-template-columns:1fr; }

  /* Connection */
  .conn-method-grid { grid-template-columns:1fr; }
  .conn-fields-grid { grid-template-columns:1fr; }

  /* Поля */
  .field-row.cols-2,.field-row.cols-3 { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — SMALL PHONE ≤480px (30em)
══════════════════════════════════════════ */
@media (max-width:30em) {
  html { font-size:14px; }
  :root { --radius:.625rem; --radius-sm:.375rem; }

  .stats-grid { gap:.5rem; }
  .stat-card  { padding:.75rem; }
  .stat-value { font-size:1.25rem; }
  .stat-label { font-size:.625rem; }
  .stat-icon  { display:none; }
  .stat-change { font-size:.625rem; }
  .card  { padding:.875rem; }
  .panel { padding:.875rem; }
  .topbar { padding:0 .75rem; }
  .theme-picker { display:none; }
  .auth-card { border-radius:1rem 1rem 0 0; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — VERY SMALL ≤360px (22.5em)
══════════════════════════════════════════ */
@media (max-width:22.5em) {
  .stats-grid { grid-template-columns:1fr; }
  .bnav-item .bnav-label { display:none; }
  .bnav-item { padding:.5rem .25rem; }
}

/* Landscape phone — убираем нав */
@media (max-height:31.25em) and (max-width:56.25em) {
  #bottom-nav { display:none !important; }
  .main-content { padding-bottom:1rem; }
  .topbar { height:3rem; }
  .chart-wrap { height:10rem; }
}

/* Touch — убираем проблемные hover */
@media (hover:none) {
  .shop-item-card:hover { transform:none; }
  .stat-card:hover      { transform:none; }
  .btn-primary:hover    { filter:none; transform:none; }
  .nav-item:hover       { background:transparent; color:var(--text-secondary); }
  .nav-item:hover::before { display:none; }
}

/* Safe area — notch/dynamic island */
@supports (padding:env(safe-area-inset-left)) {
  #sidebar {
    padding-left:env(safe-area-inset-left);
    padding-top:env(safe-area-inset-top);
  }
  .topbar {
    padding-left:max(1.75rem,env(safe-area-inset-left));
    padding-right:max(1.75rem,env(safe-area-inset-right));
  }
  @media (max-width:56.25em) {
    .topbar {
      padding-left:max(1rem,env(safe-area-inset-left));
      padding-right:max(1rem,env(safe-area-inset-right));
    }
  }
}