:root {
  --font-size: 14px;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --radius: 0.5rem;
}

/* Light theme colors (AppScale UI, adapted for Serparium).
   Scoped so dark mode can fully override via theme-dark.css. */
:root:not([data-theme='dark']) {
  --background: #f5f7fa;
  --background-secondary: #ffffff;
  --background-tertiary: #f3f4f6;

  --foreground: #111827;
  --foreground-secondary: #374151;
  --foreground-muted: #6b7280;

  --border: #e5e7eb;
  --border-hover: #d1d5db;

  /* Status Colors */
  --success: #16a34a;
  --success-light: #22c55e;
  --info: #2563eb;
  --info-light: #3b82f6;
  --danger: #dc2626;
  --danger-light: #ef4444;
  --warning: #d97706;
  --warning-dark: #b45309;
  --purple: #7c3aed;

  /* Component Colors */
  --card: #ffffff;
  --card-foreground: #111827;
  --popover: #ffffff;
  --popover-foreground: #111827;
  --primary: var(--success);
  --primary-foreground: #ffffff;
  --secondary: #f3f4f6;
  --secondary-foreground: #111827;
  --muted: #f3f4f6;
  --muted-foreground: #6b7280;
  --accent: var(--info-light);
  --accent-foreground: #ffffff;
  --destructive: var(--danger);
  --destructive-foreground: #ffffff;
  --input: #ffffff;
  --input-background: #ffffff;
  --ring: var(--info-light);

  /* Charts */
  --chart-1: var(--info-light);
  --chart-2: var(--success);
  --chart-3: var(--warning);
  --chart-4: var(--purple);
  --chart-5: var(--danger-light);

  /* Sidebar */
  --sidebar: #ffffff;
  --sidebar-foreground: #111827;
  --sidebar-primary: var(--info-light);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f3f4f6;
  --sidebar-accent-foreground: #111827;
  --sidebar-border: #e5e7eb;

  /* Switch */
  --switch-background: #d1d5db;

  /* Keyword tracker specific surfaces */
  --kt-card-header-bg: #ffffff;
  --kt-card-border: var(--border);
  --kt-snapshot-surface: #ffffff;
  --kt-row-bg: #ffffff;
  --kt-row-hover: #ffffff;
  --kt-row-shared: #ffffff;
  --kt-row-shared-hover: #ffffff;
  --kt-row-selected-bg: #ffffff;
  --kt-row-selected-border: #d1d5db;
  --kt-snapshot-pos-bg: #ffffff;
  --kt-domain-color: #2563eb;
  --kt-leader-card-bg: #ffffff;
  --kt-leader-card-border: #e5e7eb;
  --kt-leader-bg: #ffffff;
  --kt-tag-add-bg: #3b82f6;
  --kt-tag-add-hover: #2563eb;
  --kt-color-swatch-border: rgba(0, 0, 0, 0.12);
  --kt-divider: rgba(17, 24, 39, 0.08);
}

/* Allow Tailwind responsive utilities to override legacy .hidden !important */
@media (min-width: 40rem) {
  .sm\:inline {
    display: inline !important;
  }
  .sm\:inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 48rem) {
  .md\:flex {
    display: flex !important;
  }
  .md\:block {
    display: block !important;
  }
  .md\:inline-flex {
    display: inline-flex !important;
  }
  .md\:hidden {
    display: none !important;
  }
}

/* Period controls: prevent overlap when "custom period" expands the header */
#ktHeaderActions {
  flex-wrap: wrap;
  row-gap: 8px;
}

#ktPeriodControls {
  flex-wrap: wrap;
}

#ktCustomPeriod {
  flex-wrap: nowrap;
}

/* Scoped utility helpers for keyword tracker layout (Tailwind-like) */
#ktApp .flex {
  display: flex;
}
#ktApp .inline-flex {
  display: inline-flex;
}
#ktApp .grid {
  display: grid;
}
#ktApp .items-center {
  align-items: center;
}
#ktApp .items-start {
  align-items: flex-start;
}
#ktApp .justify-between {
  justify-content: space-between;
}
#ktApp .justify-end {
  justify-content: flex-end;
}
#ktApp .gap-1 {
  gap: 4px;
}
#ktApp .gap-2 {
  gap: 8px;
}
#ktApp .gap-3 {
  gap: 12px;
}
#ktApp .gap-4 {
  gap: 16px;
}
#ktApp .flex-wrap {
  flex-wrap: wrap;
}
#ktApp .min-w-0 {
  min-width: 0;
}
#ktApp .flex-1 {
  flex: 1 1 0%;
}
#ktApp .flex-shrink-0 {
  flex-shrink: 0;
}
#ktApp .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#ktApp .w-full {
  width: 100%;
}
#ktApp .rounded {
  border-radius: 6px;
}
#ktApp .rounded-lg {
  border-radius: 12px;
}
#ktApp .rounded-full {
  border-radius: 9999px;
}
#ktApp .whitespace-nowrap {
  white-space: nowrap;
}
#ktApp .relative {
  position: relative;
}
#ktApp .absolute {
  position: absolute;
}
#ktApp .z-50 {
  z-index: 50;
}
#ktApp .mt-2 {
  margin-top: 8px;
}
#ktApp .max-h-64 {
  max-height: 16rem;
}
#ktApp .overflow-auto {
  overflow: auto;
}
#ktApp .shadow-lg {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
#ktApp .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
  #ktApp .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  #ktApp .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}

/* Keep Serparium sidebar/header readable with the light palette */
.main-wrapper,
.main-content {
  background: transparent;
}

#ktApp {
  padding: 16px;
  display: flex !important;
  flex-direction: column;
  gap: 18px;
}

#ktHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 8px;
  margin-bottom: 12px;
}

#ktHeaderRow h1 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

#ktHeaderActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 10px;
  white-space: normal;
}

#ktHeaderActions > #ktPeriodControls {
  order: 1;
}

#ktHeaderActions > #ktToggleAddForm {
  order: 2;
}

#ktHeaderActions .text-xs {
  font-size: 11px;
}

#ktAddFormCard {
  margin-top: 16px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

#ktAddFormCard h3 {
  font-size: 14px;
  line-height: 1.2;
}

#ktAddFormCard label {
  font-size: 12px;
  line-height: 1.2;
}

#ktAddFormCard input,
#ktAddFormCard select {
  font-size: 12px !important;
  height: 32px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

#ktAddQueryBtn {
  height: 32px !important;
  font-size: 12px !important;
}

/* Header badge + CTA buttons */
.kt-header-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--info);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
}

.kt-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 8px 14px;
  height: 32px;
  border-radius: 8px;
  background: var(--info);
  color: #fff;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.kt-cta-btn:hover {
  background: var(--info-light);
}

.kt-cta-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.kt-cta-btn--sm {
  padding: 6px 12px;
  font-size: 13px;
}

.kt-usage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  row-gap: 8px;
  margin: 16px 0 20px;
}

#ktQueriesCard {
  margin-top: 16px;
}

#ktLeadersCard {
  margin-top: 24px;
}

#ktSnapshotsCard {
  margin-top: 24px;
}

#ktQueriesList {
  display: flex;
  flex-direction: column;
}

.kt-query-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border);
}

#ktQueriesList .kt-query-row:last-child {
  border-bottom: none;
}

.kt-query-row:hover {
  background: var(--background-tertiary);
}

.kt-query-row--selected {
  background: rgba(37, 99, 235, 0.1);
}

.kt-query-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.kt-query-info {
  min-width: 0;
}

.kt-query-count {
  font-size: 12px;
  color: var(--foreground-muted);
  white-space: nowrap;
}

.kt-query-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.kt-query-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}

.kt-leaders-grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.kt-usage-pill {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.2;
}

#ktQueriesCard > div:first-child,
#ktLeadersCard > div:first-child,
#ktLeadersCard > div:last-child {
  background: var(--kt-card-header-bg) !important;
}

/* Custom period inputs */
#ktCustomPeriod {
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  position: static;
  white-space: nowrap;
}

#ktPeriodControls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  white-space: normal;
}

@media (max-width: 900px) {
  #ktPeriodControls {
    flex-wrap: wrap;
  }
  #ktHeaderRow {
    gap: 12px;
  }
  #ktHeaderActions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 1024px) {
  #ktHeaderRow {
    align-items: center;
    flex-wrap: nowrap;
  }

  #ktHeaderActions {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }

  #ktHeaderActions > #ktToggleAddForm {
    order: 2;
    margin-left: 0;
  }

  #ktHeaderActions > #ktPeriodControls {
    order: 1;
    width: auto;
    flex: 0 1 auto;
    justify-content: flex-end;
  }

  #ktUsageRow {
    margin-top: 6px !important;
  }
}

@media (min-width: 1024px) {
  #ktHeaderRow {
    flex-wrap: nowrap;
  }
}

.kt-period-input {
  width: 96px;
  min-width: 96px;
}

#ktPeriodPreset,
#ktPeriodPresetMobile,
#ktCustomPeriod input {
  height: 26px;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.2;
  min-width: 92px;
}

#ktCustomPeriod.hidden {
  display: none !important;
}

#ktCustomPeriod input {
  width: 96px;
}

#ktCustomPeriodMobile {
  margin-top: 6px;
  max-width: 440px;
  align-items: center;
  gap: 8px;
}

.kt-period-input-mobile {
  width: calc(50% - 10px);
  min-width: 0;
}

#ktSnapshotsWrap > .p-4 {
  padding: 12px !important;
}

/* Snapshot cards: keep compact like AppScale */
.kt-snapshot-results {
  max-height: 480px;
  overflow-y: auto;
  background: var(--kt-snapshot-surface, var(--background-secondary));
  /* Soften row separators inside snapshot cards (reduces "too many borders" feeling). */
  --border: var(--kt-divider, var(--kt-card-border, var(--border)));
  /* AffScale: rows are flush to the card edges (no extra inner frame). */
  padding: 0;
}

.kt-snapshots-header {
  padding-top: 6px;
  padding-bottom: 6px;
}

.kt-snapshots-header h3 {
  font-size: 16px;
  font-weight: 600;
}

#ktSnapshotsCard .kt-snapshot-meta {
  display: none !important;
}

.kt-snapshot-card-header {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 13px;
}

.kt-snapshot-card {
  /* Match AffScale proportions: keep cards from getting too wide on large screens. */
  width: clamp(300px, 24vw, 380px);
  min-width: 300px;
  border-color: var(--kt-card-border, var(--border)) !important;
}

#ktSnapshotsList {
  display: flex;
  gap: 16px;
}

.kt-snapshot-row {
  display: flex;
  align-items: flex-start;
  gap: 12px !important;
  background: var(--kt-row-bg, transparent);
  /* Compact like AffScale */
  padding: 8px 12px !important;
  position: relative;
  border: 0;
  box-shadow: inset 0 0 0 1px transparent;
  /* Rows in AffScale are rectangular; keep rounding only on the card. */
  border-radius: 0;
}

.kt-snapshot-row:hover {
  background: var(--kt-row-hover, #ffffff);
}

.kt-snapshot-row--shared {
  background: var(--kt-row-shared, #ffffff);
  box-shadow: inset 3px 0 0 #e5e7eb;
}

.kt-snapshot-row--shared:hover {
  background: var(--kt-row-shared-hover, #ffffff);
}

.kt-snapshot-row--selected {
  background: var(--kt-row-selected-bg, #ffffff) !important;
  position: relative;
  z-index: 1;
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--kt-row-selected-border, #d1d5db),
    inset 3px 0 0 var(--kt-row-selected-border, #d1d5db);
}

.kt-snapshot-row--leader {
  background: var(--kt-leader-bg, #ffffff) !important;
  position: relative;
  z-index: 1;
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--kt-leader-color, var(--kt-row-selected-border)),
    inset 3px 0 0 var(--kt-leader-color, var(--kt-row-selected-border));
}

.kt-snapshot-pos {
  width: 28px;
  height: 28px;
  background: var(--kt-snapshot-pos-bg, var(--background-tertiary));
  border: 0;
  font-weight: 600;
  margin-top: 1px;
  color: var(--foreground);
}

.kt-snapshot-domain {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.15;
  color: var(--kt-domain-color, var(--info-light));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kt-snapshot-domain:hover {
  color: var(--info-light);
  text-decoration: underline;
}

.kt-snapshot-title {
  color: var(--foreground-muted);
  font-size: 12px;
  line-height: 1.2;
  margin: 1px 0 0 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kt-snapshot-snippet {
  color: var(--foreground-secondary);
  font-size: 11px;
  line-height: 1.2;
  margin: 1px 0 0 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kt-snapshot-canonical {
  color: var(--info-light);
  font-size: 12px;
  line-height: 1.2;
  margin: 2px 0 0 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kt-snapshot-title.truncate,
.kt-snapshot-snippet.truncate {
  white-space: nowrap;
}

/* Ensure snapshot borders stay light */
#ktSnapshotsCard,
#ktSnapshotsCard * {
  border-color: var(--kt-card-border, var(--border));
}

#ktSnapshotsCard .kt-snapshot-results,
#ktSnapshotsCard .kt-snapshot-results > div {
  border-color: var(--kt-card-border);
}

.kt-snapshot-card {
  border-color: var(--kt-card-border);
}

.kt-snapshot-card-header {
  background: var(--kt-card-header-bg) !important;
  border-color: var(--kt-card-border) !important;
}

#ktSnapshotsCard [data-kt-result='1'] {
  border-left: 0;
}

#ktLeadersBody {
  padding: 16px 20px;
}

.kt-leader-card {
  border-color: var(--kt-leader-card-border) !important;
  background: var(--kt-leader-card-bg) !important;
  border-radius: 12px;
  width: 200px;
  min-width: 200px;
}

.kt-leader-card--idle:hover {
  border-color: var(--border-hover) !important;
}

.kt-leader-card--selected {
  border-color: transparent !important;
  background: var(--kt-leader-bg, var(--kt-leader-card-bg)) !important;
  box-shadow: inset 0 0 0 2px var(--kt-leader-color, var(--kt-row-selected-border)) !important;
}

/* Chain merge UI (leaders) */
.kt-chain-merge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--background-secondary);
  color: var(--foreground);
  font-size: 12px;
  line-height: 1.1;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.kt-chain-merge-btn:hover:not(:disabled) {
  background: var(--background-tertiary);
  border-color: var(--border-hover);
}

.kt-chain-merge-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kt-chain-merge-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  padding: 8px;
  z-index: 50;
}

.kt-chain-merge-title {
  font-size: 11px;
  color: var(--foreground-muted);
  padding: 2px 4px 6px;
}

.kt-chain-domains {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--foreground-secondary);
  max-height: 72px;
  overflow-y: auto;
}

.kt-chain-domain {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  line-height: 1.35;
  padding: 1px 0;
}

.kt-chain-domain-name {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kt-chain-domain-days {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--foreground-muted);
  font-size: 10px;
}

.kt-leader-chainline {
  font-size: 11px;
  color: var(--foreground-muted);
  line-height: 1.25;
  margin: -2px 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kt-chain-more-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 0;
  font-size: 11px;
  color: var(--foreground-muted);
  background: transparent;
  border: 0;
  width: 100%;
  cursor: pointer;
}

.kt-chain-more-btn:hover {
  color: var(--foreground);
}

.kt-rotate-180 {
  transform: rotate(180deg);
}

.kt-chain-merge-target {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.kt-chain-merge-target-title {
  font-weight: 600;
  color: var(--foreground);
}

.kt-chain-merge-target-domains {
  font-size: 11px;
  color: var(--foreground-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Result menu (tags/colors) - усиленная специфичность */
.kt-result-menu {
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  margin-top: 6px !important;
  width: 260px !important;
  background: var(--popover) !important;
  color: var(--popover-foreground) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
  z-index: 9999 !important;
}

.kt-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--foreground);
  background: transparent;
  border: 0;
  text-align: left;
}

.kt-menu-item:hover {
  background: var(--background-tertiary);
}

.kt-menu-item.active {
  background: rgba(37, 99, 235, 0.12);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.25);
}

.kt-menu-section {
  letter-spacing: 0.04em;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.kt-tag-input {
  flex: 1;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  background: var(--input-background);
  color: var(--foreground);
}

.kt-tag-add-btn {
  width: 32px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--kt-tag-add-bg);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.kt-tag-add-btn:hover {
  background: var(--kt-tag-add-hover);
}

.kt-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--kt-color-swatch-border);
  cursor: pointer;
}

.kt-color-swatch.active {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5);
}

/* Dropdown авто-сбора - усиленная специфичность */
[data-kt-autocollect] select {
  background-color: var(--input-background) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
}

[data-kt-autocollect] select:hover {
  border-color: var(--border-hover) !important;
}

[data-kt-autocollect] select:focus {
  outline: none !important;
  border-color: var(--info-light) !important;
}

/* Кнопка меню с тремя точками - усиленная видимость */
[data-kt-action="result-menu"] {
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (max-width: 768px) {
  #ktApp {
    padding: 6px;
    gap: 14px;
  }

  #ktApp #ktHeaderRow,
  #ktApp #ktHeaderRow.flex {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    width: 100%;
  }

  #ktApp #ktHeaderRow h1 {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    line-height: 1.15;
  }

  #ktApp #ktHeaderActions,
  #ktApp #ktHeaderActions.flex {
    display: inline-flex !important;
    width: auto;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    align-self: center;
    justify-self: end;
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
  }

  #ktApp #ktPeriodControls {
    display: none;
  }

  #ktCustomPeriod {
    width: 100%;
  }

  #ktCustomPeriod input {
    width: calc(50% - 12px);
    min-width: 0;
  }

  #ktApp #ktToggleAddForm,
  #ktApp #ktToggleAddForm.kt-cta-btn {
    width: auto;
    max-width: 100%;
    justify-content: center;
    min-height: 36px;
    margin-left: 0;
    padding: 0 12px;
    font-size: 13px;
    flex: 0 0 auto;
  }

  #ktCustomPeriodMobile {
    width: 100%;
    gap: 8px;
  }

  .kt-period-input-mobile {
    flex: 1 1 0%;
  }

  #ktLeadersBody {
    padding: 12px;
  }

  #ktSnapshotsWrap > .p-4 {
    padding: 8px !important;
  }

  #ktUsageRow {
    margin: 0 0 10px !important;
    gap: 8px;
  }

  #ktUsageRow .kt-usage-pill {
    max-width: 100%;
  }

  #ktQueriesCard,
  #ktLeadersCard,
  #ktSnapshotsCard {
    margin-top: 12px;
  }
}