:root {
  /* text */
  --ink: #111214;
  --ink-2: #33383d;
  --muted: #707579;            /* Telegram secondary text */
  /* surfaces (flat) */
  --paper: #ffffff;
  --sand: #f4f4f5;
  /* accent (Telegram blue) */
  --accent: #3390ec;
  --accent-2: #2b7fd9;
  --btn-bg: #3390ec;
  --btn-hover-bg: #2b7fd9;
  --pink-bg: #e2559c;
  --pink-hover-bg: #cc4489;
  /* lines & elevation */
  --line: #e6e7ea;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);   /* soft, floating elements only */
  /* sidebar / nav (flat, not gradient) */
  --sidebar-bg: #ffffff;
  --nav-hover-bg: #f4f4f5;
  --nav-hover-border: transparent;
  --nav-active-bg: rgba(51, 144, 236, 0.12);
  --nav-active-border: transparent;
  --notice-bg: rgba(51, 144, 236, 0.10);
  --code-bg: #f4f4f5;

  /* spacing / radius scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --radius-sm: 6px; --radius: 10px; --radius-pill: 999px;
}

:root[data-theme="dark"],
body.theme-dark {
  --ink: #ffffff;
  --ink-2: #c8cdd2;
  --muted: #8a9099;
  --paper: #17212b;           /* Telegram dark surface */
  --sand: #0e1621;            /* Telegram dark app bg */
  --accent: #6ab3f3;
  --accent-2: #50a8eb;
  --btn-bg: #50a8eb;
  --btn-hover-bg: #6ab3f3;
  --pink-bg: #d95f9f;
  --pink-hover-bg: #ec81b8;
  --line: #232e3c;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --sidebar-bg: #17212b;
  --nav-hover-bg: #202b36;
  --nav-hover-border: transparent;
  --nav-active-bg: rgba(80, 168, 235, 0.20);
  --nav-active-border: transparent;
  --notice-bg: rgba(80, 168, 235, 0.16);
  --code-bg: #202b36;
}

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap");

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin: 0;
  /* Telegram-style system font stack — neutral, native, fast */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  color: var(--ink);
  background: var(--sand);   /* flat surface, no gradients */
  min-height: 100vh;
}

body.theme-dark {
  background: var(--sand);
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  padding: 24px 14px 20px;
  border-right: 1px solid var(--line);
  background: var(--sidebar-bg);
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.brand {
  display: grid;
  gap: 6px;
  padding: 6px 12px 14px;
}

.brand h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ink);
}

.brand span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.side-nav {
  display: grid;
  gap: 6px;
  align-content: start;
  flex: 1 1 auto;
  position: relative;
  contain: layout paint;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 12px;
}

.side-nav__slider {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  border-radius: 12px;
  background: var(--nav-active-bg);
  border: 1px solid var(--nav-active-border);
  box-shadow: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition:
    transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.14s linear;
  pointer-events: none;
  z-index: 0;
}

.side-nav.has-slider .side-nav__slider {
  opacity: 1;
}

.side-nav.has-slider a {
  position: relative;
  z-index: 1;
  background: transparent;
  border-color: transparent;
  transition: color 0.2s ease, transform 0.2s ease;
}

.side-nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.side-nav a.has-running::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: #3f86df;
  box-shadow: 0 0 0 2px rgba(63, 134, 223, 0.2);
}

.side-nav a:hover {
  color: var(--ink);
  background: var(--nav-hover-bg);
  border-color: var(--nav-hover-border);
}

.side-nav.has-slider a:hover {
  background: transparent;
  border-color: transparent;
  transform: translateX(2px);
}

.side-nav a.active {
  color: var(--ink);
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  font-weight: 600;
}

.side-nav.has-slider a.active {
  background: transparent;
  border-color: transparent;
  font-weight: 700;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px 6px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.24) 100%);
  position: static;
  bottom: auto;
  flex: 0 0 auto;
  justify-content: space-between;
}

.theme-toggle,
.side-logout {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 999px;
  padding: 0;
  border: 1px solid var(--nav-active-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(234, 243, 253, 0.78));
  color: var(--accent);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(32, 58, 92, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.theme-toggle:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(227, 238, 251, 0.92));
  border-color: rgba(53, 111, 180, 0.45);
  transform: translateY(-1px);
}

.side-logout {
  flex: 1 1 auto;
  max-width: 170px;
  min-height: 38px;
  border: 1px solid var(--nav-active-border);
  background: linear-gradient(180deg, rgba(53, 111, 180, 0.2), rgba(53, 111, 180, 0.14));
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 3px 10px rgba(32, 58, 92, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.side-logout:hover {
  background: linear-gradient(180deg, rgba(53, 111, 180, 0.28), rgba(53, 111, 180, 0.18));
  border-color: rgba(53, 111, 180, 0.44);
  transform: translateY(-1px);
}

.content-area {
  margin-left: 280px;
  padding: 18px 38px 56px;
  min-width: 0;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  min-width: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: none;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.card h3 {
  margin: 0;
  font-size: 18px;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.btn {
  display: inline-block;
  text-decoration: none;
  background: var(--btn-bg);
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
  background: var(--btn-hover-bg);
}

.btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
}

.btn.secondary:hover {
  background: var(--nav-hover-bg);
}

.btn.pink {
  background: var(--pink-bg);
}

.btn.pink:hover {
  background: var(--pink-hover-bg);
}

.section {
  margin-top: 22px;
  display: grid;
  gap: 16px;
}

.section h2 {
  margin: 0;
  font-size: 20px;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-row {
  display: grid;
  gap: 8px;
  min-width: 0;
}

label {
  font-size: 13px;
  font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-family: "Space Grotesk", sans-serif;
  background: #fff;
  font-size: 13px;
}

input[type="file"] {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 8px;
  color: var(--ink);
}

input[type="file"]::file-selector-button {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  transition: transform 0.2s ease, background 0.2s ease;
  margin-right: 10px;
}

input[type="file"]::file-selector-button:hover {
  transform: translateY(-1px);
  background: #000;
}

input[type="file"]::-webkit-file-upload-button {
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  transition: transform 0.2s ease, background 0.2s ease;
  margin-right: 10px;
}

input[type="file"]::-webkit-file-upload-button:hover {
  transform: translateY(-1px);
  background: #000;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: #000;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

.small {
  font-size: 12px;
  color: var(--muted);
}

.inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.inline > * {
  flex: 1 1 220px;
  min-width: 0;
}

.monitoring-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.monitoring-actions .btn {
  width: 100%;
}

.monitoring-actions .btn.secondary {
  border: 1px solid rgba(53, 111, 180, 0.55);
  color: #2a5f9f;
  background: rgba(255, 255, 255, 0.48);
}

body.theme-dark .monitoring-actions .btn.secondary {
  color: #c8defa;
  border-color: rgba(108, 160, 224, 0.6);
  background: rgba(18, 30, 46, 0.68);
}

.monitoring-block + .monitoring-block {
  margin-top: 14px;
}

.monitoring-block {
  position: relative;
}

.monitoring-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin-bottom: 6px;
}

.monitoring-block-head h3 {
  margin: 0;
}

.monitoring-delete-form {
  margin: 0;
}

.monitoring-delete-form .btn {
  min-width: 150px;
  white-space: nowrap;
}

.monitoring-accent-btn {
  background: var(--btn-bg);
  color: #fff;
  border: 1px solid transparent;
}

.monitoring-accent-btn:hover {
  background: var(--btn-hover-bg);
}

.monitoring-add-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.monitoring-add-row form {
  margin: 0;
}

.ai-live-card {
  width: 100%;
  overflow: visible;
}

.ai-live-form {
  width: 100%;
  min-width: 0;
  gap: 14px;
}

.ai-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}

.ai-live-grid > * {
  min-width: 0;
}

.ai-live-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ai-live-inline-form {
  margin: 0;
}

.ai-live-clear {
  margin-top: 8px;
}

.ai-live-form textarea {
  width: 100%;
  max-width: 100%;
  min-height: 140px;
}

.check-membership-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.check-membership-col {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  gap: 10px;
}

.check-membership-list {
  margin: 0;
  padding-left: 18px;
  max-height: 260px;
  overflow: auto;
  font-size: 12px;
  display: grid;
  gap: 4px;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--notice-bg);
  color: var(--ink);
  font-size: 11px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
}

.code {
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 12px;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 6px;
}

.task {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  display: grid;
  gap: 6px;
}

.task .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.task .logs {
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.04);
  padding: 8px;
  border-radius: 10px;
  max-height: 140px;
  overflow: auto;
}

.tasks-list {
  display: grid;
  gap: 10px;
}

#tasks {
  min-height: 72px;
}

#tasks .task {
  animation: none !important;
  transition: none !important;
}

.task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.task-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.task-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.task-id-muted {
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.task-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.task-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.task-controls form {
  margin: 0;
}

.task-control-inline {
  margin: 0;
}

.task-controls .btn {
  width: auto;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
}

.task-control-icon-btn {
  width: 34px !important;
  min-width: 34px;
  min-height: 34px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 14px !important;
  line-height: 1;
}

.task-control-result {
  flex: 1 1 100%;
}

.task-id {
  font-family: "Fira Code", ui-monospace, monospace;
  color: var(--ink-2);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 106px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.status-pending {
  background: rgba(143, 156, 172, 0.2);
  border-color: rgba(143, 156, 172, 0.35);
  color: #445063;
}

.status-running {
  background: rgba(53, 111, 180, 0.16);
  border-color: rgba(53, 111, 180, 0.32);
  color: #1f4f87;
}

.status-completed {
  background: rgba(61, 155, 103, 0.16);
  border-color: rgba(61, 155, 103, 0.32);
  color: #226848;
}

.status-paused,
.status-stopped {
  background: rgba(143, 156, 172, 0.2);
  border-color: rgba(143, 156, 172, 0.35);
  color: #445063;
}

.status-failed {
  background: rgba(210, 83, 83, 0.16);
  border-color: rgba(210, 83, 83, 0.34);
  color: #8a2a2a;
}

.task-error {
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 12px;
  background: rgba(210, 83, 83, 0.08);
  border: 1px solid rgba(210, 83, 83, 0.22);
  color: #7a2424;
}

.task-summary {
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 12px;
  background: rgba(53, 111, 180, 0.09);
  border: 1px solid rgba(53, 111, 180, 0.18);
  color: #23486f;
}

.task-details {
  margin-top: -2px;
}

.task-details > summary {
  cursor: pointer;
  list-style: none;
  width: fit-content;
  font-size: 12px;
  color: var(--muted);
  user-select: none;
}

.task-details > summary::-webkit-details-marker {
  display: none;
}

.task-details > summary::before {
  content: "▸";
  margin-right: 6px;
  transition: transform 0.18s ease;
  display: inline-block;
}

.task-details[open] > summary::before {
  transform: rotate(90deg);
}

.task-log {
  border-radius: 10px;
  background: rgba(53, 111, 180, 0.05);
  border: 1px solid rgba(53, 111, 180, 0.12);
  padding: 8px 10px;
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.42;
  max-height: 120px;
  overflow: auto;
  margin-top: 8px;
}

.tasks-empty {
  font-size: 13px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.42);
}

.notice {
  padding: 12px;
  border-radius: 12px;
  background: var(--notice-bg);
  font-size: 12px;
}

.reaction-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 36px));
  gap: 6px;
  justify-content: start;
}

.reaction-picker-option {
  position: relative;
}

.reaction-picker-option__check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reaction-picker-card {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.72);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.reaction-picker-card span {
  font-size: 19px;
  line-height: 1;
}

.reaction-picker-card:hover {
  transform: translateY(-1px);
  border-color: rgba(53, 111, 180, 0.35);
}

.reaction-picker-option__check:checked + .reaction-picker-card {
  border-color: var(--accent);
  background: rgba(53, 111, 180, 0.14);
  box-shadow: 0 0 0 2px rgba(53, 111, 180, 0.22);
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.gift-option {
  position: relative;
}

.gift-option__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gift-card {
  display: grid;
  gap: 8px;
  align-items: center;
  justify-items: center;
  padding: 16px 14px;
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 240, 228, 0.92)),
    var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
  min-height: 172px;
}

.gift-card__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gift-card:hover {
  transform: translateY(-2px);
  border-color: rgba(53, 111, 180, 0.35);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1);
}

.gift-card.is-selected,
.gift-option__radio:checked + .gift-card {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(53, 111, 180, 0.22), 0 14px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(241, 248, 255, 0.95)),
    var(--paper);
}

.gift-card.is-disabled,
.gift-option__radio:disabled + .gift-card {
  opacity: 0.55;
  cursor: not-allowed;
}

.gift-card__icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  font-size: 44px;
  background: linear-gradient(180deg, #edf5ff 0%, #d6e8ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.gift-card__icon img {
  max-width: 72px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.gift-card__fallback {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  font-size: 44px;
  line-height: 1;
}

.gift-card__selected-badge,
.gift-card__selected-check {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.gift-card__selected-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  transform: translateY(-4px);
}

.gift-card__selected-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transform: scale(0.85);
}

.gift-card.is-selected .gift-card__selected-badge,
.gift-card.is-selected .gift-card__selected-check,
.gift-option__radio:checked + .gift-card .gift-card__selected-badge,
.gift-option__radio:checked + .gift-card .gift-card__selected-check {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gift-card__title {
  font-size: 14px;
  font-weight: 700;
}

.gift-card__price {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(53, 111, 180, 0.14);
  color: #285b98;
  font-size: 13px;
  font-weight: 700;
}

body.theme-dark .card,
body.theme-dark .task,
body.theme-dark .check-membership-col,
body.theme-dark .gift-card,
body.theme-dark .notice {
  border-color: var(--line);
}

body.theme-dark .task,
body.theme-dark .check-membership-col {
  background: rgba(19, 30, 46, 0.92);
}

body.theme-dark .gift-card {
  background:
    linear-gradient(180deg, rgba(24, 37, 58, 0.98), rgba(17, 28, 43, 0.96)),
    var(--paper);
}

body.theme-dark .gift-card.is-selected,
body.theme-dark .gift-option__radio:checked + .gift-card {
  background:
    linear-gradient(180deg, rgba(30, 44, 68, 0.99), rgba(18, 30, 46, 0.97)),
    var(--paper);
}

body.theme-dark .gift-card__icon {
  background: linear-gradient(180deg, #1f3a5a 0%, #182d47 100%);
}

body.theme-dark .reaction-picker-card {
  background: rgba(17, 28, 43, 0.88);
}

body.theme-dark .reaction-picker-option__check:checked + .reaction-picker-card {
  background: rgba(53, 111, 180, 0.32);
}

body.theme-dark input[type="text"],
body.theme-dark input[type="password"],
body.theme-dark input[type="number"],
body.theme-dark textarea,
body.theme-dark select,
body.theme-dark input[type="file"] {
  background: #0e1726;
  color: var(--ink);
  border-color: var(--line);
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: #9cb1cc;
}

body.theme-dark .small,
body.theme-dark .task .meta,
body.theme-dark .brand span {
  color: var(--muted);
}

body.theme-dark .side-nav a {
  color: #eef4ff;
}

body.theme-dark .theme-toggle {
  background: rgba(74, 129, 202, 0.18);
  border-color: rgba(108, 160, 224, 0.52);
  box-shadow: none !important;
  text-shadow: none;
  filter: none;
}

body.theme-dark .side-logout {
  background: rgba(74, 129, 202, 0.24);
  border-color: rgba(108, 160, 224, 0.56);
  color: #f4f8ff;
  box-shadow: none !important;
  text-shadow: none;
  filter: none;
}

body.theme-dark .sidebar-footer {
  background: transparent;
}

body.theme-dark input[type="file"]::file-selector-button,
body.theme-dark input[type="file"]::-webkit-file-upload-button {
  background: var(--btn-bg);
}

.gift-card__meta {
  font-size: 11px;
  color: var(--muted);
}

.login-main {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
  overflow: hidden;
  background:
    radial-gradient(72vw 52vh at 18% 10%, rgba(69, 121, 188, 0.22), transparent 62%),
    radial-gradient(56vw 40vh at 86% 0%, rgba(115, 159, 215, 0.2), transparent 60%),
    linear-gradient(145deg, #edf3fb 0%, #dfe8f4 48%, #e9f0f8 100%);
}

.login-main::before,
.login-main::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
}

.login-main::before {
  width: 420px;
  height: 420px;
  top: -180px;
  right: -130px;
  background: radial-gradient(circle, rgba(94, 145, 214, 0.28) 0%, rgba(94, 145, 214, 0) 70%);
}

.login-main::after {
  width: 360px;
  height: 360px;
  left: -120px;
  bottom: -150px;
  background: radial-gradient(circle, rgba(53, 111, 180, 0.22) 0%, rgba(53, 111, 180, 0) 72%);
}

.login-container {
  width: 100%;
  max-width: 480px;
  position: relative;
  z-index: 1;
}

.login-card {
  width: 100%;
  gap: 12px;
  padding: 26px 24px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 255, 0.86));
  backdrop-filter: blur(10px);
  box-shadow:
    0 22px 52px rgba(32, 70, 117, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.login-brand {
  width: fit-content;
  margin: 0 auto 2px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #285b98;
  background: rgba(53, 111, 180, 0.12);
  border: 1px solid rgba(53, 111, 180, 0.24);
}

.login-card h2 {
  margin: 0;
  text-align: center;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #1a2432;
}

.login-subtitle {
  margin: 0 0 8px;
  text-align: center;
  font-size: 13px;
  color: #55708e;
}

.login-form {
  gap: 11px;
}

.login-form label {
  font-size: 12px;
  font-weight: 700;
  color: #284461;
}

.login-form input[type="text"],
.login-form input[type="password"] {
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(53, 111, 180, 0.26);
  background: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  padding: 0 14px;
}

.login-submit {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #3a78bf 0%, #2f67ab 100%);
}

.login-submit:hover {
  background: linear-gradient(180deg, #4284d0 0%, #336eb7 100%);
}

body.theme-dark .login-main {
  background:
    radial-gradient(68vw 50vh at 16% 8%, rgba(57, 112, 182, 0.28), transparent 60%),
    radial-gradient(55vw 42vh at 88% 0%, rgba(53, 92, 150, 0.24), transparent 60%),
    linear-gradient(145deg, #0a1220 0%, #111d2f 52%, #0e192a 100%);
}

body.theme-dark .login-card {
  border-color: rgba(106, 151, 217, 0.34);
  background: linear-gradient(180deg, rgba(16, 28, 45, 0.92), rgba(13, 24, 40, 0.9));
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.theme-dark .login-brand {
  color: #9fc2f0;
  background: rgba(74, 129, 202, 0.2);
  border-color: rgba(108, 160, 224, 0.42);
}

body.theme-dark .login-card h2 {
  color: #f2f7ff;
}

body.theme-dark .login-subtitle {
  color: #b4c7df;
}

body.theme-dark .login-form label {
  color: #cde0f8;
}

body.theme-dark .login-form input[type="text"],
body.theme-dark .login-form input[type="password"] {
  background: rgba(11, 20, 33, 0.92);
  color: #eef4ff;
  border-color: rgba(108, 160, 224, 0.42);
}

@media (max-width: 560px) {
  .login-card {
    padding: 22px 16px 18px;
    border-radius: 18px;
  }

  .login-card h2 {
    font-size: 30px;
  }
}

@keyframes ui-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ui-soft-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(53, 111, 180, 0);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(53, 111, 180, 0.12);
  }
}

.section > h2,
.card,
.notice {
  animation: ui-fade-up 0.28s ease-out both;
}

.section > *:nth-child(2) {
  animation-delay: 0.03s;
}

.section > *:nth-child(3) {
  animation-delay: 0.06s;
}

.section > *:nth-child(4) {
  animation-delay: 0.09s;
}

.btn {
  box-shadow: 0 8px 16px rgba(40, 91, 152, 0.14);
}

.btn:hover {
  box-shadow: 0 10px 18px rgba(40, 91, 152, 0.22);
}

.btn:active {
  transform: translateY(0);
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(53, 111, 180, 0.45);
  box-shadow: 0 0 0 3px rgba(53, 111, 180, 0.16);
  transform: translateY(-1px);
}

.side-nav a.active {
  animation: ui-soft-pulse 2.8s ease-in-out infinite;
}

.side-nav.has-slider a.active {
  animation: none;
}

body.theme-dark .btn {
  box-shadow: 0 10px 18px rgba(5, 13, 24, 0.42);
}

body.theme-dark .status-pending {
  color: #c8d4e6;
}

body.theme-dark .status-running {
  color: #b2d0f7;
}

body.theme-dark .status-completed {
  color: #afe6c7;
}

body.theme-dark .status-paused,
body.theme-dark .status-stopped {
  color: #c8d4e6;
}

body.theme-dark .status-failed {
  color: #ffb8b8;
}

body.theme-dark .task-error {
  background: rgba(210, 83, 83, 0.14);
  border-color: rgba(210, 83, 83, 0.32);
  color: #ffc3c3;
}

body.theme-dark .task-summary {
  background: rgba(74, 129, 202, 0.16);
  border-color: rgba(108, 160, 224, 0.3);
  color: #cde2ff;
}

body.theme-dark .task-log {
  background: rgba(74, 129, 202, 0.14);
  border-color: rgba(108, 160, 224, 0.26);
}

body.theme-dark .tasks-empty {
  background: rgba(17, 28, 43, 0.76);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Sidebar/content responsiveness below 900px is handled by the mobile drawer
   block at the end of this file (single source). Keep only content tweaks. */
@media (max-width: 768px) {
  .check-membership-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Found-groups header ────────────────────────────────── */
.fg-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.fg-header-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.fg-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Found-groups dialog ────────────────────────────────── */
.fg-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(96vw, 1200px);
  max-height: 90vh;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fg-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}

.fg-dialog-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.fg-dialog-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.fg-dialog-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.fg-dialog-topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.fg-filters {
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  background: var(--code-bg);
}

.fg-filter-select,
.fg-filter-input {
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
}

.fg-filter-select { min-width: 130px; }
.fg-filter-input { width: 130px; }

.fg-info {
  padding: 6px 20px;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

.fg-table-wrap {
  overflow: auto;
  flex: 1 1 0;
  padding: 0 20px;
}

.fg-table {
  font-size: 12px;
  width: 100%;
}

.fg-table th {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 1;
  white-space: nowrap;
}

.fg-cell-kw,
.fg-cell-title {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fg-cell-user {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fg-cell-date {
  white-space: nowrap;
  font-size: 11px;
  color: var(--muted);
}

.fg-geo-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.fg-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.fg-pagination {
  display: flex;
  gap: 4px;
  padding: 10px 20px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.fg-page-btn {
  min-width: 34px;
  padding: 5px 9px;
  font-size: 13px;
  border-radius: 8px;
}

.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0 4px;
}

.pagination__goto {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.pagination__goto input[type="number"] {
  width: 64px;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--line, #ddd);
  border-radius: 6px;
  text-align: center;
}

.fg-page-active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.fg-ellipsis {
  padding: 5px 3px;
  color: var(--muted);
  font-size: 13px;
}

/* ── Keyword actions ────────────────────────────────── */
.kw-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}

.kw-btn-save {
  background: var(--accent);
  color: #fff;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 10px;
}

.kw-btn-save:hover {
  background: var(--accent-2);
}

.kw-btn-clear {
  background: #c0392b;
  color: #fff;
  border: none;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 10px;
}

.kw-btn-clear:hover {
  background: #a93226;
  color: #fff;
}

body.theme-dark .kw-btn-clear {
  background: #a93226;
}

body.theme-dark .kw-btn-clear:hover {
  background: #922b21;
}

/* ── Keyword chips ───────────────────────────────────── */
.form-hidden {
  display: none;
}

.kw-langs-grid {
  display: grid;
  gap: 6px;
}

.kw-lang-block {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.kw-lang-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 13px;
  background: var(--code-bg);
  font-weight: 600;
}

.kw-lang-summary::-webkit-details-marker {
  display: none;
}

.kw-lang-summary::before {
  content: "▶";
  font-size: 9px;
  color: var(--muted);
  transition: transform 0.18s;
  flex-shrink: 0;
  margin-right: 2px;
}

details[open] .kw-lang-summary::before {
  transform: rotate(90deg);
}

.kw-lang-count {
  font-size: 11px;
  background: var(--accent);
  color: #fff;
  border-radius: 20px;
  padding: 1px 8px;
  font-weight: 600;
  margin-left: auto;
}

.kw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 12px;
}

.kw-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 5px 3px 10px;
  font-size: 12px;
  max-width: 260px;
}

.kw-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kw-chip__del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.kw-chip__del:hover {
  color: #e55;
  background: rgba(220, 60, 60, 0.1);
}

.kw-empty {
  padding: 8px 12px;
  color: var(--muted);
  font-size: 12px;
}

/* ── Data sub-page tab header ────────────────────────── */
.data-subtabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 0 0;
  border-bottom: 2px solid var(--line);
  margin-bottom: 4px;
}

.data-subtabs__tab {
  display: inline-block;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 10px 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid transparent;
  border-bottom: none;
  transition: color 0.15s, background 0.15s;
  position: relative;
  bottom: -2px;
}

.data-subtabs__tab:hover {
  color: var(--ink);
  background: var(--nav-hover-bg);
}

.data-subtabs__tab.active {
  color: var(--btn-bg);
  background: var(--paper);
  border-color: var(--line);
  border-bottom-color: var(--paper);
}

body.theme-dark .data-subtabs__tab.active {
  border-bottom-color: var(--paper);
}

/* ===========================================================================
   Design-system additions (Telegram redesign): utilities, table scroll,
   mobile drawer. See docs/design-system.md + .claude/skills/telegram-ui.
   =========================================================================== */

/* --- layout utilities (use instead of inline styles) --- */
.u-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.u-col { display: flex; flex-direction: column; gap: var(--space-2); }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.u-muted { color: var(--muted); }
.u-small { font-size: 12px; }
.u-mt-2 { margin-top: var(--space-2); } .u-mt-3 { margin-top: var(--space-3); }
.u-mb-2 { margin-bottom: var(--space-2); } .u-mb-3 { margin-bottom: var(--space-3); }
.badge--warn   { color: #b45309; background: rgba(217, 119, 6, 0.12); }
.badge--ok     { color: #15803d; background: rgba(22, 163, 74, 0.12); }
.badge--danger { color: #b91c1c; background: rgba(220, 38, 38, 0.12); }
.badge--muted  { color: var(--muted); background: var(--nav-hover-bg); }

/* --- tables never overflow the page; wrap them in .table-wrap --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- modal popup --- */
.modal-backdrop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); padding: var(--space-4); }
.modal-backdrop[hidden] { display: none; }
/* max-height + скрол обовʼязкові: підкладка центрує вміст, тому модалка, вища
   за екран, обрізається З ОБОХ боків і кнопка «Зберегти» стає недосяжною.
   Це виявилось на формі кроку кампанії з чотирьох секцій — початкова .modal
   робилася під крихітний діалог підтвердження. */
.modal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 460px; width: 100%; padding: var(--space-4); max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto; overscroll-behavior: contain; }

/* Форма налаштування кроку — це чотири секції, а не питання «так/ні». */
.modal--wide { max-width: 680px; }
.modal__title { font-weight: 600; margin-bottom: var(--space-2); }
.modal__body { color: var(--ink); font-size: 14px; line-height: 1.5; margin-bottom: var(--space-4); }
.modal__actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }

/* --- searchable account multi-select dropdown (partials/account_picker.html) --- */
.acct-select { position: relative; }
.acct-select__control {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); cursor: pointer;
}
.acct-select__control:hover,
.acct-select.is-open .acct-select__control { border-color: var(--accent); }
/* when open, lift the whole control above the sticky table header (z-index:1) */
.acct-select.is-open { z-index: 1500; }
.acct-select__value { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.acct-select__ph { color: var(--muted); }
.acct-select__caret { color: var(--muted); flex: 0 0 auto; transition: transform 0.15s ease; }
.acct-select.is-open .acct-select__caret { transform: rotate(180deg); }
.acct-select__chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--nav-active-bg); color: var(--ink);
  border-radius: var(--radius-pill); padding: 2px 4px 2px 10px; font-size: 12px;
}
.acct-select__chip-x { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--muted); padding: 0 2px; }
.acct-select__chip-x:hover { color: var(--ink); }
.acct-select__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1500;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); box-shadow: var(--shadow); overflow: hidden;
}
.acct-select__search-wrap { padding: var(--space-2); border-bottom: 1px solid var(--line); }
.acct-select__search { display: block; width: 100%; }
.acct-select__list { max-height: 260px; overflow-y: auto; }
.acct-select__row { display: flex; align-items: center; gap: var(--space-2); padding: 7px 12px; font-weight: 400; cursor: pointer; }
.acct-select__row:hover { background: var(--nav-hover-bg); }
.acct-select__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-select__hint { padding: 10px 12px; }
.acct-select__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; padding: var(--space-2); border-top: 1px solid var(--line); }

/* --- mobile top bar (hamburger); hidden on desktop --- */
.mobile-topbar { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 900px) {
  .mobile-topbar {
    position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 1001;
    display: flex; align-items: center; gap: var(--space-3);
    padding: 0 var(--space-4);
    background: var(--paper); border-bottom: 1px solid var(--line);
  }
  .mobile-topbar__burger {
    width: 38px; height: 38px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: transparent; color: var(--ink);
    font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .mobile-topbar__title { font-weight: 600; }

  /* sidebar becomes an off-canvas drawer */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    width: 82vw; max-width: 300px; z-index: 1002;
    box-shadow: var(--shadow);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .content-area { margin-left: 0; padding: 64px var(--space-4) 40px; }

  body.nav-open .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.4);
  }

  /* Tables become horizontally swipeable instead of being clipped by the page
     (body has overflow-x:hidden). Works without wrapping each <table>. */
  .table, .data-table, .task-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* Grid-елементи за замовчуванням мають min-width:auto і відмовляються стискатись
   вужче за свій вміст. Через це широка таблиця в картці розпирала всю картку за
   межі екрана замість того, щоб скролитись усередині .table-wrap. Той самий
   запобіжник уже стоїть на .form-row. */
.section > *,
.card { min-width: 0; }
.table-wrap { max-width: 100%; }

/* Довгі посилання й технічні рядки (session_ref, назви помилок Telethon) не
   мають права розпирати контейнер: одне довге "слово" інакше задає min-content
   ширину всій картці. */
.notice,
.u-small { overflow-wrap: anywhere; }

/* Таблиця "ключ -> значення" (картка "Огляд" на сторінці групи). Це не
   табличні дані, а список полів, тому на вузькому екрані їй потрібен перенос
   рядків, а не горизонтальний скрол, який глобальне правило нав'язує таблицям. */
.kv-table th,
.kv-table td { white-space: normal; overflow-wrap: anywhere; }
.kv-table td:first-child { width: 40%; }

/* ── Стрічка групи (вкладка "Чат" на сторінці групи) ──────────────────────
   Ключовий трюк — .chat-feed має flex-direction: column-reverse. Це дає три
   речі одразу й без жодного JS: стрічка скролиться всередині себе замість
   того, щоб розтягувати сторінку; при завантаженні вона вже прокручена до
   найновішого повідомлення; і повідомлення читаються згори вниз від старих
   до нових, хоча в DOM вони лежать у природному порядку "найновіші перші",
   як їх і віддає Telegram. Через це роздільники дат і кнопка "показати
   старіші" у розмітці стоять ПІСЛЯ своїх повідомлень. */
.chat-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.chat-toolbar select { max-width: 280px; }

.chat-feed {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-3);
  max-height: min(68vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--space-1);
  margin: 0 calc(var(--space-1) * -1);
}

.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

/* Декоративна палітра аватарів — колір закріплений за автором, щоб той самий
   співрозмовник завжди був того самого кольору. Не тема інтерфейсу, тому
   значення фіксовані, але зібрані в одному місці. */
.chat-msg {
  --chat-av-0: #e17076;
  --chat-av-1: #7bc862;
  --chat-av-2: #e5ca77;
  --chat-av-3: #65aadd;
  --chat-av-4: #a695e7;
  --chat-av-5: #ee7aae;
}

.chat-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  user-select: none;
}

.chat-avatar--0 { background: var(--chat-av-0); }
.chat-avatar--1 { background: var(--chat-av-1); }
.chat-avatar--2 { background: var(--chat-av-2); }
.chat-avatar--3 { background: var(--chat-av-3); }
.chat-avatar--4 { background: var(--chat-av-4); }
.chat-avatar--5 { background: var(--chat-av-5); }

.chat-bubble {
  min-width: 0;
  max-width: 100%;
  background: var(--nav-hover-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top-left-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chat-msg--post .chat-bubble {
  background: var(--notice-bg);
}

.chat-bubble__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.chat-author {
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.chat-time {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

.chat-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.45;
}

/* Обгортка-кнопка навколо фото: клікабельність без втрати доступності
   (Enter/Space і фокус працюють самі, бо це справжня <button>). */
.chat-photo-btn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
  max-width: 320px;
  line-height: 0;
}

.chat-photo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chat-photo {
  display: block;
  max-width: 320px;
  width: 100%;
  /* height:auto перебиває height="..." з розмітки, лишаючи лише його роль
     "зарезервуй пропорції", а не жорсткий розмір. */
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--nav-hover-bg);
}

.chat-photo--comment { max-width: 220px; }
.chat-photo-btn:has(.chat-photo--comment) { max-width: 220px; }

/* ── Повноекранний огляд фото ─────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;             /* вище за мобільну шухляду (1002) */
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  cursor: zoom-out;
}

.lightbox__img {
  max-width: min(100%, 1400px);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  cursor: default;
}

.lightbox__caption {
  color: #fff;
  font-size: 13px;
  opacity: 0.85;
  text-align: center;
  overflow-wrap: anywhere;
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close:hover { background: rgba(255, 255, 255, 0.16); }

/* Сторінка під оглядом не має скролитись разом з ним. */
body.lightbox-open { overflow: hidden; }

/* Роздільник дати. Через column-reverse у розмітці він іде після повідомлень
   свого дня, а на екрані опиняється над ними. */
.chat-daysep {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--muted);
  font-size: 12px;
}

.chat-daysep::before,
.chat-daysep::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--line);
}

/* "Вартовий" довантаження: сидить над найстарішим повідомленням і сам тягне
   наступну порцію, щойно потрапляє в поле зору. Помітна висота потрібна, щоб
   IntersectionObserver надійно його побачив при швидкому гортанні. */
.chat-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2);
}

.chat-more--end { opacity: 0.7; }

.chat-replies {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.chat-replies:hover { background: var(--nav-hover-bg); color: var(--ink); }

/* Гілка коментарів усередині бульбашки: власний скрол, щоб довга дискусія не
   виштовхувала стрічку. */
.chat-comments:not(:empty) {
  margin-top: var(--space-1);
  padding-left: var(--space-3);
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-comment { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.chat-comment .chat-avatar { width: 26px; height: 26px; font-size: 10px; }
.chat-comment__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }

@media (max-width: 560px) {
  /* .u-between тримає заголовок і дію в одному рядку; на телефоні їм не
     вистачає ширини, і замість стискання вони мають переноситись. */
  .u-between { flex-wrap: wrap; }

  /* Три вкладки сторінки групи мусять поміститись в один рядок на 375px. */
  .data-subtabs__tab { padding: 8px 12px; }

  .chat-photo,
  .chat-photo-btn { max-width: 100%; }
  .lightbox { padding: var(--space-3); }
  .lightbox__img { max-height: 76vh; }
  .chat-toolbar select { max-width: 100%; }
  .chat-feed { max-height: 72vh; }
  .chat-avatar { width: 28px; height: 28px; font-size: 11px; }
}

/* ── Конструктор рекламної кампанії ───────────────────────────────────────
   Ланцюжок кроків із перетягуванням (див. setupStepDragAndDrop в app.js).
   Розмітка приходить і перемальовується через HTMX, тому всі стани
   перетягування виражені класами, а не інлайновими стилями. */
.campaign-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.step-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  /* Без min-width:0 довга назва кроку розпирає flex-рядок і ламає кнопки. */
  min-width: 0;
}

.step-card__grip {
  flex: 0 0 auto;
  color: var(--muted);
  cursor: grab;
  user-select: none;
  line-height: 1;
}

.step-card__grip:active { cursor: grabbing; }

.step-card__idx {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--nav-hover-bg);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

.step-card__body { min-width: 0; flex: 1 1 auto; }
.step-card__title { font-weight: 600; }
.step-card__ctl { display: flex; gap: var(--space-1); flex: 0 0 auto; }

/* Крок, який зараз виконується: переставляти не можна, і це має бути видно
   ще до спроби перетягнути. */
.step-card[data-locked] { opacity: .75; }
.step-card[data-locked] .step-card__grip { cursor: not-allowed; }

.step-card.is-dragging { opacity: .45; }

/* Місце вставки показуємо лінією на межі картки, а не зсувом сусідів:
   зсув під час dragover викликав би дрижання списку. */
.step-card.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.step-card.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }

.icon-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.icon-btn:hover { background: var(--nav-hover-bg); border-color: var(--accent); color: var(--accent); }
.icon-btn[disabled] { opacity: .35; cursor: not-allowed; }
.icon-btn[disabled]:hover { background: var(--paper); border-color: var(--line); color: var(--ink); }
/* Токена --danger у палітрі немає; тримаємось того ж червоного, що й
   .badge--danger, щоб «видалити» скрізь читалось однаково. */
.icon-btn--danger:hover { border-color: #dc2626; color: #dc2626; }

/* Палітра «додати крок»: пунктир відрізняє її від уже доданих кроків. */
.campaign-palette { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.campaign-palette__tile {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  background: var(--paper);
  color: var(--ink);
}

.campaign-palette__tile:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 560px) {
  /* На тач-екранах HTML5 Drag&Drop не працює взагалі — ручка лише вводила б
     в оману, порядок там міняють кнопками ↑/↓. */
  .step-card__grip { display: none; }

  /* Назва кроку і пʼять кнопок керування не вміщаються в один рядок на 375px. */
  .step-card { flex-wrap: wrap; align-items: flex-start; }
  .step-card__body { flex: 1 1 100%; }
  .step-card__ctl { flex: 1 1 100%; justify-content: flex-end; }
}