/* ============================================================
   BULGARIAN CIVIL SERVICE TOOLS — UNIFIED DESIGN SYSTEM v1.0
   "Public Good Atlas Bulgaria"

   Identical across: Motorway · Green Atlas · PotholeTracker
                     ВодаБГ · ВъздухБГ · КолкоСтрува

   Each project sets its own --cs-accent / --cs-accent-2.
   All primitives below recolor automatically.

   Bulgarian flag references — only used as the 3px accent stripe.
     Бяло  #FFFFFF
     Зелено #00966E
     Червено #D62612
   ============================================================ */

@layer cs-base, cs-tokens, cs-primitives, cs-anim, cs-overrides;

@layer cs-tokens {
  :root {
    /* Bulgaria flag (used only for the unifier stripe) */
    --cs-flag-white: #ffffff;
    --cs-flag-green: #00966e;
    --cs-flag-red:   #d62612;

    /* Spacing scale (8pt grid, with 4 + 2 micros) */
    --cs-space-0: 0;
    --cs-space-1: 0.25rem;   /* 4 */
    --cs-space-2: 0.5rem;    /* 8 */
    --cs-space-3: 0.75rem;   /* 12 */
    --cs-space-4: 1rem;      /* 16 */
    --cs-space-5: 1.5rem;    /* 24 */
    --cs-space-6: 2rem;      /* 32 */
    --cs-space-7: 3rem;      /* 48 */
    --cs-space-8: 4rem;      /* 64 */
    --cs-space-9: 6rem;      /* 96 */

    /* Radius scale */
    --cs-radius-xs: 6px;
    --cs-radius-sm: 10px;
    --cs-radius-md: 14px;
    --cs-radius-lg: 18px;
    --cs-radius-xl: 24px;
    --cs-radius-pill: 999px;

    /* Shadow scale (premium, multi-layer, uses currentColor for accent glow) */
    --cs-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --cs-shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --cs-shadow-md: 0 8px 24px -8px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.06);
    --cs-shadow-lg: 0 22px 48px -16px rgba(0,0,0,0.32), 0 4px 12px rgba(0,0,0,0.08);
    --cs-shadow-xl: 0 32px 80px -20px rgba(0,0,0,0.48), 0 8px 22px rgba(0,0,0,0.12);
    --cs-shadow-glow: 0 0 0 1px color-mix(in srgb, var(--cs-accent, #888) 22%, transparent),
                      0 16px 40px -16px color-mix(in srgb, var(--cs-accent, #888) 38%, transparent);

    /* Motion tokens — every project uses the same easing language */
    --cs-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --cs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --cs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --cs-dur-fast:    140ms;
    --cs-dur-base:    220ms;
    --cs-dur-slow:    360ms;
    --cs-dur-glide:   520ms;

    /* Typography scale — consistent ratios across projects */
    --cs-font-display: var(--font-display, var(--font-heading, 'Exo 2', 'Fraunces', 'Cabinet Grotesk', 'Syne', 'Outfit', system-ui, sans-serif));
    --cs-font-body:    var(--font-body, var(--font-sans, var(--font-inter), 'Inter', 'IBM Plex Sans', 'Manrope', 'Nunito', 'DM Sans', system-ui, sans-serif));
    --cs-font-mono:    var(--font-mono, var(--font-jetbrains), 'JetBrains Mono', 'Space Mono', ui-monospace, monospace);

    --cs-text-xs:   0.72rem;
    --cs-text-sm:   0.84rem;
    --cs-text-base: 0.96rem;
    --cs-text-md:   1.06rem;
    --cs-text-lg:   1.22rem;
    --cs-text-xl:   1.5rem;
    --cs-text-2xl:  2rem;
    --cs-text-3xl:  clamp(2rem, 4vw, 2.85rem);
    --cs-text-4xl:  clamp(2.6rem, 5.4vw, 3.6rem);

    --cs-leading-tight: 1.16;
    --cs-leading-snug:  1.32;
    --cs-leading-base:  1.55;
    --cs-leading-loose: 1.7;

    --cs-tracking-tight: -0.02em;
    --cs-tracking-base:   0;
    --cs-tracking-eyebrow: 0.16em;

    /* Neutral surface tokens — projects override only --cs-accent */
    --cs-accent-on: #0a0a0a;

    /* Z-index scale */
    --cs-z-flag: 60;
    --cs-z-brandbar: 55;
    --cs-z-fab: 40;
    --cs-z-toast: 70;
    --cs-brandbar-offset: 39px;
  }
}

@media (max-width: 720px) {
  @layer cs-tokens {
    :root {
      --cs-brandbar-offset: 72px;
    }
  }
}

/* ============================================================
   FLAG MICRO-STRIPE
   Subtle 3px Bulgaria flag bar at the very top of every project.
   This is the single most powerful "we are siblings" cue.
   ============================================================ */
@layer cs-base {
  .cs-flag-stripe {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--cs-z-flag);
    height: 3px;
    background: linear-gradient(
      to bottom,
      var(--cs-flag-white) 0 33.34%,
      var(--cs-flag-green) 33.34% 66.67%,
      var(--cs-flag-red)   66.67% 100%
    );
    pointer-events: none;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  }
  /* When projects opt into a vertical version (rare), keep parity */
  .cs-flag-stripe[data-orient="bottom"] {
    inset: auto 0 0 0;
  }
}

/* ============================================================
   BRAND BAR — sister-tools strip
   Sits at the top of every project, just under the flag stripe.
   ============================================================ */
@layer cs-primitives {
  .cs-brandbar {
    position: relative;
    z-index: var(--cs-z-brandbar);
    display: flex;
    align-items: center;
    gap: var(--cs-space-3);
    padding: 6px max(var(--cs-space-4), env(safe-area-inset-left)) 6px max(var(--cs-space-4), env(safe-area-inset-right));
    margin-top: 3px; /* clear the flag stripe */
    font-family: var(--cs-font-body);
    font-size: 11.5px;
    line-height: 1;
    color: rgba(255,255,255,0.78);
    background:
      linear-gradient(180deg, rgba(8,10,14,0.78), rgba(8,10,14,0.62));
    border-bottom: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    letter-spacing: 0.02em;
    user-select: none;
  }
  .cs-brandbar__wordmark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cs-font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
  }
  .cs-brandbar__wordmark::before {
    content: "";
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--cs-accent, #ffb36b), var(--cs-accent-2, var(--cs-accent, #ffd66e)));
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 12px -2px color-mix(in srgb, var(--cs-accent, #ffb36b) 60%, transparent);
  }
  .cs-brandbar__sep {
    width: 1px; height: 14px;
    background: rgba(255,255,255,0.12);
    margin: 0 4px;
  }
  .cs-brandbar__nav-scroll-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .cs-brandbar__nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    flex: 1 1 auto;
    overflow-x: auto;
    min-width: 0;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .cs-brandbar__nav::-webkit-scrollbar { display: none; }
  .cs-brandbar__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    transition: color var(--cs-dur-fast) var(--cs-ease-out),
                background var(--cs-dur-fast) var(--cs-ease-out);
    white-space: nowrap;
    font-weight: 500;
  }
  .cs-brandbar__link:hover,
  .cs-brandbar__link:focus-visible {
    color: rgba(255,255,255,0.96);
    background: rgba(255,255,255,0.06);
  }
  .cs-brandbar__link[aria-current="page"],
  .cs-brandbar__link[data-current="true"] {
    color: var(--cs-accent, #ffd66e);
    background: color-mix(in srgb, var(--cs-accent, #ffd66e) 14%, transparent);
  }
  .cs-brandbar__link__dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: currentColor;
    opacity: 0.6;
  }
  /* Coming-soon (not yet deployed) items */
  .cs-brandbar__link[data-coming-soon="true"] {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
  }
  /* Built-by attribution link */
  .cs-brandbar__built-by {
    text-decoration: none;
    transition: opacity var(--cs-dur-fast, 150ms) var(--cs-ease-out, ease);
  }
  .cs-brandbar__built-by:hover,
  .cs-brandbar__built-by:focus-visible {
    opacity: 0.85;
  }
  .cs-brandbar__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.66);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .cs-brandbar__tag::before {
    content: "";
    width: 5px; height: 5px; border-radius: 999px;
    background: var(--cs-flag-green);
    box-shadow: 0 0 6px var(--cs-flag-green);
  }
  @media (max-width: 720px) {
    .cs-brandbar {
      gap: 8px;
      flex-wrap: nowrap;
      overflow: hidden;
      font-size: 12px;
      padding: 4px max(8px, env(safe-area-inset-left)) 4px max(8px, env(safe-area-inset-right));
    }
    .cs-brandbar__sep { display: none; }
    .cs-brandbar__nav-scroll-wrap {
      flex: 1 1 auto;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }
    .cs-brandbar__nav {
      flex: 1 1 auto;
      flex-wrap: nowrap;
      min-width: 0;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0;
    }
    .cs-brandbar__nav .cs-brandbar__link {
      flex: 0 0 auto;
      min-height: 44px;
      padding: 10px 12px;
    }
    .cs-brandbar__wordmark {
      gap: 6px;
      font-size: 10px;
    }
    .cs-brandbar__wordmark::before {
      width: 12px;
      height: 12px;
      border-radius: 3px;
    }
    .cs-brandbar__wordmark__sub,
    .cs-brandbar__tag { display: none; }
  }
  @media (max-width: 460px) {
    .cs-brandbar__wordmark { display: none; }
  }
}

/* ============================================================
   PRIMITIVES — used by every project
   ============================================================ */
@layer cs-primitives {

  .cs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cs-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--cs-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--cs-accent, currentColor);
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cs-accent, currentColor) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cs-accent, currentColor) 22%, transparent);
  }
  .cs-eyebrow::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 999px;
    background: var(--cs-accent, currentColor);
    box-shadow: 0 0 8px var(--cs-accent, currentColor);
  }

  .cs-card {
    position: relative;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--cs-accent, #888) 4%, rgba(255,255,255,0.02)),
        rgba(255,255,255,0.01)
      ),
      rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--cs-radius-lg);
    padding: var(--cs-space-5) var(--cs-space-5);
    box-shadow: var(--cs-shadow-md);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: transform var(--cs-dur-base) var(--cs-ease-out),
                border-color var(--cs-dur-base) var(--cs-ease-out),
                box-shadow var(--cs-dur-base) var(--cs-ease-out);
  }
  html:not(.dark) .cs-card,
  :root.light .cs-card,
  [data-bs-theme="light"] .cs-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
    border-color: rgba(15,15,18,0.08);
    backdrop-filter: blur(14px);
  }
  .cs-card:hover {
    border-color: color-mix(in srgb, var(--cs-accent, #888) 28%, rgba(255,255,255,0.08));
    box-shadow: var(--cs-shadow-lg);
  }
  .cs-card--accent {
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--cs-accent, #888) 14%, transparent),
        color-mix(in srgb, var(--cs-accent-2, var(--cs-accent, #888)) 8%, transparent)
      ),
      rgba(255,255,255,0.025);
    border-color: color-mix(in srgb, var(--cs-accent, #888) 30%, transparent);
  }
  .cs-card--lift { will-change: transform; transform: translateZ(0); }
  .cs-card--lift:hover { transform: translate3d(0, -2px, 0); }

  .cs-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--cs-space-4) var(--cs-space-4);
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--cs-radius-md);
    transition: transform var(--cs-dur-base) var(--cs-ease-spring);
  }
  .cs-kpi:hover { transform: translate3d(0,-1px,0); }
  .cs-kpi__num {
    font-family: var(--cs-font-display);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: var(--cs-tracking-tight);
    font-variant-numeric: tabular-nums;
    color: inherit;
  }
  .cs-kpi__label {
    font-family: var(--cs-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.66;
  }

  .cs-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: inherit;
    opacity: 0.86;
  }
  .cs-tag--ok    { color: var(--cs-accent, #6fcf97); border-color: color-mix(in srgb, var(--cs-accent, #6fcf97) 30%, transparent); background: color-mix(in srgb, var(--cs-accent, #6fcf97) 10%, transparent); opacity: 1; }
  .cs-tag--warn  { color: #fbbf24; border-color: rgba(251,191,36,0.32); background: rgba(251,191,36,0.08); opacity: 1; }
  .cs-tag--alert { color: #ff6b6b; border-color: rgba(255,107,107,0.32); background: rgba(255,107,107,0.08); opacity: 1; }

  .cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--cs-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cs-accent, #888) 36%, transparent);
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--cs-accent, #888) 24%, transparent),
      color-mix(in srgb, var(--cs-accent-2, var(--cs-accent, #888)) 18%, transparent));
    color: var(--cs-accent-2, var(--cs-accent, currentColor));
    font-family: var(--cs-font-display);
    font-weight: 600;
    font-size: 0.94rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--cs-dur-fast) var(--cs-ease-spring),
                box-shadow var(--cs-dur-base) var(--cs-ease-out),
                background var(--cs-dur-base) var(--cs-ease-out),
                border-color var(--cs-dur-base) var(--cs-ease-out);
    will-change: transform;
  }
  .cs-btn:hover {
    transform: translate3d(0,-1px,0);
    box-shadow: var(--cs-shadow-glow);
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--cs-accent, #888) 32%, transparent),
      color-mix(in srgb, var(--cs-accent-2, var(--cs-accent, #888)) 26%, transparent));
  }
  .cs-btn:active { transform: translate3d(0,0,0) scale(0.98); }
  .cs-btn--solid {
    background: linear-gradient(135deg, var(--cs-accent, #888), var(--cs-accent-2, var(--cs-accent, #888)));
    color: var(--cs-accent-on, #0a0a0a);
    border-color: transparent;
  }
  .cs-btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.14);
    color: inherit;
  }
  .cs-btn--ghost:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.22);
    box-shadow: none;
  }
  .cs-btn--lg { padding: 14px 22px; font-size: 1rem; border-radius: var(--cs-radius-md); }
  .cs-btn--sm { padding: 7px 12px; font-size: 0.82rem; }

  .cs-callout {
    border-left: 3px solid var(--cs-accent, currentColor);
    padding: 14px 18px;
    background: color-mix(in srgb, var(--cs-accent, currentColor) 8%, transparent);
    border-radius: 0 var(--cs-radius-md) var(--cs-radius-md) 0;
    margin: var(--cs-space-4) 0;
  }
  .cs-callout--warn  { border-left-color: #fbbf24; background: rgba(251,191,36,0.06); }
  .cs-callout--alert { border-left-color: #ff6b6b; background: rgba(255,107,107,0.06); }

  /* Skeleton shimmer */
  .cs-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border-radius: var(--cs-radius-sm);
  }
  .cs-skeleton::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--cs-accent, #888) 14%, rgba(255,255,255,0.06)),
      transparent);
    transform: translateX(-100%);
    animation: cs-shimmer 1.4s var(--cs-ease-in-out) infinite;
  }
  @keyframes cs-shimmer {
    100% { transform: translateX(100%); }
  }

  /* Floating support button — bottom-right, tasteful, never blocks content */
  .cs-support-fab {
    position: fixed;
    right: max(var(--cs-space-4), env(safe-area-inset-right));
    bottom: max(var(--cs-space-4), env(safe-area-inset-bottom));
    z-index: var(--cs-z-fab);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 12px;
    border-radius: 999px;
    background: rgba(20,20,24,0.78);
    color: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    font-family: var(--cs-font-body);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--cs-shadow-lg);
    transition: transform var(--cs-dur-base) var(--cs-ease-spring),
                box-shadow var(--cs-dur-base) var(--cs-ease-out),
                background var(--cs-dur-base) var(--cs-ease-out);
  }
  .cs-support-fab:hover {
    transform: translate3d(0,-2px,0);
    background: rgba(20,20,24,0.92);
    box-shadow: var(--cs-shadow-xl), 0 0 0 1px color-mix(in srgb, var(--cs-accent, #888) 32%, transparent);
  }
  .cs-support-fab__icon {
    display: inline-flex;
    width: 18px; height: 18px;
    align-items: center; justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cs-accent, #ffb36b), var(--cs-accent-2, var(--cs-accent, #ffd66e)));
    color: var(--cs-accent-on, #0a0a0a);
    font-size: 11px;
    box-shadow: 0 0 10px -2px color-mix(in srgb, var(--cs-accent, #ffb36b) 60%, transparent);
  }
  html:not(.dark) .cs-support-fab,
  :root.light .cs-support-fab,
  [data-bs-theme="light"] .cs-support-fab {
    background: rgba(255,255,255,0.92);
    color: #0e1116;
    border-color: rgba(15,15,18,0.08);
  }
}

/* ============================================================
   ANIMATION UTILITIES — same easing language across all 6 apps
   ============================================================ */
@layer cs-anim {
  @keyframes cs-fade-in   { from { opacity: 0; transform: translate3d(0,8px,0); } to { opacity: 1; transform: none; } }
  @keyframes cs-fade-up   { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: none; } }
  @keyframes cs-fade-down { from { opacity: 0; transform: translate3d(0,-12px,0); } to { opacity: 1; transform: none; } }
  @keyframes cs-scale-in  { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
  @keyframes cs-pulse-ring{ 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cs-accent, #888) 40%, transparent); } 70% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--cs-accent, #888) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

  .cs-anim-fade-in   { animation: cs-fade-in   var(--cs-dur-glide) var(--cs-ease-out) both; }
  .cs-anim-fade-up   { animation: cs-fade-up   var(--cs-dur-glide) var(--cs-ease-out) both; }
  .cs-anim-fade-down { animation: cs-fade-down var(--cs-dur-slow)  var(--cs-ease-out) both; }
  .cs-anim-scale-in  { animation: cs-scale-in  var(--cs-dur-base)  var(--cs-ease-spring) both; }
  .cs-anim-pulse     { animation: cs-pulse-ring 2.2s var(--cs-ease-in-out) infinite; }

  .cs-anim-delay-1 { animation-delay: 60ms; }
  .cs-anim-delay-2 { animation-delay: 140ms; }
  .cs-anim-delay-3 { animation-delay: 220ms; }
  .cs-anim-delay-4 { animation-delay: 300ms; }
  .cs-anim-delay-5 { animation-delay: 380ms; }

  /* Universal focus ring — every project, every interactive element */
  :where(.cs-card, .cs-btn, .cs-tag, .cs-eyebrow, .cs-brandbar__link, .cs-support-fab):focus-visible {
    outline: 2px solid var(--cs-accent, #ffd66e);
    outline-offset: 3px;
    border-radius: var(--cs-radius-sm);
  }

  /* Respect reduced motion everywhere */
  @media (prefers-reduced-motion: reduce) {
    .cs-anim-fade-in,
    .cs-anim-fade-up,
    .cs-anim-fade-down,
    .cs-anim-scale-in,
    .cs-anim-pulse,
    .cs-skeleton::after { animation: none !important; }
    .cs-card, .cs-btn, .cs-kpi, .cs-support-fab { transition: none !important; }
  }
}

/* ============================================================
   PROJECT-LOCAL ACCENT REGISTRY
   Each project defines its own accent ONCE, then forgets about it.
   These selectors are no-ops by default; set them in each project.
   ============================================================ */
@layer cs-overrides {
  /* Example (do NOT enable here — set per project):
     :root {
       --cs-accent:    #ffb36b;
       --cs-accent-2:  #ffd66e;
       --cs-accent-on: #1c110d;
     }
  */
}

/* ========================================================================
   Civil Service Tools — Premium Polish Layer (v1.0)
   Hardware-accelerated micro-interactions. Honors prefers-reduced-motion.
   ====================================================================== */
@layer cs-overrides {
  /* First-paint stagger for sister-tools links */
  @keyframes cs-brandbar-in {
    from { opacity: 0; transform: translate3d(0, -4px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  .cs-brandbar__nav .cs-brandbar__link {
    opacity: 0;
    animation: cs-brandbar-in 0.5s var(--cs-ease-out, cubic-bezier(.22,1,.36,1)) forwards;
    will-change: transform, opacity;
  }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(1) { animation-delay: 0.05s; }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(2) { animation-delay: 0.10s; }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(3) { animation-delay: 0.15s; }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(4) { animation-delay: 0.20s; }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(5) { animation-delay: 0.25s; }
  .cs-brandbar__nav .cs-brandbar__link:nth-child(6) { animation-delay: 0.30s; }
  /* Restore dim for coming-soon links after entrance animation finishes */
  .cs-brandbar__nav .cs-brandbar__link[data-coming-soon="true"] {
    animation: none;
    opacity: 0.35;
  }

  .cs-brandbar__wordmark {
    opacity: 0;
    animation: cs-brandbar-in 0.6s var(--cs-ease-out, cubic-bezier(.22,1,.36,1)) 0s forwards;
  }

  /* Support FAB — idle attention pulse (subtle, slow, accent-tinted) */
  @keyframes cs-fab-idle {
    0%, 100% { box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--cs-accent) 35%, transparent),
                           0 0 0 0  color-mix(in srgb, var(--cs-accent) 0%, transparent); }
    50%      { box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--cs-accent) 45%, transparent),
                           0 0 0 6px color-mix(in srgb, var(--cs-accent) 8%, transparent); }
  }
  .cs-support-fab {
    animation: cs-fab-idle 4.5s var(--cs-ease-in-out, cubic-bezier(.65,0,.35,1)) infinite;
    will-change: transform, box-shadow;
  }
  .cs-support-fab:hover { animation-play-state: paused; }

  /* Active sister-tool — soft accent halo */
  .cs-brandbar__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cs-accent) 35%, transparent);
    pointer-events: none;
    opacity: 0;
    animation: cs-fade-in-soft 0.7s var(--cs-ease-out, cubic-bezier(.22,1,.36,1)) 0.4s forwards;
  }
  .cs-brandbar__link { position: relative; }
  @keyframes cs-fade-in-soft { to { opacity: 1; } }

  /* Reduced motion — disable everything decorative */
  @media (prefers-reduced-motion: reduce) {
    .cs-brandbar__nav .cs-brandbar__link,
    .cs-brandbar__wordmark { animation: none; opacity: 1; }
    .cs-support-fab { animation: none; }
    .cs-brandbar__link[aria-current="page"]::after { animation: none; opacity: 1; }
  }
}
/* ============================================================
   Civil Service Tools — Unification Pass 2 (v1.1)
   Refinement layer. Append AFTER civil-service.css and the
   Pass 1 polish layer. Honors prefers-reduced-motion + print.
   ============================================================ */
@layer cs-overrides {
  /* ---------------------------------------------------------
     1) Responsive brand bar — graceful mobile collapse
     --------------------------------------------------------- */
  @media (max-width: 720px) {
    .cs-brandbar {
      flex-wrap: wrap;
      padding: var(--cs-space-2) var(--cs-space-3);
      gap: var(--cs-space-2);
    }
    .cs-brandbar__sep,
    .cs-brandbar__tag {
      display: none;
    }
    .cs-brandbar__nav {
      order: 2;
      width: 100%;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      padding-bottom: 2px;
      mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }
    .cs-brandbar__nav .cs-brandbar__link {
      flex: 0 0 auto;
      scroll-snap-align: start;
    }
    .cs-brandbar__wordmark {
      font-size: var(--cs-text-xs);
    }
  }

  /* ---------------------------------------------------------
     2) Support FAB — premium SVG heart + safe-area inset
     --------------------------------------------------------- */
  .cs-support-fab {
    bottom: calc(var(--cs-space-5) + env(safe-area-inset-bottom, 0px));
    right:  calc(var(--cs-space-5) + env(safe-area-inset-right, 0px));
    /* Replace the unicode heart with a properly weighted vector */
    --cs-fab-heart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>");
  }
  .cs-support-fab__icon {
    /* Mask uses the FAB's text color, so it auto-adapts to --cs-accent-on. */
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: var(--cs-fab-heart) center / contain no-repeat;
    -webkit-mask: var(--cs-fab-heart) center / contain no-repeat;
    color: inherit;
    display: inline-block;
    /* Hide the original ♥ glyph */
    font-size: 0;
    line-height: 0;
  }
  /* Subtle press affordance */
  .cs-support-fab:active { transform: translate3d(0, 1px, 0) scale(0.98); }

  /* ---------------------------------------------------------
     3) Universal focus ring — accent-aware, 2px, offset 3px
     --------------------------------------------------------- */
  :where(.cs-brandbar__link, .cs-brandbar__wordmark, .cs-btn, .cs-tag, .cs-support-fab):focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 3px;
    border-radius: var(--cs-radius-sm, 10px);
  }

  /* ---------------------------------------------------------
     4) Active sister-tool — animated underline (replaces halo on mobile-OK)
     --------------------------------------------------------- */
  .cs-brandbar__link[aria-current="page"] {
    color: color-mix(in srgb, var(--cs-accent) 92%, var(--cs-fg, #fff));
  }
  .cs-brandbar__link[aria-current="page"] .cs-brandbar__link__dot {
    transform: scale(1.4);
    background: var(--cs-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-accent) 22%, transparent);
  }

  /* ---------------------------------------------------------
     5) High-contrast / forced-colors mode — preserve semantics
     --------------------------------------------------------- */
  @media (forced-colors: active) {
    .cs-flag-stripe { background: CanvasText; }
    .cs-brandbar { border-bottom: 1px solid CanvasText; background: Canvas; }
    .cs-brandbar__link[aria-current="page"] { outline: 1px solid Highlight; }
    .cs-support-fab { border: 1px solid CanvasText; }
  }

  /* ---------------------------------------------------------
     6) Print — hide non-essential brand chrome
     --------------------------------------------------------- */
  @media print {
    .cs-flag-stripe,
    .cs-brandbar,
    .cs-support-fab,
    .cs-no-print { display: none !important; }

    body {
      background: #fff !important;
      color: #111 !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    .cs-print-report {
      max-width: 100%;
      padding: 0;
      box-shadow: none !important;
      border: none !important;
      background: transparent !important;
    }

    .cs-print-report h1,
    .cs-print-report h2,
    .cs-print-report h3 {
      color: #111 !important;
      break-after: avoid;
    }

    .cs-print-report .cs-kpi,
    .cs-print-report .cs-card {
      break-inside: avoid;
      border: 1px solid #ddd !important;
      box-shadow: none !important;
    }

    .cs-print-report::after {
      content: attr(data-print-source);
      display: block;
      margin-top: 24px;
      padding-top: 12px;
      border-top: 1px solid #ccc;
      font: 10px/1.4 var(--cs-font-mono, ui-monospace, monospace);
      color: #666;
    }
  }

  /* Screen-only export trigger — pairs with window.print() */
  .cs-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 0.84rem/1 var(--cs-font-body);
    padding: 8px 14px;
    border-radius: var(--cs-radius-sm);
    border: 1px solid color-mix(in srgb, var(--cs-accent, #888) 35%, transparent);
    background: color-mix(in srgb, var(--cs-accent, #888) 10%, transparent);
    color: inherit;
    cursor: pointer;
  }
  .cs-print-btn:hover,
  .cs-print-btn:focus-visible {
    background: color-mix(in srgb, var(--cs-accent, #888) 18%, transparent);
    outline: 2px solid var(--cs-accent, currentColor);
    outline-offset: 3px;
  }

  /* ---------------------------------------------------------
     7) Universal font smoothing — guarantees the same edge
        rendering on every project regardless of base CSS
     --------------------------------------------------------- */
  .cs-brandbar,
  .cs-brandbar *,
  .cs-support-fab {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* ---------------------------------------------------------
     8) Optional offline indicator — small dot the launcher / SW
        can flip via [data-cs-offline="true"] on <html>.
     --------------------------------------------------------- */
  html[data-cs-offline="true"] .cs-brandbar::after {
    content: "Офлайн";
    position: absolute;
    top: var(--cs-space-2);
    right: var(--cs-space-3);
    font: 600 0.66rem/1 var(--cs-font-mono, ui-monospace, monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-flag-red);
    background: color-mix(in srgb, var(--cs-flag-red) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cs-flag-red) 35%, transparent);
    padding: 3px 8px;
    border-radius: var(--cs-radius-pill);
  }
  .cs-brandbar { position: relative; }

  /* ---------------------------------------------------------
     9) Reduced-motion — silence Pass-2 micro-motions too
     --------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .cs-support-fab,
    .cs-support-fab:active { transform: none !important; }
  }
}


/* mobile-tap-44 — ensure brandbar links meet 44px touch target on phones */
@media (max-width: 720px) {
  .cs-brandbar__nav .cs-brandbar__link {
    min-height: 44px !important;
    padding: 10px 12px !important;
    display: inline-flex;
    align-items: center;
  }
}


/* ============================================================
   EMPIRE LAUNCHER — unified typography (do not vary per site)
   Pins the sister-tools brand bar to ONE font + size on every
   site so the menu items sit at identical x/y across the whole
   empire — a true launcher (the mouse never has to move when
   hopping between sites). Unlayered + !important so it always
   wins over any per-site --font-display drift or base-layer
   font-size drift (some copies had 11.5px, others 13px).
   ============================================================ */
.cs-brandbar,
.cs-brandbar__inner,
.cs-brandbar__wordmark,
.cs-brandbar__nav,
.cs-brandbar__nav-scroll-wrap,
.cs-brandbar__link,
.cs-brandbar__links,
.cs-brandbar__tag,
.cs-brandbar__built-by,
.cs-brandbar__builtby {
  font-family: 'Exo 2', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}
.cs-brandbar { font-size: 11.5px !important; }
.cs-brandbar__wordmark { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.04em !important; }
.cs-brandbar__link { font-size: 11.5px !important; font-weight: 500 !important; }
.cs-brandbar__tag { font-size: 10.5px !important; }
@media (max-width: 720px) {
  .cs-brandbar { font-size: 12px !important; }
  .cs-brandbar__wordmark { font-size: 12px !important; }
  .cs-brandbar__link { font-size: 12px !important; }
}


/* ============================================================
   EMPIRE LAUNCHER — fixed child order (carbon-copy every site)
   The Facebook, Контакт (legal.js) and Дари (donate.js) pills are appended
   by JS at runtime, so their order varied by script load timing.
   Pin the visual order with flex `order` so the bar is byte-for-
   byte identical on every page and the mouse never has to move.
   ============================================================ */
.cs-brandbar__wordmark { order: 0 !important; }
.cs-brandbar__sep { order: 1 !important; }
.cs-brandbar__nav-scroll-wrap, .cs-brandbar__nav { order: 2 !important; flex: 1 1 auto !important; }
.cs-brandbar__built-by, .cs-brandbar__builtby { order: 8 !important; }
.cs-brandbar .cs-facebook-link { order: 9 !important; }
.cs-brandbar .cs-legal-link { order: 10 !important; }
.cs-brandbar .cs-donate-link { order: 11 !important; }


/* ============================================================
   EMPIRE LAUNCHER — carbon-copy geometry
   Final, unlayered contract for the top launcher rail. The rail
   must not inherit per-site spacing, app accents, or local header
   rules; it is a product switcher and should sit in the same pixels
   on every Dobrodetel family domain.
   ============================================================ */
:root {
  --cs-launcher-flag-height: 3px;
  --cs-launcher-bar-height: 39px;
  --cs-launcher-total-height: 42px;
  --cs-brandbar-offset: 42px;
  --cs-launcher-bg: #07111d;
  --cs-launcher-bg-2: #0a1421;
  --cs-launcher-border: rgba(148, 163, 184, 0.18);
  --cs-launcher-text: rgba(226, 232, 240, 0.68);
  --cs-launcher-text-strong: rgba(248, 250, 252, 0.94);
  --cs-launcher-muted: rgba(148, 163, 184, 0.7);
  --cs-launcher-active: #f4b24e;
  --cs-launcher-active-bg: rgba(244, 178, 78, 0.16);
  --cs-launcher-active-border: rgba(244, 178, 78, 0.34);
}

.cs-flag-stripe {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 2147483000 !important;
  width: 100% !important;
  height: var(--cs-launcher-flag-height) !important;
  min-height: var(--cs-launcher-flag-height) !important;
  max-height: var(--cs-launcher-flag-height) !important;
}

.cs-brandbar {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2147482990 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100% !important;
  height: var(--cs-launcher-bar-height) !important;
  min-height: var(--cs-launcher-bar-height) !important;
  max-height: var(--cs-launcher-bar-height) !important;
  margin: var(--cs-launcher-flag-height) 0 0 !important;
  padding: 0 max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  color: var(--cs-launcher-text) !important;
  background:
    linear-gradient(180deg, rgba(7, 17, 29, 0.98), rgba(7, 17, 29, 0.94)),
    var(--cs-launcher-bg) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--cs-launcher-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 28px rgba(0,0,0,0.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  user-select: none !important;
}

.cs-brandbar *,
.cs-brandbar *::before,
.cs-brandbar *::after {
  box-sizing: border-box !important;
}

.cs-brandbar__inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cs-brandbar__wordmark {
  order: 0 !important;
  flex: 0 0 236px !important;
  width: 236px !important;
  max-width: 236px !important;
  min-width: 236px !important;
  height: 28px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--cs-launcher-text-strong) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

.cs-brandbar__wordmark::before {
  content: "" !important;
  flex: 0 0 16px !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 5px !important;
  background: linear-gradient(135deg, #ffd36a, #ff9f43) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 14px rgba(244,178,78,0.32) !important;
}

.cs-brandbar__wordmark__mark {
  display: none !important;
}

.cs-brandbar__sep {
  order: 1 !important;
  flex: 0 0 1px !important;
  width: 1px !important;
  height: 18px !important;
  margin: 0 8px 0 0 !important;
  background: rgba(148, 163, 184, 0.24) !important;
}

.cs-brandbar__nav-scroll-wrap,
.cs-brandbar__nav,
.cs-brandbar__links {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
}

.cs-brandbar__nav-scroll-wrap {
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.cs-brandbar__nav,
.cs-brandbar__links {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-padding-inline: calc(50% - 36px) !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
}

.cs-brandbar__nav::-webkit-scrollbar,
.cs-brandbar__links::-webkit-scrollbar {
  display: none !important;
}

.cs-brandbar__link {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 9px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  color: var(--cs-launcher-text) !important;
  background: transparent !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  scroll-snap-align: center !important;
}

.cs-brandbar__link:hover,
.cs-brandbar__link:focus-visible {
  color: var(--cs-launcher-text-strong) !important;
  background: rgba(255,255,255,0.06) !important;
}

.cs-brandbar__link[aria-current="page"],
.cs-brandbar__link[data-current="true"] {
  color: var(--cs-launcher-active) !important;
  background: var(--cs-launcher-active-bg) !important;
  border-color: var(--cs-launcher-active-border) !important;
  box-shadow: 0 0 0 1px rgba(244,178,78,0.08) inset !important;
}

.cs-brandbar__link__dot {
  flex: 0 0 6px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  opacity: 0.64 !important;
}

.cs-brandbar .cs-lb,
.cs-brandbar .cs-le {
  white-space: nowrap !important;
}

.cs-brandbar .cs-lb {
  display: inline !important;
}

.cs-brandbar .cs-le {
  display: none !important;
}

html[lang^="en"] .cs-brandbar .cs-lb,
html[data-lang="en"] .cs-brandbar .cs-lb,
html.is-en .cs-brandbar .cs-lb {
  display: none !important;
}

html[lang^="en"] .cs-brandbar .cs-le,
html[data-lang="en"] .cs-brandbar .cs-le,
html.is-en .cs-brandbar .cs-le {
  display: inline !important;
}

.cs-brandbar__tag,
.cs-brandbar__built-by,
.cs-brandbar__builtby,
.cs-brandbar .cs-facebook-link,
.cs-brandbar .cs-legal-link,
.cs-brandbar .cs-donate-link {
  flex: 0 0 auto !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,0.18) !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--cs-launcher-muted) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.cs-brandbar__tag::before,
.cs-brandbar__builtby::before,
.cs-brandbar .cs-facebook-link::before {
  content: "" !important;
  flex: 0 0 5px !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: #00c48c !important;
  box-shadow: 0 0 8px rgba(0,196,140,0.64) !important;
}

.cs-brandbar .cs-legal-link {
  color: var(--cs-launcher-muted) !important;
  opacity: 1 !important;
}

.cs-brandbar .cs-facebook-link {
  color: #dbeafe !important;
  background: rgba(24, 119, 242, 0.16) !important;
  border-color: rgba(96, 165, 250, 0.26) !important;
}

.cs-brandbar .cs-facebook-link::before {
  background: #1877f2 !important;
  box-shadow: 0 0 8px rgba(24,119,242,0.72) !important;
}

.cs-brandbar .cs-donate-link {
  color: #fff !important;
  background: linear-gradient(135deg, #ff5d7e, #e84d6c) !important;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 4px 14px rgba(232,77,108,0.28) !important;
}

.cs-brandbar .cs-donate-link::before {
  display: none !important;
}

.cs-brandbar__built-by,
.cs-brandbar__builtby {
  order: 8 !important;
}

.cs-brandbar .cs-facebook-link {
  order: 9 !important;
}

.cs-brandbar .cs-legal-link {
  order: 10 !important;
}

.cs-brandbar .cs-donate-link {
  order: 11 !important;
}

@media (max-width: 720px) {
  :root {
    --cs-brandbar-offset: 42px;
  }

  .cs-brandbar {
    height: var(--cs-launcher-bar-height) !important;
    min-height: var(--cs-launcher-bar-height) !important;
    max-height: var(--cs-launcher-bar-height) !important;
    gap: 8px !important;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left)) !important;
  }

  .cs-brandbar__wordmark {
    flex: 0 0 174px !important;
    width: 174px !important;
    max-width: 174px !important;
    min-width: 174px !important;
    font-size: 11px !important;
  }

  .cs-brandbar__sep {
    display: none !important;
  }

  .cs-brandbar__link {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  .cs-brandbar__nav .cs-brandbar__link,
  .cs-brandbar__links .cs-brandbar__link {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 0 9px !important;
  }

  .cs-brandbar__nav::before,
  .cs-brandbar__nav::after,
  .cs-brandbar__links::before,
  .cs-brandbar__links::after {
    content: "" !important;
    flex: 0 0 max(0px, calc(50% - 48px)) !important;
    width: max(0px, calc(50% - 48px)) !important;
    min-width: max(0px, calc(50% - 48px)) !important;
    height: 1px !important;
    pointer-events: none !important;
  }

  .cs-brandbar__tag,
  .cs-brandbar__built-by,
  .cs-brandbar__builtby,
  .cs-brandbar .cs-facebook-link,
  .cs-brandbar .cs-legal-link,
  .cs-brandbar .cs-donate-link {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .cs-brandbar__wordmark {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
  }

  .cs-brandbar__wordmark > span:not(.cs-brandbar__wordmark__mark),
  .cs-brandbar__wordmark .cs-lb,
  .cs-brandbar__wordmark .cs-le {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }
}