/**
 * CyberTools — ct-polish.css
 * Premium, restrained UI polish layer (PRESERVE mode).
 * Loaded after additional.css. No framework migration.
 *
 * Dials: DESIGN_VARIANCE=5 · MOTION_INTENSITY=3 · VISUAL_DENSITY=6
 * Brand accent: #4c3ff2 (violet) · Font: Rubik · Dark default
 */

/* ═══════════════════════════════════════════════════════════
   1. Design tokens
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — never pure #000 */
  --ct-surface-0: #f9f9fb;
  --ct-surface-1: #ffffff;
  --ct-surface-2: #f3f4f8;
  --ct-surface-ink: #0a1420;
  --ct-surface-muted: #555760;

  /* Brand */
  --ct-brand: #4c3ff2;
  --ct-brand-soft: rgba(76, 63, 242, 0.10);
  --ct-brand-softer: rgba(76, 63, 242, 0.06);
  --ct-brand-ring: rgba(76, 63, 242, 0.28);
  --ct-brand-mid: #6358f5;

  /* Radii 12–16 (cards/panels); pills stay full-round where existing */
  --ct-radius-sm: 10px;
  --ct-radius: 14px;
  --ct-radius-lg: 16px;
  --ct-radius-xl: 20px;
  --ct-radius-pill: 999px;

  /* Shadows — tinted, not pure black slabs */
  --ct-shadow-xs: 0 1px 2px rgba(10, 20, 32, 0.05);
  --ct-shadow-sm: 0 4px 12px rgba(10, 20, 32, 0.06), 0 1px 3px rgba(76, 63, 242, 0.04);
  --ct-shadow-md: 0 8px 24px rgba(10, 20, 32, 0.08), 0 2px 6px rgba(76, 63, 242, 0.05);
  --ct-shadow-lg: 0 16px 40px rgba(10, 20, 32, 0.10), 0 4px 12px rgba(76, 63, 242, 0.06);
  --ct-shadow-focus: 0 0 0 3px var(--ct-brand-ring);

  /* Motion (MOTION_INTENSITY=3) */
  --ct-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ct-duration: 180ms;
  --ct-duration-slow: 280ms;

  /* Density (VISUAL_DENSITY=6) */
  --ct-space-1: 0.35rem;
  --ct-space-2: 0.65rem;
  --ct-space-3: 1rem;
  --ct-space-4: 1.35rem;
  --ct-space-5: 1.75rem;

  /* Focus / a11y */
  --ct-focus-ring: 0 0 0 3px var(--ct-brand-ring);
  --ct-tap-min: 44px;
}

/* Dark theme tokens (body.dark) */
body.dark {
  --ct-surface-0: #141518;
  --ct-surface-1: #1c1d21;
  --ct-surface-2: #25262b;
  --ct-surface-ink: #f0f1f4;
  --ct-surface-muted: #9ca3af;

  --ct-brand-soft: rgba(76, 63, 242, 0.18);
  --ct-brand-softer: rgba(76, 63, 242, 0.10);
  --ct-brand-ring: rgba(99, 88, 245, 0.40);

  --ct-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --ct-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(76, 63, 242, 0.08);
  --ct-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(76, 63, 242, 0.10);
  --ct-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.38), 0 4px 14px rgba(76, 63, 242, 0.12);
}

/* Soften pure-black surfaces from base theme without fighting brand */
body.dark,
body.dark .main-section {
  /* keep existing dark tokens; ensure page chrome isn't pure black */
  background-color: var(--ct-surface-0);
}

body.dark .main-section {
  background-color: var(--color-dark, #171717);
  background-image: none; /* drop light-mode watermark on dark */
  box-shadow: var(--ct-shadow-md);
}

/* ═══════════════════════════════════════════════════════════
   2. Skip link + focus baseline
   ═══════════════════════════════════════════════════════════ */

/* Skip link: hidden until keyboard focus only (never a floating chrome button) */
.ct-skip-link {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: 12px;
  top: 12px;
  z-index: 100000;
  background: var(--ct-brand);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  text-decoration: none;
}

.ct-skip-link:focus,
.ct-skip-link:focus-visible {
  position: fixed !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.65rem 1.1rem !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border-radius: var(--ct-radius-sm);
  outline: none;
  box-shadow: var(--ct-shadow-focus), var(--ct-shadow-md);
  left: max(12px, env(safe-area-inset-left, 0px));
  top: max(12px, env(safe-area-inset-top, 0px));
}

/* Global focus-visible for interactive controls */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.custom--btn:focus-visible,
.content-cats-inner:focus-visible,
.header-language-btn:focus-visible,
.login-btn:focus-visible,
.nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--ct-shadow-focus);
}

/* ═══════════════════════════════════════════════════════════
   3. Sticky nav polish
   ═══════════════════════════════════════════════════════════ */

header.mainPadding {
  position: sticky;
  top: 0;
  z-index: 1040;
  margin-bottom: 48px;
  padding-top: max(4px, env(safe-area-inset-top, 0px));
  padding-bottom: 10px;
  /* bleed to shell edges inside rounded main-section */
  margin-left: -12px;
  margin-right: -12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  background: color-mix(in srgb, var(--color-whiter, #f9f9fb) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  border-bottom: 1px solid transparent;
  transition:
    background var(--ct-duration) var(--ct-ease),
    border-color var(--ct-duration) var(--ct-ease),
    box-shadow var(--ct-duration) var(--ct-ease);
}

body.dark header.mainPadding {
  background: color-mix(in srgb, var(--color-dark, #171717) 86%, transparent);
}

/* Stronger bar once content scrolls under (progressive enhancement via :has not required) */
header.mainPadding:focus-within,
.main-section:has(header.mainPadding) header.mainPadding {
  border-bottom-color: rgba(76, 63, 242, 0.08);
}

@media only screen and (max-width: 767px) {
  header.mainPadding {
    margin-bottom: 28px;
  }
}

/* Header nav links — quieter hover, min tap height on mobile drawer */
header .header-navbar ul li a {
  position: relative;
  transition: color var(--ct-duration) var(--ct-ease), opacity var(--ct-duration) var(--ct-ease);
}

header .header-navbar ul li a:hover {
  opacity: 0.88;
}

@media only screen and (max-width: 991px) {
  header .header-navbar ul li a {
    min-height: var(--ct-tap-min);
    display: flex;
    align-items: center;
    border-radius: var(--ct-radius-sm);
    padding: 0 8px;
  }

  header .header-navbar ul li a:hover,
  header .header-navbar ul li a:focus-visible {
    background: var(--ct-brand-softer);
    color: var(--ct-brand) !important;
    opacity: 1;
  }

  body.dark header .header-navbar {
    background-color: var(--ct-surface-1) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }

  body.dark header .header-navbar ul li a {
    color: var(--ct-surface-ink) !important;
  }
}

/* Theme / language / toggler hit areas */
header .header-language-btn-group .header-language-btn {
  min-height: 40px;
  min-width: 40px;
  box-shadow: var(--ct-shadow-sm);
  transition:
    box-shadow var(--ct-duration) var(--ct-ease),
    transform var(--ct-duration) var(--ct-ease);
}

header .header-language-btn-group .header-language-btn:hover {
  box-shadow: var(--ct-shadow-md);
}

.nav-btn {
  min-width: var(--ct-tap-min);
  min-height: var(--ct-tap-min);
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════
   4. Hero + search (primary control)
   ═══════════════════════════════════════════════════════════ */

.hero-section {
  margin-bottom: 0.25rem;
}

.hero-section .hero-small-title {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ct-brand);
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

body.dark .hero-section .hero-small-title {
  color: #a59cf7;
}

.hero-section h1,
.hero-section .h1 {
  font-size: clamp(1.75rem, 2.4vw + 1rem, 2.35rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 28ch;
  margin-bottom: 1.25rem;
  color: var(--color-black, #0a1420);
}

body.dark .hero-section h1,
body.dark .hero-section .h1 {
  color: var(--ct-surface-ink);
}

@media only screen and (max-width: 767px) {
  .hero-section h1,
  .hero-section .h1 {
    font-size: 1.65rem;
    line-height: 1.25;
    max-width: 100%;
    margin-bottom: 0.9rem;
  }
}

/* Search as primary control */
.main-search-sec {
  margin-bottom: 2.25rem;
  max-width: 42rem;
}

.main-search-sec input {
  height: 52px;
  min-height: var(--ct-tap-min);
  padding: 0 1.35rem;
  font-size: 1.05rem;
  font-weight: 500;
  border-radius: var(--ct-radius-pill);
  border: 1.5px solid rgba(76, 63, 242, 0.35);
  background: var(--ct-surface-1);
  color: var(--color-black, #0a1420);
  box-shadow: var(--ct-shadow-sm);
  transition:
    border-color var(--ct-duration) var(--ct-ease),
    box-shadow var(--ct-duration) var(--ct-ease),
    background-color var(--ct-duration) var(--ct-ease);
}

.main-search-sec input::placeholder {
  color: var(--color-placeholder, #a5aebc);
  font-weight: 400;
}

.main-search-sec input:hover {
  border-color: rgba(76, 63, 242, 0.55);
}

.main-search-sec input:focus {
  outline: none;
  border-color: var(--ct-brand);
  box-shadow: var(--ct-shadow-focus), var(--ct-shadow-sm);
  background: var(--ct-surface-1);
}

body.dark .main-search-sec input {
  background: var(--ct-surface-2);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ct-surface-ink);
}

body.dark .main-search-sec input:hover {
  border-color: rgba(165, 156, 247, 0.45);
}

body.dark .main-search-sec input:focus {
  border-color: var(--ct-brand-mid);
  background: var(--ct-surface-2);
}

/* Search dropdown */
.main-search-sec .main-search-dd {
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-lg);
  border: 1px solid rgba(76, 63, 242, 0.08);
  padding: 0.5rem;
  margin-top: 0.45rem;
}

body.dark .main-search-sec .main-search-dd {
  background-color: var(--ct-surface-1);
  border-color: rgba(255, 255, 255, 0.08);
}

.main-search-sec .main-search-dd li a {
  border-radius: var(--ct-radius-sm);
  padding: 0.7rem 0.85rem;
  min-height: var(--ct-tap-min);
  font-size: 1.05rem;
  transition: background-color var(--ct-duration) var(--ct-ease);
}

body.dark .main-search-sec .main-search-dd li a {
  color: var(--ct-surface-ink);
}

body.dark .main-search-sec .main-search-dd li a small {
  color: var(--ct-surface-muted);
}

.main-search-sec .main-search-dd li a:hover,
.main-search-sec .main-search-dd li a:focus-visible {
  background-color: var(--ct-brand-soft);
}

/* ═══════════════════════════════════════════════════════════
   5. Category headers + tool cards
   ═══════════════════════════════════════════════════════════ */

.content-sec .content-sec-inner {
  margin-bottom: 2.5rem;
}

.content-sec .content-sec-inner .content-title-sec {
  margin-bottom: 1.15rem !important;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(76, 63, 242, 0.10);
}

body.dark .content-sec .content-sec-inner .content-title-sec {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.content-sec .content-sec-inner .content-title-sec .content-title-icon {
  border-radius: var(--ct-radius);
  width: 48px;
  height: 48px;
  box-shadow: 0 4px 12px rgba(76, 63, 242, 0.22);
}

.content-sec .content-sec-inner .content-title-sec .main-subtitle {
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.85rem);
  letter-spacing: -0.015em;
}

/* Grid density — slightly tighter card rhythm */
.content-sec .content-sec-inner .content-cats-sec .content-cats-col {
  margin-bottom: 1.15rem !important;
  padding: 0 0.45rem;
  min-width: 0; /* prevent flex overflow */
}

@media (max-width: 480px) {
  .content-sec .content-sec-inner .content-cats-sec .content-cats-col {
    padding: 0 !important;
  }
}

/* Cards */
.content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner {
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-sm);
  padding: 1.25rem 1.2rem 1.15rem;
  border: 1px solid rgba(10, 20, 32, 0.04);
  border-bottom: 3px solid transparent;
  top: 0;
  overflow: hidden;
  height: 100%;
  min-height: var(--ct-tap-min);
  transition:
    transform var(--ct-duration-slow) var(--ct-ease),
    box-shadow var(--ct-duration-slow) var(--ct-ease),
    border-color var(--ct-duration) var(--ct-ease),
    background-color var(--ct-duration) var(--ct-ease);
}

body.dark .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner {
  background-color: var(--ct-surface-1);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: var(--ct-shadow-sm);
}

/* Restrained hover — no huge lift / no glow spam */
.content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:hover {
  top: 0;
  transform: translateY(-3px);
  border-bottom-color: var(--ct-brand);
  box-shadow: var(--ct-shadow-md);
}

.content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:focus-visible {
  top: 0;
  transform: translateY(-2px);
  border-bottom-color: var(--ct-brand);
  box-shadow: var(--ct-shadow-focus), var(--ct-shadow-md);
}

@media (hover: none) {
  .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:hover {
    transform: none;
  }
}

/* Icon tile */
.content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner .content-cats-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--ct-radius);
  margin-bottom: 0.85rem;
  background-color: var(--ct-brand-soft);
  transition: background-color var(--ct-duration) var(--ct-ease);
}

.content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:hover .content-cats-icon {
  background-color: rgba(76, 63, 242, 0.16);
}

body.dark .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner .content-cats-icon {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Titles / summaries — allow wrap, no horizontal overflow */
.content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner h2,
.content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner .h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  line-height: 1.3;
}

body.dark .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner h2,
body.dark .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner .h2 {
  color: var(--ct-surface-ink);
}

.content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner p {
  max-height: none;
  height: auto;
  min-height: 2.4em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  font-size: 0.9rem;
  color: var(--ct-surface-muted);
  word-break: break-word;
}

body.dark .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner p {
  color: var(--ct-surface-muted);
}

/* Locked cards */
.content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner.locked {
  background-color: var(--ct-brand-softer);
}

body.dark .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner.locked {
  background-color: rgba(76, 63, 242, 0.12);
}

/* ═══════════════════════════════════════════════════════════
   6. Tool pages — forms, buttons, upload zones
   ═══════════════════════════════════════════════════════════ */

.single-page-sec {
  margin-top: 0.25rem;
}

.single-page-inner {
  border-radius: var(--ct-radius-lg);
}

/* Textareas / inputs inside tool UI */
.single-page-inner .form-control,
.single-page-inner .form-select,
.single-page-inner textarea,
.single-page-inner input[type="text"],
.single-page-inner input[type="url"],
.single-page-inner input[type="number"],
.single-page-inner input[type="email"],
.single-page-inner input[type="password"],
.single-page-inner input[type="search"] {
  min-height: var(--ct-tap-min);
  border-radius: var(--ct-radius) !important;
  border: 1px solid var(--color-border, #d1d6dd);
  transition:
    border-color var(--ct-duration) var(--ct-ease),
    box-shadow var(--ct-duration) var(--ct-ease),
    background-color var(--ct-duration) var(--ct-ease);
}

.single-page-inner textarea.form-control,
.single-page-inner textarea {
  min-height: 8rem;
}

.single-page-inner .form-control:focus,
.single-page-inner .form-select:focus,
.single-page-inner textarea:focus,
.single-page-inner input:focus {
  border-color: var(--ct-brand) !important;
  box-shadow: var(--ct-shadow-focus) !important;
  outline: none;
}

body.dark .single-page-inner .form-control,
body.dark .single-page-inner .form-select,
body.dark .single-page-inner textarea,
body.dark .single-page-inner input[type="text"],
body.dark .single-page-inner input[type="url"],
body.dark .single-page-inner input[type="number"],
body.dark .single-page-inner input[type="email"],
body.dark .single-page-inner input[type="password"],
body.dark .single-page-inner input[type="search"] {
  background-color: var(--ct-surface-2) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--ct-surface-ink) !important;
}

/* Primary actions */
.single-page-inner .button__lg,
.single-page-inner .custom--btn,
.single-page-inner .btn.custom--btn,
.btn.custom--btn.button__lg {
  min-height: var(--ct-tap-min);
  border-radius: var(--ct-radius-pill) !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(76, 63, 242, 0.28);
  transition:
    transform var(--ct-duration) var(--ct-ease),
    box-shadow var(--ct-duration) var(--ct-ease),
    background-color var(--ct-duration) var(--ct-ease),
    filter var(--ct-duration) var(--ct-ease);
}

.single-page-inner .button__lg:hover,
.single-page-inner .custom--btn:hover,
.btn.custom--btn.button__lg:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(76, 63, 242, 0.34);
  filter: brightness(1.03);
}

.single-page-inner .button__lg:active,
.single-page-inner .custom--btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(76, 63, 242, 0.24);
}

/* Secondary / light buttons in contact CTA */
.btn.custom--btn.btn__light,
.button__lg.btn__light {
  min-height: var(--ct-tap-min);
  border-radius: var(--ct-radius-pill);
  box-shadow: var(--ct-shadow-sm);
}

/* Upload zones */
.upload-zone {
  border-radius: var(--ct-radius-lg) !important;
  border: 1.5px dashed rgba(76, 63, 242, 0.28) !important;
  background: var(--ct-brand-softer) !important;
  min-height: 7.5rem;
  transition:
    border-color var(--ct-duration) var(--ct-ease),
    background-color var(--ct-duration) var(--ct-ease),
    box-shadow var(--ct-duration) var(--ct-ease),
    transform var(--ct-duration) var(--ct-ease) !important;
}

.upload-zone:hover,
.upload-zone:focus-within {
  border-color: var(--ct-brand) !important;
  background: var(--ct-brand-soft) !important;
  box-shadow: var(--ct-shadow-sm);
  transform: translateY(-1px);
}

body.dark .upload-zone {
  border-color: rgba(165, 156, 247, 0.28) !important;
  background: rgba(76, 63, 242, 0.08) !important;
}

body.dark .upload-zone:hover,
body.dark .upload-zone:focus-within {
  border-color: var(--ct-brand-mid) !important;
  background: rgba(76, 63, 242, 0.14) !important;
}

/* FilePond / drag areas if present */
.single-page-inner .filepond--panel-root,
.single-page-inner .filepond--root {
  border-radius: var(--ct-radius-lg);
}

/* Tool description panel */
.tool-description-section {
  border-radius: var(--ct-radius-xl);
  padding: 1.75rem 1.75rem;
  background: var(--ct-brand-softer);
  border: 1px solid rgba(76, 63, 242, 0.08);
  margin-top: 2.5rem !important;
}

body.dark .tool-description-section {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Single-page header icon */
.single-page-icon {
  border-radius: var(--ct-radius) !important;
}

/* Related tools: see §10 at end of file (tool-page-scoped) */

/* Contact / helping CTA */
.home-helping-sec {
  border-radius: var(--ct-radius-xl);
  box-shadow: 0 12px 32px rgba(76, 63, 242, 0.22);
}

/* Footer spacing */
footer {
  padding-top: 0.5rem;
}

/* footer .footer-nav a styles: single source near "Footer nav: visible pill-buttons" below */

/* Cookie bar — slightly softer, not pure black; a11y + safe-area */
.cookie-alert.alert-dark {
  background-color: #1a1b20 !important;
  border: 0;
  color: #e8e9ed;
  box-shadow: 0 -4px 24px rgba(10, 20, 32, 0.2);
  padding-top: 0.85rem;
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

.cookie-alert .btn {
  min-height: 40px;
  min-width: 2.75rem;
  border-radius: var(--ct-radius-sm);
  margin-inline-start: 0.5rem;
}

.cookie-alert .btn:focus {
  outline: none;
}

.cookie-alert .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: var(--ct-shadow-focus), 0 0 0 4px rgba(76, 63, 242, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   7. Shell polish
   ═══════════════════════════════════════════════════════════ */

.main-section {
  border-radius: 20px;
  box-shadow: var(--ct-shadow-lg);
}

@media only screen and (max-width: 767px) {
  .main-section {
    border-radius: 14px;
  }
}

/* Prevent horizontal scroll from card transforms / long words */
.main-section,
.content-sec,
.single-page-sec,
.content-cats-sec {
  overflow-x: clip;
}

.content-cats-inner,
.single-page-inner {
  max-width: 100%;
}

/* Main landmark focus (skip target) */
#main-content:focus {
  outline: none;
}

#main-content:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   8. prefers-reduced-motion
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:hover,
  .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:focus-visible,
  .single-page-inner .button__lg:hover,
  .upload-zone:hover {
    transform: none !important;
  }

  header.mainPadding {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   9. Utility / a11y helpers
   ═══════════════════════════════════════════════════════════ */

/* Ensure primary brand buttons stay violet, not Bootstrap blue drift */
.btn-primary,
.btn.btn-primary {
  --bs-btn-bg: var(--ct-brand);
  --bs-btn-border-color: var(--ct-brand);
  --bs-btn-hover-bg: #3f34d4;
  --bs-btn-hover-border-color: #3f34d4;
  --bs-btn-active-bg: #372dbf;
  --bs-btn-active-border-color: #372dbf;
  --bs-btn-focus-shadow-rgb: 76, 63, 242;
}

/* Soften any accidental pure-black text on light surfaces */
.text-black {
  color: var(--color-black, #0a1420) !important;
}

body.dark .text-black {
  color: var(--ct-surface-ink) !important;
}

/* Selection */
::selection {
  background: rgba(76, 63, 242, 0.22);
  color: inherit;
}

body.dark ::selection {
  background: rgba(99, 88, 245, 0.35);
}

/* ═══════════════════════════════════════════════════════════
   Tool page chrome (compact hero) + remaining a11y
   ═══════════════════════════════════════════════════════════ */

.hero-section--tool {
  margin-bottom: 0.75rem !important;
  padding-bottom: 0 !important;
}

.hero-section--tool .hero-small-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.5rem !important;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Semantic tool breadcrumbs (Home → tool title) */
.ct-breadcrumb {
  margin: 0 0 0.5rem;
  padding: 0;
  max-width: 100%;
}

.ct-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: 1.35;
  color: var(--ct-surface-muted, #555760);
}

.ct-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.ct-breadcrumb-item + .ct-breadcrumb-item::before {
  content: "/";
  margin-right: 0.35rem;
  opacity: 0.45;
  user-select: none;
  pointer-events: none;
}

.ct-breadcrumb-item .ct-tool-back {
  /* keep existing back-link hit target; tighten for inline crumb */
  margin-left: -0.35rem;
}

.ct-breadcrumb-current {
  display: inline-block;
  min-width: 0;
  max-width: min(100%, 42ch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--ct-surface-ink, #0a1420);
  opacity: 0.88;
}

body.dark .ct-breadcrumb-list {
  color: var(--ct-surface-muted, #9ca3af);
}

body.dark .ct-breadcrumb-current {
  color: var(--ct-surface-ink, #f0f1f4);
  opacity: 0.9;
}

@media (max-width: 575px) {
  .ct-breadcrumb-list {
    font-size: 0.92em;
    row-gap: 0.15rem;
  }

  .ct-breadcrumb-current {
    max-width: min(100%, 70vw);
  }
}

.hero-section--tool h1 {
  font-size: clamp(1.45rem, 2.6vw, 2rem) !important;
  line-height: 1.2 !important;
  margin-bottom: 0.35rem !important;
  max-width: 40ch;
  text-wrap: balance;
}

/* Tool hero: title + favorite star */
.ct-tool-hero-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem 0.75rem;
  margin-bottom: 0.15rem;
}

.ct-tool-hero-row h1 {
  flex: 1 1 auto;
  margin-bottom: 0 !important;
  min-width: 0;
}

.ct-fav-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: var(--ct-tap-min, 44px);
  min-height: var(--ct-tap-min, 44px);
  margin-top: 0.1rem;
  padding: 0;
  border: 1px solid rgba(10, 20, 32, 0.1);
  border-radius: 12px;
  background: var(--ct-surface-1, #fff);
  color: var(--ct-surface-muted, #555760);
  cursor: pointer;
  transition: color var(--ct-duration, 180ms) var(--ct-ease),
    border-color var(--ct-duration, 180ms) var(--ct-ease),
    background var(--ct-duration, 180ms) var(--ct-ease),
    box-shadow var(--ct-duration, 180ms) var(--ct-ease),
    transform var(--ct-duration, 180ms) var(--ct-ease);
}

.ct-fav-toggle i {
  font-size: 1.05rem;
  line-height: 1;
}

.ct-fav-toggle:hover,
.ct-fav-toggle:focus-visible {
  color: var(--ct-brand, #4c3ff2);
  border-color: rgba(76, 63, 242, 0.35);
  box-shadow: var(--ct-shadow-focus, 0 0 0 3px rgba(76, 63, 242, 0.28));
  outline: none;
}

.ct-fav-toggle.is-active,
.ct-fav-toggle[aria-pressed="true"] {
  color: #eab308;
  border-color: rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.1);
}

.ct-fav-toggle.is-active:hover,
.ct-fav-toggle[aria-pressed="true"]:hover {
  color: #ca8a04;
}

body.dark .ct-fav-toggle {
  background: var(--ct-surface-2, #25262b);
  border-color: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}

body.dark .ct-fav-toggle.is-active,
body.dark .ct-fav-toggle[aria-pressed="true"] {
  color: #facc15;
  background: rgba(250, 204, 21, 0.12);
  border-color: rgba(250, 204, 21, 0.4);
}

.ct-tool-back {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  font-weight: 500;
}

.ct-tool-back:hover,
.ct-tool-back:focus-visible {
  color: var(--ct-brand);
  opacity: 1;
  outline: none;
}

.ct-tool-back-sep {
  opacity: 0.45;
  user-select: none;
}

/* Base guide-link tokens; refined pill CTA lives later in this file */
.ct-tool-guide-link-wrap {
  margin: 0.35rem 0 0.85rem !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  max-width: 36rem;
  font-size: 0.9rem;
  line-height: 1.2;
}

.ct-tool-guide-link-hint {
  margin: 0 !important;
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.78;
  max-width: 40ch;
}

/* Mobile menu as <button.nav-btn> */
button.nav-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.5rem;
  min-width: var(--ct-tap-min);
  min-height: var(--ct-tap-min);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

button.nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--ct-shadow-focus);
  border-radius: 8px;
}

/* Dark muted text contrast bump (AA-ish on #25262b+) */
body.dark .text-muted,
body.dark .text-secondary,
body.dark .dark\:text-gray-400 {
  color: #b4bcc8 !important;
}

/* Search label helper (Bootstrap-compatible) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Sticky header blur fallback without jank */
@supports not ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  header.mainPadding {
    background: var(--ct-surface-1) !important;
  }
}

@media (max-width: 767.98px) {
  .hero-section--tool h1 {
    font-size: 1.35rem !important;
  }
  .single-page-sec {
    margin-top: 0.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   10. Related tools (tool pages only)
   Markup: .single-page-sec + .content-sec (tool-base / tool)
   Goals: homepage-consistent header + card hover; secondary
   section spacing (not a second homepage dump); 1-col mobile.
   ═══════════════════════════════════════════════════════════ */

/* Section rail — separate from tool body without catalog bulk */
.single-page-sec + .content-sec {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(76, 63, 242, 0.09);
}

body.dark .single-page-sec + .content-sec {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* One block only — kill homepage multi-category bottom gap */
.single-page-sec + .content-sec .content-sec-inner {
  margin-bottom: 0 !important;
}

/* Category header — same treatment as homepage grid headers */
.single-page-sec + .content-sec .content-sec-inner .content-title-sec {
  width: 100% !important;
  flex-direction: row !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(76, 63, 242, 0.10);
}

body.dark .single-page-sec + .content-sec .content-sec-inner .content-title-sec {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.single-page-sec + .content-sec .content-sec-inner .content-title-sec .content-title-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ct-radius);
  margin-bottom: 0 !important;
  margin-right: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(76, 63, 242, 0.22);
}

.single-page-sec + .content-sec .content-sec-inner .content-title-sec .content-title-icon svg {
  max-width: 26px;
  max-height: 26px;
}

.single-page-sec + .content-sec .content-sec-inner .content-title-sec .main-subtitle {
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 0;
}

/* Grid denser than homepage catalog (secondary rail) */
.single-page-sec + .content-sec .content-sec-inner .content-cats-sec {
  width: 100% !important;
  flex: unset !important;
  margin: 0 -0.35rem;
}

.single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col {
  margin-bottom: 0.9rem !important;
  padding: 0 0.35rem;
  min-width: 0;
}

/* Cards — match homepage grid hover (restrained lift + brand edge) */
.single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner {
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-sm);
  padding: 1.15rem 1.1rem 1.05rem;
  border: 1px solid rgba(10, 20, 32, 0.04);
  border-bottom: 3px solid transparent;
  top: 0;
  overflow: hidden;
  height: 100%;
  min-height: var(--ct-tap-min);
  transition:
    transform var(--ct-duration-slow) var(--ct-ease),
    box-shadow var(--ct-duration-slow) var(--ct-ease),
    border-color var(--ct-duration) var(--ct-ease),
    background-color var(--ct-duration) var(--ct-ease);
}

body.dark .single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner {
  background-color: var(--ct-surface-1);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: var(--ct-shadow-sm);
}

.single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:hover {
  top: 0 !important; /* kill legacy -24px lift from app.css */
  transform: translateY(-3px);
  border-bottom-color: var(--ct-brand);
  box-shadow: var(--ct-shadow-md);
}

.single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:focus-visible {
  top: 0 !important;
  transform: translateY(-2px);
  border-bottom-color: var(--ct-brand);
  box-shadow: var(--ct-shadow-focus), var(--ct-shadow-md);
  outline: none;
}

.single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:hover .content-cats-icon {
  background-color: rgba(76, 63, 242, 0.16);
}

/* Icon / type rhythm aligned with homepage cards */
.single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner .content-cats-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--ct-radius);
  margin-bottom: 0.75rem;
  background-color: var(--ct-brand-soft);
}

body.dark .single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner .content-cats-icon {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner h2,
.single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner .h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  line-height: 1.3;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner p {
  max-height: none;
  height: auto;
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  font-size: 0.9rem;
  color: var(--ct-surface-muted);
  margin-bottom: 0;
}

/* Mobile / narrow: clean single column */
@media (max-width: 767.98px) {
  .single-page-sec + .content-sec {
    margin-top: 1.25rem;
    padding-top: 1.15rem;
  }

  .single-page-sec + .content-sec .content-sec-inner .content-title-sec {
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.65rem;
  }

  .single-page-sec + .content-sec .content-sec-inner .content-title-sec .content-title-icon {
    width: 42px;
    height: 42px;
    margin-right: 12px;
  }

  .single-page-sec + .content-sec .content-sec-inner .content-title-sec .content-title-icon svg {
    max-width: 22px;
    max-height: 22px;
  }

  .single-page-sec + .content-sec .content-sec-inner .content-title-sec .main-subtitle {
    font-size: 1.25rem;
  }

  .single-page-sec + .content-sec .content-sec-inner .content-cats-sec {
    margin: 0;
  }

  .single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  .single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col:last-child {
    margin-bottom: 0 !important;
  }

  .single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner {
    padding: 1rem 0.95rem 0.95rem;
  }

  .single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner .content-cats-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.65rem;
  }
}

/* Touch: no hover lift (same as homepage grid) */
@media (hover: none) {
  .single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:hover,
  .single-page-sec + .content-sec .content-sec-inner .content-cats-sec .content-cats-col .content-cats-inner:focus-visible {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   11. Mobile nav drawer — scrim, shadow, tap targets
   Open state: header .header-navbar.show (#navbarNavDropdown)
   Scoped to ≤991px so desktop navbar-expand-lg is untouched.
   ═══════════════════════════════════════════════════════════ */

@media only screen and (max-width: 991px) {
  /* Semi-transparent page scrim while drawer is open (CSS-only, no extra DOM) */
  body:has(header .header-navbar.show)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998; /* drawer is z-index: 9999 in app.css */
    background: rgba(10, 20, 32, 0.48);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: auto;
    animation: ct-nav-scrim-in var(--ct-duration-slow) var(--ct-ease) both;
  }

  body.dark:has(header .header-navbar.show)::before {
    background: rgba(0, 0, 0, 0.58);
  }

  /* Drawer panel: deeper layered shadow (violet-tinted) */
  header .header-navbar {
    box-shadow:
      12px 0 40px rgba(10, 20, 32, 0.22),
      4px 0 16px rgba(76, 63, 242, 0.10),
      0 0 0 1px rgba(10, 20, 32, 0.04);
  }

  header .header-navbar.show {
    box-shadow:
      16px 0 48px rgba(10, 20, 32, 0.28),
      6px 0 20px rgba(76, 63, 242, 0.12),
      0 0 0 1px rgba(10, 20, 32, 0.06);
  }

  body.dark header .header-navbar,
  body.dark header .header-navbar.show {
    box-shadow:
      16px 0 48px rgba(0, 0, 0, 0.55),
      6px 0 20px rgba(76, 63, 242, 0.16),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }

  /* RTL: mirror shadow direction (drawer slides from right) */
  .rtl header .header-navbar {
    box-shadow:
      -12px 0 40px rgba(10, 20, 32, 0.22),
      -4px 0 16px rgba(76, 63, 242, 0.10),
      0 0 0 1px rgba(10, 20, 32, 0.04);
  }

  .rtl header .header-navbar.show {
    box-shadow:
      -16px 0 48px rgba(10, 20, 32, 0.28),
      -6px 0 20px rgba(76, 63, 242, 0.12),
      0 0 0 1px rgba(10, 20, 32, 0.06);
  }

  body.dark.rtl header .header-navbar,
  body.dark.rtl header .header-navbar.show,
  .rtl body.dark header .header-navbar,
  .rtl body.dark header .header-navbar.show {
    box-shadow:
      -16px 0 48px rgba(0, 0, 0, 0.55),
      -6px 0 20px rgba(76, 63, 242, 0.16),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }

  /* Min tap targets on drawer links (44×44 via --ct-tap-min) */
  header .header-navbar ul {
    gap: 2px;
    padding-block: 8px;
  }

  header .header-navbar ul li a {
    min-height: var(--ct-tap-min);
    min-width: var(--ct-tap-min);
    display: flex;
    align-items: center;
    padding: 10px 12px;
    line-height: 1.3;
    border-radius: var(--ct-radius-sm);
    box-sizing: border-box;
  }

  /* Fallback scrim if :has() unsupported — pseudo on open drawer */
  @supports not selector(body:has(*)) {
    header .header-navbar.show::after {
      content: "";
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100%;
      height: 100dvh;
      z-index: -1;
      background: rgba(10, 20, 32, 0.48);
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
      pointer-events: none;
      animation: ct-nav-scrim-in var(--ct-duration-slow) var(--ct-ease) both;
    }

    body.dark header .header-navbar.show::after {
      background: rgba(0, 0, 0, 0.58);
    }
  }
}

@keyframes ct-nav-scrim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reduced motion: no scrim fade; no blur jank (global §8 already zeroizes transitions) */
@media (prefers-reduced-motion: reduce) {
  body:has(header .header-navbar.show)::before,
  header .header-navbar.show::after {
    animation: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   Blog index + tool-guide article polish
   ═══════════════════════════════════════════════════════════ */

.ct-blog-intro {
  margin-top: -0.35rem;
  max-width: 62ch;
  opacity: 0.92;
}

.ct-blog-pagination-wrap {
  margin: 1.5rem 0 0.5rem;
  clear: both;
}

.ct-blog-pagination-wrap .blog-pagination {
  padding-top: 1rem;
}

.ct-blog-back {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.4;
}

.blog-title-sec h1 {
  flex: 1;
  width: 1%;
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.25;
  font-weight: 700;
}

.ct-blog-content {
  margin-top: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.ct-blog-content > *:first-child {
  margin-top: 0;
}

/* Generated how-to guides (.ct-tool-guide from ToolGuideArticleBuilder) */
.ct-tool-guide h2 {
  margin: 1.75rem 0 0.65rem;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.3;
  font-weight: 700;
}

.ct-tool-guide h2:first-child {
  margin-top: 0.5rem;
}

.ct-tool-guide p {
  margin: 0 0 0.85rem;
}

.ct-tool-guide ol,
.ct-tool-guide ul {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
}

.ct-tool-guide ol {
  list-style: decimal;
}

.ct-tool-guide ul {
  list-style: disc;
}

.ct-tool-guide li {
  margin: 0.35rem 0;
  padding-left: 0.15rem;
}

.ct-tool-guide li + li {
  margin-top: 0.45rem;
}

.ct-tool-guide dl {
  margin: 0 0 1.15rem;
  padding: 0;
}

.ct-tool-guide dt {
  margin: 0.85rem 0 0.25rem;
  font-weight: 700;
}

.ct-tool-guide dt:first-child {
  margin-top: 0;
}

.ct-tool-guide dd {
  margin: 0 0 0.35rem;
  padding: 0;
  opacity: 0.95;
}

/* CTA button spacing inside guides */
.ct-tool-guide .btn,
.ct-tool-guide a.btn,
.ct-tool-guide .custom--btn {
  display: inline-flex;
  align-items: center;
  margin: 0.35rem 0 1.1rem;
  min-height: var(--ct-tap-min, 44px);
}

/* Blog index: article wrapper keeps .blog-sec-col layout intact */
.blog-sec-article {
  display: block;
  height: 100%;
}

.blog-sec-article .blog-sec-col {
  height: 100%;
}

/* Blog empty state */
.ct-blog-empty {
  margin: 1.5rem 0 2rem;
  padding: 2rem 1.25rem;
  text-align: center;
  border-radius: var(--ct-radius, 14px);
  background: var(--ct-brand-softer, rgba(76, 63, 242, 0.06));
  border: 1px dashed rgba(76, 63, 242, 0.22);
}

.ct-blog-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--ct-brand-soft, rgba(76, 63, 242, 0.10));
  color: var(--ct-brand, #4c3ff2);
  font-size: 1.25rem;
}

.ct-blog-empty-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.3;
}

.ct-blog-empty-text {
  margin: 0 0 0.35rem;
  opacity: 0.9;
}

.ct-blog-empty-hint {
  margin: 0 auto 1.15rem;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.78;
}

.ct-blog-empty-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--ct-tap-min, 44px);
}

body.dark .ct-blog-empty {
  background: rgba(76, 63, 242, 0.10);
  border-color: rgba(165, 180, 252, 0.22);
}

body.dark .ct-blog-empty-icon {
  color: #c4b5fd;
}

/* Blog post reading layout */
.ct-blog-post {
  display: block;
}

.ct-blog-post-header {
  margin-bottom: 0.25rem;
}

.ct-blog-post-summary {
  margin: 0.65rem 0 0;
  max-width: 68ch;
  line-height: 1.55;
  opacity: 0.92;
}

.ct-blog-content {
  max-width: 72ch;
}

.ct-blog-open-tool {
  margin: 0.85rem 0 0.25rem;
}

.ct-blog-open-tool--footer {
  margin: 1.75rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(10, 20, 32, 0.08);
}

body.dark .ct-blog-open-tool--footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.ct-blog-open-tool-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--ct-tap-min, 44px);
}

/* Pagination a11y helpers */
.ct-blog-pagination .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ct-blog-pagination .blog-pagination li.disabled > span {
  opacity: 0.45;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   Skill polish 2026-08-05
   Residual visual QA: tap targets, mobile header, blog cards,
   guide readability, form/img defenses, tabular-nums
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Interactive chrome ≥ 44×44 ───────────────────────── */

/* Theme toggle + language control (was 40px) */
header .header-language-btn-group .header-language-btn {
  min-width: var(--ct-tap-min);
  min-height: var(--ct-tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.65rem;
  box-sizing: border-box;
}

/* Cookie OK button */
.cookie-alert .btn {
  min-width: var(--ct-tap-min);
  min-height: var(--ct-tap-min);
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Form switches: pad row so control+label hit area meets 44px */
.form-check.form-switch,
.form-switch {
  min-height: var(--ct-tap-min);
  display: flex;
  align-items: center;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.35rem;
}

.form-switch .form-check-input {
  width: 2.75em;
  height: 1.45em;
  margin-top: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.form-check:not(.form-switch) {
  min-height: var(--ct-tap-min);
  display: flex;
  align-items: center;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.form-check:not(.form-switch) .form-check-input {
  width: 1.25em;
  height: 1.25em;
  margin-top: 0;
  flex-shrink: 0;
}

/* footer .footer-nav a: see pill-button block below (min-height 44px) */

/* Back link (blog + tool) */
.ct-tool-back {
  display: inline-flex;
  align-items: center;
  min-height: var(--ct-tap-min);
  padding: 0.35rem 0.5rem;
  margin-left: -0.5rem;
  border-radius: var(--ct-radius-sm);
  box-sizing: border-box;
  transition:
    color var(--ct-duration) var(--ct-ease),
    background-color var(--ct-duration) var(--ct-ease),
    opacity var(--ct-duration) var(--ct-ease);
}

.ct-tool-back:hover,
.ct-tool-back:focus-visible {
  background-color: var(--ct-brand-softer);
}

/* ── 2. Mobile header: logo + controls collision ─────────── */

@media only screen and (max-width: 575px) {
  header.mainPadding {
    padding-top: 6px;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }

  header.mainPadding .navbar,
  header nav.navbar {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.35rem;
    row-gap: 0.35rem;
  }

  header .navbar-brand {
    margin-right: 0.35rem;
    max-width: calc(100% - 9.5rem);
    flex-shrink: 1;
  }

  header .navbar-brand img,
  header .navbar-brand .img-responsivee {
    max-height: 32px !important;
    width: auto !important;
    height: auto !important;
  }

  header .header-language-btn-group {
    margin-left: 0.15rem;
  }

  header .header-language-btn-group .header-language-btn {
    padding: 0.35rem 0.5rem;
    gap: 0.25rem;
  }

  header .header-language-btn-group .header-language-btn .text {
    font-size: 0.8rem;
  }
}

/* ── 3. Blog index cards ─────────────────────────────────── */

.blog-sec-col {
  transition:
    transform var(--ct-duration-slow) var(--ct-ease),
    box-shadow var(--ct-duration-slow) var(--ct-ease),
    border-color var(--ct-duration) var(--ct-ease),
    top var(--ct-duration-slow) var(--ct-ease);
  border: 1px solid transparent;
  min-height: 12.5rem;
}

.blog-sec-col:hover {
  box-shadow: var(--ct-shadow-md);
  border-color: rgba(76, 63, 242, 0.14);
}

.blog-sec-col:focus-visible {
  outline: none;
  box-shadow: var(--ct-shadow-focus), var(--ct-shadow-md);
  border-color: var(--ct-brand);
  top: -8px;
}

body.dark .blog-sec-col:hover {
  border-color: rgba(165, 156, 247, 0.22);
  box-shadow: var(--ct-shadow-md);
}

body.dark .blog-sec-col:focus-visible {
  border-color: var(--ct-brand-mid);
}

/* Summary: 3-line clamp (replace fixed 39px height) */
.blog-sec-col > p {
  max-height: none;
  height: auto;
  min-height: 4.2em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
  font-size: 0.95rem;
  color: var(--ct-surface-muted);
  margin-bottom: 0;
}

body.dark .blog-sec-col > p {
  color: var(--ct-surface-muted);
}

/* Date badge polish */
.blog-title-sec .date {
  background-color: var(--ct-brand-soft);
  color: var(--ct-brand);
  border-radius: var(--ct-radius-sm);
  padding: 0.35rem 0.55rem;
  min-width: 2.75rem;
  line-height: 1.15;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.blog-title-sec .date span {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ct-surface-ink);
  margin-top: 0.1rem;
  font-variant-numeric: tabular-nums;
}

body.dark .blog-title-sec .date {
  background-color: var(--ct-brand-soft);
  color: #a59cf7;
}

body.dark .blog-title-sec .date span {
  color: var(--ct-surface-ink);
}

.blog-sec-col .blog-title-sec h2 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Equal-ish card bodies (only columns that hold a blog card) */
.single-page-sec .row > [class*="col-"]:has(> .blog-sec-col) {
  display: flex;
}

.single-page-sec .row > [class*="col-"] > .blog-sec-col {
  width: 100%;
  flex: 1 1 auto;
}

/* ── 4. Blog article / tool guide readability + CTA ──────── */

.ct-tool-guide p {
  max-width: 72ch;
  line-height: 1.65;
}

.ct-tool-guide li {
  max-width: 72ch;
}

.ct-tool-guide dd {
  max-width: 72ch;
}

/* Sticky-ish open-tool CTA (first primary button in guide) */
.ct-tool-guide > p:has(> a.btn),
.ct-tool-guide > p:has(> .custom--btn) {
  position: sticky;
  top: 4.25rem;
  z-index: 5;
  max-width: none;
  margin: 0.5rem 0 1.25rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--ct-radius);
  background: color-mix(in srgb, var(--ct-surface-1) 92%, transparent);
  border: 1px solid rgba(76, 63, 242, 0.12);
  box-shadow: var(--ct-shadow-sm);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
}

body.dark .ct-tool-guide > p:has(> a.btn),
body.dark .ct-tool-guide > p:has(> .custom--btn) {
  background: color-mix(in srgb, var(--ct-surface-1) 90%, transparent);
  border-color: rgba(165, 156, 247, 0.18);
}

.ct-tool-guide > p:has(> a.btn) > a.btn,
.ct-tool-guide > p:has(> .custom--btn) > a.btn,
.ct-tool-guide > p:has(> a.btn) > .custom--btn,
.ct-tool-guide > p:has(> .custom--btn) > .custom--btn {
  margin: 0;
  width: auto;
  max-width: 100%;
}

/* ── 5. Tool-page guide link: pill / chip CTA ────────────── */

.ct-tool-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--ct-tap-min);
  padding: 0.45rem 0.95rem;
  border-radius: var(--ct-radius-pill);
  background: var(--ct-brand-soft);
  color: var(--ct-brand) !important;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  text-decoration: none !important;
  border: 1px solid rgba(76, 63, 242, 0.18);
  box-shadow: var(--ct-shadow-xs);
  opacity: 1;
  transition:
    background-color var(--ct-duration) var(--ct-ease),
    border-color var(--ct-duration) var(--ct-ease),
    box-shadow var(--ct-duration) var(--ct-ease),
    transform var(--ct-duration) var(--ct-ease),
    color var(--ct-duration) var(--ct-ease);
}

.ct-tool-guide-link i {
  font-size: 0.88em;
  opacity: 0.95;
  line-height: 1;
}

.ct-tool-guide-link:hover,
.ct-tool-guide-link:focus-visible {
  background: rgba(76, 63, 242, 0.16);
  border-color: rgba(76, 63, 242, 0.32);
  box-shadow: var(--ct-shadow-sm);
  text-decoration: none !important;
  transform: translateY(-1px);
  outline: none;
}

.ct-tool-guide-link:focus-visible {
  box-shadow: var(--ct-shadow-focus), var(--ct-shadow-sm);
}

.ct-tool-guide-link:active {
  transform: scale(0.98);
}

body.dark .ct-tool-guide-link {
  color: #c4bfff !important;
  background: rgba(76, 63, 242, 0.18);
  border-color: rgba(165, 156, 247, 0.28);
}

body.dark .ct-tool-guide-link:hover,
body.dark .ct-tool-guide-link:focus-visible {
  background: rgba(76, 63, 242, 0.28);
  border-color: rgba(165, 156, 247, 0.42);
  color: #ddd9ff !important;
}

/* ── 6. Form inputs + primary button active scale ────────── */

.single-page-inner .form-control,
.single-page-inner .form-select,
.single-page-inner textarea,
.single-page-inner input[type="text"],
.single-page-inner input[type="url"],
.single-page-inner input[type="number"],
.single-page-inner input[type="email"],
.single-page-inner input[type="password"],
.single-page-inner input[type="search"],
.single-page-inner input[type="tel"],
.single-page-inner input[type="date"],
.form-control,
.form-select {
  max-width: 100%;
  box-sizing: border-box;
}

.single-page-inner .button__lg:active,
.single-page-inner .custom--btn:active,
.single-page-inner .btn.custom--btn:active,
.btn.custom--btn.button__lg:active,
.btn.custom--btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(76, 63, 242, 0.22);
}

/* ── 7. Images defensive ─────────────────────────────────── */

img {
  max-width: 100%;
  height: auto;
}

/* ── 8. Tabular nums for calculator / numeric outputs ────── */

.result-value,
.result-card .display-5,
.result-card .fw-bold,
.results-list .fw-bold,
.result-container .result-value,
.single-page-inner .result,
.single-page-inner [class*="result-value"],
.single-page-inner output,
.single-page-inner .numeric-result {
  font-variant-numeric: tabular-nums;
}

/* ── 9–10. prefers-reduced-motion + dark muted: keep base ── */

@media (prefers-reduced-motion: reduce) {
  .blog-sec-col,
  .ct-tool-guide-link,
  .ct-tool-back,
  .single-page-inner .button__lg,
  .single-page-inner .custom--btn,
  .btn.custom--btn {
    transition: none !important;
  }

  .blog-sec-col:hover,
  .blog-sec-col:focus-visible,
  .ct-tool-guide-link:hover,
  .ct-tool-guide-link:focus-visible,
  .ct-tool-guide-link:active,
  .single-page-inner .button__lg:active,
  .single-page-inner .custom--btn:active,
  .btn.custom--btn:active {
    transform: none !important;
  }

  .ct-tool-guide > p:has(> a.btn),
  .ct-tool-guide > p:has(> .custom--btn) {
    position: static;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   Catalog max — homepage tools catalog UX
   Scope: main:has(#tools-catalog) (no body.home class available).
   Sibling fallback: .hero-section:not(.hero-section--tool) + .main-search-sec
   Category jump pills skipped (needs blade markup).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Sticky header bar height (logo ~40px + header padding) */
  --ct-sticky-header-h: 3.6rem;
  /* Sticky search chrome height (input 52px + vertical padding) */
  --ct-sticky-search-h: 4.25rem;
}

/* Sticky catalog search under sticky header (home only).
   Use mostly-opaque surface — translucent blur over long catalog caused
   white paint wash / ghosting when scrolling past Media tools. */
main:has(#tools-catalog) .main-search-sec,
.hero-section:not(.hero-section--tool) + .main-search-sec {
  position: sticky;
  top: var(--ct-sticky-header-h);
  z-index: 1030;
  max-width: 42rem;
  margin-right: auto;
  margin-bottom: 1.5rem;
  margin-left: -0.35rem;
  padding: 0.55rem 0.35rem 0.65rem;
  background: rgba(249, 249, 251, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--ct-duration) var(--ct-ease),
    box-shadow var(--ct-duration) var(--ct-ease),
    background var(--ct-duration) var(--ct-ease);
}

body.dark main:has(#tools-catalog) .main-search-sec,
body.dark .hero-section:not(.hero-section--tool) + .main-search-sec {
  background: rgba(28, 29, 33, 0.97);
}

/* Stronger surface once content scrolls under the stuck bar */
main:has(#tools-catalog) .main-search-sec:focus-within,
.hero-section:not(.hero-section--tool) + .main-search-sec:focus-within {
  border-bottom-color: rgba(76, 63, 242, 0.10);
  box-shadow: 0 8px 20px rgba(10, 20, 32, 0.06);
}

body.dark main:has(#tools-catalog) .main-search-sec:focus-within,
body.dark .hero-section:not(.hero-section--tool) + .main-search-sec:focus-within {
  border-bottom-color: rgba(165, 156, 247, 0.16);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

/* Keep Alpine filter input fully usable while stuck */
main:has(#tools-catalog) .main-search-sec input,
.hero-section:not(.hero-section--tool) + .main-search-sec input {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Blur fallback */
@supports not ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  main:has(#tools-catalog) .main-search-sec,
  .hero-section:not(.hero-section--tool) + .main-search-sec {
    background: var(--ct-surface-1) !important;
  }
}

/*
 * Category titles must NOT be sticky.
 * On desktop app.css uses flex-direction:row (title | cards). Polish forced
 * title width:100% + sticky + translucent blur → stuck title painted over
 * the whole row as a white wall (ghost titles, blank cards, clipped toggle).
 * Keep titles in normal flow; only the search bar stays sticky.
 */
main:has(#tools-catalog) .content-sec .content-sec-inner .content-title-sec {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}

/* Homepage catalog: always title above cards (no side rail that sticky can cover) */
main:has(#tools-catalog) .content-sec .content-sec-inner,
#tools-catalog.content-sec .content-sec-inner {
  flex-direction: column !important;
  align-items: stretch !important;
}

main:has(#tools-catalog) .content-sec .content-sec-inner .content-title-sec,
#tools-catalog .content-sec-inner .content-title-sec {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

main:has(#tools-catalog) .ct-cat-main,
#tools-catalog .ct-cat-main {
  width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

main:has(#tools-catalog) .content-sec .content-sec-inner .content-cats-sec,
#tools-catalog .content-cats-sec {
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* Catalog anchor offset when jumping to #tools-catalog */
#tools-catalog {
  scroll-margin-top: calc(var(--ct-sticky-header-h) + var(--ct-sticky-search-h) + 0.5rem);
}

/* Prefer reduced motion: drop blur/transition chrome on sticky search */
@media (prefers-reduced-motion: reduce) {
  main:has(#tools-catalog) .main-search-sec,
  .hero-section:not(.hero-section--tool) + .main-search-sec {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
  }
}

/* Mobile: slightly tighter sticky offset under compact header */
@media only screen and (max-width: 767px) {
  :root {
    --ct-sticky-header-h: 3.35rem;
    --ct-sticky-search-h: 4rem;
  }

  main:has(#tools-catalog) .main-search-sec,
  .hero-section:not(.hero-section--tool) + .main-search-sec {
    padding-top: 0.4rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1.15rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   Language flags: local assets, no discrimination, mobile-safe
   ═══════════════════════════════════════════════════════════ */

/* Always show language code (app.css hid .text under 575px — empty control if CDN fails) */
header .header-language-btn-group .header-language-btn .text {
  display: block !important;
  flex: 0 0 auto;
  width: auto !important;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

header .header-language-btn-group .header-language-btn .icon {
  display: flex !important;
  flex-shrink: 0;
  margin-right: 6px;
  align-items: center;
  overflow: visible;
}

header .header-language-btn-group .header-language-btn .icon img {
  display: block !important;
  width: 20px !important;
  height: 15px !important;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(10, 20, 32, 0.12);
}

header .header-language-dd a .icon img {
  display: block !important;
  width: 20px !important;
  height: 15px !important;
  object-fit: cover;
  border-radius: 2px;
}

/* Active language in dropdown */
header .header-language-dd a.active {
  background: rgba(76, 63, 242, 0.12);
  font-weight: 600;
}

body.dark header .header-language-dd a.active {
  background: rgba(76, 63, 242, 0.22);
}

@media only screen and (max-width: 575px) {
  header .header-language-btn-group .header-language-btn {
    height: auto !important;
    min-height: var(--ct-tap-min);
    padding: 0.35rem 0.55rem !important;
    gap: 0.3rem;
  }
  /* Icon-only language under 575: code stays in aria-label (de-crowd header) */
  header .header-language-btn-group:not(.theme-change-color) .header-language-btn .text {
    display: none !important;
  }
  header .header-language-btn-group:not(.theme-change-color) .header-language-btn .icon {
    margin-right: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Blog card images + single post image
   ═══════════════════════════════════════════════════════════ */

/* Card media: cover, centered, top-radius only, min-height ≥180 */
.blog-sec-image,
.blog-sec-col .blog-sec-image {
  min-height: 180px;
  height: 200px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 16px 16px 0 0;
  /* Skeleton / placeholder when no (or missing) image */
  background-color: var(--ct-surface-2, #f3f4f8);
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* Soft skeleton wash when background-image is absent or fails to load */
.blog-sec-image:not([style*="background-image"]),
.blog-sec-col .blog-sec-image:not([style*="url("]) {
  background-image: linear-gradient(
    110deg,
    var(--ct-surface-2, #f3f4f8) 0%,
    var(--ct-surface-0, #f9f9fb) 45%,
    var(--ct-surface-2, #f3f4f8) 90%
  );
}

body.dark .blog-sec-image,
body.dark .blog-sec-col .blog-sec-image {
  background-color: rgba(255, 255, 255, 0.04);
}

body.dark .blog-sec-image:not([style*="background-image"]),
body.dark .blog-sec-col .blog-sec-image:not([style*="url("]) {
  background-image: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.07) 45%,
    rgba(255, 255, 255, 0.03) 90%
  );
}

/* Dark mode: subtle ink overlay so bright thumbs sit in the theme */
body.dark .blog-sec-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 20, 32, 0.08) 0%,
    rgba(10, 20, 32, 0.22) 100%
  );
}

/* Single post hero image */
.blog-single-image {
  margin-bottom: 1.25rem;
  overflow: hidden;
  border-radius: var(--ct-radius-lg, 16px);
}

.blog-single-image img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

@media only screen and (max-width: 767px) {
  .blog-sec-image,
  .blog-sec-col .blog-sec-image {
    min-height: 180px;
    height: 180px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Light theme: readable header nav (was white-on-light)
   Day/night auto theme companion styles
   ═══════════════════════════════════════════════════════════ */

/* Desktop / all: light body → dark ink nav links */
body:not(.dark) header .header-navbar ul li a {
  color: #0a1420 !important;
  opacity: 1;
}

body:not(.dark) header .header-navbar ul li a:hover,
body:not(.dark) header .header-navbar ul li a:focus-visible {
  color: var(--ct-brand, #4c3ff2) !important;
  opacity: 1;
}

/* Light sticky header bar: solid light surface so links stay readable */
body:not(.dark) header.mainPadding {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(10, 20, 32, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hamburger bars dark on light */
body:not(.dark) .nav-btn span,
body:not(.dark) button.nav-btn span {
  background-color: #0a1420 !important;
}

/* Mobile drawer on light */
@media only screen and (max-width: 991px) {
  body:not(.dark) header .header-navbar,
  body:not(.dark) header .header-navbar.show {
    background-color: #ffffff !important;
    border-right: 1px solid rgba(10, 20, 32, 0.08);
    box-shadow: 8px 0 28px rgba(10, 20, 32, 0.12);
  }

  body:not(.dark) header .header-navbar ul li a {
    color: #0a1420 !important;
  }

  body:not(.dark) header .header-navbar ul li a:hover,
  body:not(.dark) header .header-navbar ul li a:focus-visible {
    background: rgba(76, 63, 242, 0.08);
    color: var(--ct-brand, #4c3ff2) !important;
  }

  body:not(.dark):has(header .header-navbar.show)::before {
    background: rgba(10, 20, 32, 0.35);
  }
}

/* Light theme language/theme pills stay high-contrast */
body:not(.dark) header .header-language-btn-group .header-language-btn {
  background: #ffffff !important;
  color: #0a1420 !important;
  border: 1px solid rgba(10, 20, 32, 0.1);
  box-shadow: 0 2px 10px rgba(10, 20, 32, 0.08);
}

body:not(.dark) header .header-language-btn-group .header-language-btn .text {
  color: #0a1420 !important;
}

/* Theme toggle icon readable on light */
body:not(.dark) .theme-change-color .header-language-btn i {
  color: #0a1420 !important;
}

/*
 * Footer stays dark gradient in both themes (app.css).
 * Do NOT set footer a { color: inherit } on light body — links become
 * dark-on-dark and Blog/VPS "disappear" while @ Dr.slon (not an <a>) stays.
 */
body:not(.dark) footer,
body:not(.dark) footer .footer-copyright,
body:not(.dark) footer .footer-nav a,
body:not(.dark) footer .footer-social a {
  color: #ffffff !important;
}

body:not(.dark) footer .footer-nav a {
  opacity: 0.9;
}

body:not(.dark) footer .footer-nav a:hover,
body:not(.dark) footer .footer-nav a:focus-visible {
  opacity: 1;
  color: #ffffff !important;
}

/* Footer nav: visible pill-buttons (VPS, Блог) + copyright @ Dr.slon below */
footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin-bottom: 1.1rem;
}

footer .footer-nav a {
  color: #ffffff !important;
  opacity: 1;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  transition:
    background-color var(--ct-duration) var(--ct-ease),
    border-color var(--ct-duration) var(--ct-ease),
    transform var(--ct-duration) var(--ct-ease),
    opacity var(--ct-duration) var(--ct-ease);
}

footer .footer-nav a:hover,
footer .footer-nav a:focus-visible {
  opacity: 1;
  background: rgba(76, 63, 242, 0.45);
  border-color: rgba(165, 156, 247, 0.65);
  color: #ffffff !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 63, 242, 0.35);
}

footer .footer-nav a:active {
  transform: scale(0.98);
}

footer .footer-copyright {
  color: #ffffff !important;
  opacity: 0.9;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   Playful light background (day mode) + soft dark depth
   Brand #4c3ff2 · restrained mesh, not neon AI-glow
   ═══════════════════════════════════════════════════════════ */

/* Outer page canvas — light */
body:not(.dark) {
  background-color: #eef1fb !important;
  background-image:
    radial-gradient(1200px 700px at 8% -10%, rgba(76, 63, 242, 0.18), transparent 55%),
    radial-gradient(900px 600px at 92% 8%, rgba(56, 189, 248, 0.16), transparent 50%),
    radial-gradient(800px 500px at 70% 100%, rgba(244, 114, 182, 0.12), transparent 55%),
    radial-gradient(600px 400px at 20% 85%, rgba(167, 139, 250, 0.14), transparent 50%),
    linear-gradient(180deg, #f4f6ff 0%, #eef1fb 40%, #f8f5ff 100%) !important;
  background-attachment: fixed;
  min-height: 100dvh;
}

/* Soft floating orbs (pseudo — no extra DOM) */
body:not(.dark)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(76, 63, 242, 0.09) 0 80px, transparent 81px),
    radial-gradient(circle at 85% 55%, rgba(14, 165, 233, 0.08) 0 110px, transparent 112px),
    radial-gradient(circle at 55% 20%, rgba(236, 72, 153, 0.06) 0 70px, transparent 72px),
    radial-gradient(circle at 40% 75%, rgba(99, 102, 241, 0.07) 0 95px, transparent 97px);
  opacity: 1;
}

/* Dot grid texture */
body:not(.dark)::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image: radial-gradient(rgba(76, 63, 242, 0.18) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 85%);
}

/* Keep content above decorative layers (do NOT force skip-link relative — it must stay off-screen) */
body:not(.dark) > .container,
body:not(.dark) > .cookie-alert {
  position: relative;
  z-index: 1;
}

/* Light main shell — glass card over playful canvas */
body:not(.dark) .main-section {
  background-color: rgba(255, 255, 255, 0.82) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 255, 0.88) 45%, rgba(243, 240, 255, 0.9) 100%),
    url("../images/inner-bg.webp") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, right top !important;
  background-size: cover, auto !important;
  box-shadow:
    0 4px 6px rgba(76, 63, 242, 0.04),
    0 18px 50px rgba(10, 20, 32, 0.08),
    0 0 0 1px rgba(76, 63, 242, 0.06) !important;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

/* Hero area soft wash */
body:not(.dark) .hero-section {
  position: relative;
}

body:not(.dark) .hero-section::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: -20%;
  height: 140%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 80% at 20% 40%, rgba(76, 63, 242, 0.1), transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 30%, rgba(56, 189, 248, 0.08), transparent 55%);
  border-radius: 40%;
}

/* Tool cards lift a bit more on light playful canvas */
body:not(.dark) .content-cats-inner {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 12px rgba(76, 63, 242, 0.05);
}

body:not(.dark) .content-cats-inner:hover {
  box-shadow: 0 10px 28px rgba(76, 63, 242, 0.12);
}

/* Search pill slightly glassy */
body:not(.dark) .main-search-sec input {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 18px rgba(76, 63, 242, 0.08);
}

/* Dark mode: subtle depth, not flat black */
body.dark {
  background-color: #12131a !important;
  background-image:
    radial-gradient(900px 500px at 10% 0%, rgba(76, 63, 242, 0.16), transparent 55%),
    radial-gradient(700px 400px at 90% 20%, rgba(56, 189, 248, 0.08), transparent 50%),
    linear-gradient(180deg, #14151d 0%, #12131a 50%, #0f1016 100%) !important;
  background-attachment: fixed;
}

body.dark .main-section {
  background-color: rgba(28, 29, 36, 0.94) !important;
  background-image: none !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* Reduced motion / transparency */
@media (prefers-reduced-transparency: reduce) {
  body:not(.dark) .main-section {
    background-color: #ffffff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.dark),
  body.dark {
    background-attachment: scroll;
  }
}

/* P2 CWV mobile paint rules live at file end (cascade winner, max-width 991). */


/* ═══════════════════════════════════════════════════════════
   Mobile / tablet pass 3.4.11 — iPhone · iPad · small phones
   Subagent audits: header, homepage/tools, partner ads
   ═══════════════════════════════════════════════════════════ */

:root {
  --ct-sticky-header-h: calc(3.6rem + env(safe-area-inset-top, 0px));
}

/* Alpine x-cloak */
[x-cloak] {
  display: none !important;
}

/* Real scrim (replaces non-clickable ::before for dismiss) */
.ct-nav-scrim {
  display: none;
}

@media only screen and (max-width: 991px) {
  /* Base positioning only; show/hide via ct-nav-open (see production fix at EOF) */
  .ct-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(10, 20, 32, 0.4);
    -webkit-tap-highlight-color: transparent;
  }

  body.dark .ct-nav-scrim {
    background: rgba(0, 0, 0, 0.55);
  }

  /* Scroll lock while drawer open */
  html.ct-nav-open,
  body.ct-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    /* keep drawer scrollable; only lock document scroll */
  }

  /* Burger + chrome above scrim / drawer edge */
  #navbar-toggler.nav-btn {
    position: relative;
    z-index: 10001;
  }

  header .header-language-btn-group,
  header .login-btn-main {
    position: relative;
    z-index: 10000;
  }

  /* Cluster controls: only first chrome group gets margin-left:auto */
  header .header-language-btn-group {
    margin-left: 0.3rem !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
  }

  header .navbar-brand + .header-navbar + .header-language-btn-group,
  header .navbar-brand + .header-language-btn-group {
    margin-left: auto !important;
  }

  header .nav-btn {
    margin-left: 0.25rem;
  }

  /* Drawer: fluid width, dvh, safe-area, scroll */
  header .header-navbar {
    width: min(280px, 86vw) !important;
    left: calc(-1 * min(280px, 86vw)) !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: 12px !important;
    z-index: 9999 !important;
    box-sizing: border-box;
  }

  header .header-navbar.show {
    left: 0 !important;
  }

  .rtl header .header-navbar {
    left: auto !important;
    right: calc(-1 * min(280px, 86vw)) !important;
  }

  .rtl header .header-navbar.show {
    right: 0 !important;
    left: auto !important;
  }

  body.dark header .header-navbar,
  body.dark header .header-navbar.show {
    background-color: var(--ct-surface-1) !important;
    color: var(--ct-surface-ink);
  }

  body.dark header.mainPadding {
    background: color-mix(in srgb, var(--color-dark, #171717) 94%, transparent) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  header .header-navbar ul li a {
    min-height: var(--ct-tap-min);
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center;
  }
}

/* Language dropdown: 44px rows + safe max-width */
header .header-language-dd {
  z-index: 1050;
  max-height: min(300px, 70vh);
  max-width: min(220px, calc(100vw - 1.5rem));
  overflow-y: auto;
}

header .header-language-dd a {
  min-height: var(--ct-tap-min);
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

/* ≤575: single-row header, kill app.css 30×30 theme clip */
@media only screen and (max-width: 575px) {
  header nav.navbar,
  header.mainPadding .navbar {
    flex-wrap: nowrap !important;
    align-items: center;
    column-gap: 0.25rem;
    row-gap: 0;
  }

  header .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
    margin-right: 0.25rem;
  }

  header .navbar-brand img,
  header .navbar-brand .img-responsivee {
    max-height: 28px !important;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
  }

  header .header-language-btn-group.theme-change-color {
    width: auto !important;
    height: auto !important;
    min-width: var(--ct-tap-min);
    min-height: var(--ct-tap-min);
  }

  header .header-language-btn-group.theme-change-color .header-language-btn {
    width: var(--ct-tap-min) !important;
    height: var(--ct-tap-min) !important;
    min-width: var(--ct-tap-min) !important;
    min-height: var(--ct-tap-min) !important;
    padding: 0 !important;
  }

  .main-section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  header.mainPadding {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
}

@media only screen and (max-width: 390px) {
  header .navbar-brand img,
  header .navbar-brand .img-responsivee {
    max-height: 26px !important;
  }
}

/* ── iOS zoom: tool inputs ≥16px ─────────────────────────── */
.single-page-inner .custom-input,
.single-page-inner .custom-textarea,
.single-page-inner input.custom-input,
.single-page-inner textarea.custom-textarea,
.single-page-inner .form-control-sm,
.single-page-inner .input-group-sm > .form-control {
  font-size: 16px !important;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 991.98px) {
  .single-page-inner .custom-input {
    min-height: 44px;
    height: auto !important;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
}

/* Catalog / hero search — no iOS zoom */
.main-search-sec input,
#ct-tool-search {
  font-size: 16px !important;
}

/* ── Homepage tool cards: 1-col earlier (phones) ─────────── */
@media (max-width: 639.98px) {
  .content-sec .content-sec-inner .content-cats-sec .content-cats-col {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.content-sec .content-sec-inner .content-title-sec {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
}

/* ── Blog: unclip intro + 16:9 thumbs + hover transform ─── */
.single-page-sec .single-page-main-desc {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  line-height: 1.5 !important;
  max-width: min(62ch, 100%);
}

.blog-sec-image,
.blog-sec-col .blog-sec-image {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

.blog-single-image img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-sec-col {
  top: 0 !important;
}

.blog-sec-col:hover,
.blog-sec-col:focus-visible {
  top: 0 !important;
  transform: translateY(-3px);
}

@media (hover: none) {
  .blog-sec-col:hover {
    transform: none;
  }
}

/* Blog 2-up on tablet portrait */
@media (min-width: 576px) and (max-width: 991.98px) {
  .single-page-sec .row > .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── Tool sidebars / fixed widths ───────────────────────── */
@media (max-width: 767.98px) {
  .screen-recorder-tool .flex-fill.d-flex,
  .single-page-inner .flex-fill.d-flex.overflow-hidden {
    flex-direction: column !important;
    overflow: visible !important;
  }

  .screen-recorder-tool .sidebar,
  .single-page-inner .sidebar[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(10, 20, 32, 0.08);
  }

  body.dark .single-page-inner .sidebar[style*="width"] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .screen-recorder-tool [style*="width: 400px"],
  .single-page-inner [style*="width: 400px"],
  .single-page-inner [style*="width: 350px"],
  .single-page-inner [style*="width: 320px"] {
    width: min(100%, 400px) !important;
    max-width: 100% !important;
  }
}

/* ── Tables + long tokens ───────────────────────────────── */
.single-page-inner {
  overflow-x: clip;
}

.single-page-inner .table-responsive,
.single-page-inner .table-responsive-sm,
.ct-blog-content {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.single-page-sec > p,
.single-page-inner,
.tool-description-section,
.ct-blog-content {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ct-blog-content pre,
.single-page-inner pre,
.single-page-inner code {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ── reCAPTCHA fit ──────────────────────────────────────── */
.tool-recaptcha-wrapper {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 360px) {
  .tool-recaptcha-wrapper .g-recaptcha {
    transform: scale(0.92);
    transform-origin: left top;
  }
}

/* ── Footer stack + sticky search bleed ─────────────────── */
@media (max-width: 767.98px) {
  :root {
    --ct-sticky-header-h: calc(3.35rem + env(safe-area-inset-top, 0px));
  }

  footer .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-bottom: 1rem;
  }

  footer .footer-nav a {
    margin-right: 0 !important;
    font-size: 0.95rem !important;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff !important;
  }

  footer .footer-social a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .home-helping-sec {
    padding: 1.25rem 1.1rem !important;
    margin-bottom: 1rem;
  }

  main:has(#tools-catalog) .main-search-sec,
  .hero-section:not(.hero-section--tool) + .main-search-sec {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
  }

  .ct-tool-guide > p:has(> a.btn),
  .ct-tool-guide > p:has(> .custom--btn) {
    top: calc(var(--ct-sticky-header-h, 3.35rem) + 0.35rem);
    padding: 0.5rem;
  }

  .ct-tool-guide > p:has(> a.btn) > a.btn,
  .ct-tool-guide > p:has(> .custom--btn) > a.btn,
  .ct-tool-guide > p:has(> a.btn) > .custom--btn,
  .ct-tool-guide > p:has(> .custom--btn) > .custom--btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 991.98px) {
  .home-helping-sec h2,
  .home-helping-sec .h2 {
    font-size: clamp(1.25rem, 4vw, 1.6rem) !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 479.98px) {
  .cookie-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
  }

  .home-helping-sec .btn.custom--btn {
    width: 100%;
    justify-content: center;
  }
}

/* Disable old non-interactive body scrim when real scrim exists */
@media only screen and (max-width: 991px) {
  body:has(header .header-navbar.show)::before {
    content: none !important;
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-sec-col:hover,
  .blog-sec-col:focus-visible {
    transform: none !important;
  }

  .ct-nav-scrim {
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   Theme toggle fix 3.4.14 — logo + body.dark stay in sync
   ═══════════════════════════════════════════════════════════ */

/* Kill Bitflan dual-brand hide (only one brand was rendered → logo vanished) */
header .navbar-brand.dark,
header .navbar-brand.ct-brand,
header .navbar-brand.ct-brand.dark {
  display: inline-flex !important;
  align-items: center;
  max-width: min(184px, 42vw);
}

header .navbar-brand.ct-brand .ct-logo {
  display: none !important;
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
}

/* Light page → dark-ink logo (logo.png) */
body:not(.dark) header .navbar-brand .ct-logo--for-light {
  display: block !important;
}
body:not(.dark) header .navbar-brand .ct-logo--for-dark {
  display: none !important;
}

/* Dark page → light-ink logo (footer-logo.png) */
body.dark header .navbar-brand .ct-logo--for-dark {
  display: block !important;
}
body.dark header .navbar-brand .ct-logo--for-light {
  display: none !important;
}

/* Override app.css .dark header .navbar-brand:not(.dark) { display:none } */
.dark header .navbar-brand.ct-brand,
.dark header .navbar-brand:not(.dark) {
  display: inline-flex !important;
}

/* Make whole shell react clearly to theme (user must see more than logo) */
body.light .main-section,
body:not(.dark) .main-section {
  background-color: #ffffff;
  color: var(--ct-surface-ink, #0a1420);
}

body.dark .main-section {
  background-color: var(--color-dark, #171717);
  color: var(--ct-surface-ink, #f0f1f4);
}


/* ═══════════════════════════════════════════════════════════
   Mobile menu rebuild 3.4.15 — clean drawer (no Bootstrap collapse)
   ═══════════════════════════════════════════════════════════ */

/* Header row: logo left, controls right */
@media only screen and (max-width: 991px) {
  header.mainPadding nav.navbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
  }

  header .navbar-brand.ct-brand {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: auto !important;
  }

  header .theme-change-color {
    order: 2;
    margin-left: 0 !important;
  }

  header .header-language-btn-group:not(.theme-change-color) {
    order: 3;
    margin-left: 0 !important;
  }

  header .login-btn-main {
    order: 4;
  }

  #navbar-toggler.nav-btn {
    order: 5;
    margin-left: 0.15rem !important;
    z-index: 10002 !important;
    background: rgba(76, 63, 242, 0.1) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(76, 63, 242, 0.2) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    gap: 5px !important;
  }

  body:not(.dark) #navbar-toggler.nav-btn {
    background: rgba(10, 20, 32, 0.06) !important;
    border-color: rgba(10, 20, 32, 0.12) !important;
  }

  body:not(.dark) #navbar-toggler.nav-btn span {
    background-color: #0a1420 !important;
  }

  body.dark #navbar-toggler.nav-btn span {
    background-color: #f0f1f4 !important;
  }

  /* Hamburger → X when open */
  #navbar-toggler.nav-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    top: 0 !important;
  }
  #navbar-toggler.nav-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  #navbar-toggler.nav-btn[aria-expanded="true"] span:last-child {
    transform: translateY(-8px) rotate(-45deg);
    bottom: 0 !important;
  }

  /* Kill Bootstrap collapse hide + old off-canvas left:-250 */
  header .header-navbar.ct-nav-panel,
  header .ct-nav-panel {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(300px, 86vw) !important;
    max-width: 300px !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    z-index: 10000 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translate3d(-105%, 0, 0) !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
    border-right: 1px solid rgba(10, 20, 32, 0.08);
  }

  header .header-navbar.ct-nav-panel.is-open,
  header .header-navbar.ct-nav-panel.show,
  header .ct-nav-panel.is-open,
  header .ct-nav-panel.show {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto;
    box-shadow:
      16px 0 48px rgba(10, 20, 32, 0.28),
      6px 0 20px rgba(76, 63, 242, 0.12) !important;
  }

  body.dark header .header-navbar.ct-nav-panel,
  body.dark header .ct-nav-panel {
    background: #1c1d21 !important;
    border-right-color: rgba(255, 255, 255, 0.08);
    color: #f0f1f4;
  }

  /* Drawer header */
  .ct-nav-panel__head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: max(14px, env(safe-area-inset-top, 0px)) 14px 12px max(16px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid rgba(10, 20, 32, 0.08);
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
  }

  body.dark .ct-nav-panel__head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .ct-nav-panel__title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0a1420;
  }

  body.dark .ct-nav-panel__title {
    color: #f0f1f4;
  }

  .ct-nav-close {
    appearance: none;
    border: 0;
    background: rgba(10, 20, 32, 0.06);
    color: #0a1420;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 1.75rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  body.dark .ct-nav-close {
    background: rgba(255, 255, 255, 0.08);
    color: #f0f1f4;
  }

  .ct-nav-panel__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 10px 12px max(20px, env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  .ct-nav-panel__list li {
    margin: 0 !important;
    width: 100%;
  }

  .ct-nav-panel__list li a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #0a1420 !important;
    text-decoration: none !important;
    background: transparent;
  }

  .ct-nav-panel__list li a:hover,
  .ct-nav-panel__list li a:focus-visible {
    background: rgba(76, 63, 242, 0.1) !important;
    color: #4c3ff2 !important;
    outline: none;
  }

  body.dark .ct-nav-panel__list li a {
    color: #f0f1f4 !important;
  }

  body.dark .ct-nav-panel__list li a:hover,
  body.dark .ct-nav-panel__list li a:focus-visible {
    background: rgba(76, 63, 242, 0.22) !important;
    color: #c4bfff !important;
  }

  /* Single scrim only — kill CSS ::before double layer */
  body:has(header .header-navbar.show)::before,
  body:has(header .ct-nav-panel.is-open)::before,
  body:has(header .header-navbar.is-open)::before {
    content: none !important;
    display: none !important;
  }

  /* Scrim visibility owned by later "Mobile nav production fix" (ct-nav-open only).
     Never force display:block here — it permanently dimmed the page. */
  .ct-nav-scrim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    background: rgba(10, 20, 32, 0.45) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.dark .ct-nav-scrim {
    background: rgba(0, 0, 0, 0.55) !important;
  }
}

/* Desktop: hide drawer chrome, keep horizontal nav */
@media only screen and (min-width: 992px) {
  .ct-nav-panel__head,
  .ct-nav-close,
  .ct-nav-scrim {
    display: none !important;
  }

  /*
   * Hamburger must not appear on desktop — base button.nav-btn is
   * always display:inline-flex; mobile-only styles paint the bars.
   * Result without this: empty rounded square next to RU/theme.
   */
  #navbar-toggler.nav-btn,
  header button.nav-btn#navbar-toggler,
  header .nav-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  header .header-navbar.ct-nav-panel,
  header .ct-nav-panel {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    padding: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    flex-grow: initial;
  }

  header .ct-nav-panel__list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  header .ct-nav-panel__list li {
    margin-right: 28px !important;
  }

  header .ct-nav-panel__list li:last-child {
    margin-right: 0 !important;
  }

  header .ct-nav-panel__list li a {
    min-height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    background: transparent !important;
  }

  body:not(.dark) header .ct-nav-panel__list li a {
    color: #0a1420 !important;
  }

  body.dark header .ct-nav-panel__list li a {
    color: #ffffff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  header .ct-nav-panel {
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   Production polish 3.4.16 — search empty, catalog, tool UX, perf
   ═══════════════════════════════════════════════════════════ */

.ct-search-empty {
  margin: 0.65rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(76, 63, 242, 0.08);
  border: 1px solid rgba(76, 63, 242, 0.16);
  color: var(--ct-surface-ink, #0a1420);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
}

body.dark .ct-search-empty {
  background: rgba(76, 63, 242, 0.16);
  border-color: rgba(165, 156, 247, 0.25);
  color: #f0f1f4;
}

.ct-search-empty[hidden] {
  display: none !important;
}

/* Catalog: clearer cards + 1-col phones */
@media (max-width: 639.98px) {
  .content-sec .content-cats-sec {
    gap: 0.65rem;
  }
  .content-sec .content-cats-col .content-cats-inner {
    padding: 0.9rem 1rem !important;
    min-height: 4.5rem;
  }
}

/* Tool page result / form baseline */
.single-page-inner .alert,
.single-page-inner .result-container,
.single-page-inner .results-list,
.single-page-inner [class*="result"] {
  overflow-wrap: anywhere;
}

.single-page-inner .btn.custom--btn,
.single-page-inner button.custom--btn,
.single-page-inner .button__lg {
  min-height: 44px;
}

/* Copy-friendly monospace outputs */
.single-page-inner pre,
.single-page-inner .console-output,
.single-page-inner textarea.result,
.single-page-inner .form-control[readonly] {
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}

/* Partner ads: content-visibility reduces offscreen work */
.partner-ad-slot {
  content-visibility: auto;
  contain-intrinsic-size: 1px 120px;
}

/* Mobile sticky header: no blur (solid bg set in P2 CWV block above) */
@media (max-width: 767.98px) {
  header.mainPadding {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   Showcase + search + unified result 3.4.17
   ═══════════════════════════════════════════════════════════ */

.ct-search-wrap .ct-search-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.ct-search-wrap .ct-search-row input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
}

.ct-search-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ct-brand, #4c3ff2);
  white-space: nowrap;
  opacity: 0.9;
}

.ct-search-hint {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  opacity: 0.72;
  line-height: 1.4;
}

.ct-search-hint[hidden] {
  display: none !important;
}

/* Showcase grid */
.ct-showcase {
  margin: 0 0 1.75rem;
  padding: 1.15rem 1.1rem 1.25rem;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(76, 63, 242, 0.07), rgba(56, 189, 248, 0.05));
  border: 1px solid rgba(76, 63, 242, 0.12);
}

body.dark .ct-showcase {
  background: linear-gradient(145deg, rgba(76, 63, 242, 0.14), rgba(0, 0, 0, 0.2));
  border-color: rgba(165, 156, 247, 0.18);
}

.ct-showcase__head {
  margin-bottom: 0.9rem;
}

.ct-showcase__title {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ct-surface-ink, #0a1420);
}

body.dark .ct-showcase__title {
  color: #f0f1f4;
}

.ct-showcase__sub {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.78;
  line-height: 1.4;
}

.ct-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.65rem;
}

@media (min-width: 768px) {
  .ct-showcase__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
  }
}

.ct-showcase__card {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.75rem 0.8rem;
  min-height: 4.5rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(10, 20, 32, 0.08);
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  box-shadow: 0 2px 8px rgba(10, 20, 32, 0.04);
}

body.dark .ct-showcase__card {
  background: rgba(28, 29, 33, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}

.ct-showcase__card:hover,
.ct-showcase__card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(76, 63, 242, 0.35);
  box-shadow: 0 8px 22px rgba(76, 63, 242, 0.12);
  outline: none;
}

.ct-showcase__icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 63, 242, 0.12);
  color: #4c3ff2;
  font-size: 0.95rem;
}

body.dark .ct-showcase__icon {
  background: rgba(76, 63, 242, 0.22);
  color: #c4bfff;
}

.ct-showcase__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ct-showcase__name {
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ct-showcase__sum {
  font-size: 0.75rem;
  line-height: 1.3;
  opacity: 0.72;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ct-catalog-head {
  margin: 0.25rem 0 0.85rem;
}

.ct-catalog-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Unified result shell */
.ct-result {
  margin: 0.85rem 0 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(10, 20, 32, 0.1);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(10, 20, 32, 0.05);
}

body.dark .ct-result {
  background: #1c1d21;
  border-color: rgba(255, 255, 255, 0.1);
}

.ct-result__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid rgba(10, 20, 32, 0.07);
  background: rgba(10, 20, 32, 0.03);
}

body.dark .ct-result__bar {
  border-bottom-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
}

.ct-result__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.ct-result__badge {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}

.ct-result--success .ct-result__badge { background: #16a34a; }
.ct-result--error .ct-result__badge { background: #dc2626; }
.ct-result--info .ct-result__badge { background: #4c3ff2; }
.ct-result--loading .ct-result__badge {
  background: #4c3ff2;
  animation: ct-result-pulse 1s ease infinite;
}

@keyframes ct-result-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.ct-result__title {
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.ct-result__copy {
  appearance: none;
  border: 1px solid rgba(76, 63, 242, 0.28);
  background: rgba(76, 63, 242, 0.1);
  color: #4c3ff2;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 36px;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.ct-result__copy:hover,
.ct-result__copy:focus-visible {
  background: #4c3ff2;
  color: #fff;
  outline: none;
}

.ct-result__copy.is-copied {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.ct-result__body {
  padding: 0.85rem 1rem 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ct-result--error {
  border-color: rgba(220, 38, 38, 0.28);
}

.ct-result--error .ct-result__bar {
  background: rgba(220, 38, 38, 0.08);
}

.ct-result--success {
  border-color: rgba(22, 163, 74, 0.22);
}

/* Copy field */
.ct-copy-field {
  margin: 0.75rem 0;
}

.ct-copy-field__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.ct-copy-field__input {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem !important;
}

.ct-copy-field__btn {
  flex: 0 0 auto;
  min-height: 44px;
  align-self: flex-start;
}

@media (max-width: 575.98px) {
  .ct-showcase__grid {
    grid-template-columns: 1fr 1fr;
  }
  .ct-copy-field__btn {
    width: 100%;
  }
}

/* Tool shell: any .console-output inside result looks cleaner */
.ct-result .console-output {
  margin: 0;
  border-radius: 10px;
}


/* ═══════════════════════════════════════════════════════════
   DARK CONTRAST FIX 3.4.19
   app.css sets body/p/h1/section { color: var(--color-black) }
   → black-on-dark = unreadable. Force light ink + form fields.
   ═══════════════════════════════════════════════════════════ */

body.dark {
  --ct-surface-muted: #c4c9d2;
  --ct-surface-ink: #f1f3f5;
  color: #e8eaed;
}

body.dark,
body.dark p,
body.dark form,
body.dark h1,
body.dark .h1,
body.dark h2,
body.dark .h2,
body.dark h3,
body.dark .h3,
body.dark h4,
body.dark .h4,
body.dark h5,
body.dark .h5,
body.dark h6,
body.dark .h6,
body.dark ul,
body.dark li,
body.dark ol,
body.dark article,
body.dark aside,
body.dark section,
body.dark header,
body.dark nav,
body.dark main,
body.dark label,
body.dark .custom-label,
body.dark .main-subtitle,
body.dark .content-title-sec,
body.dark .content-title-sec *,
body.dark .hero-section,
body.dark .hero-section p,
body.dark .ct-catalog-title,
body.dark .ct-showcase__title,
body.dark .ct-showcase__sub,
body.dark .ct-showcase__name,
body.dark .ct-search-hint,
body.dark .ct-search-count,
body.dark .ct-result__title,
body.dark .ct-result__body,
body.dark .single-page-sec,
body.dark .single-page-inner,
body.dark .single-page-main-title,
body.dark .single-page-main-desc,
body.dark .tool-description-section,
body.dark .blog-sec-col,
body.dark .blog-sec-col h2,
body.dark .blog-title-sec {
  color: #e8eaed !important;
}

/* Muted secondary text — still ≥ readable on #1c1d21 */
body.dark .content-cats-inner p,
body.dark .ct-showcase__sum,
body.dark .text-muted,
body.dark .text-secondary,
body.dark .ct-tool-guide-link-hint,
body.dark small,
body.dark .small {
  color: #c4c9d2 !important;
}

/* Headings extra bright */
body.dark .hero-section h1,
body.dark .hero-section .h1,
body.dark .content-cats-inner h2,
body.dark .content-cats-inner .h2,
body.dark .main-subtitle {
  color: #ffffff !important;
}

body.dark .hero-section .hero-small-title {
  color: #c4bfff !important;
}

/* Cards */
body.dark .content-cats-inner {
  background-color: #25262e !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e8eaed !important;
}

body.dark .content-cats-inner:hover,
body.dark .content-cats-inner:focus-visible {
  border-bottom-color: #a59cf7 !important;
  background-color: #2a2b35 !important;
}

/* Showcase */
body.dark .ct-showcase {
  background: linear-gradient(145deg, rgba(76, 63, 242, 0.22), rgba(30, 32, 44, 0.95)) !important;
  border-color: rgba(165, 156, 247, 0.28) !important;
}

body.dark .ct-showcase__card {
  background: #25262e !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e8eaed !important;
}

body.dark .ct-showcase__card:hover,
body.dark .ct-showcase__card:focus-visible {
  border-color: rgba(165, 156, 247, 0.55) !important;
  background: #2c2d38 !important;
}

body.dark .ct-showcase__icon {
  background: rgba(76, 63, 242, 0.35) !important;
  color: #ddd6ff !important;
}

/* Search */
body.dark .main-search-sec input,
body.dark #ct-tool-search,
body.dark #ct-tool-search-page {
  background: #25262e !important;
  color: #f1f3f5 !important;
  border-color: rgba(165, 156, 247, 0.35) !important;
  caret-color: #c4bfff;
}

body.dark .main-search-sec input::placeholder,
body.dark #ct-tool-search::placeholder {
  color: #9aa0a6 !important;
  opacity: 1 !important;
}

body.dark .main-search-sec input:focus {
  border-color: #a59cf7 !important;
  box-shadow: 0 0 0 3px rgba(76, 63, 242, 0.35) !important;
}

body.dark .ct-search-empty {
  background: rgba(76, 63, 242, 0.2) !important;
  border-color: rgba(165, 156, 247, 0.35) !important;
  color: #f1f3f5 !important;
}

/* Forms / tool pages */
body.dark .single-page-inner,
body.dark .single-page-inner .form-control,
body.dark .single-page-inner .form-select,
body.dark .single-page-inner textarea,
body.dark .single-page-inner input,
body.dark .custom-input,
body.dark .custom-textarea,
body.dark input.custom-input,
body.dark textarea.custom-textarea,
body.dark .form-control,
body.dark .form-select {
  background-color: #25262e !important;
  color: #f1f3f5 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

body.dark .custom-input::placeholder,
body.dark .custom-textarea::placeholder,
body.dark .form-control::placeholder {
  color: #9aa0a6 !important;
  opacity: 1 !important;
}

body.dark .custom-label,
body.dark label,
body.dark .form-check-label {
  color: #e8eaed !important;
}

/* Results */
body.dark .ct-result {
  background: #25262e !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #e8eaed !important;
}

body.dark .ct-result__bar {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark .ct-result__copy {
  color: #ddd6ff !important;
  border-color: rgba(165, 156, 247, 0.4) !important;
  background: rgba(76, 63, 242, 0.25) !important;
}

body.dark .ct-result__copy:hover,
body.dark .ct-result__copy:focus-visible {
  background: #6358f5 !important;
  color: #fff !important;
}

body.dark .console-output {
  background: #12131a !important;
  color: #e8eaed !important;
}

/* Links (not buttons) */
body.dark a:not(.btn):not(.custom--btn):not(.header-language-btn):not(.nav-btn) {
  color: #c4bfff;
}

body.dark a:not(.btn):not(.custom--btn):hover,
body.dark a:not(.btn):not(.custom--btn):focus-visible {
  color: #ddd6ff;
}

/* Category title strip */
body.dark .content-sec .content-sec-inner .content-title-sec {
  color: #f1f3f5 !important;
  background: rgba(28, 29, 36, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Blog cards */
body.dark .blog-sec-col {
  background: #25262e !important;
  color: #e8eaed !important;
}

body.dark .blog-sec-col > p {
  color: #c4c9d2 !important;
}

/* Header controls on dark */
body.dark header .header-language-btn-group .header-language-btn {
  background: #2a2b35 !important;
  color: #f1f3f5 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

body.dark header .header-language-btn-group .header-language-btn .text,
body.dark .theme-change-color .header-language-btn i {
  color: #f1f3f5 !important;
}

body.dark #navbar-toggler.nav-btn span {
  background-color: #f1f3f5 !important;
}

/* Tables */
body.dark .table,
body.dark .table td,
body.dark .table th {
  color: #e8eaed !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Unlock / muted boxes */
body.dark .text-black {
  color: #f1f3f5 !important;
}

/* Footer stays light text (already white pills) */
body.dark footer,
body.dark footer p,
body.dark footer .footer-copyright {
  color: #e8eaed !important;
}

/* Icon strokes/fills on cards */
body.dark .content-cats-icon svg,
body.dark .content-cats-icon svg path,
body.dark .content-cats-icon svg [stroke],
body.dark .single-page-icon svg path {
  stroke: #c4bfff !important;
  fill: #c4bfff !important;
}

body.dark .content-cats-icon svg[fill="none"],
body.dark .content-cats-icon svg[fill="none"] * {
  fill: none !important;
  stroke: #c4bfff !important;
}


/* Tool-page lazy search dropdown */
.ct-tool-search .main-search-dd {
  display: none;
  max-height: min(60vh, 360px);
  overflow-y: auto;
  z-index: 50;
}
.ct-tool-search .main-search-dd.show:not([hidden]),
.ct-tool-search .main-search-dd:not([hidden]) {
  display: block;
}
.ct-tool-search .main-search-dd li a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
}
.ct-tool-search .main-search-dd li a:hover,
.ct-tool-search .main-search-dd li a:focus-visible {
  background: rgba(76, 63, 242, 0.1);
}
body.dark .ct-tool-search .main-search-dd {
  background: #25262e;
  border: 1px solid rgba(255,255,255,0.12);
}
body.dark .ct-tool-search .main-search-dd li a {
  color: #e8eaed !important;
}
body.dark .ct-tool-search .main-search-dd small {
  color: #c4c9d2 !important;
}


/* ═══════════════════════════════════════════════════════════
   Homepage P1 — progressive catalog + JSON search dropdown
   ═══════════════════════════════════════════════════════════ */

.ct-search-wrap.main-search-sec {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.ct-search-wrap .main-search-dd {
  display: none;
  max-height: min(60vh, 360px);
  overflow-y: auto;
  z-index: 50;
  white-space: normal;
}

.ct-search-wrap .main-search-dd.show:not([hidden]),
.ct-search-wrap .main-search-dd:not([hidden]) {
  display: block;
}

.ct-search-wrap .main-search-dd li a {
  display: block;
  white-space: normal;
  line-height: 1.35;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
}

.ct-search-wrap .main-search-dd li a small {
  white-space: normal;
  display: inline-block;
  margin-top: 0.15rem;
  opacity: 0.8;
}

.ct-search-wrap .main-search-dd li.ct-search-active a,
.ct-search-wrap .main-search-dd li a:hover,
.ct-search-wrap .main-search-dd li a:focus-visible {
  background: rgba(76, 63, 242, 0.1);
}

body.dark .ct-search-wrap .main-search-dd {
  background: #25262e;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

body.dark .ct-search-wrap .main-search-dd li a {
  color: #e8eaed !important;
}

body.dark .ct-search-wrap .main-search-dd small {
  color: #c4c9d2 !important;
}

/* Category progressive load — tools + toggle under title (column catalog) */
.ct-cat-main {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.ct-cat-main .content-cats-sec {
  width: 100%;
  flex: 0 1 auto;
}

/* Toggle must not collapse into a narrow left rail */
.ct-cat-toggle {
  align-self: flex-start;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.ct-cat-toggle,
.ct-cat-expand-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.65rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid rgba(76, 63, 242, 0.35);
  background: rgba(76, 63, 242, 0.06);
  color: var(--ct-brand, #4c3ff2);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.ct-cat-toggle:hover,
.ct-cat-toggle:focus-visible,
.ct-cat-expand-all:hover,
.ct-cat-expand-all:focus-visible {
  background: rgba(76, 63, 242, 0.14);
  border-color: var(--ct-brand, #4c3ff2);
  outline: none;
}

body.dark .ct-cat-toggle,
body.dark .ct-cat-expand-all {
  background: rgba(76, 63, 242, 0.12);
  border-color: rgba(165, 156, 247, 0.35);
  color: #c4bfff;
}

body.dark .ct-cat-toggle:hover,
body.dark .ct-cat-expand-all:hover {
  background: rgba(76, 63, 242, 0.22);
}

.ct-cat--open .ct-cat-toggle {
  margin-top: 1rem;
}

.ct-catalog-actions {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 1.5rem;
}

/* Lightweight client-rendered card icons */
.content-cats-icon.ct-lazy-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--ct-brand, #4c3ff2);
}

body.dark .content-cats-icon.ct-lazy-icon {
  color: #c4bfff;
}

.content-cats-icon.ct-lazy-icon i {
  line-height: 1;
}

/* While search dropdown is active, catalog is hidden via JS (hidden attr) */
#tools-catalog[hidden],
[data-ct-catalog][hidden] {
  display: none !important;
}

.ct-showcase.d-none {
  display: none !important;
}

/* Personal shelves (recents / favorites) — slightly softer than popular showcase */
.ct-personal {
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.06), rgba(76, 63, 242, 0.05));
  border-color: rgba(56, 189, 248, 0.14);
}

body.dark .ct-personal {
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.08), rgba(76, 63, 242, 0.12));
  border-color: rgba(125, 211, 252, 0.14);
}

.ct-personal--favorites {
  background: linear-gradient(145deg, rgba(234, 179, 8, 0.08), rgba(76, 63, 242, 0.05));
  border-color: rgba(234, 179, 8, 0.18);
}

body.dark .ct-personal--favorites {
  background: linear-gradient(145deg, rgba(234, 179, 8, 0.1), rgba(76, 63, 242, 0.12));
  border-color: rgba(250, 204, 21, 0.16);
}

.ct-result__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   3.4.29 - Lang segmented control + mobile theme/search polish
   ═══════════════════════════════════════════════════════════ */

/* RU | EN segmented toggle (replaces dropdown) */
header .ct-lang-seg {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 0 !important;
  padding: 0 !important;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(10, 20, 32, 0.12);
  background: rgba(255, 255, 255, 0.95);
  min-height: 44px;
  box-shadow: none;
}

body.dark header .ct-lang-seg {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(37, 38, 46, 0.96);
}

header .ct-lang-seg__btn {
  min-width: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 0.7rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #0a1420 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

header .ct-lang-seg__btn + .ct-lang-seg__btn {
  border-left: 1px solid rgba(10, 20, 32, 0.1) !important;
}

body.dark header .ct-lang-seg__btn {
  color: #e8eaed !important;
}

body.dark header .ct-lang-seg__btn + .ct-lang-seg__btn {
  border-left-color: rgba(255, 255, 255, 0.12) !important;
}

header .ct-lang-seg__btn.is-active {
  background: rgba(76, 63, 242, 0.14) !important;
  color: #4c3ff2 !important;
}

body.dark header .ct-lang-seg__btn.is-active {
  background: rgba(76, 63, 242, 0.28) !important;
  color: #c4bfff !important;
}

header .ct-lang-seg__btn:hover,
header .ct-lang-seg__btn:focus-visible {
  background: rgba(76, 63, 242, 0.08) !important;
  outline: none;
}

header .ct-lang-seg__btn.is-active:hover {
  background: rgba(76, 63, 242, 0.18) !important;
}

/* Theme button: ensure icon always readable */
header .theme-change-color .header-language-btn {
  color: #0a1420 !important;
}
header .theme-change-color .header-language-btn .text,
header .theme-change-color .header-language-btn i {
  color: inherit !important;
}
body.dark header .theme-change-color .header-language-btn {
  color: #f0f1f4 !important;
}

/* Mobile CWV cascade winner (max 991): scroll bg, no glass, solid sticky chrome */
@media only screen and (max-width: 991px) {
  body:not(.dark),
  body.dark {
    background-attachment: scroll !important;
  }
  body:not(.dark)::before,
  body:not(.dark)::after {
    display: none !important;
  }
  body:not(.dark) .main-section {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #ffffff !important;
    background-image: none !important;
  }
  body.dark .main-section {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: #1c1d24 !important;
  }
  header.mainPadding,
  body:not(.dark) header.mainPadding {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
  }
  body.dark header.mainPadding {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #171717 !important;
  }
  main:has(#tools-catalog) .main-search-sec,
  .hero-section:not(.hero-section--tool) + .main-search-sec {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #f9f9fb !important;
  }
  body.dark main:has(#tools-catalog) .main-search-sec,
  body.dark .hero-section:not(.hero-section--tool) + .main-search-sec {
    background: #1c1d21 !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   Mobile nav production fix (drawer UX)
   Root causes addressed:
   1) .ct-nav-scrim { display:block !important } beat Alpine x-show,
      so the dim/blur layer stayed on forever (page looked "crazy").
   2) Burger bars were width:0 — empty <span> + align-items:center.
   3) Theme/lang chrome (z-index 10000) painted on top of the open drawer.
   ═══════════════════════════════════════════════════════════ */

@media only screen and (max-width: 991px) {
  /* --- Scrim: hidden unless ct-nav-open (toggled by Alpine onNavOpenChange) --- */
  .ct-nav-scrim {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10040 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(10, 20, 32, 0.48) !important;
    /* solid dim only — blur looked like a white/frosted wall on mobile GPUs */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  html.ct-nav-open .ct-nav-scrim,
  body.ct-nav-open .ct-nav-scrim {
    display: block !important;
    pointer-events: auto !important;
  }

  body.dark .ct-nav-scrim {
    background: rgba(0, 0, 0, 0.58) !important;
  }

  /* Kill legacy CSS-only scrims so we never double-dim */
  body:has(header .header-navbar.show)::before,
  body:has(header .header-navbar.is-open)::before,
  body:has(header .ct-nav-panel.is-open)::before,
  body:has(header .ct-nav-panel.show)::before,
  body.ct-nav-open::before {
    content: none !important;
    display: none !important;
  }

  /* --- Scroll lock (document only; drawer keeps overflow-y:auto) --- */
  html.ct-nav-open,
  body.ct-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* Fixed drawer must not be clipped by shell */
  body.ct-nav-open .main-section,
  body.ct-nav-open .container {
    overflow: visible !important;
  }

  /* --- Drawer panel: solid surface, above scrim, below burger --- */
  header .header-navbar.ct-nav-panel,
  header .ct-nav-panel {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(300px, 86vw) !important;
    max-width: 300px !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #0a1420 !important;
    z-index: 10050 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* slide via transform only (ignore legacy left:-250 fights) */
    transform: translate3d(-105%, 0, 0) !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none;
    border-right: 1px solid rgba(10, 20, 32, 0.08);
    box-sizing: border-box;
  }

  header .header-navbar.ct-nav-panel.is-open,
  header .header-navbar.ct-nav-panel.show,
  header .ct-nav-panel.is-open,
  header .ct-nav-panel.show {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto;
    box-shadow:
      16px 0 48px rgba(10, 20, 32, 0.28),
      6px 0 20px rgba(76, 63, 242, 0.12) !important;
  }

  body.dark header .header-navbar.ct-nav-panel,
  body.dark header .ct-nav-panel {
    background: #1c1d21 !important;
    color: #f0f1f4 !important;
    border-right-color: rgba(255, 255, 255, 0.08);
  }

  /* RTL: slide from right */
  .rtl header .header-navbar.ct-nav-panel,
  .rtl header .ct-nav-panel {
    left: auto !important;
    right: 0 !important;
    border-right: 0;
    border-left: 1px solid rgba(10, 20, 32, 0.08);
    transform: translate3d(105%, 0, 0) !important;
  }

  .rtl header .header-navbar.ct-nav-panel.is-open,
  .rtl header .header-navbar.ct-nav-panel.show,
  .rtl header .ct-nav-panel.is-open,
  .rtl header .ct-nav-panel.show {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Drawer head + close */
  .ct-nav-panel__head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: max(14px, env(safe-area-inset-top, 0px)) 14px 12px max(16px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid rgba(10, 20, 32, 0.08);
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
  }

  body.dark .ct-nav-panel__head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .ct-nav-panel__title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0a1420;
  }

  body.dark .ct-nav-panel__title {
    color: #f0f1f4;
  }

  .ct-nav-close {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: rgba(10, 20, 32, 0.08);
    color: #0a1420;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    font-size: 1.75rem;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
  }

  body.dark .ct-nav-close {
    background: rgba(255, 255, 255, 0.1);
    color: #f0f1f4;
  }

  .ct-nav-panel__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 10px 12px max(20px, env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  .ct-nav-panel__list li {
    margin: 0 !important;
    width: 100%;
  }

  .ct-nav-panel__list li a {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #0a1420 !important;
    text-decoration: none !important;
    background: transparent;
  }

  .ct-nav-panel__list li a:hover,
  .ct-nav-panel__list li a:focus-visible {
    background: rgba(76, 63, 242, 0.1) !important;
    color: #4c3ff2 !important;
    outline: none;
  }

  body.dark .ct-nav-panel__list li a {
    color: #f0f1f4 !important;
  }

  body.dark .ct-nav-panel__list li a:hover,
  body.dark .ct-nav-panel__list li a:focus-visible {
    background: rgba(76, 63, 242, 0.22) !important;
    color: #c4bfff !important;
  }

  /* --- Header chrome: never cover the open drawer --- */
  header .header-language-btn-group,
  header .login-btn-main {
    position: relative;
    z-index: 1030;
  }

  body.ct-nav-open header .header-language-btn-group,
  body.ct-nav-open header .login-btn-main {
    z-index: 1 !important;
  }

  /* --- Burger: 44×44, three visible bars, above scrim/drawer --- */
  #navbar-toggler.nav-btn,
  header button.nav-btn#navbar-toggler {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* empty spans need stretch for width */
    justify-content: center !important;
    order: 5;
    position: relative;
    z-index: 10060 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-left: 0.15rem !important;
    padding: 11px 10px !important;
    gap: 5px !important;
    box-sizing: border-box !important;
    background: rgba(76, 63, 242, 0.1) !important;
    border: 1px solid rgba(76, 63, 242, 0.22) !important;
    border-radius: 10px !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  body:not(.dark) #navbar-toggler.nav-btn {
    background: rgba(10, 20, 32, 0.06) !important;
    border-color: rgba(10, 20, 32, 0.14) !important;
  }

  #navbar-toggler.nav-btn span {
    display: block !important;
    width: 100% !important;
    height: 2.5px !important;
    min-height: 2.5px !important;
    max-height: 2.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 2.5px !important;
    border-radius: 2px !important;
    background-color: #0a1420 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    opacity: 1 !important;
    transform-origin: center !important;
    transition:
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.18s ease !important;
  }

  body.dark #navbar-toggler.nav-btn span {
    background-color: #f0f1f4 !important;
  }

  /* Hamburger → X (gap 5 + bar 2.5 → center-to-center span1↔span3 = 15) */
  #navbar-toggler.nav-btn[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg) !important;
  }
  #navbar-toggler.nav-btn[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  #navbar-toggler.nav-btn[aria-expanded="true"] span:last-child {
    transform: translateY(-7.5px) rotate(-45deg) !important;
  }
}

/* Desktop ≥992: keep hamburger + drawer chrome gone (do not regress) */
@media only screen and (min-width: 992px) {
  .ct-nav-panel__head,
  .ct-nav-close,
  .ct-nav-scrim {
    display: none !important;
  }

  #navbar-toggler.nav-btn,
  header button.nav-btn#navbar-toggler,
  header .nav-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  header .header-navbar.ct-nav-panel,
  header .ct-nav-panel {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    padding: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    z-index: auto !important;
  }

  header .ct-nav-panel__list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  header .ct-nav-panel__list li {
    margin-right: 28px !important;
    width: auto;
  }

  header .ct-nav-panel__list li:last-child {
    margin-right: 0 !important;
  }

  header .ct-nav-panel__list li a {
    min-height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    background: transparent !important;
  }

  body:not(.dark) header .ct-nav-panel__list li a {
    color: #0a1420 !important;
  }

  body.dark header .ct-nav-panel__list li a {
    color: #ffffff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  header .ct-nav-panel,
  #navbar-toggler.nav-btn span {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   3.4.32 - Mobile lang switcher: compact, clear active, no crush
   ═══════════════════════════════════════════════════════════ */

@media only screen and (max-width: 991px) {
  /* Cluster: theme | RU EN | burger — tight but tappable */
  header .theme-change-color,
  header .ct-lang-seg,
  header #navbar-toggler.nav-btn {
    flex: 0 0 auto !important;
  }

  header .ct-lang-seg {
    min-height: 40px !important;
    height: 40px !important;
    max-width: none;
    border-radius: 10px !important;
    border: 1px solid rgba(10, 20, 32, 0.14) !important;
    background: #f4f5f8 !important;
    box-shadow: none !important;
    overflow: hidden;
  }

  body.dark header .ct-lang-seg {
    background: #25262e !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
  }

  header .ct-lang-seg__btn {
    min-width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 0.55rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #5a6570 !important;
    background: transparent !important;
  }

  body.dark header .ct-lang-seg__btn {
    color: #a8b0bc !important;
  }

  /* Active = solid brand chip (obvious which language) */
  header .ct-lang-seg__btn.is-active {
    background: #4c3ff2 !important;
    color: #ffffff !important;
  }

  body.dark header .ct-lang-seg__btn.is-active {
    background: #6b5cff !important;
    color: #ffffff !important;
  }

  header .ct-lang-seg__btn + .ct-lang-seg__btn {
    border-left: 1px solid rgba(10, 20, 32, 0.1) !important;
  }

  body.dark header .ct-lang-seg__btn + .ct-lang-seg__btn {
    border-left-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Theme control same 40px height as lang */
  header .theme-change-color .header-language-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  header #navbar-toggler.nav-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* Slightly tighter nav gap so logo + 3 controls fit on 360 */
  header.mainPadding nav.navbar {
    gap: 0.28rem !important;
  }
}

/* Very small phones: shrink lang labels slightly, keep 40px hit */
@media only screen and (max-width: 360px) {
  header .ct-lang-seg__btn {
    min-width: 36px !important;
    padding: 0 0.4rem !important;
    font-size: 0.68rem !important;
  }
}

/* CRITICAL: old mobile rule hid .header-language-btn .text under 575px (flag-only era).
   Segmented RU|EN has only .text labels - must always show. */
header .ct-lang-seg .ct-lang-seg__btn .text,
header .ct-lang-seg .header-language-btn .text,
header .header-language-btn-group.ct-lang-seg .header-language-btn .text {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media only screen and (max-width: 575px) {
  header .header-language-btn-group.ct-lang-seg .header-language-btn .text,
  header .ct-lang-seg .ct-lang-seg__btn .text {
    display: inline-block !important;
  }
}

/* Lang segment active state - max specificity vs app.css white pills */
header .header-language-btn-group.ct-lang-seg a.header-language-btn.ct-lang-seg__btn.is-active,
header .ct-lang-seg a.ct-lang-seg__btn.is-active,
header .ct-lang-seg .ct-lang-seg__btn.is-active {
  background-color: #4c3ff2 !important;
  background: #4c3ff2 !important;
  color: #ffffff !important;
}
header .header-language-btn-group.ct-lang-seg a.header-language-btn.ct-lang-seg__btn.is-active .text,
header .ct-lang-seg a.ct-lang-seg__btn.is-active .text {
  color: #ffffff !important;
  display: inline-block !important;
}
body.dark header .ct-lang-seg a.ct-lang-seg__btn.is-active,
body.dark header .header-language-btn-group.ct-lang-seg a.ct-lang-seg__btn.is-active {
  background-color: #6b5cff !important;
  background: #6b5cff !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   3.4.34 - Lang labels ALWAYS visible (kill .text hide forever)
   Root cause: app.css max-width 575 hides .header-language-btn .text
   ═══════════════════════════════════════════════════════════ */

/* Delete effect of app.css mobile hide for ANY language control text */
@media only screen and (max-width: 991px) {
  header .header-language-btn-group:not(.theme-change-color) .header-language-btn .text,
  header .header-language-btn-group.ct-lang-seg .header-language-btn .text,
  header .ct-lang-seg .text,
  header .ct-lang-seg .ct-lang-seg__label,
  header .ct-lang-seg a .ct-lang-seg__label {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    clip: auto !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    color: inherit !important;
  }

  header .ct-lang-seg {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #eef0f5 !important;
    border: 1px solid rgba(10, 20, 32, 0.16) !important;
  }

  body.dark header .ct-lang-seg {
    background: #2a2b33 !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
  }

  header .ct-lang-seg a.ct-lang-seg__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 40px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #1a2330 !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  body.dark header .ct-lang-seg a.ct-lang-seg__btn {
    color: #dce1ea !important;
  }

  header .ct-lang-seg a.ct-lang-seg__btn.is-active {
    background: #4c3ff2 !important;
    color: #ffffff !important;
  }

  body.dark header .ct-lang-seg a.ct-lang-seg__btn.is-active {
    background: #6b5cff !important;
    color: #ffffff !important;
  }

  header .ct-lang-seg a.ct-lang-seg__btn.is-active .ct-lang-seg__label {
    color: #ffffff !important;
  }
}

/* Also kill the original app.css hide rule effect globally for segment */
header .ct-lang-seg .ct-lang-seg__label {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════
   3.4.35 — Local personal layer ("My tools" panel)
   No account: recents / favorites / drafts, private per device
   ═══════════════════════════════════════════════════════════ */

/* Header bookmark button */
header .ct-me-btn-wrap {
  position: relative;
}
header .ct-me-open {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 10px !important;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}
header .ct-me-open__icon {
  display: inline-flex;
  line-height: 0;
}
header .ct-me-open__icon svg {
  display: block;
}
header .ct-me-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #4c3ff2;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
body.dark header .ct-me-badge {
  background: #6b5cff;
}
header .ct-me-open.has-items {
  color: #4c3ff2;
}
body.dark header .ct-me-open.has-items {
  color: #9b92ff;
}

/* Scrim */
.ct-me-scrim {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(10, 16, 28, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
html.ct-me-open .ct-me-scrim,
body.ct-me-open .ct-me-scrim {
  opacity: 1;
  pointer-events: auto;
}
.ct-me-scrim[hidden] {
  display: none !important;
}

/* Side panel */
.ct-me-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  width: min(380px, 100vw);
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  background: #f7f8fb;
  color: #1a2330;
  box-shadow: -12px 0 40px rgba(10, 20, 40, 0.18);
  transform: translateX(100%);
  transition: transform 0.22s ease;
  overflow: hidden;
}
body.dark .ct-me-panel {
  background: #1c1d24;
  color: #e8ebf2;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
}
html.ct-me-open .ct-me-panel,
body.ct-me-open .ct-me-panel {
  transform: translateX(0);
}
.ct-me-panel[hidden] {
  display: none !important;
}
html.ct-me-open .ct-me-panel[hidden],
body.ct-me-open .ct-me-panel[hidden] {
  /* when opening we remove hidden via JS; keep rule for safety */
}

.ct-me-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(10, 20, 32, 0.1);
  flex-shrink: 0;
}
body.dark .ct-me-panel__head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.ct-me-panel__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}
.ct-me-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.ct-me-panel__close:hover,
.ct-me-panel__close:focus-visible {
  background: rgba(76, 63, 242, 0.12);
  outline: none;
}

.ct-me-panel__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px 16px 24px;
  -webkit-overflow-scrolling: touch;
}
.ct-me-panel__note {
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.78;
}
.ct-me-panel__section {
  margin-bottom: 18px;
}
.ct-me-panel__h {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ct-me-panel__count {
  display: inline-flex;
  min-width: 1.4em;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(76, 63, 242, 0.12);
  color: #4c3ff2;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}
body.dark .ct-me-panel__count {
  background: rgba(107, 92, 255, 0.2);
  color: #b4acff;
}
.ct-me-panel__empty {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.72;
}
.ct-me-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ct-me-panel__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(10, 20, 32, 0.08);
  min-height: 44px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.dark .ct-me-panel__list a {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
.ct-me-panel__list a:hover,
.ct-me-panel__list a:focus-visible {
  background: rgba(76, 63, 242, 0.1);
  border-color: rgba(76, 63, 242, 0.35);
  outline: none;
}
.ct-me-panel__list a i {
  flex-shrink: 0;
  width: 1.1em;
  text-align: center;
  opacity: 0.75;
  color: #4c3ff2;
}
body.dark .ct-me-panel__list a i {
  color: #9b92ff;
}
.ct-me-panel__list a span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 500;
}

.ct-me-panel__foot {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(10, 20, 32, 0.1);
}
body.dark .ct-me-panel__foot {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.ct-me-panel__clear {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(200, 40, 40, 0.35);
  border-radius: 10px;
  background: transparent;
  color: #b42318;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.ct-me-panel__clear:hover,
.ct-me-panel__clear:focus-visible {
  background: rgba(180, 35, 24, 0.08);
  outline: none;
}
body.dark .ct-me-panel__clear {
  color: #ff8a80;
  border-color: rgba(255, 138, 128, 0.35);
}

/* Homepage personal shelves slightly stronger */
.ct-personal .ct-showcase__title {
  position: relative;
}
.ct-personal .ct-showcase__sub {
  opacity: 0.85;
}

/* Lock body scroll when panel open (mobile) */
html.ct-me-open,
body.ct-me-open {
  overflow: hidden;
}
/* Don't double-lock if nav also open — both fine */
@media (min-width: 992px) {
  html.ct-me-open,
  body.ct-me-open {
    overflow: auto;
  }
  /* panel still overlays; page can scroll behind on desktop if desired —
     keep locked for focus clarity */
  html.ct-me-open,
  body.ct-me-open {
    overflow: hidden;
  }
}

/* Mobile: ensure me button stays in header cluster */
@media only screen and (max-width: 991px) {
  header .ct-me-btn-wrap {
    display: inline-flex !important;
  }
  header .ct-me-open {
    min-width: 40px !important;
    height: 40px !important;
  }
}