@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root {
  --page-bg: #f3f4f6;
  --page-bg-dark: #0f172a;
  --surface-color: #ffffff;
  --surface-color-dark: #1f2937;
  --subsurface-color: rgba(255, 255, 255, 0.65);
  --subsurface-color-dark: rgba(17, 24, 39, 0.7);
  --card-bg: var(--surface-color);
  --surface-base: rgba(255, 255, 255, 0.92);
  --surface-elevated: var(--surface-color);
  --neutral-color: #94a3b8;
  --hover-bg: rgba(241, 245, 249, 0.75);
  --input-bg: rgba(255, 255, 255, 0.92);
  --input-border: rgba(148, 163, 184, 0.35);
  --primary-color: #4c6ef5;
  --primary-color-dark: #8da2fb;
  --accent-color: #0ea5e9;
  --accent-color-dark: #38bdf8;
  --danger-color: #ef4444;
  --success-color: #22c55e;
  --warning-color: #f59e0b;
  --text-color: #0f172a;
  --text-color-secondary: #475569;
  --text-primary: var(--text-color);
  --text-secondary: var(--text-color-secondary);
  --text-tertiary: color-mix(in srgb, var(--text-color-secondary), transparent 30%);
  --text-on-dark: #f8fafc;
  --border-color: rgba(15, 23, 42, 0.08);
  --border-color-dark: rgba(148, 163, 184, 0.25);
  --card-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --card-shadow-dark: 0 18px 42px rgba(2, 6, 23, 0.66);
  --button-glow: 0 18px 32px rgba(37, 99, 235, 0.24);
  --button-glow-hover: 0 22px 36px rgba(37, 99, 235, 0.3);
  --button-glow-secondary: 0 12px 24px rgba(15, 23, 42, 0.12);
  --button-glow-secondary-hover: 0 16px 28px rgba(15, 23, 42, 0.18);
  --button-glow-danger: 0 18px 32px rgba(185, 28, 28, 0.28);
  --button-glow-danger-hover: 0 22px 38px rgba(185, 28, 28, 0.34);
  --sidebar-bg: rgba(15, 23, 42, 0.78);
  --sidebar-bg-dark: rgba(12, 18, 34, 0.92);
  --sidebar-highlight: rgba(148, 163, 184, 0.14);
  --sidebar-active: rgba(76, 110, 245, 0.18);
  --status-tooltip-bg: rgba(15, 23, 42, 0.96);
  --status-tooltip-color: #f8fafc;
  --status-tooltip-border: rgba(15, 23, 42, 0.45);
  --status-tooltip-shadow: 0 22px 48px rgba(15, 23, 42, 0.22);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --transition-base: 0.25s ease;
  --safe-area-top: 0px;
  --safe-area-right: 0px;
  --safe-area-bottom: 0px;
  --safe-area-left: 0px;
}

html[data-theme="dark"] {
  --page-bg: var(--page-bg-dark);
  --surface-color: var(--surface-color-dark);
  --subsurface-color: var(--subsurface-color-dark);
  --card-bg: var(--surface-color);
  --neutral-color: rgba(148, 163, 184, 0.75);
  --surface-base: rgba(30, 41, 59, 0.82);
  --surface-elevated: rgba(15, 23, 42, 0.92);
  --hover-bg: rgba(30, 41, 59, 0.6);
  --input-bg: rgba(15, 23, 42, 0.88);
  --input-border: rgba(148, 163, 184, 0.35);
  --primary-color: var(--primary-color-dark);
  --accent-color: var(--accent-color-dark);
  --text-color: var(--text-on-dark);
  --text-color-secondary: rgba(226, 232, 240, 0.7);
  --text-primary: var(--text-color);
  --text-secondary: var(--text-color-secondary);
  --text-tertiary: rgba(148, 163, 184, 0.6);
  --border-color: var(--border-color-dark);
  --card-shadow: var(--card-shadow-dark);
  --sidebar-bg: var(--sidebar-bg-dark);
  --sidebar-highlight: rgba(96, 165, 250, 0.12);
  --sidebar-active: rgba(129, 140, 248, 0.24);
  --button-glow: 0 22px 38px rgba(14, 116, 214, 0.4);
  --button-glow-hover: 0 26px 44px rgba(37, 99, 235, 0.45);
  --button-glow-secondary: 0 16px 32px rgba(2, 6, 23, 0.6);
  --button-glow-secondary-hover: 0 20px 38px rgba(2, 6, 23, 0.68);
  --button-glow-danger: 0 22px 36px rgba(127, 29, 29, 0.44);
  --button-glow-danger-hover: 0 26px 44px rgba(185, 28, 28, 0.52);
  --status-tooltip-bg: rgba(15, 23, 42, 0.94);
  --status-tooltip-color: #f8fafc;
  --status-tooltip-border: rgba(148, 163, 184, 0.35);
  --status-tooltip-shadow: 0 28px 56px rgba(2, 6, 23, 0.6);
}

body {
  font-family: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text-color);
  transition: background 0.4s ease, color 0.3s ease;
  position: relative;
  line-height: 1.55;
}

html[data-theme="dark"] body {
  background: radial-gradient(140% 120% at 0% 0%, rgba(59, 130, 246, 0.22), transparent 55%),
    radial-gradient(120% 140% at 90% 10%, rgba(14, 165, 233, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.92)),
    var(--page-bg);
}

body.modal-open {
  overflow: visible;
}

html.no-transition,
html.no-transition * {
  transition: none !important;
}

a,
a:visited {
  color: var(--accent-color);
  text-decoration: none;
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}

a:hover {
  text-decoration: underline;
  text-decoration-color: rgba(14, 165, 233, 0.65);
}

a:active {
  color: var(--primary-color);
  text-decoration: none;
}


.sidebar {
  position: fixed;
  top: calc(var(--safe-area-top) + 24px);
  left: calc(var(--safe-area-left) + 24px);
  width: 260px;
  height: calc(100vh - (var(--safe-area-top) + var(--safe-area-bottom)) - 48px);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  padding: 28px 22px 24px;
  background: var(--sidebar-bg);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 1000;
  overflow: hidden;
  backdrop-filter: blur(18px);
  transition: transform var(--transition-base), width var(--transition-base), padding var(--transition-base), border-radius var(--transition-base);
}

body.sidebar-no-animate .sidebar,
body.sidebar-no-animate .sidebar *,
body.sidebar-no-animate .content,
body.sidebar-no-animate .content * {
  transition: none !important;
}

.sidebar::before,
.sidebar::after {
  content: '';
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

.sidebar::before {
  inset: -35% -45% auto auto;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.35), transparent 65%);
}

.sidebar::after {
  inset: auto -50% -40% auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.32), transparent 70%);
}

.sidebar-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 1;
}

.sidebar .brand,
.sidebar-brand {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #f8fafc;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-brand-name {
  letter-spacing: inherit;
}

.sidebar-version-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.1;
  gap: 2px;
}

.sidebar-version-text {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(248, 250, 252, 0.85);
  text-transform: none;
}

.sidebar-version-commit {
  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgba(248, 250, 252, 0.6);
  word-break: break-all;
}


.sidebar-user,
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  color: rgba(226, 232, 240, 0.82);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}


.sidebar-user:hover,
.sidebar-link:hover {
  background: var(--sidebar-highlight);
  color: #f9fafb;
  transform: translateX(4px);
}

.sidebar-user i,
.sidebar-link i {
  font-size: 1.1rem;
}


.sidebar-user.active,
.sidebar-link.active {
  background: var(--sidebar-active);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 255, 0.32);
}

.sidebar-user.active::before,
.sidebar-link.active::before {
  content: '';
  position: absolute;
  inset: 12px auto 12px 6px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.9), rgba(59, 130, 246, 0.6));
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  flex: 1;
}

.sidebar-user-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.sidebar-user-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.sidebar-user-username {
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.65);
  letter-spacing: 0.01em;
}

.sidebar .nav-divider {
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  margin: 12px 0;
}

html[data-theme="dark"] .sidebar {
  background: var(--sidebar-bg);
  border: 1px solid rgba(37, 99, 235, 0.26);
  box-shadow: var(--card-shadow);
}

html[data-theme="dark"] .sidebar-toggle {
  background: rgba(30, 41, 59, 0.75);
  border-color: rgba(148, 163, 184, 0.35);
  color: rgba(226, 232, 240, 0.92);
}

html[data-theme="dark"] .sidebar-toggle:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: rgba(165, 180, 252, 0.5);
}

.content {
  position: relative;
  margin-left: 0;
  padding: calc(var(--safe-area-top) + 48px) calc(var(--safe-area-right) + 32px)
    calc(var(--safe-area-bottom) + 64px) calc(var(--safe-area-left) + 32px);
  transition: margin var(--transition-base), padding var(--transition-base);
}

body.with-sidebar .content {
  margin-left: 320px;
  padding: calc(var(--safe-area-top) + 48px) calc(var(--safe-area-right) + 64px)
    calc(var(--safe-area-bottom) + 72px) calc(var(--safe-area-left) + 64px);
}

.container {
  max-width: 1240px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.auth-page {
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  width: min(480px, 100%);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(59, 130, 246, 0.08)), var(--card-bg);
  border-radius: 28px;
  padding: 48px 42px;
  border: 1px solid color-mix(in srgb, var(--border-color), transparent 30%);
  box-shadow: 0 28px 48px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.auth-card::before,
.auth-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.auth-card::before {
  inset: -120px auto auto -100px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.35), transparent 65%);
}

.auth-card::after {
  inset: auto -140px -140px auto;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.28), transparent 65%);
}

.auth-card-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 28px;
}

.auth-title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--text-color);
}

.auth-subtitle {
  margin: 10px 0 0;
  font-size: 15px;
  color: color-mix(in srgb, var(--text-color), transparent 45%);
}

.auth-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
}

.auth-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--input-border), transparent 10%);
  background: color-mix(in srgb, var(--input-bg), transparent 5%);
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary-color), transparent 30%);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

.auth-button {
  margin-top: 6px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-button:hover,
.auth-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(37, 99, 235, 0.32);
  outline: none;
}

.auth-button:active {
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.24);
}

.auth-button.auth-button-secondary {
  background: color-mix(in srgb, var(--primary-color), transparent 82%);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color), transparent 45%);
  box-shadow: var(--button-glow-secondary);
}

.auth-button.auth-button-secondary:hover,
.auth-button.auth-button-secondary:focus-visible {
  background: color-mix(in srgb, var(--primary-color), transparent 76%);
  box-shadow: var(--button-glow-secondary-hover);
}

.auth-button.auth-button-secondary:active {
  transform: translateY(0);
  box-shadow: var(--button-glow-secondary);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #6b7280;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.1), rgba(148, 163, 184, 0.4));
}

.vkid-auth-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-alert {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  font-weight: 500;
}

.auth-alert.auth-alert-success {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
}

.auth-alert.auth-alert-info {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}

html[data-theme="dark"] .auth-card {
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.18), rgba(14, 165, 233, 0.14)), rgba(17, 24, 39, 0.92);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 36px 60px rgba(2, 6, 23, 0.65);
}

html[data-theme="dark"] .auth-card::before {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.5), transparent 65%);
}

html[data-theme="dark"] .auth-card::after {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.45), transparent 65%);
}

html[data-theme="dark"] .auth-subtitle {
  color: rgba(226, 232, 240, 0.7);
}

html[data-theme="dark"] .auth-divider {
  color: rgba(226, 232, 240, 0.6);
}

html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.1), rgba(148, 163, 184, 0.35));
}

html[data-theme="dark"] .auth-input {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.24);
  color: var(--text-color);
}

html[data-theme="dark"] .auth-input:focus {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}

html[data-theme="dark"] .auth-button {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 22px 40px rgba(37, 99, 235, 0.42);
}

html[data-theme="dark"] .auth-button.auth-button-secondary {
  background: color-mix(in srgb, var(--surface-elevated), transparent 52%);
  border: 1px solid color-mix(in srgb, var(--primary-color), transparent 35%);
  color: var(--primary-color);
  box-shadow: var(--button-glow-secondary);
}

html[data-theme="dark"] .auth-button.auth-button-secondary:hover,
html[data-theme="dark"] .auth-button.auth-button-secondary:focus-visible {
  box-shadow: var(--button-glow-secondary-hover);
}

html[data-theme="dark"] .auth-alert {
  background: rgba(248, 113, 113, 0.18);
  color: #fecaca;
}

html[data-theme="dark"] .auth-alert.auth-alert-success {
  background: rgba(74, 222, 128, 0.2);
  color: #bbf7d0;
}

html[data-theme="dark"] .auth-alert.auth-alert-info {
  background: rgba(96, 165, 250, 0.22);
  color: #bfdbfe;
}

@media (max-width: 600px) {
  .auth-page {
    min-height: calc(100vh - 80px);
    padding: 40px 0;
  }

  .auth-card {
    margin: 0 12px;
    padding: 36px 28px;
    border-radius: 22px;
  }

  .auth-title {
    font-size: 26px;
  }
}

h1 {
  margin-top: 0;
  text-align: center;
  font-weight: 600;
}

table {
  width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
  margin-top: 20px;
  background: var(--card-bg);
  color: var(--text-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

th {
  background: var(--primary-color);
  color: #fff;
  font-weight: 600;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover {
  background: var(--hover-bg);
}

form input,
form button,
form textarea,
form select {
  width: 100%;
  padding: 12px 16px;
  margin: 8px 0;
  box-sizing: border-box;
}

.settings-form textarea,
#context-form textarea {
  overflow-y: hidden;
  resize: none;
}


.context-editor {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.context-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.context-card {
  --panel-padding-block: 24px;
  --panel-padding-inline: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.context-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.context-card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.context-card-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.context-card-header p {
  margin: 0;
  font-size: 0.93rem;
  color: color-mix(in srgb, var(--text-color), transparent 40%);
}

.context-card-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--text-color), transparent 45%);
  margin-top: 2px;
}

.context-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-color), transparent 70%);
}

.context-card textarea {
  width: 100%;
  min-height: 170px;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--input-bg), transparent 5%);
  color: var(--text-color);
}

.context-card textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.context-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 2px;
}

.context-card-actions .secondary {
  width: auto;
  min-width: 160px;
}

.context-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}

.context-footer > button {
  width: auto;
  min-width: 200px;
}

@media (max-width: 768px) {
  .context-layout {
    grid-template-columns: 1fr;
  }

  .context-card {
    padding: 20px;
  }

  .context-footer {
    flex-direction: column;
    align-items: stretch;
  }
}

form label {
  display: block;
  margin-top: 12px;
  font-weight: 500;
}

form input,
form textarea,
form select {
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-color);
}

.settings-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings-shell {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings-panels {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-form.grouped-settings {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-section.surface-card {
  --panel-padding-block: 28px;
  --panel-padding-inline: 32px;
}

.settings-section-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.settings-section-header i {
  font-size: 1.75rem;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.2));
  color: var(--primary-color);
}

html[data-theme="dark"] .settings-section-header i {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(37, 99, 235, 0.25));
  color: #bfdbfe;
}

.settings-section-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
}

.settings-section-description {
  margin: 6px 0 0;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--text-color), transparent 45%);
}

.settings-subgroup {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-subtitle {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--text-color), transparent 40%);
}

.settings-grid {
  display: grid;
  gap: 20px 24px;
}

.settings-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.settings-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.settings-grid .field-wide {
  grid-column: 1 / -1;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--text-color), transparent 45%);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field > label:first-child {
  margin-top: 0;
}

.form-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-field-header > label {
  flex: 1;
}

.spread-button {
  width: auto;
  margin: 0;
  padding: 8px 14px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary-color), transparent 88%);
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color), transparent 60%);
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.2;
  box-shadow: none;
  transform: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.spread-button:hover,
.spread-button:focus {
  background: color-mix(in srgb, var(--primary-color), transparent 80%);
  color: var(--primary-color);
  transform: none;
  box-shadow: none;
}

.spread-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color), transparent 40%);
  outline-offset: 2px;
}

html[data-theme="dark"] .spread-button {
  background: color-mix(in srgb, var(--primary-color), transparent 86%);
  border-color: color-mix(in srgb, var(--primary-color), transparent 52%);
  color: var(--primary-color);
}

html[data-theme="dark"] .spread-button:hover,
html[data-theme="dark"] .spread-button:focus {
  background: color-mix(in srgb, var(--primary-color), transparent 72%);
}

.spread-modal {
  border: none;
  padding: 0;
  margin: 0;
  width: min(520px, calc(100vw - 40px));
  border-radius: 20px;
  background: var(--surface-elevated);
  color: var(--text-color);
  box-shadow: var(--card-shadow);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100vh - 40px);
  overflow: hidden;
}

.spread-modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}

.spread-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 100%;
}

.spread-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.spread-modal__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.spread-modal__close {
  background: transparent;
  color: color-mix(in srgb, var(--text-color), transparent 35%);
  border: none;
  padding: 6px;
  margin: 0;
  border-radius: 50%;
  width: auto;
  line-height: 0;
  box-shadow: none;
  transform: none;
}

.spread-modal__close:hover,
.spread-modal__close:focus {
  background: color-mix(in srgb, var(--text-color), transparent 92%);
  color: var(--text-color);
  box-shadow: none;
  transform: none;
}

.spread-modal__close:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color), transparent 40%);
  outline-offset: 2px;
}

.spread-modal__close i {
  font-size: 1.25rem;
  line-height: 1;
}

.spread-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 24px;
  flex: 1 1 auto;
  overflow-y: auto;
}

.spread-modal__description {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.45;
}

.spread-modal__input {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: inherit;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 96px;
  transition: border var(--transition-base), box-shadow var(--transition-base);
}

.spread-modal__input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  outline: none;
}

.spread-modal__input--error,
.spread-modal__input.spread-modal__input--error {
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}

.spread-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.spread-modal__button {
  width: auto;
  margin: 0;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.spread-modal__button--primary {
  background: var(--primary-color);
  color: #fff;
  border: none;
}

.spread-modal__button--primary:hover,
.spread-modal__button--primary:focus {
  box-shadow: var(--button-glow);
}

.spread-modal__button--ghost {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid color-mix(in srgb, var(--primary-color), transparent 60%);
}

.spread-modal__button--ghost:hover,
.spread-modal__button--ghost:focus {
  background: color-mix(in srgb, var(--primary-color), transparent 84%);
  color: var(--primary-color);
}

.spread-modal__button[data-loading] {
  cursor: progress;
}

html[data-theme="dark"] .spread-modal {
  background: var(--surface-elevated);
  box-shadow: var(--card-shadow);
}

html[data-theme="dark"] .spread-modal__description {
  color: var(--text-secondary);
}

html[data-theme="dark"] .spread-modal__button--ghost:hover,
html[data-theme="dark"] .spread-modal__button--ghost:focus {
  background: color-mix(in srgb, var(--primary-color), transparent 74%);
}

@media (max-width: 560px) {
  .spread-modal {
    width: min(480px, calc(100vw - 24px));
  }

  .spread-modal__header,
  .spread-modal__body,
  .spread-modal__actions {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.settings-actions button {
  width: auto;
}

form input:focus,
form textarea:focus,
form select:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--hover-bg);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  align-items: flex-end;
}

.filter-form .filter-group {
  flex: 1 1 200px;
  min-width: 200px;
}

.filter-form .filter-actions {
  flex: 0 0 auto;
  min-width: 150px;
}

.filter-form .filter-actions button {
  width: 100%;
}

.search-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.search-form input {
  flex: 1;
  min-width: 250px;
  margin: 0;
  padding: 8px 12px;
}

.search-form button {
  flex: 0 0 auto;
  width: 40px;
  margin: 0;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-form input {
    min-width: 0;
    width: 100%;
  }

  .search-form button {
    width: 100%;
    height: 44px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

button {
  background: var(--primary-color);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

button.danger {
  background: var(--danger-color);
}

button.secondary {
  background: var(--neutral-color);
}

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

.actions form,
.actions button {
  width: auto;
  margin: 0;
}


.actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--primary-color);
  border: 1px solid rgba(37, 99, 235, 0.35);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.actions button:hover,
.actions button:focus {
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.actions button:active {
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
}

.actions button:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 3px;
}

.actions button .action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.actions button .action-text {
  display: inline-flex;
  align-items: center;
}

.actions button.success {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.35);
}

.actions button.success:hover,
.actions button.success:focus {
  background: rgba(5, 150, 105, 0.12);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.actions button.secondary {
  color: var(--neutral-color);
  border-color: rgba(148, 163, 184, 0.4);
}

.actions button.secondary:hover,
.actions button.secondary:focus {
  background: rgba(148, 163, 184, 0.16);
}

.actions button.danger {
  color: var(--danger-color);
  border-color: rgba(220, 38, 38, 0.35);
}

.actions button.danger:hover,
.actions button.danger:focus {
  background: rgba(220, 38, 38, 0.12);
}

.actions button.success:focus-visible {
  outline-color: rgba(5, 150, 105, 0.45);
}

.actions button.secondary:focus-visible {
  outline-color: rgba(107, 114, 128, 0.45);
}

.actions button.danger:focus-visible {
  outline-color: rgba(220, 38, 38, 0.5);
}

html[data-theme="dark"] .actions button {
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(59, 130, 246, 0.12);
}

html[data-theme="dark"] .actions button:hover,
html[data-theme="dark"] .actions button:focus {
  background: rgba(59, 130, 246, 0.2);
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.35);
}

html[data-theme="dark"] .actions button:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.6);
  outline-offset: 3px;
}

html[data-theme="dark"] .actions button.success {
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.18);
}

html[data-theme="dark"] .actions button.success:hover,
html[data-theme="dark"] .actions button.success:focus {
  background: rgba(16, 185, 129, 0.26);
}

html[data-theme="dark"] .actions button.secondary {
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .actions button.secondary:hover,
html[data-theme="dark"] .actions button.secondary:focus {
  background: rgba(148, 163, 184, 0.26);
}

html[data-theme="dark"] .actions button.danger {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.18);
}

html[data-theme="dark"] .actions button.danger:hover,
html[data-theme="dark"] .actions button.danger:focus {
  background: rgba(248, 113, 113, 0.26);
}

html[data-theme="dark"] .actions button.success:focus-visible {
  outline-color: rgba(16, 185, 129, 0.6);
}

html[data-theme="dark"] .actions button.secondary:focus-visible {
  outline-color: rgba(148, 163, 184, 0.55);
}

html[data-theme="dark"] .actions button.danger:focus-visible {
  outline-color: rgba(248, 113, 113, 0.55);
}

@media (max-width: 768px) {
  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .actions form,
  .actions button {
    width: 100%;
  }

  .actions button {
    justify-content: center;
  }

  .actions button .action-icon {
    display: none;
  }
}

button.large {
  padding: 14px 28px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.inline {
  display: inline;
}

form.inline input,
form.inline button {
  width: auto;
  padding: 4px 8px;
  margin-left: 4px;
}

button.compact {
  padding: 4px 8px;
  font-size: 0.875rem;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  color: var(--text-color);
}

.toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-slider {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.28);
  transition: background var(--transition-base), box-shadow var(--transition-base);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  transition: transform var(--transition-base);
}

.toggle input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  box-shadow: 0 10px 20px rgba(76, 110, 245, 0.25);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(24px);
}

table .toggle {
  margin-top: 0;
}

.admin-form-page {
  display: grid;
  gap: 28px;
  margin-top: 12px;
}

.admin-form-card {
  position: relative;
  --panel-shadow: 0 26px 48px rgba(15, 23, 42, 0.18);
  --panel-shadow-dark: 0 38px 60px rgba(2, 6, 23, 0.6);
  --panel-glow-before: rgba(96, 165, 250, 0.2);
  --panel-glow-after: rgba(37, 99, 235, 0.18);
  --panel-glow-before-dark: rgba(148, 197, 255, 0.32);
  --panel-glow-after-dark: rgba(59, 130, 246, 0.3);
}

.admin-card-plain {
  --panel-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  --panel-shadow-dark: 0 30px 52px rgba(2, 6, 23, 0.55);
  --panel-glow-before: rgba(148, 163, 184, 0.18);
  --panel-glow-after: rgba(96, 165, 250, 0.16);
  --panel-glow-before-dark: rgba(203, 213, 225, 0.35);
  --panel-glow-after-dark: rgba(148, 197, 255, 0.32);
}

.logs-filter-card {
  border: 1px solid color-mix(in srgb, var(--border-color), transparent 10%);
  padding-block: 28px;
}

.profile-page {
  display: grid;
  gap: 24px;
}

.profile-card {
  display: grid;
  gap: 24px;
  --panel-padding-block: 36px;
  --panel-padding-inline: 40px;
  --panel-shadow: 0 28px 52px rgba(15, 23, 42, 0.16);
  --panel-shadow-dark: 0 38px 62px rgba(2, 6, 23, 0.6);
  --panel-glow-before: rgba(165, 180, 252, 0.34);
  --panel-glow-after: rgba(59, 130, 246, 0.24);
  --panel-glow-before-dark: rgba(196, 210, 254, 0.42);
  --panel-glow-after-dark: rgba(129, 178, 255, 0.38);
}

.profile-card-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
}

.profile-heading-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  align-items: center;
  text-align: center;
  width: 100%;
}

.profile-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-color);
}

.profile-subtitle {
  margin: 0;
  max-width: none;
  width: 100%;
  color: color-mix(in srgb, var(--text-color), transparent 45%);
  font-size: 0.95rem;
}

.profile-card-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.profile-aside {
  display: block;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(191, 219, 254, 0.28), rgba(96, 165, 250, 0.18) 42%, rgba(37, 99, 235, 0.32));
  border: 1px solid rgba(59, 130, 246, 0.18);
  position: relative;
  overflow: hidden;
}

html[data-theme="dark"] .profile-aside {
  background: linear-gradient(165deg, rgba(148, 163, 184, 0.14), rgba(96, 165, 250, 0.24) 40%, rgba(37, 99, 235, 0.42));
  border-color: rgba(148, 163, 184, 0.28);
}

.profile-aside-content {
  display: grid;
  gap: 24px;
  padding: 28px;
  position: relative;
  z-index: 1;
}

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.32), rgba(37, 99, 235, 0.52));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 18px 34px rgba(37, 99, 235, 0.26);
  overflow: hidden;
}

html[data-theme="dark"] .profile-avatar {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.45), rgba(37, 99, 235, 0.65));
  box-shadow: 0 22px 38px rgba(30, 58, 138, 0.45);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.profile-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.profile-username {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--text-color), transparent 45%);
}

.profile-badges {
  display: grid;
  gap: 12px;
  margin: 0;
}

.profile-badges div {
  display: grid;
  gap: 4px;
}

.profile-badges dt {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

html[data-theme="dark"] .profile-badges dt {
  color: rgba(226, 232, 240, 0.55);
}

.profile-badges dd {
  margin: 0;
  font-weight: 600;
  color: var(--text-color);
}

.profile-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.profile-highlights li {
  display: grid;
  gap: 6px;
}

.profile-highlights h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
}

.profile-highlights p {
  margin: 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--text-color), transparent 40%);
}

.profile-form {
  display: grid;
  gap: 32px;
}

#profile-login[disabled] {
  background: color-mix(in srgb, #e2e8f0, transparent 35%);
  color: color-mix(in srgb, var(--text-color), transparent 45%);
  border-color: color-mix(in srgb, var(--border-color), transparent 40%);
}

html[data-theme="dark"] #profile-login[disabled] {
  background: rgba(30, 41, 59, 0.7);
  color: rgba(203, 213, 225, 0.7);
  border-color: rgba(148, 163, 184, 0.35);
}

.profile-form-section {
  display: grid;
  gap: 20px;
  padding: 28px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .profile-form-section {
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(148, 163, 184, 0.24);
}

.profile-form-header {
  display: grid;
  gap: 6px;
}

.profile-form-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-color);
}

.profile-form-header p {
  margin: 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--text-color), transparent 40%);
}

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

.profile-actions {
  display: flex;
  gap: 16px;
  width: min(100%, 520px);
  align-items: stretch;
  margin: 28px 0 12px;
  padding: 12px 0;
}

.profile-actions .admin-primary-button,
.profile-actions .admin-secondary-button {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

@media (max-width: 1024px) {
  .profile-card-layout {
    grid-template-columns: 1fr;
  }

  .profile-aside {
    order: -1;
  }

  .profile-form {
    order: 0;
  }
}

@media (max-width: 640px) {
  .profile-card {
    --panel-padding-inline: 24px;
    --panel-padding-block: 28px;
  }

  .profile-aside,
  .profile-form-section {
    padding: 20px;
  }

  .profile-actions {
    width: 100%;
    flex-direction: column;
  }
}

.admin-form-card.accent-emerald {
  --panel-glow-before: rgba(110, 231, 183, 0.32);
  --panel-glow-after: rgba(16, 185, 129, 0.22);
  --panel-glow-before-dark: rgba(110, 231, 183, 0.38);
  --panel-glow-after-dark: rgba(16, 185, 129, 0.32);
}

.admin-form-card.accent-amber {
  --panel-glow-before: rgba(251, 191, 36, 0.32);
  --panel-glow-after: rgba(234, 179, 8, 0.22);
  --panel-glow-before-dark: rgba(251, 191, 36, 0.38);
  --panel-glow-after-dark: rgba(234, 179, 8, 0.32);
}

.admin-form-card.accent-purple {
  --panel-glow-before: rgba(165, 180, 252, 0.36);
  --panel-glow-after: rgba(129, 140, 248, 0.3);
  --panel-glow-before-dark: rgba(165, 180, 252, 0.42);
  --panel-glow-after-dark: rgba(129, 140, 248, 0.38);
}

.admin-form-card.accent-slate {
  --panel-glow-before: rgba(148, 163, 184, 0.28);
  --panel-glow-after: rgba(100, 116, 139, 0.24);
  --panel-glow-before-dark: rgba(203, 213, 225, 0.32);
  --panel-glow-after-dark: rgba(148, 163, 184, 0.3);
}

.admin-form-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.admin-form-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-color);
}

.admin-form-subtitle {
  font-size: 15px;
  color: color-mix(in srgb, var(--text-color), transparent 45%);
}

.admin-form-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.admin-form-grid .form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-form-grid label {
  font-weight: 600;
  font-size: 14px;
  color: color-mix(in srgb, var(--text-color), transparent 15%);
}

.admin-input,
.admin-form-grid input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
.admin-form-grid select,
.admin-form-grid textarea {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-color), transparent 15%);
  padding: 14px 16px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-color);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  backdrop-filter: blur(6px);
}

.admin-form-grid textarea {
  min-height: 140px;
  resize: vertical;
}

.admin-form-grid select {
  appearance: none;
}

html[data-theme="dark"] .admin-input,
html[data-theme="dark"] .admin-form-grid input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
html[data-theme="dark"] .admin-form-grid select,
html[data-theme="dark"] .admin-form-grid textarea {
  background: rgba(17, 24, 39, 0.7);
  color: var(--text-color);
}

html[data-theme="dark"] .admin-form-grid select {
  background-color: rgba(23, 33, 52, 0.85);
  border-color: rgba(148, 163, 184, 0.35);
}

.admin-form-grid input:focus,
.admin-form-grid select:focus,
.admin-form-grid textarea:focus,
.admin-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary-color), white 35%);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
  transform: translateY(-1px);
}

.admin-form-grid input:disabled,
.admin-input:disabled {
  cursor: not-allowed;
  background: rgba(226, 232, 240, 0.55);
  color: color-mix(in srgb, var(--text-color), transparent 40%);
}

html[data-theme="dark"] .admin-form-grid input:disabled,
html[data-theme="dark"] .admin-input:disabled {
  background: rgba(55, 65, 81, 0.65);
  color: rgba(148, 163, 184, 0.7);
}

.admin-form-hint {
  font-size: 12px;
  color: color-mix(in srgb, var(--text-color), transparent 60%);
  display: block;
  margin-top: -4px;
}

.admin-form-actions {
  grid-column: span 12;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

.admin-form-actions-inline {
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: center;
}

.admin-form-actions-inline .admin-primary-button,
.admin-form-actions-inline .admin-secondary-button,
.admin-form-actions-inline .admin-danger-button {
  width: auto;
}

.admin-button,
.admin-primary-button,
.admin-secondary-button,
.admin-danger-button,
.admin-tertiary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  min-height: 48px;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  box-sizing: border-box;
}


.admin-primary-button {
  background: #2563eb;
  color: #fff;
  box-shadow: var(--button-glow);
}

.admin-primary-button:visited {
  color: #fff;
}

.admin-primary-button:hover,
.admin-primary-button:focus-visible {
  transform: translateY(-1px);
  background: #1d4ed8;
  box-shadow: var(--button-glow-hover);
}

.admin-primary-button:focus-visible,
.admin-danger-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

.admin-secondary-button {
  background: rgba(148, 163, 184, 0.1);
  color: color-mix(in srgb, var(--text-color), transparent 10%);
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: var(--button-glow-secondary);
}

.admin-secondary-button:hover,
.admin-secondary-button:focus-visible {
  background: rgba(148, 163, 184, 0.2);
  box-shadow: var(--button-glow-secondary-hover);
}

.admin-secondary-button:focus-visible {
  outline: 2px solid rgba(148, 163, 184, 0.45);
  outline-offset: 2px;
}

.admin-tertiary-button {
  background: transparent;
  color: var(--text-color-secondary);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: none;
}

.admin-tertiary-button:hover,
.admin-tertiary-button:focus-visible {
  background: rgba(148, 163, 184, 0.16);
  color: var(--text-color);
}

.admin-tertiary-button:focus-visible {
  outline: 2px solid rgba(148, 163, 184, 0.35);
  outline-offset: 2px;
}

html[data-theme="dark"] .admin-tertiary-button {
  border-color: rgba(148, 163, 184, 0.38);
  color: rgba(226, 232, 240, 0.78);
}

html[data-theme="dark"] .admin-tertiary-button:hover,
html[data-theme="dark"] .admin-tertiary-button:focus-visible {
  background: rgba(148, 163, 184, 0.18);
  color: rgba(248, 250, 255, 0.92);
}

.admin-danger-button {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  box-shadow: var(--button-glow-danger);
}

.admin-danger-button:hover,
.admin-danger-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--button-glow-danger-hover);
}

.admin-chip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.75);
  color: color-mix(in srgb, var(--text-color), transparent 5%);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.admin-chip-button:hover,
.admin-chip-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.15);
}

.admin-chip-button:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.35);
  outline-offset: 2px;
}

html[data-theme="dark"] .admin-secondary-button {
  background: rgba(148, 163, 184, 0.2);
  color: rgba(226, 232, 240, 0.92);
  border-color: rgba(148, 163, 184, 0.45);
  box-shadow: var(--button-glow-secondary);
}

html[data-theme="dark"] .admin-chip-button {
  background: rgba(30, 41, 59, 0.85);
  color: rgba(226, 232, 240, 0.9);
  border-color: rgba(148, 163, 184, 0.5);
}

.admin-danger-card {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.12), rgba(239, 68, 68, 0.08)), var(--card-bg);
  border-radius: 24px;
  padding: 24px 28px;
  border: 1px solid rgba(248, 113, 113, 0.24);
  box-shadow: 0 20px 40px rgba(185, 28, 28, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-danger-title {
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  color: #991b1b;
}

.admin-danger-card p {
  margin: 0;
  color: color-mix(in srgb, #991b1b, white 40%);
  font-size: 14px;
}

.admin-danger-card .admin-danger-button {
  align-self: flex-start;
  padding: 12px 20px;
}

html[data-theme="dark"] .admin-danger-card {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.24), rgba(239, 68, 68, 0.14)), rgba(24, 24, 27, 0.92);
  border-color: rgba(248, 113, 113, 0.32);
  box-shadow: 0 24px 48px rgba(127, 29, 29, 0.42);
}

html[data-theme="dark"] .admin-danger-title {
  color: #fecaca;
}

html[data-theme="dark"] .admin-danger-card p {
  color: rgba(254, 202, 202, 0.85);
}

.admin-card-section {
  position: relative;
  z-index: 1;
}

.admin-card-section + .admin-card-section {
  margin-top: 24px;
}

.admin-table-wrapper {
  margin-top: 20px;
  overflow-x: auto;
}

table.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid color-mix(in srgb, var(--border-color), transparent 10%);
  border-radius: 20px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

table.data-table thead th {
  background: rgba(148, 163, 184, 0.14);
  color: color-mix(in srgb, var(--text-color), transparent 5%);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
}

table.data-table tbody tr {
  transition: background 0.2s ease;
}

table.data-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.08);
}

table.data-table tbody td {
  background: transparent;
}

html[data-theme="dark"] table.data-table {
  background: rgba(17, 24, 39, 0.75);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.45);
}

html[data-theme="dark"] table.data-table thead th {
  background: rgba(148, 163, 184, 0.2);
}

html[data-theme="dark"] table.data-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.18);
}

.admin-table-legend {
  margin-top: 12px;
  font-size: 13px;
  color: color-mix(in srgb, var(--text-color), transparent 40%);
}

@media (max-width: 768px) {
  .admin-form-card {
    padding: 28px 24px;
    border-radius: 22px;
  }

  .admin-form-title {
    font-size: 24px;
  }

  .admin-form-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .admin-form-actions {
    justify-content: stretch;
  }

  .admin-form-actions .admin-primary-button,
  .admin-form-actions .admin-secondary-button,
  .admin-form-actions .admin-danger-button {
    width: 100%;
  }

  .admin-form-actions-inline {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
  }
}


.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--neutral-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px rgba(15, 23, 42, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.status-badge .status-label {
  white-space: nowrap;
}

.status-badge:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 18px rgba(37, 99, 235, 0.15);
}

.status-running {
  background: linear-gradient(135deg, #16a34a, #22c55e);
}

.status-stopped {
  background: linear-gradient(135deg, #6b7280, #9ca3af);
}

.status-starting {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.bot-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.empty-state {
  position: relative;
  margin-top: 36px;
  padding: 56px 40px 48px;
  text-align: center;
  background:
    linear-gradient(150deg, rgba(148, 163, 184, 0.14), rgba(148, 163, 184, 0.04))
    , var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--border-color), transparent 35%);
  border-radius: 28px;
  box-shadow:
    0 32px 64px rgba(15, 23, 42, 0.08),
    0 1px 0 color-mix(in srgb, var(--border-color), transparent 55%) inset;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  overflow: hidden;
}

.empty-state::before {
  content: none;
}

.empty-state::after {
  content: '';
  position: absolute;
  inset: -22% -26% -18%;
  pointer-events: none;
  background:
    radial-gradient(58% 120% at 0% 48%, rgba(255, 255, 255, 0.38), transparent 70%),
    radial-gradient(58% 120% at 100% 52%, rgba(255, 255, 255, 0.32), transparent 72%);
  opacity: 0.55;
  mix-blend-mode: screen;
}

.empty-state-visual {
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  animation: emptyStateFloat 6s ease-in-out infinite;
}

.empty-state-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.6px);
  opacity: 0.88;
}

.empty-state-orb--primary {
  width: 140px;
  height: 140px;
  background: radial-gradient(circle at 35% 35%, rgba(37, 99, 235, 0.6), rgba(37, 99, 235, 0));
  animation: emptyStatePulse 7s ease-in-out infinite;
}

.empty-state-orb--accent {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 65% 65%, rgba(14, 165, 233, 0.55), rgba(14, 165, 233, 0));
  animation: emptyStatePulse 5s ease-in-out infinite reverse;
}

.empty-state-icon {
  position: relative;
  display: inline-flex;
  width: 84px;
  height: 84px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(30, 64, 175, 0.95));
  color: #fff;
  font-size: 2.45rem;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 28px rgba(37, 99, 235, 0.28);
}

.empty-state h2 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--text-color), color-mix(in srgb, var(--text-color), #2563eb 35%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.empty-state p {
  margin: 0;
  max-width: 440px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--text-color), var(--neutral-color) 60%);
}

.empty-state-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.empty-state-action,
.empty-state-action:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-color), #60a5fa);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 22px 44px rgba(37, 99, 235, 0.24);
  border: 1px solid color-mix(in srgb, var(--primary-color), white 24%);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.empty-state-action:hover,
.empty-state-action:focus {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 30px 54px rgba(37, 99, 235, 0.32);
  filter: brightness(1.07);
  text-decoration: none;
}

.empty-state-action:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-color), white 32%);
  outline-offset: 4px;
}

@keyframes emptyStateFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes emptyStatePulse {
  0%, 100% { transform: scale(0.95); opacity: 0.78; }
  50% { transform: scale(1.05); opacity: 1; }
}

html[data-theme="dark"] .empty-state {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.82), rgba(15, 23, 42, 0.72));
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 36px 60px rgba(2, 6, 23, 0.68);
}

html[data-theme="dark"] .empty-state::before {
  content: none;
}

html[data-theme="dark"] .empty-state::after {
  background:
    radial-gradient(60% 125% at 0% 50%, rgba(148, 163, 184, 0.45), transparent 68%),
    radial-gradient(60% 125% at 100% 50%, rgba(191, 219, 254, 0.35), transparent 70%);
  opacity: 0.4;
}

html[data-theme="dark"] .empty-state h2 {
  background: linear-gradient(135deg, #f3f4f6, rgba(191, 219, 254, 0.85));
  -webkit-background-clip: text;
}

html[data-theme="dark"] .empty-state p {
  color: color-mix(in srgb, var(--text-color), var(--neutral-color) 70%);
}

html[data-theme="dark"] .empty-state-icon {
  box-shadow: 0 24px 48px rgba(37, 99, 235, 0.45);
}

html[data-theme="dark"] .empty-state-action {
  box-shadow: 0 28px 52px rgba(37, 99, 235, 0.38);
  border-color: color-mix(in srgb, var(--primary-color), white 14%);
}

@media (max-width: 640px) {
  .empty-state {
    padding: 44px 24px 36px;
    border-radius: 24px;
    gap: 20px;
  }

  .empty-state-visual {
    width: 120px;
    height: 120px;
  }

  .empty-state h2 {
    font-size: 1.45rem;
  }

  .empty-state p {
    font-size: 0.98rem;
  }

  .empty-state-action {
    width: 100%;
  }
}


.bot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.04)), var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--border-color), transparent 20%);
  border-radius: 18px;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: visible;
  z-index: 0;
}

.bot-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px rgba(15, 23, 42, 0.12);
}

.bot-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bot-item.is-running::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(34, 197, 94, 0));
  opacity: 0.85;
}

.bot-item.is-starting::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.26), rgba(99, 102, 241, 0));
  opacity: 0.85;
}

.bot-item.is-stopped::before {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.28), rgba(107, 114, 128, 0));
  opacity: 0.5;
}

html[data-theme="dark"] .bot-item {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.75));
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 24px 44px rgba(2, 6, 23, 0.55);
}

html[data-theme="dark"] .bot-item:hover {
  box-shadow: 0 30px 54px rgba(2, 6, 23, 0.65);
}

.bot-item > * {
  position: relative;
  z-index: 1;
}

.bot-item.has-open-menu {
  z-index: 80;
}

.bot-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  cursor: pointer;
}

.bot-avatar-icon {
  width: clamp(60px, 9vw, 72px);
  height: clamp(60px, 9vw, 72px);
  border-radius: 999px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.bot-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bot-name {
  margin: 0;
  font-size: clamp(28px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text-color);
}

.bot-meta {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--text-color), transparent 42%);
}

.bot-meta a {
  color: inherit;
}

.bot-rating-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: color-mix(in srgb, var(--warning-color), transparent 20%);
}

.bot-rating-star {
  font-size: 0.9rem;
  line-height: 1;
  color: var(--warning-color);
}

.bot-rating-star--muted {
  color: color-mix(in srgb, var(--text-color), transparent 55%);
}

.bot-rating-value {
  font-variant-numeric: tabular-nums;
}

.bot-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bot-actions-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(148, 163, 184, 0.25);
  flex-wrap: wrap;
}

.bot-action-form {
  display: inline-flex;
}

.bot-action-menu {
  position: relative;
}

.bot-action-menu-list {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 300px;
  padding: 6px 0;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--primary-color), transparent 78%);
  background: linear-gradient(
      150deg,
      color-mix(in srgb, var(--surface-color) 96%, rgba(248, 250, 252, 0.94)) 0%,
      color-mix(in srgb, var(--card-bg), rgba(37, 99, 235, 0.04)) 100%
    );
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  gap: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 90;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  overflow: hidden;
}

.bot-action-menu-list::before {
  content: none;
}

.bot-action-menu.is-open .bot-action-menu-list {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

.bot-action-menu-list[hidden] {
  display: none !important;
}

.bot-action-menu-form {
  width: 100%;
  margin: 0;
}

.bot-action-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  min-height: 52px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: color-mix(in srgb, var(--text-color), transparent 4%);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  text-align: left;
  border-radius: 0;
  margin: 0;
}

.bot-action-menu-item:focus,
.bot-action-menu-item:hover {
  background: color-mix(in srgb, var(--primary-color), transparent 88%);
  color: color-mix(in srgb, var(--text-color), transparent 0%);
}

.bot-action-menu-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-color), transparent 45%);
}

.bot-action-menu-item-icon {
  width: 22px;
  height: 22px;
  color: color-mix(in srgb, var(--text-secondary), transparent 0%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.bot-action-menu-item:hover .bot-action-menu-item-icon,
.bot-action-menu-item:focus .bot-action-menu-item-icon {
  color: var(--primary-color);
  transform: translateX(2px);
}

.bot-action-menu-item-body {
  display: flex;
  align-items: center;
  min-height: 22px;
  color: inherit;
  flex: 1;
}

.bot-action-menu-item-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: inherit;
}

.bot-action-menu-list form {
  margin: 0;
}


.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-color), transparent 5%);
  background: color-mix(in srgb, var(--card-bg), transparent 12%);
  color: color-mix(in srgb, var(--text-color), var(--primary-color) 45%);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.icon-button i {
  font-size: 1.05rem;
  color: currentColor;
}

.icon-button:hover,
.icon-button:focus {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
}

.icon-button:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.5);
  outline-offset: 3px;
}


.icon-button.success {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.38);
  background: rgba(5, 150, 105, 0.08);
}

.icon-button.success:hover,
.icon-button.success:focus {
  background: rgba(5, 150, 105, 0.16);
}

.icon-button.secondary {
  color: color-mix(in srgb, var(--text-color), transparent 10%);
  border-color: rgba(148, 163, 184, 0.42);
  background: rgba(148, 163, 184, 0.12);
}

.icon-button.secondary:hover,
.icon-button.secondary:focus {
  background: rgba(148, 163, 184, 0.2);
}

.icon-button.danger {
  color: var(--danger-color);
  border-color: rgba(220, 38, 38, 0.38);
  background: rgba(220, 38, 38, 0.08);
}

.icon-button.danger:hover,
.icon-button.danger:focus {
  background: rgba(220, 38, 38, 0.16);
}

.icon-button.success:focus-visible {
  outline-color: rgba(5, 150, 105, 0.5);
}

.icon-button.secondary:focus-visible {
  outline-color: rgba(148, 163, 184, 0.5);
}

.icon-button.danger:focus-visible {
  outline-color: rgba(220, 38, 38, 0.5);
}

html[data-theme="dark"] .bot-actions-panel {
  border-left-color: rgba(148, 163, 184, 0.4);
}

html[data-theme="dark"] .icon-button {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(96, 165, 250, 0.35);
  color: rgba(191, 219, 254, 0.92);
}

html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .icon-button:focus {
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.5);
  background: rgba(37, 99, 235, 0.24);
}

html[data-theme="dark"] .icon-button:focus-visible {
  outline-color: rgba(96, 165, 250, 0.6);
}

html[data-theme="dark"] .icon-button.success {
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.24);
}

html[data-theme="dark"] .icon-button.success:hover,
html[data-theme="dark"] .icon-button.success:focus {
  background: rgba(16, 185, 129, 0.32);
}

html[data-theme="dark"] .icon-button.secondary {
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(148, 163, 184, 0.26);
}

@media (max-width: 900px) {
  .bot-item {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .bot-main {
    width: 100%;
  }

  .bot-right {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .bot-actions-panel {
    border-left: none;
    padding-left: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .bot-actions-panel .icon-button {
    width: 40px;
    height: 40px;
  }

  .bot-meta {
    font-size: 0.85rem;
  }
}

@media (max-width: 540px) {
  .bot-item {
    padding: 18px 16px;
  }

  .bot-main {
    align-items: flex-start;
    gap: 14px;
  }

  .bot-name {
    font-size: clamp(24px, 8vw, 32px);
  }

  .bot-right {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .bot-right .status-badge {
    width: fit-content;
  }

  .bot-actions-panel {
    justify-content: flex-start;
    gap: 12px;
  }

  .bot-actions-panel .icon-button {
    width: 44px;
    height: 44px;
  }
}

html[data-theme="dark"] .icon-button.secondary:hover,
html[data-theme="dark"] .icon-button.secondary:focus {
  background: rgba(148, 163, 184, 0.34);
}

html[data-theme="dark"] .icon-button.danger {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.24);
}

html[data-theme="dark"] .icon-button.danger:hover,
html[data-theme="dark"] .icon-button.danger:focus {
  background: rgba(248, 113, 113, 0.34);
}

html[data-theme="dark"] .icon-button.success:focus-visible {
  outline-color: rgba(16, 185, 129, 0.6);
}

html[data-theme="dark"] .icon-button.secondary:focus-visible {
  outline-color: rgba(148, 163, 184, 0.6);
}

html[data-theme="dark"] .icon-button.danger:focus-visible {
  outline-color: rgba(248, 113, 113, 0.6);
}

html[data-theme="dark"] .bot-action-menu-list {
  border-color: rgba(99, 102, 241, 0.35);
  background: linear-gradient(
      150deg,
      color-mix(in srgb, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.92)) 0%,
      rgba(15, 23, 42, 0.94) 100%
    );
  box-shadow: 0 34px 80px rgba(2, 6, 23, 0.85);
}

html[data-theme="dark"] .bot-action-menu-item {
  color: color-mix(in srgb, var(--text-color), transparent 10%);
}

html[data-theme="dark"] .bot-action-menu-item:hover,
html[data-theme="dark"] .bot-action-menu-item:focus {
  background: rgba(99, 102, 241, 0.18);
}

html[data-theme="dark"] .bot-action-menu-item:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.55);
}

html[data-theme="dark"] .bot-action-menu-item-icon {
  color: rgba(148, 163, 184, 0.92);
}

[data-tooltip]::after {
  background: rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] [data-tooltip]::after {
  background: rgba(30, 41, 59, 0.92);
}

.bot-id {
  font-size: 0.875rem;
  color: var(--neutral-color);
}

.error {
  color: var(--danger-color);
  text-align: center;
  margin-bottom: 12px;
}


.toggle-container {
  position: fixed;
  top: calc(var(--safe-area-top) + 28px);
  right: calc(var(--safe-area-right) + 32px);
  display: flex;
  gap: 10px;
  z-index: 1200;
}

.toggle-container button {
  padding: 10px 14px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(76, 110, 245, 0.2), rgba(56, 189, 248, 0.18));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  line-height: 1;
  box-shadow: 0 14px 28px rgba(76, 110, 245, 0.15);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.toggle-container button:hover,
.toggle-container button:focus {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(76, 110, 245, 0.2);
}

.toggle-container button:focus-visible {
  outline: 2px solid rgba(76, 110, 245, 0.6);
  outline-offset: 3px;
}

.menu-toggle {
  position: fixed;
  top: calc(var(--safe-area-top) + 28px);
  left: calc(var(--safe-area-left) + 32px);
  padding: 10px 14px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(76, 110, 245, 0.18), rgba(56, 189, 248, 0.16));
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  z-index: 1200;
  box-shadow: 0 14px 28px rgba(76, 110, 245, 0.14);
}

button.is-loading,
.icon-button.is-loading {
  position: relative;
  pointer-events: none;
}

button.is-loading > *,
.icon-button.is-loading > * {
  opacity: 0;
}

button.is-loading::after,
.icon-button.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: button-spin 0.8s linear infinite;
}

.toggle {
  position: relative;
}

.toggle.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -28px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  border-top-color: transparent;
  animation: button-spin 0.8s linear infinite;
}

@keyframes button-spin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}


.sidebar-toggle {
  margin-top: auto;
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.35);
  color: rgba(226, 232, 240, 0.85);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  position: relative;
  z-index: 1;
}

.sidebar-toggle:hover {
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(96, 165, 250, 0.45);
  color: #fff;
}

body.sidebar-collapsed .sidebar {
  width: 92px;
  padding: 24px 14px 18px;
}

body.sidebar-collapsed .sidebar .brand,
body.sidebar-collapsed .sidebar .sidebar-link span,
body.sidebar-collapsed .sidebar .sidebar-user-text {
  display: none;
}

body.sidebar-collapsed.with-sidebar .content {
  margin-left: 180px;
}

body.sidebar-collapsed .sidebar-user,
body.sidebar-collapsed .sidebar-link {
  justify-content: center;
  padding: 12px;
}

body.sidebar-collapsed .sidebar-user.active::before,
body.sidebar-collapsed .sidebar-link.active::before {
  display: none;
}

@media (max-width: 768px) {
  .sidebar-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto;
    padding: 4px 8px;
    background: transparent;
  }
}

.stats-chart {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stats-chart .stats-block,
.stats-chart .chart-block {
  flex: 1;
}

@media (min-width: 769px) {
  .stats-chart {
    flex-direction: row;
  }
}

@media (max-width: 768px) {
  .container {
    margin: calc(var(--safe-area-top) + 24px) auto
      calc(var(--safe-area-bottom) + 48px);
    padding: 0 calc(var(--safe-area-right) + 16px) 0
      calc(var(--safe-area-left) + 16px);
  }
  .menu-toggle {
    left: calc(var(--safe-area-left) + 20px);
    top: calc(var(--safe-area-top) + 20px);
  }
  body:not(.sidebar-open) .menu-toggle {
    display: inline-flex;
  }
  .sidebar {
    transform: translateX(
      calc(-100% - var(--safe-area-left) - 32px)
    );
    transition: transform 0.3s;
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
  body.with-sidebar .content {
    margin-left: 0;
  }
  body.sidebar-open.with-sidebar .content {
    margin-left: 0;
  }
  body.sidebar-collapsed.with-sidebar .content {
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  table tr {
    display: block;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
  }

  table th {
    display: none;
  }

  table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 8px 16px;
  }

  table td:last-child {
    border-bottom: none;
  }

  table td::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: 12px;
  }

  td.actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  td.actions::before {
    margin-bottom: 8px;
  }

  td.actions form,
  td.actions button {
    width: 100%;
  }
}

html.miniapp,
body.miniapp {
  background-attachment: scroll;
}

html.miniapp body {
  margin: 0;
  padding: 0;
}

html.miniapp .container {
  max-width: none;
  width: 100%;
  padding: 0 calc(var(--safe-area-right) + 16px) 0
    calc(var(--safe-area-left) + 16px);
  gap: 24px;
}

html.miniapp .content,
html.miniapp body.with-sidebar .content {
  margin-left: 0;
  padding: calc(var(--safe-area-top) + 24px)
    calc(var(--safe-area-right) + 16px)
    calc(var(--safe-area-bottom) + 88px)
    calc(var(--safe-area-left) + 16px);
}

html.miniapp .bots-view,
html.miniapp .bot-list {
  width: 100%;
}

html.miniapp .bot-item {
  padding: 16px;
  border-radius: 16px;
}

html.miniapp .menu-toggle {
  display: inline-flex;
  top: calc(var(--safe-area-top) + 16px);
  left: calc(var(--safe-area-left) + 16px);
  z-index: 1300;
}

html.miniapp .toggle-container {
  top: calc(var(--safe-area-top) + 16px);
  right: calc(var(--safe-area-right) + 16px);
  z-index: 1300;
}

html.miniapp #sidebar-toggle {
  display: none;
}

html.miniapp .sidebar {
  left: calc(var(--safe-area-left) + 12px);
  right: calc(var(--safe-area-right) + 12px);
  top: calc(var(--safe-area-top) + 72px);
  bottom: calc(var(--safe-area-bottom) + 16px);
  width: auto;
  height: auto;
  max-width: none;
  max-height: calc(100vh - (var(--safe-area-top) + var(--safe-area-bottom)) - 88px);
  padding: 24px 20px 18px;
  overflow-y: auto;
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.2s ease;
  z-index: 1400;
}

html.miniapp .sidebar::before,
html.miniapp .sidebar::after {
  display: none;
}

html.miniapp body.sidebar-open .sidebar {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

html.miniapp body.sidebar-open::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1350;
  backdrop-filter: blur(4px);
}

html.miniapp .sidebar nav,
html.miniapp .sidebar .sidebar-body {
  overflow: visible;
}

html.miniapp .sidebar .sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding-bottom: calc(var(--safe-area-bottom) + 12px);
}

html.miniapp body.sidebar-open .menu-toggle {
  transform: translateY(0);
}

html.miniapp body.sidebar-open .content {
  filter: blur(0);
}

html.miniapp .app-toast-stack {
  top: calc(var(--safe-area-top) + 24px);
  left: calc(var(--safe-area-left) + 16px);
  right: calc(var(--safe-area-right) + 16px);
}

/* Toast notifications & confirm dialogs */
.app-toast-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 3200;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.app-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;
  color: #0f172a;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.22);
  border: 1px solid rgba(148, 163, 184, 0.35);
  transform: translateY(-8px);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.24s ease;
  pointer-events: auto;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.app-toast__icon {
  font-size: 20px;
  line-height: 1;
  margin-top: 2px;
}

.app-toast__content {
  flex: 1;
  display: grid;
  gap: 4px;
}

.app-toast__title {
  font-weight: 600;
  font-size: 14px;
}

.app-toast__message {
  font-size: 13px;
  line-height: 1.4;
}

.app-toast__close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  padding: 2px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.app-toast__close:hover,
.app-toast__close:focus-visible {
  background-color: rgba(15, 23, 42, 0.08);
}

.app-toast--success {
  border-color: rgba(34, 197, 94, 0.35);
  box-shadow: 0 22px 48px rgba(22, 163, 74, 0.2);
}

.app-toast--warning {
  border-color: rgba(250, 204, 21, 0.4);
  box-shadow: 0 22px 48px rgba(202, 138, 4, 0.2);
}

.app-toast--danger {
  border-color: rgba(248, 113, 113, 0.45);
  box-shadow: 0 22px 48px rgba(220, 38, 38, 0.22);
}

.app-dialog-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  z-index: 1290;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.app-dialog-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.app-dialog {
  background: #ffffff;
  color: #0f172a;
  border-radius: 20px;
  padding: 24px;
  width: min(420px, calc(100vw - 48px));
  box-shadow: 0 28px 68px rgba(15, 23, 42, 0.32);
  border: 1px solid rgba(148, 163, 184, 0.28);
  display: grid;
  gap: 18px;
}

.app-dialog__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-dialog__icon {
  font-size: 22px;
  line-height: 1;
  color: #1d4ed8;
}

.app-dialog__title {
  font-size: 17px;
  font-weight: 600;
}

.app-dialog__message {
  font-size: 14px;
  line-height: 1.5;
  color: inherit;
}

.app-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.app-dialog__button {
  min-width: 120px;
  border-radius: 12px;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.app-dialog__button:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.6);
  outline-offset: 2px;
}

.app-dialog__button--ghost {
  background: rgba(15, 23, 42, 0.06);
  color: inherit;
}

.app-dialog__button--ghost:hover {
  background: rgba(15, 23, 42, 0.1);
}

.app-dialog__button--primary {
  background: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.28);
}

.app-dialog__button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 28px rgba(37, 99, 235, 0.32);
}

.app-dialog--danger .app-dialog__icon {
  color: #dc2626;
}

.app-dialog--danger .app-dialog__button--primary {
  background: #dc2626;
  box-shadow: 0 12px 22px rgba(220, 38, 38, 0.28);
}

.app-dialog--warning .app-dialog__icon {
  color: #f59e0b;
}

.app-dialog--warning .app-dialog__button--primary {
  background: #f59e0b;
  box-shadow: 0 12px 22px rgba(217, 119, 6, 0.28);
}

.app-dialog--success .app-dialog__icon {
  color: #22c55e;
}

.app-dialog--success .app-dialog__button--primary {
  background: #22c55e;
  box-shadow: 0 12px 22px rgba(34, 197, 94, 0.28);
}

html[data-theme="dark"] .app-toast {
  background: rgba(30, 41, 59, 0.92);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 28px 54px rgba(15, 23, 42, 0.7);
}

html[data-theme="dark"] .app-toast__close:hover,
html[data-theme="dark"] .app-toast__close:focus-visible {
  background-color: rgba(148, 163, 184, 0.22);
}

html[data-theme="dark"] .app-dialog {
  background: rgba(15, 23, 42, 0.96);
  color: #e2e8f0;
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 28px 68px rgba(2, 6, 23, 0.76);
}

html[data-theme="dark"] .app-dialog__button--ghost {
  background: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .app-dialog__button--ghost:hover {
  background: rgba(148, 163, 184, 0.26);
}

.tab-bar {
  --tab-height: 44px;
  --tab-gap: 10px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 26px 0 18px;
  padding: 0 12px;
}

.tab-bar .tab-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(226, 241, 255, 0.96));
  color: var(--primary-color);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tab-bar .tab-arrow i {
  font-size: 1rem;
}

.tab-bar .tab-arrow:hover,
.tab-bar .tab-arrow:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(59, 130, 246, 0.18);
}

.tab-bar .tab-arrow:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color), transparent 45%);
  outline-offset: 2px;
}

.tab-bar .tab-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.tab-bar.is-scrollable .tab-arrow {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tab-bar .tab-viewport {
  flex: 1;
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.94), rgba(236, 245, 255, 0.94));
  border: 1px solid color-mix(in srgb, var(--border-color), transparent 25%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  scrollbar-width: none;
}

.tab-bar .tab-viewport::-webkit-scrollbar {
  display: none;
}

.tab-bar .tab-track {
  display: flex;
  align-items: center;
  gap: var(--tab-gap);
  padding: 6px 12px;
  height: calc(var(--tab-height) + 8px);
  width: max-content;
  min-width: 100%;
}

.tab-bar .tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--tab-height);
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.24);
  background: rgba(59, 130, 246, 0.1);
  color: var(--text-color);
  font-weight: 600;
  font-size: 0.92rem;
  flex: 1 1 clamp(140px, 20vw, 220px);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tab-bar .tab-button:hover,
.tab-bar .tab-button:focus-visible {
  color: var(--text-color);
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.32);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.16);
}

.tab-bar .tab-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color), transparent 45%);
  outline-offset: 2px;
}

.tab-bar .tab-button.active {
  color: var(--primary-color);
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.38);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.2);
}

html[data-theme="dark"] .tab-bar .tab-arrow {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
  color: rgba(191, 219, 254, 0.92);
  box-shadow: 0 14px 24px rgba(2, 6, 23, 0.6);
}

html[data-theme="dark"] .tab-bar .tab-arrow:hover,
html[data-theme="dark"] .tab-bar .tab-arrow:focus-visible {
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.28);
}

html[data-theme="dark"] .tab-bar .tab-viewport {
  background: linear-gradient(120deg, rgba(17, 24, 39, 0.92), rgba(30, 41, 59, 0.92));
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.5);
}

html[data-theme="dark"] .tab-bar .tab-button {
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(96, 165, 250, 0.45);
  color: rgba(226, 232, 240, 0.88);
}

html[data-theme="dark"] .tab-bar .tab-button:hover,
html[data-theme="dark"] .tab-bar .tab-button:focus-visible {
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.32);
}

html[data-theme="dark"] .tab-bar .tab-button.active {
  background: rgba(129, 140, 248, 0.34);
  border-color: rgba(129, 140, 248, 0.5);
  color: #f8fafc;
  box-shadow: 0 14px 26px rgba(59, 130, 246, 0.35);
}

.tab-bar .tab-button .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
  font-size: 0.75rem;
}

.tab-content {
  display: none;
}

.tab-content.is-active {
  display: contents;
}

.chart-card {
  --chart-bg: rgba(255, 255, 255, 0.92);
  --chart-border: rgba(148, 163, 184, 0.28);
  --chart-shadow: 0 28px 48px rgba(15, 23, 42, 0.12);
  --chart-grid: rgba(148, 163, 184, 0.28);
  --chart-text: #1f2937;
  --chart-subtle: #6b7280;
  --chart-tooltip-bg: rgba(15, 23, 42, 0.92);
  --chart-tooltip-color: #f8fafc;
  --chart-tooltip-border: rgba(15, 23, 42, 0.2);
  --series-messages: #2563eb;
  --series-messages-soft: rgba(37, 99, 235, 0.16);
  --series-comments: #f97316;
  --series-comments-soft: rgba(249, 115, 22, 0.16);
  --series-llm: #10b981;
  --series-llm-soft: rgba(16, 185, 129, 0.16);
  --series-tokens: #ef4444;
  --series-tokens-soft: rgba(239, 68, 68, 0.16);
  margin: 28px auto 0;
  padding: 28px;
  border-radius: 24px;
  background: var(--chart-bg);
  border: 1px solid var(--chart-border);
  box-shadow: var(--chart-shadow);
  position: relative;
  overflow: hidden;
  width: min(100%, 1180px);
  box-sizing: border-box;
}

.chart-card::before {
  content: '';
  position: absolute;
  inset: -130px -80px auto auto;
  height: 240px;
  width: 420px;
  background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.18), transparent 65%);
  pointer-events: none;
}

html[data-theme="dark"] .chart-card {
  --chart-bg: rgba(30, 41, 59, 0.78);
  --chart-border: rgba(148, 163, 184, 0.18);
  --chart-shadow: 0 32px 60px rgba(15, 23, 42, 0.55);
  --chart-grid: rgba(148, 163, 184, 0.25);
  --chart-text: #f8fafc;
  --chart-subtle: #cbd5f5;
  --chart-tooltip-bg: rgba(15, 23, 42, 0.95);
  --chart-tooltip-color: #f3f4f6;
  --chart-tooltip-border: rgba(148, 163, 184, 0.4);
  --series-messages: #93c5fd;
  --series-messages-soft: rgba(147, 197, 253, 0.24);
  --series-comments: #fcd34d;
  --series-comments-soft: rgba(250, 204, 21, 0.26);
  --series-llm: #6ee7b7;
  --series-llm-soft: rgba(110, 231, 183, 0.28);
  --series-tokens: #fca5a5;
  --series-tokens-soft: rgba(252, 165, 165, 0.28);
}

html[data-theme="dark"] .chart-card::before {
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.32), transparent 65%);
}

.chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.chart-header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chart-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--chart-text);
}

.chart-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--chart-subtle);
}

.chart-controls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
  position: relative;
  z-index: 1;
}

.chart-controls label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--chart-subtle);
}

.chart-controls select {
  width: auto;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 6px 36px 6px 12px;
  font-weight: 600;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--chart-text);
  cursor: pointer;
  appearance: none;
}

.chart-controls::after {
  content: '\25BC';
  position: absolute;
  right: 20px;
  font-size: 0.65rem;
  color: var(--chart-subtle);
  pointer-events: none;
  transition: transform 0.2s ease;
}

.chart-controls select:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

.chart-controls:focus-within::after {
  transform: translateY(2px) rotate(180deg);
}

html[data-theme="dark"] .chart-controls {
  background: rgba(17, 24, 39, 0.7);
  border-color: rgba(148, 163, 184, 0.24);
  box-shadow: 0 22px 38px rgba(15, 23, 42, 0.55);
}

html[data-theme="dark"] .chart-controls select {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.4);
}

html[data-theme="dark"] .chart-controls select:focus-visible {
  outline-color: rgba(96, 165, 250, 0.55);
}

.bot-operators-layout,
.bot-members-layout,
.bot-functions-grid {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}

.surface-card,
.bot-operators-card,
.bot-members-card,
.bot-function-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--border-color), transparent 15%);
  border-radius: 24px;
  padding: var(--panel-padding-block, 28px) var(--panel-padding-inline, 32px);
  box-shadow: var(--panel-shadow, 0 20px 40px rgba(15, 23, 42, 0.12));
  overflow: hidden;
}

.surface-card::after,
.bot-operators-card::after,
.bot-members-card::after,
.bot-function-card::after {
  content: '';
  position: absolute;
  inset: auto -140px -160px auto;
  width: 260px;
  height: 260px;
  pointer-events: none;
  background: radial-gradient(circle, var(--panel-glow-after, rgba(37, 99, 235, 0.12)), transparent 70%);
}

.surface-card::before,
.bot-operators-card::before,
.bot-members-card::before,
.bot-function-card::before {
  content: '';
  position: absolute;
  inset: -160px auto auto -160px;
  width: 320px;
  height: 320px;
  pointer-events: none;
  background: radial-gradient(circle, var(--panel-glow-before, rgba(59, 130, 246, 0.12)), transparent 70%);
}

.surface-card > *,
.bot-operators-card > *,
.bot-members-card > *,
.bot-function-card > * {
  position: relative;
  z-index: 1;
}

.bot-operators-header,
.bot-members-header,
.bot-function-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.bot-operators-header h3,
.bot-members-header h3,
.bot-function-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
}

.bot-operators-header p,
.bot-members-header p,
.bot-function-header p {
  margin: 0;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--text-color), transparent 42%);
}

.bot-function-body {
  display: grid;
  gap: 24px;
}

.bot-function-body--split {
  gap: 28px;
}

.function-inline-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 6px 0 2px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-bg), var(--accent-color) 7%);
  border: 1px solid color-mix(in srgb, var(--border-color), var(--accent-color) 20%);
  color: var(--text-color);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.function-inline-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.function-inline-toast[data-tone="warning"] {
  background: color-mix(in srgb, var(--card-bg), #f97316 10%);
  border-color: color-mix(in srgb, var(--border-color), #f97316 35%);
}

.function-inline-toast[data-tone="danger"] {
  background: color-mix(in srgb, var(--card-bg), #ef4444 12%);
  border-color: color-mix(in srgb, var(--border-color), #ef4444 40%);
}

.function-inline-toast[data-tone="success"] {
  background: color-mix(in srgb, var(--card-bg), #22c55e 10%);
  border-color: color-mix(in srgb, var(--border-color), #22c55e 32%);
}

html[data-theme="dark"] .function-inline-toast {
  background: color-mix(in srgb, var(--card-bg), rgba(148, 163, 184, 0.16));
  border-color: color-mix(in srgb, var(--border-color), rgba(148, 163, 184, 0.35));
}

html[data-theme="dark"] .function-inline-toast[data-tone="warning"] {
  background: color-mix(in srgb, var(--card-bg), rgba(249, 115, 22, 0.18));
  border-color: color-mix(in srgb, var(--border-color), rgba(249, 115, 22, 0.4));
}

html[data-theme="dark"] .function-inline-toast[data-tone="danger"] {
  background: color-mix(in srgb, var(--card-bg), rgba(239, 68, 68, 0.2));
  border-color: color-mix(in srgb, var(--border-color), rgba(239, 68, 68, 0.45));
}

html[data-theme="dark"] .function-inline-toast[data-tone="success"] {
  background: color-mix(in srgb, var(--card-bg), rgba(34, 197, 94, 0.18));
  border-color: color-mix(in srgb, var(--border-color), rgba(34, 197, 94, 0.45));
}

.bot-handoff-form.is-busy {
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

@media (min-width: 960px) {
  .bot-function-body--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bot-function-group {
  display: grid;
  gap: 16px;
}

.bot-function-group-header {
  display: grid;
  gap: 6px;
}

.bot-function-group-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
}

.bot-function-group-description {
  margin: 0;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--text-color), transparent 45%);
}

.bot-operator-form,
.bot-function-form {
  display: grid;
  gap: 18px;
}

.bot-operator-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.bot-operator-hint {
  margin: 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--text-color), transparent 55%);
}

.bot-operator-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.bot-operator-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.bot-operator-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bot-operator-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--text-color), transparent 50%);
}

.bot-operator-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-color);
}

.bot-operator-remove {
  display: flex;
  align-items: center;
}

.bot-operator-remove .admin-danger-button {
  padding: 10px 18px;
}

.bot-members-form {
  display: grid;
  gap: 18px;
}

.bot-members-input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.bot-members-input-row .admin-input {
  flex: 1 1 280px;
  min-width: 220px;
}

.bot-members-hint {
  margin: 0;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--text-color), transparent 55%);
}

.bot-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bot-member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.05);
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.bot-member-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bot-member-name {
  font-weight: 600;
  color: var(--text-color);
}

.bot-member-meta {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--text-color), transparent 45%);
}

.bot-member-tag {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.16);
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bot-member-remove {
  display: flex;
  align-items: center;
}

.bot-member-empty {
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed rgba(37, 99, 235, 0.2);
  color: color-mix(in srgb, var(--text-color), transparent 40%);
  text-align: center;
  font-size: 0.95rem;
}

.bot-operator-empty {
  padding: 18px;
  border-radius: 16px;
  background: rgba(148, 163, 184, 0.12);
  color: color-mix(in srgb, var(--text-color), transparent 40%);
  font-size: 0.95rem;
}

.bot-function-controls {
  display: grid;
  gap: 16px;
}

.bot-function-controls .bot-function-form {
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.06);
}

.bot-function-controls .bot-function-form .toggle {
  margin-top: 0;
}

.extended-messages-form {
  display: grid;
  gap: 16px;
}

.extended-messages-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.extended-messages-copy {
  max-width: 560px;
}

.extended-messages-copy p {
  margin: 4px 0 0;
  color: var(--muted-color, #64748b);
  font-size: 0.9rem;
}

.extended-messages-settings {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  gap: 16px;
  background: rgba(148, 163, 184, 0.08);
}

.extended-messages-settings[hidden] {
  display: none;
}

.extended-messages-settings .form-field {
  margin: 0;
}

.extended-messages-settings .field-hint {
  font-size: 0.85rem;
  color: var(--muted-color, #64748b);
}

.extended-messages-note {
  font-size: 0.85rem;
  color: var(--muted-color, #64748b);
  margin: 0;
}

.bot-limit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: end;
}

.bot-limit-form,
.bothunter-form {
  padding: 20px 24px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(148, 163, 184, 0.08);
}

.bot-function-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: flex-end;
}

.bot-function-actions .admin-primary-button,
.bot-function-actions .admin-secondary-button {
  width: auto;
}

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

.bot-function-subgrid .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bot-function-subgrid label {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--text-color), transparent 30%);
}

.bot-field-current {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--text-color), transparent 40%);
}

html[data-theme="dark"] .surface-card,
html[data-theme="dark"] .bot-operators-card,
html[data-theme="dark"] .bot-members-card,
html[data-theme="dark"] .bot-function-card {
  background: rgba(17, 24, 39, 0.92);
  border-color: rgba(96, 165, 250, 0.18);
  box-shadow: var(--panel-shadow-dark, 0 30px 56px rgba(2, 6, 23, 0.65));
}

html[data-theme="dark"] .surface-card::before,
html[data-theme="dark"] .bot-operators-card::before,
html[data-theme="dark"] .bot-members-card::before,
html[data-theme="dark"] .bot-function-card::before {
  background: radial-gradient(circle,
      var(--panel-glow-before-dark,
        color-mix(in srgb, var(--panel-glow-before, rgba(96, 165, 250, 0.32)), transparent 28%)),
      transparent 72%);
}

html[data-theme="dark"] .surface-card::after,
html[data-theme="dark"] .bot-operators-card::after,
html[data-theme="dark"] .bot-members-card::after,
html[data-theme="dark"] .bot-function-card::after {
  background: radial-gradient(circle,
      var(--panel-glow-after-dark,
        color-mix(in srgb, var(--panel-glow-after, rgba(59, 130, 246, 0.28)), transparent 30%)),
      transparent 72%);
}

html[data-theme="dark"] .extended-messages-settings {
  border-color: rgba(96, 165, 250, 0.32);
  background: rgba(30, 41, 59, 0.58);
}

html[data-theme="dark"] .extended-messages-copy p,
html[data-theme="dark"] .extended-messages-settings .field-hint,
html[data-theme="dark"] .extended-messages-note {
  color: color-mix(in srgb, var(--text-color), transparent 48%);
}

html[data-theme="dark"] .bot-operator-item {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(96, 165, 250, 0.22);
}

html[data-theme="dark"] .bot-member-item {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(96, 165, 250, 0.22);
}

html[data-theme="dark"] .bot-operator-empty {
  background: rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.7);
}

html[data-theme="dark"] .bot-member-empty {
  border-color: rgba(96, 165, 250, 0.26);
  color: rgba(226, 232, 240, 0.65);
  background: rgba(15, 23, 42, 0.55);
}

html[data-theme="dark"] .bot-operator-hint {
  color: rgba(191, 219, 254, 0.7);
}

html[data-theme="dark"] .bot-members-hint {
  color: rgba(191, 219, 254, 0.7);
}

html[data-theme="dark"] .bot-member-tag {
  background: rgba(96, 165, 250, 0.24);
  color: #bfdbfe;
}

html[data-theme="dark"] .bot-function-subgrid label {
  color: rgba(226, 232, 240, 0.75);
}

html[data-theme="dark"] .bot-function-controls .bot-function-form {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(37, 99, 235, 0.18);
}

html[data-theme="dark"] .bot-limit-form,
html[data-theme="dark"] .bothunter-form {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(30, 41, 59, 0.7);
}

@media (min-width: 960px) {
  .bot-operators-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bot-members-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bot-functions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bot-functions-grid .bot-function-card:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 680px) {
  .bot-operator-input-row,
  .bot-limit-row {
    grid-template-columns: 1fr;
  }

  .bot-operators-card,
  .bot-members-card,
  .bot-function-card {
    padding: 24px;
  }

  .bot-members-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .bot-operator-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .bot-member-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .bot-function-actions {
    justify-content: flex-start;
  }
}

.chart-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

.chart-metric {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(6px);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  appearance: none;
  -webkit-appearance: none;
}

html[data-theme="dark"] .chart-metric {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.45);
}

.chart-metric:hover:not(.is-muted) {
  transform: translateY(-2px);
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.12);
}

.chart-metric:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.45);
  outline-offset: 3px;
}

.chart-metric.is-muted {
  opacity: 0.6;
  box-shadow: none;
}

.chart-metric.is-muted .chart-metric-value {
  color: var(--chart-subtle);
}

.chart-metric.is-muted .chart-metric-dot {
  box-shadow: none;
  opacity: 0.7;
}

.chart-metric-dot {
  grid-row: 1 / span 2;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.chart-metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chart-subtle);
}

.chart-metric-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--chart-text);
}

.chart-metric[data-series="messages"] .chart-metric-dot {
  background: var(--series-messages);
  box-shadow: 0 0 0 4px var(--series-messages-soft);
}

.chart-metric[data-series="messages"] .chart-metric-value {
  color: var(--series-messages);
}

.chart-metric[data-series="comments"] .chart-metric-dot {
  background: var(--series-comments);
  box-shadow: 0 0 0 4px var(--series-comments-soft);
}

.chart-metric[data-series="comments"] .chart-metric-value {
  color: var(--series-comments);
}

.chart-metric[data-series="llm"] .chart-metric-dot {
  background: var(--series-llm);
  box-shadow: 0 0 0 4px var(--series-llm-soft);
}

.chart-metric[data-series="llm"] .chart-metric-value {
  color: var(--series-llm);
}

.chart-metric[data-series="tokens"] .chart-metric-dot {
  background: var(--series-tokens);
  box-shadow: 0 0 0 4px var(--series-tokens-soft);
}

.chart-metric[data-series="tokens"] .chart-metric-value {
  color: var(--series-tokens);
}

.chart-canvas {
  margin-top: 28px;
  height: 340px;
  position: relative;
  z-index: 1;
}

.chart-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-card.is-empty canvas {
  opacity: 0.35;
}

.chart-card.is-empty .chart-canvas::after {
  content: 'Нет данных для выбранного периода';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chart-subtle);
  font-weight: 500;
  backdrop-filter: blur(1px);
}


@media (max-width: 1024px) {
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .chart-controls {
    align-self: stretch;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .chart-card {
    padding: 22px;
  }

  .chart-canvas {
    height: 300px;
  }

  .chart-controls {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  .chart-card {
    padding: 20px;
  }

  .chart-canvas {
    height: 260px;
  }

  .chart-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .chart-controls label {
    display: none;
  }

  .chart-controls select {
    width: 100%;
  }

  .chart-metrics {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 768px) {
  .bot-actions-panel {
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .bot-right {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .bot-actions-panel {
    width: 100%;
    gap: 12px;
  }

  .bot-actions-panel .icon-button {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    justify-content: center;
  }

  .bot-actions-panel .icon-button i {
    display: none;
  }

  .bot-actions-panel .icon-button::after {
    content: attr(data-label);
    font-size: 0.95rem;
    font-weight: 600;
    pointer-events: none;
  }
}

/* modal for before/after details */
.modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0,0,0,0.4);
}

.modal-content {
  background: var(--card-bg);
  color: var(--text-color);
  margin: 10% auto;
  padding: 20px;
  border: 1px solid var(--border-color);
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
}

.modal-content pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: 4px;
}

.modal .close {
  float: right;
  font-size: 1.5rem;
  cursor: pointer;
}

.status-tooltip {
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 1100;
  pointer-events: none;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--status-tooltip-color);
  background: var(--status-tooltip-bg);
  border: 1px solid var(--status-tooltip-border);
  box-shadow: var(--status-tooltip-shadow);
  white-space: normal;
  text-align: left;
  max-width: min(320px, calc(100vw - 32px));
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transform-origin: bottom center;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.status-tooltip-line + .status-tooltip-line {
  margin-top: 4px;
}

.status-tooltip::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--status-tooltip-bg);
  border-left: 1px solid var(--status-tooltip-border);
  border-top: 1px solid var(--status-tooltip-border);
  transform: rotate(45deg);
  left: calc(50% - 6px);
  bottom: -7px;
}

.status-tooltip[data-placement="bottom"] {
  transform: translateY(-4px) scale(0.98);
  transform-origin: top center;
}

.status-tooltip[data-placement="bottom"]::before {
  bottom: auto;
  top: -7px;
  border-left: none;
  border-top: none;
  border-right: 1px solid var(--status-tooltip-border);
  border-bottom: 1px solid var(--status-tooltip-border);
}

.status-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.status-badge.has-status-tooltip::after {
  content: none;
}



.error-page {
  max-width: 520px;
  margin: 96px auto;
  padding: 48px 36px;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
  text-align: center;
}

.error-page .error-code {
  margin: 0;
  font-size: 4.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--primary-color);
}

.error-page .error-title {
  margin: 12px 0 16px;
  font-size: 1.75rem;
  font-weight: 600;
}

.error-page .error-description {
  margin: 0 auto;
  max-width: 420px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--neutral-color);
}

.error-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.error-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.error-action.primary {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}

.error-action.secondary {
  background: transparent;
  color: var(--text-color);
  border-color: var(--border-color);
}

.error-action:hover,
.error-action:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.error-action.secondary:hover,
.error-action.secondary:focus-visible {
  background: var(--hover-bg);
}

.error-action:active {
  transform: translateY(0);
  box-shadow: none;
}

html[data-theme="dark"] .error-page {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .error-page .error-description {
  color: #cbd5f5;
}

html[data-theme="dark"] .error-action.secondary {
  border-color: rgba(255, 255, 255, 0.16);
}