@charset "UTF-8";

:root { /* это фактически <html> в корне документа */
	/* Основные цвета */
	--bg-primary: #f0f2f5;
	--bg-secondary: #ffffff;
	--bg-tertiary: #f8f9fa;
	--bg-active: #e9ecef;
  --bg-dark: #18222d;
  --bg-hover: var(--bg-active); /* #e5e7eb; */
	--bg-panel: var(--bg-primary);
	--bg-dropdown: var(--bg-secondary);
	--bg-popup: var(--bg-secondary);

	/* Навигация */
	--nav-bg: #293a4c;
  --nav-bg-hover: rgba(255, 255, 255, 0.12);

	/* Текст */
	--text-primary: #1a1a2e;
	--text-secondary: #495057;
	--text-tertiary: #6c757d;
	--text-quaternary: #959BA2;
	--text-light: #c9d8e4;
	--text-inverse: #fff;

	/* Акцентные цвета */
	--accent-blue: #2CA6FF;
	--accent-blue-light: rgba(44, 166, 255, 0.08); /* #2ca6ff14 */
	--accent-blue-hover: #1a8fe0;
	--accent-blue-border: #2CA6FF;
	--accent-blue-dark: #2563eb;

	--accent-green: #15803d;
	--accent-green-light: #d1fae5;
	--accent-green-border: #16a34a;

	--accent-red: #dc2626;
	--accent-red-light: #fee2e2;
	--accent-red-border: #dc2626;

	--accent-yellow: #b45309;
	--accent-yellow-light: #fefce8;
	--accent-yellow-border: #ca8a04;

  --accent-orange: #d97706;
  --accent-orange-dark: #92400e;

	/* Границы */
	--border-primary: #dee2e6;
	--border-secondary: #ced4da;
	--border-light: #e9ecef;
	--border-lighter: #f1f3f5;

	/* Тени */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);  /* h-offset v-offset blur color */
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.13);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.3);

	/* Размеры */
  --radius-xs: 3px;
	--radius-sm: 5px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-xl: 12px;
  --radius-full: 50%;

	/* Шрифты */
	--font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'SF Mono', 'Fira Code', monospace;
	--font-size-xs: 10px;
	--font-size-sm: 12px;
	--font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;

  --font-weight-sm: 400;
  --font-weight-md: 500;
  --font-weight-lg: 600;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
	font-family: var(--font-primary);
	background: var(--bg-primary);
	color: var(--text-primary);
	font-size: var(--font-size-md);
	min-height: 100vh;
}

/* NAV */
nav {
	background: var(--nav-bg);
	display: flex;
	align-items: center;
	padding: 0 20px;
	min-height: 52px;
	position: relative;
}
.nav-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
}
.nav-version {
	font-size: var(--font-size-sm);
	color: var(--accent-blue);
	font-weight: var(--font-weight-md);
	margin-left: 4px;
	opacity: 0.85;
}
.nav-center {
	display: flex;
	align-items: center;
	gap: 4px;
}
.nav-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	justify-content: flex-end;
}
.logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}
.logo img {
	height: 26px;
	width: auto;
	filter: brightness(0) invert(1);
}
.nav-btn {
	background: transparent;
	color: var(--text-light);
	border: none;
	border-radius: var(--radius-md);
	padding: 6px 14px;
	font-size: var(--font-size-md);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}
.nav-btn:hover { background: var(--nav-bg-hover); color: var(--text-light); }
.nav-btn.active { background: var(--bg-dark); color: var(--accent-blue); }
.nav-btn.active i { color: var(--accent-blue); }

/* PROFILE DROPDOWN */
.profile-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}
/* Lang badge moved next to profile */
.lang-badge {
	background: var(--nav-bg-hover);
	color: var(--text-light);
	border: none;
	border-radius: var(--radius-sm);
	padding: 2px 8px;
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: color 0.15s;
}
.lang-badge:hover { color: var(--text-light); }
.profile-btn {
	background: var(--nav-bg-hover);
	border: none;
	border-radius: var(--radius-md);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-inverse);
	font-size: var(--font-size-xl);
	transition: background 0.15s;
}
.profile-btn:hover { background: var(--nav-bg-hover); }
.profile-btn.open, .profile-wrap.open .profile-btn { background: var(--bg-dark); color: var(--accent-blue); }
.profile-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: var(--bg-dropdown);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	min-width: 190px;
	overflow: hidden;
	z-index: 500;
}
.profile-dropdown.open { display: block; }
.profile-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 16px;
	font-size: var(--font-size-md);
	color: var(--accent-blue);
	cursor: pointer;
	transition: background 0.12s;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
}
.profile-dropdown-item:hover { background: var(--bg-active); }
.profile-dropdown-item i {
  font-size: var(--font-size-lg);
  color: var(--accent-blue);
}

/* NOTIFICATION CONTAINER */

.notify-container {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);    /* Центрирование */
  width: 90%;                          /* Ширина на мобильных */
  max-width: 500px;                    /* Максимальная ширина на десктопе */
  z-index: 888;
  display: flex;
  flex-direction: column;
  /* align-items: stretch; */          /* Растягиваем элементы по ширине контейнера */
  align-items: center;                 /* Центрирует сами плашки внутри */
  gap: 12px;                           /* Зазор между плашками */


  pointer-events: none;                /* Чтобы контейнер не мешал кликам, если он пустой */

}

.notify-container > .info {
  background: linear-gradient(var(--accent-blue-light), var(--accent-blue-light)), #fff;
  color: var(--accent-blue-dark);
}
.notify-container > .warn {
  background: linear-gradient(var(--accent-yellow-light), var(--accent-yellow-light)), #fff;
  color: var(--accent-yellow);
}
.notify-container > .err {
  background: linear-gradient(var(--accent-red-light), var(--accent-red-light)), #fff;
  color: var(--accent-red);
}
.notify-container > .ok {
  background: linear-gradient(var(--accent-green-light), var(--accent-green-light)), #fff;
  color: var(--accent-green);
}


.notify-container > * {
  box-shadow: var(--shadow-xl);

  border-radius: var(--radius-xl);

  padding: 8px;
  position: relative;

  /* width: 100%; */                 /* Чтобы все плашки были одинаковой ширины */
  /* box-sizing: border-box; */      /* Чтобы padding не раздувал ширину плашки */

  display: flex;
  justify-content: center; /* Центрирует по горизонтали */
  align-items: center;     /* Центрирует по вертикали (если плашка высокая) */
  text-align: center;

  /* Начальное состояние */
  opacity: 0;
  transform: translateY(50%);

  /* Запускаем сразу две анимации через запятую:
     1. Появление: длится 0.3s, срабатывает сразу.
     2. Исчезновение: длится 0.3s, но НАЧИНАЕТСЯ через 3.7s (итого 4 секунды) */
  animation:
    show-notify 0.3s ease-out forwards,
    hide-notify 0.3s ease-in forwards 3.7s;

  transition-behavior: allow-discrete;
}
/* Анимация появления */
@keyframes show-notify {
  to {
    opacity: 0.925;
    transform: translateY(0);
  }
}
/* Анимация плавного уменьшения и исчезновения */
@keyframes hide-notify {
  from {
    opacity: 0.925;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(0) scale(0.85);

    display: none;
  }
}

/* SCROLL BUTTON */
.scroll-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 400;

  display: block;  /* none */

  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: none;

  
  background-color: var(--accent-blue-light);
  color: var(--accent-blue-dark);
  font-size: var(--font-size-xl);
  cursor: pointer;

  box-shadow: var(--shadow-xl);
  transition: background-color 0.3s, transform 0.3s;
}

.scroll-btn:hover {
  transform: scale(1.1); /* Слегка увеличивается */
}



/* MAIN */
main {
	max-width: 1260px;
	margin: 24px auto;
	padding: 0 16px;
}

/* PANEL */
.panel {
	background: var(--bg-panel);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-xl);
}
.panel-header {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border-primary);
	gap: 6px;
}
.panel-title {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-lg);
	color: var(--text-secondary);
	margin-right: auto;
}


.save-btn {
	padding: 7px 16px; border-radius: var(--radius-md); border: none;
	background: var(--accent-blue); color: var(--text-inverse); font-size: var(--font-size-md); font-weight: var(--font-weight-md);
	cursor: pointer; font-family: inherit;
}
.save-btn:hover { background: var(--accent-blue-hover); }
.save-btn:disabled {
    background: var(--bg-active);
    color: var(--text-quaternary);
    cursor: not-allowed;
    pointer-events: none;
}
.cancel-btn {
	padding: 7px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-secondary);
	background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--font-size-md);
	cursor: pointer; font-family: inherit;
}
.cancel-btn:hover { background: var(--bg-active); }



/* INFO PANEL */
.card-panel {
	background: var(--bg-panel);
  display: grid;
  grid-auto-flow: row;
  gap: 8px;
}

/* LICENSE CARD */
.license-card {
	background: var(--bg-secondary);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.license-hero {
  /* background: var(--bg-primary); */
  position: relative;
  height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.license-fgp {
  position: absolute;
  bottom: 15px;
  background: var(--nav-bg);
  color: var(--accent-orange);
  padding: 6px 15px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  cursor: pointer;
  }
.license-fgp:hover { background: color-mix(in srgb, var(--nav-bg) 66%, white); }

.license-input-block {
  padding: 6px 30px;
  display: flex;
}
.license-input-block .save-btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.license-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--accent-orange-dark);
  word-break: break-all;

	width: 100%;
  height: auto;
	border: 1px solid var(--border-secondary);
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  background-color: var(--bg-tertiary);
	padding: 7px 9px;

	outline: none;

  resize: vertical;
}
.license-input:focus { outline: none; border-color: var(--accent-blue); }

.license-footer {
  margin: 6px;
  text-align: center;
}

/* AUTH CARD */
.auth-card {
	background: var(--bg-secondary);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-xl);
	margin-bottom: 16px;
  overflow: hidden;
  padding: 30px;
}
.auth-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-lg);
	color: var(--text-primary);
  margin-bottom: 20px;
}
.auth-group {
  margin-bottom: 20px;
}
.auth-group label {
  display: block;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-md);
  margin-bottom: 8px;
  color: var(--text-tertiary);
}
.input-wrapper {
  display: flex;
}
.input-wrapper input {
  flex: 1;
  padding: 12px 15px;
  height: 30px;
  border: 1px solid var(--border-secondary);
  background-color: var(--bg-tertiary);
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  font-size: var(--font-size-md);

  outline: none;
}
.input-wrapper input:focus { outline: none; border-color: var(--accent-blue); }

.input-wrapper .save-btn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.auth-footer {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-status {
  font-size: var(--font-size-lg);
}
.form-status.info { color: var(--accent-blue-dark); }
.form-status.warn { color: var(--accent-yellow); }
.form-status.err { color: var(--accent-red); }
.form-status.ok { color: var(--accent-green); }


/* STATUS FILTER */
.status-filter {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-right: 8px;
}
.status-filter label {
	font-size: var(--font-size-sm);
	color: var(--text-tertiary);
	white-space: nowrap;
}
.status-filter select {
	font-size: var(--font-size-sm);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-sm);
	padding: 3px 6px;
	color: var(--text-secondary);
	background: var(--bg-secondary);
	cursor: pointer;
}

/* LABELED BUTTONS */
.action-btn {
	background: var(--bg-secondary);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-sm);
	height: 30px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	color: var(--text-tertiary);
	font-size: var(--font-size-sm);
	transition: background 0.12s, border-color 0.12s;
	white-space: nowrap;
}
.action-btn:hover { background: var(--bg-active); }
.action-btn i { font-size: var(--font-size-lg); }
.action-btn.green { border-color: var(--accent-green); color: var(--accent-green); }
.action-btn.green:hover { background: var(--accent-green-light); }
.action-btn.red { border-color: var(--accent-red); color: var(--accent-red); }
.action-btn.red:hover { background: var(--accent-red-light); }

/* COLUMN HEADERS */
.col-headers {
	display: grid;
	grid-template-columns: 110px 1fr 120px 120px 120px 2fr;
	gap: 0;
	padding: 7px 0 7px 16px;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-md);
	color: var(--text-quaternary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-xl);
	background: var(--bg-secondary);
	margin: 10px 10px 0;
}
.col-headers span {
	padding: 0 8px;
	border-right: 1px solid var(--border-light);
	display: flex;
	align-items: center;
}
.col-headers span:last-child { border-right: none; }

/* TOPIC ROW */
.topic-row {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-secondary);
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
}

.topic-main {
	display: grid;
	grid-template-columns: 110px 1fr 120px 120px 120px 2fr;
	gap: 0;
	align-items: center;
	padding: 10px 0 10px 16px;
	cursor: pointer;
	transition: background 0.12s;
  border-radius: var(--radius-xl);
	user-select: none;
	min-height: 56px;
}
.topic-main:hover { background: var(--bg-hover); }

/* each cell in topic-main has separator */
.topic-main > * {
	padding: 0 8px;
	border-right: 1px solid var(--border-light);
	display: flex;
	align-items: center;
	height: 100%;
}
.topic-main > *:last-child { border-right: none; }

/* STATUS CELL */
.status-cell {
	display: flex;
	align-items: center;
	gap: 8px;
}
.status-dot {
	width: 8px; height: 8px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}
.status-dot.active { background: var(--accent-green); }
.status-dot.paused { background: var(--accent-orange); }
.status-dot.inactive { background: var(--text-quaternary); }

.topic-name {
	font-weight: var(--font-weight-md);
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.src-count {
	font-size: var(--font-size-xs);
	background: var(--bg-active);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-lg);
	padding: 1px 7px;
	color: var(--text-tertiary);
	font-weight: var(--font-weight-sm);
	flex-shrink: 0;
}

/* AI PROCESSING — expandable cell */
.ai-cell {
	display: flex;
	align-items: center;
	position: relative;
}

.expand-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	background: var(--bg-active);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-sm);
	padding: 4px 7px;
	font-size: var(--font-size-xs);
	color: var(--text-secondary);
	cursor: pointer;
	transition: background 0.12s;
	white-space: nowrap;

	overflow: hidden;
	max-width: 100%;
}
.expand-btn:hover { background: var(--border-secondary); }
.expand-btn i { font-size: var(--font-size-md); color: var(--accent-blue); }
.expand-btn i:last-child { font-size: var(--font-size-xs)}

/* POPUPS */
.popup {
	display: none;
	position: absolute;
	z-index: 777;
	background: var(--bg-popup);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 13px 16px 12px;

  width: 380px; /* 400px 380px 280px */

  /* left: 0; */ /* right: 0; */

	top: calc(100% + 6px);
  height: auto;
  max-width: calc(100vw - 16px);
}
.popup.open { display: block; }
.popup-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-lg);
	color: var(--text-secondary);
	margin-bottom: 10px;

  position: relative;
  padding-right: 25px; 
}
.popup-title-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--font-size-lg);
    color: var(--text-quaternary);
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.popup-close:hover { opacity: 1; color: var(--text-secondary); }

.popup-hint {
	display: flex;
	flex-direction: column;
	padding:8px 10px;
	margin-bottom: 12px;
	font-size: var(--font-size-xs);
	color: var(--text-tertiary);
	background: var(--bg-tertiary);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-primary);
}
.popup-label {
	color: var(--text-tertiary);
	margin-bottom: 5px;
	font-size: var(--font-size-xs);
}
.popup-input {
	width: 100%;
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-md);
	padding: 7px 9px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	font-family: inherit;
	outline: none;
	margin-bottom: 10px;

  resize: vertical;
  /* min-height: 60px; */
}
.popup-input:focus { outline: none; border-color: var(--accent-blue); }
.popup-apply {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 5px;
	background: var(--accent-blue);
	color: var(--text-inverse);
	border: none;
	border-radius: var(--radius-sm);
	padding: 6px 14px;
	font-size: var(--font-size-sm);
	cursor: pointer;
	width: 100%;
	justify-content: center;
	transition: background 0.15s;
	font-family: inherit;
}
.popup-apply:hover { background: var(--accent-blue-hover); }
.popup-apply i { font-size: var(--font-size-lg); }

.popup-row {
  display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-bottom: 9px;
  
	font-size: var(--font-size-sm);
	color: var(--text-secondary);

	/* flex-wrap: nowrap; */
	white-space: nowrap;
}
.popup-row i { font-size: var(--font-size-lg); color: var(--accent-blue); }
.popup-row select {
	font-size: var(--font-size-sm);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-sm);
	padding: 3px 6px;
	color: var(--text-secondary);
	background: var(--bg-secondary);
	cursor: pointer;
}
.popup-row:last-child { margin-bottom: 0; }

.popup-opt {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	cursor: pointer;
	white-space: nowrap;
  padding-right: 8px;
}
/* radio styled as circle */
.popup-opt input[type="radio"] {
	appearance: none;
	width: 14px; height: 14px;
	border: 2px solid var(--border-secondary);
  
	border-radius: var(--radius-full);
  
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	flex-shrink: 0;
	position: relative;
	top: 0;
}
.popup-opt input:checked {
	border-color: var(--accent-blue);
	background: var(--accent-blue);
	box-shadow: inset 0 0 0 2px var(--bg-secondary);
}
.popup-opt input[type="checkbox"] {
	appearance: none;
	width: 14px; height: 14px;
	border: 2px solid var(--border-secondary);
	
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	flex-shrink: 0;
	position: relative;
	top: 0;
}


/* SCHEDULE CELL */
.sched-cell {
	display: flex;
	align-items: center;
	position: relative;
	overflow: visible;
	min-width: 0;
}

.time-input {
	width: 80px;
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-sm);
	padding: 3px 5px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	text-align: center;
}
.time-input:focus { outline: none; border-color: var(--accent-blue); }
.freq-input {
	width: 52px;
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-sm);
	padding: 3px 5px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	text-align: center;
}
.freq-input:focus { outline: none; border-color: var(--accent-blue); }


/* ANTIDUPE CELL */
.anti-cell {
	display: flex;
	align-items: center;
	position: relative;
	overflow: visible;
	min-width: 0;
}

.pct-input {
	width: 52px;
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-sm);
	padding: 3px 5px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	text-align: center;
}
.pct-input:focus { outline: none; border-color: var(--accent-blue); }

/* TARGET / SOURCE POSTING CELL */
.target-cell {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex-wrap: nowrap;
  border-right: none;
}

.target-posting-label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-lg);
	color: var(--text-quaternary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	flex-shrink: 0;
}

.target-link {
	color: var(--accent-blue);
	font-size: var(--font-size-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1;
}
.target-set-btn {
	background: var(--bg-secondary);
	border: 1px solid var(--accent-blue);
	border-radius: var(--radius-sm);
	padding: 2px 8px;
	font-size: var(--font-size-xs);
	color: var(--accent-blue);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.12s;
}
.target-set-btn:hover { background: var(--accent-blue-light); }
.copy-btn {
	background: none;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-quaternary);
	font-size: var(--font-size-md);
	flex-shrink: 0;
	transition: background 0.12s;
}
.copy-btn:hover { background: var(--border-secondary); color: var(--text-tertiary); }

.target-link {
	font-size: 0;  /* Пустой контент скрыт */
}
.target-link * {
	font-size: var(--font-size-sm); /* Не пустой (и обернутый в теги) - виден */
}

.target-link-stub {
	font-size: var(--font-size-md);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 10;
	color: var(--text-quaternary);
	font-style:italic;

	display: none;
}

.target-link:not(:has(*)) + .target-link-stub {  /* Заглушка видна когда target-link пустая (без внутренних тегов) */
	display: block;
}

.target-set-btn-stub {
	display: none;
}

.target-link:not(:has(*)) ~ .target-set-btn:not(.target-set-btn-stub) {
	display: none;
}
.target-link:not(:has(*)) ~ .target-set-btn.target-set-btn-stub {
	display: block;
}

/* CHECKBOX ACCENT */
input[type="checkbox"] {
	accent-color: var(--accent-blue);
	width: 15px;
	height: 15px;
	cursor: pointer;
}

/* TOGGLE */
.toggle-wrap {
	display: flex;
	align-items: center;
}
.toggle {
	position: relative;
	width: 38px;
	height: 22px;
	flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
	position: absolute;
	inset: 0;
	background: var(--border-secondary);
	border-radius: 11px;
	cursor: pointer;
	transition: background 0.2s;
}
.toggle-slider::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	background: var(--bg-secondary);
	border-radius: var(--radius-full);
	top: 3px;
	left: 3px;
	transition: transform 0.2s;
	box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle-slider { background: var(--accent-green); }
.toggle input:checked + .toggle-slider::after { transform: translateX(16px); }

/* TOPIC ROW — card wrapper when expanded */
.topic-row.expanded {
	background: var(--bg-tertiary);
	border-color: var(--border-secondary);
	position: relative;
}
.topic-row.expanded .topic-main {
	background: var(--bg-secondary);
}
.topic-row.expanded .topic-main:hover { background: var(--bg-hover); }
.topic-row.expanded .topic-main i.expand-icon { transform: rotate(180deg); }

/* FLOW SUBPANELS WRAPPER — groups sources + semantic as a separate card */
.flow-subpanels {
	margin: 6px 10px 8px;
	border: 1px solid var(--border-light);
	border-radius: var(--radius-lg);
	background: var(--bg-tertiary);
}

/* SOURCES PANEL — always visible, contains the footer bar + expandable inner */
.sources-panel {
	background: var(--bg-tertiary);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
	/* display: block; */
}

.flow-subpanels .src-toggle-row {
	border-top: none;
}
.flow-subpanels .sem-toggle-row {
	border-top: 1px solid var(--border-light);
}

/* "Источники наблюдения" header row — collapsible */
.src-toggle-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-top: 1px solid var(--border-secondary);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
	cursor: pointer;
	font-size: var(--font-size-sm);
	color: var(--text-tertiary);
	user-select: none;
	background: var(--bg-tertiary);
	transition: background 0.12s;
}
.src-toggle-row:hover { background: var(--bg-hover); }
.src-toggle-row i.expand-icon {
	font-size: var(--font-size-md);
	margin-left: auto;
	transition: transform 0.2s;
	color: var(--text-quaternary);
	display: flex;
}
.src-toggle-row.open i.expand-icon { transform: rotate(180deg); }
.src-toggle-label { font-weight: var(--font-weight-md); color: var(--text-tertiary); min-width: 130px; }
/* topic-row separation */
.topic-row { margin-bottom: 16px; }
.topic-row:first-of-type { margin-top: 8px; }
.topic-row:last-child { margin-bottom: 10px; }
.topic-row:last-child .semantic-panel .sem-toggle-row { border-bottom: none; }
.sem-toggle-row { border-bottom: none; }
/* синяя полоска только при выборе чекбоксом */
.topic-row:has(.status-cell > input:first-child:checked) {
	border-left: 3px solid var(--accent-blue);
}
.topic-row:not(.expanded) .src-toggle-row {
	border-bottom: none;
}

.badge {
	font-size: var(--font-size-xs);
	background: var(--bg-active);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-lg);
	padding: 2px 8px;
	color: var(--text-tertiary);
	font-weight: var(--font-weight-md);

  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
/* Чтобы не плодить цвета для border юзаем формулу осветления */
.badge.green { background: var(--accent-green-light); color: var(--accent-green); border-color: color-mix(in srgb, var(--accent-green-border) 33%, white); }
.badge.red   { background: var(--accent-red-light); color: var(--accent-red); border-color: color-mix(in srgb, var(--accent-red-border) 33%, white); }
.badge.gray  { background: var(--bg-active); color: var(--text-tertiary); border-color: color-mix(in srgb, var(--border-secondary) 33%, white); }
.badge.blue  { background: var(--accent-blue-light); color: var(--accent-blue-dark); border-color: color-mix(in srgb, var(--accent-blue-border) 33%, white); }
.badge.yellow { background: var(--accent-yellow-light); color: var(--accent-yellow); border-color: color-mix(in srgb, var(--accent-yellow-border) 33%, white); }


/* sources inner area — collapsible */
.sources-inner {
	display: none;
	border-top: 1px solid var(--border-primary);
  background: var(--bg-secondary);
}
.sources-inner.open { display: block; }

/* source actions bar */
.src-top-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-bottom: 1px solid var(--border-primary);
}

/* source column headers */
.src-col-headers {
	display: grid;
	grid-template-columns: 22px 1fr 50px 64px;
	gap: 0;
	padding: 7px 20px 6px 42px;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-md);
	color: var(--text-quaternary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--border-primary);
}
.src-col-headers span {
	padding: 0 4px;
	border-right: 1px solid var(--border-light);
}
.src-col-headers span:last-child { border-right: none; }

.src-row {
	display: grid;
	grid-template-columns: 22px 1fr 50px 64px;
	gap: 0;
	align-items: center;
	padding: 8px 20px 8px 42px;
	border-bottom: 1px solid var(--border-lighter);
	transition: background 0.1s;
}
.src-row:hover { background: var(--bg-hover); }
.src-row:last-of-type { border-bottom: none; }
.src-row > * {
	padding: 0 4px;
	border-right: 1px solid var(--border-light);
}
.src-row > *:first-child { border-right: none; padding: 0; }
.src-row > *:last-child { border-right: none; }
.src-name { font-size: var(--font-size-sm); color: var(--text-secondary); }

/* media filter dot */
.dot-btn {
	width: 22px; height: 22px;
	border: 2px solid;
  border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-xs);
	cursor: pointer;
	flex-shrink: 0;
}

.filter-col { position: relative; display: flex; align-items: center; }
.dot-btn.autocolors {
	/* 1. По умолчанию (когда не все включены и не все выключены) */
	background: var(--accent-yellow-light); color: var(--accent-orange); border-color: var(--accent-yellow-border);
	transition: all 0.2s ease-in-out;
}
.filter-col:not(:has(input:checked)) .dot-btn.autocolors {
	/* 2. Все выключены: если в контейнере НЕТ ни одного чекнутого чекбокса */
	background: var(--accent-red-light); color: var(--accent-red); border-color: var(--accent-red-border);
	transition: all 0.2s ease-in-out;
}
.filter-col:not(:has(input:not(:checked))) .dot-btn.autocolors {
	/* 3. Все включены: если в контейнере НЕТ ни одного НЕчекнутого чекбокса */
	background: var(--accent-green-light); color: var(--accent-green); border-color: var(--accent-green-border);
	transition: all 0.2s ease-in-out;
}

.hint-item {
	display: flex;
	align-items: center;
	gap: 6px;
}
.hint-dot {
	width: 10px; height: 10px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}
.hint-dot.green { background: var(--accent-green-border); }
.hint-dot.yellow { background: var(--accent-yellow-border); }
.hint-dot.red { background: var(--accent-red-border); }

.media-filters {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}
.media-filter-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	white-space: nowrap;
}
.media-filter-item i { font-size: var(--font-size-md); color: var(--text-tertiary); }

/* EMPTY STATE */
.row-empty {
	padding: 14px 16px 6px 42px;
	font-size: var(--font-size-md);
	color: var(--text-quaternary);
}

/* Автоматика скрытия заглушки по наличию вверху строк данных */
.src-list:has(.src-row) + .row-empty {display: none;}
.sem-list:has(.sem-row) + .row-empty {display: none;}

/* TOOLTIP */
[title] { cursor: help; }
button[title] { cursor: pointer; }

/* SOURCE SEARCH */
.source-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: 4px;
}
.source-search-icon {
	position: absolute;
	left: 8px;
	color: var(--text-quaternary);
	font-size: var(--font-size-lg);
	pointer-events: none;
}
.source-search-input {
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-sm);
	padding: 4px 28px 4px 28px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	width: 220px;
	outline: none;
	transition: border-color 0.15s;
	font-family: inherit;
}
.source-search-input:focus { border-color: var(--accent-blue); }
.source-search-input::placeholder { color: var(--text-quaternary); }
.source-search-clear {
	position: absolute;
	right: 6px;
	background: none;
	border: none;
	color: var(--text-quaternary);
	cursor: pointer;
	font-size: var(--font-size-xs);
	display: none;
	padding: 0;
	line-height: 1;
}
.source-search-clear:hover { color: var(--text-secondary); }

/* SEARCH HIGHLIGHTS */
.src-name.highlight, .mon-text-cell.highlight {
	background: var(--accent-yellow-light);
	border-radius: var(--radius-xs);
	padding: 1px 3px;
	color: var(--accent-orange-dark);
	font-weight: var(--font-weight-lg);
}
.topic-row.src-match, .mon-stream-group.mon-match {
	outline: 2px solid var(--accent-blue);
	outline-offset: -1px;
	position: relative;
}
.topic-row.src-match .topic-main, .mon-stream-group.mon-match .mon-stream-header {
  background: var(--accent-blue-light);
}


/* SEMANTIC PANEL */
.semantic-panel {
	background: var(--bg-tertiary);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.sem-toggle-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-top: 1px solid var(--border-light);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
	cursor: pointer;
	font-size: var(--font-size-sm);
	color: var(--text-tertiary);
	user-select: none;
	background: var(--bg-tertiary);
	transition: background 0.12s;
}
.sem-toggle-row:hover { background: var(--bg-hover); }
.sem-toggle-row i.expand-icon { font-size: var(--font-size-md); margin-left: auto; transition: transform 0.2s; color: var(--text-quaternary); display: flex; }
.sem-toggle-row.open i.expand-icon { transform: rotate(180deg); }

.sem-inner {
	display: none;
	border-top: 1px solid var(--border-primary);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
	background: var(--bg-secondary);
}
.sem-inner.open { display: block; }
.sem-col-headers {
	display: grid;
	grid-template-columns: 22px 1fr auto auto;
	gap: 6px;
	padding: 6px 14px 5px 42px;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-md);
	color: var(--text-quaternary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--border-primary);
}
.sem-row {
	display: grid;
	grid-template-columns: 22px 1fr auto auto;
	gap: 6px;
	align-items: center;
	padding: 8px 14px 8px 42px;
	border-bottom: 1px solid var(--border-lighter);
	transition: background 0.1s;
}
.sem-row:hover { background: var(--bg-hover); }
.sem-row:last-of-type { border-bottom: none; }
.sem-label {
	font-size: var(--font-size-sm);
	color: var(--accent-blue);
	padding: 0 4px;
}
.icon-only {
	width: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: var(--radius-sm) !important;
	flex-shrink: 0 !important;
}
.icon-only i { font-size: var(--font-size-md); }
.sem-edit-btn { margin-right: 2px;
	font-size: var(--font-size-xs);
	padding: 2px 8px;
	white-space: nowrap;
}

/* ===== BASE PAGE ===== */
.page {
  max-width: 1260px; margin: 24px auto; padding: 0 16px;
}
.page.visible { display: block; }


.mon-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.mon-toolbar-left { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
.mon-toolbar-right { display: flex; align-items: center; gap: 6px; }

.mon-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.mon-search-wrap i {
	position: absolute;
	left: 8px;
	font-size: var(--font-size-lg);
	color: var(--text-quaternary);
	pointer-events: none;
}
.mon-search-input {
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-md);
	padding: 6px 10px 6px 30px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	width: 260px;
	outline: none;
	font-family: inherit;
	background: var(--bg-secondary);
}
.mon-search-input:focus { border-color: var(--accent-blue); }
.mon-search-input::placeholder { color: var(--text-quaternary); }
.mon-search-clear {
	position: absolute;
	right: 6px;
	background: none;
	border: none;
	color: var(--text-quaternary);
	cursor: pointer;
	font-size: var(--font-size-xs);
	display: none;
	padding: 0;
	line-height: 1;
}
.mon-search-clear:hover { color: var(--text-secondary); }

.mon-filter-select {
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-md);
	padding: 6px 10px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	background: var(--bg-secondary);
	cursor: pointer;
	font-family: inherit;

  /* appearance: none; */

  max-width: 200px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
}
.mon-filter-select:hover { border-color: var(--accent-blue); }

/* Stream groups */
.mon-stream-group {
	background: var(--bg-secondary);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-xl);
	margin-bottom: 16px;
  overflow: hidden;
}
.mon-stream-group:last-child { margin-bottom: 10px; }

.mon-stream-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	/*background: var(--bg-secondary);
	border-bottom: 1px solid var(--border-primary);*/
  border-radius: var(--radius-xl);
	cursor: pointer;
	user-select: none;
	transition: background 0.12s;
}
.mon-stream-header:hover { background: var(--bg-hover); }
.mon-stream-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-lg);
	color: var(--text-primary);
	flex: 1;
}
.mon-stream-meta {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mon-stream-chevron {
	font-size: var(--font-size-lg);
	color: var(--text-quaternary);
	transition: transform 0.2s;
}
.mon-stream-header.open .mon-stream-chevron { transform: rotate(180deg); }

/* Article rows */
.mon-articles {
  display: none;
  /* border-radius: var(--radius-xl); */
}
.mon-articles.open { display: block; }

.mon-col-headers {
	display: grid;
	grid-template-columns: 140px 1fr 90px 90px 110px;
	padding: 6px 16px;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-md);
	color: var(--text-quaternary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 0px solid var(--border-light);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
	background: var(--bg-secondary);
	gap: 0;
}
.mon-col-headers span { padding: 0 6px; border-right: 1px solid var(--border-light); }
.mon-col-headers span:last-child { border-right: none; }

.mon-article-row {
	display: grid;
	grid-template-columns: 140px 1fr 90px 90px 110px;
	align-items: start;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border-lighter);
	transition: background 0.1s;
	gap: 0;
}
.mon-article-row.is-hidden { display: none;}
.mon-article-row:last-of-type { border-bottom: none; }
.mon-article-row:hover { background: var(--bg-hover); }
.mon-article-row > * { padding: 0 6px; }
.mon-article-row > *:first-child { padding: 0 6px; }

.mon-source-cell {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mon-source-name {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-md);
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mon-source-link {
	font-size: var(--font-size-xs);
	color: var(--text-quaternary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mon-text-cell {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	line-height: 1.45;
}
.mon-text-preview {
	/* display: -webkit-box; */ /* это ellipsis */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 4px;
}

.mon-text-tags {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.mon-tag {
	font-size: var(--font-size-xs);
	border-radius: var(--radius-sm);
	padding: 1px 6px;
	font-weight: var(--font-weight-md);
}
/* Механизм осветления border */
.mon-tag-pass  { background: var(--accent-green-light); color: var(--accent-green); border: 1px solid color-mix(in srgb, var(--accent-green-border) 33%, white); }
.mon-tag-block { background: var(--accent-red-light); color: var(--accent-red); border: 1px solid color-mix(in srgb, var(--accent-red-border) 33%, white); }
.mon-tag-dupe   { background: var(--accent-yellow-light); color: var(--accent-yellow); border: 1px solid color-mix(in srgb, var(--accent-yellow-border) 33%, white); }

.mon-media-tags {
	display: flex;
	gap: 4px;
	margin-top: 5px;
	flex-wrap: wrap;
}
.mon-media-tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: var(--font-size-xs);
	padding: 1px 6px;
	font-weight: var(--font-weight-md);
	background: var(--bg-active);
  border-radius: var(--radius-sm);
	color: var(--text-tertiary);
	border: 1px solid var(--border-light);
}
.mon-media-tag i { font-size: var(--font-size-sm); }


.mon-time-cell {
	font-size: var(--font-size-sm);
	color: var(--text-tertiary);
	white-space: nowrap;
}
.mon-status-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 2px;
}
.mon-status-pill {
	font-size: var(--font-size-xs);
	border-radius: var(--radius-sm);
	padding: 2px 8px;
  margin-bottom: 2px;
	font-weight: var(--font-weight-md);
	white-space: nowrap;
}


.mon-pill-pass    { background: var(--accent-green-light); color: var(--accent-green); }
.mon-pill-block   { background: var(--accent-red-light); color: var(--accent-red); }

.mon-action-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
	padding-right: 14px;
	box-sizing: border-box;
}
.mon-action-btn {
	font-size: var(--font-size-xs);
	padding: 3px 8px;
	border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
	background: var(--bg-secondary);
	color: var(--text-secondary);
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	transition: background 0.1s;
}
.mon-action-btn:hover { background: var(--bg-active); }
.mon-action-btn.blue { border-color: var(--accent-blue); color: var(--accent-blue); }
.mon-action-btn.blue:hover { background: var(--accent-blue-light); }

/* Summary bar */
.mon-summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--bg-tertiary);
	border-top: 1px solid var(--border-primary);
	font-size: var(--font-size-sm);
	color: var(--text-tertiary);
}

.mon-ai-reason {
	font-size: var(--font-size-xs);
	color: var(--text-tertiary);
	margin-top: 4px;
	line-height: 1.4;
	font-style: italic;
}
.mon-ai-reason.pass { color: var(--accent-green); }
.mon-ai-reason.block { color: var(--accent-red); }
.mon-ai-reason.dupe { color: var(--accent-yellow); }

.mon-source-link-ext {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: var(--font-size-xs);
	color: var(--accent-blue);
	text-decoration: none;
	margin-top: 3px;
}
.mon-source-link-ext:hover { text-decoration: underline; }

.mon-ai-model {
	font-size: var(--font-size-xs);
	color: var(--text-quaternary);
	margin-top: 2px;
	font-style: normal;
	font-weight: var(--font-weight-md);
}

/* Status left border */
.mon-article-row { padding-left: 20px !important; border-left: 3px solid transparent; }
.mon-row-pass   { border-left-color: var(--accent-green); }
.mon-row-block  { border-left-color: var(--accent-red); }
.mon-row-queue  { border-left-color: var(--accent-blue); }
.mon-row-dupe   { border-left-color: var(--accent-yellow); }

.mon-row-dupe   { border-left-color: var(--accent-yellow); }
.mon-pill-dupe  { background: var(--accent-yellow-light); color: var(--accent-yellow); }

/* Queue pill */
.mon-pill-queue { background: var(--accent-blue-light); color: var(--accent-blue-dark); }
.mon-queue-time {
	font-size: var(--font-size-xs);
	color: var(--accent-blue-dark);
	background: var(--accent-blue-light);
	border: 1px solid var(--accent-blue-border);
	border-radius: var(--radius-sm);
	padding: 2px 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	margin-top: 2px;
	margin-bottom: 2px;
}
.mon-queue-time i { font-size: var(--font-size-sm); }

/* Edited version block */
.mon-edited-version {
	margin-top: 8px;
	padding: 8px 10px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	line-height: 1.5;
}
.mon-edited-label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-lg);
	color: var(--text-quaternary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.mon-edited-label i { font-size: var(--font-size-sm); }
.mon-edited-text { color: var(--text-primary); }
/* Multi-select filter dropdown */
.mon-multiselect {
	position: relative;
	display: inline-block;
}
.mon-multiselect-btn {
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-md);
	padding: 6px 10px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	background: var(--bg-secondary);
	cursor: pointer;
	font-family: inherit;
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.mon-multiselect-btn:hover { border-color: var(--accent-blue); }
.mon-multiselect-btn.active { border-color: var(--accent-blue); color: var(--accent-blue); }
.mon-multiselect-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 400;
	background: var(--bg-secondary);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	min-width: 160px;
	padding: 4px 0;
}
.mon-multiselect-dropdown.open { display: block; }
.mon-multiselect-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	cursor: pointer;
	user-select: none;
}
.mon-multiselect-item:hover { background: var(--bg-active); }
.mon-multiselect-item input { cursor: pointer; accent-color: var(--accent-blue); }
.mon-multiselect-item.checked { color: var(--accent-blue); font-weight: var(--font-weight-md); }
.mon-multiselect-item:has(#ms-all) {
  border-bottom: 1px solid var(--bg-primary);
  margin-bottom: 2px;
  padding-bottom: 8px;
}


/* Add own post button */
.mon-add-post-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: var(--font-size-sm);
	padding: 5px 12px;
	border: 1px dashed var(--accent-blue);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--accent-blue);
	cursor: pointer;
	font-family: inherit;
	transition: background 0.12s;
}
.mon-add-post-btn:hover { background: var(--accent-blue-light); }

/* Empty state */
.mon-empty {
	padding: 24px 16px;
	text-align: center;
	font-size: var(--font-size-md);
	color: var(--text-quaternary);
}

.sys-section {
	background: var(--bg-secondary);
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-xl);
	overflow: hidden;
	margin-bottom: 16px;
}
.sys-section:last-child { margin-bottom: 10px; }

.sys-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	border-bottom: 1px solid var(--border-primary);
	background: var(--bg-secondary);
}
.sys-section-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-lg);
	color: var(--text-primary);
	display: flex;
	align-items: center;
	gap: 7px;
}
.sys-section-title i { color: var(--accent-blue); font-size: var(--font-size-lg); }
.sys-header-actions { display: flex; gap: 6px; }

.sys-icon-btn {
	width: 30px; height: 30px;
	border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
	background: var(--bg-secondary);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	font-size: var(--font-size-md);
	color: var(--text-secondary);
	transition: background 0.12s;
}
.sys-icon-btn:hover { background: var(--bg-active); }
.sys-icon-btn.green { border-color: var(--accent-green); color: var(--accent-green); }
.sys-icon-btn.green:hover { background: var(--accent-green-light); }
.sys-icon-btn.red { border-color: var(--accent-red); color: var(--accent-red); }
.sys-icon-btn.red:hover { background: var(--accent-red-light); }

/* API key table */
.sys-key-table { width: 100%; border-collapse: collapse; }
.sys-key-table th {
	text-align: left;
	padding: 8px 16px;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-lg);
	color: var(--text-quaternary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--border-light);
	background: var(--bg-tertiary);
}
.sys-key-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-lighter);
	vertical-align: top;
	font-size: var(--font-size-md);
}
.sys-key-table td:first-child {
	padding-right: 0px;
	width: 1px;
	white-space: nowrap;
}
.sys-key-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.sys-key-table tr:last-child td { border-bottom: none; }
.sys-key-table tr:hover td { background: var(--bg-hover); }

.sys-key-token {
	font-family: var(--font-mono);
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	background: var(--bg-active);
  border-radius: var(--radius-sm);
	padding: 2px 6px;
	letter-spacing: 0.02em;

  word-break: break-all;
  min-width: 320px;
  
  /* white-space: normal; */
}
.sys-key-url {
	font-size: var(--font-size-sm);
	color: var(--accent-blue);
	text-decoration: none;
}
.sys-key-url:hover { text-decoration: underline; }
.sys-key-model {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-lg);
	color: var(--text-secondary);
	margin-top: 2px;
}
.sys-key-status-ok   { font-size: var(--font-size-xs); color: var(--accent-green); font-weight: var(--font-weight-md); }
.sys-key-status-err  { font-size: var(--font-size-xs); color: var(--accent-red); margin-top: 3px; line-height: 1.4; max-width: 420px; }
.sys-key-status-warn { font-size: var(--font-size-xs); color: var(--accent-orange); font-weight: var(--font-weight-md); }
.sys-key-status-none {
  font-size: var(--font-size-xs); color: var(--text-quaternary); font-weight: var(--font-weight-md);
}

.sys-key-score { font-size: var(--font-size-xs); color: var(--text-quaternary); margin-left: 6px; }

.sys-status-dot-ok   { display: inline-block; width:7px; height:7px; border-radius:var(--radius-full); background:var(--accent-green); margin-right:4px; vertical-align:middle; }
.sys-status-dot-err  { display: inline-block; width:7px; height:7px; border-radius:var(--radius-full); background:var(--accent-red); margin-right:4px; vertical-align:middle; }
.sys-status-dot-warn { display: inline-block; width:7px; height:7px; border-radius:var(--radius-full); background:var(--accent-orange); margin-right:4px; vertical-align:middle; }
.sys-status-dot-none {
  display: inline-block; width:7px; height:7px; border-radius:var(--radius-full); background:var(--border-secondary); margin-right:4px; vertical-align:middle;
  /* display: none; */
}

.sys-cb-col { width: 32px; }
.sys-key-col { width: 38%; }
.sys-status-col { }

/* Add key modal */
.sys-add-form {
	display: none;
	padding: 16px 18px;
	background: var(--bg-tertiary);
	border-top: 1px solid var(--border-primary);
	gap: 12px;
	flex-direction: column;
}
.sys-add-form.open { display: flex; }
.sys-add-form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sys-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; }
.sys-field label { font-size: var(--font-size-xs); font-weight: var(--font-weight-lg); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.sys-field input {
	border: 1px solid var(--border-secondary);
	border-radius: var(--radius-md);
	padding: 7px 10px;
	font-size: var(--font-size-md);
	font-family: inherit;
	color: var(--text-secondary);
	outline: none;
	background: var(--bg-secondary);
}
.sys-field input:focus { border-color: var(--accent-blue); }
.sys-field input.mono { font-family: var(--font-mono); font-size: var(--font-size-sm); }
.sys-form-actions { display: flex; gap: 6px; }

.sys-legend {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px 18px;
	background: var(--bg-tertiary);
	border-bottom: 1px solid var(--border-light);
	flex-wrap: wrap;
}
.sys-legend-label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-lg);
	color: var(--text-quaternary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-right: 4px;
}
.sys-legend-item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: var(--font-size-sm);
	color: var(--text-tertiary);
}
.sys-legend-dot {
	width: 8px; height: 8px;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}
.sys-legend-dot.ok   { background: var(--accent-green); }
.sys-legend-dot.warn { background: var(--accent-orange); }
.sys-legend-dot.err  { background: var(--accent-red); }
.sys-legend-dot.none { background: var(--border-secondary); }

.sys-legend-divider {
	width: 1px; height: 16px;
	background: var(--border-primary);
	margin: 0 4px;
}

.sys-error-glossary {
	padding: 12px 18px;
	border-bottom: 1px solid var(--border-primary);
	background: var(--accent-yellow-light);
}
.sys-error-glossary-title {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-lg);
	color: var(--accent-orange-dark);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.sys-error-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.sys-info-bar {
	border-bottom: 1px solid var(--border-primary);
	background: var(--bg-tertiary);
}
.sys-info-chevron {
	font-size: var(--font-size-sm);
	color: var(--text-quaternary);
	transition: transform 0.2s;
}
.sys-info-toggle {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 9px 18px;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-md);
	color: var(--text-tertiary);
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	width: 100%;
	text-align: left;
	transition: color 0.15s;
}
.sys-info-toggle:hover { color: var(--accent-blue); }
.sys-info-body { border-bottom: 1px solid var(--border-primary); }
.sys-error-item {
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.sys-error-code {
	font-family: var(--font-mono);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-lg);
	color: var(--accent-red);
	background: var(--accent-red-light);
	padding: 1px 5px;
	border-radius: var(--radius-xs);
	white-space: nowrap;
}
.sys-error-code.warn {
	color: var(--accent-orange);
	background: var(--accent-yellow-light);
}
.sys-score-hint {
	font-size: var(--font-size-xs);
	color: var(--text-tertiary);
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 5px;
}

/* ============================================================
 TABLET GAP — 834px..1024px: toolbar buttons overflow the row.
 Wrap the toolbar and let "Удалить выбранное" break onto two lines.
 ============================================================ */
@media (max-width: 1024px) and (min-width: 834px) {

.panel-header {
	flex-wrap: wrap !important;
	row-gap: 8px !important;
}
.panel-header .action-btn.red {
	white-space: normal !important;
	text-align: center;
	height: auto !important;
	min-height: 30px;
	line-height: 1.2;
	flex-basis: 120px;
	flex-shrink: 0;
}
}

/* ============================================================
 MOBILE ADAPTIVE — 834px tablet / 480px phone
 ============================================================ */

@media (max-width: 834px) {

/* NAV */
nav {
	padding: 0 10px !important;
	flex-wrap: wrap !important;
	height: auto !important;
	min-height: 52px !important;
}
.nav-left { padding: 8px 0; flex: 1; }
.logo img { height: 24px !important; }
.nav-center {
	order: 3;
	width: 100%;
	border-top: 1px solid rgba(255,255,255,0.1);
	gap: 0 !important;
}
.nav-btn {
	flex: 1 !important;
	justify-content: center !important;
	border-radius: 0 !important;
	font-size: var(--font-size-xs) !important;
	padding: 10px 2px !important;
}
.nav-right { padding: 8px 0; }

.panel-header {
	flex-wrap: wrap !important;
	gap: 6px !important;
	padding: 10px 14px !important;
}
.panel-title { font-size: var(--font-size-sm) !important; margin-right: 0 !important; width: 100%; }

.status-filter { font-size: var(--font-size-xs) !important; }
.panel-header .action-btn { font-size: var(--font-size-xs) !important; padding: 0 8px !important; }
.col-headers { display: none !important; }

.topic-row {
	margin: 0 6px 10px !important;
	border-radius: var(--radius-md) !important;
}
.topic-row:first-of-type { margin-top: 8px !important; }

.topic-main {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px 8px !important;
	padding: 10px 12px !important;
	min-height: 0 !important;
}

.topic-name {
	flex: 1 !important;
	font-size: var(--font-size-lg) !important;
	min-width: 80px;
}

.target-cell {
	width: 100% !important;
	display: flex !important;
	align-items: center;
	gap: 6px;
	overflow: hidden;
}

.target-set-btn { font-size: var(--font-size-xs) !important; padding: 3px 8px !important; flex-shrink: 0; }

.target-link {
	font-size: 0;  /* Пустой контент скрыт */
}
.target-link * {
	font-size: var(--font-size-xs); /* Не пустой (и обернутый в теги) - виден */
}

.target-link-stub {
	font-size: var(--font-size-sm);
}

.popup-row { flex-wrap: wrap !important; }

.flow-subpanels { margin: 4px 6px 8px !important; }
.sem-edit-btn { font-size: var(--font-size-xs) !important; padding: 2px 5px !important; }
.row-empty { font-size: var(--font-size-sm) !important; padding: 10px 12px !important; }
.action-btn { font-size: var(--font-size-xs) !important; padding: 4px 10px !important; }

.mon-toolbar {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 6px !important;
}
.mon-toolbar-left {
	flex-wrap: wrap !important;
	gap: 6px !important;
}
.mon-search-wrap {
	width: 100% !important;
	order: -1 !important;
}
.mon-search-input { width: 100% !important; }
.mon-toolbar-right {
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 5px !important;
}

.mon-stream-group { border-radius: var(--radius-xl) !important; }
.mon-stream-header { padding: 10px 12px !important; flex-wrap: wrap; gap: 6px; }
.mon-stream-title { font-size: var(--font-size-md) !important; }
.mon-stream-meta { gap: 4px !important; flex-wrap: wrap !important; }
.badge { font-size: var(--font-size-xs) !important; padding: 1px 6px !important; }

.mon-col-headers { display: none !important; }

.mon-article-row {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	padding: 12px 14px 10px 17px !important;
}
.mon-article-row.is-hidden { display: none !important; }
.mon-article-row > * { padding: 0 !important; }

/* Mobile monitor card order: status → time → source+links → text → actions */
.mon-status-cell {
  order: 0;
}
.mon-time-cell {
	order: 1 !important;
	font-size: var(--font-size-xs) !important;
	display: flex !important;
	gap: 4px;
	align-items: center;
	color: var(--text-tertiary);
}
.mon-time-cell br { display: none; }
.mon-source-cell {
	order: 2 !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 3px !important;
}
.mon-source-link-ext {
	font-size: var(--font-size-xs) !important;
}
.mon-text-cell { order: 3 !important; }
.mon-action-cell { order: 4 !important; }
.mon-action-cell {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 5px !important;
	padding-right: 0 !important;
}
.mon-action-btn { font-size: var(--font-size-xs) !important; padding: 4px 9px !important; }
.mon-summary { flex-wrap: wrap !important; padding: 8px 12px !important; gap: 5px !important; font-size: var(--font-size-xs) !important; }

/* src-row на мобильном: flex в одну строку */
.src-row {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 8px 12px !important;
}
.src-row input[type="checkbox"] { flex-shrink: 0; width: 16px; }
.src-row .src-name, .src-row {
	flex: 1 !important;
	min-width: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	font-size: var(--font-size-sm) !important;
}
.src-row .toggle-wrap { flex-shrink: 0; }
.src-row .filter-col { flex-shrink: 0; }
.src-row .src-edit-btn { flex-shrink: 0; }

/* src-col-headers: скрываем на мобильном — строки говорят сами за себя */
.src-col-headers { display: none !important; }

/* sem-row на мобильном: flex в одну строку */
.sem-row {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 7px 12px !important;
}
.sem-row input[type="checkbox"] { flex-shrink: 0; width: 16px; }
.sem-row .sem-label {
	flex: 1 !important;
	min-width: 0 !important;
	font-size: var(--font-size-sm) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}
.sem-row .sem-edit-btn { flex-shrink: 0; margin-right: 0 !important; }
.sem-row .toggle-wrap { flex-shrink: 0; }

/* sem-col-headers: скрываем */
.sem-col-headers { display: none !important; }

/* toggle-row на мобильном: компакт */
.src-toggle-row, .sem-toggle-row {
	padding: 9px 12px !important;
	font-size: var(--font-size-sm) !important;
}
.src-toggle-label {
	min-width: 100px !important;
}

/* sched/anti: разрешаем перенос строк, чтобы не выходить за экран */
.popup-row {
	flex-wrap: wrap !important;
	white-space: normal !important;
}
.popup-row span {
	white-space: normal !important;
}

/* action buttons в subpanel */
.src-top-actions, .sem-top-actions {
	flex-wrap: wrap !important;
	padding: 8px 12px !important;
	gap: 5px !important;
}

/* SYSTEM PAGE */
.page { margin: 10px auto !important; padding: 0 8px !important; }

.sys-section { border-radius: var(--radius-md) !important; }
.sys-section-header { padding: 10px 14px !important; flex-wrap: wrap; gap: 8px; }
.sys-section-title { font-size: var(--font-size-md) !important; }

.sys-legend { flex-direction: column !important; gap: 8px !important; padding: 10px 14px !important; }
.sys-legend-divider { display: none !important; }
.sys-error-glossary { padding: 10px 14px !important; }
.sys-error-item { flex-direction: column !important; gap: 2px !important; font-size: var(--font-size-xs) !important; }

.sys-key-table thead { display: none !important; }
.sys-key-table, .sys-key-table tbody,
.sys-key-table tr, .sys-key-table td { display: block !important; width: 100% !important; }
.sys-key-table tr { padding: 10px 14px !important; border-bottom: 1px solid var(--border-lighter) !important; }
.sys-key-table td { padding: 0 0 4px 0 !important; border: none !important; }
.sys-cb-col { display: none !important; }
.sys-key-token { font-size: var(--font-size-xs) !important; word-break: break-all !important; white-space: normal !important; }

/* Mobile: action buttons row under topic name */
.ai-cell, .sched-cell, .anti-cell {
	flex-shrink: 0 !important;
}
.expand-btn {
	font-size: var(--font-size-sm) !important;
	padding: 4px 9px !important;
	white-space: nowrap;
}
/* topic-main on mobile: status+name in first row, then buttons wrap */
.topic-main .ai-cell { order: 2; }
.topic-main .sched-cell { order: 3; }
.topic-main .anti-cell { order: 4; }
.topic-main .target-cell { order: 5; width: 100%; }
/* Show mobile action buttons, hide desktop cells */
.topic-mobile-actions { display: flex !important; }
.topic-main > .ai-cell,
.topic-main > .sched-cell,
.topic-main > .anti-cell { display: none !important; }

.sys-add-form-row { flex-direction: column !important; }
.sys-field { min-width: unset !important; }
.sys-add-form { padding: 12px 14px !important; }
} /* @media (max-width: 834px) */


@media (max-width: 640px){
/* .col-headers { display: none !important; } */
.topic-main {
  grid-template-columns: 28px 1fr 40px !important;
  gap: 6px !important;
}
/* .topic-main .ai-cell,	.topic-main .sched-cell, .topic-main .anti-cell, 	.topic-main .target-cell { display: none !important; } */
.src-col-headers { padding-left: 44px !important; }
.src-row { padding-left: 44px !important; }
}

@media (max-width: 480px) {
.nav-btn { font-size: 0 !important; gap: 0 !important; padding: 12px 4px !important; }
.nav-btn i { font-size: var(--font-size-xl) !important; }

.topic-main { padding: 8px 10px !important; gap: 5px 6px !important; }
.topic-name { font-size: var(--font-size-md) !important; }
.flow-subpanels { margin: 3px 4px 8px !important; }

.mon-stream-meta { display: flex !important; flex-wrap: wrap !important; width: 100%; gap: 3px !important; }
.mon-stream-chevron, .sys-info-chevron { margin-left: auto; }
.sys-icon-btn { width: 28px !important; height: 28px !important; }
}

/* Mobile action buttons under stream name */
.topic-mobile-actions {
	display: none; /* hidden on desktop */
	width: 100%;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 2px;
}
.mob-act-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--font-size-xs);
	padding: 4px 9px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-secondary);
	background: var(--bg-active);
	color: var(--text-secondary);
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}
.mob-act-btn i { font-size: var(--font-size-md); color: var(--accent-blue); }