html {
  background-color: #101114;
  color-scheme: dark;
  scroll-behavior: smooth;
  min-height: 100%;
}

html.theme-light {
  background-color: #fff;
  color-scheme: light;
}

:root {
  --color-bg: #fff;
  --color-bg-secondary: #f8f9fa;
  --color-text: #212529;
  --color-text-muted: #6c757d;
  --color-text-muted-on-fill: #5a6169;
  --color-border: #dee2e6;
  --color-border-light: #e9ecef;
  --color-card-bg: #fff;
  --color-hover: rgb(0 0 0 / 5%);
  --color-primary: #5b54d6;
  --color-secondary: #764ba2;
  --color-accent: #d95204;
  --color-hero-start: #667eea;
  --color-hero-end: #764ba2;
  --color-brand: #ff4d00;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;
  --color-success-light: rgb(40 167 69 / 10%);
  --color-warning-light: rgb(255 193 7 / 10%);
  --color-error-light: rgb(220 53 69 / 10%);
  --color-info-light: rgb(23 162 184 / 10%);
  --color-chip-bg: #f8f9fa;
  --color-chip-text: #495057;
  --color-chip-border: #e9ecef;
  --color-divider: #f1f3f5;
  --severity-critical-bg: rgb(220 53 69 / 12%);
  --severity-critical-fg: #b02a37;
  --severity-high-bg: rgb(232 89 12 / 12%);
  --severity-high-fg: #a03f07;
  --severity-medium-bg: rgb(181 138 0 / 12%);
  --severity-medium-fg: #7a6000;
  --severity-low-bg: var(--color-divider);
  --severity-low-fg: #5f676e;
}

.theme-dark {
  --color-bg: #101114;
  --color-bg-secondary: #17181c;
  --color-text: #e2e8f0;
  --color-text-muted: #9ca3af;
  --color-text-muted-on-fill: #9ca3af;
  --color-border: rgb(255 255 255 / 10%);
  --color-border-light: rgb(255 255 255 / 6%);
  --color-card-bg: #17181c;
  --color-hover: rgb(255 255 255 / 5%);
  --color-primary: #8b85f0;
  --color-secondary: #764ba2;
  --color-accent: #e8590c;
  --color-hero-start: #4a44a8;
  --color-hero-end: #563a78;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;
  --color-success-light: rgb(40 167 69 / 15%);
  --color-warning-light: rgb(255 193 7 / 15%);
  --color-error-light: rgb(220 53 69 / 15%);
  --color-info-light: rgb(23 162 184 / 15%);
  --color-chip-bg: #1d1f24;
  --color-chip-text: #e2e8f0;
  --color-chip-border: rgb(255 255 255 / 10%);
  --color-divider: rgb(255 255 255 / 6%);
  --severity-critical-fg: #f27884;
  --severity-high-fg: #ff9d5c;
  --severity-medium-fg: #e9c46a;
  --severity-low-bg: rgb(148 163 184 / 14%);
  --severity-low-fg: #b6c2d1;
}

:root {
  --font-family-sans: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  --font-family-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Segoe UI Mono", "Roboto Mono", menlo, courier, monospace;
  --font-family-serif: georgia, "Times New Roman", serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
}

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
}

:root {
  --radius-none: 0;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 0.75rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
}

:root {
  --shadow-none: 0 0 #0000;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 6%);
}

:root {
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: var(--duration-fast) ease-in-out;
  --transition-normal: var(--duration-normal) ease-in-out;
  --transition-slow: var(--duration-slow) ease-in-out;
}

:root {
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

*,*::before,*::after {
  box-sizing:border-box;
}

body,h1,h2,h3,h4,h5,h6,p {
  padding:0;
  margin:0;
}

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

}

.code {
  font-family:var(--font-family-mono);
  cursor:text;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-ligatures:common-ligatures;
}

.label {
  cursor:pointer;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

body {
  background-color:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-family-sans);
  font-size:var(--font-size-md);
  line-height:var(--line-height-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6 {
  color:var(--color-text);
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-tight);
}

h1,h2,h3 {
  letter-spacing:-0.02em;
}

h1 {
  font-size:var(--font-size-3xl);
}

h2 {
  font-size:var(--font-size-2xl);
}

h3 {
  font-size:var(--font-size-xl);
}

h4 {
  font-size:var(--font-size-lg);
}

h5 {
  font-size:var(--font-size-md);
}

h6 {
  font-size:var(--font-size-sm);
}

a {
  color:var(--color-primary);
  text-decoration:none;
  transition:text-decoration var(--transition-fast);
}

a:hover {
  text-decoration:underline;
}

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible {
  border-radius:var(--radius-sm);
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

body.is-theme-switching {
  transition:background-color var(--transition-slow),color var(--transition-slow);
}

.container {
  width:100%;
  max-width:1200px;
  padding:0 var(--space-4);
  margin:0 auto;
}

@media(width <= 768px) {
  .container {
    padding:0 var(--space-3);
  }

}

.layout {
  width:100%;
}

.layout--hidden {
  display:none;
}

.search-results__container {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%;
  max-width:900px;
  padding:0 var(--space-4);
  margin:0 auto var(--space-8);
}

.content {
  width:100%;
}

.hero {
  padding:var(--space-9) 0;
  margin-bottom:var(--space-6);
  background:linear-gradient(135deg, var(--color-hero-start) 0%, var(--color-hero-end) 100%);
  color:#fff;
  text-align:center;
}

body.is-searching .hero {
  padding:var(--space-5) 0;
  margin-bottom:var(--space-4);
}

.home-widgets--hidden {
  display:none;
}

.cards.cards--stacked {
  grid-template-columns:1fr;
}

.cards {
  display:grid;
  align-items:start;
  margin:var(--space-6) 0;
  gap:var(--space-5);
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
}

@media(width >= 768px) {
  .cards {
    grid-template-columns:repeat(2, 1fr);
  }

  .cards>:nth-child(3):last-child {
    grid-column:1/-1;
  }

  .cards>:nth-child(3):last-child .card__body {
    column-gap:var(--space-6);
    columns:2;
  }

  .cards>:nth-child(3):last-child .card__body>* {
    break-inside:avoid;
  }

}

@media(width >= 1200px) {
  .cards {
    grid-template-columns:repeat(2, 1fr);
  }

  .cards>:nth-child(3):last-child {
    grid-column:auto;
  }

  .cards>:nth-child(3):last-child .card__body {
    columns:auto;
  }

}

.search__input-wrapper {
  position:relative;
  display:flex;
  flex:1;
  align-items:center;
}

.header {
  display:flex;
  align-items:center;
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-border);
  background:var(--color-card-bg);
}

.header__section {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.header__section:first-child {
  justify-content:flex-start;
}

.header__section--right {
  justify-content:flex-end;
}

.brand {
  display:inline-flex;
  align-items:center;
  color:var(--color-text);
  text-decoration:none;
  transition:color .2s ease;
  gap:var(--space-3);
}

.brand:hover {
  color:var(--color-brand);
  text-decoration:none;
}

.brand__logo {
  flex-shrink:0;
  width:2.5rem;
  height:2.5rem;
  background-image:url("static/images/ui/brand.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.brand__title {
  margin:0;
  font-size:var(--font-size-3xl);
  font-weight:800;
  line-height:var(--line-height-tight);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.header__search {
  display:flex;
  align-items:center;
  width:100%;
  max-width:320px;
  padding:0 var(--space-3);
  margin-left:var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-bg);
  transition:border-color .2s ease;
  gap:var(--space-2);
}

.header__search:focus-within {
  border-color:var(--color-primary);
}

.header__search-icon {
  flex-shrink:0;
  width:16px;
  height:16px;
  color:var(--color-text-muted);
}

.header__search-input {
  width:100%;
  min-height:44px;
  padding:var(--space-2) 0;
  border:none;
  background:rgba(0,0,0,0);
  color:var(--color-text);
  font-family:inherit;
  font-size:var(--font-size-sm);
}

.header__search-input::placeholder {
  color:var(--color-text-muted);
}

.header__search-input:focus {
  outline:none;
}

@media(width <= 768px) {
  .header {
    flex-wrap:wrap;
  }

  .header__section:first-child {
    flex-basis:100%;
    order:3;
  }

  .header__section:nth-child(2) {
    justify-content:flex-start;
    padding-left:var(--space-4);
  }

  .header__search {
    max-width:none;
    margin:var(--space-3) var(--space-4) 0;
  }

}

.theme-toggle {
  display:flex;
  justify-content:center;
  justify-content:flex-end;
  padding-right:var(--space-4);
}

.theme-toggle__button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:rgba(0,0,0,0);
  color:var(--color-text-muted);
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}

.theme-toggle__button:hover {
  border-color:var(--color-border);
  background:var(--color-bg-secondary);
  color:var(--color-text);
}

.theme-toggle__button:focus-visible {
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.theme-toggle__icon {
  width:1.5rem;
  height:1.5rem;
}

.theme-toggle__icon.theme-toggle__icon--sun {
  display:none;
}

body.theme-dark .theme-toggle__icon.theme-toggle__icon--moon {
  display:none;
}

body.theme-dark .theme-toggle__icon.theme-toggle__icon--sun {
  display:block;
}

.hero--tentacles {
  position:relative;
  overflow:hidden;
}

.hero--tentacles::after {
  content:"";
  position:absolute;
  z-index:1;
  background:radial-gradient(ellipse 85% 75% at 50% 45%, transparent 52%, rgba(0, 0, 0, 0.18) 100%);
  pointer-events:none;
  inset:0;
}

.hero--tentacles::before {
  content:"";
  position:absolute;
  z-index:1;
  background-image:url("static/images/ui/grain.svg");
  background-size:220px 220px;
  pointer-events:none;
  opacity:.07;
  inset:0;
  mix-blend-mode:overlay;
}

.theme-toggle--floating {
  position:absolute;
  top:var(--space-3);
  right:var(--space-4);
  z-index:10;
  padding-right:0;
}

.theme-toggle--floating .theme-toggle__button {
  border:2px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.12);
  color:#fff;
}

.theme-toggle--floating .theme-toggle__button:hover {
  border-color:#fff;
  background:rgba(255,255,255,.24);
  color:#fff;
}

.hero__brand {
  margin:0 0 var(--space-5);
}

.hero__brand .brand__logo {
  display:none;
}

.hero__brand .brand {
  color:#fff;
  text-shadow:0 1px 2px rgba(24,16,56,.3),0 4px 18px rgba(24,16,56,.35);
  transition:color .2s ease;
}

.hero__brand .brand:hover {
  color:var(--color-brand);
}

.hero__brand .brand:focus-visible {
  outline:2px solid #fff;
  outline-offset:4px;
}

.hero__lede {
  max-width:44rem;
  margin:var(--space-5) auto 0;
  color:#fff;
  font-size:var(--font-size-md);
  line-height:1.5;
  text-align:center;
  text-shadow:0 1px 2px rgba(24,16,56,.35),0 4px 18px rgba(24,16,56,.4);
}

body.is-searching .hero__lede {
  display:none;
}

@media(width <= 640px) {
  .hero__lede {
    font-size:var(--font-size-sm);
  }

}

.hero--tentacles .container {
  position:relative;
  z-index:2;
  padding-top:max(124px,16.5vw - 74px);
}

@media(width <= 640px) {
  .hero--tentacles .container {
    padding-top:104px;
  }

}

.hero__tentacles {
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:1;
  height:max(33.4vw,400px);
  pointer-events:none;
}

.hero__tentacles picture,.hero__tentacles img {
  position:absolute;
  display:block;
  width:100%;
  height:100%;
  inset:0;
}

.hero__tentacles .hero__skull-link {
  position:absolute;
  top:max(.17vw,2px);
  left:50%;
  width:max(13.05vw,157px);
  height:max(12.75vw,153px);
  pointer-events:auto;
  cursor:pointer;
  transform:translateX(-50%);
}

.hero__tentacles .hero__skull {
  display:block;
  width:100%;
  height:100%;
  fill:var(--color-brand);
}

@media(width <= 640px) {
  .hero__tentacles {
    height:240px;
  }

  .hero__tentacles picture {
    display:none;
  }

  .hero__tentacles .hero__skull-link {
    top:28px;
    width:79px;
    height:77px;
    filter:drop-shadow(0 4px 18px rgba(24, 16, 56, 0.35));
  }

}

body.is-searching .hero__tentacles,body.is-searching .hero--tentacles::before,body.is-searching .hero--tentacles::after {
  display:none;
}

body.is-searching .hero--tentacles .container {
  padding-top:0;
}

body.is-searching .hero__brand .brand__logo {
  display:block;
}

.hero .container {
  pointer-events:none;
}

.hero .container>* {
  pointer-events:auto;
}

@media(width <= 768px) {
  body.is-searching .hero--tentacles {
    padding-top:var(--space-3);
  }

  body.is-searching .hero__brand {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-height:44px;
    padding-right:60px;
    margin-bottom:var(--space-4);
  }

}

.search-status-message {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:800px;
  padding:var(--space-3) var(--space-4);
  margin:var(--space-4) auto;
  border:1px solid rgba(0,0,0,0);
  border-radius:var(--radius-md);
  font-size:var(--font-size-md);
  font-weight:500;
  text-align:center;
  gap:var(--space-3);
}

.search-status-message.error {
  border-color:var(--color-error);
  background:var(--color-error-light);
  color:var(--color-error);
}

.search-status-message__retry {
  padding:var(--space-1) var(--space-3);
  border:1px solid var(--color-error);
  border-radius:var(--radius-sm);
  background:rgba(0,0,0,0);
  color:var(--color-error);
  font-weight:600;
  cursor:pointer;
  transition:opacity var(--transition-fast),transform var(--transition-fast);
}

.search-status-message__retry:hover {
  opacity:.75;
}

.search-status-message__retry:focus-visible {
  outline:2px solid var(--color-error);
  outline-offset:2px;
}

.search-status-message__retry:active {
  transform:translateY(1px);
}

.search-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:480px;
  padding:var(--space-8) var(--space-4);
  margin:0 auto;
  color:var(--color-text-muted);
  text-align:center;
}

.search-empty__icon {
  margin-bottom:var(--space-4);
  opacity:.6;
}

.search-empty__title {
  margin:0 0 var(--space-2);
  color:var(--color-text);
  font-size:var(--font-size-xl);
}

.search-empty__text {
  margin:0 0 var(--space-4);
}

.search-empty__hint-label {
  margin:0 0 var(--space-2);
  font-size:var(--font-size-sm);
}

.search-empty__hints {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-2);
}

.search-empty__hint {
  padding:var(--space-1) var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-chip-bg);
  color:var(--color-text);
  font-size:var(--font-size-sm);
  cursor:pointer;
  transition:transform var(--transition-fast),opacity var(--transition-fast);
}

.search-empty__hint:hover {
  transform:translateY(-1px);
}

.search-empty__hint:focus-visible {
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

.search-empty__hint:active {
  transform:translateY(0);
}

.search-form--loading .search-form__button {
  pointer-events:none;
  opacity:.6;
}

.is-searching .search-results__container {
  min-height:calc(100vh - 240px);
}

.search-form {
  max-width:900px;
  padding:0 var(--space-4);
  margin:0 auto;
}

.search-form__form {
  position:relative;
}

.search-form__wrapper {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}

.search-form__input-section {
  position:relative;
  display:flex;
  align-items:center;
  border:2px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-card-bg);
  transition:border-color .2s ease,box-shadow .2s ease;
}

.search-form__input-section:focus-within {
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(102,126,234,.1);
}

.search-form__icon {
  position:absolute;
  left:var(--space-3);
  z-index:2;
  width:20px;
  height:20px;
  color:var(--color-text-muted);
  pointer-events:none;
}

.search-form__input {
  flex:1;
  min-width:0;
  padding:var(--space-3) var(--space-2) var(--space-3) var(--space-9);
  border:none;
  border-radius:var(--radius-lg);
  background:rgba(0,0,0,0);
  color:var(--color-text);
  font-size:var(--font-size-lg);
}

.search-form__input:focus {
  outline:none;
}

.search-form__input::placeholder {
  color:var(--color-text-muted);
}

.search-form__suggest-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  margin:var(--space-1) 2px var(--space-1) 0;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-chip-bg);
  color:#f59e0b;
  cursor:pointer;
  transition:all .2s ease;
  flex-shrink:0;
}

.search-form__suggest-toggle:hover {
  background:var(--color-hover);
  border-color:#f59e0b;
  transform:scale(1.06);
}

.search-form__suggest-toggle.is-off {
  color:var(--color-text-muted);
  border-color:transparent;
  background:transparent;
  opacity:.45;
  transform:none;
}

.search-form__suggest-toggle.is-off:hover {
  opacity:.9;
  background:var(--color-hover);
  border-color:var(--color-border);
}

.search-form__suggest-toggle svg {
  width:19px;
  height:19px;
  transition:transform .2s ease;
}

.search-form__suggest-toggle:active svg {
  transform:scale(0.9);
}

.search-form__button {
  flex-shrink:0;
  width:44px;
  height:44px;
  padding:0;
  margin:var(--space-1);
  border:none;
  border-radius:var(--radius-md);
  background:var(--color-accent);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:background-color .2s ease;
}

.search-form__button:hover {
  background:#d45500;
}

.search-form__button:focus {
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.search-form__filters {
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:auto;
  gap:var(--space-2);
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}

.search-form__filters::-webkit-scrollbar {
  display:none;
}

@media(width <= 560px) {
  .search-form__filters {
    justify-content:flex-start;
    padding:0 var(--space-5);
    mask-image:linear-gradient(to right, transparent, #000 var(--space-5), #000 calc(100% - var(--space-5)), transparent);
    scroll-padding-inline:var(--space-5);
  }

}

.search-form__filter-type,.search-form__filter-sort {
  display:contents;
}

.search-form__filters-divider {
  flex-shrink:0;
  width:4px;
  height:4px;
  margin:0 var(--space-1);
  border-radius:var(--radius-full);
  background:rgba(255,255,255,.45);
}

.search-form__filter-button {
  display:flex;
  flex-shrink:0;
  align-items:center;
  min-height:44px;
  padding:var(--space-2) var(--space-4);
  border:2px solid rgba(255,255,255,.7);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:var(--font-size-sm);
  font-weight:500;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
  gap:var(--space-2);
  scroll-snap-align:start;
  white-space:nowrap;
}

@media(hover: hover) {
  .search-form__filter-button:hover:not(.search-form__filter-button--active) {
    border-color:rgba(255,255,255,.9);
    background:rgba(255,255,255,.24);
  }

}

.search-form__filter-button:focus-visible {
  outline:2px solid #fff;
  outline-offset:2px;
}

.search-form__filter-button--active {
  border-color:#fff;
  background:#fff;
  color:#4f46ba;
}

.search-form__filter-button--sort.search-form__filter-button--active {
  border-color:#fff;
  background:rgba(255,255,255,.34);
  color:#fff;
  font-weight:700;
}

.search-form__filter-button[data-badge]:not([data-badge=""])::after {
  content:attr(data-badge);
  padding:0 var(--space-2);
  margin-left:var(--space-1);
  border-radius:var(--radius-full);
  background:rgba(79,70,186,.15);
  font-size:var(--font-size-xs);
  font-weight:700;
  line-height:1.4;
}

.search-form__filter-icon {
  font-size:1.2em;
}

.search-form__filter-label {
  font-weight:600;
}

/* --- DomainDB Search Modes, Filters & Advanced Drawer --- */
.search-form__controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  margin-top: calc(-1 * var(--space-1));
  width: 100%;
}

.mode-toggles {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 3px;
}

.theme-light .mode-toggles {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
}

.mode-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.mode-btn:hover {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.1);
}

.theme-light .mode-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.mode-btn.active {
  background: #38bdf8;
  color: #04101e;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.35);
}

.filters {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: #cbd5e1;
  font-weight: 600;
}

.theme-light .filter-item {
  color: #475569;
}

.filter-item select,
.adv-select {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-light .filter-item select,
.theme-light .adv-select {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.18);
  color: #0f172a;
}

.filter-item select:focus,
.adv-select:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

.advanced-toggle-wrapper {
  display: flex;
  align-items: center;
}

.advanced-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  padding: 6px 12px;
  border-radius: 6px;
}

.theme-light .advanced-toggle-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: #334155;
}

.advanced-toggle-btn:hover {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.12);
}

.advanced-chevron {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
  display: inline-block;
}

.advanced-chevron.open {
  transform: rotate(180deg);
}

.advanced-drawer {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  animation: advSlideDown 0.25s ease-out;
}

.theme-light .advanced-drawer {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

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

.advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.advanced-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.advanced-col-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.theme-light .advanced-col-title {
  color: #64748b;
}

.advanced-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.adv-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-xs);
  color: #cbd5e1;
  cursor: pointer;
  user-select: none;
}

.theme-light .adv-check-label {
  color: #334155;
}

.adv-check-label input[type="checkbox"] {
  accent-color: #38bdf8;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.length-inputs-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.len-field {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 3px 6px;
}

.theme-light .len-field {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.len-field label {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 600;
}

.len-field input {
  background: transparent;
  border: none;
  color: var(--color-text);
  width: 44px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-align: center;
  outline: none;
}

.len-sep {
  color: #64748b;
  font-size: 0.8rem;
}

.adv-text-input {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--color-text);
  padding: 6px 10px;
  font-size: var(--font-size-xs);
  outline: none;
  transition: border-color 0.15s ease;
}

.theme-light .adv-text-input {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

.adv-text-input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

@media (max-width: 640px) {
  .search-form__controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .mode-toggles {
    justify-content: center;
    overflow-x: auto;
  }
  .filters {
    justify-content: space-between;
  }
  .advanced-toggle-wrapper {
    justify-content: center;
  }
}


.theme-dark .autocomplete-suggestions {
  border-color:var(--color-border);
  background:var(--color-bg-secondary);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}

.theme-dark .autocomplete-suggestion {
  color:var(--color-text);
  transition:background-color .2s ease;
}

.theme-dark .autocomplete-suggestion:hover {
  background-color:var(--color-hover);
}

.theme-dark .autocomplete-suggestion.selected {
  background-color:var(--color-primary);
  color:#fff;
}

.icon {
  display:inline-block;
  vertical-align:-0.125em;
  flex-shrink:0;
  width:1em;
  height:1em;
  fill:none;
  stroke:currentcolor;
}

.icon--lg {
  width:1.5em;
  height:1.5em;
}

.layout--hidden,.share__modal--hidden,.scroll-top--hidden,.home-widgets--hidden {
  display:none;
}

.skip-link {
  position:absolute;
  left:-9999px;
}

.autocomplete-suggestions {
  text-align:left;
  cursor:default;
  z-index:9999;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #ccc;
  border-top:0;
  max-height:254px;
  display:none;
  position:absolute;
  overflow:hidden auto;
  box-shadow:-1px 1px 3px #0000001a;
  border-radius:0 0 6px 6px;
}

.autocomplete-suggestion {
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#333;
  padding:0 .8em;
  font-size:1.02em;
  line-height:28px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}

.autocomplete-suggestion b {
  color:#1f8dd6;
  font-weight:600;
}

.autocomplete-suggestion.selected {
  background:#f0f0f0;
}

.autocomplete-suggestion.selected b {
  color:inherit;
}

pre code.hljs {
  padding:1em;
  display:block;
  overflow-x:auto;
}

code.hljs {
  padding:3px 5px;
}

.hljs {
  color:#abb2bf;
  background:#282c34;
}

.hljs-comment,.hljs-quote {
  color:#5c6370;
  font-style:italic;
}

.hljs-doctag,.hljs-formula,.hljs-keyword {
  color:#c678dd;
}

.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst {
  color:#e06c75;
}

.hljs-literal {
  color:#56b6c2;
}

.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string {
  color:#98c379;
}

.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable {
  color:#d19a66;
}

.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title {
  color:#61aeee;
}

.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_ {
  color:#e6c07b;
}

.hljs-emphasis {
  font-style:italic;
}

.hljs-strong {
  font-weight:700;
}

.hljs-link {
  text-decoration:underline;
}

:root {
  --color-bg:#fff;
  --color-bg-secondary:#f8f9fa;
  --color-text:#212529;
  --color-text-muted:#6c757d;
  --color-text-muted-on-fill:#5a6169;
  --color-border:#dee2e6;
  --color-border-light:#e9ecef;
  --color-card-bg:#fff;
  --color-hover:#0000000d;
  --color-primary:#5b54d6;
  --color-secondary:#764ba2;
  --color-accent:#d95204;
  --color-hero-start:#667eea;
  --color-hero-end:#764ba2;
  --color-brand:#ff4d00;
  --color-success:#28a745;
  --color-warning:#ffc107;
  --color-error:#dc3545;
  --color-info:#17a2b8;
  --color-success-light:#28a7451a;
  --color-warning-light:#ffc1071a;
  --color-error-light:#dc35451a;
  --color-info-light:#17a2b81a;
  --color-chip-bg:#f8f9fa;
  --color-chip-text:#495057;
  --color-chip-border:#e9ecef;
  --color-divider:#f1f3f5;
  --severity-critical-bg:#dc35451f;
  --severity-critical-fg:#b02a37;
  --severity-high-bg:#e8590c1f;
  --severity-high-fg:#a03f07;
  --severity-medium-bg:#b58a001f;
  --severity-medium-fg:#7a6000;
  --severity-low-bg:var(--color-divider);
  --severity-low-fg:#5f676e;
}

.theme-dark {
  --color-bg:#101114;
  --color-bg-secondary:#17181c;
  --color-text:#e2e8f0;
  --color-text-muted:#9ca3af;
  --color-text-muted-on-fill:#9ca3af;
  --color-border:#ffffff1a;
  --color-border-light:#ffffff0f;
  --color-card-bg:#17181c;
  --color-hover:#ffffff0d;
  --color-primary:#8b85f0;
  --color-secondary:#764ba2;
  --color-accent:#e8590c;
  --color-hero-start:#4a44a8;
  --color-hero-end:#563a78;
  --color-success:#28a745;
  --color-warning:#ffc107;
  --color-error:#dc3545;
  --color-info:#17a2b8;
  --color-success-light:#28a74526;
  --color-warning-light:#ffc10726;
  --color-error-light:#dc354526;
  --color-info-light:#17a2b826;
  --color-chip-bg:#1d1f24;
  --color-chip-text:#e2e8f0;
  --color-chip-border:#ffffff1a;
  --color-divider:#ffffff0f;
  --severity-critical-fg:#f27884;
  --severity-high-fg:#ff9d5c;
  --severity-medium-fg:#e9c46a;
  --severity-low-bg:#94a3b824;
  --severity-low-fg:#b6c2d1;
}

:root {
  --font-family-sans:-apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
  --font-family-mono:"JetBrains Mono", "Fira Code", "SF Mono", "Segoe UI Mono", "Roboto Mono", menlo, courier, monospace;
  --font-family-serif:georgia, "Times New Roman", serif;
  --font-size-xs:.75rem;
  --font-size-sm:.875rem;
  --font-size-md:1rem;
  --font-size-lg:1.125rem;
  --font-size-xl:1.25rem;
  --font-size-2xl:1.5rem;
  --font-size-3xl:2rem;
  --font-weight-light:300;
  --font-weight-normal:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --line-height-tight:1.25;
  --line-height-normal:1.5;
  --line-height-relaxed:1.625;
  --letter-spacing-tight:-.025em;
  --letter-spacing-normal:0;
  --letter-spacing-wide:.025em;
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:2rem;
  --space-8:2.5rem;
  --space-9:3rem;
  --space-10:4rem;
  --radius-none:0;
  --radius-sm:.5rem;
  --radius-md:.75rem;
  --radius-lg:.75rem;
  --radius-xl:.75rem;
  --radius-2xl:1rem;
  --radius-full:9999px;
  --shadow-none:0 0 #0000;
  --shadow-sm:0 1px 2px 0 #0000000d;
  --shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
  --shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;
  --shadow-xl:0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
  --shadow-2xl:0 25px 50px -12px #00000040;
  --shadow-inner:inset 0 2px 4px 0 #0000000f;
  --duration-fast:.15s;
  --duration-normal:.25s;
  --duration-slow:.35s;
  --ease-standard:cubic-bezier(.4, 0, .2, 1);
  --transition-fast:var(--duration-fast) ease-in-out;
  --transition-normal:var(--duration-normal) ease-in-out;
  --transition-slow:var(--duration-slow) ease-in-out;
  --z-index-dropdown:1000;
  --z-index-sticky:1020;
  --z-index-fixed:1030;
  --z-index-modal-backdrop:1040;
  --z-index-modal:1050;
  --z-index-popover:1060;
  --z-index-tooltip:1070;
}

*,:before,:after {
  box-sizing:border-box;
}

body,h1,h2,h3,p {
  margin:0;
  padding:0;
}

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

}

.code {
  font-family:var(--font-family-mono);
  cursor:text;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-ligatures:common-ligatures;
}

.label {
  cursor:pointer;
}

.sr-only {
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  position:absolute;
  overflow:hidden;
}

body {
  background-color:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-family-sans);
  font-size:var(--font-size-md);
  line-height:var(--line-height-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3 {
  color:var(--color-text);
  font-weight:var(--font-weight-bold);
  line-height:var(--line-height-tight);
  letter-spacing:-.02em;
}

h1 {
  font-size:var(--font-size-3xl);
}

h2 {
  font-size:var(--font-size-2xl);
}

h3 {
  font-size:var(--font-size-xl);
}

a {
  color:var(--color-primary);
  transition:text-decoration var(--transition-fast);
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

body.is-theme-switching {
  transition:background-color var(--transition-slow),color var(--transition-slow);
}

.container {
  width:100%;
  max-width:1200px;
  padding:0 var(--space-4);
  margin:0 auto;
}

@media (width<=768px) {
  .container {
    padding:0 var(--space-3);
  }

}

.layout {
  width:100%;
}

.layout--hidden {
  display:none;
}

.search-results__container {
  width:100%;
  max-width:900px;
  padding:0 var(--space-4);
  margin:0 auto var(--space-8);
  flex-direction:column;
  align-items:stretch;
  display:flex;
}

.content {
  width:100%;
}

.hero {
  padding:var(--space-9) 0;
  margin-bottom:var(--space-6);
  background:linear-gradient(135deg, var(--color-hero-start) 0%, var(--color-hero-end) 100%);
  color:#fff;
  text-align:center;
}

body.is-searching .hero {
  padding:var(--space-5) 0;
  margin-bottom:var(--space-4);
}

.home-widgets--hidden {
  display:none;
}

.cards.cards--stacked {
  grid-template-columns:1fr;
}

.cards {
  margin:var(--space-6) 0;
  align-items:start;
  gap:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  display:grid;
}

@media (width>=768px) {
  .cards {
    grid-template-columns:repeat(2,1fr);
  }

  .cards>:nth-child(3):last-child {
    grid-column:1/-1;
  }

  .cards>:nth-child(3):last-child .card__body {
    column-gap:var(--space-6);
    columns:2;
  }

  .cards>:nth-child(3):last-child .card__body>* {
    break-inside:avoid;
  }

}

@media (width>=1200px) {
  .cards {
    grid-template-columns:repeat(2,1fr);
  }

  .cards>:nth-child(3):last-child {
    grid-column:auto;
  }

  .cards>:nth-child(3):last-child .card__body {
    columns:auto;
  }

}

.header {
  padding:var(--space-3) 0;
  border-bottom:1px solid var(--color-border);
  background:var(--color-card-bg);
  align-items:center;
  display:flex;
}

.header__section {
  flex:1;
  justify-content:center;
  align-items:center;
  display:flex;
}

.header__section:first-child {
  justify-content:flex-start;
}

.header__section--right {
  justify-content:flex-end;
}

.brand {
  color:var(--color-text);
  align-items:center;
  gap:var(--space-3);
  text-decoration:none;
  transition:color .2s;
  display:inline-flex;
}

.brand:hover {
  color:var(--color-brand);
  text-decoration:none;
}

.brand__logo {
  background-image:url(static/images/ui/brand.png);
  background-position:50%;
  background-repeat:no-repeat;
  background-size:contain;
  flex-shrink:0;
  width:2.5rem;
  height:2.5rem;
}

.brand__title {
  font-size:var(--font-size-3xl);
  font-weight:800;
  line-height:var(--line-height-tight);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0;
}

.header__search {
  width:100%;
  max-width:320px;
  padding:0 var(--space-3);
  margin-left:var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-bg);
  align-items:center;
  gap:var(--space-2);
  transition:border-color .2s;
  display:flex;
}

.header__search:focus-within {
  border-color:var(--color-primary);
}

.header__search-icon {
  width:16px;
  height:16px;
  color:var(--color-text-muted);
  flex-shrink:0;
}

.header__search-input {
  width:100%;
  min-height:44px;
  padding:var(--space-2) 0;
  color:var(--color-text);
  font-family:inherit;
  font-size:var(--font-size-sm);
  background:0 0;
  border:none;
}

.header__search-input::placeholder {
  color:var(--color-text-muted);
}

.header__search-input:focus {
  outline:none;
}

@media (width<=768px) {
  .header {
    flex-wrap:wrap;
  }

  .header__section:first-child {
    flex-basis:100%;
    order:3;
  }

  .header__section:nth-child(2) {
    padding-left:var(--space-4);
    justify-content:flex-start;
  }

  .header__search {
    max-width:none;
    margin:var(--space-3) var(--space-4) 0;
  }

}

.theme-toggle {
  padding-right:var(--space-4);
  justify-content:flex-end;
  display:flex;
}

.theme-toggle__button {
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  width:44px;
  height:44px;
  color:var(--color-text-muted);
  cursor:pointer;
  background:0 0;
  justify-content:center;
  align-items:center;
  padding:0;
  transition:color .2s,border-color .2s,background-color .2s;
  display:flex;
}

.theme-toggle__button:hover {
  border-color:var(--color-border);
  background:var(--color-bg-secondary);
  color:var(--color-text);
}

.theme-toggle__button:focus-visible {
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.theme-toggle__icon {
  width:1.5rem;
  height:1.5rem;
}

.theme-toggle__icon.theme-toggle__icon--sun,body.theme-dark .theme-toggle__icon.theme-toggle__icon--moon {
  display:none;
}

body.theme-dark .theme-toggle__icon.theme-toggle__icon--sun {
  display:block;
}

.hero--tentacles {
  position:relative;
  overflow:hidden;
}

.hero--tentacles:after {
  content:"";
  z-index:1;
  pointer-events:none;
  background:radial-gradient(85% 75% at 50% 45%,#0000 52%,#0000002e 100%);
  position:absolute;
  inset:0;
}

.hero--tentacles:before {
  content:"";
  z-index:1;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:overlay;
  background-image:url(static/images/ui/grain.svg);
  background-size:220px 220px;
  position:absolute;
  inset:0;
}

.theme-toggle--floating {
  top:var(--space-3);
  right:var(--space-4);
  z-index:10;
  padding-right:0;
  position:absolute;
}

.theme-toggle--floating .theme-toggle__button {
  color:#fff;
  background:#ffffff1f;
  border:2px solid #ffffffb3;
}

.theme-toggle--floating .theme-toggle__button:hover {
  color:#fff;
  background:#ffffff3d;
  border-color:#fff;
}

.hero__brand {
  margin:0 0 var(--space-5);
}

.hero__brand .brand__logo {
  display:none;
}

.hero__brand .brand {
  color:#fff;
  text-shadow:0 1px 2px #1810384d,0 4px 18px #18103859;
  transition:color .2s;
}

.hero__brand .brand:hover {
  color:var(--color-brand);
}

.hero__brand .brand:focus-visible {
  outline-offset:4px;
  outline:2px solid #fff;
}

.hero__lede {
  max-width:44rem;
  margin:var(--space-5) auto 0;
  color:#fff;
  font-size:var(--font-size-md);
  text-align:center;
  text-shadow:0 1px 2px #18103859,0 4px 18px #18103866;
  line-height:1.5;
}

body.is-searching .hero__lede {
  display:none;
}

@media (width<=640px) {
  .hero__lede {
    font-size:var(--font-size-sm);
  }

}

.hero--tentacles .container {
  z-index:2;
  padding-top:max(124px,16.5vw - 74px);
  position:relative;
}

@media (width<=640px) {
  .hero--tentacles .container {
    padding-top:104px;
  }

}

.hero__tentacles {
  z-index:1;
  pointer-events:none;
  height:max(33.4vw,400px);
  position:absolute;
  top:0;
  left:0;
  right:0;
}

.hero__tentacles picture,.hero__tentacles img {
  width:100%;
  height:100%;
  display:block;
  position:absolute;
  inset:0;
}

.hero__tentacles .hero__skull-link {
  pointer-events:auto;
  cursor:pointer;
  width:max(13.05vw,157px);
  height:max(12.75vw,153px);
  position:absolute;
  top:max(.17vw,2px);
  left:50%;
  transform:translate(-50%);
}

.hero__tentacles .hero__skull {
  width:100%;
  height:100%;
  fill:var(--color-brand);
  display:block;
}

@media (width<=640px) {
  .hero__tentacles {
    height:240px;
  }

  .hero__tentacles picture {
    display:none;
  }

  .hero__tentacles .hero__skull-link {
    filter:drop-shadow(0 4px 18px #18103859);
    width:79px;
    height:77px;
    top:28px;
  }

}

body.is-searching .hero__tentacles,body.is-searching .hero--tentacles:before,body.is-searching .hero--tentacles:after {
  display:none;
}

body.is-searching .hero--tentacles .container {
  padding-top:0;
}

body.is-searching .hero__brand .brand__logo {
  display:block;
}

.hero .container {
  pointer-events:none;
}

.hero .container>* {
  pointer-events:auto;
}

@media (width<=768px) {
  body.is-searching .hero--tentacles {
    padding-top:var(--space-3);
  }

  body.is-searching .hero__brand {
    min-height:44px;
    margin-bottom:var(--space-4);
    justify-content:flex-start;
    align-items:center;
    padding-right:60px;
    display:flex;
  }

}

.breadcrumb {
  padding:var(--space-2) 0;
  margin-bottom:var(--space-3);
  align-items:center;
  gap:var(--space-2);
  list-style:none;
  display:flex;
}

.breadcrumb__item {
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
}

.breadcrumb__item--current {
  flex:1;
  min-width:0;
}

.breadcrumb__item:not(:last-child):after {
  content:">";
  margin-left:var(--space-2);
  color:var(--color-text-muted);
  font-weight:500;
}

.breadcrumb__link {
  max-width:100%;
  color:var(--color-primary);
  text-overflow:ellipsis;
  white-space:nowrap;
  text-decoration:none;
  display:inline-block;
  overflow:hidden;
}

.breadcrumb__link:hover {
  text-decoration:underline;
}

.breadcrumb__current {
  max-width:100%;
  color:var(--color-text-muted);
  text-overflow:ellipsis;
  white-space:nowrap;
  display:inline-block;
  overflow:hidden;
}

.exploit__actions {
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  display:flex;
}

.exploit__actions .btn {
  padding:var(--space-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-bg-secondary);
  color:var(--color-text);
  cursor:pointer;
  justify-content:center;
  align-items:center;
  display:flex;
}

.exploit__actions .btn:hover {
  border-color:var(--color-text-muted);
  background:var(--color-hover);
  color:var(--color-text);
}

.exploit__actions .btn svg {
  width:16px;
  height:16px;
}

.exploit__actions-text {
  font-size:var(--font-size-xs);
}

.exploit__actions-text.active {
  border-color:var(--color-accent);
  background:var(--color-accent);
  color:#fff;
}

.exploit__actions-primary span {
  font-size:var(--font-size-sm);
}

.exploit__actions-sep {
  width:1px;
  margin:0 var(--space-1);
  background:var(--color-border);
  align-self:stretch;
}

.exploit {
  align-items:start;
  gap:var(--space-6);
  grid-template-columns:350px 1fr;
  width:100%;
  min-height:100vh;
  display:grid;
}

.cvss-details {
  gap:var(--space-3);
  flex-direction:column;
  display:flex;
}

.cvss-vector {
  padding:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-card-bg);
  gap:var(--space-2);
  flex-direction:column;
  display:flex;
}

.cvss-vector strong {
  color:var(--color-text);
  font-size:var(--font-size-sm);
  font-weight:600;
}

.cvss-components {
  gap:var(--space-2);
  gap:var(--space-5);
  grid-template-columns:1fr;
  display:grid;
}

@media (width>=768px) {
  .cvss-components {
    grid-template-columns:repeat(2,1fr);
  }

}

.exploit__cvss-display {
  padding:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-card-bg);
  gap:var(--space-2);
  flex-direction:column;
  display:flex;
}

.exploit__cvss-display--high {
  border-color:var(--color-error);
  background:var(--severity-critical-bg);
}

.exploit__cvss-display--high .exploit__cvss-label {
  color:var(--severity-critical-fg);
}

.exploit__cvss-display--medium {
  border-color:var(--color-warning);
  background:var(--severity-medium-bg);
}

.exploit__cvss-display--medium .exploit__cvss-label {
  color:var(--severity-medium-fg);
}

.exploit__cvss-display--low {
  border-color:var(--color-success);
  background:var(--severity-low-bg);
}

.exploit__cvss-display--low .exploit__cvss-label {
  color:var(--severity-low-fg);
}

.exploit__cvss-display--none {
  border-color:var(--color-border);
  background:var(--color-chip-bg);
}

.exploit__cvss-number {
  color:var(--color-text);
  font-size:2rem;
  font-weight:700;
  line-height:1;
}

.exploit__cvss-label {
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:600;
}

.exploit__cvss-version {
  margin-top:var(--space-1);
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
}

.exploit__cvss-details {
  margin-top:var(--space-3);
}

.exploit__cvss-vector {
  margin-bottom:var(--space-3);
  align-items:flex-start;
  gap:var(--space-1);
  flex-direction:column;
  display:flex;
}

.exploit__vector-label {
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  font-weight:600;
}

.exploit__vector-text {
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-bg);
  font-family:var(--font-family-mono);
  font-size:var(--font-size-sm);
  word-break:break-all;
}

.exploit__component:last-child,.exploit__cve-item:last-child,.exploit__detail-item:last-child,.exploit__reference-item:last-child {
  border-bottom:0;
  padding-bottom:0;
}

.exploit__cvss-components {
  display:grid;
}

.exploit__component {
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--color-divider);
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-2);
  display:flex;
}

.exploit__component-label {
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  flex-shrink:0;
  font-weight:600;
}

.exploit__component-value {
  color:var(--color-text);
  font-size:var(--font-size-sm);
  overflow-wrap:break-word;
  font-weight:600;
}

.exploit__epss-head {
  margin-bottom:var(--space-2);
  align-items:baseline;
  gap:var(--space-2);
  flex-wrap:wrap;
  display:flex;
}

.exploit__epss-value {
  color:var(--color-text);
  font-size:1.5rem;
  font-weight:700;
  line-height:1;
}

.exploit__epss-of {
  min-width:0;
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
}

.exploit__epss-bar {
  border-radius:var(--radius-full);
  background:linear-gradient(to right, var(--color-success), var(--color-warning), var(--color-error));
  height:6px;
  position:relative;
  overflow:hidden;
}

.exploit__epss-rest {
  width:var(--rest,100%);
  background:var(--color-chip-bg);
  position:absolute;
  top:0;
  bottom:0;
  right:0;
}

.exploit__epss-marker {
  top:0;
  left:var(--at,0%);
  background:var(--color-text);
  width:2px;
  height:100%;
  position:absolute;
  transform:translate(-1px);
}

.exploit__epss-meta {
  margin:var(--space-3) 0 0;
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
}

.exploit__description-text {
  color:var(--color-text);
  font-size:var(--font-size-sm);
  line-height:1.6;
}

.exploit__tags-list {
  gap:var(--space-2);
  flex-wrap:wrap;
  display:flex;
}

.exploit__tag {
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--color-chip-border);
  border-radius:var(--radius-sm);
  background:var(--color-chip-bg);
  color:var(--color-chip-text);
  font-size:var(--font-size-xs);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:600;
  display:inline-block;
}

.exploit__cve-list {
  flex-direction:column;
  display:flex;
}

.exploit__cve-item {
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--color-divider);
}

.exploit__cve-link {
  color:var(--color-primary);
  text-underline-offset:2px;
  font-weight:600;
  text-decoration:underline;
}

.exploit__cve-link:hover {
  text-decoration:underline;
}

.exploit__detail-list {
  flex-direction:column;
  display:flex;
}

.exploit__detail-item {
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--color-divider);
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-2);
  display:flex;
}

.exploit__detail-label {
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  flex-shrink:0;
  font-weight:600;
}

.exploit__detail-value {
  color:var(--color-text);
  font-size:var(--font-size-sm);
  overflow-wrap:break-word;
  font-weight:600;
}

.exploit__product-links {
  gap:var(--space-1) var(--space-2);
  flex-wrap:wrap;
  display:flex;
}

.exploit__product-link {
  padding:2px var(--space-2);
  background:var(--color-divider);
  color:var(--color-text);
  font-size:var(--font-size-sm);
  overflow-wrap:anywhere;
  border-radius:4px;
}

.exploit__product-link:hover,.exploit__product-link:focus-visible {
  background:var(--color-accent);
  color:var(--color-bg);
}

.exploit__detail-item--stacked {
  flex-direction:column;
  align-items:stretch;
  gap:2px;
}

.exploit__detail-item--stacked .exploit__detail-label {
  overflow-wrap:anywhere;
  min-width:0;
}

.exploit__references-list {
  flex-direction:column;
  display:flex;
}

.exploit__reference-item {
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--color-divider);
}

.exploit__reference-link {
  color:var(--color-primary);
  font-size:var(--font-size-sm);
  word-break:break-all;
  text-underline-offset:2px;
  text-decoration:underline;
}

.exploit__reference-link:hover {
  text-decoration:underline;
}

.exploit__code-header {
  z-index:2;
  padding-top:var(--space-3);
  padding-bottom:var(--space-3);
  margin-bottom:var(--space-3);
  border-bottom:1px solid var(--color-border);
  background:var(--color-bg);
  justify-content:space-between;
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
  display:flex;
  position:sticky;
  top:0;
}

.exploit__code-header-left {
  align-items:center;
  gap:var(--space-3);
  flex:0 auto;
  min-width:0;
  display:flex;
}

.exploit__code-header-left h2 {
  color:var(--color-text);
  font-size:var(--font-size-lg);
  white-space:nowrap;
  margin:0;
  font-weight:600;
}

.exploit__code-meta {
  align-items:center;
  gap:var(--space-3);
  display:flex;
}

.exploit__language-badge {
  padding:var(--space-1) var(--space-2);
  border:1px solid var(--color-chip-border);
  border-radius:var(--radius-sm);
  background:var(--color-chip-bg);
  color:var(--color-chip-text);
  font-size:var(--font-size-xs);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:600;
  display:inline-block;
}

.exploit__code-size {
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  font-weight:500;
}

.exploit__code-container {
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:0 0;
  position:relative;
  overflow:hidden;
}

.exploit__code-block {
  font-family:var(--font-family-mono);
  font-size:var(--font-size-sm);
  background:0 0;
  border:none;
  margin:0;
  padding:0;
  line-height:1.5;
}

.exploit__code-block code::-webkit-scrollbar {
  height:8px;
}

.exploit__code-block code::-webkit-scrollbar-track {
  background:0 0;
}

.exploit__code-block code::-webkit-scrollbar-thumb {
  background:var(--color-border);
  border-radius:4px;
}

.exploit__code-block code::-webkit-scrollbar-thumb:hover {
  background:var(--color-text-muted);
}

.exploit__sidebar {
  gap:var(--space-4);
  flex-direction:column;
  min-width:0;
  display:flex;
}

.exploit__content {
  min-width:0;
}

.exploit__info-card {
  padding:var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-card-bg);
}

.exploit__info-card>.card__title {
  margin:0 0 var(--space-3);
  font-size:var(--font-size-md);
}

@media (width<=768px) {
  .exploit__actions .btn {
    min-width:44px;
    min-height:44px;
  }

  .exploit {
    gap:var(--space-4);
    grid-template-columns:1fr;
    min-height:0;
  }

  .exploit__sidebar {
    display:contents;
  }

  .exploit__info-card {
    order:3;
  }

  .exploit__info-card--primary {
    order:1;
  }

  .exploit__content {
    order:2;
  }

}

@media (width>=1200px) {
  .exploit__sidebar {
    top:var(--space-4);
    max-height:calc(100vh - var(--space-6));
    overscroll-behavior:contain;
    position:sticky;
    overflow-y:auto;
  }

}

.code-wrap {
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}

.code-font-small {
  font-size:var(--font-size-xs);
}

.code-font-medium {
  font-size:var(--font-size-sm);
}

.code-font-large {
  font-size:var(--font-size-md);
}

.domain-card, .vulnerability {
  min-height:64px;
  padding:var(--space-3) var(--space-2);
  border-bottom:1px solid var(--color-divider);
  border-radius:var(--radius-sm);
  color:inherit;
  align-items:flex-start;
  text-decoration:none;
  transition:background-color .2s;
  display:flex;
}

@media (hover:hover) {
  .domain-card:hover, .vulnerability:hover {
    background:var(--color-hover);
    color:inherit;
    text-decoration:none;
  }

}

.domain-card:last-child, .vulnerability:last-child {
  border-bottom:none;
}

.domain-card__content, .vulnerability__content {
  flex:1;
  min-width:0;
}

.domain-card__title, .vulnerability__title {
  margin-bottom:var(--space-1);
  color:var(--color-text);
  font-size:.9375rem;
  font-weight:var(--font-weight-medium);
  align-items:center;
  gap:var(--space-2);
  overflow-wrap:anywhere;
  flex-wrap:wrap;
  line-height:1.4;
  display:flex;
}

.domain-card__count, .vulnerability__count {
  padding:.1rem var(--space-2);
  border:1px solid var(--color-chip-border);
  border-radius:var(--radius-full);
  background:var(--color-chip-bg);
  color:var(--color-chip-text);
  font-size:var(--font-size-xs);
  white-space:nowrap;
  flex-shrink:0;
  font-weight:600;
}

.domain-card__count--trending, .vulnerability__count--trending {
  color:#fff;
  background:linear-gradient(135deg,#ff6b35,#f7931e);
  border:none;
}

.domain-card__meta, .vulnerability__meta {
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
  display:flex;
}

.domain-card__severity, .vulnerability__severity {
  padding:2px var(--space-2);
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-semibold);
  letter-spacing:.04em;
  white-space:nowrap;
  border-radius:4px;
}

.domain-card__severity--critical, .vulnerability__severity--critical {
  background:var(--severity-critical-bg);
  color:var(--severity-critical-fg);
}

.domain-card__severity--high, .vulnerability__severity--high {
  background:var(--severity-high-bg);
  color:var(--severity-high-fg);
}

.domain-card__severity--medium, .vulnerability__severity--medium {
  background:var(--severity-medium-bg);
  color:var(--severity-medium-fg);
}

.domain-card__severity--low, .domain-card__severity--none, .vulnerability__severity--low, .vulnerability__severity--none {
  background:var(--severity-low-bg);
  color:var(--severity-low-fg);
}

.domain-card__tag, .vulnerability__tag {
  padding:2px var(--space-2);
  background:var(--color-divider);
  color:var(--color-text-muted-on-fill);
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-semibold);
  letter-spacing:.04em;
  border-radius:4px;
}

.domain-card__meta-item, .vulnerability__meta-item {
  color:var(--color-text-muted);
  align-items:center;
  gap:var(--space-1);
  font-size:.8125rem;
  display:flex;
}

.domain-card__description, .vulnerability__description {
  margin-top:var(--space-1);
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.4;
  display:-webkit-box;
  overflow:hidden;
}

.domain-card__description--full, .vulnerability__description--full {
  -webkit-line-clamp:none;
  display:block;
  overflow:visible;
}

.page-head {
  padding-bottom:var(--space-4);
  margin-bottom:var(--space-5);
  border-bottom:1px solid var(--color-border);
  align-items:flex-start;
  gap:var(--space-4);
  display:flex;
}

.page-head__icon .avatar,.page-head__icon .icon {
  width:48px;
  height:48px;
  color:var(--color-text-muted);
  background-color:#0000;
  flex-shrink:0;
}

.page-head__body {
  min-width:0;
}

.page-head__title {
  font-size:var(--font-size-2xl);
  font-weight:700;
  line-height:var(--line-height-tight);
  overflow-wrap:anywhere;
  margin:0;
}

.page-head__cves {
  margin-top:var(--space-3);
  gap:var(--space-2);
  flex-wrap:wrap;
  display:flex;
}

.page-head__cve {
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-bg);
  min-height:44px;
  color:var(--color-text);
  font-family:var(--font-family-mono);
  font-size:var(--font-size-sm);
  letter-spacing:0;
  white-space:nowrap;
  align-items:center;
  padding:.15em .6em;
  font-weight:500;
  text-decoration:none;
  display:inline-flex;
}

.page-head__cve:hover {
  border-color:var(--color-primary);
  color:var(--color-primary);
  text-decoration:none;
}

.page-head__meta {
  margin:var(--space-2) 0 0;
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  text-transform:uppercase;
  letter-spacing:.04em;
}

@media (width<=768px) {
  .page-head__title {
    font-size:var(--font-size-xl);
  }

  .page-head__icon .avatar,.page-head__icon .icon {
    width:40px;
    height:40px;
  }

}

.search-status-message {
  width:100%;
  max-width:800px;
  padding:var(--space-3) var(--space-4);
  margin:var(--space-4) auto;
  border-radius:var(--radius-md);
  font-size:var(--font-size-md);
  text-align:center;
  justify-content:center;
  align-items:center;
  gap:var(--space-3);
  border:1px solid #0000;
  flex-wrap:wrap;
  font-weight:500;
  display:flex;
}

.search-status-message.error {
  border-color:var(--color-error);
  background:var(--color-error-light);
  color:var(--color-error);
}

.search-status-message__retry {
  padding:var(--space-1) var(--space-3);
  border:1px solid var(--color-error);
  border-radius:var(--radius-sm);
  color:var(--color-error);
  cursor:pointer;
  transition:opacity var(--transition-fast),transform var(--transition-fast);
  background:0 0;
  font-weight:600;
}

.search-status-message__retry:hover {
  opacity:.75;
}

.search-status-message__retry:focus-visible {
  outline:2px solid var(--color-error);
  outline-offset:2px;
}

.search-status-message__retry:active {
  transform:translateY(1px);
}

.search-empty {
  max-width:480px;
  padding:var(--space-8) var(--space-4);
  color:var(--color-text-muted);
  text-align:center;
  flex-direction:column;
  align-items:center;
  margin:0 auto;
  display:flex;
}

.search-empty__icon {
  margin-bottom:var(--space-4);
  opacity:.6;
}

.search-empty__title {
  margin:0 0 var(--space-2);
  color:var(--color-text);
  font-size:var(--font-size-xl);
}

.search-empty__text {
  margin:0 0 var(--space-4);
}

.search-empty__hint-label {
  margin:0 0 var(--space-2);
  font-size:var(--font-size-sm);
}

.search-empty__hints {
  justify-content:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  display:flex;
}

.search-empty__hint {
  padding:var(--space-1) var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-chip-bg);
  color:var(--color-text);
  font-size:var(--font-size-sm);
  cursor:pointer;
  transition:transform var(--transition-fast),opacity var(--transition-fast);
}

.search-empty__hint:hover {
  transform:translateY(-1px);
}

.search-empty__hint:focus-visible {
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

.search-empty__hint:active {
  transform:translateY(0);
}

.search-form--loading .search-form__button {
  pointer-events:none;
  opacity:.6;
}

.is-searching .search-results__container {
  min-height:calc(100vh - 240px);
}

.search-form {
  max-width:900px;
  padding:0 var(--space-4);
  margin:0 auto;
}

.search-form__form {
  position:relative;
}

.search-form__wrapper {
  gap:var(--space-4);
  flex-direction:column;
  display:flex;
  position:relative;
}

.search-form__input-section {
  border:2px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-card-bg);
  align-items:center;
  transition:border-color .2s,box-shadow .2s;
  display:flex;
  position:relative;
}

.search-form__input-section:focus-within {
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px #667eea1a;
}

.search-form__icon {
  left:var(--space-3);
  z-index:2;
  width:20px;
  height:20px;
  color:var(--color-text-muted);
  pointer-events:none;
  position:absolute;
}

.search-form__input {
  min-width:0;
  padding:var(--space-3) var(--space-2) var(--space-3) var(--space-9);
  border-radius:var(--radius-lg);
  color:var(--color-text);
  font-size:var(--font-size-lg);
  background:0 0;
  border:none;
  flex:1;
}

.search-form__input:focus {
  outline:none;
}

.search-form__input::placeholder {
  color:var(--color-text-muted);
}

.search-form__button {
  width:44px;
  height:44px;
  margin:var(--space-1);
  border-radius:var(--radius-md);
  background:var(--color-accent);
  color:#fff;
  cursor:pointer;
  border:none;
  flex-shrink:0;
  padding:0;
  font-weight:600;
  transition:background-color .2s;
}

.search-form__button:hover {
  background:#d45500;
}

.search-form__button:focus {
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.search-form__filters {
  justify-content:center;
  align-items:center;
  gap:var(--space-2);
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  display:flex;
  overflow-x:auto;
}

.search-form__filters::-webkit-scrollbar {
  display:none;
}

@media (width<=560px) {
  .search-form__filters {
    padding:0 var(--space-5);
    mask-image:linear-gradient(to right, transparent, #000 var(--space-5), #000 calc(100% - var(--space-5)), transparent);
    scroll-padding-inline:var(--space-5);
    justify-content:flex-start;
  }

}

.search-form__filter-type,.search-form__filter-sort {
  display:contents;
}

.search-form__filters-divider {
  width:4px;
  height:4px;
  margin:0 var(--space-1);
  border-radius:var(--radius-full);
  background:#ffffff73;
  flex-shrink:0;
}

.search-form__filter-button {
  min-height:44px;
  padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-md);
  color:#fff;
  font-size:var(--font-size-sm);
  cursor:pointer;
  align-items:center;
  gap:var(--space-2);
  scroll-snap-align:start;
  white-space:nowrap;
  background:#ffffff1f;
  border:2px solid #ffffffb3;
  flex-shrink:0;
  font-weight:500;
  transition:background-color .2s,border-color .2s,color .2s;
  display:flex;
}

@media (hover:hover) {
  .search-form__filter-button:hover:not(.search-form__filter-button--active) {
    background:#ffffff3d;
    border-color:#ffffffe6;
  }

}

.search-form__filter-button:focus-visible {
  outline-offset:2px;
  outline:2px solid #fff;
}

.search-form__filter-button--active {
  color:#4f46ba;
  background:#fff;
  border-color:#fff;
}

.search-form__filter-button--sort.search-form__filter-button--active {
  color:#fff;
  background:#ffffff57;
  border-color:#fff;
  font-weight:700;
}

.search-form__filter-button[data-badge]:not([data-badge=""]):after {
  content:attr(data-badge);
  padding:0 var(--space-2);
  margin-left:var(--space-1);
  border-radius:var(--radius-full);
  font-size:var(--font-size-xs);
  background:#4f46ba26;
  font-weight:700;
  line-height:1.4;
}

.search-form__filter-icon {
  font-size:1.2em;
}

.search-form__filter-label {
  font-weight:600;
}

.theme-dark .autocomplete-suggestions {
  border-color:var(--color-border);
  background:var(--color-bg-secondary);
  box-shadow:0 4px 12px #0000004d;
}

.theme-dark .autocomplete-suggestion {
  color:var(--color-text);
  transition:background-color .2s;
}

.theme-dark .autocomplete-suggestion:hover {
  background-color:var(--color-hover);
}

.theme-dark .autocomplete-suggestion.selected {
  background-color:var(--color-primary);
  color:#fff;
}

.card {
  min-width:0;
  padding:var(--space-5);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-card-bg);
  transition:transform var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard);
  box-shadow:var(--shadow-sm);
}

@media (hover:hover) {
  .card:hover {
    box-shadow:var(--shadow-lg);
    transform:translateY(-4px);
  }

}

.card:focus-within {
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

.card__header {
  margin-bottom:var(--space-4);
}

.card__header:last-child {
  margin-bottom:0;
}

.card__body {
  margin-bottom:var(--space-4);
}

.card__body:last-child {
  margin-bottom:0;
}

.card__title {
  margin:0 0 var(--space-2);
  color:var(--color-text);
  font-size:1.0625rem;
  font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-tight);
}

.card__subtitle {
  margin:0 0 var(--space-4);
  color:var(--color-text-muted);
  font-size:.8125rem;
  line-height:var(--line-height-normal);
}

.card__metrics {
  padding-top:var(--space-4);
  margin:var(--space-4) 0 0;
  border-top:1px solid var(--color-border);
  gap:var(--space-3) var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  display:grid;
}

.card__metric {
  flex-direction:column;
  gap:2px;
  min-width:0;
  display:flex;
}

.card__metric-label {
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.vulnerability--standalone {
  padding-top:var(--space-4);
  margin-top:var(--space-4);
  border-top:1px solid var(--color-divider);
  border-bottom:none;
}

.card__metric-value {
  color:var(--color-text);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  margin:0;
}

.card__remediation {
  padding-top:var(--space-4);
  margin-top:var(--space-4);
  border-top:1px solid var(--color-divider);
}

.card__remediation .card__title {
  margin:var(--space-4) 0 var(--space-2);
  font-size:var(--font-size-md);
}

.card__remediation .card__title:first-child {
  margin-top:0;
}

.card__remediation .vulnerability__description {
  white-space:pre-line;
}

.pagination {
  padding:var(--space-4) 0;
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  justify-content:center;
  align-items:center;
  gap:var(--space-4);
  flex-wrap:wrap;
  display:flex;
}

.pagination__status {
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.pagination__link {
  min-height:44px;
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  color:var(--color-primary);
  align-items:center;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
}

.pagination__link:hover {
  border-color:var(--color-primary);
  text-decoration:none;
}

.footer {
  box-sizing:border-box;
  min-height:120px;
  padding:var(--space-5) var(--space-5) var(--space-4);
  margin-top:var(--space-6);
  border-top:1px solid var(--color-border);
  background:var(--color-card-bg);
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  display:flex;
}

.footer__content {
  align-items:center;
  gap:var(--space-4);
  flex-direction:column;
  width:100%;
  max-width:1200px;
  display:flex;
}

.footer__text {
  max-width:720px;
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
  text-align:center;
  line-height:1.5;
}

.footer__links {
  justify-content:center;
  align-items:center;
  gap:var(--space-4);
  flex-wrap:wrap;
  display:flex;
}

.footer__links a {
  color:var(--color-text-muted);
}

.footer__links a:hover {
  color:var(--color-text);
  text-decoration:underline;
}

.footer__sep {
  color:var(--color-text-muted);
  opacity:.6;
}

.footer__powered {
  align-items:center;
  gap:var(--space-2);
  display:flex;
}

.footer__powered__text {
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  font-weight:500;
}

.footer__logo {
  width:auto;
  height:20px;
  transition:opacity .2s;
}

.footer__logo:hover {
  opacity:.8;
}

@media (width<=768px) {
  .footer {
    min-height:100px;
    padding:var(--space-4) var(--space-4) var(--space-3);
  }

  .footer__content {
    text-align:center;
    gap:var(--space-4);
    flex-direction:column;
  }

  .footer__text {
    max-width:100%;
    font-size:var(--font-size-xs);
    text-align:center;
  }

  .footer__links {
    justify-content:center;
    gap:var(--space-3);
  }

}

@media (width<=480px) {
  .footer {
    min-height:80px;
    padding:var(--space-4) var(--space-3) var(--space-3);
  }

  .footer__content {
    gap:var(--space-4);
  }

  .footer__text {
    font-size:var(--font-size-xs);
    line-height:1.4;
  }

  .footer__links {
    gap:var(--space-3) var(--space-3);
  }

  .footer__links .footer__powered {
    flex-basis:100%;
    justify-content:center;
    display:flex;
  }

}

.error-page {
  background:var(--color-bg);
  flex-direction:column;
  min-height:100vh;
  display:flex;
  position:relative;
  overflow:hidden;
}

.error-content {
  z-index:5;
  padding:var(--space-6);
  flex:1;
  justify-content:center;
  align-items:center;
  display:flex;
  position:relative;
}

.error-container {
  border:1px solid var(--color-border);
  background:var(--color-card-bg);
  text-align:center;
  width:100%;
  max-width:500px;
  box-shadow:var(--shadow-lg);
  border-radius:20px;
  padding:3rem 2rem;
}

.error-page__code {
  color:var(--color-accent);
  margin:0;
  font-size:6rem;
  font-weight:900;
  line-height:1;
}

.error-emoji {
  margin:var(--space-4) 0;
  font-size:3rem;
}

.error-page__message {
  margin:var(--space-4) 0 var(--space-6);
  color:var(--color-text-muted);
  font-size:1.2rem;
  line-height:1.5;
}

.error-page__actions {
  justify-content:center;
  gap:var(--space-4);
  flex-wrap:wrap;
  display:flex;
}

.error-page__button {
  cursor:pointer;
  transition:background-color var(--transition-slow),border-color var(--transition-slow),color var(--transition-slow),transform var(--transition-slow);
  align-items:center;
  gap:var(--space-2);
  border:none;
  border-radius:50px;
  padding:.8rem 1.5rem;
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
}

.error-page__button--primary {
  background:var(--color-accent);
  color:#fff;
  box-shadow:var(--shadow-md);
}

.error-page__button--primary:hover {
  box-shadow:var(--shadow-lg);
  background:#d45500;
  transform:translateY(-2px);
}

.error-page__button--secondary {
  border:2px solid var(--color-border);
  background:var(--color-card-bg);
  color:var(--color-text);
}

.error-page__button--secondary:hover {
  border-color:var(--color-accent);
  color:var(--color-accent);
  transform:translateY(-2px);
}

@media (width<=768px) {
  .error-container {
    margin:1rem;
    padding:2rem 1rem;
  }

  .error-page__code {
    font-size:4rem;
  }

  .error-emoji {
    font-size:2rem;
  }

  .error-page__actions {
    flex-direction:column;
  }

}

.share__modal {
  z-index:3000;
  background:#00000080;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  display:flex;
  position:fixed;
  top:0;
  left:0;
}

.share__modal--hidden {
  display:none;
}

.share {
  border-radius:var(--radius-lg);
  background:var(--color-card-bg);
  max-height:80vh;
  box-shadow:var(--shadow-lg);
  width:90%;
  max-width:500px;
  overflow-y:auto;
}

.share__header {
  padding:var(--space-4);
  border-bottom:1px solid var(--color-border);
  justify-content:space-between;
  align-items:center;
  display:flex;
}

.share__title {
  color:var(--color-text);
  font-size:var(--font-size-lg);
  margin:0;
  font-weight:600;
}

.share__close {
  padding:var(--space-1);
  color:var(--color-text-muted);
  font-size:var(--font-size-xl);
  cursor:pointer;
  transition:opacity var(--transition-fast);
  background:0 0;
  border:none;
}

.share__close:hover {
  color:var(--color-text);
}

.share__close:focus-visible {
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.share__url-section {
  padding:var(--space-4);
  border-bottom:1px solid var(--color-border);
}

.share__url-label {
  margin:0 0 var(--space-2) 0;
  color:var(--color-text);
  font-size:var(--font-size-sm);
  font-weight:600;
}

.share__url-input {
  width:100%;
  padding:var(--space-2) var(--space-3);
  margin-bottom:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-chip-bg);
  color:var(--color-text);
  font-size:var(--font-size-sm);
}

.share__url-input--copylink {
  font-family:var(--font-family-mono);
}

.share__copy-button {
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-accent);
  color:#fff;
  font-size:var(--font-size-sm);
  cursor:pointer;
  transition:opacity var(--transition-fast);
  align-items:center;
  gap:var(--space-2);
  font-weight:600;
  display:flex;
}

.share__copy-button:hover {
  opacity:.85;
}

.share__copy-button:focus-visible {
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.share__copy-button:active {
  opacity:.7;
}

.share__copy-icon {
  width:16px;
  height:16px;
}

.share__social-section {
  padding:var(--space-4);
}

.share__social-title {
  margin:0 0 var(--space-3) 0;
  color:var(--color-text);
  font-size:var(--font-size-md);
  font-weight:600;
}

.share__social-grid {
  gap:var(--space-5);
  gap:var(--space-3);
  grid-template-columns:repeat(auto-fit,minmax(60px,1fr));
  display:grid;
}

.share__button {
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-card-bg);
  width:60px;
  height:60px;
  color:var(--color-text);
  transition:transform var(--transition-fast);
  justify-content:center;
  align-items:center;
  text-decoration:none;
  display:flex;
}

.share__button:hover {
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

.share__button:focus-visible {
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.share__button:active {
  transform:translateY(0);
}

.share__button--facebook {
  color:#1877f2;
}

.share__button--x {
  color:var(--color-text);
}

.share__button--linkedin {
  color:#0077b5;
}

.share__button--telegram {
  color:#08c;
}

.share__button--reddit {
  color:#ff4500;
}

.share__button--hackernews {
  color:#f60;
}

.share__icon {
  fill:currentColor;
  width:24px;
  height:24px;
}

.btn {
  padding:var(--space-2) var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-card-bg);
  color:var(--color-text);
  font-size:var(--font-size-sm);
  cursor:pointer;
  transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);
  justify-content:center;
  align-items:center;
  gap:var(--space-2);
  font-weight:600;
  text-decoration:none;
  display:inline-flex;
}

.btn:hover {
  background:var(--color-hover);
  text-decoration:none;
}

.btn:focus-visible {
  outline:2px solid var(--color-accent);
  outline-offset:2px;
}

.btn:active {
  transform:translateY(1px);
}

.btn--primary {
  border-color:var(--color-accent);
  background:var(--color-accent);
  color:#fff;
}

.btn--primary:hover {
  color:#fff;
  background:#d45500;
}

.exploit-card {
  width:100%;
  min-width:0;
  margin-bottom:var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-card-bg);
  cursor:pointer;
  transition:transform var(--duration-slow) var(--ease-standard),box-shadow var(--duration-slow) var(--ease-standard);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

@media (hover:hover) {
  .exploit-card:hover {
    box-shadow:var(--shadow-lg);
    transform:translateY(-2px);
  }

}

.exploit-card.expanded {
  box-shadow:var(--shadow-md);
  transform:none;
}

.exploit-card-header {
  padding:var(--space-4);
  align-items:flex-start;
  gap:var(--space-4);
  display:flex;
  position:relative;
}

.exploit-card-icon {
  border:1px solid var(--color-chip-border);
  border-radius:var(--radius-lg);
  background:var(--color-chip-bg);
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:50px;
  height:50px;
  font-size:1.5rem;
  display:flex;
  position:relative;
}

.cvss-score {
  background:var(--color-card-bg);
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:24px;
  height:24px;
  font-size:.7rem;
  font-weight:700;
  display:flex;
  position:absolute;
  bottom:-6px;
  right:-6px;
  box-shadow:0 2px 4px #0003;
}

.exploit-card-icon.high .cvss-score {
  color:var(--color-error);
}

.exploit-card-icon.medium .cvss-score {
  color:#b58900;
}

.exploit-card-icon.low .cvss-score {
  color:var(--color-success);
}

.exploit-card-icon.none .cvss-score {
  color:var(--color-text-muted);
}

.exploit-card-content {
  gap:var(--space-1);
  flex-direction:column;
  flex:1;
  min-width:0;
  display:flex;
  position:relative;
}

.exploit-card-title {
  margin-bottom:var(--space-1);
  color:var(--color-text);
  font-size:var(--font-size-lg);
  overflow-wrap:anywhere;
  font-weight:700;
  line-height:1.3;
}

.exploit-card-meta {
  gap:var(--space-3);
  flex-wrap:wrap;
  display:flex;
}

.exploit-card-meta-item {
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
  align-items:center;
  gap:var(--space-1);
  display:flex;
}

.exploit-card-description {
  margin-top:var(--space-1);
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
}

.exploit-card-chevron {
  z-index:10;
  transition:transform .3s ease-in-out;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%)rotate(0);
}

.exploit-card-chevron svg {
  width:20px;
  height:20px;
  stroke:var(--color-text-muted);
  transition:stroke .2s;
  display:block;
}

.exploit-card-chevron:hover svg {
  stroke:var(--color-text);
}

.exploit-card.expanded .exploit-card-chevron {
  transform:translateY(-50%)rotate(180deg);
}

.exploit-card-tags {
  margin-top:var(--space-1);
  gap:var(--space-1);
  flex-wrap:wrap;
  display:flex;
}

.exploit-card-tag {
  border:1px solid var(--color-chip-border);
  border-radius:var(--radius-full);
  background:var(--color-chip-bg);
  color:var(--color-chip-text);
  padding:.2rem .5rem;
  font-size:.7rem;
  font-weight:500;
}

.exploit-card-tag.epss-high {
  background:var(--color-error-light);
  color:var(--color-error);
  border-color:#dc354566;
  font-weight:600;
}

.exploit-card-tag.epss-medium {
  background:var(--color-warning-light);
  color:#b58900;
  border-color:#ffc10766;
  font-weight:600;
}

.exploit-card-tag.epss-low {
  background:var(--color-success-light);
  color:var(--color-success);
  border-color:#28a74566;
  font-weight:600;
}

.exploit-card-tag.cve-tag {
  color:#8250df;
  background:#6f42c11a;
  border-color:#6f42c14d;
}

.exploit-card-actions-header {
  z-index:30;
  height:0;
  margin-top:var(--space-2);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--transition-slow),transform var(--transition-slow),visibility var(--transition-slow);
  align-items:center;
  gap:var(--space-1);
  display:flex;
  overflow:hidden;
  transform:translateY(-10px);
}

.exploit-card.expanded .exploit-card-actions-header {
  height:auto;
  margin-top:var(--space-3);
  opacity:1;
  visibility:visible;
  overflow:visible;
  transform:translateY(0);
}

.action-btn {
  border-radius:var(--radius-sm);
  min-width:2rem;
  height:2rem;
  color:var(--color-text-muted);
  cursor:pointer;
  transition:transform var(--transition-fast),background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);
  background:0 0;
  border:1px solid #0000;
  justify-content:center;
  align-items:center;
  padding:.4rem;
  display:flex;
  position:relative;
}

@media (hover:hover) {
  .action-btn:hover {
    color:var(--color-primary);
    background:#667eea1a;
    border-color:#667eea4d;
    transform:translateY(-1px);
  }

}

.action-btn:focus-visible {
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}

.action-btn svg {
  pointer-events:none;
  width:16px;
  height:16px;
}

.exploit-card-body {
  padding:var(--space-4);
  border-top:1px solid var(--color-border);
  display:none;
}

.exploit-card.expanded .exploit-card-body {
  display:block;
}

.exploit-card-body pre {
  border-radius:var(--radius-md);
  max-height:420px;
  margin:0;
  overflow:auto;
}

.exploit-card-body code {
  padding:var(--space-4);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  display:block;
}

.exploit-card-actions {
  align-items:center;
  gap:var(--space-2);
  flex-wrap:wrap;
  display:flex;
}

.search-highlight {
  border-radius:var(--radius-sm);
  color:inherit;
  background:#ffc1074d;
  padding:.1rem .2rem;
  font-weight:600;
  box-shadow:0 0 0 1px #ffc10733;
}

.theme-dark .search-highlight {
  background:#ffc10766;
  box-shadow:0 0 0 1px #ffc1074d;
}

@media (width<=768px) {
  .exploit-card-header {
    padding:var(--space-3);
    gap:var(--space-3);
  }

  .exploit-card-title {
    padding-right:var(--space-6);
    font-size:var(--font-size-md);
  }

}

@keyframes skeleton-shimmer {
  to {
    transform:translate(100%);
  }

}

.skeleton {
  border-radius:var(--radius-sm);
  background:var(--color-bg-secondary);
  position:relative;
  overflow:hidden;
}

.skeleton:after {
  content:"";
  background:linear-gradient(90deg, transparent, var(--color-hover), transparent);
  animation:1.6s infinite skeleton-shimmer;
  position:absolute;
  inset:0;
  transform:translate(-100%);
}

.skeleton-card {
  padding:var(--space-4);
  margin-bottom:var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-card-bg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.skeleton-header {
  margin-bottom:var(--space-4);
  align-items:flex-start;
  gap:var(--space-4);
  display:flex;
}

.skeleton-icon {
  border-radius:var(--radius-lg);
  width:50px;
  height:50px;
}

.skeleton-content {
  flex:1;
}

.skeleton-title {
  height:24px;
  margin-bottom:var(--space-2);
}

.skeleton-subtitle {
  width:60%;
  height:16px;
  margin-bottom:var(--space-3);
}

.skeleton-tags {
  margin-bottom:var(--space-3);
  gap:var(--space-2);
  display:flex;
}

.skeleton-tag {
  border-radius:var(--radius-full);
  width:60px;
  height:20px;
}

.skeleton-actions {
  justify-content:flex-end;
  gap:var(--space-2);
  display:flex;
}

.skeleton-action {
  width:32px;
  height:32px;
}

.skeleton-code {
  height:120px;
  margin-top:var(--space-4);
  border-radius:var(--radius-md);
}

@keyframes toast-progress {
  0% {
    transform:scaleX(1);
  }

  to {
    transform:scaleX(0);
  }

}

.toast__container {
  top:var(--space-4);
  right:var(--space-4);
  z-index:4000;
  pointer-events:none;
  position:fixed;
}

.toast {
  min-width:300px;
  max-width:400px;
  padding:var(--space-4);
  margin-bottom:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-card-bg);
  pointer-events:auto;
  transition:transform var(--duration-slow) var(--ease-standard);
  box-shadow:var(--shadow-lg);
  align-items:center;
  gap:var(--space-3);
  display:flex;
  position:relative;
  transform:translate(120%);
}

.toast--show {
  transform:translate(0);
}

.toast--success {
  border-left:4px solid var(--color-success);
}

.toast--error {
  border-left:4px solid var(--color-error);
}

.toast--warning {
  border-left:4px solid var(--color-warning);
}

.toast--info {
  border-left:4px solid var(--color-info);
}

.toast__icon {
  flex-shrink:0;
  width:24px;
  height:24px;
}

.toast__icon--success {
  color:var(--color-success);
}

.toast__icon--error {
  color:var(--color-error);
}

.toast__icon--warning {
  color:var(--color-warning);
}

.toast__icon--info {
  color:var(--color-info);
}

.toast__content {
  flex:1;
  min-width:0;
}

.toast__title {
  color:var(--color-text);
  font-size:var(--font-size-sm);
  font-weight:600;
}

.toast__message {
  margin-top:var(--space-1);
  color:var(--color-text-muted);
  font-size:var(--font-size-xs);
  line-height:1.4;
}

.toast__close {
  padding:var(--space-1);
  border-radius:var(--radius-sm);
  color:var(--color-text-muted);
  cursor:pointer;
  transition:background-color var(--transition-fast),color var(--transition-fast);
  background:0 0;
  border:none;
  flex-shrink:0;
}

.toast__close:hover {
  background:var(--color-hover);
  color:var(--color-text);
}

.toast__progress {
  border-radius:0 0 var(--radius-md) var(--radius-md);
  background:var(--color-border);
  height:3px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  overflow:hidden;
}

.toast__progress-bar {
  background:var(--color-accent);
  transform-origin:0;
  width:100%;
  height:100%;
  animation:linear toast-progress;
}

@media (width<=768px) {
  .toast__container {
    right:var(--space-3);
    left:var(--space-3);
  }

  .toast {
    min-width:0;
    max-width:none;
  }

}

.card--static:hover {
  box-shadow:var(--shadow-sm);
  transform:none;
}

.api-text {
  max-width:68ch;
  margin:0 0 var(--space-3);
  color:var(--color-text);
  font-size:var(--font-size-md);
  line-height:var(--line-height-relaxed);
}

.api-text:last-child {
  margin-bottom:0;
}

.api-status {
  padding:var(--space-1) var(--space-3);
  margin:0 0 var(--space-5);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
  background:var(--color-card-bg);
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  align-items:center;
  gap:var(--space-2);
  display:inline-flex;
}

.api-status__dot {
  border-radius:var(--radius-full);
  background:var(--color-warning,#d29922);
  width:8px;
  height:8px;
}

.api-list {
  gap:var(--space-4);
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
}

.api-list__item {
  align-items:start;
  gap:var(--space-3);
  grid-template-columns:auto 1fr;
  display:grid;
}

.api-list__icon {
  width:18px;
  height:18px;
  color:var(--color-success,#3fb950);
  flex-shrink:0;
  margin-top:2px;
}

.api-list__title {
  margin-bottom:var(--space-1);
  color:var(--color-text);
  font-size:var(--font-size-md);
  font-weight:var(--font-weight-semibold);
  display:block;
}

.api-list__text {
  max-width:62ch;
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-relaxed);
}

.api-cta {
  padding-top:var(--space-4);
  margin-top:var(--space-4);
  border-top:1px solid var(--color-divider);
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
  display:flex;
}

.api-cta__note {
  color:var(--color-text-muted);
  font-size:var(--font-size-sm);
}

.skip-link {
  z-index:9999;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);
  background:var(--color-card-bg);
  color:var(--color-text);
  text-decoration:none;
  position:absolute;
  left:-9999px;
}

.skip-link:focus {
  top:var(--space-3);
  left:var(--space-3);
}

pre,code {
  font-family:var(--font-family-mono);
  cursor:text;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-ligatures:common-ligatures;
}

.scroll-top {
  display: none !important;
}

.scroll-top--hidden {
  display: none !important;
}

[data-action=copy].is-copied {
  border-color:var(--color-success);
  background:var(--color-success);
  color:#fff;
}

.icon {
  vertical-align:-.125em;
  fill:none;
  stroke:currentColor;
  flex-shrink:0;
  width:1em;
  height:1em;
  display:inline-block;
}

[data-tooltip] {
  position:relative;
}

[data-tooltip]:after {
  content:attr(data-tooltip);
  top:calc(100% + var(--space-2));
  z-index:var(--z-index-tooltip);
  padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-sm);
  background:var(--color-text);
  color:var(--color-bg);
  font-size:var(--font-size-xs);
  pointer-events:none;
  opacity:0;
  transition:opacity var(--transition-fast),transform var(--transition-fast);
  transform:translate(-50%, calc(var(--space-1) * -1));
  white-space:nowrap;
  font-weight:500;
  position:absolute;
  left:50%;
}

[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after {
  opacity:1;
  transform:translate(-50%);
}

.avatar.logo {
  background:url(static/images/sprites/sprite.png) 0 0/auto 48px no-repeat;
  width:48px;
  height:48px;
}

.theme-dark .avatar.logo {
  background-color:#e8eaed;
  border-radius:8px;
  box-shadow:inset 0 0 0 1px #ffffff14;
}

@supports (background-image:image-set(url("static/images/sprites/sprite.webp") type('image/webp'))) {
  .avatar.logo {
    background-image:image-set("static/images/sprites/sprite.webp" 1x type("image/webp"));
  }

}

.avatar.logo.logo_canvas {
  background-position:0 0;
}

.avatar.logo.logo_d2 {
  background-position:-48px 0;
}

.avatar.logo.logo_exploitdb {
  background-position:-96px 0;
}

.avatar.logo.logo_exploitpack {
  background-position:-144px 0;
}

.avatar.logo.logo_gitee {
  background-position:-192px 0;
}

.avatar.logo.logo_github {
  background-position:-240px 0;
}

.avatar.logo.logo_kitploit {
  background-position:-288px 0;
}

.avatar.logo.logo_metasploit {
  background-position:-336px 0;
}

.avatar.logo.logo_n0where {
  background-position:-384px 0;
}

.avatar.logo.logo_packetstorm {
  background-position:-432px 0;
}

.avatar.logo.logo_pwnmalw {
  background-position:-480px 0;
}

.avatar.logo.logo_saint {
  background-position:-528px 0;
}

.avatar.logo.logo_seebug {
  background-position:-576px 0;
}

.avatar.logo.logo_srcincite {
  background-position:-624px 0;
}

.avatar.logo.logo_vulnerlab {
  background-position:-672px 0;
}

.avatar.logo.logo_wpexploit {
  background-position:-720px 0;
}

.avatar.logo.logo_wpvulndb {
  background-position:-768px 0;
}

.avatar.logo.logo_zdt {
  background-position:-816px 0;
}

.avatar.logo.logo_zeroscience {
  background-position:-864px 0;
}

.avatar.logo.logo_unknown,.avatar.logo.logo_hackerone,.avatar.logo.logo_nvd,.avatar.logo.logo_osv,.avatar.logo.logo_rapid7,.avatar.logo.logo_securityfocus,.avatar.logo.logo_snyk,.avatar.logo.logo_tool {
  background-position:-912px 0;
}


/* --- REAL DOMAIN DATABASE SEARCH & EXTENSION MATRIX STYLES --- */
.domain-results-header {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.domain-results-title {
  color: var(--color-text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.domain-results-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.3rem 0.75rem;
  border-radius: 8px;
  font-size: var(--font-size-xs);
}

.theme-light .stat-pill {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
}

.stat-pill-label {
  color: var(--color-text-muted);
  font-weight: 500;
}

.stat-pill-val {
  color: #38bdf8;
  font-family: var(--font-family-mono);
  font-weight: 700;
}

.badge--pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.badge--exact {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge--total {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.domain-result-card {
  margin-bottom: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.domain-result-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.tld-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 0.18rem 0.6rem;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-full);
  color: #38bdf8;
  font-family: var(--font-family-mono);
  font-weight: 700;
  font-size: 0.8rem;
}

.ext-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  line-height: 1.6;
}

.ext-tag {
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--color-chip-bg);
  border: 1px solid var(--color-chip-border);
  box-sizing: border-box;
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease;
  display: inline-flex;
  align-items: center;
}

.ext-tag:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-hover);
  text-decoration: none;
}

.ext-more-btn {
  color: var(--color-accent);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 6px;
  margin-left: 4px;
}

.ext-more-btn:hover {
  text-decoration: underline;
}

.idn-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 4px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.idn-unicode {
  font-weight: 700;
  color: var(--color-text);
  margin-right: 4px;
}

.idn-raw {
  color: var(--color-text-muted);
  font-size: 0.8em;
  font-family: var(--font-family-mono);
}

.btn--sm {
  padding: 4px 12px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: var(--color-chip-bg);
  color: var(--color-text);
  transition: all var(--duration-fast);
}

.btn--sm:hover {
  background: var(--color-hover);
  border-color: var(--color-text-muted);
}

.btn--action-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn--action-primary:hover {
  opacity: .9;
  color: #fff;
}

.availability-banner {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.load-more-container {
  margin: var(--space-6) 0 var(--space-8);
  text-align: center;
}

.btn--load-more {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-md);
  font-weight: 600;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: all var(--duration-fast);
}

.btn--load-more:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* --- SEARCH HIGHLIGHT STYLES --- */
mark {
  background-color: transparent;
  color: inherit;
}

.search-highlight,
mark.search-highlight {
  border-radius: var(--radius-sm);
  color: inherit;
  background: #ffc1074d;
  padding: .1rem .2rem;
  font-weight: 600;
  box-shadow: 0 0 0 1px #ffc10733;
  display: inline;
}

.theme-dark .search-highlight,
.theme-dark mark.search-highlight {
  background: #ffc10766;
  box-shadow: 0 0 0 1px #ffc1074d;
  color: inherit;
}


/* --- Live Status Colors from Batch DNS (Zero Layout Shift & Silky Smooth Transitions) --- */
.ext-tag.status-active {
  color: #22c55e !important;
  background: rgba(34, 197, 94, 0.16) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
  font-weight: 500 !important;
}

.ext-tag.status-parked {
  color: #eab308 !important;
  background: rgba(234, 179, 8, 0.18) !important;
  border-color: rgba(234, 179, 8, 0.5) !important;
  font-weight: 500 !important;
}

.ext-tag.status-inactive {
  color: var(--color-text-muted) !important;
  opacity: 0.55;
  border-color: transparent !important;
  font-weight: 500 !important;
}

.ext-tag.status-dns_only {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.14) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  font-weight: 500 !important;
}

/* Availability Banner Check DNS Button */
.check-dns-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #ecfdf5;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.check-dns-btn:hover {
  background: #10b981;
  color: #04101e;
  transform: translateY(-1px);
}

/* DNS Intelligence Live Inspection Modal */
.dns-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.dns-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
}

.dns-modal-content {
  position: relative;
  width: 100%;
  max-width: 600px;
  background: var(--color-card-bg);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: 10;
  animation: dnsModalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dnsModalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.dns-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--color-border);
}

.dns-modal-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-family-mono);
}

.dns-badge {
  font-size: var(--font-size-xs);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  text-transform: uppercase;
}

.dns-badge.active {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.dns-badge.parked {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.dns-badge.inactive {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.dns-modal-close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-md);
  transition: all 0.15s;
  line-height: 1;
}

.dns-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text);
}

.dns-modal-body {
  padding: var(--space-4) var(--space-5);
  max-height: 75vh;
  overflow-y: auto;
}

.dns-grid {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.dns-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}

.dns-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}

.dns-card-value {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  word-break: break-all;
}

.dns-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.dns-pill {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
}

.dns-footer-meta {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.dns-tabs-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.dns-tabs-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dns-tabs-scroll {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 2px;
}

.dns-tabs-scroll::-webkit-scrollbar {
  height: 4px;
}

.dns-tabs-scroll::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.3);
  border-radius: 4px;
}

.dns-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.dns-tab-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.dns-tab-btn.active {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.dns-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  gap: 1rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.dns-loading .spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(56, 189, 248, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==============================================================================
   DotDB-Style Results Table & Programmatic SEO (pSEO) Styling
   ============================================================================== */

/* View Switcher: Table vs Cards */
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.results-stats-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.results-stats-text strong {
  color: var(--color-text);
  font-weight: 700;
}

.view-switcher {
  display: inline-flex;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}

.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: all 0.15s ease;
}

.view-btn:hover {
  color: var(--color-text);
}

.view-btn.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* DotDB Table Container */
.dotdb-table-container {
  width: 100%;
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--space-6);
  -webkit-overflow-scrolling: touch;
}

.dotdb-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--font-size-sm);
}

.dotdb-table th {
  padding: 14px 16px;
  background: rgba(86, 73, 221, 0.06);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.dotdb-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
  color: var(--color-text);
  transition: background 0.15s ease;
}

.dotdb-table tbody tr:hover td {
  background: var(--color-hover);
}

/* Domain / Keyword Column (Internal SEO Link) */
.col-domain {
  min-width: 180px;
  max-width: 280px;
}

.domain-pseo-link {
  font-family: var(--font-family-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-block;
  word-break: break-word;
  transition: color 0.15s ease;
}

.domain-pseo-link:hover {
  color: #00d2ff;
  text-decoration: underline;
}

.domain-pseo-link b,
.domain-pseo-link strong {
  color: var(--color-brand);
  background: rgba(86, 73, 221, 0.12);
  padding: 0 2px;
  border-radius: 2px;
}

/* Metric Pills */
.col-count {
  width: 110px;
  white-space: nowrap;
}

.metric-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-family-mono);
  line-height: 1.2;
}

.metric-badge--tlds {
  background: rgba(124, 77, 255, 0.12);
  color: #7c4dff;
  border: 1px solid rgba(124, 77, 255, 0.25);
}

.metric-badge--hot {
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: #ffffff;
  border: none;
}

.metric-badge--active {
  background: rgba(37, 165, 66, 0.12);
  color: #25a542;
  border: 1px solid rgba(37, 165, 66, 0.25);
}

/* Extensions Cell */
.col-extensions {
  min-width: 280px;
}

.exts-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  line-height: 1.6;
}

.ext-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-family-mono);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ext-badge:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface);
}

.ext-badge--com {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-weight: 700;
}

.ext-badge--active {
  border-bottom: 2px solid #25a542;
}

.ext-badge--parked {
  border-bottom: 2px solid #ffa116;
}

.ext-badge--inactive {
  border-bottom: 2px solid #df3545;
}

.btn-toggle-exts {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
  color: var(--color-primary);
  border: 1px dashed var(--color-primary);
  cursor: pointer;
  margin-left: 4px;
  transition: all 0.15s ease;
}

.btn-toggle-exts:hover {
  background: rgba(86, 73, 221, 0.1);
}

/* Actions Column */
.col-actions {
  width: 140px;
  text-align: right;
  white-space: nowrap;
}

.action-btn-group {
  display: inline-flex;
  gap: 6px;
}

/* pSEO Internal Linking / Related Keywords Cloud */
.pseo-related-keywords {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.pseo-related-title {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pseo-keywords-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pseo-kw-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.pseo-kw-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-hover);
  transform: translateY(-1px);
}

/* SEO Breadcrumb Navigation */
.seo-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.seo-breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.seo-breadcrumbs a:hover {
  color: var(--color-primary);
}

.seo-breadcrumbs-sep {
  opacity: 0.5;
}

/* pSEO Alphabetical Index Navigation */
.pseo-alphabet-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  justify-content: center;
}

.pseo-letter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all 0.15s ease;
}

.pseo-letter-btn:hover,
.pseo-letter-btn.active {
  background: var(--color-primary);
  color: #ffffff;
}