/* ══════════════════════════════════════
   LLM Wiki — Sharp Print overrides
   基础样式由 /shared/sharp-print-apps.css 提供
   ══════════════════════════════════════ */

/* ── Layout ── */
#app { max-width: 1200px; margin: 0 auto; }
.app-main { padding-top: 24px; }

/* ── Status dot ── */
.status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.status.online { background: #16a34a; }
.status.offline { background: #dc2626; }

/* ── Form rows ── */
.row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.row input, .row select { flex: auto; }

/* ── Result area ── */
.result { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border-subtle); font-size: .8rem; color: var(--text-2); min-height: 20px; }
.result:empty { display: none; }
.result .error { color: #c42e2e; }
.result .success { color: #1a7d3a; }
.result .loading { color: var(--text-3); }

/* ── Topic groups (browse) ── */
.topic-group { margin-bottom: 16px; }
.topic-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; cursor: pointer; font-size: .8rem; font-weight: 700;
  border-bottom: 2px solid var(--border); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .06em;
}
.topic-header:hover { background: var(--border-ghost); }
.topic-count { font-size: .65rem; color: var(--text-3); font-weight: 400; }
.topic-pages { margin-left: 8px; }

/* ── Page content (Markdown rendered) ── */
.page-detail { padding: 12px 0; font-size: .88rem; line-height: 1.8; color: var(--text-2); }
.page-detail h1 { font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 1em 0 .4em; }
.page-detail h2 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 1.2em 0 .3em; text-transform: uppercase; letter-spacing: .04em; }
.page-detail h3 { font-size: .95rem; font-weight: 700; color: var(--text); margin: 1em 0 .3em; }
.page-detail p { margin-bottom: .8em; }
.page-detail a { color: var(--text); text-decoration: underline; }
.page-detail li { margin-bottom: .3em; }
.page-detail code { font-family: var(--mono); background: var(--border-ghost); padding: 1px 4px; font-size: .85em; }
.page-detail pre { background: var(--border-ghost); padding: 14px; font-family: var(--mono); font-size: .75rem; overflow-x: auto; }

/* ── Delete button ── */
.btn-delete { background: none; border: 1px solid #dc2626; color: #dc2626; cursor: pointer; font-size: .65rem; padding: 2px 8px; text-transform: uppercase; letter-spacing: .05em; font-family: var(--font); }
.btn-delete:hover { background: #fef2f2; }

/* ── Lint results ── */
.lint-item { padding: 6px 0; font-size: .78rem; border-bottom: 1px solid var(--border-ghost); }
.lint-error { color: #c42e2e; }
.lint-warning { color: #b85c10; }
.lint-info { color: var(--text-3); }

/* ── Log ── */
.log-block { background: var(--border-ghost); font-family: var(--mono); font-size: .72rem; padding: 14px; line-height: 1.7; max-height: 300px; overflow-y: auto; white-space: pre-wrap; color: var(--text-2); }

/* ── D3 Knowledge Graph ── */
#graph-container { position: relative; width: 100%; height: 500px; border: 1px solid var(--border-subtle); background: var(--border-ghost); }
#graph-container svg { width: 100%; height: 100%; }
#graph-detail { position: absolute; top: 0; right: 0; width: 340px; height: 100%; background: var(--bg); border-left: 2px solid var(--border); padding: 20px; overflow-y: auto; display: none; z-index: 10; }
#graph-detail.open { display: block; }
#graph-detail h3 { font-size: .9rem; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
#graph-detail .close-btn { position: absolute; top: 10px; right: 10px; background: none; border: 1px solid var(--border); cursor: pointer; font-size: .8rem; width: 28px; height: 28px; font-family: var(--font); display: flex; align-items: center; justify-content: center; }
#graph-detail .close-btn:hover { background: var(--text); color: var(--bg); }
.graph-loading, .graph-empty, .graph-error { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: .8rem; color: var(--text-3); }
.graph-node { cursor: pointer; }
.graph-link { stroke: #ccc; stroke-opacity: .6; }
.graph-label { font-size: 10px; font-family: var(--font); fill: var(--text-2); pointer-events: none; }