:root{
  /* Дизайн-система дашборда (из работы над таблицей «Редакторы»):
     тёмный фон гасит шум от множества графиков, цвет несёт смысл источника,
     цифры остаются белыми — иначе таблица превращается в ёлку. */
  --bg:#0E1116; --card:#151A21; --hover:#1C232D; --line:#232B36;
  --txt:#E6EDF3; --dim:#7D8590;
  --acc:#4E8EF7;      /* FB — фирменный синий */
  --warn:#F5A623;     /* GA4 — янтарный */
  --ok:#3FB68B;       /* деньги — зелёный */
  --violet:#9D7BEA;   /* контент, WP */
  --red:#E5534B;
  --card2:#1C232D; --r:8px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.47 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Цифры не должны прыгать по ширине при обновлении — моноширинные знаки. */
td,th,.tile b,.num,input[type=number]{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum"}
::selection{background:rgba(10,132,255,.35)}
a{color:var(--acc)}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
  background:rgba(14,17,22,.82);backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);font-size:14px}
header strong{font-weight:590;letter-spacing:-.01em}
.logout{color:var(--dim);text-decoration:none;font-size:14px}
main{max-width:760px;margin:0 auto;padding:16px}
h1{font-size:20px;margin:8px 0 16px}
h2{font-size:17px;margin:6px 0 10px;line-height:1.35}
.dim{color:var(--dim);font-weight:400}
.msg{max-width:760px;margin:12px auto 0;padding:10px 14px;border-radius:10px;
  background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.4);color:#b8f0cf}
.err{padding:9px 12px;border-radius:8px;margin-bottom:12px;
  background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.4);color:#ffc9c9}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.badge{font-size:11px;letter-spacing:.02em;padding:2px 9px;border-radius:999px;
  background:var(--card2);color:var(--dim)}
.badge.v{background:rgba(79,140,255,.16);color:#9dbcff}
.badge.p{background:rgba(255,180,84,.16);color:#ffd39b}
.badge.lang{background:#232838}
.page{color:var(--dim);font-size:13px}

.teaser{margin:10px 0}
.hook{font-weight:600}
details summary{cursor:pointer;color:var(--dim);font-size:14px;margin-top:6px}
pre{white-space:pre-wrap;word-break:break-word;background:#0f121a;border:1px solid var(--line);
  border-radius:10px;padding:12px;font:14px/1.55 inherit;margin:8px 0 0;
  -webkit-user-select:all;user-select:all}

.links{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 14px;font-size:14px}

form.publish{display:flex;gap:8px;flex-wrap:wrap}
input{flex:1;min-width:220px;background:#0f121a;border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:10px 12px;font-size:15px}
input:focus{outline:none;border-color:var(--acc)}
button{background:var(--acc);color:#fff;border:0;border-radius:10px;padding:10px 18px;
  font-size:15px;font-weight:600;cursor:pointer}
button{font:inherit;border-radius:7px;transition:background .12s,filter .12s}
button:hover{filter:brightness(1.12)}
button:active{filter:brightness(.92)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(78,142,247,.6);outline-offset:1px}
input,select,textarea{font:inherit;background:var(--card2);color:var(--txt);
  border:1px solid var(--line);border-radius:6px;padding:5px 9px}
/* Подсказки над графиками и ячейками — по системе: тёмная плашка, тонкий кант. */
.tip{background:#1C232D;border:1px solid #2D3743;border-radius:6px;padding:6px 10px;
  font-size:11px;color:var(--txt)}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);font-weight:500}
.reject{margin-top:10px}
.reject form{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}

/* вход */
.login-page{display:grid;place-items:center;min-height:100vh;padding:16px}
.login{width:100%;max-width:340px}
.login h1{font-size:19px;margin:0 0 16px}
.login label{display:block;margin-bottom:12px;font-size:13px;color:var(--dim)}
.login input{width:100%;margin-top:6px}
.login button{width:100%;margin-top:4px}

@media(max-width:520px){
  main{padding:12px}
  form.publish{flex-direction:column}
  button{width:100%}
}

/* текст поста — виден сразу, копируется одним тапом */
.teaser{margin:12px 0}
.teaser-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;
  font-size:13px;color:var(--dim)}
.hooklen{font-size:12px;padding:2px 7px;border-radius:999px;background:#232838}
.hooklen.over{background:rgba(255,90,90,.18);color:#ffb3b3}
button.copy{margin-left:auto;background:#232838;color:var(--txt);font-size:13px;
  font-weight:500;padding:6px 12px;border-radius:8px}
button.copy.ok{background:rgba(46,204,113,.2);color:#8ef0b6}
.teaser pre{max-height:230px;overflow:auto;-webkit-user-select:text;user-select:text}
.comment-block pre{max-height:none;background:#101a14;border-color:#1e3a2a}
.teaser-head span:first-child{font-weight:600;color:var(--txt)}
a.page{color:var(--dim);font-size:13px;text-decoration:none;border-bottom:1px dashed #39405a}
a.page:hover{color:var(--acc)}
.setpage{margin-top:10px}
.setpage form{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}

/* сводка (только для админов) */
main.wide{max-width:1000px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.tile b{display:block;font-size:22px;line-height:1.15;font-weight:650;letter-spacing:-.01em}
.tile span{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.tile.ok b{color:#6ee7a0}
.period{margin:14px 0;color:var(--dim);font-size:14px}
.period a{margin-left:8px;padding:4px 10px;border-radius:8px;background:#232838;
  text-decoration:none;color:var(--dim)}
.period a.act{background:var(--acc);color:#fff}
/* overflow:hidden тут ломал position:sticky у шапок и колонок — не возвращать. */
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:18px}
th,td{padding:0 12px;height:44px;text-align:right;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:450;letter-spacing:-.01em}
tbody tr:hover td{background:var(--hover)}
th:first-child,td:first-child{text-align:left}
th{background:var(--card);color:var(--dim);font-weight:500;font-size:10px;
  text-transform:uppercase;letter-spacing:.06em}
tr:last-child td{border-bottom:0}
tr.total td{font-weight:700;background:#1b1f2b}
td.good{color:#6ee7a0}
td.zero{color:#5b6478}
td.warn{color:var(--warn)}

/* просмотр под редактором */
.asbar{max-width:760px;margin:12px auto 0;padding:10px 14px;border-radius:10px;font-size:14px;
  background:rgba(255,180,84,.12);border:1px solid rgba(255,180,84,.45);color:#ffd9a8}
.asbar a{margin-left:10px;color:#ffd9a8;font-weight:600}
a.asuser{color:var(--txt);text-decoration:none;border-bottom:1px dashed #39405a}
a.asuser:hover{color:var(--acc)}

/* план и прогресс дня */
.me{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plan{font-size:13px;color:var(--dim);background:#232838;padding:3px 10px;border-radius:999px}
.plan b{color:var(--txt)}
.plan.done{background:rgba(46,204,113,.16);color:#8ef0b6}
.plan.done b{color:#8ef0b6}
.progress{height:3px;background:#1c2130}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#4f8cff,#6ee7a0);
  transition:width .4s}

/* плавное исчезновение карточки + всплывающее уведомление */
.card{transition:opacity .3s, transform .3s, max-height .3s;max-height:2000px}
.card.gone{opacity:0;transform:translateX(28px);max-height:0;padding-top:0;padding-bottom:0;
  margin-bottom:0;overflow:hidden}
.toast{position:fixed;left:50%;bottom:-60px;transform:translateX(-50%);z-index:50;
  background:#1f2a20;border:1px solid rgba(46,204,113,.5);color:#b8f0cf;
  padding:10px 18px;border-radius:999px;font-size:14px;transition:bottom .3s;white-space:nowrap}
.toast.show{bottom:20px}
.toast.bad{background:#2a1f1f;border-color:rgba(255,90,90,.5);color:#ffc9c9}

/* справочник страниц */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.filters select,.filters input{background:#0f121a;border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:8px 10px;font-size:14px}
.filters input{flex:1;min-width:160px}
table.pages td,table.pages th{text-align:left}
table.pages td:nth-child(n+4),table.pages th:nth-child(n+4){text-align:center}
table.pages a{color:var(--txt);text-decoration:none;border-bottom:1px dashed #39405a}
table.pages a:hover{color:var(--acc)}
td.small{font-size:12px}
.tag{margin-left:6px;font-size:11px;padding:1px 7px;border-radius:999px;background:#2a2440;color:#c3b5f0}
td.cm{font-size:15px}
input.num{width:72px;background:#0f121a;border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:6px 8px;font-size:14px;text-align:center}
input.num:focus{outline:none;border-color:var(--acc)}
input.num.saving{opacity:.5}
input.num.saved{border-color:#2ecc71;background:rgba(46,204,113,.1)}
input.num.err{border-color:#ff5a5a;background:rgba(255,90,90,.1)}

/* таблица страниц: влезает на узких экранах */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.pages{min-width:640px}
table.pages th,table.pages td{padding:7px 8px}
table.pages td:first-child{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.pages td.small{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
input.num{width:62px;padding:5px 6px}
@media(max-width:700px){
  table.pages td.small,table.pages th:nth-child(3){display:none}  /* на телефоне прячем редакторов */
  table.pages{min-width:460px}
}

/* фото-план по охватам */
.spark{display:block}
.num-cell{font-variant-numeric:tabular-nums;color:var(--dim)}
.num-cell.big{color:#6ee7a0;font-weight:600}
.num-cell.mid{color:#ffd39b}
.tag.drop{background:rgba(255,90,90,.18);color:#ffb3b3}
td.rec{font-weight:600;color:var(--dim)}
td.rec.differs{color:var(--acc)}
.chk{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:14px}
.chk input{width:auto;min-width:0}
.nodata{color:#6b7280;font-style:italic}
b.nodata{font-style:normal}
a.cardlink{color:var(--dim);text-decoration:none;font-size:16px}
a.cardlink:hover{color:var(--acc)}
.cardform .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.cardform label{display:block;font-size:13px;color:var(--dim)}
.cardform label.wide2{grid-column:span 2}
.cardform input,.cardform select{width:100%;margin-top:5px;background:#0f121a;border:1px solid var(--line);
  color:var(--txt);border-radius:9px;padding:9px 11px;font-size:14px}
.cardform small{display:block;margin-top:4px;color:var(--dim)}
.cardform h2{font-size:15px;margin:0 0 12px}
.cardform button[type=submit]{position:sticky;bottom:16px}
.eds{display:flex;flex-wrap:wrap;gap:10px 18px}
svg.bars{display:block;width:100%;height:90px}

/* Фильтр задач по FB-странице: у редактора их до полутора десятков,
   без него нужную статью в общей ленте не найти. */
.pagefilter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.pagefilter label{color:var(--dim);font-size:14px}
.pagefilter select{padding:8px 11px;border-radius:8px;font-size:15px;max-width:100%;
  background:var(--card);border:1px solid var(--line);color:var(--txt)}
.pagefilter .reset{color:var(--dim);font-size:13px;text-decoration:none}