:root {
  color-scheme: light;
  --bg: #edf0f5;
  --ink: #141922;
  --muted: #667085;
  --panel: #ffffff;
  --soft: #f7f9fc;
  --line: #d8dde8;
  --accent: #1959d1;
  --accent-2: #00856f;
  --ok: #0f8a5f;
  --warn: #b45309;
  --danger: #b42318;
  --shadow: 0 18px 45px rgba(20, 25, 34, 0.08);
}

* {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  min-width: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei",
    sans-serif;
  color: var(--ink);
  background: var(--bg);
}

button,
input,
select,
textarea {
  font: inherit;
  max-width: 100%;
}

button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  cursor: pointer;
  font-weight: 800;
}

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

button.secondary {
  background: #fff;
  color: var(--ink);
}

button.ghost {
  background: transparent;
  color: var(--accent);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px;
  overflow: auto;
  background: #121722;
  color: #fff;
}

.product {
  display: flex;
  gap: 12px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  margin-bottom: 30px;
}

.product span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  font-weight: 900;
}

.sidebar nav {
  display: grid;
  gap: 8px;
}

.nav-group {
  margin: 12px 0 2px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sidebar a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 8px;
}

.sidebar a:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.admin-main {
  padding: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

.topbar h1,
.panel h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: clamp(30px, 4vw, 46px);
}

.topbar-copy {
  max-width: 980px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.topbar-status span {
  min-width: 86px;
  color: var(--ok);
  font-weight: 900;
}

.panel {
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.setup-center,
.openclaw-autonomy,
.conversation-hub {
  border-color: #c7d7ef;
  background: #ffffff;
}

.setup-layout,
.conversation-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.25fr) minmax(280px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.control-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.control-hub-card {
  display: grid;
  gap: 8px;
  min-height: 168px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.control-hub-card.hero-card {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border-color: #c5d6f1;
}

.control-hub-card.ready {
  border-color: #cfe6da;
  background: #f8fffb;
}

.control-hub-card.attention {
  border-color: #f1c9a3;
  background: #fffaf2;
}

.control-hub-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.control-hub-card strong {
  font-size: 22px;
}

.control-hub-card p {
  color: var(--muted);
  line-height: 1.55;
}

.unified-setup-form,
.conversation-command-form,
.communication-bindings,
.setup-readiness {
  display: grid;
  gap: 14px;
}

.unified-setup-form textarea,
.communication-bindings textarea,
.conversation-command-form textarea {
  min-height: 220px;
  border-color: #cbd8eb;
  background: #fbfdff;
  line-height: 1.55;
}

.setup-help-grid,
.setup-readiness-board,
.communication-binding-board,
.conversation-summary {
  display: grid;
  gap: 10px;
}

.setup-help-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-help-grid article,
.setup-score-card,
.setup-readiness-item,
.communication-binding,
.conversation-summary article,
.autonomy-card {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.setup-help-grid strong,
.setup-score-card span,
.setup-readiness-item span,
.communication-binding span,
.conversation-summary span,
.autonomy-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.setup-help-grid span,
.setup-readiness-item p,
.communication-binding p,
.conversation-summary p,
.autonomy-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.setup-score-card {
  border-color: #b9cef0;
  background: #f4f8ff;
}

.setup-score-card strong {
  font-size: 30px;
}

.setup-readiness-item.ready,
.communication-binding.ready {
  border-color: rgba(15, 138, 95, 0.25);
  background: rgba(15, 138, 95, 0.07);
}

.setup-readiness-item.blocked {
  border-color: rgba(180, 83, 9, 0.25);
  background: #fff8ed;
}

.autonomy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.autonomy-card {
  align-content: start;
  min-height: 230px;
  background: #ffffff;
}

.autonomy-card.autonomy-overview {
  grid-column: 1 / -1;
  min-height: 0;
  border-color: #b9cef0;
  background: #f4f8ff;
}

.autonomy-card.autonomy-section-heading {
  grid-column: 1 / -1;
  min-height: 0;
  border-color: #c8d3e3;
  background: #f8fafc;
}

.autonomy-card.autonomy-overview strong {
  font-size: 30px;
}

.openclaw-control-tower {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.35fr 1.65fr;
  gap: 12px;
}

.control-tower-main,
.control-tower-next,
.control-tower-lane {
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 16px;
  border: 1px solid #c6d2e1;
  border-radius: 8px;
  background: #f8fbff;
}

.control-tower-main {
  min-height: 260px;
  border-color: #9fb6d8;
  background: #f4f8ff;
}

.control-tower-main span,
.control-tower-next span,
.control-tower-lane span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.control-tower-main strong {
  font-size: 32px;
  letter-spacing: 0;
}

.control-tower-next strong,
.control-tower-lane strong {
  font-size: 18px;
  letter-spacing: 0;
}

.control-tower-main p,
.control-tower-next p,
.control-tower-lane p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.control-tower-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.control-tower-lane {
  min-height: 120px;
  background: #ffffff;
}

.control-tower-lane.ready {
  border-color: rgba(15, 138, 95, 0.28);
  background: rgba(15, 138, 95, 0.06);
}

.control-tower-lane.attention {
  border-color: rgba(180, 83, 9, 0.3);
  background: #fff8ed;
}

.control-tower-next {
  grid-column: 1 / -1;
  min-height: 0;
  background: #fbfcff;
}

.openclaw-command-canvas {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.45fr repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.command-canvas-card {
  display: grid;
  gap: 9px;
  align-content: start;
  min-height: 186px;
  padding: 16px;
  border: 1px solid #c7d4ca;
  border-radius: 8px;
  background: #fbfffd;
}

.command-canvas-card.primary-canvas-card {
  grid-row: span 2;
  border-color: #9fb6d8;
  background: #f5f9ff;
}

.command-canvas-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.command-canvas-card strong {
  font-size: 20px;
  letter-spacing: 0;
}

.command-canvas-card.primary-canvas-card strong {
  font-size: 30px;
}

.command-canvas-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.business-closure-card {
  border-color: #d6deea;
  background: #ffffff;
}

.operating-stage-card {
  border-color: #abc4ea;
  background: #f7fbff;
}

.goal-route-card {
  min-height: 190px;
  border-color: #bfd6d0;
  background: #f7fffc;
}

.cycle-step-card {
  min-height: 190px;
  border-color: #c7c2ea;
  background: #fbfaff;
}

.cycle-run-card {
  min-height: 190px;
  border-color: #b9c7dc;
  background: #fbfdff;
}

.backlog-item-card {
  min-height: 210px;
  border-color: #d6c7a8;
  background: #fffdf7;
}

.evolution-memory-card {
  min-height: 205px;
  border-color: #b6d3c2;
  background: #f8fffb;
}

.delivery-run-card {
  min-height: 210px;
  border-color: #a8c7df;
  background: #f6fbff;
}

.site-blueprint-card {
  min-height: 220px;
  border-color: #a8d1df;
  background: #f5fcff;
}

.website-assembly-card {
  min-height: 220px;
  border-color: #b6d7b8;
  background: #f7fff8;
}

.content-production-card {
  min-height: 220px;
  border-color: #d1c4a8;
  background: #fffdf6;
}

.growth-feedback-card {
  min-height: 220px;
  border-color: #c1c7e8;
  background: #fbfbff;
}

.publish-readiness-card {
  min-height: 220px;
  border-color: #b9d2cf;
  background: #f7fffd;
}

.post-publish-optimization-card {
  min-height: 220px;
  border-color: #c8cfb6;
  background: #fcfff5;
}

.autonomous-scheduler-card {
  min-height: 220px;
  border-color: #c7b7d8;
  background: #fdf9ff;
}

.autonomous-qa-card {
  min-height: 220px;
  border-color: #b9c8d8;
  background: #f8fbff;
}

.outcome-ledger-card {
  min-height: 220px;
  border-color: #b8c7bd;
  background: #f7fcf8;
}

.growth-experiment-card {
  min-height: 220px;
  border-color: #c9b9bd;
  background: #fff8f8;
}

.autonomous-refresh-card {
  min-height: 220px;
  border-color: #b7c9c0;
  background: #f8fffb;
}

.signal-intelligence-card {
  min-height: 220px;
  border-color: #aebfd2;
  background: #f7fbff;
}

.decision-engine-card {
  min-height: 220px;
  border-color: #c2b8d1;
  background: #fcf9ff;
}

.execution-orchestrator-card {
  min-height: 220px;
  border-color: #b9c5d6;
  background: #f7faff;
}

.closure-verifier-card {
  min-height: 220px;
  border-color: #b8c8bc;
  background: #f8fff9;
}

.self-evolution-governor-card {
  min-height: 220px;
  border-color: #c7c1b1;
  background: #fffdf7;
}

.knowledge-graph-card {
  min-height: 220px;
  border-color: #adc7bb;
  background: #f7fffb;
}

.autonomous-runbook-card {
  min-height: 220px;
  border-color: #b9c0d6;
  background: #f8faff;
}

.work-order-card {
  min-height: 220px;
  border-color: #c5c9b6;
  background: #fcfff6;
}

.module-loop-runtime-card {
  min-height: 220px;
  border-color: #a9c4cb;
  background: #f5fcff;
}

.evidence-binder-card {
  min-height: 220px;
  border-color: #b7c7ac;
  background: #fbfff5;
}

.safe-execution-ledger-card {
  min-height: 220px;
  border-color: #b9b7cc;
  background: #faf9ff;
}

.controlled-promotion-card {
  min-height: 220px;
  border-color: #c2b8a5;
  background: #fffbf4;
}

.release-control-card {
  min-height: 220px;
  border-color: #b8c0a8;
  background: #fbfff4;
}

.operating-stage-card .button-row {
  align-self: end;
}

.business-closure-card.urgent,
.goal-route-card.urgent,
.cycle-step-card.urgent,
.cycle-run-card.urgent,
.backlog-item-card.urgent,
.evolution-memory-card.urgent,
.delivery-run-card.urgent,
.site-blueprint-card.urgent,
.website-assembly-card.urgent,
.content-production-card.urgent,
.growth-feedback-card.urgent,
.publish-readiness-card.urgent,
.post-publish-optimization-card.urgent,
.autonomous-scheduler-card.urgent,
.autonomous-qa-card.urgent,
.outcome-ledger-card.urgent,
.growth-experiment-card.urgent,
.autonomous-refresh-card.urgent,
.signal-intelligence-card.urgent,
.decision-engine-card.urgent,
.execution-orchestrator-card.urgent,
.closure-verifier-card.urgent,
.self-evolution-governor-card.urgent,
.knowledge-graph-card.urgent,
.autonomous-runbook-card.urgent,
.work-order-card.urgent,
.module-loop-runtime-card.urgent,
.evidence-binder-card.urgent,
.safe-execution-ledger-card.urgent,
.controlled-promotion-card.urgent,
.release-control-card.urgent,
.operating-stage-card.urgent,
.autonomy-card.urgent {
  border-color: rgba(180, 83, 9, 0.35);
  background: #fff8ed;
}

.business-closure-card .openclaw-mini-list {
  margin-top: 2px;
}

.conversation-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.diagnostics-entry {
  background: #f8fafc;
  box-shadow: none;
}

#modules,
#api-registry,
#capability-audit,
#execution-console,
#workbench,
#release-room,
#dataops,
#access-matrix,
#status {
  box-shadow: none;
}

.muted {
  color: var(--muted);
  line-height: 1.6;
}

.login-panel {
  display: grid;
  grid-template-columns: 0.72fr 1.16fr 0.92fr;
  gap: 18px;
  align-items: start;
}

.login-form,
.config-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

textarea {
  min-height: 120px;
  padding: 12px;
  resize: vertical;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-row input {
  width: 18px;
  min-height: 18px;
}

.check-row span {
  margin: 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 10px;
}

.button-row > * {
  min-width: 0;
}

.button-row.compact {
  justify-content: flex-end;
}

.session-card,
.config-result,
.result-box {
  min-height: 120px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  line-height: 1.6;
}

.result-box {
  max-height: 420px;
  overflow: auto;
  color: #243041;
}

.result-box pre {
  margin: 0;
  white-space: pre-wrap;
}

.result-meta {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #f0d28a;
  border-radius: 8px;
  background: #fff8e8;
  color: #61420f;
}

.result-meta.blocked {
  border-color: #f5b8b2;
  background: #fff1f0;
  color: #84251e;
}

.result-meta strong {
  color: #3f2a08;
}

.result-meta code {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  background: #fff;
}

.batch-result-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.path-panel {
  border-color: #c6d5f0;
  background: linear-gradient(180deg, #fdfefe 0%, #f7faff 100%);
}

.path-grid article {
  min-height: 172px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.path-grid article:first-child {
  border-color: #c1d0ec;
  background: #f6f9ff;
}

.path-grid article:nth-child(2) {
  border-color: #c8e4d4;
  background: #f7fffb;
}

.path-grid article:nth-child(3) {
  border-color: #f0d4b8;
  background: #fffaf4;
}

.path-grid small {
  color: var(--accent);
  font-weight: 900;
}

.path-grid h3 {
  margin: 14px 0 8px;
}

.diagnostics-panel {
  border-style: dashed;
  background: #fcfdff;
}

.diagnostics-panel .panel-head h2 {
  font-size: 22px;
}

.path-grid p,
.status-list p,
.module-card p,
.module-detail p,
.config-grid p,
.overview-grid p {
  color: var(--muted);
  line-height: 1.55;
}

.path-action {
  align-self: end;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0 11px;
  border: 1px solid #c9d5ea;
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.path-action:hover {
  border-color: var(--accent);
  background: #f2f7ff;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.metric-grid.wide {
  grid-template-columns: repeat(6, 1fr);
  margin-top: 0;
}

.metric-grid div,
.overview-grid article,
.status-list article,
.coverage-strip article,
.config-grid article,
.module-card,
.module-detail,
.endpoint-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  padding: 16px;
}

.metric-grid span,
.status-list span,
.overview-grid span,
.coverage-strip span,
.config-grid span,
.module-card span,
.endpoint-list span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.metric-grid strong,
.overview-grid strong {
  font-size: 30px;
}

.overview-grid,
.coverage-strip,
.config-grid,
.status-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.coverage-strip {
  grid-template-columns: repeat(4, 1fr);
}

.pill,
.tag,
.status-chip {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-weight: 800;
}

.tag {
  min-height: 26px;
  font-size: 12px;
}

.status-chip.ready,
.tag.ready {
  border-color: rgba(15, 138, 95, 0.25);
  background: rgba(15, 138, 95, 0.08);
  color: var(--ok);
}

.status-chip.blocked,
.tag.blocked {
  border-color: rgba(180, 83, 9, 0.28);
  background: rgba(180, 83, 9, 0.08);
  color: var(--warn);
}

.status-chip.danger,
.tag.danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: rgba(180, 35, 24, 0.08);
  color: var(--danger);
}

.control-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px);
  gap: 10px;
  width: min(680px, 100%);
}

.inline-control {
  min-width: 0;
}

.inline-control span {
  margin-bottom: 4px;
}

.control-row.slim {
  grid-template-columns: minmax(160px, 240px);
  width: auto;
}

.command-grid,
.action-queue-grid,
.lifecycle-grid,
.release-grid,
.commercial-grid,
.dataops-grid,
.access-grid {
  display: grid;
  gap: 12px;
}

.command-grid {
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
}

.action-queue-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lifecycle-grid {
  grid-template-columns: repeat(6, 1fr);
}

.release-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.commercial-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dataops-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.access-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.command-card,
.action-queue-card,
.business-action-card,
.lifecycle-card,
.release-card,
.commercial-card,
.dataops-card,
.access-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  padding: 16px;
}

.command-card h3,
.action-queue-card h3,
.business-action-card h3,
.lifecycle-card h3,
.release-card h3,
.commercial-card h3,
.dataops-card h3,
.access-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.command-card strong,
.action-queue-card strong,
.business-action-card strong,
.release-card strong,
.commercial-card strong,
.dataops-card strong,
.access-card strong {
  font-size: 28px;
}

.command-card p,
.action-queue-card p,
.business-action-card p,
.lifecycle-card p,
.release-card p,
.commercial-card p,
.dataops-card p,
.access-card p {
  color: var(--muted);
  line-height: 1.55;
}

.business-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.business-action-card {
  display: grid;
  gap: 10px;
  align-content: start;
  background: #ffffff;
}

.business-action-card.blocked {
  border-color: #fecaca;
  background: #fff8f7;
}

.business-action-summary {
  grid-column: 1 / -1;
  background: #f8fbff;
}

.business-action-checklist {
  display: grid;
  gap: 6px;
}

.business-action-checklist span {
  display: block;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.command-list,
.action-queue-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.queue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.queue-row b {
  display: block;
  margin-bottom: 3px;
}

.queue-row small {
  color: var(--muted);
}

.lifecycle-card {
  min-height: 190px;
}

.lifecycle-card small {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--accent);
  font-weight: 900;
}

.release-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.audit-grid,
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.audit-card,
.scenario-card,
.commercial-card,
.dataops-card,
.access-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.wide-card {
  grid-column: 1 / -1;
}

.scenario-card {
  min-height: 320px;
}

.scenario-steps {
  display: grid;
  gap: 8px;
}

.scenario-step {
  display: grid;
  grid-template-columns: 54px minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  text-align: left;
  background: #fff;
}

.scenario-step b {
  color: var(--accent);
  font-size: 12px;
}

.scenario-step code {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.registry-table {
  display: grid;
  gap: 8px;
}

.registry-row {
  display: grid;
  grid-template-columns: 86px minmax(220px, 1fr) 180px 130px auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.registry-row code {
  overflow-wrap: anywhere;
}

.risk-read {
  color: var(--accent);
}

.risk-safe-action {
  color: var(--accent-2);
}

.risk-write {
  color: var(--warn);
}

.risk-production {
  color: var(--danger);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.module-card {
  display: grid;
  gap: 12px;
  min-height: 252px;
  align-content: start;
}

.module-card.is-active {
  border-color: rgba(25, 89, 209, 0.55);
  box-shadow: 0 0 0 3px rgba(25, 89, 209, 0.1);
}

.module-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.module-title h3,
.module-detail h3 {
  margin: 0;
  font-size: 18px;
}

.module-meta,
.endpoint-tags,
.module-actions,
.module-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.module-actions button,
.module-quick-actions button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.module-quick-actions {
  align-items: center;
  padding-top: 2px;
}

.module-quick-actions.compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module-card > .module-actions {
  display: none;
}

.module-dependency-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.module-dependency-strip article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.module-dependency-strip span {
  color: var(--muted);
  font-size: 12px;
}

.module-dependency-strip strong,
.module-dependency-strip code {
  overflow-wrap: anywhere;
}

.module-capability-ledger {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.capability-ledger-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) repeat(5, minmax(92px, 0.7fr)) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.capability-ledger-row.compact {
  grid-template-columns: minmax(160px, 1.4fr) repeat(4, minmax(90px, 0.7fr));
}

.evidence-ledger {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.verified-operation-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  overflow: hidden;
}

.verified-operation-row summary {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) repeat(3, minmax(100px, 0.7fr)) minmax(90px, 0.45fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
}

.verified-operation-row summary::marker {
  color: var(--accent);
}

.verified-operation-row summary button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.evidence-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.evidence-detail-grid section {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.evidence-detail-grid h4,
.evidence-detail-grid p {
  margin: 0;
}

.evidence-detail-row {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 6px;
  background: #f6f8fb;
}

.evidence-detail-row.blocked {
  background: #fff4f2;
  color: var(--danger);
}

.evidence-detail-row b,
.evidence-detail-row code,
.evidence-detail-row span {
  overflow-wrap: anywhere;
}

.evidence-detail-row span {
  color: var(--muted);
  font-size: 12px;
}

.capability-ledger-row strong,
.capability-ledger-row code {
  overflow-wrap: anywhere;
}

.capability-ledger-row span {
  color: var(--muted);
  font-size: 12px;
}

.data-keys {
  display: grid;
  gap: 6px;
}

.data-keys code,
.endpoint-row code,
.module-detail code {
  padding: 2px 6px;
  border-radius: 6px;
  background: #eef2f7;
  color: #2b3648;
  font-size: 12px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.workbench-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: 12px;
  margin-bottom: 12px;
}

.endpoint-list {
  max-height: 440px;
  overflow: auto;
}

.endpoint-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.endpoint-row:last-child {
  border-bottom: 0;
}

.operation-history {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.operation-history-head,
.operation-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
}

.operation-history-head span,
.operation-history-row span,
.operation-history-row time {
  color: var(--muted);
  font-size: 12px;
}

.operation-history-list {
  display: grid;
  gap: 8px;
}

.operation-history-row {
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.1fr) minmax(120px, 0.7fr) auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.operation-history-row.blocked {
  border-color: #fecaca;
  background: #fff7f7;
}

.openclaw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.openclaw-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.openclaw-card.blocked,
.openclaw-row.blocked,
.openclaw-output-row.blocked {
  border-color: #fecaca;
  background: #fff7f7;
}

.openclaw-module-grid,
.openclaw-playbook-grid,
.openclaw-workbench-grid,
.openclaw-assignee-grid,
.openclaw-interaction-grid,
.openclaw-mission-grid,
.openclaw-pipeline-grid,
.openclaw-routing-grid,
.openclaw-team-room-grid,
.openclaw-review-board-grid,
.openclaw-sla-grid,
.openclaw-inbox-grid,
.openclaw-collaboration-list,
.openclaw-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.openclaw-module-grid,
.openclaw-playbook-grid,
.openclaw-workbench-grid,
.openclaw-assignee-grid,
.openclaw-interaction-grid,
.openclaw-mission-grid,
.openclaw-pipeline-grid,
.openclaw-routing-grid,
.openclaw-team-room-grid,
.openclaw-review-board-grid,
.openclaw-sla-grid,
.openclaw-inbox-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.openclaw-command-grid,
.openclaw-conversation-shell {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
  min-width: 0;
}

.openclaw-command-grid .wide-field,
.openclaw-dialog textarea {
  min-width: 0;
}

.openclaw-thread-list,
.openclaw-thread-messages,
.openclaw-output-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.openclaw-row {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
  overflow: hidden;
}

.openclaw-row.as-button {
  width: 100%;
  height: auto;
  min-height: 0;
  text-align: left;
  color: var(--ink);
  background: #fff;
}

.openclaw-row.as-button.selected {
  border-color: var(--accent);
  background: #eef5ff;
}

.openclaw-message,
.openclaw-workbench-action,
.openclaw-assignee-card,
.openclaw-team-room,
.openclaw-review-item,
.openclaw-sla-item,
.openclaw-inbox-item,
.openclaw-playbook,
.openclaw-output-row {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.openclaw-message.user {
  background: #f8fafc;
}

.openclaw-message.assistant {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.openclaw-output-row {
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 0.8fr) minmax(0, 1.4fr) auto;
  align-items: center;
}

.openclaw-playbook {
  align-content: start;
  background: #fbfcff;
}

.openclaw-playbook.blocked {
  border-color: #fed7aa;
  background: #fff7ed;
}

.openclaw-workbench-action {
  align-content: start;
  background: #fbfcff;
}

.openclaw-workbench-action.urgent,
.openclaw-assignee-card.urgent,
.openclaw-mission-item.urgent,
.openclaw-pipeline-item.urgent,
.openclaw-routing-item.urgent,
.openclaw-team-room.urgent,
.openclaw-review-item.urgent,
.openclaw-sla-item.urgent,
.openclaw-inbox-item.urgent {
  border-color: #fecaca;
  background: #fff7f7;
}

.openclaw-assignee-card {
  align-content: start;
  background: #fff;
}

.openclaw-team-room {
  align-content: start;
  background: #fbfcff;
}

.openclaw-review-item {
  align-content: start;
  background: #fff;
}

.openclaw-sla-item {
  align-content: start;
  background: #fff;
}

.openclaw-inbox-item {
  align-content: start;
  background: #fff;
}

.openclaw-mission-item {
  align-content: start;
  background: #fff;
}

.openclaw-pipeline-item {
  align-content: start;
  background: #fff;
}

.openclaw-routing-item {
  align-content: start;
  background: #fff;
}

.openclaw-mini-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.openclaw-mini-action {
  display: grid;
  gap: 3px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: left;
  color: var(--ink);
  background: #fbfcff;
}

.openclaw-mini-action.blocked {
  border-color: #fecaca;
  background: #fff7f7;
}

.compact-title h3 {
  font-size: 15px;
  line-height: 1.25;
}

.openclaw-collaboration-actions {
  margin-top: -6px;
  padding: 0 2px 6px;
}

.openclaw-result {
  margin-top: 12px;
}

.admin-main,
.topbar,
.panel,
.panel-head,
.setup-layout,
.setup-help-grid,
.setup-readiness-board,
.autonomy-grid,
.conversation-layout,
.communication-binding-board,
.conversation-summary,
.metric-grid,
.overview-grid,
.command-grid,
.business-action-grid,
.commercial-grid,
.action-queue-grid,
.lifecycle-grid,
.path-grid,
.module-grid,
.registry-table,
.audit-grid,
.scenario-grid,
.workbench-grid,
.module-dependency-strip,
.release-grid,
.dataops-grid,
.access-grid,
.config-grid,
.status-list,
.openclaw-grid,
.openclaw-module-grid,
.openclaw-playbook-grid,
.openclaw-workbench-grid,
.openclaw-assignee-grid,
.openclaw-interaction-grid,
.openclaw-mission-grid,
.openclaw-pipeline-grid,
.openclaw-routing-grid,
.openclaw-team-room-grid,
.openclaw-review-board-grid,
.openclaw-sla-grid,
.openclaw-inbox-grid,
.openclaw-collaboration-list,
.openclaw-card,
.openclaw-row,
.openclaw-command-grid,
.openclaw-conversation-shell,
.openclaw-thread-list,
.openclaw-thread-messages,
.openclaw-message,
.openclaw-workbench-action,
.openclaw-assignee-card,
.openclaw-team-room,
.openclaw-review-item,
.openclaw-sla-item,
.openclaw-inbox-item,
.openclaw-playbook,
.openclaw-output-row,
.capability-ledger-row,
.verified-operation-row,
.verified-operation-row summary,
.result-meta,
.scenario-card,
.module-card,
.module-detail,
.audit-card,
.endpoint-row,
.operation-history-row {
  min-width: 0;
}

.topbar-copy,
.panel p,
.setup-layout,
.setup-help-grid,
.setup-readiness-board,
.autonomy-grid,
.conversation-layout,
.communication-binding-board,
.conversation-summary,
.autonomy-card,
.setup-readiness-item,
.communication-binding,
.module-card,
.module-detail,
.scenario-card,
.audit-card,
.result-box,
.result-box pre,
.registry-row,
.registry-row code,
.result-meta,
.result-meta code,
.operation-history-row,
.openclaw-card,
.openclaw-row,
.openclaw-message,
.openclaw-workbench-action,
.openclaw-assignee-card,
.openclaw-team-room,
.openclaw-review-item,
.openclaw-mini-action,
.openclaw-playbook,
.openclaw-output-row,
.openclaw-card code,
.openclaw-row code,
.openclaw-message code,
.openclaw-workbench-action code,
.openclaw-assignee-card code,
.openclaw-team-room code,
.openclaw-review-item code,
.openclaw-playbook code,
.openclaw-output-row code,
.operation-history-row code,
.capability-ledger-row,
.verified-operation-row,
.evidence-detail-row,
.endpoint-row {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.result-meta,
.registry-row,
.capability-ledger-row,
.verified-operation-row summary,
.operation-history-row,
.endpoint-row {
  overflow: hidden;
}

.method {
  display: inline-flex;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: #e8eefc;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.method.post,
.method.patch,
.method.put {
  background: #e8f7f3;
  color: var(--accent-2);
}

.method.delete {
  background: #fef3f2;
  color: var(--danger);
}

@media (max-width: 1240px) {
  .admin-shell,
  .login-panel,
  .setup-layout,
  .conversation-layout,
  .autonomy-grid,
  .openclaw-control-tower,
  .openclaw-command-canvas,
  .conversation-summary,
  .control-hub-grid,
  .path-grid,
  .module-grid,
  .workbench-grid,
  .metric-grid.wide,
  .coverage-strip,
  .command-grid,
  .business-action-grid,
  .action-queue-grid,
  .lifecycle-grid,
  .release-grid,
  .commercial-grid,
  .dataops-grid,
  .access-grid,
  .audit-grid,
  .scenario-grid,
  .registry-row {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .sidebar nav {
    grid-template-columns: repeat(4, 1fr);
  }

  .openclaw-grid,
  .openclaw-module-grid,
  .openclaw-playbook-grid,
  .openclaw-workbench-grid,
  .openclaw-assignee-grid,
  .openclaw-interaction-grid,
  .openclaw-mission-grid,
  .openclaw-pipeline-grid,
  .openclaw-routing-grid,
  .openclaw-team-room-grid,
  .openclaw-review-board-grid,
  .openclaw-sla-grid,
  .openclaw-inbox-grid,
  .openclaw-command-grid,
  .openclaw-conversation-shell,
  .openclaw-output-row {
    grid-template-columns: 1fr;
  }

  .control-tower-lanes {
    grid-template-columns: 1fr;
  }

  .command-canvas-card.primary-canvas-card {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .admin-main {
    padding: 16px;
  }

  .topbar,
  .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .login-form,
  .config-form,
  .setup-help-grid,
  .metric-grid,
  .overview-grid,
  .config-grid,
  .status-list,
  .sidebar nav,
  .control-row,
  .endpoint-row,
  .scenario-step,
  .operation-history-row,
  .capability-ledger-row,
  .verified-operation-row summary,
  .evidence-detail-grid,
  .module-dependency-strip,
  .module-quick-actions.compact {
    grid-template-columns: 1fr;
  }
}

/* ── Domain & SSL Management ─────────────────────────────────────────── */

#domain-ssl,
#firewall {
  border-color: #c7d0e5;
}

.domain-add-form {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #d2dae8;
  border-radius: 8px;
  background: #f8faff;
}

.domain-add-form h3,
.firewall-rules-section h3,
.crowdsec-section h3,
.firewall-events-section h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 900;
}

.domain-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.domain-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.2s;
}

.domain-card:hover {
  border-color: var(--accent);
}

.domain-card .domain-info {
  display: grid;
  gap: 4px;
}

.domain-card .domain-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.domain-card .domain-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.domain-card .domain-actions {
  display: flex;
  gap: 6px;
}

.domain-card .domain-actions button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.dns-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dns-badge.verified { background: rgba(15,138,95,0.12); color: var(--ok); }
.dns-badge.pending  { background: rgba(180,83,9,0.12); color: var(--warn); }
.dns-badge.failed   { background: rgba(180,35,24,0.12); color: var(--danger); }

.default-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(25,89,209,0.12);
  color: var(--accent);
}

.ssl-status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.ssl-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ssl-summary-item {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.ssl-summary-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ssl-summary-item strong {
  font-size: 22px;
}

.ssl-cert-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ssl-cert-card .cert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ssl-cert-card .cert-domain {
  font-size: 15px;
  font-weight: 800;
}

.ssl-cert-card .cert-meta {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ssl-cert-card .cert-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.ssl-cert-card .cert-actions button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.cert-status {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.cert-status.active  { background: rgba(15,138,95,0.12); color: var(--ok); }
.cert-status.pending { background: rgba(180,83,9,0.12); color: var(--warn); }
.cert-status.failed  { background: rgba(180,35,24,0.12); color: var(--danger); }
.cert-status.expired { background: rgba(180,35,24,0.12); color: var(--danger); }

.nginx-status-box {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.nginx-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.nginx-status-item {
  display: grid;
  gap: 3px;
}

.nginx-status-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.nginx-status-item strong {
  font-size: 15px;
}

/* ── Firewall & Security ─────────────────────────────────────────────── */

.security-dashboard {
  display: grid;
  grid-template-columns: 0.6fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.threat-level-card {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}

.threat-level-card.low    { border-color: rgba(15,138,95,0.3); background: rgba(15,138,95,0.06); }
.threat-level-card.medium { border-color: rgba(180,83,9,0.3); background: #fff8ed; }
.threat-level-card.high   { border-color: rgba(180,35,24,0.3); background: rgba(180,35,24,0.06); }

.threat-level-card .threat-label {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--muted);
}

.threat-level-card .threat-score {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.threat-level-card.low .threat-score    { color: var(--ok); }
.threat-level-card.medium .threat-score { color: var(--warn); }
.threat-level-card.high .threat-score   { color: var(--danger); }

.security-stat-grid {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.security-stat-grid .stat-title {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.security-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #edf0f5;
  font-size: 13px;
}

.security-stat-row:last-child {
  border-bottom: none;
}

.security-stat-row strong {
  font-size: 15px;
}

.security-recommendations {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.recommendation-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
}

.recommendation-item.critical { background: rgba(180,35,24,0.08); }
.recommendation-item.high     { background: rgba(180,83,9,0.08); }
.recommendation-item.medium   { background: rgba(25,89,209,0.08); }

.recommendation-item .rec-priority {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.recommendation-item.critical .rec-priority { background: rgba(180,35,24,0.15); color: var(--danger); }
.recommendation-item.high .rec-priority     { background: rgba(180,83,9,0.15); color: var(--warn); }
.recommendation-item.medium .rec-priority   { background: rgba(25,89,209,0.15); color: var(--accent); }

.firewall-rules-section {
  margin-bottom: 18px;
}

.firewall-rules-table {
  display: grid;
  gap: 6px;
}

.firewall-rule-row {
  display: grid;
  grid-template-columns: 60px 80px 70px 80px 120px 1fr 80px auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  transition: border-color 0.15s;
}

.firewall-rule-row:hover {
  border-color: var(--accent);
}

.firewall-rule-row.header {
  background: #f4f6fb;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  border-color: transparent;
}

.firewall-rule-row .rule-action-badge {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.rule-action-badge.accept { background: rgba(15,138,95,0.12); color: var(--ok); }
.rule-action-badge.drop   { background: rgba(180,35,24,0.12); color: var(--danger); }
.rule-action-badge.reject { background: rgba(180,83,9,0.12); color: var(--warn); }

.firewall-rule-row .rule-ops {
  display: flex;
  gap: 4px;
}

.firewall-rule-row .rule-ops button {
  min-height: 28px;
  min-width: 28px;
  padding: 0 6px;
  font-size: 11px;
}

.crowdsec-section {
  margin-bottom: 18px;
}

.crowdsec-status {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.crowdsec-stat {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcff;
}

.crowdsec-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.crowdsec-stat strong {
  font-size: 18px;
}

.crowdsec-decisions {
  display: grid;
  gap: 6px;
}

.crowdsec-decision-row {
  display: grid;
  grid-template-columns: 140px 80px 100px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
}

.crowdsec-decision-row .decision-ops button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

.firewall-events-section {
  margin-top: 18px;
}

.firewall-events {
  display: grid;
  gap: 5px;
  max-height: 400px;
  overflow-y: auto;
}

.firewall-event-row {
  display: grid;
  grid-template-columns: 160px 120px 80px 80px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #edf0f5;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  color: var(--muted);
}

.firewall-event-row .event-type {
  font-weight: 800;
  color: var(--ink);
}