/* CVE Hub — dark theme */
:root {
  color-scheme: dark;
  --bg: #0a0c10;
  --bg-2: #11151c;
  --bg-3: #171c25;
  --line: #232a36;
  --fg: #e6e9ef;
  --fg-2: #aab2c3;
  --muted: #7f879a;
  --accent: #58b6ff;
  --accent-2: #8ad1ff;
  --crit: #ff5560;
  --high: #ff9a3c;
  --med: #f2cf4a;
  --low: #5fcf7a;
  --none: #5c6475;
  --kev: #ff3b4e;
  --ok: #4fc47a;
  --warn: #f2b84a;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.55; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }
code, .mono { font-family: var(--mono); }
h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 .6rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; color: var(--fg); border-bottom: 1px solid var(--line); padding-bottom: .4rem; margin-bottom: .8rem; }
h3 { font-size: .95rem; color: var(--fg-2); margin-top: 1rem; }
p { margin: .4rem 0 .6rem; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.center { text-align: center; }
.wrap { padding: 1.2rem 16px 3rem; }

/* header */
.top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .7rem 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.brand { font-weight: 700; font-size: 1.1rem; color: var(--fg); letter-spacing: .02em; white-space: nowrap; }
.brand-mark { color: var(--accent); }
.search { display: flex; flex: 1 1 320px; max-width: 640px; }
.search input { flex: 1; min-width: 0; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-right: 0; border-radius: 6px 0 0 6px; padding: .5rem .75rem; font-size: .95rem; font-family: var(--mono); }
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.search button, .filters button { background: var(--accent); color: #04101c; border: 0; border-radius: 0 6px 6px 0; padding: .5rem .9rem; font-weight: 600; cursor: pointer; }
.filters button { border-radius: 6px; }
.search button:hover, .filters button:hover { background: var(--accent-2); }
.nav { display: flex; gap: 1rem; margin-left: auto; }
.nav a { color: var(--fg-2); font-size: .9rem; }
.nav a:hover { color: var(--fg); }

/* panels */
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hero { margin-bottom: 1rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; display: flex; flex-direction: column; }
.stat-n { font-size: 1.6rem; font-weight: 700; font-family: var(--mono); }
.stat-l { color: var(--muted); font-size: .8rem; }
.stat.kev .stat-n { color: var(--kev); }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin: .6rem 0 1rem; font-size: .85rem; color: var(--fg-2); }
.filters label { display: flex; flex-direction: column; gap: .2rem; }
.filters label.check { flex-direction: row; align-items: center; gap: .4rem; padding-bottom: .4rem; }
.filters select { background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: .35rem .5rem; font-size: .9rem; }

/* tables */
table.list { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.list th { text-align: left; color: var(--muted); font-weight: 500; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
table.list td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:hover td { background: var(--bg-3); }
table.list td.id { white-space: nowrap; font-family: var(--mono); }
table.list td.num, table.list td.date { white-space: nowrap; font-family: var(--mono); color: var(--fg-2); }
table.list td.desc { color: var(--fg-2); }
table.list td.desc strong { color: var(--fg); font-weight: 600; }
table.compact { font-size: .85rem; }
table.compact td { padding: .35rem .5rem; }
.empty { color: var(--muted); padding: 1rem 0; }

/* severity */
.sev { display: inline-block; min-width: 2.6rem; text-align: center; padding: .1rem .45rem; border-radius: 5px; font-family: var(--mono); font-weight: 700; font-size: .85rem; color: #0a0c10; background: var(--none); }
.sev-critical { background: var(--crit); }
.sev-high { background: var(--high); }
.sev-medium { background: var(--med); }
.sev-low { background: var(--low); }
.sev-important { background: var(--high); }
.sev-moderate { background: var(--med); }
.sev-negligible, .sev-none, .sev-, .sev-unknown { background: var(--none); color: var(--fg); }
.score-v.sev { font-size: 1.7rem; min-width: 0; padding: .1rem .6rem; }
.badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; padding: .1rem .4rem; border-radius: 4px; vertical-align: middle; }
.badge.kev { background: var(--kev); color: #fff; }
.badge.rej { background: var(--none); color: var(--fg); }
.badge.ok { background: #1f4d2f; color: var(--ok); }
.badge.ssvc { background: #3a2a10; color: var(--warn); }
.badge.big { font-size: .8rem; padding: .25rem .6rem; }
.chip { display: inline-block; background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 .55rem; font-size: .78rem; color: var(--fg-2); margin: .1rem .15rem .1rem 0; }
.src-tag { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--accent); background: #0f2a40; border-radius: 4px; padding: .05rem .4rem; margin-right: .4rem; vertical-align: middle; }

/* CVE page */
.cve-head { margin-bottom: 1rem; }
.cve-title { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.cve-title h1 { font-size: 1.9rem; margin: 0; }
.cve-subtitle { font-size: 1.1rem; color: var(--fg-2); margin: .3rem 0 .6rem; }
dl.meta { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; font-size: .88rem; }
dl.meta div { display: flex; gap: .4rem; }
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; }
.notice { background: #15283a; border: 1px solid #1f4d70; border-radius: 8px; padding: .5rem .8rem; font-size: .9rem; }
.scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.score-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.score-card.kev-on { border-color: var(--kev); box-shadow: inset 0 0 0 1px var(--kev); }
.score-l { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.score-v { font-size: 1.7rem; font-weight: 700; font-family: var(--mono); align-self: flex-start; }
.score-v.epss { color: var(--accent); }
.score-v.small-v { font-size: 1.15rem; }
.score-s { color: var(--fg-2); font-size: .85rem; }
code.vector { display: block; font-size: .72rem; color: var(--muted); word-break: break-all; margin-top: .3rem; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; }
.main-col, .side-col { min-width: 0; }
.side-col .panel { position: sticky; top: 4.5rem; }
.desc-block { margin-bottom: .8rem; }
.desc-block p { margin: .3rem 0; white-space: pre-line; }
.desc-block.ja { border-left: 3px solid var(--accent); padding-left: .8rem; }
.kev-panel { border-color: #5a1f27; }
.advisory { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; margin: .6rem 0; background: var(--bg); }
.adv-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.distros { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem; }
.distro { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; background: var(--bg); min-width: 0; overflow-x: auto; }
.distro h3 { margin-top: 0; display: flex; align-items: center; gap: .5rem; }
.st { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .45rem; border-radius: 4px; background: var(--bg-3); color: var(--fg-2); }
.st-ok { background: #173b25; color: var(--ok); }
.st-na { background: #1e2733; color: var(--fg-2); }
.st-open { background: #4a2111; color: var(--high); }
.st-wontfix { background: #3b1f22; color: var(--crit); }
.st-error, .st-suspended { background: #3b1f22; color: var(--crit); }
.st-running { background: #15283a; color: var(--accent); }
.st-disabled { background: var(--bg-3); color: var(--muted); }
ul.refs { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
ul.refs li { padding: .3rem 0; border-bottom: 1px solid var(--line); word-break: break-all; }
ul.sources { list-style: none; padding: 0; margin: 0; }
ul.sources li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
ul.sources li .small { margin-left: auto; white-space: nowrap; }
ul.sources .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--none); flex: none; }
ul.sources li.on .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
details summary { cursor: pointer; color: var(--accent); font-size: .9rem; margin: .3rem 0; }
.ext { color: var(--muted); }

/* CVSS score provenance */
td.score-cell { white-space: nowrap; }
.ssrc { font-size: .66rem; color: var(--muted); margin-top: .2rem; line-height: 1.2; }
.score-src { font-size: .76rem; color: var(--accent-2); }

/* CVSS attack-condition badges */
td.attack { min-width: 13rem; }
.vbadges { display: flex; flex-wrap: wrap; gap: .25rem; }
.vbadges.big { gap: .4rem; margin-bottom: .6rem; }
.vb { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .4rem; border-radius: 4px; border: 1px solid var(--line); white-space: nowrap; }
.vbadges.big .vb, .vbadges.big .imp { font-size: .82rem; padding: .15rem .55rem; }
.vb-bad { color: #ffb4b9; background: #3b1a1e; border-color: #6b2a31; }
.vb-mid { color: #ffd59a; background: #3a2a12; border-color: #6a4b1c; }
.vb-ok  { color: var(--fg-2); background: var(--bg-3); }
.imps { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .3rem; }
.imp { display: inline-block; font-family: var(--mono); font-size: .72rem; padding: 0 .3rem; border-radius: 3px; background: var(--bg-3); color: var(--muted); }
.imp-h { background: #4a1d22; color: #ff9aa2; }
.imp-l { background: #3a3315; color: #f2d77a; }
.imp-n { color: var(--muted); }
.vsrc { font-size: .68rem; color: var(--muted); margin-left: .2rem; }
.remote-note { background: #3b1a1e; border: 1px solid #6b2a31; color: #ffd0d3; border-radius: 8px; padding: .45rem .7rem; font-size: .9rem; }
table.metrics td:first-child { white-space: nowrap; }
table.metrics { width: auto; min-width: min(100%, 640px); }
table.metrics td { padding-right: 2.5rem; }

/* misc */
.pager { display: flex; justify-content: center; gap: 1.2rem; padding: 1rem 0 .2rem; font-size: .9rem; }
.err-code { font-size: 3rem; color: var(--muted); font-family: var(--mono); }
.pending-msg { font-size: 1.05rem; }
.spinner { display: inline-block; width: .9em; height: .9em; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; vertical-align: -0.15em; }
@keyframes spin { to { transform: rotate(360deg); } }
.foot { padding: 1rem 16px 2rem; color: var(--muted); font-size: .78rem; border-top: 1px solid var(--line); }

@media (min-width: 1400px) {
  .wrap, .foot, .top { padding-left: 28px; padding-right: 28px; }
  .cols { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 900px) {
  /* minmax(0, …) lets the column shrink below its content so wide tables
     scroll inside their own box instead of widening the page */
  .cols { grid-template-columns: minmax(0, 1fr); }
  .side-col .panel { position: static; }
  .nav { margin-left: 0; }

  /* CVE list: one card per CVE */
  table.cves, table.cves tbody { display: block; }
  table.cves thead { display: none; }
  table.cves tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .6rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  table.cves tr:hover td { background: none; }
  table.cves td { display: block; border: 0; padding: 0; min-width: 0; }
  table.cves td.id { grid-column: 1; grid-row: 1; white-space: normal; align-self: center; }
  table.cves td.score-cell { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  table.cves td.attack { grid-column: 1 / -1; min-width: 0; }
  table.cves td.epss { grid-column: 1; grid-row: 2; align-self: center; font-size: .8rem; }
  table.cves td.epss::before { content: attr(data-label) " "; color: var(--muted); }
  table.cves td.epss.na { display: none; }
  table.cves td.desc { grid-column: 1 / -1; max-width: none; overflow-wrap: anywhere; }
  /* Phones and tablets show only the title; without a title, two lines of the summary */
  table.cves td.desc.has-title br, table.cves td.desc.has-title .sum { display: none; }
  table.cves td.desc:not(.has-title) .sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  table.cves td.date { grid-column: 1 / -1; font-size: .8rem; }
  table.cves td.date::before { content: attr(data-label) " "; color: var(--muted); }

  /* Sync status: one card per source, values labelled */
  table.status, table.status tbody { display: block; }
  table.status thead { display: none; }
  table.status tr { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  table.status td { display: block; border: 0; padding: 0; min-width: 0; }
  table.status td.src { grid-column: 1; font-weight: 600; }
  table.status td.state { grid-column: 2; }
  table.status td[data-label] { grid-column: 1 / -1; font-family: inherit; }
  table.status td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
  table.status td.msg { grid-column: 1 / -1; overflow-wrap: anywhere; }
  table.status td.msg:empty { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 14px; }
  .wrap { padding: .8rem 12px 2rem; }
  .top { padding: .6rem 12px; gap: .6rem; }
  .panel { padding: .8rem .8rem; border-radius: 8px; }
  h1 { font-size: 1.25rem; }
  .cve-title h1 { font-size: 1.35rem; }
  .cve-subtitle { font-size: 1rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .stat { padding: .6rem .75rem; }
  .stat-n { font-size: 1.3rem; }
  .filters { gap: .5rem .8rem; }
  .filters label { flex: 1 1 40%; }
  .filters label.check { flex-basis: 100%; }
  .filters select { width: 100%; }
  .filters button { flex: 1 1 100%; padding: .55rem; }

  /* Other tables keep their columns and scroll inside their own box */
  table.compact { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.compact td, table.compact th { white-space: nowrap; }
  table.compact td.small, table.compact td:last-child { white-space: normal; min-width: 10rem; }
  table.metrics { min-width: 0; }
  table.metrics td:last-child { min-width: 0; }

  /* CVE detail */
  .scores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .score-card { padding: .6rem .65rem; }
  .score-v { font-size: 1.35rem; }
  .score-v.sev { font-size: 1.35rem; }
  code.vector { font-size: .66rem; }
  dl.meta { gap: .3rem 1rem; }
  .distros { grid-template-columns: minmax(0, 1fr); }
  ul.refs li { overflow-wrap: anywhere; }
  .vbadges.big .vb, .vbadges.big .imp { font-size: .74rem; padding: .1rem .4rem; }
}