/*!
 * cb-audit-skin.css - Token-Override fuer audit.crawlerbase.de
 * Wird NACH audit.css geladen, ueberschreibt die Light-Theme-Variablen
 * mit dem dunklen crawlerbase Design-System.
 * (c) 2026 Dennis Andres
 */

:root {
  /* Surface: light -> dark */
  --bg:        #08090a;
  --bg-soft:   #0c0d10;
  --bg-2:      #111317;
  --bg-warm:   #14110d;
  --bg-dark:   #0c0d10;
  --bg-darker: #08090a;
  --surface:   #0c0d10;

  /* Text */
  --text:      #f5f5f7;
  --text-soft: #c0c1c7;
  --muted:     #76777f;
  --dim:       #44464d;

  /* Lines */
  --line:        rgba(255,255,255,0.06);
  --line-soft:   rgba(255,255,255,0.03);
  --line-strong: rgba(255,255,255,0.12);

  /* Brand */
  --accent:        #ff5e00;
  --accent-h:      #ff7a26;
  --accent-soft:   rgba(255,94,0,0.10);
  --accent-faint:  rgba(255,94,0,0.05);
  --accent-2:      #00d4aa;
  --accent-2-soft: rgba(0,212,170,0.10);

  /* Status */
  --pass:      #22c55e;
  --warn:      #f59e0b;
  --fail:      #ef4444;
  --pass-soft: rgba(34,197,94,0.12);
  --warn-soft: rgba(245,158,11,0.12);
  --fail-soft: rgba(239,68,68,0.12);

  /* Radius */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 14px;

  /* Shadows reset (dark surfaces dont need light shadows) */
  --sh-sm: 0 1px 0 0 rgba(255,255,255,0.03) inset;
  --sh:    0 1px 0 0 rgba(255,255,255,0.03) inset, 0 8px 24px -12px rgba(0,0,0,0.6);
  --sh-md: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 16px 32px -16px rgba(0,0,0,0.7);
  --sh-lg: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 24px 48px -16px rgba(0,0,0,0.8);

  /* Fonts */
  --sans: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

body { background: var(--bg); color: var(--text); font-family: var(--sans); }
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,94,0,0.07), transparent 60%),
    radial-gradient(ellipse 50% 30% at 90% 100%, rgba(0,212,170,0.04), transparent 60%);
}

/* Brand pulse dot (crawlerbase pattern) */
.brand { color: var(--text) !important; }
.brand-dot-c { color: var(--accent) !important; }

/* Nav glass + border */
.nav {
  background: rgba(8,9,10,0.72) !important;
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line) !important;
}
.nav-link { color: var(--text-soft) !important; }
.nav-link:hover { color: var(--text) !important; }
.nav-link.is-active { color: var(--accent) !important; background: var(--accent-soft) !important; }
.nav-badge {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: rgba(255,94,0,0.2) !important;
}

/* Surface elements */
.block, .row, .results-summary, .toc, .card, .stat-card,
.tip-code-wrap, .fix, .row-tip {
  background: var(--bg-soft) !important;
  border-color: var(--line) !important;
  color: var(--text-soft);
}

/* Code blocks */
pre, code, .mono { font-family: var(--mono) !important; }
.tip-code, .row-value, .hdr-v, .hdr-k {
  background: var(--bg-darker) !important;
  color: var(--text-soft) !important;
}

/* Footer dark */
.foot { background: var(--bg) !important; border-top: 1px solid var(--line); }
.foot-name { color: var(--text) !important; }
.foot a { color: var(--text-soft) !important; }
.foot a:hover { color: var(--accent) !important; }

/* Selection */
::selection { background: var(--accent); color: #fff; }

/* "Loslegen?" CTA-Sektion am Ende: Form zentrieren + im neuen Look */
.cta-bottom { text-align: center; padding: 80px 28px; }
.cta-bottom h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(32px, 4.5vw, 52px); line-height: 1.05;
  letter-spacing: -0.03em; color: var(--text); margin: 0 auto 14px;
  max-width: 14ch;
}
.cta-bottom p {
  color: var(--text-soft); margin: 0 auto 28px; font-size: 17px;
  max-width: 48ch;
}
.cta-bottom .searchform { max-width: 560px; margin: 0 auto; }
.cta-bottom .input-wrap {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg-soft); border: 1px solid var(--line-strong);
  border-radius: 10px; overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms;
}
.cta-bottom .input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,94,0,0.12);
}
.cta-bottom .input-prefix {
  display: inline-flex; align-items: center;
  padding: 0 12px 0 18px; color: var(--muted);
  font-family: var(--mono); font-size: 14px;
  background: var(--bg-2); border-right: 1px solid var(--line);
}
.cta-bottom .input-wrap input[type="text"] {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--text); font: inherit; font-size: 15px;
  padding: 16px 14px; font-family: var(--mono); font-weight: 500;
}
.cta-bottom .input-wrap input[type="text"]::placeholder { color: var(--dim); }
.cta-bottom .input-wrap button {
  background: var(--accent); color: #fff; border: 0;
  padding: 0 24px; font: inherit; font-weight: 600; font-size: 14.5px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: background 160ms;
}
.cta-bottom .input-wrap button:hover { background: var(--accent-h); }
.cta-bottom .input-wrap button .arrow { transition: transform 160ms; }
.cta-bottom .input-wrap button:hover .arrow { transform: translateX(3px); }
.cta-bottom .hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }