/* CYNAPSE UI Governance / Design-System Layer
   Purpose: unify feedback, spacing, headings, form controls, desktop/mobile
   parity, and a small set of reusable component primitives (.cy-btn,
   .cy-card, .cy-badge, .cy-input) across every surface (marketing, academy,
   community, admin, My Cynapse, Exposure Engine) without changing
   each surface's own existing CSS. Only additive/generic selectors are used
   here so this can be safely included alongside every page's own stylesheet.
   Revived + wired live 2026-07-24 (maturity-uplift wave) -- this file existed
   before but was never actually <link>-ed into any live template; tokens
   below are aligned to the platform's unified brand color (#17352B, see the
   earlier brand-unification pass) so this governance layer and the brand
   pass agree with each other instead of drifting independently. */

/* No-italic override (2026-07-24, strengthened 2026-07-30): Cairo-Variable.ttf
   (the locally-hosted font most pages use) ships a 'slnt' variation axis;
   some mobile browsers auto-slant text through that axis whenever
   font-style resolves to italic/oblique -- including via the browser
   default italic on <em>, <i>, <cite>, <address>, <dfn>, <var> -- which is
   why mobile/tablet showed slanted text that desktop did not.

   2026-07-30 follow-up: `font-style: normal` alone did not fully fix this
   on real mobile/tablet devices. Two more specific mechanisms can still
   produce slanted text even with font-style pinned to normal:
     1. Some mobile WebKit/Blink builds resolve italic requests against a
        variable font's raw variation axes independently of font-style, so
        the 'slnt'/'ital' axis coordinates need to be reset explicitly via
        font-variation-settings, not just the font-style keyword.
     2. `font-synthesis` defaults to allowing the browser to fabricate
        ("synthesize") a fake oblique for any element that requests italic
        when no dedicated italic face is registered -- font-style:normal
        prevents *requesting* italic, but doesn't stop synthesis for any
        markup path that still ends up asking for it (e.g. inline
        style="font-style:italic" set by page JavaScript).
   Forcing all three (font-style, font-variation-settings, font-synthesis)
   together removes every path back to slanted text, unconditionally (no
   media query), so mobile/tablet/desktop are visually identical. Safe for
   icon fonts (Font Awesome/Phosphor <i> glyphs are symbol shapes, not
   letterforms, so none of this has any visual effect on them either way). */
html, body,
*, *::before, *::after {
    font-style: normal !important;
    font-variation-settings: normal !important;
    font-synthesis: none !important;
}
:root {
  --cynapse-brand: #17352b;
  --cynapse-brand-bright: #4f934d;
  --cynapse-ink: #17352b;
  --cynapse-ink-2: #0d2019;
  --cynapse-muted: #55695f;
  --cynapse-line: rgba(23, 53, 43, .14);
  --cynapse-line-strong: rgba(23, 53, 43, .24);
  --cynapse-soft: #f5f9f4;
  --cynapse-soft-2: #eaf1e8;
  --cynapse-surface: #ffffff;
  --cynapse-success: #1f7a4d;
  --cynapse-warning: #b7791f;
  --cynapse-danger: #b42318;
  --cynapse-info: #2563eb;
  --cynapse-radius: 10px;
  --cynapse-radius-sm: 8px;
  --cynapse-shadow: 0 10px 26px rgba(13, 48, 36, .08);
  --cynapse-header-height: 64px;
  /* WAVE 160 -- mobile UX brief: "prefer a defined spacing scale such as
     4px/8px/12px/16px/24px rather than arbitrary padding and margins."
     Additive tokens -- existing hardcoded spacing elsewhere is untouched,
     but new/refactored mobile rules in this file now reach for these
     instead of one-off numbers. */
  --cynapse-space-1: 4px;
  --cynapse-space-2: 8px;
  --cynapse-space-3: 12px;
  --cynapse-space-4: 16px;
  --cynapse-space-6: 24px;
  /* Minimum practical touch target (brief section 7: "use touch targets
     around 44px or greater"). */
  --cynapse-touch-target: 44px;
}

/* Reusable component primitives -- opt-in via .cy-* classes. New surfaces
   (or existing ones being refactored) should reach for these instead of
   inventing another one-off .btn/.card variant, so future work stops
   duplicating the same component pattern per page-type (see the design
   audit: my_cynapse.css, admin_dashboard.css, vulnhub_analyzer.css, and the
   marketing CSS files each currently define their own separate button/card/
   badge classes with no shared source). Existing page-specific classes are
   left untouched -- this is additive, not a replacement. */
.cy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--cynapse-radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.cy-btn--primary { background: var(--cynapse-brand); color: #fff; }
.cy-btn--primary:hover { background: var(--cynapse-ink-2); }
.cy-btn--secondary { background: transparent; color: var(--cynapse-brand); border-color: var(--cynapse-line-strong); }
.cy-btn--secondary:hover { background: var(--cynapse-soft); }
.cy-btn--ghost { background: transparent; color: var(--cynapse-muted); }

.cy-card {
  background: var(--cynapse-surface);
  border: 1px solid var(--cynapse-line);
  border-radius: var(--cynapse-radius);
  box-shadow: var(--cynapse-shadow);
  padding: 20px;
}

.cy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--cynapse-soft);
  color: var(--cynapse-brand);
  border: 1px solid var(--cynapse-line);
}
/* Severity/risk badges are semantic, not brand -- never map these to the
   brand green (a red "Critical" badge turning green would be a genuine
   safety regression for a security product). Kept intentionally separate
   from .cy-badge and untouched by the brand-unification pass. */
.cy-badge--critical { background: #fee2e2; color: #991b1b; border-color: rgba(153,35,27,.2); }
.cy-badge--high { background: #ffedd5; color: #9a3412; border-color: rgba(154,52,18,.2); }
.cy-badge--medium { background: #fef3c7; color: #92400e; border-color: rgba(146,64,14,.2); }
.cy-badge--low { background: #eaf1e8; color: var(--cynapse-brand); border-color: var(--cynapse-line); }

.cy-input, .cy-select, .cy-textarea {
  border: 1px solid var(--cynapse-line-strong);
  border-radius: var(--cynapse-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--cynapse-ink);
  background: #fff;
}
.cy-input:focus, .cy-select:focus, .cy-textarea:focus {
  outline: 3px solid rgba(23, 53, 43, .18);
  outline-offset: 1px;
  border-color: var(--cynapse-brand);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas, video { max-width: 100%; }
table { width: 100%; }

h1, h2, h3,
.page-title, .section-title, .card-title, .panel-title, .modal-title, .tab-title,
.dashboard-title, .workspace-title, .project-title {
  color: var(--cynapse-ink);
  font-weight: 700;
  letter-spacing: 0;
}

/* 2026-11-03: the rule above gave every heading dark ink, including headings
   inside dark panels that set light text (login brand panel "Critical
   Infrastructure", Password Recovery header) -- dark on dark. Headings in a
   light-text container keep that container's colour. */
/* :where() keeps the container at zero specificity, so an explicit colour
   utility on the heading itself (text-gray-900, text-[#...]) still wins. */
:where(.text-white, .brand-section, .cw-hero, .cw-band--dark, .cw-resource-hero, .cw-footer, .pricing-hero, [data-surface="dark"])
  :is(h1, h2, h3, .page-title, .section-title, .card-title, .panel-title, .modal-title, .tab-title,
      .dashboard-title, .workspace-title, .project-title) {
  color: inherit;
}

h4, h5, h6,
label, .form-label, .table th, thead th,
.kpi-label, .metric-label {
  font-weight: 600;
  letter-spacing: 0;
}

p, li, td, input, textarea, select, button { letter-spacing: 0; }

button, .btn, .button, .action-btn, .primary-btn, .secondary-btn, a.btn,
.download-btn, .save-btn, .cancel-btn {
  border-radius: var(--cynapse-radius-sm);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

button:focus-visible, .btn:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(23, 53, 43, .22);
  outline-offset: 2px;
}

input, select, textarea, .form-control, .form-select {
  border-radius: var(--cynapse-radius-sm);
}

.alert, .flash, .toast, .notice, .message, .validation-message,
.error-message, .success-message, .warning-message, .info-message {
  border-radius: var(--cynapse-radius);
  border: 1px solid var(--cynapse-line);
}

header, .header, .topbar, .navbar, .app-header, .site-header,
footer, .footer, .site-footer, .app-footer {
  letter-spacing: 0;
}

footer, .footer, .site-footer, .app-footer {
  color: var(--cynapse-muted);
}

.cynapse-feedback-region {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.cynapse-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 14px 14px 0;
  background: var(--cynapse-surface);
  border: 1px solid var(--cynapse-line);
  border-radius: 12px;
  box-shadow: var(--cynapse-shadow);
  color: var(--cynapse-ink);
  overflow: hidden;
  animation: cynapseToastIn .18s ease-out;
}

.cynapse-toast__bar { width: 6px; height: 100%; min-height: 42px; }
.cynapse-toast__title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--cynapse-ink); }
.cynapse-toast__message { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cynapse-muted); }
.cynapse-toast__close {
  border: 0;
  background: transparent;
  color: var(--cynapse-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}

.cynapse-toast--success .cynapse-toast__bar { background: var(--cynapse-success); }
.cynapse-toast--error .cynapse-toast__bar { background: var(--cynapse-danger); }
.cynapse-toast--warning .cynapse-toast__bar { background: var(--cynapse-warning); }
.cynapse-toast--info .cynapse-toast__bar { background: var(--cynapse-info); }

.cynapse-inline-message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--cynapse-radius);
  border: 1px solid var(--cynapse-line);
  background: #fff;
  color: var(--cynapse-ink);
}

.cynapse-inline-message[data-type="success"] { border-color: rgba(31,122,77,.25); background: rgba(31,122,77,.06); }
.cynapse-inline-message[data-type="error"] { border-color: rgba(180,35,24,.25); background: rgba(180,35,24,.06); }
.cynapse-inline-message[data-type="warning"] { border-color: rgba(183,121,31,.25); background: rgba(183,121,31,.08); }
.cynapse-inline-message[data-type="info"] { border-color: rgba(37,99,235,.22); background: rgba(37,99,235,.06); }

.cynapse-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cynapse-table-scroll > table { margin-bottom: 0; }

.cynapse-is-loading {
  cursor: progress;
}

.cynapse-is-loading button,
.cynapse-is-loading .btn,
button[aria-busy="true"],
.btn[aria-busy="true"] {
  opacity: .72;
  pointer-events: none;
}

@keyframes cynapseToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* WAVE 160 -- Mobile View / Full Site View. cynapse_view_mode.js implements
   Full Site View the same way real "Request Desktop Site" browser features
   do: it rewrites the page's <meta name="viewport"> to a fixed
   width=1280 layout viewport instead of width=device-width. Every
   max-width media query on the page (this file's 900px/640px blocks
   included, and any other page-specific CSS) then naturally stops matching
   on its own, because max-width queries evaluate against the layout
   viewport, not the physical screen -- so Full Site View works site-wide
   the moment a page includes the script, with no need to hunt down and
   re-scope every mobile selector in every stylesheet individually. */
@media (max-width: 900px) {
  body { overflow-x: hidden; }

  .container, .page-container, .main-container, .content-container,
  .dashboard-container, .workspace-container, .project-container,
  .vulnhub-container, .admin-container, .portal-container,
  main, .main-content {
    max-width: 100% !important;
  }

  .container, .page-container, .main-container, .content-container,
  .dashboard-container, .workspace-container, .project-container,
  .vulnhub-container, .admin-container, .portal-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .row, .grid, .dashboard-grid, .cards-grid, .metrics-grid,
  .summary-grid, .tab-grid, .form-grid, .split-layout,
  .two-column, .three-column, .content-grid, .workspace-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .card, .panel, .metric-card, .summary-card, .workspace-card,
  .dashboard-card, .form-card, .feature-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  h1, .page-title { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.15 !important; }
  h2, .section-title { font-size: clamp(20px, 5.8vw, 28px) !important; line-height: 1.2 !important; }
  h3, .card-title, .panel-title { font-size: clamp(17px, 4.8vw, 22px) !important; line-height: 1.25 !important; }

  p, li, td, input, textarea, select, button { font-size: 15px; line-height: 1.55; }

  button, .btn, .button, .action-btn, .primary-btn, .secondary-btn, a.btn {
    /* WAVE 160 -- mobile UX brief section 7: "use touch targets around
       44px or greater." Was 42px. */
    min-height: var(--cynapse-touch-target, 44px);
    white-space: normal;
  }

  input, select, textarea, .form-control, .form-select {
    min-height: var(--cynapse-touch-target, 44px);
    width: 100%;
  }

  .tabs, .tab-list, .nav-tabs, .segmented-control, .filter-tabs,
  .project-tabs, .sub-tabs {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    scrollbar-width: thin;
  }

  .tabs > *, .tab-list > *, .nav-tabs > *, .segmented-control > *,
  .filter-tabs > *, .project-tabs > *, .sub-tabs > * {
    flex: 0 0 auto;
  }

  .table-wrapper, .data-table-wrapper, .table-responsive,
  .matrix-table-wrapper, .report-table-wrapper, .cynapse-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.report-page) table:not(.report-page table):not(.report-table) {
    min-width: 680px;
  }

  .modal, .modal-dialog, .dialog, .popup, .drawer, .offcanvas {
    max-width: calc(100vw - 24px) !important;
  }

  .modal-content, .dialog-content, .popup-content {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }

  .cynapse-feedback-region {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (max-width: 640px) {
  .hide-on-mobile, .desktop-only { display: none !important; }

  .mobile-stack, .toolbar, .actions-bar, .page-actions,
  .form-actions, .modal-actions, .button-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .toolbar > *, .actions-bar > *, .page-actions > *,
  .form-actions > *, .modal-actions > *, .button-row > * {
    width: 100%;
  }

  .cynapse-toast { grid-template-columns: 5px 1fr auto; }
}

@media print {
  .cynapse-feedback-region { display: none !important; }
  .cy-field-help { display: none !important; }
}

/* WAVE 43 -- field-level guidance ("?" help icons next to form fields,
   app-wide). This reuses the app's EXISTING, already-vendored Tippy.js
   tooltip library (vendor/tippy-bundle.umd.min.js, initialized via
   Utils.initTippy() in project_details_utils.js -- previously only called
   after rendering the Systems table, now also called once on page load in
   project_details_logic.js and again after the edit-item-modal injects
   dynamic content in project_details_modals.js) instead of inventing a new
   tooltip system. Markup convention used everywhere:
     <span class="cy-field-help" data-tippy-content="explanation text">?</span>
   This is only the badge's visual styling -- the popover itself (position,
   arrow, theme) is entirely Tippy's existing 'light-border' theme, already
   proven working elsewhere in this same page. */
.cy-field-help {
  /* Roadmap P1.8: a 24px hit area (WCAG 2.2 target size) around the 16px badge drawn by ::before. */
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--cynapse-brand);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  user-select: none;
}
.cy-field-help::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 999px;
  border: 1px solid var(--cynapse-line-strong);
  background: var(--cynapse-soft);
}
.cy-field-help:hover, .cy-field-help:focus-visible {
  color: #fff;
  outline: none;
}
.cy-field-help:hover::before, .cy-field-help:focus-visible::before {
  background: var(--cynapse-brand);
}
.cy-field-help:focus-visible::before { box-shadow: 0 0 0 2px var(--cynapse-brand); }

/* Roadmap P1.8: minimum 24 x 24px pointer target for every button (WCAG 2.2 SC 2.5.8).
   :where() keeps this at zero specificity so any component that sizes its own buttons wins. */
:where(button, [role="button"]) { min-height: 24px; min-width: 24px; }

/* WAVE 45 -- shared Tippy.js popover border, moved here from project_details.html
   so every page that wires up tippy-bundle.umd.min.js for "?" field-help
   badges gets the same light-border popover style from one place instead of
   duplicating this rule per page. */
.tippy-box[data-theme~='light-border'] { border: 1px solid #d1d5db; }

/* WAVE 46 -- Controls Library accordion redesign (Security Modeling -> Controls
   Library). Each control family card's header is a real <button> so it's
   keyboard-accessible; this just makes it look like a clickable section header
   instead of a default button, and animates the chevron on expand/collapse.
   See Handlers.loadControls / Handlers.toggleControlFamily in
   project_details_handlers_V2.js for the JS side. */
.control-family-card {
  padding: 0;
  overflow: hidden;
}
.control-family-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.5rem;
  font: inherit;
  color: inherit;
}
.control-family-toggle:hover {
  background: var(--cynapse-soft, #F4F8F1);
}
.control-family-toggle:focus-visible {
  outline: 2px solid var(--cynapse-brand);
  outline-offset: -2px;
}
.control-family-chevron {
  color: #8a978d;
  transition: transform 0.2s ease;
}
.control-family-card.is-expanded .control-family-chevron {
  transform: rotate(180deg);
}
.control-family-body {
  padding: 0 1.5rem 1.5rem 1.5rem;
}
.controls-library-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* WAVE 160 -- Mobile View / Full Site View toggle control, injected by
   cynapse_view_mode.js on any page that includes that script. Mobile View
   is the default; this floating pill lets the user switch to Full Site
   View (and back) and remembers the choice (localStorage). Only shown on
   pages that opt in AND only while the device is actually a narrow/mobile
   viewport -- a desktop visitor never sees it. */
.cynapse-view-toggle {
  position: fixed;
  right: var(--cynapse-space-4, 16px);
  bottom: var(--cynapse-space-4, 16px);
  z-index: 99998;
  display: inline-flex;
  align-items: center;
  gap: var(--cynapse-space-2, 8px);
  min-height: var(--cynapse-touch-target, 44px);
  padding: 0 var(--cynapse-space-4, 16px);
  border-radius: 999px;
  border: 1px solid var(--cynapse-line-strong);
  background: var(--cynapse-ink, #17352b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--cynapse-shadow);
  cursor: pointer;
}

.cynapse-view-toggle:focus-visible {
  outline: 3px solid rgba(23, 53, 43, .35);
  outline-offset: 2px;
}

.cynapse-view-toggle i {
  font-size: 14px;
}

/* Full Site View forces the layout viewport wide (see
   cynapse_view_mode.js), so the toggle repositions itself relative to that
   wider viewport instead of clinging to the real, narrow screen edge. */
html.cynapse-full-site-view .cynapse-view-toggle {
  right: var(--cynapse-space-6, 24px);
  bottom: var(--cynapse-space-6, 24px);
}

/* WAVE 188 -- Compliance Schedule (Validity Duration + expiry alerts) widget,
   shared by project_details.html (project-scoped, with pop-up), my_cynapse.html
   and user_dashboard.html (cross-project, list-only). One shared block here
   instead of three separate stylesheets, reusing .cy-card/.cy-badge above
   rather than inventing a parallel component set. See compliance_schedule_widget.js. */
.cy-cs-list { display: flex; flex-direction: column; gap: 10px; }
.cy-cs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--cynapse-line);
  border-radius: var(--cynapse-radius-sm);
  background: var(--cynapse-soft);
}
.cy-cs-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cy-cs-module { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cynapse-muted); }
.cy-cs-label { font-size: 14px; font-weight: 600; color: var(--cynapse-ink); word-break: break-word; }
.cy-cs-project { font-size: 12px; font-weight: 600; color: var(--cynapse-brand-bright); margin-inline-end: 6px; }
.cy-cs-row-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cy-cs-days { font-size: 12px; color: var(--cynapse-muted); white-space: nowrap; }
.cy-cs-empty { padding: 14px; text-align: center; color: var(--cynapse-muted); font-size: 13px; }
.cy-cs-loading { padding: 14px; text-align: center; color: var(--cynapse-muted); font-size: 13px; }

.cy-cs-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 32, 25, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.cy-cs-popup-card {
  background: var(--cynapse-surface);
  border-radius: var(--cynapse-radius);
  box-shadow: var(--cynapse-shadow);
  max-width: 520px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: 22px;
}
.cy-cs-popup-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cy-cs-popup-header i { color: var(--cynapse-warning); font-size: 20px; }
.cy-cs-popup-header h3 { font-size: 17px; font-weight: 800; color: var(--cynapse-ink); margin: 0; }
.cy-cs-popup-summary { font-size: 13px; color: var(--cynapse-muted); margin: 0 0 14px 0; }
.cy-cs-popup-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cy-cs-popup-more { font-size: 12px; color: var(--cynapse-muted); margin-bottom: 12px; }
.cy-cs-popup-actions { display: flex; justify-content: flex-end; }