.cwe-hero-section nav.doc-breadcrumb,
.cwe-index-hero nav.doc-breadcrumb {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* ── Hero card (dark panel) ── */
.cwe-hero-card {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 24px 60px -30px rgba(14, 14, 18, 0.5);
}
.cwe-hero-dotgrid {
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.4px);
    background-size: 22px 22px;
}
.cwe-hero-glow { background: var(--brand); opacity: 0.25; }

.cwe-hero-badge {
    color: var(--brand-soft);
    background: var(--brand-tint);
    border-color: rgba(91, 63, 245, 0.3);
}
.cwe-hero-id { color: var(--brand-soft); }
.cwe-hero-sep { background: rgba(255, 255, 255, 0.25); }
.cwe-hero-sub { color: rgba(255, 255, 255, 0.5); }
.cwe-hero-title {
    color: #fff;
    font-size: clamp(30px, 4.2vw, 52px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    max-width: 100% !important;
}
.cwe-hero-lede { color: rgba(255, 255, 255, 0.6); }

.cwe-hero-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    transition: background-color 150ms ease;
}
.cwe-hero-btn:hover { background: rgba(255, 255, 255, 0.15); }
.cwe-hero-btn.primary {
    background: var(--brand);
    border-color: var(--brand);
    box-shadow: 0 6px 18px -6px rgba(91, 63, 245, 0.7);
}
.cwe-hero-btn.primary:hover { background: var(--brand-hover); }

/* ── Article cards ────────────────────────────────────────────────────────── */
.cwe-article {
    background: var(--surface);
    border: 1px solid var(--divider);
    box-shadow: var(--shadow-card);
}
.cwe-article-h { color: var(--ink); }
.cwe-sec-num { color: var(--brand); background: var(--brand-tint); }
.cwe-article .doc-reading { max-width: 100%; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.cwe-side-card {
    background: var(--surface);
    border: 1px solid var(--divider);
    box-shadow: var(--shadow-card);
}
.cwe-side-h { color: var(--ink-muted); }
.cwe-kv-row { border-color: var(--divider); }
.cwe-kv-row:last-child { border-bottom: none; padding-bottom: 0; }
.cwe-kv-k { color: var(--ink-muted); }
.cwe-kv-v { color: var(--ink); }

.cwe-ref-link {
    background: var(--bone-cool);
    border-color: var(--divider);
    color: var(--ink);
    transition: border-color 150ms ease, background-color 150ms ease;
}
.cwe-ref-link:hover { border-color: var(--brand); background: var(--brand-tint); }
.cwe-ref-link svg { color: var(--ink-soft); flex-shrink: 0; }
.cwe-ref-link:hover svg { color: var(--brand); }
.cwe-ref-url { color: var(--ink-soft); }

.cwe-cvss-score {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-family: var(--font-mono); white-space: nowrap;
    padding: 4px 9px;
    border-radius: 9999px;
    background: var(--bone-cool);
    box-shadow: inset 0 0 0 1px var(--divider);
}
.cwe-cvss-score .lbl { font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-soft); }
.cwe-cvss-score .val { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.cwe-cvss-score .max { font-size: 9.5px; font-weight: 400; color: var(--ink-soft); }
.cwe-cvss-score.critical { background: var(--crit-tint); }
.cwe-cvss-score.critical .val { color: var(--crit); }
.cwe-cvss-score.high     { background: var(--danger-tint); }
.cwe-cvss-score.high .val     { color: var(--danger); }
.cwe-cvss-score.medium   { background: var(--amber-tint); }
.cwe-cvss-score.medium .val   { color: var(--amber); }
.cwe-cvss-score.low      { background: var(--success-tint); }
.cwe-cvss-score.low .val      { color: var(--success); }

.cwe-sev-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 4px 9px;
    border-radius: 9999px;
    white-space: nowrap;
}
.cwe-sev-badge .d { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.cwe-sev-badge.critical { background: var(--crit-tint);    color: var(--crit); }
.cwe-sev-badge.critical .d { background: var(--crit); }
.cwe-sev-badge.high     { background: var(--danger-tint);  color: var(--danger); }
.cwe-sev-badge.high .d     { background: var(--danger); }
.cwe-sev-badge.medium   { background: var(--amber-tint);   color: var(--amber); }
.cwe-sev-badge.medium .d   { background: var(--amber); }
.cwe-sev-badge.low      { background: var(--success-tint); color: var(--success); }
.cwe-sev-badge.low .d      { background: var(--success); }
.cwe-sev-badge.none     { background: var(--bone-cool);    color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--divider); }
.cwe-sev-badge.none .d     { background: var(--ink-soft); }

@media (max-width: 480px) {
    .cwe-cve-ref-link { flex-wrap: wrap; row-gap: 8px; }
    .cwe-cve-ref-link > span:first-child { flex: 1 1 100%; }
    .cwe-cve-ref-meta { flex: 1 1 100%; justify-content: flex-start; }
}

.cwe-back-btn {
    background: var(--bone-cool);
    border: 1px solid var(--divider);
    color: var(--ink);
    transition: background-color 150ms ease, border-color 150ms ease;
}
.cwe-back-btn:hover { background: var(--surface); border-color: var(--ink-muted); }

.tab-input { position: absolute; opacity: 0; pointer-events: none; }
.tab-panel { display: none; }
.tab-bar { background: var(--bone-cool); border: 1px solid var(--divider); }
.tab-bar label { color: var(--ink-muted); transition: background-color 150ms ease, color 150ms ease; }
.tab-bar label:hover { color: var(--ink); }

#tab-1:checked ~ .tab-panels .tab-panel:nth-of-type(1),
#tab-2:checked ~ .tab-panels .tab-panel:nth-of-type(2),
#tab-3:checked ~ .tab-panels .tab-panel:nth-of-type(3),
#tab-4:checked ~ .tab-panels .tab-panel:nth-of-type(4) { display: block; }

#tab-1:checked ~ .tab-bar label:nth-of-type(1),
#tab-2:checked ~ .tab-bar label:nth-of-type(2),
#tab-3:checked ~ .tab-bar label:nth-of-type(3),
#tab-4:checked ~ .tab-bar label:nth-of-type(4) {
    background: var(--ink);
    color: #fff;
}

.code-kicker.vuln { color: var(--danger); }
.code-kicker.non-vuln { color: var(--success); margin-top: 26px; }

/* ── Prevention checklist ─────────────────────────────────────────────────── */
.cwe-check-item svg { color: var(--success); }
.cwe-check-item span { color: var(--ink); }

/* ── 404 / not-found state ───────────────────────────────────────────────── */
.cwe-error-card { background: var(--surface); border: 1px solid var(--divider); }
.cwe-error-ic { background: var(--danger-tint); color: var(--danger); }
.cwe-error-h { color: var(--ink); }
.cwe-error-p { color: var(--ink-muted); }

/* ── Index page — local accent (matches resources/templates/cwe-index.html) ── */
:root {
    --cwe-violet: #5B3FF5;
    --cwe-violet-tint: rgba(91, 63, 245, 0.09);
}

/* ── Index: hero (light dot-grid, not the dark detail-page card) ─────────── */
.cwe-index-hero {
    background-color: var(--bone);
    background-image:
        linear-gradient(180deg, rgba(91, 63, 245, 0.04) 0%, transparent 50%),
        radial-gradient(rgba(14, 14, 18, 0.045) 1px, transparent 1.4px);
    background-size: auto, 22px 22px;
    background-position: 0 0, -1px -1px;
    border-bottom: 1px solid var(--divider);
}
.cwe-index-hero-inner { padding: 8px 0 48px; }
.cwe-index-title {
    color: var(--ink);
    font-size: clamp(32px, 4.6vw, 60px) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    max-width: 100% !important;
}
.cwe-index-accent { color: var(--cwe-violet); font-style: italic; font-weight: 500; }
.cwe-index-lede { color: var(--ink-muted); }

/* ── Index: search box ────────────────────────────────────────────────────── */
.cwe-search-toolbar { display: flex; gap: 8px; align-items: center; }
.cwe-search-toolbar .cwe-search-wrap { flex: 1; }
.cwe-search-wrap input {
    width: 100%;
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--divider);
    transition: border-color 150ms ease, box-shadow 150ms ease;
    -webkit-appearance: none; appearance: none;
}
.cwe-search-wrap input::placeholder { color: var(--ink-soft); }
.cwe-search-wrap input:focus {
    outline: none;
    border-color: var(--cwe-violet);
    box-shadow: 0 0 0 4px var(--cwe-violet-tint);
}
.cwe-search-icon { color: var(--ink-muted); }

/* Hide the native browser "clear (x)" button inside the search input */
.cwe-search-wrap input[type="search"]::-webkit-search-cancel-button,
.cwe-search-wrap input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.cwe-search-wrap input[type="search"]::-ms-clear { display: none; width: 0; height: 0; }

.cwe-btn-search, .cwe-btn-reset {
    height: 50px;
    border-radius: 10px;
    font-family: var(--font-sans); font-size: 14px; font-weight: 500;
    padding: 0 18px;
    cursor: pointer; white-space: nowrap;
    border: 1px solid; flex-shrink: 0;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cwe-btn-search { background: var(--cwe-violet); color: #fff; border-color: var(--cwe-violet); }
.cwe-btn-search:hover { background: #4b35e3; border-color: #4b35e3; }
.cwe-btn-reset { background: var(--surface); color: var(--ink-muted); border-color: var(--divider); }
.cwe-btn-reset:hover { background: var(--bone); color: var(--ink); border-color: var(--ink-muted); }
@media (max-width: 480px) {
    .cwe-search-toolbar { flex-wrap: wrap; }
    .cwe-search-toolbar .cwe-search-wrap { flex: 1 1 100%; }
}

/* ── Index: results meta / count row ──────────────────────────────────────── */
.cwe-results-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); letter-spacing: 0.02em; }
.cwe-results-meta b { color: var(--ink); font-weight: 500; }

/* ── Index: cards ─────────────────────────────────────────────────────────── */
.cwe-card {
    background: var(--surface);
    border: 1px solid var(--divider);
    box-shadow: var(--shadow-card);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.cwe-card:hover {
    border-color: rgba(91, 63, 245, 0.4);
    box-shadow: 0 10px 28px -14px rgba(14, 14, 18, 0.18);
}
.cwe-card-id { color: var(--cwe-violet); background: var(--cwe-violet-tint); }
.cwe-card-title { color: var(--ink); transition: color 150ms ease; }
.cwe-card:hover .cwe-card-title { color: var(--cwe-violet); }
.cwe-card-excerpt { color: var(--ink-muted); }
.cwe-card-foot { border-top: 1px solid var(--divider); }
.cwe-card-link { color: var(--cwe-violet); }
.cwe-card-link svg { transition: transform 150ms ease; }
.cwe-card:hover .cwe-card-link svg { transform: translateX(2px); }

/* ── Index: empty state ───────────────────────────────────────────────────── */
.cwe-empty-ic { background: var(--bone-cool); color: var(--ink-muted); }
.cwe-empty-h { color: var(--ink); }
.cwe-empty-p { color: var(--ink-muted); }

/* ── Index: pagination (ported from cve/index.php's pager) ───────────────── */
.cwe-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding: 18px;
    border-top: 1px solid var(--divider);
    background: var(--bone-cool);
    border-radius: 0 0 14px 14px;
}
.cwe-pager .info {
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--ink-muted); letter-spacing: 0.02em;
}
.cwe-pager .pages { display: flex; gap: 4px; align-items: center; }
.cwe-pager .pages a,
.cwe-pager .pages .pager-disabled {
    min-width: 30px; height: 30px;
    background: var(--surface);
    border: 1px solid var(--divider);
    color: var(--ink-muted);
    border-radius: 7px;
    font-family: var(--font-mono); font-size: 12px;
    text-decoration: none;
    padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cwe-pager .pages a:hover { background: var(--bone); color: var(--ink); border-color: var(--ink-muted); }
.cwe-pager .pages .pager-disabled { opacity: 0.38; cursor: not-allowed; }
.cwe-pager .pages .pager-current {
    min-width: 30px; height: 30px;
    background: var(--cwe-violet); border: 1px solid var(--cwe-violet);
    color: #fff; border-radius: 7px;
    font-family: var(--font-mono); font-size: 12px; font-weight: 600;
    padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.cwe-pager .pages .pager-num { min-width: 30px; }
.cwe-pager .pages .pager-ellipsis {
    color: var(--ink-soft); font-family: var(--font-mono); font-size: 12px;
    padding: 0 2px; min-width: 20px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
}
/* ── Editorial / About section ───────────────────────────────────────────── */
.cwe-about {
    background: var(--bone);
    border-bottom: 1px solid var(--divider);
    padding: 56px 0;
}
.cwe-about-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
}
.cwe-about-lede {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cwe-violet);
    margin-bottom: 8px;
}
.cwe-about-h {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--ink);
    margin-bottom: 16px;
    text-wrap: balance;
}
.cwe-about-col p {
    font-size: 15px;
    line-height: 1.66;
    color: var(--ink-muted);
    margin-bottom: 14px;
    text-wrap: pretty;
}
.cwe-about-col p:last-child { margin-bottom: 0; }
.cwe-about-col strong { color: var(--ink); font-weight: 500; }
.cwe-about-col em { font-style: italic; }
.cwe-about-col a { color: var(--cwe-violet); text-decoration: underline; text-underline-offset: 2px; }
.cwe-about-col a:hover { color: var(--ink); }
.cwe-about-compare-h {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-top: 28px;
    margin-bottom: 10px;
}
.cwe-about-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.cwe-about-list li {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-muted);
    padding: 7px 0;
    border-bottom: 1px solid var(--divider);
}
.cwe-about-list li:first-child { padding-top: 0; }
.cwe-about-list li:last-child { border-bottom: none; padding-bottom: 0; }
.cwe-about-list a {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cwe-violet);
    text-decoration: none;
    margin-right: 6px;
}
.cwe-about-list a:hover { text-decoration: underline; }
@media (max-width: 1100px) {
    .cwe-about-inner { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 767px) {
    .cwe-about { padding: 40px 0; }
}

@media (max-width: 640px) {
    .cwe-pager { flex-direction: column; align-items: stretch; }
    .cwe-pager .pages { justify-content: center; flex-wrap: wrap; }
}