:root {
  color-scheme: light;
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ink: #172033;
  --muted: #617089;
  --line: #d8e2ef;
  --brand: #245a8d;
  --danger: #a33434;
  --warning: #8a5a00;
  --ok: #26734d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}
a { color: var(--brand); }
.layout { width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 20px 56px; flex: 1 0 auto; }
.hero, .section, .auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
}
.copy-scope {
  position: relative;
  padding-top: calc(44px + 2mm);
}
.copy-corner {
  position: absolute;
  top: 1mm;
  right: 1mm;
  left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  max-width: calc(100% - 2mm);
  margin: 1mm;
  z-index: 1;
}
.copy-corner button {
  padding: 8px 12px;
  min-width: 56px;
}
.copy-corner small {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.hero { margin-top: 48px; }
.eyebrow { color: var(--brand); font-weight: 700; margin: 0 0 8px; }
.brand-line {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.brand-title {
  color: var(--ink);
}
.version-badge {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}
h1, h2 { margin: 0 0 16px; }
.lead { color: var(--muted); line-height: 1.7; }
.lead.compact { margin-top: -4px; font-size: 0.95rem; }
.button, button {
  border: 0;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.auth-card button[type="submit"] {
  margin-top: 4px;
}
button.danger {
  background: var(--danger);
}
button.approve {
  background: var(--ok);
}
button.warning {
  background: var(--warning);
}
.ghost {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--line);
}
button.ghost,
a.ghost {
  background: transparent;
}
button.ghost.danger,
a.ghost.danger {
  color: var(--danger);
  border-color: #e9b8b8;
}
button.ghost.warning,
a.ghost.warning {
  color: var(--warning);
  border-color: #e7cf95;
}
button.ghost.approve,
a.ghost.approve {
  color: var(--ok);
  border-color: #a8d7bd;
}
.link { display: inline-block; text-decoration: none; }
.disabled-link {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  cursor: not-allowed;
  opacity: 0.78;
}
.disabled-action {
  display: inline-grid;
  gap: 3px;
  align-items: center;
}
.disabled-action small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.auth { min-height: auto; width: 100%; flex: 1 0 auto; display: grid; place-items: center; padding: 20px; }
.auth.wide { place-items: start center; padding: 28px 20px; }
.auth-card { width: min(420px, 100%); }
.signup-card { width: min(1040px, calc(100vw - 40px)); }
label { display: grid; gap: 6px; margin: 14px 0; color: var(--muted); }
label.check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  margin: 10px 0 0;
  color: var(--ink);
  line-height: 1.5;
}
input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
}
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
textarea {
  resize: vertical;
}
input[type="checkbox"] {
  width: auto;
  margin-top: 5px;
}
.form-note {
  margin: 14px 0 0;
  color: var(--muted);
}
.signup-received-note {
  margin-bottom: 18px;
}
.form-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.auth-scan-form {
  display: grid;
  gap: 10px;
}
.check-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.auth-scan-form small {
  color: var(--muted);
  line-height: 1.5;
}
.help-details ol,
.help-details ul {
  margin: 10px 0 0;
  padding-left: 22px;
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.topbar div { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.site-footer {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 34px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}
.site-footer p { margin: 0 0 5px; }
.site-footer a {
  color: var(--brand);
}
.version-summary strong {
  overflow-wrap: anywhere;
}
.info-section article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  margin-top: 12px;
}
.info-section .compact-filter,
.section .compact-filter {
  margin: 12px 0 14px;
}
.info-section time {
  display: block;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.news-date-missing {
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.info-section h3 {
  margin: 0 0 8px;
}
.info-section p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}
.info-section .news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.info-section .news-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 8px;
}
.info-section .news-meta a {
  color: var(--brand);
  text-decoration: none;
}
.info-section h3 a {
  color: var(--ink);
}
.reference-links {
  margin: 10px 0 0;
  padding-left: 20px;
}
.reference-links li {
  margin-top: 4px;
}
.archive-link {
  margin-top: 14px;
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.pagination span {
  color: var(--muted);
  font-weight: 700;
}
.nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.nav-actions form { margin: 0; }
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.admin-tabs button,
.admin-tabs a {
  min-height: 38px;
}
.admin-tabs button.active,
.admin-tabs a.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.section { margin-top: 18px; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.inline-form.admin-filter-form { grid-template-columns: minmax(220px, 1fr) auto auto; }
.inline-form .compact-check {
  margin: 0;
  align-self: center;
  white-space: nowrap;
}
.target-form { display: grid; gap: 4px; }
.table { display: grid; gap: 8px; }
.row {
  display: grid;
  grid-template-columns: 1.6fr 0.6fr 0.6fr;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.row span form {
  display: inline-block;
  margin: 4px 6px 0 0;
}
.row.four { grid-template-columns: 1.5fr 0.5fr 0.4fr 0.4fr; }
.row.five { grid-template-columns: 1.5fr 0.45fr 0.35fr 0.55fr 0.25fr; }
.row.api-key-row { grid-template-columns: 0.8fr 1.4fr 0.45fr 0.7fr 0.35fr; }
.row.rank-row { grid-template-columns: 0.35fr 1fr 1.2fr; }
.row.admin-scan-row { grid-template-columns: 1.35fr 0.45fr 0.35fr 0.55fr 0.55fr; }
.row.admin-target-row { grid-template-columns: 1.25fr 0.35fr 0.55fr 0.85fr; }
.row.admin-user-row { grid-template-columns: 0.9fr 0.25fr 0.3fr 0.45fr 1.05fr; }
.row.audit-row { grid-template-columns: 0.65fr 0.7fr 1fr 0.45fr; }
.row.ops-row { grid-template-columns: 1.4fr 0.35fr 0.6fr 0.45fr; }
.row.notice-row { grid-template-columns: 0.35fr 0.35fr 1.2fr 0.45fr 0.65fr; }
.row.knowledge-row { grid-template-columns: 0.35fr 0.32fr 1.1fr 0.42fr 0.38fr 0.5fr; }
.row.incident-row { grid-template-columns: 0.35fr 0.35fr 1.1fr 0.42fr 0.35fr 0.5fr; }
.row.threat-intel-row { grid-template-columns: 0.42fr 0.35fr 0.45fr 1.1fr 0.38fr 0.32fr 0.5fr; }
.row.threat-admin-row { grid-template-columns: 0.45fr 1fr 0.35fr 0.45fr; }
.split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 14px; }
.head { font-weight: 700; color: var(--muted); background: #eef3f9; }
.url { overflow-wrap: anywhere; }
.admin-row-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.admin-row-links a {
  font-weight: 700;
}
mark {
  border-radius: 999px;
  padding: 4px 8px;
  background: #e9eef6;
  color: var(--ink);
}
mark.approved, mark.low, mark.info, mark.published, mark.ok { background: #e7f4ed; color: var(--ok); }
mark.pending, mark.medium, mark.draft, mark.conditional_ok { background: #fff3d6; color: #7a5600; }
mark.high, mark.critical, mark.rejected, mark.failed, mark.timeout, mark.canceled, mark.archived, mark.ng { background: #fde8e8; color: var(--danger); }
.alert { border-radius: 8px; padding: 12px 14px; }
.success { background: #e7f4ed; color: var(--ok); }
.error { background: #fde8e8; color: var(--danger); }
.alert.warning { background: #fff3d6; color: var(--warning); }
.empty { color: var(--muted); }
.hint {
  color: var(--muted);
  line-height: 1.6;
  margin: 14px 0 0;
}
.terms-list {
  margin: 12px 0 0;
  padding-left: 1.45rem;
}
.terms-list li {
  line-height: 1.75;
  margin: 8px 0;
  padding-left: 0.2rem;
}
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.summary div, .finding, .check-item, .explain-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}
.summary span { display: block; color: var(--muted); margin-bottom: 6px; }
.explain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.explain-grid span,
.finding-detail span {
  display: block;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.explain-grid p { color: var(--muted); line-height: 1.6; margin: 8px 0 0; }
.decision-panel {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 16px;
}
.decision-panel h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}
.decision-panel h3 + .decision-actions {
  margin-top: 10px;
}
.decision-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.decision-actions article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}
.decision-actions p {
  line-height: 1.6;
  margin: 8px 0 0;
}
.check-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.check-item {
  border-left: 4px solid var(--line);
}
.check-item.ok { border-left-color: var(--ok); }
.check-item.conditional_ok { border-left-color: var(--warning); }
.check-item.ng { border-left-color: var(--danger); }
.check-item p {
  line-height: 1.6;
  margin: 8px 0 0;
}
.ok-checks {
  margin-top: 16px;
}
.finding-detail.compact {
  margin-top: 10px;
}
.finding-detail.compact p {
  margin: 0;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.plan-compare {
  display: grid;
  gap: 0;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  background: #fff;
}
.plan-compare.compact {
  margin-bottom: 12px;
}
.plan-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) repeat(4, minmax(120px, 1fr));
  min-width: 680px;
  border-bottom: 1px solid var(--line);
}
.plan-row:last-child {
  border-bottom: 0;
}
.plan-row > span,
.plan-row > label {
  padding: 12px;
  border-right: 1px solid var(--line);
}
.plan-row > span:last-child,
.plan-row > label:last-child {
  border-right: 0;
}
.plan-head {
  background: #eef3f9;
  font-weight: 700;
}
.plan-cell.selectable {
  margin: 0;
  color: var(--ink);
  cursor: pointer;
}
.plan-cell.selectable input {
  width: auto;
  margin-right: 8px;
}
.plan-cell.current {
  background: #e7f4ed;
}
.plan-cell small {
  display: block;
  color: var(--ok);
  margin-top: 4px;
}
.plan-change-form {
  margin-top: 8px;
}
.plan-drawer {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  margin: 0 0 12px;
}
.plan-drawer summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}
.plan-drawer summary::-webkit-details-marker {
  display: none;
}
.plan-drawer summary span {
  color: var(--muted);
}
.plan-drawer summary strong {
  color: var(--ink);
}
.plan-drawer summary small {
  color: var(--brand);
  font-weight: 700;
}
.plan-drawer[open] summary {
  border-bottom: 1px solid var(--line);
}
.plan-drawer > form,
.plan-drawer > p {
  margin-left: 14px;
  margin-right: 14px;
}
.plan-drawer > form {
  margin-bottom: 14px;
}
.actions form { margin: 0; }
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.row-actions form {
  margin: 0;
}
.row-actions button {
  padding: 8px 10px;
}
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.filter-tabs button.active,
.filter-tabs a.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.hidden {
  display: none !important;
}
.scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 12px;
  margin-top: 8px;
}
.key-created pre {
  margin-bottom: 0;
}
.guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.guide-steps article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}
.guide-steps article span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  margin-bottom: 12px;
}
.guide-steps article p {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 0;
}
.finding { margin-top: 10px; }
.finding p { color: var(--muted); line-height: 1.7; }
.finding-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.priority {
  color: var(--ink) !important;
  font-weight: 700;
  margin-bottom: 10px;
}
.finding-detail {
  display: grid;
  gap: 8px;
}
.finding-detail p { margin: 0; }
.triage-form {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 10px;
  align-items: end;
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}
.triage-form label {
  margin: 0;
}
.admin-create-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}
.notice-editor-grid {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) minmax(120px, 0.4fr) 1fr auto;
  gap: 10px;
  align-items: end;
}
.notice-editor-grid label {
  margin: 0;
}
.notice-editor-grid .wide {
  grid-column: 1 / -1;
}
.subscription-form {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(110px, 1fr) auto;
  gap: 6px;
  width: 100%;
}
.billing-details {
  grid-column: 1 / -1;
}
.billing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.billing-grid label {
  margin: 0;
}
.billing-grid .wide {
  grid-column: 1 / -1;
}
.admin-layout {
  max-width: 1240px;
}
.customer-list {
  display: grid;
  gap: 18px;
}
.customer-card {
  margin-top: 0;
}
.customer-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.customer-card-head h2 {
  margin-bottom: 8px;
}
.customer-status-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.customer-summary {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.customer-contract-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.customer-contract-grid .wide {
  grid-column: 1 / -1;
}
.customer-message-form {
  display: grid;
  gap: 10px;
}
.message-history {
  display: grid;
  gap: 10px;
}
.message-history-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}
.message-history-item h3 {
  margin: 8px 0;
  font-size: 0.98rem;
}
.message-history-item pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
}
.message-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 0.86rem;
}
.success-text {
  color: var(--ok);
}
.danger-text {
  color: var(--danger);
}
.inline-action-form {
  margin-top: 10px;
}
details {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 10px;
}
summary {
  cursor: pointer;
  color: var(--brand);
  font-weight: 700;
}
pre {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #0f1724;
  color: #f8fafc;
}
.policy-list,
.code-list {
  display: grid;
  gap: 12px;
}
.policy-list.compact-list {
  margin-top: 16px;
}
.policy-list article,
.code-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}
.plan-admin-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  margin-bottom: 14px;
}
.plan-admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.plan-admin-head h3 {
  margin: 0;
}
.report-page .topbar { display: none; }
.knowledge-block {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}
.knowledge-block h3 {
  margin: 0 0 8px;
  font-size: 0.98rem;
}
.knowledge-item {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 8px;
}
.knowledge-item:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.auth-scan-drawer {
  margin-top: 8px;
  padding: 8px 0 0;
}
.auth-scan-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  min-width: min(520px, 100%);
}
.auth-scan-form input,
.auth-scan-form textarea,
.auth-scan-form select {
  width: 100%;
}

@media (max-width: 720px) {
  .inline-form, .row, .row.four, .row.five, .row.api-key-row, .row.rank-row, .row.admin-scan-row, .row.admin-target-row, .row.admin-user-row, .row.audit-row, .row.ops-row, .row.notice-row, .row.knowledge-row, .row.incident-row, .row.threat-intel-row, .row.threat-admin-row, .triage-form, .admin-create-grid, .notice-editor-grid, .subscription-form, .form-grid.two, .customer-contract-grid { grid-template-columns: 1fr; }
  .inline-form.admin-filter-form { grid-template-columns: 1fr; }
  .topbar { align-items: flex-start; }
  .customer-card-head { display: grid; }
  .customer-status-stack { justify-content: flex-start; }
}