/* Темы в палитре Telegram (my.telegram.org): светлая и тёмная */
:root, html[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #f4f4f5;
  --surface: #ffffff;
  --text: #000000;
  --muted: #707579;
  --border: #e3e4e8;
  --hover: #f4f4f5;
  --accent: #3390ec;
  --accent-soft: #e8f2fc;
  --on-accent: #ffffff;
  --red: #e53935;
  --red-soft: #fdecea;
  --green: #4fae4e;
  --green-soft: #e9f6e9;
  --orange: #d98c0f;
  --orange-soft: #fdf3dd;
  --code: #eff0f3;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-m: 0 2px 10px rgba(0, 0, 0, .1);
  --radius: 12px;
  --sidebar-w: 232px;
}

html[data-theme="dark"] {
  --bg: #0a0c10;
  --bg-2: #0e1117;
  --surface: #141821;
  --text: #e9ecf3;
  --muted: #8f96a8;
  --border: #232837;
  --hover: #1b2029;
  --accent: #7c6ff0;
  --accent-soft: rgba(124, 111, 240, .16);
  --on-accent: #ffffff;
  --red: #ff6b66;
  --red-soft: rgba(255, 107, 102, .14);
  --green: #4cd98a;
  --green-soft: rgba(76, 217, 138, .14);
  --orange: #f0b429;
  --orange-soft: rgba(240, 180, 41, .14);
  --code: #1b2029;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-m: 0 4px 18px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-2);
  color: var(--text);
  font: 14px/1.5 "YS Text", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background .2s ease, color .2s ease;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Каркас ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 20px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  color: var(--text);
}

.logo-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); }

.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; }

.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14.5px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  transition: background .15s ease, transform .15s ease;
}

.side-nav a .ico { width: 20px; text-align: center; }
.side-nav a:hover { background: var(--hover); transform: translateX(2px); }
.side-nav a.active { background: var(--accent-soft); color: var(--accent); }

.side-bottom { margin-top: auto; padding: 14px; border-top: 1px solid var(--border); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}

.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0; flex: 1; }

.content { padding: 28px 36px 90px; max-width: 1680px; width: 100%; margin: 0 auto; }

h1 { font-size: 20px; font-weight: 700; margin: 0 0 16px; }

h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 600;
}

code { background: var(--code); padding: 1px 6px; border-radius: 6px; font-size: 13px; }

.empty { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; margin-top: 10px; }
.inline { display: inline; }
.cell-center { text-align: center; }

/* ---------- Кнопки: единая геометрия ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: var(--shadow-s);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease, color .15s ease;
}

.btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-m); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent); filter: brightness(1.08); color: var(--on-accent); }

.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:hover { background: var(--hover); color: var(--text); box-shadow: none; }

.btn.danger:hover { border-color: var(--red); color: var(--red); }

.btn.small { min-height: 34px; padding: 6px 16px; font-size: 13px; border-radius: 999px; }
.icon-btn { min-width: 34px; padding: 6px 9px; border-radius: 999px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-link { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; }
.btn-link:hover { color: var(--red); }

/* ---------- Стат-карточки ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) auto;
  gap: 12px;
  margin-bottom: 18px;
  align-items: stretch;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  padding: 18px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  animation: rise .25s ease;
  transition: box-shadow .2s ease, transform .2s ease;
}

.stat:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }

.stat > div { display: flex; flex-direction: column; gap: 2px; }
.stat-ico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile-bg, var(--hover));
  color: var(--tile-fg, var(--muted));
  flex: none;
  transition: transform .2s ease;
}
.stat:hover .stat-ico { transform: scale(1.08); }
.stat-num { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 12.5px; }
.stat-action { justify-content: center; background: transparent; border-style: dashed; box-shadow: none; }

.banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  animation: rise .25s ease;
}

/* ---------- Карточки постов ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  padding: 22px 24px;
  margin-bottom: 16px;
  animation: rise .25s ease;
  transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }

.post-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.post-id { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.channel-name { font-weight: 600; font-size: 15px; }

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  background: var(--hover);
  color: var(--muted);
}

.badge-ready { background: var(--green-soft); color: var(--green); }
.badge-error { background: var(--red-soft); color: var(--red); }
.badge-pending, .badge-processing { background: var(--orange-soft); color: var(--orange); }
.badge-on { background: var(--green-soft); color: var(--green); }
.badge-off { background: var(--hover); color: var(--muted); }
.badge-auto { background: var(--accent-soft); color: var(--accent); }
.score-ok { background: var(--green-soft); color: var(--green); }
.score-bad { background: var(--orange-soft); color: var(--orange); }

.error-box {
  background: var(--red-soft);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13.5px;
}

.error-text { color: var(--red); font-size: 13px; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.col { background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }

.col img {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.col img:hover { transform: scale(1.015); box-shadow: var(--shadow-m); }

.text-block {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 14.5px;
  margin: 0;
}

.text-block.small { font-size: 13px; color: var(--muted); }

.photo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }

.file-label { position: relative; overflow: hidden; cursor: pointer; }
.file-label input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14.5px;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}

textarea:focus, input[type="text"]:focus, input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.actions.center { justify-content: center; }

/* ---------- Формы ---------- */
.add-form { display: flex; gap: 8px; margin-bottom: 18px; }

.add-form input, .settings-form input[type="text"] {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
  min-height: 40px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.add-form input { flex: 1; }

.switch { position: relative; width: 42px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 99px;
  cursor: pointer;
  transition: background .2s ease;
}
.slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.switch input:checked + .slider { background: var(--green); }
.switch input:checked + .slider::before { transform: translateX(18px); }

.field { margin-bottom: 16px; }
.field > label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.field input[type="text"] { width: 100%; max-width: 560px; }
.settings-form { max-width: 820px; margin: 0 auto; }
.field-bool { display: flex; align-items: center; justify-content: space-between; max-width: 480px; }
.field-bool > label:first-child { margin-bottom: 0; }

/* ---------- Таблицы ---------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}

.table td { padding: 16px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 14.5px; }
.table tr:last-child td { border-bottom: none; }
.table tr { transition: background .15s ease; }
.table tr:hover td { background: var(--hover); }
.table tr.thead td {
  background: var(--bg-2);
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  padding: 10px 18px;
}
.table tr.thead:hover td { background: var(--bg-2); }

.ch-title { font-weight: 600; }
.ch-url { color: var(--muted); font-size: 12.5px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; float: left; margin-right: 10px; }
.history-text { min-width: 280px; }

.help-card p { margin: 6px 0; }

/* ---------- QR ---------- */
.qr-card { max-width: 620px; margin: 0 auto; }
.qr-steps { margin: 8px 0 14px; padding-left: 20px; }
.qr-steps li { margin: 4px 0; }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; }
.qr-box img { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 8px; }
.qr-state { color: var(--muted); font-size: 12.5px; font-family: monospace; }

/* ---------- Логин ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-m);
  padding: 32px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: rise .3s ease;
}

.login-card h1 { text-align: center; margin: 0 0 6px; }

.login-card input {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  min-height: 40px;
}

.login-card label { color: var(--muted); font-size: 13px; }

/* ---------- Мобильная версия ---------- */
.mobile-nav { display: none; }

@media (max-width: 900px) {
  .compare { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat-action { grid-column: span 2; }
}

@media (max-width: 768px) {
  .sidebar { display: none; }
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 20;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .mobile-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 2px;
    font-size: 10.5px;
    text-decoration: none;
    color: var(--muted);
    border-radius: 10px;
    transition: background .15s ease, color .15s ease;
  }
  .mobile-nav a .ico { font-size: 18px; }
  .mobile-nav a.active { color: var(--accent); background: var(--accent-soft); }
  .topbar { padding: 10px 14px; gap: 8px; }
  .page-title { font-size: 17px; }
  .content { padding: 16px 14px 96px; }
  .card { padding: 16px; }
  .table { display: block; overflow-x: auto; }
  .row-actions { justify-content: flex-start; }
  .row-actions .btn { flex: 1 1 45%; }
  .actions .btn { flex: 1 1 45%; }
  .photo-actions .btn, .photo-actions .file-label { flex: 1 1 45%; }
  .add-form { flex-direction: column; }
  .field input[type="text"] { max-width: none; }
  .stat-num { font-size: 26px; }
}

/* ---------- SVG-иконки ---------- */
svg.ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.stat-ico svg.ico { width: 22px; height: 22px; }
.theme-ico { display: inline-flex; }
html[data-theme="light"] .dark-only { display: none; }
html[data-theme="dark"] .light-only { display: none; }

/* ---------- Модальное окно ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}

.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-m);
  padding: 28px;
  width: 440px;
  max-width: 100%;
  text-align: center;
  animation: rise .2s ease;
}

.modal h3 { text-transform: none; font-size: 16px; color: var(--text); letter-spacing: 0; }

.modal input {
  width: 100%;
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  margin: 12px 0;
}

/* ---------- Центрирование ---------- */
.center { text-align: center; }
.actions.center { justify-content: center; }

/* ---------- Настройки в стиле профиля ---------- */
.settings-section h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 22px 0 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.settings-section:first-child h2 { margin-top: 4px; }
.field-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.field-row:last-of-type { border-bottom: none; }
.field-row > label { margin: 0; color: var(--text); font-size: 14px; }
.field-row .control input[type="text"] { width: 100%; max-width: 460px; }
.field-row.field-bool .control { display: flex; }
@media (max-width: 768px) {
  .field-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Задачи ---------- */
.task-add { max-width: 820px; margin: 0 auto 20px; }
.task-card { max-width: 820px; margin: 0 auto 14px; }
.task-head { display: flex; align-items: center; gap: 12px; }
.task-title { font-weight: 600; font-size: 15px; flex: 1; }
.task-done .task-title { text-decoration: line-through; color: var(--muted); }
.task-date { color: var(--muted); font-size: 12px; }
.task-text { margin: 10px 0 0; color: var(--text); white-space: pre-wrap; }
.check { position: relative; display: inline-flex; cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check-box {
  width: 22px; height: 22px;
  border: 2px solid var(--border);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.check-box .ico { width: 14px; height: 14px; stroke-width: 3; }
.check input:checked + .check-box { background: var(--green); border-color: var(--green); color: #fff; }
.task-comments { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.comment {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13.5px;
}
.comment-date { color: var(--muted); font-size: 11.5px; margin-right: 8px; }
.comment-add { display: flex; gap: 8px; margin-top: 12px; }
.comment-add input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  color: var(--text);
  min-height: 34px;
}

/* ---------- Логин ---------- */
.login-body {
  background:
    radial-gradient(1000px 500px at 85% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(800px 400px at -10% 110%, var(--accent-soft), transparent 60%),
    var(--bg-2);
}
.login-card { width: 380px; padding: 36px 32px; text-align: center; border-radius: 20px; }
.login-logo { display: flex; justify-content: center; margin-bottom: 14px; }
.logo-dot.big { width: 44px; height: 44px; border-radius: 14px; }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-sub { color: var(--muted); margin: 0 0 20px; font-size: 13.5px; }
.login-label { display: block; text-align: left; color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
.login-input {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 14px;
  color: var(--muted);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-input input {
  flex: 1; border: none; background: transparent; color: var(--text);
  padding: 12px 0; font: inherit; font-size: 15px; outline: none;
}
.btn.wide { width: 100%; margin-top: 16px; min-height: 44px; }
.login-hint { color: var(--muted); font-size: 12px; margin: 14px 0 0; text-decoration: none; display: block; }
.error-text.center { margin: 10px 0 0; }

/* ---------- Кнопки с иконками ---------- */
.btn .ico { width: 16px; height: 16px; }
.btn.small .ico { width: 14px; height: 14px; }

/* ---------- Поиск в топбаре ---------- */
.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  width: 260px;
  flex: none;
  color: var(--muted);
  transition: border-color .15s ease, box-shadow .15s ease, min-width .2s ease;
}
.topbar-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.topbar-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 8px 0;
  font: inherit;
  outline: none;
  min-width: 0;
}
.search-page-form { display: flex; gap: 10px; max-width: 640px; margin: 0 auto 22px; }
.search-page-form .login-input.wide { flex: 1; }
.search-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.search-row:last-child { border-bottom: none; }
.search-snippet { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.search-snippet mark { background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 2px; }

/* ---------- Аналитика ---------- */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px) { .charts { grid-template-columns: 1fr; } }
.chart { width: 100%; height: auto; color: var(--muted); display: block; }
.table.flat { box-shadow: none; border: none; background: transparent; }
.table.flat td { padding: 10px 12px; }
.cell-num { font-weight: 700; font-variant-numeric: tabular-nums; width: 70px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head .hint { margin: 0; flex: 1; }

@media (max-width: 768px) {
  .topbar-search { width: 150px; }
  .page-head { flex-wrap: wrap; }
}

/* ---------- Селекты и мелкие контролы ---------- */
.select-small {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  min-height: 34px;
  cursor: pointer;
}
.schedule-form { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- TG-превью ---------- */
.tg-preview { margin-top: 14px; }
.tg-preview summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .15s ease;
  list-style: none;
}
.tg-preview summary::-webkit-details-marker { display: none; }
.tg-preview summary:hover { background: var(--accent-soft); }
.tg-bubble {
  margin-top: 10px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 4px 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow-s);
}
.tg-head { color: var(--accent); font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.tg-bubble img { width: 100%; border-radius: 10px; margin-bottom: 8px; }
.tg-text { white-space: pre-wrap; font-size: 14px; }
.tg-foot { color: var(--muted); font-size: 11px; text-align: right; margin-top: 6px; }

/* ---------- Доска задач ---------- */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .board { grid-template-columns: 1fr; } }
.board-col {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  min-height: 220px;
}
.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 4px 6px 10px;
}
.board-col .card { margin-bottom: 10px; padding: 14px 16px; }
.board-empty { padding: 20px 0; }
.task-add { max-width: none; }
.task-add-row { display: flex; gap: 10px; }
.task-add-row .grow { flex: 1; }
.task-add-row input {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  min-height: 40px;
}
.prio { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.prio-low { background: var(--muted); }
.prio-medium { background: var(--orange); }
.prio-high { background: var(--red); }
.task-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.task-move { margin-left: auto; display: inline-flex; gap: 4px; }

/* ---------- Пользователи ---------- */
.users-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.users-add input {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  min-height: 34px;
}

/* ---------- Превью TG в строке действий ---------- */
.actions .tg-preview { margin-left: auto; position: relative; }
.actions .tg-preview summary { padding: 6px 12px; }
.actions .tg-preview .tg-bubble {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  width: 380px;
  max-width: 86vw;
  margin: 0;
  animation: rise .18s ease;
}

/* ---------- Expandable tabs в топбаре ---------- */
.hidden-form { display: none; }
.exp-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px;
  box-shadow: var(--shadow-s);
}
.exp-tab {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.exp-tab:hover, .exp-tab:focus-visible { background: var(--hover); color: var(--text); }
.exp-tab.accent { background: var(--accent); color: var(--on-accent); }
.exp-tab.accent:hover { filter: brightness(1.08); color: var(--on-accent); }
.exp-tab .lbl {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .28s ease, opacity .2s ease, margin-left .28s ease;
}
.exp-tab:hover .lbl, .exp-tab:focus-visible .lbl { max-width: 130px; opacity: 1; margin-left: 8px; }
@media (max-width: 768px) {
  .exp-tab { padding: 8px; }
  .exp-tab .lbl { display: none; }
}

/* ---------- OTP-боксы (2FA) ---------- */
.otp { display: flex; gap: 8px; justify-content: center; margin: 6px 0 2px; }
.otp-cell {
  width: 44px;
  height: 52px;
  text-align: center;
  font: 600 20px/1 ui-monospace, monospace;
  color: var(--text);
  background: var(--bg-2);
  border: 2px solid var(--border);
  border-radius: 12px;
  outline: none;
  caret-color: transparent;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.otp-cell:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.otp-error .otp-cell { border-color: var(--red); background: var(--red-soft); }
@keyframes otp-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.otp.shake { animation: otp-shake .5s ease; }
.otp-status { min-height: 20px; color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.otp-error + .otp-status, .otp-status.err { color: var(--red); }

/* ---------- Биллинг ---------- */
.period-card { padding: 14px 18px; }
.period-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.period-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.chips { display: inline-flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.chip {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.chip:hover { background: var(--hover); color: var(--text); }
.chip-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-s); }
.period-custom { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.period-custom input[type="date"] {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
}
.bill-chart { max-height: 280px; }
.chart-legend { display: flex; gap: 18px; justify-content: flex-end; padding: 6px 8px 0; color: var(--muted); font-size: 12px; }
.chart-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }

/* ---------- Логин: орбы ---------- */
.login-body::before, .login-body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.login-body::before {
  width: 420px; height: 420px;
  background: var(--accent);
  top: -140px; right: -120px;
  animation: float 9s ease-in-out infinite alternate;
}
.login-body::after {
  width: 360px; height: 360px;
  background: var(--green);
  bottom: -140px; left: -100px;
  animation: float 11s ease-in-out infinite alternate-reverse;
}
@keyframes float {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(40px, 30px) scale(1.12); }
}
.login-card { position: relative; z-index: 1; backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: reduce) {
  .login-body::before, .login-body::after { animation: none; }
  .otp.shake { animation: none; }
}

/* ---------- Премиум-авторизация ---------- */
.auth-card { gap: 14px; }
.auth-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  object-fit: cover;
  margin: 0 auto 4px;
  box-shadow: var(--shadow-m);
  display: block;
}
.auth-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
}
.auth-icon .ico { width: 28px; height: 28px; }
.auth-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--red-soft);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  animation: rise .2s ease;
}
.eye-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  border-radius: 6px;
  transition: color .15s ease;
}
.eye-btn:hover { color: var(--text); }
.eye-btn .eye-closed { display: none; }
.eye-btn.showing .eye-open { display: none; }
.eye-btn.showing .eye-closed { display: inline-flex; }
.remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.remember { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); font-size: 13px; }
.remember input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.forgot-link { color: var(--accent); font-size: 13px; text-decoration: none; font-weight: 500; }
.forgot-link:hover { text-decoration: underline; }
.logo-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-s); }

/* ---------- Выравнивание кнопок в таблицах ---------- */
.row-actions { flex-wrap: nowrap; gap: 8px; }
.row-actions form { flex: none; }
.row-actions form:nth-of-type(1) { width: 178px; }
.row-actions form:nth-of-type(2) { width: 142px; }
.row-actions form:nth-of-type(3) { width: 118px; }
.row-actions .btn { width: 100%; white-space: nowrap; }
.select-small { min-width: 150px; }
.interval-form input {
  width: 92px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
}
.actions.gap-b { margin: 0 0 16px; }
.exp-tab.on { box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 768px) {
  .row-actions { flex-wrap: wrap; }
  .row-actions form { width: auto !important; flex: 1 1 45%; }
}

/* ---------- Одинаковые размеры в строке действий ---------- */
.schedule-form .select-big {
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14.5px;
  border-radius: 999px;
}
.schedule-form .btn { height: 40px; min-height: 40px; }
.schedule-form { align-items: center; }

/* ---------- Воздух между карточками настроек ---------- */
.card.settings-form { margin-bottom: 26px; }
.card.settings-form:last-of-type { margin-bottom: 16px; }

.actions > form > .btn, .actions > .btn { height: 40px; min-height: 40px; }

/* ---------- Ячейки с кнопками: обратно в табличную сетку (ровные линии) ---------- */
.row-actions {
  display: table-cell;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}
.row-actions form {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 8px;
  width: auto;
  flex: none;
}
.row-actions form:nth-of-type(1) { width: 178px; margin-left: 0; }
.row-actions form:nth-of-type(2) { width: 142px; }
.row-actions form:nth-of-type(3) { width: 118px; }
.row-actions .btn { width: 100%; }
@media (max-width: 768px) {
  .row-actions { white-space: normal; text-align: left; }
  .row-actions form { display: block; width: auto !important; margin: 0 0 6px; }
}

/* ---------- Домашний экран ---------- */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1000px) { .home-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .home-tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: var(--shadow-s);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--accent); }
.tile-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tile-bg, var(--hover));
  color: var(--tile-fg, var(--muted));
}
.tile-ico .ico { width: 20px; height: 20px; }

.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }
.home-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.home-num { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.home-sub { font-size: 18px; color: var(--muted); font-weight: 600; }
.home-card .btn { margin-top: auto; }

.learn-card {
  margin-bottom: 0;
  display: flex;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.learn-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); border-color: var(--accent); }
.learn-card b { font-size: 14.5px; }
.learn-card .hint { margin: 2px 0 0; }
.learn-card .tile-ico { flex: none; }

/* ---------- Ненавязчивые иконки как в навигации (без цветных плиток) ---------- */
.stat-ico, .tile-ico {
  background: transparent !important;
  color: var(--muted) !important;
  width: 26px;
  height: 26px;
  border-radius: 0;
  box-shadow: none;
}
.stat-ico .ico, .tile-ico .ico { width: 24px; height: 24px; stroke-width: 1.7; }
.stat:hover .stat-ico { transform: none; }
.stat-num { font-size: 26px; }

/* ---------- Главная: плитки одной панелью, как в QwenCloud ---------- */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-s);
  padding: 6px;
  overflow: hidden;
}
.tile {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 12px;
  padding: 20px 8px;
  gap: 12px;
  font-weight: 500;
  color: var(--text);
}
.tile:hover { transform: none; box-shadow: none; background: var(--hover); border-color: transparent; }
.tile:hover .tile-ico { color: var(--accent) !important; }
.tile-label { font-size: 13.5px; }
@media (max-width: 1000px) { .home-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .home-tiles { grid-template-columns: repeat(2, 1fr); } }

.home-grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .home-grid.two { grid-template-columns: 1fr; } }
.health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.health-row:last-child { border-bottom: none; }
.learn-card .tile-ico { width: 34px; height: 34px; }
.learn-card .tile-ico .ico { width: 20px; height: 20px; }

/* ---------- Тёмная тема ближе к QwenCloud ---------- */
html[data-theme="dark"] {
  --surface: #151a24;
  --hover: #1c2230;
  --border: #262c3a;
  --radius: 16px;
}
html[data-theme="dark"] .btn { border-radius: 999px; }
html[data-theme="dark"] .btn.small { border-radius: 999px; }
html[data-theme="dark"] .card { border-radius: 16px; }
html[data-theme="dark"] .side-nav a.active { background: var(--hover); color: var(--text); }
html[data-theme="dark"] .side-nav a.active::before { background: var(--accent); }
html[data-theme="dark"] .topbar { background: var(--bg); border-bottom-color: var(--border); }
html[data-theme="dark"] .sidebar { background: var(--bg); }
html[data-theme="dark"] .exp-tabs { background: var(--surface); }

/* ---------- Мягкие переходы фон/блок, как в QwenCloud ---------- */
:root { --card-border: rgba(20, 20, 20, .06); }
html[data-theme="dark"] { --card-border: rgba(255, 255, 255, .055); }
.card, .stat, .table, .board-col, .topbar-search, .exp-tabs {
  border-color: var(--card-border);
}
.sidebar, .topbar, .side-bottom { border-color: var(--card-border); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .table,
html[data-theme="dark"] .exp-tabs { box-shadow: none; }
html[data-theme="light"] .card, html[data-theme="light"] .stat { box-shadow: 0 1px 2px rgba(0, 0, 0, .035); }
.col { border-color: var(--card-border); }

/* ---------- Без подчёркиваний у кнопок-ссылок ---------- */
a.btn, a.btn:hover, .tile, .tile:hover, .learn-card, .learn-card:hover,
.chip, .chip:hover, .forgot-link, .forgot-link:hover,
.side-nav a, .mobile-nav a, .nav a, .logo, .logo:hover {
  text-decoration: none !important;
}

/* ---------- Логотип для тёмной темы ---------- */
html[data-theme="dark"] .logo-img { content: url("/static/logo_dark.png?v=2"); }

/* ================= Палитра QwenCloud + блоки без внешних линий ================= */
:root, html[data-theme="light"] {
  --edge: rgba(20, 20, 20, .05);
  --primary: #451dd4;
  --primary-soft: #ece8fb;
  --accent: #451dd4;
  --accent-soft: #ece8fb;
  --success: #266239;
  --success-soft: #e6f2ea;
  --warning: #6c4620;
  --warning-soft: #f6ede2;
  --info: #3e8394;
  --info-soft: #e6f2f4;
  --green: #266239;
  --green-soft: #e6f2ea;
  --orange: #6c4620;
  --orange-soft: #f6ede2;
}

html[data-theme="dark"] {
  --bg: #09090a;
  --bg-2: #0b0d10;
  --surface: #0f1115;
  --hover: #171a20;
  --text: #eceef2;
  --muted: #8b919d;
  --border: #1d222b;
  --edge: transparent;
  --code: #171a20;
  --primary: #896fe4;
  --primary-soft: rgba(137, 111, 228, .16);
  --accent: #896fe4;
  --accent-soft: rgba(137, 111, 228, .16);
  --success: #4cae6c;
  --success-soft: rgba(38, 98, 57, .45);
  --warning: #c99055;
  --warning-soft: rgba(108, 70, 32, .5);
  --info: #5fb0c0;
  --info-soft: rgba(62, 131, 148, .35);
  --red: #ef6a5f;
  --red-soft: rgba(239, 106, 95, .16);
  --green: #4cae6c;
  --green-soft: rgba(38, 98, 57, .45);
  --orange: #c99055;
  --orange-soft: rgba(108, 70, 32, .5);
  --shadow-s: none;
  --shadow-m: 0 6px 24px rgba(0, 0, 0, .5);
}

/* Внешние границы блоков — прозрачные (тон задаёт только фон) */
.card, .stat, .table, .board-col, .col, .login-card, .modal,
.exp-tabs, .topbar-search, .qr-box img, .comment, .home-tiles, .tile {
  border-color: var(--edge);
}
.sidebar { border-right-color: var(--edge); background: var(--bg); }
.topbar { border-bottom-color: var(--edge); background: var(--bg); }
.side-bottom { border-top-color: var(--border); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .table,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .modal { box-shadow: none; }

/* Кнопки и ссылки — фиолет из палитры */
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary); border-color: var(--primary); filter: brightness(1.12); color: #fff; }
.forgot-link, .tg-preview summary, .search-snippet mark { color: var(--primary); }
.search-snippet mark { background: var(--primary-soft); }
textarea:focus, input[type="text"]:focus, input[type="password"]:focus,
input[type="search"]:focus, input[type="date"]:focus, input[type="number"]:focus,
.login-input:focus-within, .topbar-search:focus-within, .add-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.side-nav a.active { background: var(--primary-soft); color: var(--primary); }
.side-nav a.active::before { background: var(--primary); }
html[data-theme="dark"] .side-nav a.active { background: var(--hover); color: var(--text); }
.mobile-nav a.active { color: var(--primary); background: var(--primary-soft); }
html[data-theme="dark"] .mobile-nav a.active { background: var(--hover); color: var(--text); }
.logo-dot { background: var(--primary); }
.banner { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.chip-on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-s); }
.badge-auto { background: var(--primary-soft); color: var(--primary); }
.switch input:checked + .slider { background: var(--success); }

/* Бейджи статусов в цветах палитры */
.badge-ready, .score-ok, .badge-on { background: var(--success-soft); color: var(--success); }
.badge-error { background: var(--red-soft); color: var(--red); }
.badge-pending, .badge-processing, .score-bad { background: var(--warning-soft); color: var(--warning); }

/* Тёмная тема: поля ввода темнее карточки, как в оригинале */
html[data-theme="dark"] .login-input,
html[data-theme="dark"] .add-form input,
html[data-theme="dark"] .settings-form input[type="text"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] .comment-add input,
html[data-theme="dark"] .task-add-row input,
html[data-theme="dark"] .col { background: var(--bg); }
html[data-theme="dark"] .login-card input { background: var(--bg); }
html[data-theme="dark"] .otp-cell { background: var(--bg); }
html[data-theme="dark"] .select-small,
html[data-theme="dark"] .period-custom input[type="date"],
html[data-theme="dark"] .interval-form input,
html[data-theme="dark"] .users-add input { background: var(--bg); }

/* ================= Тосты-уведомления ================= */
#toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 120;
  pointer-events: none;
}
.toast {
  min-width: 260px;
  max-width: 380px;
  border-radius: 12px;
  padding: 12px 16px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: var(--shadow-m);
  animation: rise .25s ease;
  pointer-events: auto;
}
.toast .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.toast.success { background: var(--success); }
.toast.info { background: var(--info); }
.toast.warning { background: var(--warning); }
.toast.error { background: var(--red); }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }

/* ---------- Мобильное выравнивание кнопок (ровная сетка, без лесенки) ---------- */
@media (max-width: 768px) {
  .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .actions > form, .actions > .btn { width: 100%; margin: 0; }
  .actions > form > .btn { width: 100%; }
  .actions > form:first-child { grid-column: span 2; }

  .photo-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 12px;
  }
  .photo-actions form, .photo-actions .file-label { width: 100%; margin: 0; }
  .photo-actions .btn { width: 100%; }

  .schedule-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .schedule-form .select-big, .schedule-form .btn { width: 100%; min-height: 40px; }

  .row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    justify-content: stretch;
  }
  .row-actions form { width: auto !important; margin: 0; }
  .row-actions form:last-child { grid-column: span 2; }
  .row-actions .btn { width: 100%; }

  .comment-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .comment-add .btn { width: auto; }

  .users-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .users-add input, .users-add select { width: 100%; }
  .users-add .btn { grid-column: span 2; }

  .task-add-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .period-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .period-custom { margin-left: 0; flex-wrap: wrap; gap: 8px; }
  .period-custom input[type="date"] { flex: 1; min-width: 130px; }
  .chips { flex-wrap: wrap; }

  .topbar { gap: 6px; padding: 10px 12px; }
  .page-title { font-size: 16px; }
  .exp-tabs { padding: 3px; gap: 2px; }
  .exp-tab { padding: 7px 8px; }

  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 14px; gap: 10px; }
  .stat-action { grid-column: span 2; }
  .stat-num { font-size: 22px; }

  .task-head { flex-wrap: wrap; }
  .task-move { margin-left: 0; width: 100%; justify-content: flex-end; }
  .search-page-form { flex-direction: column; }
  .search-page-form .btn { width: 100%; }
}

/* ---------- Мобильная доводка по скрину: ровная сетка действий ---------- */
@media (max-width: 768px) {
  .page-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .topbar-search { width: 118px; }
  .topbar-search input { font-size: 13px; }
  .exp-tab { padding: 7px 7px; }

  .actions > * { width: 100%; margin: 0; }
  .actions > form:first-child,
  .actions > .schedule-form,
  .actions > .tg-preview,
  .actions > .btn:first-child { grid-column: span 2; }
  .actions .btn { font-size: 13.5px; }
  .actions .tg-preview summary { width: 100%; justify-content: center; }

  .schedule-form { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  .photo-actions .btn { font-size: 13px; }
  .col textarea { min-height: 120px; }
  .post-head { gap: 6px; }
  .post-head .badge { font-size: 11px; padding: 3px 9px; }
}

/* ---------- Сворачиваемый сайдбар-рейл ---------- */
.side-head { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
.side-head .logo { flex: 1; min-width: 0; }
.side-toggle {
  border: none;
  background: transparent;
  color: var(--muted);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  transition: background .15s ease, color .15s ease, transform .2s ease;
}
.side-toggle:hover { background: var(--hover); color: var(--text); }
.side-toggle .ico { width: 16px; height: 16px; }
.sidebar { transition: width .22s ease; }
.brand-lbl, .nav-lbl { white-space: nowrap; }

body.side-rail .sidebar { width: 68px; }
body.side-rail .brand-lbl, body.side-rail .nav-lbl { display: none; }
body.side-rail .side-head { padding-right: 0; justify-content: center; gap: 0; }
body.side-rail .side-toggle { transform: rotate(180deg); }
body.side-rail .logo { padding: 18px 0; justify-content: center; }
body.side-rail .side-nav { padding: 6px 8px; }
body.side-rail .side-nav a { justify-content: center; padding: 11px 0; }
body.side-rail .side-bottom { padding: 14px 0; display: flex; justify-content: center; }
body.side-rail .side-bottom form button { width: 44px; padding: 8px 0; justify-content: center; }
@media (max-width: 768px) {
  body.side-rail .sidebar { display: none; }
  .side-toggle { display: none; }
}

/* ---------- Небольшие экраны ноутбуков ---------- */
@media (max-width: 1366px) {
  .content { padding: 20px 22px 90px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat-action { grid-column: auto; }
  .topbar-search { width: 200px; }
}
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .topbar-search { width: 160px; }
  .charts { grid-template-columns: 1fr; }
  .home-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Финансы и отчёты ---------- */
.fin-add {
  display: grid;
  grid-template-columns: 150px 130px 170px 130px 1fr auto;
  gap: 8px;
  align-items: center;
}
.fin-add input, .fin-add select {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  min-height: 40px;
}
.fin-add .grow { width: 100%; }
@media (max-width: 1100px) { .fin-add { grid-template-columns: 1fr 1fr; } .fin-add .btn { grid-column: span 2; } }
@media (max-width: 768px) { .fin-add { grid-template-columns: 1fr; } .fin-add .btn { grid-column: auto; } }

.rep-form .task-add-row input[type="date"] {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 12px;
  font: inherit;
  min-height: 40px;
}
.rep-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 150px;
  overflow: auto;
  padding: 4px;
}
.rep-task {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rep-task:hover { border-color: var(--primary); }
.rep-task input { accent-color: var(--primary); }
.rep-tasks.linked { max-height: none; overflow: visible; gap: 6px; margin-top: 8px; }
.rep-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rep-head form { margin-left: auto; }
.rep-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }

/* ---------- Разрезы аналитики ---------- */
.cuts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .cuts { grid-template-columns: 1fr; } }
.cut-row { display: grid; grid-template-columns: 130px 1fr 90px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.cut-key { color: var(--muted); }
.cut-bar { background: var(--bg-2); border-radius: 99px; height: 8px; overflow: hidden; }
.cut-bar i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .3s ease; }
.cut-val { text-align: right; font-variant-numeric: tabular-nums; }
.cut-val small { color: var(--muted); }
.grow-text { flex: 1; min-width: 0; }

/* ---------- Финансы: селекты не наезжают, категории удаляются ---------- */
.fin-add { grid-template-columns: 150px 150px 190px 120px 1fr auto; }
.fin-add select, .fin-add input { min-width: 0; width: 100%; }
.cat-chip button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cat-chip button:hover { border-color: var(--red); color: var(--red); }

/* ---------- Тумблер-кнопка без квадратика чекбокса ---------- */
.toggle-btn { position: relative; display: inline-flex; }
.toggle-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-btn span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.toggle-btn span:hover { border-color: var(--primary); color: var(--text); }
.toggle-btn input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-s);
}
.toggle-btn .ico { width: 16px; height: 16px; }
@media (max-width: 768px) {
  .fin-add { grid-template-columns: 1fr 1fr; }
  .fin-add .btn { grid-column: span 2; }
}

/* ---------- Карточки устройств ---------- */
.dev-card { padding: 16px 20px; }
.dev-head { display: flex; align-items: center; gap: 14px; }
.dev-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--hover);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.dev-ico .ico { width: 20px; height: 20px; }
.dev-main { flex: 1; min-width: 0; }
.dev-current { border-color: var(--primary); }

/* ---------- Мини-инпуты количества ---------- */
.num-mini {
  width: 64px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  min-height: 34px;
  text-align: center;
}
.backfill-form { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- Кнопки каналов: никаких наложений ---------- */
.row-actions form:nth-of-type(1) { width: 236px; }
.row-actions form:nth-of-type(2) { width: 142px; }
.row-actions form:nth-of-type(3) { width: 118px; }
.row-actions form { overflow: visible; }
.backfill-form { display: inline-flex; gap: 6px; align-items: center; width: 100%; }
.backfill-form .num-mini { flex: none; width: 58px; }
.backfill-form .btn { flex: 1; min-width: 0; padding: 6px 10px; }

/* ---------- Кнопки каналов: grid вместо inline-block, наложения исключены ---------- */
.ra-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 8px;
  justify-content: end;
  align-items: center;
}
.ra-grid form { display: flex; gap: 6px; align-items: center; width: auto !important; margin: 0 !important; }
.ra-grid form:nth-child(1) .btn { min-width: 150px; }
.ra-grid form:nth-child(2) .btn { min-width: 124px; }
.ra-grid form:nth-child(3) .btn { min-width: 112px; }
.ra-grid .btn { width: auto; white-space: nowrap; }
@media (max-width: 768px) {
  .ra-grid { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .ra-grid form:nth-child(3) { grid-column: span 2; }
  .ra-grid form .btn { min-width: 0; width: 100%; }
}

/* ---------- Индикатор работы HTMX-кнопок ---------- */
form.htmx-request .btn, .btn.htmx-request { opacity: .55; pointer-events: none; }
form.htmx-request .btn svg.ico { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Мобильная навигация: лента с прокруткой пальцем ---------- */
.mobile-nav {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  justify-content: flex-start !important;
}
.mobile-nav::-webkit-scrollbar { display: none; }
.mobile-nav a {
  flex: 0 0 auto !important;
  width: 66px;
  scroll-snap-align: start;
  padding: 7px 2px;
}
.mobile-nav a span:last-child { font-size: 10px; white-space: nowrap; }
.settings-section h2 a { margin-left: 10px; vertical-align: middle; }

/* --- Патч 14: альбом дополнительных фото в очереди --- */
.album-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.album-item { position: relative; width: 92px; height: 92px; border-radius: 12px; overflow: hidden; background: var(--surface-2, #17181d); }
.album-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; line-height: 20px; padding: 0;
  border: none; border-radius: 50%; background: rgba(9,9,10,.78); color: #fff; font-size: 15px; cursor: pointer; }
.album-x:hover { background: #b3261e; }
.album-item .inline { position: static; }