/* ==========================================================================
   Global Theme Tokens
   This file is the shared token source for the whole site:
   - default theme values in :root
   - preset theme overrides
   - a few shared base/utility styles
   ========================================================================== */

/* Default token values.
   Short names like --crd-*, --sec-*, --hdr-*, and --mob-* are older shared
   aliases that components still consume, so they stay here as compatibility
   tokens even when the meaning is a bit shorthand-heavy. */
:root {
  /* Typography + preset-managed background media */
  --font-family-base: "Open Sans", sans-serif;
  --font-family-ui: var(--font-family-base);
  --font-family-system: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-family-mono: "Fira Code", "Consolas", monospace;
  --card-font-family: var(--font-family-base);
  --theme-font-import-url: none;
  --theme-background-media-url: none;
  --background-media-overlay-color: #000000;
  --background-media-overlay-strength: 38;
  --background-media-overlay-opacity: 0.171;
  --background-media-overlay: var(--background-media-overlay-color);

  /* Core colors + shared legacy aliases */
  --bg: #000000;
  --fg: #ffffff;
  --crd-bg: rgba(0, 0, 0, 0.4);
  --site-border-color: #070707;
  --site-outline-color: var(--site-border-color);
  --crd-bdr: var(--site-border-color);
  /* Main preset palette helpers.
     Preset theme blocks primarily override these, while the legacy public
     tokens below continue to feed the rest of the app. */
  --theme-main-color: #3b82f6;
  --theme-hover-color: #2563eb;
  --theme-gradient-start-color: #60a5fa;
  --theme-gradient-end-color: var(--theme-hover-color);
  --theme-rgb: 59, 130, 246;
  --theme-card-hover-alpha: 0.2;
  --theme-glow-alpha: 0.5;
  --theme-soft-tint-alpha: 0.1;
  --theme-medium-tint-alpha: 0.3;
  --theme-strong-tint-alpha: 0.5;
  --theme-border-tint-alpha: 0.5;
  --theme-status-updated-color-base: var(--theme-main-color);
  --theme-status-updated-rgb-base: var(--theme-rgb);
  --theme-status-muted-color-base: #9ca3af;
  --theme-status-muted-rgb-base: 156, 163, 175;

  /* Legacy/shared aliases consumed across component CSS */
  --crd-hvr: rgba(var(--theme-rgb), var(--theme-card-hover-alpha));
  --prim: var(--theme-main-color);
  --prim-hvr: var(--theme-hover-color);
  --prim-grd: linear-gradient(to right, var(--theme-main-color), var(--theme-gradient-end-color));
  --prim-glw: rgba(var(--theme-rgb), var(--theme-glow-alpha));
  --sec: rgba(0, 0, 0, 0.3);
  --sec-bdr: var(--site-border-color);
  --sec-hvr: rgba(var(--theme-rgb), var(--theme-soft-tint-alpha));
  --sec-hvr-bdr: rgba(var(--theme-rgb), var(--theme-border-tint-alpha));
  --txt-mut: rgba(156, 163, 175, 1);
  --theme-color: var(--theme-main-color);

  /* Footer */
  --footer-bg: #000000;
  --footer-border: var(--site-border-color);
  --footer-text: rgba(209, 213, 219, 1);
  --footer-muted: rgba(156, 163, 175, 1);
  --footer-follow-global-surface: 0;
  --footer-surface-tint-color: #000000;
  --footer-surface-tint-power: 82;
  --footer-surface-outline-color: var(--site-border-color);
  --footer-surface-blur-enabled: 0;
  --footer-surface-blur-strength: 12;
  --footer-backdrop-blur: var(--card-surface-backdrop-blur);
  --footer-glow-color: var(--theme-main-color);
  --footer-max-width: 1200px;
  --footer-horizontal-padding: 2rem;
  --footer-padding-block: 2.5rem;
  --footer-section-gap: 2rem;
  --footer-section-divider-spacing: 1.5rem;
  --footer-overlay-gradient: linear-gradient(
    to top,
    rgba(var(--prim-rgb), 0.12) 0%,
    rgba(var(--prim-rgb), 0.065) 16%,
    rgba(var(--prim-rgb), 0.03) 32%,
    rgba(var(--prim-rgb), 0.012) 48%,
    rgba(var(--prim-rgb), 0) 66%
  );
  --footer-logo-height: 40px;
  --footer-logo-height-mobile: 32px;
  --footer-link-gap: 1.5rem;
  --footer-theme-control-height: 2.85rem;
  --footer-theme-control-height-current: var(--footer-theme-control-height);
  --footer-theme-control-height-mobile: 2.7rem;
  --footer-theme-menu-shadow: 0 -10px 25px rgba(0, 0, 0, 0.3);
  --footer-theme-option-hover-background: rgba(255, 255, 255, 0.1);
  --footer-theme-option-selected-background: rgba(255, 255, 255, 0.05);
  --footer-theme-swatch-size: 1rem;
  --footer-theme-swatch-border: rgba(255, 255, 255, 0.3);
  --footer-theme-swatch-default: var(--theme-color);
  --footer-theme-highlight-shadow:
    0 0 0 1px rgba(var(--prim-rgb), 0.44),
    0 0 1.25rem rgba(var(--prim-rgb), 0.28),
    0 0 2.5rem rgba(var(--prim-rgb), 0.18);
  --footer-heart-size: 1.24rem;
  --footer-heart-fill: linear-gradient(
    135deg,
    rgba(var(--prim-rgb), 0.5) 0%,
    rgba(var(--prim-rgb), 0.72) 34%,
    var(--prim) 100%
  );
  --footer-credit-color: var(--prim);
  --footer-meta-text-size: 0.75rem;
  --footer-status-gap: 0.4rem;
  --footer-status-dot-size: 0.4rem;

  /* Status colors + shared frosted/glass surfaces */
  --status-updated-color: var(--theme-status-updated-color-base);
  --status-updated-rgb: var(--theme-status-updated-rgb-base);
  --status-not-updated-color: var(--theme-status-muted-color-base);
  --status-not-updated-rgb: var(--theme-status-muted-rgb-base);
  --exploit-card-chrome: var(--site-border-color);
  --card-surface-background: #000000;
  --card-surface-backdrop-blur: 0px;
  --card-action-button-tint-color: #000000;
  --card-action-button-tint-power: 34;
  --card-action-button-background: rgba(0, 0, 0, 0.34);
  --card-action-button-background-hover: rgba(0, 0, 0, 0.42);
  --card-action-button-text: rgba(203, 213, 225, 0.8);
  --card-sponsor-button-tint-color: #000000;
  --card-sponsor-button-tint-power: 34;
  --card-sponsor-button-background: rgba(0, 0, 0, 0.34);
  --card-sponsor-button-background-hover: rgba(0, 0, 0, 0.42);
  --card-sponsor-button-text: rgba(248, 250, 252, 0.96);
  --footer-status-live-color: rgba(var(--status-updated-rgb), 0.95);
  --footer-status-muted-color: rgba(var(--status-not-updated-rgb), 0.9);

  /* Shared action, badge, form, and brand colors */
  --social-hover: var(--theme-main-color);
  --card-hover: var(--theme-main-color);
  --ad-color: var(--theme-main-color);
  --ad2-color: var(--theme-main-color);
  --ad3-color: linear-gradient(90deg, var(--theme-main-color), var(--theme-gradient-end-color));
  --inp-color: var(--theme-main-color);
  --inp2-color: rgba(var(--theme-rgb), var(--theme-strong-tint-alpha));
  --lbl-color: var(--theme-main-color);
  --lbl2-color: white;
  --checkbx-color: rgba(var(--theme-rgb), var(--theme-soft-tint-alpha));
  --checkbx2-color: rgba(var(--theme-rgb), var(--theme-medium-tint-alpha));
  --prim-rgb: var(--theme-rgb);
  --bg-gradient: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent, rgba(0, 0, 0, 0.6));
  --warning-bg: linear-gradient(135deg, var(--theme-gradient-start-color), var(--theme-gradient-end-color));
  --bdg-b-color: rgba(var(--theme-rgb), var(--theme-soft-tint-alpha));
  --bdg-color: rgba(var(--theme-rgb), var(--theme-medium-tint-alpha));
  --link-muted: rgba(255, 255, 255, 0.8);
  --srch-dflt: rgb(133, 133, 133);
  --srch-dflt-dyn: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));

  /* Motion, spacing, radius, and shared runtime layout helpers */
  --smooth-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --smooth-duration: 0.45s;
  --rad: 0.5rem;
  --hdr-h: 4rem;
  --ads-hidden-center-width: 100%;
  --mob-panel-pad: 0.6rem;
  --mob-quick-gap: 0.55rem;
  --mob-quick-icon-size: 1.4rem;
  --mob-quick-icon-font: 1rem;
  --mob-quick-solid-size: 2.25rem;
  --mob-quick-solid-radius: 0.5rem;
  --site-bottom-fade-height: clamp(4.75rem, 10vw, 8rem);
  --site-bottom-fade-fill: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.14) 22%,
    rgba(0, 0, 0, 0.42) 52%,
    rgba(0, 0, 0, 0.8) 82%,
    #000000 100%
  );

  /* Navbar */
  --navbar-height: var(--hdr-h);
  --navbar-background: #000000;
  --navbar-mobile-panel-background: var(--navbar-background);
  --navbar-position: sticky;
  --navbar-top: 0px;
  --navbar-mobile-menu-top: var(--navbar-height);
  --navbar-scrolled-border: var(--site-border-color);
  --navbar-scroll-flash-gradient: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.72) 6%,
    rgba(255, 255, 255, 0.98) 14%,
    rgba(255, 255, 255, 0.98) 86%,
    rgba(255, 255, 255, 0.72) 94%,
    transparent 100%
  );
  --navbar-search-max-width: 500px;
  --navbar-search-background: rgba(0, 0, 0, 0.3);
  --navbar-search-background-focus: rgba(0, 0, 0, 0.5);
  --navbar-search-clear-color: var(--txt-mut);
  --navbar-button-background: rgba(255, 255, 255, 0.05);
  --navbar-button-accent-background: var(--prim-grd);
  --navbar-button-accent-border: var(--sec-hvr-bdr);
  --navbar-button-hover-shadow: var(--prim-glow-shadow);
  --navbar-mobile-panel-padding: var(--mob-panel-pad);
  --navbar-mobile-quick-gap: var(--mob-quick-gap);
  --navbar-mobile-quick-icon-size: var(--mob-quick-icon-size);
  --navbar-mobile-quick-icon-font-size: var(--mob-quick-icon-font);
  --navbar-mobile-quick-accent-size: var(--mob-quick-solid-size);
  --navbar-mobile-quick-accent-radius: var(--mob-quick-solid-radius);
  --navbar-mobile-toggle-background: rgba(255, 255, 255, 0.04);
  --navbar-mobile-toggle-background-hover: rgba(255, 255, 255, 0.1);
  --navbar-mobile-menu-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  --navbar-mobile-link-background: rgba(255, 255, 255, 0.03);
  --navbar-mobile-link-accent-background: var(--sec-hvr);
  --navbar-warning-background: var(--warning-bg);
  --navbar-warning-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);

  /* Filter drawer + shared control surfaces */
  --filter-overlay-background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.5) 56%,
    rgba(0, 0, 0, 0.42) calc(100% - 460px),
    rgba(0, 0, 0, 0.2) 100%
  );
  --filter-panel-background: rgba(0, 0, 0, 0.95);
  --filter-panel-border: var(--sec-bdr);
  --filter-panel-max-width: 400px;
  --filter-panel-padding: 1.5rem;
  --filter-section-spacing: 1.5rem;
  --filter-section-title-color: rgba(209, 213, 219, 1);
  --filter-section-dot-fill: var(--prim);
  --filter-close-color: rgba(203, 213, 225, 0.82);
  --filter-close-color-hover: rgba(248, 250, 252, 0.96);
  --filter-option-background: rgba(0, 0, 0, 0.3);
  --filter-option-border: var(--sec-bdr);
  --filter-option-background-active: var(--sec-hvr);
  --filter-option-border-active: var(--sec-hvr-bdr);
  --filter-option-text-active: var(--prim);
  --filter-checkbox-background: var(--filter-panel-background);
  --filter-checkbox-border: rgba(255, 255, 255, 0.2);
  --filter-checkbox-background-hover: var(--checkbx-color);
  --filter-checkbox-border-hover: var(--checkbx2-color);
  --filter-dropdown-option-hover-background: rgba(255, 255, 255, 0.1);
  --filter-dropdown-option-selected-background: rgba(var(--prim-rgb), 0.2);
  --filter-reset-background: transparent;
  --filter-reset-border: var(--sec-bdr);
  --filter-reset-border-hover: var(--sec-hvr-bdr);
  --filter-reset-color: var(--fg);
  --filter-apply-background: var(--prim-grd);
  --surface-control-bg: rgba(0, 0, 0, 0.5);
  --surface-control-bg-hover: rgba(0, 0, 0, 0.7);
  --surface-overlay-bg: rgba(0, 0, 0, 0.95);
  --info-modal-follow-global-surface: 0;
  --info-modal-surface-tint-color: #000000;
  --info-modal-surface-tint-power: 88;
  --info-modal-surface-outline-color: var(--site-border-color);
  --info-modal-surface-blur-enabled: 0;
  --info-modal-surface-blur-strength: 12;
  --info-modal-background: rgba(0, 0, 0, 0.88);
  --info-modal-backdrop-blur: 0px;
  --info-modal-header-accent-color: var(--theme-main-color);
  --info-modal-header-background: linear-gradient(to right, rgba(var(--prim-rgb), 0.1), transparent);
  --prim-glow-shadow: 0 0 0.45rem rgba(var(--prim-rgb), 0.7), 0 0 1rem rgba(var(--prim-rgb), 0.55);
  --featured-follow-global-surface: 1;
  --featured-surface-tint-color: #000000;
  --featured-surface-tint-power: 82;
  --featured-surface-outline-color: var(--site-border-color);
  --featured-surface-blur-enabled: 0;
  --featured-surface-blur-strength: 12;
  --featured-surface-background: var(--card-surface-background);
  --featured-surface-backdrop-blur: var(--card-surface-backdrop-blur);

  /* Featured card */
  --featured-section-spacing: 1rem;
  --featured-hide-duration: 220ms;
  --featured-card-max-width: 400px;
  --card-surface-tint: var(--card-surface-background);
  --featured-card-border: var(--featured-surface-outline-color);
  --featured-card-radius: 0.75rem;
  --featured-card-header-padding: 0.625rem 0.9375rem;
  --featured-card-header-border: var(--featured-card-border);
  --featured-card-body-padding: 0.9375rem;
  --featured-card-accent-height: 0.25rem;
  --featured-card-accent-fill: var(--prim-grd);
  --featured-title-font-size: 1rem;
  --featured-title-color: #ffffff;
  --featured-title-letter-spacing: 1px;
  --featured-action-color: rgba(255, 255, 255, 0.7);
  --featured-action-hover-color: var(--fg);
  --featured-image-background: rgba(0, 0, 0, 0.2);
  --featured-image-radius: 0.5rem;
  --featured-overlay-fill: linear-gradient(90deg, var(--theme-gradient-start-color) 0%, var(--theme-main-color) 46%, #ffffff 100%);
  --featured-overlay-opacity: 0.98;
  --featured-overlay-mask: url("/public/assets/overlay/promo-3.png");

  /* Shared logo/banner overlay art */
  --banner-overlay-fill: linear-gradient(90deg, var(--theme-gradient-start-color) 0%, var(--theme-main-color) 70%, var(--theme-gradient-end-color) 100%);
  --banner-overlay-opacity: 0.98;
  --banner-overlay-mask: url("/public/assets/overlay/voxlis-2.png");
  --header-overlay-fill: linear-gradient(90deg, var(--theme-gradient-start-color) 0%, var(--theme-main-color) 70%, var(--theme-gradient-end-color) 100%);
  --header-overlay-opacity: 0.98;
  --header-overlay-mask: url("/public/assets/overlay/voxlis-2.png");
  --brand-gradient-enabled: 1;
  --brand-gradient-color: #60a5fa;
  --brand-gradient-offset: 70%;
  --sponsor-overlay-mask: url("/public/assets/icons/images/keyempire-logo.png");
  --footer-heart-mask: url("/public/assets/icons/vectors/heart.svg");

  /* Generic shadows + promo section */
  --shd: 0 10px 25px rgba(0, 0, 0, 0.2);
  --shd-hvr: 0 15px 30px rgba(0, 0, 0, 0.3);
  --hero-width: 48rem;
  --promo-hero-max-width: var(--hero-width);
  --promo-text-max-width: 36rem;
  --promo-card-background: var(--card-surface-background);
  --promo-card-padding: clamp(1.4rem, 3.2vw, 2rem);
  --promo-grid-fill: linear-gradient(to right, rgba(var(--prim-rgb), 0.05), transparent);
  --promo-glow-size: 8rem;
  --promo-glow-offset: -1.5rem;
  --promo-glow-fill: rgba(var(--prim-rgb), 0.1);
  --promo-glow-blur: 3rem;
  --promo-accent-width: 0.5rem;
  --promo-accent-height: 2.05rem;
  --promo-accent-fill: linear-gradient(to bottom, var(--prim), var(--prim-hvr));
  --promo-accent-gap: 1.5rem;
  --promo-accent-offset-top: 0.15rem;
  --promo-title-accent: var(--prim);
  --promo-description: var(--txt-mut);
  --promo-button-gap: 0.65rem;
  --promo-button-fill: var(--prim-grd);
  --promo-button-text: #ffffff;
  --promo-button-padding: 0.75rem 1.5rem;
  --promo-button-shadow: 0 4px 6px -1px rgba(var(--prim-rgb), 0.1), 0 2px 4px -1px rgba(var(--prim-rgb), 0.05);
  --promo-button-hover-shadow: var(--prim-glow-shadow);
  --promo-button-icon-fill: var(--prim);
  --promo-button-icon-color: #ffffff;
  --promo-button-icon-radius: 0.25rem;
  --promo-button-shine: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  --promo-muted-button-text: rgba(209, 213, 219, 0.9);
  --promo-muted-button-icon: rgba(156, 163, 175, 0.95);
  --promo-banner-max-width: 600px;

  /* Runtime mask injected by card rendering when an asset icon exists */
  --ph-asset-icon: none;
}

/* ==========================================================================
   Preset Theme Overrides
   Each preset only overrides the tokens that differ from :root defaults.
   ========================================================================== */

/* Preset: blue / default */
:root[data-theme="blue"] {
  /* Uses the :root defaults. Keep this block so the preset remains explicit. */
}

/* Issue cards — amber icons on Review / More buttons (Legacy preset) */
:root[data-theme="blue"] .exploit-card-placeholder.is-issue .ph-action-btn i {
  color: rgba(245, 158, 11, 0.95) !important;
}
:root[data-theme="blue"] .exploit-card-placeholder.is-issue .ph-action-icon.is-info {
  background-image: none;
  background-color: rgba(245, 158, 11, 0.95);
}

/* ==========================================================================
   Base Document + Site Background Media
   ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-family-base);
  position: relative;
  isolation: isolate;
}

body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--site-bottom-fade-height);
  pointer-events: none;
  background: var(--site-bottom-fade-fill);
  clip-path: inset(0 0 var(--site-bottom-fade-offset, 0px) 0);
  z-index: 40;
}

body.site-bottom-fade-hidden::after {
  display: none;
}

body.has-custom-background {
  background: transparent;
}

.site-background-media {
  position: fixed;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg, #000000);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--smooth-duration) var(--smooth-ease);
}

.site-background-media.is-no-transition {
  transition: none;
}

.site-background-media.is-visible {
  opacity: 1;
}

.site-background-media-shade,
.site-background-media-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-background-media-shade {
  z-index: 1;
  background: var(--bg-gradient);
}

.site-background-media-overlay {
  z-index: 2;
  background: var(--background-media-overlay);
  opacity: var(--background-media-overlay-opacity, 0.171);
}

.site-background-media-image,
.site-background-media-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-background-media-image[hidden],
.site-background-media-video[hidden] {
  display: none;
}

/* ==========================================================================
   Browser Chrome + Shared Text/Link Defaults
   ========================================================================== */

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--prim-rgb), 0.85) var(--bg, #000000);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--bg, #000000);
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--prim), var(--prim-hvr));
  border-radius: 0;
  border: 2px solid rgba(0, 0, 0, 0.7);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--prim-hvr), var(--prim));
}

*::-webkit-scrollbar-corner {
  background: var(--bg, #000000);
}

a {
  color: inherit;
  text-decoration: none;
}

.navbar-link,
.footer-nav-link {
  font-size: 0.875rem;
  color: var(--link-muted);
  white-space: nowrap;
  transition: color var(--smooth-duration) var(--smooth-ease);
}

.navbar-link:hover,
.footer-nav-link:hover {
  color: var(--fg);
}

/* Shared dropdown/menu shells */
.footer-theme-selected,
.custom-dropdown-selected {
  background-color: var(--surface-control-bg);
  border: 1px solid var(--sec-bdr);
  border-radius: var(--rad);
  transition: all var(--smooth-duration) var(--smooth-ease);
}

.footer-theme-menu,
.custom-dropdown-options {
  background-color: var(--surface-overlay-bg);
  border: 1px solid var(--sec-bdr);
  border-radius: var(--rad);
}

/* Shared card shell helpers */
.promo-hero-card,
.promo-card {
  position: relative;
  width: 100%;
  border-radius: 0.75rem;
  box-shadow: var(--shd);
  overflow: hidden;
  transition: all var(--smooth-duration) var(--smooth-ease);
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* Shared max-width wrapper */
.cntr {
  width: 100%;
  max-width: min(100%, clamp(300px, 95vw, 1800px));
  min-width: 0;
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 5vw, 2rem);
}

#navbarMount {
  display: contents;
}

/* Infinite-scroll mounting helpers */

.infinite-scroll-host {
  width: 100%;
}

.infinite-scroll-chunk {
  min-height: 72vh;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(var(--prim-rgb), 0.02));
}