:root {
  --bg: #0b1220;
  --panel: #111a2e;
  --panel-2: #0f1729;
  --text: #e6edf7;
  --muted: #94a3b8;
  --brand: #3b82f6;
  --brand-2: #60a5fa;
  --border: #1f2a44;
  --ok: #16a34a;
  --warn: #f59e0b;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Inter, Segoe UI, Arial, sans-serif; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: #0c1425f0;
  backdrop-filter: blur(6px);
}

h1 { margin: 0; font-size: 1.4rem; }
.subtitle { margin: 4px 0 0; color: var(--muted); font-size: 0.92rem; }

.top-actions { display: flex; gap: 10px; align-items: center; }
.top-actions input {
  width: 320px;
  max-width: 48vw;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.btn {
  display: inline-block;
  text-decoration: none;
  color: white;
  background: var(--brand);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
}

.layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.sidebar {
  position: sticky;
  top: 84px;
  align-self: start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.sidebar h2 { margin: 0 0 10px; font-size: 1.05rem; }
.sidebar nav { display: grid; gap: 8px; }
.sidebar a {
  color: #cfe0ff;
  text-decoration: none;
  font-size: 0.92rem;
  border-left: 3px solid transparent;
  padding: 4px 8px;
}
.sidebar a.active { border-left-color: var(--brand); background: #0f1e3c; border-radius: 6px; }

.content { display: grid; gap: 14px; }
.doc-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
}

.doc-block h2 { margin-top: 0; font-size: 1.2rem; }
.doc-block h3 { margin-bottom: 8px; font-size: 1rem; color: #cfe0ff; }
.doc-block p, .doc-block li { color: #d7e2f3; line-height: 1.45; }
.doc-block ul, .doc-block ol { margin: 8px 0 0 20px; }

.callout {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #22406f;
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  background: #0d1830;
  color: #d9e7fb;
  line-height: 1.5;
}

.callout strong {
  color: #ffffff;
}

.note-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.note-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #0d1630, #0d172a);
}

.note-card strong {
  color: #ffffff;
  font-size: 0.95rem;
}

.note-card span {
  color: #c9d7ee;
  line-height: 1.45;
  font-size: 0.92rem;
}

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

.diagram-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.diagram-grid.single-column {
  grid-template-columns: 1fr;
}

.diagram-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0d162b;
  padding: 14px;
}

.diagram-card h3 {
  margin-top: 0;
}

.diagram-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.94rem;
}

.module-map,
.module-diagram {
  display: grid;
  gap: 16px;
}

.context-map {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr);
  align-items: stretch;
}

.module-stage,
.module-col,
.entity-card {
  border: 1px solid #27406c;
  border-radius: 12px;
  background: linear-gradient(180deg, #10203c, #0c172e);
  padding: 14px;
}

.module-stage h4,
.module-col h4 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 1rem;
}

.module-arrow,
.flow-arrow {
  color: #8fc0ff;
  font-weight: 800;
  font-size: 1.3rem;
  align-self: center;
  justify-self: center;
}

.node-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.node {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.98rem;
  line-height: 1.35;
  color: #f8fbff;
}

.node.actor {
  background: #182744;
  border-color: #3b82f6;
}

.node.process {
  background: #1d2547;
  border-color: #7c9cff;
}

.node.api {
  background: #183145;
  border-color: #38bdf8;
}

.node.data {
  background: #1b2f27;
  border-color: #34d399;
}

.module-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  padding: 14px;
  border: 1px solid #27406c;
  border-radius: 12px;
  background: linear-gradient(180deg, #0b1428, #0f1a30);
}

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

.module-col ul,
.entity-module ul {
  margin: 0;
  padding-left: 18px;
}

.module-col li,
.relation-list li {
  line-height: 1.5;
  margin-bottom: 6px;
}

.entity-module {
  display: grid;
  gap: 14px;
}

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

.entity-card {
  display: grid;
  gap: 6px;
}

.entity-card strong {
  color: #ffffff;
  font-size: 0.98rem;
}

.entity-card span {
  color: #d9e7fb;
  line-height: 1.4;
}

.relation-list {
  margin: 0;
  padding: 14px 18px 10px 34px;
  border: 1px solid #27406c;
  border-radius: 12px;
  background: linear-gradient(180deg, #0b1428, #0f1a30);
}

.data-table-wrap {
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.data-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: #0d162b;
}

.data-table.compact {
  min-width: 760px;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.data-table th:last-child,
.data-table td:last-child {
  border-right: 0;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #132241;
  color: #f8fbff;
}

.data-table tbody tr:nth-child(even) {
  background: #0f1a31;
}

.data-table tbody tr:hover {
  background: #11203c;
}

pre {
  background: #0c1425;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  overflow: auto;
}
code { color: #a5c7ff; }

.footer {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding: 16px 20px 24px;
  color: var(--muted);
}

.hidden-by-search { display: none; }

@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; top: auto; }
  .grid-2 { grid-template-columns: 1fr; }
  .diagram-grid { grid-template-columns: 1fr; }
  .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-map { grid-template-columns: 1fr; }
  .module-arrow { display: none; }
  .module-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entity-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .note-grid { grid-template-columns: 1fr; }
  .top-actions { flex-wrap: wrap; }
  .top-actions input { width: 100%; max-width: none; }
  .module-columns { grid-template-columns: 1fr; }
  .entity-cards { grid-template-columns: 1fr; }
  .module-flow { align-items: flex-start; }
}