/* ---------- Liquid Glass / Apple-ish theme ---------- */
:root{
  --bg-0:#04030a;
  --bg-1:#07060f;
  --fg:#eef1f8;
  --fg-muted:#8a93a7;
  --accent:#a06cff;           /* фиолетовый */
  --accent-2:#3d1a6b;          /* тёмно-фиолетовый */
  --accent-3:#7040d4;
  --danger:#ff6b81;
  --warn:#ffc857;
  --ok:#44d69e;
  --card-bg:rgba(255,255,255,.05);
  --card-br:rgba(255,255,255,.10);
  --card-sh:0 10px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  --radius:18px;
  --radius-sm:12px;
  --ring:0 0 0 2px rgba(160,108,255,.48);
  --blur:26px;
  --ease:cubic-bezier(.4,.0,.2,1);
  --ease-spring:cubic-bezier(.22,1,.36,1);
  /* параллакс: -1..1 по X/Y, обновляется JS */
  --mx:0;
  --my:0;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* HTML-атрибут hidden должен перекрывать любые display:block/flex/grid */
[hidden]{display:none !important}
html{color-scheme:dark;scrollbar-gutter:stable}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 700px at calc(10% + var(--mx,0)*1%) calc(-10% + var(--my,0)*1%), rgba(160,108,255,.18), transparent 60%),
    radial-gradient(900px 600px at calc(90% - var(--mx,0)*1%) calc(10% - var(--my,0)*1%), rgba(61,26,107,.32), transparent 55%),
    radial-gradient(1100px 800px at 50% 120%, rgba(112,64,212,.10), transparent 60%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1));
  min-height:100vh;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
pre{margin:0;font:inherit;white-space:pre-wrap;word-break:break-word}
code{font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:.92em}
small{opacity:.75}

/* Ambient glow — один большой тёмно-фиолетовый градиент снизу-по-центру,
   с ослабленным параллаксом (как на главной и /web/). */
.glass-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.glass-bg span{
  position:absolute;
  left:50%; bottom:-110vmin;
  width:220vmin; height:220vmin; margin-left:-110vmin;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(77,31,149,.55)  0%,
    rgba(61,26,107,.42) 30%,
    rgba(42,16,80,.22)  55%,
    rgba(28,10,56,.08)  80%,
    rgba(28,10,56,0)    100%);
  filter:blur(110px);
  mix-blend-mode:screen;
  transform:translate3d(calc(var(--mx,0) * 25px), calc(var(--my,0) * 16px), 0) scale(1);
  transition:transform .6s var(--ease-spring);
  will-change:transform;
  animation:blob 28s ease-in-out infinite;
}
@keyframes blob{
  0%,100%{ transform:translate3d(calc(var(--mx,0) * 25px), calc(var(--my,0) * 16px), 0) scale(1) }
  50%   { transform:translate3d(calc(var(--mx,0) * 25px + 3vmin), calc(var(--my,0) * 16px - 2vmin), 0) scale(1.06) }
}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:10px 20px;
  background:rgba(8,5,14,.72);
  -webkit-backdrop-filter:saturate(1.4) blur(var(--blur));
  backdrop-filter:saturate(1.4) blur(var(--blur));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:10px;color:inherit;font-weight:600;letter-spacing:.2px}
.brand:hover{text-decoration:none}
.logo{
  display:inline-block;
  width:30px;height:30px;border-radius:9px;
  object-fit:cover;object-position:center;
  background:#1a1326; /* фолбэк пока картинка грузится */
  box-shadow:0 6px 20px rgba(160,108,255,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .3s var(--ease-spring), box-shadow .3s var(--ease);
  user-select:none;
}
.brand:hover .logo{
  transform:scale(1.06) rotate(-3deg);
  box-shadow:0 8px 24px rgba(160,108,255,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.nav{display:flex;gap:6px;margin-left:20px;flex-wrap:wrap}
.nav a{
  padding:8px 12px;border-radius:10px;color:var(--fg);opacity:.85;
}
.nav a:hover{background:rgba(255,255,255,.06);opacity:1;text-decoration:none}
.user{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.uname{font-size:.9em;color:var(--fg-muted)}

/* Page container */
.page{max-width:1620px;margin:16px auto;padding:0 20px 60px;display:flex;flex-direction:column;gap:14px}
@media (min-width:1800px){ .page{max-width:1740px} }

/* Card — liquid glass с лёгким highlight и мягкой анимацией */
.card, .glass{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),
    radial-gradient(600px 220px at 10% 0%, rgba(160,108,255,.09), transparent 60%);
  border:1px solid var(--card-br);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--card-sh);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.15);
  backdrop-filter:blur(var(--blur)) saturate(1.15);
  transition:box-shadow .45s var(--ease-spring), border-color .3s var(--ease);
  overflow:hidden;
  isolation:isolate;
}
/* Тонкий световой ободок — «стеклянный» блик */
.card::before, .glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 35%);
  opacity:.35;pointer-events:none;mix-blend-mode:overlay;
}
.card.hero{text-align:center;padding:36px;display:flex;flex-direction:column;gap:14px;align-items:center}
.card.error{border-color:rgba(255,107,129,.5);box-shadow:0 0 0 1px rgba(255,107,129,.3) inset}
.muted{color:var(--fg-muted)}
.small{font-size:.88em}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 14px;border-radius:12px;
  border:1px solid var(--card-br);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  color:var(--fg);font:inherit;font-weight:600;cursor:pointer;
  transition:transform .05s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-decoration:none;
}
.btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg,#b58cff,#6a39c2);
  border-color:transparent;color:#fff;
  box-shadow:0 10px 24px rgba(112,64,212,.45), inset 0 1px 0 rgba(255,255,255,.38);
  position:relative;overflow:hidden;
}
.btn.primary::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease-spring);
}
.btn.primary:hover::after{transform:translateX(120%)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}

/* Inputs */
input[type=text],input[type=search],input[type=number],textarea,select{
  appearance:none;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--card-br);
  background:rgba(8,12,22,.55);
  color:var(--fg);
  font:inherit;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
textarea{min-height:140px;resize:vertical}
input[type=file]{color:var(--fg-muted)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);background:rgba(8,12,22,.7)}
label{display:flex;flex-direction:column;gap:6px}

/* Search card */
.search .search-row{display:grid;grid-template-columns:220px 1fr auto;gap:8px}
.search .filters{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px;color:var(--fg-muted)}
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.chk input{appearance:none;width:18px;height:18px;border-radius:6px;border:1px solid var(--card-br);background:rgba(255,255,255,.08)}
.chk input:checked{background:linear-gradient(180deg,#b58cff,#6a39c2);border-color:transparent;box-shadow:inset 0 0 0 3px rgba(0,0,0,.2)}
.inline-form{display:flex;gap:8px;margin-bottom:12px;align-items:center}

/* Row list */
.rows{display:flex;flex-direction:column;gap:12px}
.row{padding:16px}
.row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.row-foot{display:flex;justify-content:flex-end;margin-top:10px}

.tag{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:.78em;letter-spacing:.02em;border:1px solid var(--card-br);
  background:rgba(255,255,255,.06);color:var(--fg);
}
.tag.id{font-family:"SF Mono",ui-monospace,Menlo,monospace}
.tag.status{font-weight:600}
.status-pristine .tag.status{color:#ffb3bf;background:rgba(255,107,129,.18);border-color:rgba(255,107,129,.35)}
.status-edited   .tag.status{color:#9cf0c9;background:rgba(68,214,158,.18);border-color:rgba(68,214,158,.35)}
.tag.status-accepted{color:#9cf0c9;background:rgba(68,214,158,.18);border-color:rgba(68,214,158,.35)}
.tag.status-rejected{color:#ffb3bf;background:rgba(255,107,129,.18);border-color:rgba(255,107,129,.35)}
.tag.status-auto{color:#c2b6ff;background:rgba(160,108,255,.2);border-color:rgba(160,108,255,.4)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.col-label{color:var(--fg-muted);font-size:.8em;margin-bottom:4px;letter-spacing:.03em;text-transform:uppercase}
.txt{
  background:rgba(0,0,0,.25);
  border:1px solid var(--card-br);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  line-height:1.45;
  max-height:240px;overflow:auto;
}
.txt.read{background:rgba(0,0,0,.2)}
.role-guest{background:rgba(255,255,255,.08)}
.role-moder{background:rgba(60,170,255,.2);border-color:rgba(60,170,255,.45)}
.role-admin{background:rgba(160,108,255,.25);border-color:rgba(160,108,255,.5)}

/* Pagination */
.pagination{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.pg{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  border-radius:10px;border:1px solid var(--card-br);background:rgba(255,255,255,.04);
  color:var(--fg);
}
.pg:hover{background:rgba(255,255,255,.1);text-decoration:none}
.pg.cur{background:linear-gradient(180deg,#b58cff,#6a39c2);color:#fff;border-color:transparent}
.pg.ellipsis{opacity:.6;background:transparent;border-color:transparent}
.goto{margin-left:auto;display:flex;align-items:center;gap:8px}
.goto label{flex-direction:row;align-items:center;gap:8px}
.goto input[type=number]{width:90px}

/* Edit page */
.edit-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px}
.edit-main{display:flex;flex-direction:column;gap:10px}
.edit-main h2{margin:6px 0 4px;font-size:1rem;color:var(--fg-muted)}
.edit-form{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.lbl{color:var(--fg-muted);font-size:.9em;margin-top:8px}
.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.edit-history{position:sticky;top:70px;max-height:calc(100vh - 90px);overflow:auto}
.hist-item{padding:10px;border:1px solid var(--card-br);border-radius:12px;margin-bottom:10px;background:rgba(0,0,0,.25)}
.hist-head{display:flex;gap:8px;align-items:center;margin-bottom:6px;color:var(--fg-muted);font-size:.85em;flex-wrap:wrap}
@media (max-width:900px){
  .edit-wrap{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .search .search-row{grid-template-columns:1fr}
  .edit-history{position:static;max-height:none}
}

/* Alerts */
.alert{
  padding:12px 14px;border-radius:12px;border:1px solid var(--card-br);
  background:rgba(255,255,255,.06);display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.alert.success{border-color:rgba(68,214,158,.5);background:rgba(68,214,158,.1)}
.alert.error{border-color:rgba(255,107,129,.5);background:rgba(255,107,129,.1)}

/* Moder / mass */
.mod-item{display:flex;flex-direction:column;gap:12px}
.mod-head{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06);
}
.mod-head-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
.mod-head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Блоки «EN / старый RU / новый RU» — по всей ширине, один под другим */
.mod-section{display:flex;flex-direction:column;gap:6px}
.mod-section-label{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:.8em;color:var(--fg-muted);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;
}
.mod-old .txt{border-left:3px solid rgba(255,107,129,.45)}
.mod-new .txt{border-left:3px solid rgba(68,214,158,.55)}

/* Редактируемая textarea «Предложенный RU» */
.mod-edit-ta{
  display:block;width:100%;min-height:5.6em;
  font-family:inherit;font-size:inherit;line-height:inherit;
  white-space:pre-wrap;word-break:break-word;
  resize:vertical;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.mod-edit-ta:focus{
  outline:none;
  border-left:3px solid rgba(68,214,158,.9);
  background:rgba(0,0,0,.32);
  box-shadow:0 0 0 2px rgba(68,214,158,.2);
}
.diff-panel{
  margin-top:6px;
  padding:8px 12px;
  font-size:.92em;line-height:1.45;
  white-space:pre-wrap;word-break:break-word;
  border:1px dashed rgba(160,108,255,.35);
  background:rgba(160,108,255,.05);
}

/* Кнопка-карандаш: активное состояние подсвечено зелёным (режим редактирования) */
.edit-btn{transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)}
.edit-btn.is-active{
  background:rgba(68,214,158,.18);
  border-color:rgba(68,214,158,.55);
  color:#d8f8e6;
}
.edit-btn.is-active svg{color:#37d896}

/* =======================================================
   Красивая кнопка «Прикрепить фото» (file-pick)
   ======================================================= */
.file-pick{
  display:flex;flex-direction:column;gap:10px;
  margin-top:4px;
}
.file-pick-btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px;
  border:1.5px dashed rgba(160,108,255,.35);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(160,108,255,.06), rgba(160,108,255,.02)),
    rgba(0,0,0,.15);
  color:var(--fg);font-weight:500;
  cursor:pointer;user-select:none;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease-spring);
  overflow:hidden;
}
.file-pick-btn::before{
  /* мягкий purple-glow при hover */
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(300px 120px at 50% 50%, rgba(160,108,255,.14), transparent 70%);
  opacity:0;transition:opacity .3s var(--ease);
}
.file-pick-btn:hover{
  border-color:rgba(160,108,255,.6);
  background:
    linear-gradient(180deg, rgba(160,108,255,.10), rgba(160,108,255,.04)),
    rgba(0,0,0,.2);
}
.file-pick-btn:hover::before{opacity:1}
.file-pick-btn:active{transform:scale(.995)}
.file-pick-btn svg{color:#c2a8ff;flex:0 0 auto;transition:transform .25s var(--ease-spring)}
.file-pick-btn:hover svg{transform:scale(1.08) rotate(-3deg)}
.file-pick-label{font-size:1em}
.file-pick-hint{font-size:.82em}
.file-pick-input{
  position:absolute;inset:0;opacity:0;cursor:pointer;
  width:100%;height:100%;
}
.file-pick-input:focus-visible + svg{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

/* Drag-over состояние */
.file-pick.is-dragover .file-pick-btn{
  border-style:solid;
  border-color:var(--accent);
  background:
    linear-gradient(180deg, rgba(160,108,255,.18), rgba(160,108,255,.08)),
    rgba(0,0,0,.2);
  box-shadow:0 0 0 4px rgba(160,108,255,.18);
  transform:scale(1.01);
}
.file-pick.is-dragover .file-pick-btn::before{opacity:1}

/* Превью после выбора */
.file-pick-preview{
  display:flex;align-items:center;gap:12px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(68,214,158,.35);
  background:rgba(68,214,158,.06);
  animation:fp-in .35s var(--ease-spring);
}
@keyframes fp-in{
  from{opacity:0;transform:translateY(-6px) scale(.98);filter:blur(4px)}
  to  {opacity:1;transform:none;filter:none}
}
.file-pick-img{
  width:60px;height:60px;flex:0 0 auto;
  object-fit:cover;border-radius:8px;
  background:#000;
  border:1px solid rgba(255,255,255,.08);
}
.file-pick-info{flex:1 1 auto;min-width:0}
.file-pick-name{
  font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.file-pick-size{margin-top:2px}
.file-pick-clear{
  flex:0 0 auto;
  width:30px;height:30px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:rgba(255,107,129,.18);color:#ffd5dc;
  cursor:pointer;
  transition:background .18s var(--ease), transform .15s var(--ease-spring);
}
.file-pick-clear:hover{background:rgba(255,107,129,.35);color:#fff;transform:rotate(90deg)}

/* Когда файл выбран — dashed-кнопка сворачивается в компактный «сменить» */
.file-pick.has-file .file-pick-btn{
  padding:8px 14px;font-size:.9em;
  border-style:solid;border-color:var(--card-br);
  background:rgba(255,255,255,.04);
}
.file-pick.has-file .file-pick-btn .file-pick-hint{display:none}
.file-pick.has-file .file-pick-btn .file-pick-label::before{content:'Заменить фото';}
.file-pick.has-file .file-pick-btn .file-pick-label{font-size:0}
.file-pick.has-file .file-pick-btn .file-pick-label::before{font-size:1rem;display:inline}

/* Скриншот-превью inline */
.mod-screenshot{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.screenshot-panel{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--card-br);
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  animation:ss-in .35s var(--ease-spring);
}
@keyframes ss-in{
  from{opacity:0;transform:translateY(-4px) scale(.98);filter:blur(4px)}
  to  {opacity:1;transform:none;filter:none}
}
.screenshot-img{
  display:block;max-width:100%;max-height:520px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
  background:#000;
  cursor:zoom-in;
  transition:transform .25s var(--ease-spring);
}
.screenshot-img:hover{transform:scale(1.01)}
@media (max-width:760px){
  .screenshot-img{max-height:360px}
}

/* Разделитель между старым и новым — едва заметная полоса с подписью */
.mod-new{position:relative}
.mod-new::before{
  content:'';display:block;height:1px;width:100%;margin:2px 0 6px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}

.mass-summary{margin:4px 0 8px;line-height:1.5}

/* Красная кнопка «Отклонить» */
.btn-danger{
  background:linear-gradient(180deg,rgba(255,107,129,.22),rgba(200,60,85,.3));
  border:1px solid rgba(255,107,129,.5);
  color:#ffd5dc;
}
.btn-danger:hover{
  background:linear-gradient(180deg,rgba(255,107,129,.32),rgba(200,60,85,.45));
  color:#fff;
}

/* Очень компактная ghost-кнопка */
.btn-xs{padding:3px 8px;font-size:.78em;border-radius:8px;min-height:0}

/* Кнопка «Подсветить разницу» — slightly larger, with icon */
.diff-btn{
  padding:6px 12px;font-size:.88em;border-radius:10px;gap:6px;
  font-weight:500;
}
.diff-btn svg{opacity:.85;transition:transform .25s var(--ease-spring)}
.diff-btn:hover svg{transform:rotate(12deg) scale(1.1)}

/* Flash-баннер */
.flash-banner{
  animation:flash-in .4s var(--ease-spring);
  font-weight:500;
}
.alert.warn{border-color:rgba(255,200,87,.5);background:rgba(255,200,87,.12);color:#ffe6b0}
@keyframes flash-in{
  from{opacity:0;transform:translateY(-8px);filter:blur(4px)}
  to  {opacity:1;transform:none;filter:none}
}

/* Счётчик в табе */
.tab-count{
  display:inline-block;min-width:22px;text-align:center;
  padding:1px 7px;margin-left:4px;border-radius:999px;
  background:rgba(255,255,255,.1);font-size:.8em;
}
.tab.active .tab-count{background:rgba(255,255,255,.25)}
.prop-comment{
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(160,108,255,.28);
  background:linear-gradient(180deg,rgba(160,108,255,.10),rgba(160,108,255,.04));
  display:flex;flex-direction:column;gap:4px;
}
.prop-comment-label{font-size:.8em;color:#c2a8ff;letter-spacing:.02em;font-weight:600}
.prop-comment-body{font-size:.95em;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.mass-form{display:flex;flex-direction:column;gap:14px}
.mass-form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mass-form .grid2 label{gap:6px}
.mass-form .mass-opts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:2px}
.mass-preview{display:flex;flex-direction:column;gap:10px;max-height:65vh;overflow:auto;padding-right:4px}
.mass-preview .diff-row{
  display:grid;grid-template-columns:170px 1fr;gap:10px;align-items:start;
  padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.2);
}
.mass-preview .diff-row .diff-id{
  font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:.82em;
  color:var(--fg-muted);word-break:break-all;
}
.mass-preview .diff-row .diff-body{display:flex;flex-direction:column;gap:6px}
.diff-line{font-size:.92em;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.diff-line .lbl{
  display:inline-block;min-width:52px;font-size:.75em;color:var(--fg-muted);
  text-transform:uppercase;letter-spacing:.06em;margin-right:8px;opacity:.75;
}
.diff-del{background:rgba(255,107,129,.28);color:#ffd5dc;padding:1px 4px;border-radius:4px;text-decoration:line-through}
.diff-ins{background:rgba(68,214,158,.28);color:#d8f8e6;padding:1px 4px;border-radius:4px;font-weight:600}

/* Leaderboard */
.leaderboard{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.lb-item{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--card-br)}
.lb-rank{font-weight:700;color:var(--accent)}
.lb-count{font-weight:600}

/* Tabs */
.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.tab{
  padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--card-br);color:var(--fg);
}
.tab.active{background:linear-gradient(180deg,#b58cff,#6a39c2);color:#fff;border-color:transparent}
.tab:hover{text-decoration:none}

/* Log table */
.log-table{width:100%;border-collapse:collapse;font-size:.92em;background:transparent}
.log-table th,.log-table td{
  padding:8px 10px;border-bottom:1px dashed var(--card-br);text-align:left;vertical-align:top;
}
.log-table th{color:var(--fg-muted);font-weight:500;letter-spacing:.02em}

/* Diff */
.diff-ins{background:rgba(68,214,158,.3);color:#dfffec;padding:0 2px;border-radius:3px}
.diff-del{background:rgba(255,107,129,.3);color:#ffe5ea;padding:0 2px;border-radius:3px;text-decoration:line-through}

/* Footer */
.foot{text-align:center;padding:20px;color:var(--fg-muted);opacity:.7}

/* Utility */
.inline{display:inline}

/* ========================================================
   Sticky toolbar (поиск + фильтры)
   ======================================================== */
.toolbar{margin:0 0 10px}
.sticky-toolbar{position:sticky;top:54px;z-index:40}
.toolbar-inner{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  padding:10px 14px;border-radius:16px;border:1px solid var(--card-br);
  background:linear-gradient(180deg,rgba(18,13,26,.78),rgba(12,9,20,.7));
  box-shadow:0 12px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.25);
  backdrop-filter:blur(var(--blur)) saturate(1.25);
  /* Глобальный .glass задаёт overflow:hidden + isolation:isolate — это обрезает
     выпадающий список select'а. Для тулбара нам нужно, чтобы list "вылезал" наружу. */
  overflow:visible;
  isolation:auto;
  will-change:transform;
}
/* Аналогично — родительский sticky-form / внутренние контейнеры не должны клиппить */
.sticky-toolbar, .tb-top, .tb-search, .sel-wrap { overflow:visible }
.tb-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.count-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:.92em;
  padding:6px 12px;border-radius:9px;
  background:rgba(255,255,255,.06);border:1px solid var(--card-br);
  color:var(--fg-muted);white-space:nowrap;
  line-height:1.3;text-transform:none;letter-spacing:0;
}
.count-pill b{color:var(--fg);font-weight:600}
.tb-search{display:flex;align-items:center;gap:10px;flex:1 1 360px;min-width:0}
.tb-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tb-input{position:relative;flex:1 1 auto;min-width:160px}
.tb-input input{padding:0 46px 0 14px;height:42px;border-radius:12px}
/* Кнопка-лупа внутри поля поиска */
.tb-submit{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:9px;cursor:pointer;
  color:#fff;
  background:linear-gradient(180deg,#b58cff,#6a39c2);
  box-shadow:0 4px 14px rgba(112,64,212,.45), inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter .2s var(--ease), transform .1s var(--ease), box-shadow .2s var(--ease);
  overflow:hidden;
}
.tb-submit:hover{filter:brightness(1.08)}
.tb-submit:active{transform:translateY(-50%) scale(.94)}
.tb-submit:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(160,108,255,.55), inset 0 1px 0 rgba(255,255,255,.35)}
.tb-submit svg{transition:opacity .2s var(--ease)}
/* Во время submit'a иконка прячется, спиннер центрируется */
.tb-submit.is-loading svg{opacity:0}
.tb-submit.is-loading .spinner{
  position:absolute;top:50%;left:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;
  vertical-align:baseline;
}
.tb-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tb-count{color:var(--fg-muted);font-size:.9em;padding:0 6px}
.tb-count b{color:var(--fg);font-weight:700}

/* Кастомный dropdown (liquid glass, без системного «серого» меню) */
.sel-wrap{position:relative;min-width:200px;flex:0 0 auto}
.sel-btn{
  appearance:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;height:42px;padding:0 14px;border-radius:12px;
  background:rgba(0,0,0,.35);
  border:1px solid var(--card-br);color:var(--fg);font:inherit;font-weight:600;
  cursor:pointer;text-align:left;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.sel-btn:hover{background:rgba(0,0,0,.48);border-color:rgba(160,108,255,.35)}
.sel-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--ring);background:rgba(0,0,0,.5)}
.sel-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-arrow{color:var(--fg-muted);flex:0 0 auto;transition:transform .22s var(--ease-spring), color .18s var(--ease)}
.sel-wrap.is-open .sel-btn{
  border-color:var(--accent);
  background:rgba(0,0,0,.55);
  box-shadow:var(--ring);
}
.sel-wrap.is-open .sel-arrow{transform:rotate(180deg);color:var(--accent)}

/* Выпадающий список */
.sel-list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:120;
  margin:0;padding:4px;list-style:none;
  background:linear-gradient(180deg,rgba(22,16,34,.92),rgba(14,10,22,.92));
  border:1px solid var(--card-br);
  border-radius:12px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.55),
    0 0 0 1px rgba(160,108,255,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);
  backdrop-filter:blur(var(--blur)) saturate(1.3);
  transform-origin:top center;
  animation:sel-list-in .22s cubic-bezier(.34,1.25,.3,1);
  overflow:hidden;
}
@keyframes sel-list-in{
  from{opacity:0;transform:translateY(-6px) scale(.97);filter:blur(3px)}
  to  {opacity:1;transform:none;filter:none}
}
.sel-list li{
  padding:9px 12px;border-radius:8px;
  cursor:pointer;user-select:none;
  font-size:.95em;color:var(--fg);
  transition:background .15s var(--ease), color .15s var(--ease);
  outline:none;
}
.sel-list li:hover,
.sel-list li:focus-visible{
  background:rgba(160,108,255,.12);color:#fff;
}
.sel-list li.is-selected{
  background:linear-gradient(180deg,#a06cff,#6a39c2);
  color:#fff;
  box-shadow:0 4px 12px rgba(112,64,212,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.sel-list li.is-selected:hover{filter:brightness(1.05)}

/* ---------- iOS-style toggles (компакт) ---------- */
/* Группа тумблеров: единая обводка и скругление как у кнопок (12px).
   Сами тумблеры внутри идут вертикально (каждый — одна горизонтальная строка). */
.toggle-group{
  display:inline-flex;flex-direction:column;align-items:stretch;
  padding:3px;gap:0;
  border:1px solid var(--card-br);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  max-width:100%;
}
/* Тонкий разделитель между тумблерами в группе */
.toggle-group .toggle + .toggle{
  border-top:1px solid rgba(255,255,255,.05);
}

/* Одна строка: [трек] [label] — строго горизонтально */
.toggle{
  display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;
  gap:8px;
  padding:3px 10px 3px 5px;
  border-radius:9px;
  background:transparent;border:0;
  cursor:pointer;user-select:none;color:var(--fg);
  font-size:.82em;line-height:1;
  transition:background .2s var(--ease);
  min-width:0;
  min-height:26px;
}
.toggle:hover{background:rgba(255,255,255,.06)}
.toggle input{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
/* Уменьшенный трек: 30×17 */
.toggle .track{
  position:relative;flex:0 0 auto;
  width:30px;height:17px;border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
  transition:background .3s var(--ease-spring), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.toggle .knob{
  position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#d8d8e0);
  box-shadow:0 2px 4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .28s cubic-bezier(.34,1.25,.3,1), background .25s var(--ease), width .2s var(--ease);
}
.toggle input:checked + .track{
  background:linear-gradient(180deg,#a06cff,#6a39c2);
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(160,108,255,.18), inset 0 1px 2px rgba(0,0,0,.25);
}
.toggle input:checked + .track .knob{
  transform:translateX(13px);
}
.toggle:active .knob{width:16px}
.toggle input:focus-visible + .track{box-shadow:0 0 0 3px rgba(160,108,255,.55), inset 0 1px 2px rgba(0,0,0,.25)}
.toggle .tgl-label{
  line-height:1.1;color:var(--fg);opacity:.88;
  white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.toggle input:checked ~ .tgl-label{color:#e0d4ff;opacity:1}

/* Inline-вариант — под одну высоту с кнопкой (~42px) */
.toggle-group.inline{
  align-self:center;
  min-height:42px;
  padding:4px 4px 4px 6px;
  border-radius:12px;
}
.toggle-group.inline .toggle{
  padding:6px 12px 6px 6px;
  min-height:32px;
  font-size:.9em;
}
.toggle-group.inline .toggle .track{width:34px;height:19px}
.toggle-group.inline .toggle .knob{width:15px;height:15px}
.toggle-group.inline .toggle input:checked + .track .knob{transform:translateX(15px)}

@media (max-width:760px){
  .toggle-group:not(.inline){width:100%}
}

/* ========================================================
   Компактный «таблично-списочный» вид строк
   ======================================================== */
.table-list{
  position:relative;
  padding:0;overflow:hidden;border-radius:18px;
  border:1px solid var(--card-br);
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
    radial-gradient(900px 240px at 50% 0%, rgba(160,108,255,.06), transparent 60%);
  box-shadow:var(--card-sh);
  -webkit-backdrop-filter:blur(var(--blur));
  backdrop-filter:blur(var(--blur));
  will-change:transform;
}
.tl-head,.tl-row{
  display:grid;
  grid-template-columns:180px minmax(0,1fr) minmax(0,1fr) 180px;
  gap:14px;align-items:center;
  padding:6px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
/* Шапка обычная (НЕ sticky), просто первая строка — никаких наслоений */
.tl-head{
  position:relative;
  font-size:.72em;text-transform:uppercase;letter-spacing:.06em;
  color:var(--fg-muted);font-weight:600;
  padding-top:10px;padding-bottom:10px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tl-head .c-act{
  display:flex;justify-content:flex-end;align-items:center;
}
.tl-row{
  transition:background .25s var(--ease);
  min-height:44px;
  align-items:start;
}
.tl-row:hover{background:rgba(160,108,255,.06)}
.tl-row:last-child{border-bottom:0}
.tl-empty{padding:24px;text-align:center}
.tl-row .c-id{display:flex;align-items:center;gap:10px;min-width:0}
.dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(0,0,0,.35);
  transition:transform .2s var(--ease-spring), box-shadow .2s var(--ease);
}
.tl-row:hover .dot{transform:scale(1.25)}
.is-edited  .dot{background:#37d896;box-shadow:0 0 12px rgba(55,216,150,.6),0 0 0 3px rgba(0,0,0,.35)}
.is-pristine .dot{background:#ff6b81;box-shadow:0 0 12px rgba(255,107,129,.5),0 0 0 3px rgba(0,0,0,.35)}
.id-pill{
  display:inline-block;max-width:100%;
  font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:.8em;
  padding:3px 8px;border-radius:7px;
  background:rgba(255,255,255,.06);border:1px solid var(--card-br);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tl-row .celltxt{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.05);
  border-radius:9px;
  padding:6px 10px;
  font-size:.9em;line-height:1.4;
  white-space:pre-wrap;word-break:break-word;
  overflow:hidden;
  /* ~2 строки + внутренний padding */
  max-height:calc(1.4em * 2 + 14px);
  /* Мягкий фейд-аут снизу — намёк, что текст обрезан */
  -webkit-mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.45) 100%);
          mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.45) 100%);
  transition:
    max-height .55s var(--ease-spring),
    background .3s var(--ease),
    border-color .3s var(--ease),
    -webkit-mask-image .3s var(--ease),
            mask-image .3s var(--ease);
  will-change:max-height;
}
.tl-row:hover .celltxt{
  /* max-height управляется JS (pointerenter — выставляет точный scrollHeight).
     Fallback без JS: :hover снимет клип и покажет весь текст (без плавной анимации). */
  background:rgba(0,0,0,.32);
  border-color:rgba(160,108,255,.28);
  -webkit-mask-image:linear-gradient(180deg,#000,#000);
          mask-image:linear-gradient(180deg,#000,#000);
}
/* Когда пользователь без JS наводит — убираем maxHeight совсем */
.no-js .tl-row:hover .celltxt{max-height:none}
.tl-row .c-act{display:flex;justify-content:flex-end;align-items:center}
.btn.sm{padding:5px 10px;font-size:.86em;border-radius:9px;gap:5px;min-height:30px}

/* Цветной индикатор-штрих слева */
.tl-row{position:relative}
.tl-row::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;
  background:transparent;transition:background .2s var(--ease), width .2s var(--ease-spring);
}
.tl-row:hover::before{width:5px}
.is-edited::before{background:linear-gradient(180deg,#37d896,#14a06a)}
.is-pristine::before{background:linear-gradient(180deg,#ff6b81,#c94560)}

@media (max-width:980px){
  /* На мобильном шапка сокращается до одного ряда с count-pill справа */
  .tl-head{
    display:flex;justify-content:flex-end;align-items:center;
    padding:10px 14px;
    grid-template-columns:none;
  }
  .tl-head > div:not(.c-act){display:none}
  .tl-head .c-act{justify-content:flex-end}
  .tl-row{
    grid-template-columns:1fr;
    gap:8px;padding:12px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .tl-row .c-act{justify-content:flex-start}
  .sticky-toolbar{top:54px}
}

/* ========================================================
   Параллакс стекла — только на устройствах с точным указателем (мышь).
   Амплитуда малая (~1px), transition длинный (0.7s spring) — курсор внутри
   таблицы не вызывает заметной тряски, но при движении по странице появляется
   лёгкое «плавание» слоёв, создающее глубину.
   ======================================================== */
@media (hover: hover) and (pointer: fine) {
  .toolbar-inner{
    transform:translate3d(calc(var(--mx,0) * 1px), calc(var(--my,0) * .6px), 0);
    transition:transform .7s var(--ease-spring);
  }
  .table-list{
    /* Параллакс усилен: таблица «плавает» заметнее. Длинный transition
       сохраняет ту же плавность — курсор внутри таблицы не дёрнет её резко. */
    transform:translate3d(calc(var(--mx,0) * 4px), calc(var(--my,0) * 3px), 0);
    transition:transform .8s var(--ease-spring);
  }
}
/* Пользователи с reduced-motion — без движения */
@media (prefers-reduced-motion: reduce) {
  .toolbar-inner, .table-list { transform:none !important }
}

/* ========================================================
   Apple-ish liquid glass: search / page-in animations
   ======================================================== */

/* Стаггер-эффект появления строк — каждая строка расшторивается сквозь blur.
   Клэмп на 25 — защита от долгих анимаций при больших страницах. */
.tl-row{
  animation:tl-row-in 560ms var(--ease-spring) backwards;
  animation-delay:calc(min(var(--i, 0), 25) * 28ms);
}
@keyframes tl-row-in{
  0%{
    opacity:0;
    transform:translateY(10px) scale(.985);
    filter:blur(8px);
  }
  60%{ filter:blur(0) }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}

/* Stagger-in для карточек в кабинете модератора (правки и массовые).
   Клэмпим индекс на 20 — чтобы при 200 карточках анимация не растянулась на 12 секунд. */
.mod-item{
  animation:mod-item-in 620ms var(--ease-spring) backwards;
  animation-delay:calc(min(var(--i, 0), 20) * 60ms);
  will-change:transform, opacity, filter;
}
@keyframes mod-item-in{
  0%{
    opacity:0;
    transform:translateY(14px) scale(.98);
    filter:blur(10px) saturate(.8);
  }
  55%{ filter:blur(0) saturate(1) }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}

/* Exit-animation: «Принять» → улетает вправо в дым, «Отклонить» → влево.
   Effect: translate + scale + rotate + blur + opacity — имитирует liquid-glass dissolve. */
.mod-item.mod-leaving{
  pointer-events:none;user-select:none;
  transition:
    transform .72s cubic-bezier(.55,0,.45,1),
    opacity   .72s cubic-bezier(.4,0,.2,1),
    filter    .72s cubic-bezier(.4,0,.2,1),
    margin    .72s cubic-bezier(.4,0,.2,1),
    max-height .8s cubic-bezier(.4,0,.2,1),
    padding   .72s cubic-bezier(.4,0,.2,1);
  opacity:0;
  filter:blur(14px) saturate(.5);
  max-height:0;
  margin-top:0;margin-bottom:0;
  padding-top:0;padding-bottom:0;
  overflow:hidden;
}
.mod-item.mod-leaving.leave-right{
  transform:translateX(40%) scale(.88) rotate(2deg);
}
.mod-item.mod-leaving.leave-left{
  transform:translateX(-40%) scale(.88) rotate(-2deg);
}
/* Эффект «распада» через mask — снизу-направо/налево */
.mod-item.mod-leaving.leave-right{
  -webkit-mask-image:linear-gradient(110deg,#000 10%,transparent 70%);
          mask-image:linear-gradient(110deg,#000 10%,transparent 70%);
}
.mod-item.mod-leaving.leave-left{
  -webkit-mask-image:linear-gradient(-110deg,#000 10%,transparent 70%);
          mask-image:linear-gradient(-110deg,#000 10%,transparent 70%);
}
@media (prefers-reduced-motion: reduce){
  .mod-item{animation:none}
  .mod-item.mod-leaving{opacity:0;transition:opacity .2s;filter:none;transform:none;max-height:0;margin:0;padding:0}
}

/* Плавное появление тулбара и всей таблицы */
.sticky-toolbar{animation:tb-in 540ms var(--ease-spring) backwards}
.table-list{animation:tb-in 620ms var(--ease-spring) 60ms backwards}
@keyframes tb-in{
  from{opacity:0; transform:translateY(-6px); filter:blur(6px)}
  to  {opacity:1; transform:none;              filter:none}
}

/* Состояние «идёт поиск» — таблица переходит в liquid-glass loading */
.table-list.is-loading{
  transition:filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease-spring);
  filter:blur(6px) saturate(.85);
  opacity:.55;
  pointer-events:none;
  transform:scale(.995);
}
/* Перекатывающийся блик поверх размытия */
.table-list.is-loading::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(110deg,
    transparent 0%, transparent 30%,
    rgba(160,108,255,.18) 45%, rgba(200,160,255,.28) 50%, rgba(160,108,255,.18) 55%,
    transparent 70%, transparent 100%);
  background-size:220% 100%;
  animation:lg-shimmer 1.35s cubic-bezier(.4,0,.6,1) infinite;
  mix-blend-mode:plus-lighter;
}
@keyframes lg-shimmer{
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* Тулбар во время поиска */
.toolbar-inner.is-loading{
  transition:filter .3s var(--ease), opacity .3s var(--ease);
  pointer-events:none;
}
.toolbar-inner.is-loading .tb-input input,
.toolbar-inner.is-loading .sel-wrap select{
  background:rgba(0,0,0,.6);
}
.toolbar-inner.is-loading .tb-input::after{
  content:'';position:absolute;left:36px;right:12px;bottom:6px;height:2px;
  border-radius:2px;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(160,108,255,.9),transparent);
  background-size:40% 100%;background-repeat:no-repeat;background-position:-40% 0;
  animation:lg-line 900ms var(--ease) infinite;
}
@keyframes lg-line{
  0%   { background-position:-40% 0; }
  100% { background-position:140% 0; }
}
.tb-input{position:relative}

/* Спиннер в primary-кнопке */
.btn .spinner{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  animation:spin 700ms linear infinite;
  vertical-align:-2px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-loading{pointer-events:none}
.btn.is-loading .btn-label{opacity:.55}

/* Пульс на тумблере при смене — знак «принято, грузим» */
.toggle input:checked + .track{position:relative}
.toggle.is-firing input:checked + .track::after{
  content:'';position:absolute;inset:-4px;border-radius:999px;
  border:2px solid rgba(160,108,255,.7);
  animation:tgl-pulse 700ms var(--ease) forwards;
  pointer-events:none;
}
@keyframes tgl-pulse{
  0%   { opacity:.9; transform:scale(.9) }
  100% { opacity:0;  transform:scale(1.6) }
}

@media (prefers-reduced-motion: reduce){
  .tl-row, .sticky-toolbar, .table-list{animation:none}
  .table-list.is-loading::before{animation:none}
  .toolbar-inner.is-loading .tb-input::after{animation:none}
}

/* ========================================================
   Мои правки: статистика
   ======================================================== */
.myedits-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;margin-top:10px;
}
.stat-card{
  padding:12px 14px;border-radius:12px;
  border:1px solid var(--card-br);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  text-align:center;
}
.stat-num{font-size:1.6em;font-weight:700;line-height:1.1}
.stat-label{font-size:.8em;color:var(--fg-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.04em}
.stat-pending  {border-color:rgba(255,200,87,.35)}
.stat-pending  .stat-num{color:#ffd98a}
.stat-accepted {border-color:rgba(68,214,158,.35)}
.stat-accepted .stat-num{color:#9cf0c9}
.stat-rejected {border-color:rgba(255,107,129,.35)}
.stat-rejected .stat-num{color:#ffb3bf}
.stat-rate     {border-color:rgba(160,108,255,.35)}
.stat-rate     .stat-num{color:#c2a8ff}

.tag.status-pending{color:#ffe1a0;background:rgba(255,200,87,.18);border-color:rgba(255,200,87,.4)}

/* ========================================================
   History tab
   ======================================================== */
.hist-head-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:12px;
}
.hist-filters{display:flex;gap:6px;flex-wrap:wrap}
.chip-filter{
  display:inline-flex;align-items:center;
  padding:6px 11px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid var(--card-br);
  color:var(--fg-muted);text-decoration:none;font-size:.88em;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.chip-filter:hover{background:rgba(255,255,255,.08);color:var(--fg);text-decoration:none}
.chip-filter.active{
  background:linear-gradient(180deg,#b58cff,#6a39c2);
  color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(112,64,212,.3);
}

.history-list{display:flex;flex-direction:column;gap:6px}
.hist-row{
  border-radius:10px;border:1px solid var(--card-br);
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
.hist-row[open]{background:rgba(255,255,255,.04);border-color:rgba(160,108,255,.3)}
.hist-summary{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;cursor:pointer;user-select:none;
  list-style:none;font-size:.92em;
}
.hist-summary::-webkit-details-marker{display:none}
.hist-summary::marker{content:''}
.hist-summary::before{
  content:'▸';color:var(--fg-muted);font-size:.8em;
  display:inline-block;width:12px;transition:transform .2s var(--ease);
}
.hist-row[open] .hist-summary::before{transform:rotate(90deg)}
.hist-textid{
  font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:.88em;
  max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hist-date{margin-left:auto;white-space:nowrap}
.hist-body{
  display:flex;flex-direction:column;gap:10px;
  padding:10px 14px 14px;
  border-top:1px solid rgba(255,255,255,.05);
}
.hist-field .mod-section-label{margin-bottom:4px}
@media (max-width:760px){
  .hist-summary{font-size:.88em;gap:6px}
  .hist-date{margin-left:0;width:100%;order:10}
  .hist-textid{max-width:100%}
}

/* ========================================================
   Info-блок (описание / подсказка)
   ======================================================== */
.info-block{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;margin:6px 0 16px;
  border-radius:12px;
  border:1px solid rgba(160,108,255,.25);
  background:
    linear-gradient(180deg,rgba(160,108,255,.10),rgba(160,108,255,.04)),
    rgba(0,0,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.info-block .info-icon{
  flex:0 0 auto;color:#c2a8ff;margin-top:1px;
  filter:drop-shadow(0 0 8px rgba(160,108,255,.35));
}
.info-block .info-text{
  font-size:.95em;line-height:1.45;color:#e8e4f4;
}
.info-block .info-text b{color:#fff;font-weight:600}

/* ========================================================
   Empty-state (ничего не найдено)
   ======================================================== */
.empty-state{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:10px;padding:36px 20px;
}
.empty-state .empty-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(180deg,rgba(160,108,255,.18),rgba(61,26,107,.25));
  border:1px solid rgba(160,108,255,.3);
  color:#c2a8ff;margin-bottom:4px;
  box-shadow:0 10px 30px rgba(112,64,212,.25), inset 0 1px 0 rgba(255,255,255,.1);
}
.empty-state h3{margin:0;font-size:1.15rem;font-weight:600}
.empty-state p{margin:0;max-width:520px}

/* ========================================================
   Конфиги (admin → вкладка «Конфиги»)
   ======================================================== */
.cfg-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cfg-item{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 14px;border-radius:12px;
  border:1px solid var(--card-br);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  color:inherit;text-decoration:none;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .2s var(--ease-spring);
}
.cfg-item:hover{
  background:rgba(160,108,255,.08);
  border-color:rgba(160,108,255,.3);
  text-decoration:none;
  transform:translateX(2px);
}
.cfg-item-main{min-width:0;flex:1 1 auto}
.cfg-item-title{font-weight:600;line-height:1.3}
.cfg-item-hint{margin-top:2px}
.cfg-item-path{margin-top:3px;word-break:break-all}
.cfg-item-meta{text-align:right;flex:0 0 auto;white-space:nowrap;line-height:1.4}

.config-editor .cfg-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--card-br);
}
.config-editor .cfg-state{flex:0 0 auto}
.cfg-textarea{
  width:100%;min-height:420px;
  font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.88em;line-height:1.45;
  padding:12px 14px;border-radius:12px;
  background:rgba(0,0,0,.42);color:#eef1f8;
  border:1px solid var(--card-br);
  resize:vertical;tab-size:2;
  white-space:pre;overflow:auto;
}
.cfg-textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.cfg-actions{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;
}
.cfg-actions [data-cfg-status]{min-width:180px}
.cfg-actions [data-cfg-status].ok{color:#9cf0c9}
.cfg-actions [data-cfg-status].err{color:#ffb3bf}

@media (max-width:760px){
  .cfg-item{flex-direction:column;align-items:stretch}
  .cfg-item-meta{text-align:left}
  .cfg-textarea{min-height:300px;font-size:.82em}
  .cfg-actions{flex-direction:column;align-items:stretch}
  .cfg-actions .btn{width:100%;justify-content:center}
  .cfg-actions [data-cfg-status]{text-align:center}
}

/* ========================================================
   Repack-bar в кабинете модератора
   ======================================================== */
.repack-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;
}
.repack-bar .repack-info{display:flex;align-items:center;gap:12px;min-width:0}
.repack-bar .repack-info svg{color:#c2a8ff;flex:0 0 auto;filter:drop-shadow(0 0 8px rgba(160,108,255,.35))}
.repack-bar .repack-title{font-weight:600;line-height:1.2}
.repack-bar .repack-sub{margin-top:2px}
.repack-bar .btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}
.repack-bar .btn[disabled]:hover{filter:grayscale(.3)}
@media (max-width:760px){
  .repack-bar{flex-direction:column;align-items:stretch;padding:10px 12px}
  .repack-bar form,.repack-bar .btn{width:100%}
  .repack-bar .btn{justify-content:center}
}

/* ========================================================
   MOBILE (≤ 760px)
   Консолидированный layout-фикс для телефонов.
   ======================================================== */
@media (max-width:760px){
  /* Базовые отступы */
  html,body{scrollbar-gutter:auto}
  .page{padding:0 12px 40px;gap:12px;margin:10px auto}

  /* Сгладим параллакс-градиенты фона — на маленьких экранах они лишний шум */
  body{background-attachment:scroll}
  .glass-bg span{filter:blur(70px);opacity:.3}

  /* ----- Topbar ----- */
  .topbar{
    padding:8px 12px;gap:10px;
    flex-wrap:wrap;
    row-gap:8px;
  }
  .brand span:not(.logo){font-size:.95rem}
  .logo{width:28px;height:28px;border-radius:8px}
  .nav{
    order:3;width:100%;margin-left:0;
    gap:2px;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    flex-wrap:nowrap;
    padding-bottom:2px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:6px 10px;font-size:.88em;white-space:nowrap}
  .user{margin-left:auto;gap:6px;flex-wrap:nowrap}
  .user .badge{display:none}
  .user .uname{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82em}
  .user .btn.ghost{padding:6px 10px;font-size:.85em}

  /* ----- Карточки — меньше паддинга ----- */
  .card, .glass{padding:14px;border-radius:14px}
  .card.hero{padding:22px 16px}

  /* ----- Sticky toolbar ----- */
  .sticky-toolbar{top:0}
  .toolbar-inner{padding:8px 10px;border-radius:14px;gap:6px}
  .tb-top{flex-direction:column;align-items:stretch;gap:8px}
  .tb-search{flex:1 1 auto;gap:6px;flex-wrap:nowrap}
  .sel-wrap{min-width:0;flex:0 1 44%}
  .sel-btn{padding:0 10px;font-size:.9em;height:38px}
  .sel-list{font-size:.92em}
  .tb-input{flex:1 1 auto;min-width:0}
  .tb-input input{height:38px;padding:0 40px 0 12px;font-size:.95em}
  .tb-submit{width:30px;height:30px;right:4px}
  .tb-filters{width:100%}
  .toggle-group{width:100%;justify-content:flex-start}

  /* ----- Таблица: уже на 980px переключается на 1 колонку, тут — шрифт/паддинг ----- */
  .table-list .tl-head{display:flex;justify-content:flex-end;padding:8px 12px}
  .tl-row{padding:10px 12px;gap:6px}
  /* На touch — без обрезки и без mask-fade: ячейка показывает весь текст */
  .tl-row .celltxt{
    font-size:.9em;padding:6px 8px;
    max-height:none;
    -webkit-mask-image:none;mask-image:none;
  }
  .id-pill{font-size:.78em}
  .tag{font-size:.72em;padding:2px 7px}
  .count-pill{font-size:.85em;padding:5px 9px}

  /* ----- Пагинация ----- */
  .pagination{gap:4px;justify-content:center}
  .pg{min-width:32px;height:32px;font-size:.88em;padding:0 7px}
  .goto{width:100%;justify-content:center;margin-top:6px;margin-left:0}
  .goto input[type=number]{width:80px}

  /* ----- Edit page ----- */
  .edit-wrap{grid-template-columns:1fr;gap:12px}
  .edit-history{position:static;max-height:none;padding:14px}
  .breadcrumb{flex-wrap:wrap}
  .cols{grid-template-columns:1fr;gap:10px}
  .txt{padding:8px 10px;font-size:.92em;max-height:360px}
  textarea{min-height:120px;font-size:.95em}

  /* ----- Mass replace / форма ----- */
  .mass-form{gap:10px}
  .mass-form .grid2{grid-template-columns:1fr;gap:8px}
  .mass-form .form-actions{flex-wrap:wrap}
  .mass-form .form-actions .btn,
  .mass-form .form-actions .toggle-group{width:100%}
  .toggle-group.inline{min-height:40px;width:100%}
  .info-block{padding:10px 12px;gap:8px;font-size:.92em}
  .info-block .info-icon{width:18px;height:18px}

  /* Превью диффа — столбец */
  .mass-preview .diff-row{grid-template-columns:1fr;gap:6px;padding:10px}
  .mass-preview .diff-row .diff-id{font-size:.78em}
  .diff-line{font-size:.88em}

  /* ----- Moderator cards ----- */
  .mod-head{flex-direction:column;align-items:stretch;gap:10px}
  .mod-head-left{width:100%;flex-wrap:wrap}
  .mod-head-actions{width:100%;justify-content:stretch}
  .mod-head-actions .inline,
  .mod-head-actions form{flex:1 1 auto}
  .mod-head-actions .btn{width:100%;justify-content:center}
  .mod-section .txt{font-size:.92em;max-height:none}
  .mod-section-label{font-size:.72em;flex-wrap:wrap;gap:6px}
  .btn-xs{padding:3px 8px}
  .prop-comment{padding:9px 11px}
  .prop-comment-body{font-size:.92em}

  /* ----- Admin: таблица логов → горизонтальный скролл в карточке ----- */
  .log-table{font-size:.82em;display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .log-table thead,.log-table tbody,.log-table tr{display:table;width:100%;table-layout:auto}
  .log-table th,.log-table td{padding:6px 8px}
  .inline-form{flex-wrap:wrap}
  .inline-form input[type=search]{flex:1 1 auto;min-width:0}

  /* Роль-форма в таблице пользователей */
  .role-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .role-form select{min-width:0;flex:1 1 auto;padding:6px 10px;height:32px;border-radius:8px}
  .role-form .btn-xs{flex:0 0 auto}

  /* ----- Рейтинг ----- */
  .lb-item{grid-template-columns:42px 1fr auto;gap:8px;padding:8px 10px;font-size:.92em}

  /* ----- Табы ----- */
  .tabs{overflow-x:auto;flex-wrap:nowrap;gap:4px;padding-bottom:2px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:6px 10px;font-size:.88em;white-space:nowrap;flex:0 0 auto}
  .tab-count{min-width:18px;padding:0 6px;font-size:.75em}

  /* ----- Empty state ----- */
  .empty-state{padding:24px 14px}
  .empty-state .empty-icon{width:56px;height:56px}
  .empty-state h3{font-size:1.05rem}

  /* Кнопки и формы: удобные тач-таргеты */
  .btn{min-height:38px;padding:9px 14px}
  .btn.sm{min-height:32px}
  .form-actions{gap:6px}
}

/* ========================================================
   Очень узкие экраны (≤ 380px) — ещё компактнее
   ======================================================== */
@media (max-width:380px){
  .page{padding:0 8px 32px}
  .card, .glass{padding:12px;border-radius:12px}
  .brand span:not(.logo){display:none}       /* оставляем только иконку */
  .nav a{padding:5px 8px;font-size:.82em}
  .user .uname{max-width:80px}
  .tb-search{flex-wrap:wrap}
  .sel-wrap{flex:1 1 100%}
  .count-pill{font-size:.8em;padding:4px 8px}
}

/* ========================================================
   Stagger-in анимации: История, Массовая замена, Рейтинг, MyEdits-stats
   Значение --i передаётся инлайном в HTML (индекс в цикле), clamp'ится,
   чтобы длинные списки не затягивали анимацию на 10+ секунд.
   ======================================================== */

/* История (hist-row) — появление слева с blur */
.hist-row{
  animation:hist-row-in 500ms var(--ease-spring) backwards;
  animation-delay:calc(min(var(--i, 0), 20) * 35ms);
}
@keyframes hist-row-in{
  0%  { opacity:0; transform:translateX(-14px); filter:blur(6px) }
  60% { filter:blur(0) }
  100%{ opacity:1; transform:none; filter:none }
}
.hist-row{transition:transform .3s var(--ease-spring), border-color .25s var(--ease), background .25s var(--ease)}
.hist-row:hover{transform:translateX(2px)}

/* Массовая замена (diff-row) — мягкий fade + scale снизу */
.diff-row{
  animation:diff-row-in 480ms var(--ease-spring) backwards;
  animation-delay:calc(min(var(--i, 0), 18) * 32ms);
}
@keyframes diff-row-in{
  0%  { opacity:0; transform:translateY(10px) scale(.97); filter:blur(4px) }
  55% { filter:blur(0) }
  100%{ opacity:1; transform:none; filter:none }
}
.diff-row{transition:border-color .25s var(--ease), background .25s var(--ease)}
.diff-row:hover{border-color:rgba(160,108,255,.35); background:rgba(160,108,255,.04)}

/* Рейтинг (lb-item) — въезд справа с bounce */
.lb-item{
  animation:lb-item-in 600ms cubic-bezier(.34,1.25,.3,1) backwards;
  animation-delay:calc(min(var(--i, 0), 20) * 55ms);
}
@keyframes lb-item-in{
  0%  { opacity:0; transform:translateX(30px) scale(.94); filter:blur(5px) }
  55% { filter:blur(0) }
  100%{ opacity:1; transform:none; filter:none }
}
.lb-item{transition:transform .3s var(--ease-spring), border-color .25s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease)}
.lb-item:hover{
  transform:translateX(3px) scale(1.005);
  border-color:rgba(160,108,255,.38);
  background:rgba(160,108,255,.06);
  box-shadow:0 8px 24px rgba(112,64,212,.18);
}
/* Золото/серебро/бронза для топ-3 — мягкое свечение */
.lb-item:nth-child(1) .lb-rank{color:#ffd98a;text-shadow:0 0 12px rgba(255,217,138,.5)}
.lb-item:nth-child(2) .lb-rank{color:#e0e4f0;text-shadow:0 0 10px rgba(224,228,240,.45)}
.lb-item:nth-child(3) .lb-rank{color:#e9b07a;text-shadow:0 0 10px rgba(233,176,122,.45)}

/* Статистические карточки в «Мои правки» — появление снизу со scale */
.stat-card{
  animation:stat-in 540ms var(--ease-spring) backwards;
  animation-delay:calc(var(--i, 0) * 70ms);
  transition:transform .3s var(--ease-spring), border-color .25s var(--ease), box-shadow .3s var(--ease);
}
@keyframes stat-in{
  0%  { opacity:0; transform:translateY(12px) scale(.88); filter:blur(6px) }
  55% { filter:blur(0) }
  100%{ opacity:1; transform:none; filter:none }
}
.stat-card:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

/* Chip-фильтры — плавное активирование */
.chip-filter{transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease-spring), box-shadow .25s var(--ease)}
.chip-filter:hover{transform:translateY(-1px)}
.chip-filter:active{transform:translateY(0)}
.chip-filter.active{
  animation:chip-pop 450ms var(--ease-spring);
}
@keyframes chip-pop{
  0%  { transform:scale(1) }
  35% { transform:scale(1.08) }
  100%{ transform:scale(1) }
}

/* Раскрытие/сворачивание details — мягкое fade для содержимого */
.hist-row[open] .hist-body{
  animation:hist-body-in 280ms var(--ease);
}
@keyframes hist-body-in{
  from{ opacity:0; transform:translateY(-4px) }
  to  { opacity:1; transform:none }
}

@media (prefers-reduced-motion: reduce){
  .hist-row, .diff-row, .lb-item, .stat-card,
  .hist-row[open] .hist-body, .chip-filter.active { animation:none }
  .hist-row:hover, .lb-item:hover, .stat-card:hover, .chip-filter:hover{transform:none}
}