@font-face { font-family:"TT Fors"; font-weight:400; font-display:swap;
  src:url("/static/fonts/TT_Fors_Trial_Regular.ttf") format("truetype") }
@font-face { font-family:"TT Fors"; font-weight:500; font-display:swap;
  src:url("/static/fonts/TT_Fors_Trial_Medium.ttf") format("truetype") }
@font-face { font-family:"TT Fors"; font-weight:600; font-display:swap;
  src:url("/static/fonts/TT_Fors_Trial_DemiBold.ttf") format("truetype") }

:root {
  --page:#fbfbfd; --surface:#fff; --surface-2:#f5f5f7;
  --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#a1a1a6;
  --hairline:rgba(0,0,0,.09); --hairline-soft:rgba(0,0,0,.05);
  --accent:#0071e3; --accent-hover:#0077ed; --accent-soft:#e8f2ff;
  --shadow-1:0 1px 3px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
  --shadow-2:0 2px 6px rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.09);
  --r-md:14px; --r-lg:24px; --ease:cubic-bezier(.4,0,.2,1);
}
* { box-sizing:border-box }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
body { margin:0; background:var(--page); color:var(--ink);
  font-family:"TT Fors", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size:15px; line-height:1.47; letter-spacing:-.01em }
a { color:inherit; text-decoration:none }

/* Одно кольцо на весь сервис. Браузерная обводка по умолчанию выглядит
   чужой рядом с этими скруглениями, а у полей ввода она и вовсе снята —
   без общего правила обход с клавиатуры получался бы разнобойным.
   :focus-visible, а не :focus: кольцо нужно тому, кто идёт табом, а не
   тому, кто щёлкнул мышью. */
:focus-visible { outline:2px solid var(--accent); outline-offset:3px;
  border-radius:4px }

header { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--hairline-soft);
  background:rgba(251,251,253,.72); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px) }
.headin { max-width:1100px; margin:0 auto; padding:0 28px; height:56px;
  display:flex; align-items:center; gap:20px }
.brand { font-weight:600; font-size:16px; letter-spacing:-.02em; padding:6px 0 }
.brand em { font-style:normal; color:var(--ink-3); font-weight:400 }
.spacer { flex:1 }
/* Отступы, а не только размер шрифта: у голой строки высота цели
   получалась около пятнадцати пикселей, и на планшете в неё надо было
   ещё попасть. */
.navlink { color:var(--ink-2); font-size:13.5px; padding:6px 2px;
  transition:color .16s var(--ease) }
.navlink:hover, .navlink.on { color:var(--ink) }
.acting { font-size:12.5px; color:var(--accent); background:var(--accent-soft);
  padding:4px 10px; border-radius:999px }

.wrap { max-width:1100px; margin:0 auto; padding:40px 28px 120px }
h1 { font-size:38px; line-height:1.08; letter-spacing:-.025em; font-weight:600; margin:0 0 6px }
.lead { color:var(--ink-2); font-size:16px; margin:0 0 32px }
.pagehead { display:flex; align-items:flex-start; gap:20px; margin-bottom:32px }
.pagehead > div:first-child { flex:1; min-width:0 }
.pagehead .lead { margin-bottom:0 }

.chips { display:flex; flex-wrap:wrap; gap:6px; flex:none; margin-top:6px }
.chip { font-size:12px; font-weight:500; letter-spacing:.02em; padding:5px 11px;
  border-radius:999px; background:var(--surface-2); color:var(--ink-2);
  border:1px solid transparent; transition:all .16s var(--ease) }
.chip:hover { color:var(--ink); border-color:var(--hairline) }
.chip.off { background:transparent; color:var(--ink-3); border-color:var(--hairline);
  text-decoration:line-through }

.drop { border:1.5px dashed var(--hairline); border-radius:var(--r-lg); padding:34px 24px;
  text-align:center; color:var(--ink-2); background:var(--surface);
  transition:border-color .2s var(--ease), background .2s var(--ease); margin-bottom:34px }
.drop:hover { border-color:var(--ink-3) }
.drop.over { border-color:var(--accent); background:var(--accent-soft) }
.drop b { display:block; font-weight:600; font-size:16px; color:var(--ink); margin-bottom:3px }
.pick { color:var(--accent); cursor:pointer }
.pick:hover { text-decoration:underline }
progress { width:100%; max-width:360px; height:4px; margin-top:16px; display:none;
  appearance:none; border:0; border-radius:2px; background:var(--surface-2) }
progress::-webkit-progress-bar { background:var(--surface-2); border-radius:2px }
progress::-webkit-progress-value { background:var(--accent); border-radius:2px }

.daterow { display:flex; align-items:baseline; gap:16px; margin:0 0 12px }
.daterow h2 { font-size:19px; font-weight:600; letter-spacing:-.02em; margin:0 }
.daterow .rule { flex:1; height:1px; background:var(--hairline-soft) }
section + section { margin-top:38px }

/* Всё в таблицах: строка — это строка, без плиток и превью. */
/* Вбок должна ехать таблица, а не страница. На узком экране колонок
   больше, чем помещается, и без обёртки уезжал весь макет: заголовок,
   шапка, всё. Десктопу правило ничего не меняет. */
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
.tablewrap table { min-width:520px }

table { width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--hairline-soft); border-radius:var(--r-md); overflow:hidden }
th { text-align:left; font-size:12px; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); padding:10px 16px;
  border-bottom:1px solid var(--hairline-soft); white-space:nowrap }
td { padding:11px 16px; border-top:1px solid var(--hairline-soft); vertical-align:middle }
tbody tr:first-child td { border-top:0 }
tbody tr { transition:background .14s var(--ease) }
tbody tr:hover { background:var(--surface-2) }
td.name { font-weight:500; letter-spacing:-.015em; max-width:1px; width:99%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
td.num, th.num { text-align:right; color:var(--ink-3); font-size:13.5px;
  font-variant-numeric:tabular-nums; white-space:nowrap }
/* вес — вторая величина в той же колонке, тише основной */
td.num .weight { font-size:12.5px; opacity:.72 }
/* разделитель рисуем, а не пишем: иначе он уезжает в копируемый текст,
   а у креатива без распознанных пикселей висел бы сиротой */
td.num .weight::before { content:"·"; margin:0 7px; opacity:.55 }
td.num .weight:only-child::before { content:none }
td.tick, th.tick { width:44px }

/* Превью в строке: маленькое, на светлой подложке — креатив бывает
   белым, и без рамки он растворялся бы в фоне таблицы. */
td.pic, th.pic { width:56px; padding-right:0 }
td.pic img { display:block; width:40px; height:40px; object-fit:contain;
  background:var(--surface-2); border:1px solid var(--hairline-soft);
  border-radius:7px }

/* Действия строки. Видны всегда: спрятанные за наведение, они не
   существовали на сенсорных экранах, а пустая клетка рядом со строкой
   выглядела неработающей кнопкой. Приглушены, чтобы не спорить с
   названиями, и проявляются под курсором. */
td.get, th.get { width:150px; text-align:right; white-space:nowrap }
td.get .grab { font-size:13px; color:var(--accent); opacity:.62;
  margin-left:14px; transition:opacity .16s var(--ease) }
tr:hover td.get .grab, td.get .grab:focus-visible { opacity:1 }
td.get .grab:hover { text-decoration:underline }
td.get .grab.done { color:var(--ink-2); opacity:1; text-decoration:none }
/* «отказы разбора» — самое длинное название действия; без запаса оно
   переносится на две строки и строка журнала становится вдвое выше */
td.act, th.act { white-space:nowrap; width:1%; color:var(--ink-2) }
table.log td.name { font-weight:400; color:var(--ink) }
td.fmt { width:86px }
.pill { display:inline-block; font-size:11px; font-weight:500; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-2); background:var(--surface-2);
  border-radius:6px; padding:3px 8px; white-space:nowrap }
.pill.html5 { color:var(--accent); background:var(--accent-soft) }
.pill.gif { color:#8a5a00; background:#fff4e0 }
input[type=checkbox] { accent-color:var(--accent); width:15px; height:15px; margin:0 }


.bar { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(150%);
  z-index:60; display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--hairline-soft); border-radius:999px; padding:10px 12px 10px 22px;
  box-shadow:var(--shadow-2); transition:transform .34s var(--ease) }
.bar.show { transform:translateX(-50%) translateY(0) }
.bar.inline { position:static; transform:none; margin:28px auto 0; width:max-content }
.bar .count { font-size:14px; font-weight:500 }

.btn { display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:500; letter-spacing:-.01em;
  padding:9px 18px; border-radius:999px; background:var(--surface-2); color:var(--ink);
  transition:background .16s var(--ease), transform .16s var(--ease) }
.btn:hover { background:#eaeaec }
.btn:active { transform:scale(.97) }
.btn.primary { background:var(--accent); color:#fff }
.btn.primary:hover { background:var(--accent-hover) }
.btn.quiet { background:transparent; color:var(--ink-2); padding:9px 14px }
.btn.quiet:hover { background:var(--surface-2); color:var(--ink) }
.btn.small { font-size:12.5px; padding:6px 13px }
/* Нечего нажимать — видно и по цвету, и по курсору. Правило одно на все
   состояния: :disabled должен победить и .primary, и любой :hover. */
.btn:disabled, .btn.primary:disabled { background:var(--surface-2); color:var(--ink-3);
  cursor:default; transform:none }

.empty { text-align:center; padding:70px 20px; color:var(--ink-2) }
/* иконка — векторная картинка, а не системный глиф: он на каждой ОС
   свой, а на Windows ещё и плоский жёлтый */
.empty .ico { display:block; margin:0 auto 14px }
.empty b { display:block; color:var(--ink); font-weight:600; font-size:18px;
  letter-spacing:-.02em; margin-bottom:6px }

/* ── вход ─────────────────────────────────────────────────────────── */
/* Мягкое пятно за карточкой: без него она висела на ровной заливке и
   выглядела случайной. */
.gate { min-height:calc(100vh - 56px); display:flex; align-items:center;
  justify-content:center; padding:24px;
  background:radial-gradient(120% 80% at 50% 0%, #eef4fd 0%, transparent 62%) }
.gate .card { width:100%; max-width:400px; margin-bottom:8vh;
  background:var(--surface); border:1px solid var(--hairline-soft);
  border-radius:26px; box-shadow:var(--shadow-2); padding:36px 34px 30px }
.gate .ico { display:block; margin:0 auto 18px }
.gate h1 { font-size:26px; margin:0 0 7px }
.gate .sub { color:var(--ink-2); font-size:13.5px; line-height:1.55; margin:0 0 22px }
.gate form { display:grid; gap:10px }
.gate input, .newco input { font:inherit; font-size:15px; padding:12px 15px;
  border-radius:12px; border:1px solid var(--hairline); background:var(--surface);
  color:var(--ink); transition:border-color .16s var(--ease), box-shadow .16s var(--ease) }
.gate input:focus, .newco input:focus { outline:0; border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft) }
.gate .btn { justify-content:center; padding:14px; margin-top:4px }
/* Код фиксированной длины, и форма это показывает: три ячейки по
   четыре знака — ровно так он выглядит на бумаге. Заполненная ячейка
   темнеет, поэтому видно, сколько осталось. */
.cells { display:flex; align-items:center; gap:8px }
.gate input.cell { flex:1; min-width:0; width:100%;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:19px; letter-spacing:.14em; text-indent:.14em; text-align:center;
  padding:14px 6px; background:var(--surface-2); border-color:transparent }
.gate input.cell:focus { background:var(--surface) }
.gate input.cell.full { background:var(--surface); border-color:var(--hairline) }
.cells .dash { color:var(--ink-3); font-size:15px; flex:none }
/* Администраторов единицы — их форма не должна занимать первый экран. */
.gate .admin { margin-top:24px; padding-top:18px; border-top:1px solid var(--hairline-soft) }
.gate .admin summary { font-size:13px; color:var(--ink-3); cursor:pointer;
  list-style:none; user-select:none; transition:color .16s var(--ease) }
.gate .admin summary::-webkit-details-marker { display:none }
.gate .admin summary:hover { color:var(--ink-2) }
.gate .admin form { margin-top:14px }
.newco { display:flex; gap:10px; margin-bottom:26px }
.newco input { flex:1 }

/* ── админка: сводка, выдача ссылки ───────────────────────────────── */
.stats { display:flex; gap:36px; padding:18px 22px; margin-bottom:22px;
  background:var(--surface); border:1px solid var(--hairline-soft);
  border-radius:var(--r-md) }
.stats div { display:flex; flex-direction:column; gap:1px }
.stats b { font-size:24px; font-weight:600; letter-spacing:-.02em }
.stats span { font-size:12.5px; color:var(--ink-3) }

/* Готовая ссылка сразу после того, как компанию завели: искать её в
   таблице и догадываться, что по ней надо щёлкнуть, — лишний шаг. */
.fresh { display:flex; align-items:center; gap:16px; padding:16px 20px;
  margin-bottom:22px; background:var(--accent-soft);
  border:1px solid rgba(0,113,227,.18); border-radius:var(--r-md) }
.fresh .ok { width:26px; height:26px; flex:none; border-radius:50%; background:var(--accent);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px }
.fresh .grow { flex:1; min-width:0 }
.fresh b { display:block; font-size:14.5px; margin-bottom:3px }
.fresh .link { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; cursor:pointer }
.fresh .btn { flex:none }

.linkbtn { font:inherit; font-size:13px; color:var(--accent); background:none; border:0;
  padding:5px 0; cursor:pointer }
.linkbtn:hover { text-decoration:underline }
.linkbtn.done, .fresh .btn.done { color:var(--ink-2); text-decoration:none }
tr.just { background:var(--accent-soft) }
td.name a.enter { display:inline-flex; align-items:baseline; gap:10px; padding:3px 0 }
td .muted { color:var(--ink-3); font-size:12.5px; font-weight:400;
  opacity:0; transition:opacity .16s var(--ease) }
tr:hover td .muted, a.enter:focus-visible .muted { opacity:1 }

/* На сенсорном экране наведения не бывает: подсказка и «Скачать» просто
   не существовали бы. Показываем их всегда — приглушёнными. */
@media (hover: none) {
  td .muted { opacity:.65 }
}
.switched { background:var(--accent-soft); border:1px solid rgba(0,113,227,.18);
  border-radius:var(--r-md); padding:12px 16px; margin-bottom:22px;
  font-size:13.5px; color:var(--ink-2) }
.err { color:#c4271b; background:#fdeceb; font-size:13px; padding:10px 13px;
  border-radius:10px }