:root {

  --bg: #0b0f1a;

  --surface: #0f1626;

  --card: #131c2f;

  --muted: #94a3b8;

  --text: #e2e8f0;

  --border: #1f2a40;

  --accent: #22d3ee;

  --accent-strong: #06b6d4;

  --danger: #ef4444;

  --success: #22c55e;

  --warning: #f59e0b;

  --radius-sm: 8px;

  --radius-md: 12px;

  --radius-lg: 16px;

  --space-1: 6px;

  --space-2: 10px;

  --space-3: 14px;

  --space-4: 18px;

  --space-5: 24px;

  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);

  --font: "Inter", system-ui, -apple-system, sans-serif;

}



* { box-sizing: border-box; }



body {

  margin: 0;

  font-family: var(--font);

  background: radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.08), transparent 35%), var(--bg);

  color: var(--text);

}



h1 {

  margin: 0;

  font-size: 24px;

  letter-spacing: 0.5px;

}



h2 {

  margin-top: 0;

  font-size: 18px;

}



.page {

  max-width: 90%;

  margin: 0 auto;

  padding: 24px;

}



.page-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 16px;

}



.toolbar-actions {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}



.hidden { display: none !important; }



.center-card {

  max-width: 420px;

  margin: 80px auto;

  text-align: center;

}



header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 16px;

  gap: 12px;

}



.topbar {

  position: sticky;

  top: 0;

  z-index: 10;

  background: rgba(8, 12, 22, 0.96);

  backdrop-filter: blur(8px);

  border-bottom: 1px solid var(--border);

}



.topbar-inner {

  width: 100%;

  padding: 16px 20px;

  display: flex;

  align-items: center;

  gap: 16px;

}



.topbar-status {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  background: #0b1220;
  color: var(--muted);
}


.topbar-status[data-state="auth"] {

  background: rgba(34, 211, 238, 0.12);

  color: var(--text);

  border-color: rgba(34, 211, 238, 0.4);

}



.brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--text);

  text-decoration: none;

  font-weight: 700;

  letter-spacing: 0.04em;

}



.brand-mark {

  width: 34px;

  height: 34px;

  border-radius: 12px;

  background: linear-gradient(135deg, var(--accent), var(--accent-strong));

  display: grid;

  place-items: center;

  color: #07121c;

  font-weight: 800;

  font-size: 14px;

  box-shadow: 0 8px 26px rgba(34, 211, 238, 0.25);

}



.brand-text {
  font-size: 16px;
}

.topbar-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.debug-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

.debug-toggle input {
  accent-color: var(--accent);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.lang-switch select {
  background: #0b1220;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
}

.lang-label {
  white-space: nowrap;
}

.topbar-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.title-text {

  font-size: 26px;

  font-weight: 600;

}



.title-subtext {

  font-size: 12px;

  color: var(--muted);

  margin-top: 2px;

}



.topbar-actions {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}



.topbar-nav {

  display: flex;

  gap: 12px;

  align-items: center;

  flex-wrap: wrap;

  justify-content: center;

  flex: 1;

}



.nav-link {

  color: var(--muted);

  text-decoration: none;

  padding: 6px 10px;

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

  border: 1px solid transparent;

}



.nav-link:hover {

  color: var(--text);

  border-color: var(--border);

  background: rgba(15, 23, 42, 0.6);

}



.nav-link.is-active {

  color: var(--text);

  border-color: var(--border);

  background: rgba(34, 211, 238, 0.12);

}



.toast {

  position: fixed;

  top: 18px;

  right: 18px;

  background: var(--card);

  color: var(--text);

  border: 1px solid var(--border);

  padding: 10px 14px;

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

  box-shadow: var(--shadow);

  font-size: 14px;

  z-index: 1000;

  opacity: 0;

  transform: translateY(-6px);

  pointer-events: none;

  transition: opacity 0.2s ease, transform 0.2s ease;

}



.toast.is-visible {

  opacity: 1;

  transform: translateY(0);

}



.page-hero {

  padding: 12px 0 8px;

  margin-bottom: 8px;

}



.hero-text {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.eyebrow {

  margin: 0;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--muted);

}



.hero-row {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 16px;

  flex-wrap: wrap;

}



.hero-heading {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.page-title {

  margin: 0;

  font-size: 28px;

  letter-spacing: 0.2px;

}



.hero-actions {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  align-items: center;

}



.panel {

  background: var(--card);

  border: 1px solid var(--border);

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

  padding: 20px;

  margin-bottom: 24px;

  box-shadow: var(--shadow);

}



.panel-header {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-bottom: 16px;

}



.panel-subtitle {

  color: var(--muted);

  margin: 0;

  font-size: 14px;

}



.card-grid {

  display: grid;

  gap: 20px;

}



.card {

  background: var(--card);

  border: 1px solid var(--border);

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

  padding: 16px;

  box-shadow: var(--shadow);

  margin-bottom: 16px;

}



.card-compact {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding: 12px 16px;

}



.card-compact h3 {

  margin: 0;

  font-size: 16px;

}



.card-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

}



.account-card {

  background: var(--card);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 18px;

  padding: 16px 18px;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);

}



.account-card .card-header {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.status {

  padding: 6px 12px;

  border-radius: 999px;

  background: #1e293b;

  color: var(--muted);

  font-size: 14px;

}



.card-header.minimal .card-title-row {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.card-head-row {

  display: grid;

  grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr) auto;

  gap: 16px;

  align-items: center;

}



.head-left {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.subline {

  font-size: 12px;

  color: var(--muted);

}



.head-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 18px;

  font-size: 12px;

  color: var(--muted);

}



.head-actions {

  justify-self: end;

}



.card-header.minimal .badge {

  font-size: 11px;

}



.card-title {

  margin: 0;

  font-size: 18px;

  font-weight: 700;

}



.card-meta.minimal {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 4px 18px;

  color: var(--muted);

  font-size: 12px;

}



.card-row {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  padding-top: 14px;

}



.auth-inline {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  width: 100%;

}



.auth-field label {

  display: block;

  margin-bottom: 4px;

}



.input-group {

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 8px;

  align-items: center;

}



.auth-actions {

  display: flex;

  flex-direction: column;

  gap: 8px;

  min-width: 120px;

}



.card-meta.minimal span {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.card-section.details {

  margin-top: 8px;

  padding: 8px 0 4px 0;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  background: transparent;

  border-radius: 0;

}



.details-columns {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

}



.section-title {

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--muted);

  margin-bottom: 10px;

}



.detail-list {

  display: grid;

  gap: 6px;

}



.detail-row {

  display: grid;

  grid-template-columns: 120px 1fr;

  gap: 8px;

  font-size: 13px;

}



.detail-label {

  color: var(--muted);

  font-size: 12px;

}



.detail-value {

  color: var(--text);

  font-size: 13px;

}



.detail-value.error {

  color: #fca5a5;

}



.details-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  width: 100%;

}



.card-actions {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-top: 10px;

  align-items: stretch;

}



.action-block {

  background: #0f1626;

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 14px;

  padding: 10px 12px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.compact-rows {

  display: grid;

  gap: 10px;

}



.compact-row {

  display: grid;

  grid-template-columns: 120px minmax(0, 1fr) auto;

  gap: 10px;

  align-items: center;

}



.compact-row input {

  width: 100%;

}



.row-hint {

  font-size: 12px;

  color: var(--muted);

  white-space: nowrap;

}



.input-search {

  background: #0b1220;

  border: 1px solid var(--border);

  color: var(--text);

  border-radius: 10px;

  padding: 8px 12px;

  font-size: 13px;

  min-width: 240px;

  height: 36px;

}



.card-error summary {

  cursor: pointer;

  color: var(--warning);

  font-size: 13px;

}



.card-error-body {

  margin-top: 6px;

  padding: 10px;

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

  background: #111827;

  color: #fca5a5;

  font-size: 13px;

  border: 1px solid rgba(239, 68, 68, 0.2);

}



.card-body {

  margin-top: 16px;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

}



.card-section {

  background: #0f1626;

  border: 1px solid var(--border);

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

  padding: 14px;

}



.card-section h3 {

  margin: 0 0 10px 0;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--muted);

}



.form-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

}



.form-bot {

  grid-template-columns: 2fr auto;

  align-items: center;

}



.form-bot .form-actions {

  grid-column: 1 / -1;

  justify-content: flex-end;

  margin-top: 0;

}



.field-toggle {

  align-self: center;

}



form {

  display: grid;

  gap: 10px;

}



.field {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



label {

  font-size: 13px;

  color: var(--muted);

}



input, select {

  background: #0b1220;

  border: 1px solid var(--border);

  color: var(--text);

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

  padding: 8px 10px;

  font-size: 14px;

  height: 36px;

}



textarea {

  padding: 10px 12px;

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

  border: 1px solid var(--border);

  background: #0b1220;

  color: var(--text);

  resize: vertical;

}



input:focus, select:focus, button:focus {

  outline: 2px solid rgba(34, 211, 238, 0.4);

  outline-offset: 2px;

}



input[disabled], select[disabled] {

  opacity: 0.6;

}



.field-hint {

  font-size: 12px;

  color: var(--muted);

}



.field-error {

  font-size: 12px;

  color: #fca5a5;

  min-height: 14px;

}



.form-actions {

  grid-column: 1 / -1;

  display: flex;

  justify-content: flex-end;

  margin-top: 4px;

}



button {

  border: 1px solid transparent;

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

  padding: 10px 14px;

  font-size: 14px;

  cursor: pointer;

  transition: transform 0.15s ease, filter 0.15s ease;

  background: linear-gradient(120deg, var(--accent), var(--accent-strong));

  color: #07121c;

}



button:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}



button:hover:not(:disabled) {

  filter: brightness(1.05);

  transform: translateY(-1px);

}



.btn {

  border: 1px solid transparent;

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

  padding: 8px 12px;

  font-size: 13px;

  height: 36px;

  cursor: pointer;

  transition: transform 0.15s ease, filter 0.15s ease;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  text-decoration: none;

}



.btn:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}



.btn-primary {

  background: linear-gradient(120deg, #2dd4ff, #0ea5e9);

  color: #05151f;

}



.btn-secondary {

  background: #101a2c;

  color: var(--text);

  border-color: var(--border);

}



.btn-ghost {

  background: transparent;

  color: var(--muted);

  border-color: var(--border);

}



.btn-subtle {

  background: rgba(226, 232, 240, 0.08);

  color: var(--text);

  border: 1px solid rgba(226, 232, 240, 0.15);

}



.btn.small {

  padding: 8px 10px;

  height: 32px;

  font-size: 12px;

}



.btn-danger {

  background: rgba(239, 68, 68, 0.15);

  color: #fecaca;

  border-color: rgba(239, 68, 68, 0.3);

}



.btn:hover:not(:disabled) {

  filter: brightness(1.05);

  transform: translateY(-1px);

}



.btn.is-hidden {

  display: none;

}



.list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.list.empty {

  color: var(--muted);

}



.list-item {

  border: 1px solid var(--border);

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

  padding: 12px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: #0b1220;

  gap: 12px;

}



.title {

  font-weight: 600;

}



.muted {

  color: var(--muted);

  font-size: 13px;

}



.actions {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}



.inline {

  flex-direction: row;

  align-items: center;

}



.inline-form {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-bottom: 10px;

}



a.link {

  color: var(--accent);

  text-decoration: none;

}



a.link:hover {

  text-decoration: underline;

}



.badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 4px 8px;

  border-radius: 999px;

  font-size: 12px;

  background: #0f1a2d;

  border: 1px solid rgba(31, 42, 64, 0.8);

  text-transform: none;

  letter-spacing: 0.01em;

}



.badge::before {

  content: "";

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--muted);

}



.status-active { color: #86efac; }

.status-active::before { background: #22c55e; }



.status-auth_required { color: #fcd34d; }

.status-auth_required::before { background: #f59e0b; }



.status-disabled { color: #cbd5f5; }

.status-disabled::before { background: #94a3b8; }



.status-error { color: #fecaca; }

.status-error::before { background: #ef4444; }



.status-banned { color: #fecaca; }

.status-banned::before { background: #ef4444; }



.status-draft { color: #93c5fd; }

.status-draft::before { background: #3b82f6; }



.auth-steps {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.auth-step {

  display: flex;

  flex-direction: column;

  gap: 8px;

  padding: 10px;

  border: 1px solid var(--border);

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

  background: #0b1220;

}



.auth-step.is-hidden {

  display: none;

}



.step-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 13px;

  color: var(--muted);

}



.step-actions {

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 8px;

  align-items: center;

}



.step-actions input {

  width: 100%;

}



.step-feedback {

  font-size: 12px;

  color: var(--muted);

  min-height: 14px;

}



.step-hint {

  font-size: 12px;

  color: var(--muted);

}



.modal {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.6);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 20;

}



.modal-content {

  background: var(--card);

  padding: 20px;

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

  border: 1px solid var(--border);

  min-width: 260px;

  box-shadow: var(--shadow);

  text-align: center;

}



.modal.hidden {

  display: none;

}



.switch-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 10px;

}



.switch {

  position: relative;

  display: inline-block;

  width: 48px;

  height: 24px;

}



.switch input { opacity: 0; width: 0; height: 0; }



.slider {

  position: absolute;

  cursor: pointer;

  top: 0; left: 0; right: 0; bottom: 0;

  background: #374151;

  transition: .2s;

  border-radius: 34px;

}



.slider:before {

  position: absolute;

  content: "";

  height: 18px;

  width: 18px;

  left: 3px;

  bottom: 3px;

  background-color: white;

  transition: .2s;

  border-radius: 50%;

}



.switch input:checked + .slider {

  background: linear-gradient(120deg, var(--accent), var(--accent-strong));

}



.switch input:checked + .slider:before {

  transform: translateX(24px);

}



.toggle {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  cursor: pointer;

  user-select: none;

}



.toggle input {

  position: absolute;

  opacity: 0;

  width: 0;

  height: 0;

}



.toggle-track {

  position: relative;

  width: 46px;

  height: 26px;

  background: #1f2937;

  border-radius: 999px;

  border: 1px solid var(--border);

  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

}



.toggle-track::after {

  content: "";

  position: absolute;

  top: 3px;

  left: 3px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: #e2e8f0;

  transition: transform 0.2s ease, background 0.2s ease;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

}



.toggle input:checked + .toggle-track {

  background: linear-gradient(120deg, var(--accent), var(--accent-strong));

  border-color: transparent;

  box-shadow: 0 6px 18px rgba(34, 211, 238, 0.25);

}



.toggle input:checked + .toggle-track::after {

  transform: translateX(20px);

  background: #07121c;

}



.toggle input:focus-visible + .toggle-track {

  outline: 2px solid rgba(34, 211, 238, 0.5);

  outline-offset: 3px;

}



.toggle-label {

  font-size: 13px;

  color: var(--muted);

}



.is-loading {

  position: relative;

  color: transparent !important;

  pointer-events: none;

}



.is-loading::after {

  content: "";

  position: absolute;

  inset: 0;

  margin: auto;

  width: 16px;

  height: 16px;

  border: 2px solid rgba(255, 255, 255, 0.25);

  border-top-color: var(--text);

  border-radius: 50%;

  animation: spin 0.8s linear infinite;

}



.empty-state {

  border: 1px dashed var(--border);

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

  padding: 32px;

  text-align: center;

  color: var(--muted);

}



@keyframes spin {

  to { transform: rotate(360deg); }

}



@media (max-width: 900px) {

  .card-body {

    grid-template-columns: 1fr;

  }



  .form-grid {

    grid-template-columns: 1fr;

  }



  .card-meta.minimal {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .card-row {

    flex-direction: column;

  }



  .card-head-row {

    grid-template-columns: 1fr;

  }



  .head-actions {

    justify-self: start;

  }



  .details-columns {

    grid-template-columns: 1fr;

  }



  .card-actions {

    grid-template-columns: 1fr;

  }



  .compact-row {

    grid-template-columns: 1fr;

    align-items: stretch;

  }



  .details-grid {

    grid-template-columns: 1fr;

  }



  .auth-inline {

    grid-template-columns: 1fr;

  }



  .page-toolbar {

    flex-direction: column;

    align-items: stretch;

  }



  .toolbar-actions {

    width: 100%;

    justify-content: flex-start;

  }

}



@media (max-width: 600px) {

  .topbar-inner {

    flex-direction: column;

    align-items: flex-start;

  }



  .topbar-status {

    margin-left: 0;

  }



  .card-meta.minimal {

    grid-template-columns: 1fr;

  }



  .step-actions {

    grid-template-columns: 1fr;

  }



  .list-item {

    flex-direction: column;

    align-items: flex-start;

  }



}



/* Channels table tweaks */

.table-wrapper {

  overflow-x: auto;

  scrollbar-color: #2b3c55 transparent;

}



.data-table {

  min-width: 1200px;

  width: 100%;

}



.data-table th,
.data-table td {
  white-space: nowrap;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  border-right: 1px solid rgba(148, 163, 184, 0.08);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-3 {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

}

.card-stat {

  background: #0f1626;

  border: 1px solid var(--border);

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

  padding: 12px;

  display: flex;

  flex-direction: column;

  gap: 4px;

}

.card-stat h3,
.card-stat p {

  margin: 0;

  line-height: 1.25;

}

@media (max-width: 900px) {

  .grid-3 {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}

@media (max-width: 600px) {

  .grid-3 {

    grid-template-columns: 1fr;

  }

}

.card-actions.timeline-actions {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

  margin-top: 0;

  flex-wrap: nowrap;

}

.card-actions.timeline-actions select {

  height: 32px;

  font-size: 12px;

  padding: 6px 8px;

}

.data-table th.actions-cell,
.data-table td.actions-cell {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

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

.actions-group .btn {
  background: rgba(8, 12, 22, 0.35);
  border-color: rgba(148, 163, 184, 0.2);
  padding: 10px 14px;
  height: 40px;
  font-size: 15px;
}

.actions-group .btn:hover:not(:disabled) {
  background: rgba(8, 12, 22, 0.6);
}


.data-table tbody tr:hover {

  background: rgba(34, 211, 238, 0.06);

}



.pill.muted {

  opacity: 0.7;

}



.modal .pill-row {

  display: flex;

  gap: 8px;

  align-items: center;

  margin-bottom: 12px;

  flex-wrap: wrap;

}



.modal .modal-close.inside {

  position: absolute;

  top: 8px;

  right: 10px;

  background: transparent;

  color: #e5e7eb;

  border: none;

  font-size: 18px;

  width: 28px;

  height: 28px;

  border-radius: 14px;

  cursor: pointer;

  transition: background 0.15s ease, color 0.15s ease;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.modal .modal-close.inside:hover {

  background: rgba(255, 255, 255, 0.08);

}



.toggle-inline {

  display: flex;

  align-items: center;

  gap: 6px;

}



.toggle-inline input[type="checkbox"] {

  width: 18px;

  height: 18px;

  accent-color: #0ea5e9;

}



.modal {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 50;

}



.modal .modal-content {

  background: #0b1220;

  border: 1px solid rgba(148, 163, 184, 0.2);

  border-radius: 12px;

  position: relative;

}



.filters {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-top: 12px;

}



.filters input[type="text"],

.filters select {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(148, 163, 184, 0.3);

  border-radius: 8px;

  padding: 8px 10px;

  color: #e5e7eb;

}



.toolbar {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  align-items: center;

  margin-top: 10px;

}

.toolbar.right {

  justify-content: flex-end;

}



.pagination {

  display: flex;

  gap: 8px;

  align-items: center;

  margin-top: 10px;

}

.pagination.right {

  justify-content: flex-end;

}



.add-block {

  margin: 12px 0;

}



.filters-block {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin: 12px 0;

}



.filters-block input[type="text"],

.filters-block select {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(148, 163, 184, 0.3);

  border-radius: 8px;

  padding: 8px 10px;

  color: #e5e7eb;

  min-width: 160px;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

}



.filters-block select:focus,

.filters-block input[type="text"]:focus {

  outline: none;

  border-color: #22d3ee;

  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15);

}



.filters-block select option {

  background-color: #0b1220;

  color: #e5e7eb;

  padding: 6px 8px;

}



.wide-card {

  max-width: 90vw;

  width: 100%;

}



.add-card {

  margin: 12px 0;

  padding: 16px;

  border: 1px solid rgba(148, 163, 184, 0.2);

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.02);

  width: 420px;

  max-width: 90vw;

}



.add-card.hidden {

  display: none;

}



.card-error-body.is-muted {

  color: #8c909c;

  background: #f5f6f8;

}



.stats-connection .section-hint {

  color: #6a6f7c;

  font-size: 14px;

  margin: 0 0 8px 0;

}



.stats-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  align-items: flex-end;

}



.stats-grid .field.inline {

  flex: 1 1 180px;

}



.toggle-row {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 6px 0;

}



.stats-actions {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-top: 8px;

}



.badge.stats-status {

  text-transform: uppercase;

  letter-spacing: 0.02em;

}



.badge.stats-status.status-ok {

  background: #e9f7ef;

  color: #0f8a2a;

}



.badge.stats-status.status-needs_import,

.badge.stats-status.status-needs_relogin {

  background: #fff4e5;

  color: #b46b00;

}



.badge.stats-status.status-error {

  background: #ffe9e9;

  color: #b00020;

}