* { box-sizing:border-box; margin:0; padding:0; }
html, body {
  background-attachment: fixed;
  background-color: #ffffff;
  background-image: radial-gradient(#ffeede 1.35px, transparent 0);
  background-size: 15px 15px;
  color: #404040;
  font-size: 14px;
  line-height: 1.4;
  font-family:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color:#C87A3C; text-decoration:none; }
a:hover { text-decoration:underline; }
code, pre { font-family:"SF Mono",Consolas,"Liberation Mono",monospace; }

:root {
  --bg:#fff; --sidebar-bg:#fff; --content-bg:#fff;
  --border:#e3e3e3; --text:#222; --muted:#888; --accent:#C87A3C;
  --hover:#fafafa; --active-bg:#FDF3EA; --active-border:#C87A3C;
  --ok-bg:#e8f4ec; --ok-text:#1a7a3c;
  --warn-bg:#fbe3e4; --warn-text:#c0392b;
  --info-bg:#FDF3EA; --info-text:#9A5020;
}

/* CONTENT area */
.pf-content {
  flex:1;
  overflow-y:auto;
}

/* Panel inner styles */
.panel-title { font-size:18px; font-weight:600; color:#333; margin-bottom:18px; }
.panel-section { margin-bottom:22px; }
.panel-section-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#888; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.panel-section-title::after { content:""; flex:1; height:1px; background:#e6e6e6; }
.card-grid { display: flow; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:16px; }
.card { background:#f8f8f8; border:1px solid var(--border); border-radius:4px; padding: 12px 16px; margin-bottom: 7px; }
.card-title { font-size:13px; color:var(--muted); margin-bottom:4px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.card-value { font-size:14px; color:#333; }
.card-empty { color:var(--muted); font-style:italic; font-size:14px; }
.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th { background:#f5f5f5; padding:9px 13px; text-align:left; font-size:11px; font-weight:700; color:#666; border-bottom:1px solid #e6e6e6; text-transform:uppercase; letter-spacing:.4px; }
.data-table td { padding:9px 13px; border-bottom:1px solid #ececec; vertical-align:top; }
.data-table tr:hover td { background:#fafafa; }
.data-table tr:last-child td { border-bottom:none; }
.data-table .key-col { color:#555; font-family:monospace; font-size:13px; white-space:nowrap; width:240px; }
.data-table .val-col { color:#333; font-family:monospace; font-size:13px; word-break:break-all; }
.table-wrap { background:#fff; border:1px solid #e6e6e6; border-radius:4px; overflow:hidden; margin-bottom:18px; }
.table-wrap-title { background:#f5f5f5; padding:10px 14px; font-size:13px; font-weight:600; color:#444; border-bottom:1px solid #e6e6e6; display:flex; align-items:center; gap:10px; }
.table-search { margin-left:auto; background:#fff; border:1px solid #d0d0d0; color:#333; padding:3px 8px; border-radius:3px; font-size:12px; outline:none; font-family:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; }
.table-search:focus { border-color:#C87A3C; }
.sql-block { padding:11px 14px; border-bottom:1px solid #ececec; }
.sql-block:last-child { border-bottom:none; }
.sql-meta { display:flex; gap:8px; margin-bottom:5px; align-items:center; }
.sql-type { font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; text-transform:uppercase; }
.sql-type-SELECT{background:#FDF3EA;color:#9A5020} .sql-type-INSERT{background:#e8f4ec;color:#1a7a3c}
.sql-type-UPDATE{background:#FEF9E7;color:#7D6608} .sql-type-DELETE{background:#fbe3e4;color:#c0392b} .sql-type-OTHER{background:#f0f0f0;color:#666}
.sql-duration { color:var(--muted); font-size:11px; margin-left:auto; }
.sql-code { background:#f8f8f8; border:1px solid #e6e6e6; border-radius:4px; padding:10px 12px; font-family:monospace; font-size:12px; color:#333; white-space:pre-wrap; word-break:break-all; line-height:1.6; }
.log-entry { padding:9px 13px; border-bottom:1px solid #ececec; display:flex; gap:10px; align-items:flex-start; }
.log-entry:last-child { border-bottom:none; }
.log-level { font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
.log-debug{background:#f0f0f0;color:#666} .log-info{background:#FDF3EA;color:#9A5020}
.log-warning{background:#FEF9E7;color:#7D6608} .log-error{background:#fbe3e4;color:#c0392b} .log-critical{background:#fbe3e4;color:#7F1010}
.log-msg { color:#333; font-size:13px; flex:1; word-break:break-word; }
.log-time { color:var(--muted); font-size:11px; white-space:nowrap; font-family:monospace; }
.log-context { margin-top:5px; font-family:monospace; font-size:11px; color:#555; background:#f5f5f5; padding:6px 8px; border-radius:3px; }
.perf-metrics-row { display:flex; border:1px solid #e6e6e6; border-radius:6px; overflow:hidden; margin-bottom:18px; }
.perf-metric { flex:1; padding:16px 20px; border-right:1px solid #e6e6e6; text-align:center; }
.perf-metric:last-child { border-right:none; }
.perf-metric-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:6px; }
.perf-metric-value { font-size:22px; font-weight:700; color:#222; font-family:monospace; }
.perf-metric-unit { font-size:13px; font-weight:400; color:var(--muted); }
.tl-threshold-row { display:flex; align-items:center; gap:8px; font-size:12px; color:#333; margin-bottom:10px; flex-wrap:wrap; }
.tl-threshold-input { width:52px; padding:3px 7px; border:1px solid #d0d0d0; border-radius:3px; background:#fff; color:#333; font-size:12px; outline:none; text-align:center; font-family:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; }
.tl-threshold-hint { color:var(--muted); font-size:12px; }
.tl-legend { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted); margin-bottom:10px; }
.tl-legend-item { display:flex; align-items:center; gap:5px; }
.tl-legend-dot { width:10px; height:10px; border-radius:2px; display:inline-block; }
.tl-chart { background:#fff; border:1px solid #e6e6e6; border-radius:4px; overflow:hidden; }
.tl-row { display:flex; align-items:center; gap:12px; padding:8px 13px; border-bottom:1px solid #ececec; }
.tl-row:last-child { border-bottom:none; }
.tl-name { width:200px; flex-shrink:0; font-size:12px; color:#333; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-track { flex:1; height:18px; background:#f0f0f0; border-radius:3px; overflow:hidden; position:relative; }
.tl-bar { height:100%; min-width:4px; border-radius:3px; display:flex; align-items:center; justify-content:flex-end; padding-right:6px; }
.tl-bar-label { color:#fff; font-size:10px; font-weight:600; white-space:nowrap; }
.tl-info { width:75px; font-size:11px; color:var(--muted); font-family:monospace; flex-shrink:0; text-align:right; }
.tl-empty { color:var(--muted); font-size:13px; padding:24px; text-align:center; }
.routes-summary { display:flex; border:1px solid #e6e6e6; border-radius:6px; overflow:hidden; margin-bottom:18px; }
.routes-summary-item { flex:1; padding:12px 16px; border-right:1px solid #e6e6e6; text-align:center; }
.routes-summary-item:last-child { border-right:none; }
.routes-summary-value { font-size:22px; font-weight:700; color:#222; font-family:monospace; }
.routes-summary-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-top:4px; }
.route-groups { display:flex; flex-direction:column; gap:8px; }
.route-group { border:1px solid #e6e6e6; border-radius:4px; overflow:hidden; background:#fff; }
.route-group-summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:13px; font-weight:600; color:#333; user-select:none; }
.route-group-summary::-webkit-details-marker { display:none; }
.route-group-summary:hover { background:#fafafa; }
.route-group-chevron { display:inline-flex; color:var(--muted); transition:transform .15s ease; }
.route-group[open] .route-group-chevron { transform:rotate(90deg); }
.route-group-name { flex:1; font-family:monospace; text-transform:lowercase; }
.route-group-table { margin:0; border:none; border-top:1px solid #e6e6e6; border-radius:0; }
.route-method { display:inline-block; padding:2px 7px; border-radius:3px; font-size:11px; font-weight:700; color:#fff; font-family:monospace; }
.rm-GET{background:#2e7d32} .rm-POST{background:#1565c0} .rm-PUT{background:#e65100} .rm-DELETE{background:#c62828} .rm-PATCH{background:#6a1b9a} .rm-ALL{background:#424242} .rm-OPTIONS{background:#37474f}
.route-path { font-family:monospace; font-size:13px; color:#333; }
.route-path .param { color:#C87A3C; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.stat-card { background:#f8f8f8; border:1px solid #e6e6e6; border-radius:4px; padding:12px 16px; text-align:center; }
.stat-value { font-size:20px; font-weight:700; color:#222; margin-bottom:3px; }
.stat-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.badge { display:inline-block; padding:2px 7px; border-radius:4px; font-size:11px; font-weight:600; }
.badge-ok   { background:#e8f4ec; color:#1a7a3c; }
.badge-warn { background:#fbe3e4; color:#c0392b; }
.badge-info { background:#FDF3EA; color:#9A5020; }
.badge-muted{ background:#f0f0f0; color:#666; }
.empty-state { text-align:center; padding:40px 24px; color:var(--muted); }
.empty-icon { font-size:28px; margin-bottom:8px; }
.empty-text { font-size:13px; }
.json-pre { background:#f8f8f8; padding:12px; font-size:12px; color:#333; font-family:monospace; white-space:pre-wrap; word-break:break-all; max-height:400px; overflow:auto; line-height:1.6; }
.json-pre .json-key { color:#e36209; }
.json-pre .json-val { color:#447dbd; }
hr.divider { border:none; border-top:1px solid #e6e6e6; margin:18px 0; }
.perf-bar-wrap { margin-bottom:8px; }
.perf-bar-label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:3px; }
.perf-bar-outer { height:7px; background:#f0f0f0; border-radius:4px; overflow:hidden; }
.perf-bar-inner { height:100%; border-radius:4px; }
.center { text-align:center; }
.mono { font-family:monospace; }
.muted { color:var(--muted); }

.lang-switch { display:flex; align-items:center; gap:2px; background:#f5f3f0; border:1px solid #e6e6e6; border-radius:5px; padding:3px; flex-shrink:0; }
.lang-switch-item { padding:5px 10px; font-size:11px; font-weight:700; letter-spacing:.3px; color:#888; border-radius:3px; text-decoration:none; border:none; background:none; cursor:pointer; font-family:inherit; }
.lang-switch-item.active { background:#fff; color:#C87A3C; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.lang-switch-item:hover:not(.active) { color:#555; }

/* ── LOG FILTER TABS ── */
.log-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.log-tab {
  padding:5px 13px; border:1px solid #e0e0e0; border-radius:4px;
  font-size:13px; cursor:pointer; background:#f8f8f8; color:#555;
  font-family:inherit; transition:all .12s;
  display:inline-flex; align-items:center; gap:5px;
}
.log-tab.active { background:#fff; border-color:#C87A3C; color:#C87A3C; font-weight:600; }
.log-tab:hover:not(.active) { background:#fff; border-color:#bbb; color:#333; }
.log-tab-badge {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:10px; font-weight:700;
  min-width:18px; height:18px; padding:0 5px; color:#fff;
}
.log-tab-err  { background:#c0392b; }
.log-tab-warn { background:#e67e22; }
.log-tab-depr { background:#8e44ad; }
.log-tab-zero { color:#aaa; font-size:12px; }

/* ── LOG MESSAGES TABLE ── */
.log-table-wrap { border:1px solid #e6e6e6; border-radius:4px; overflow:hidden; }
.log-table { width:100%; border-collapse:collapse; font-size:12px; }
.log-table th { background:#f5f5f5; padding:9px 14px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#888; border-bottom:1px solid #e6e6e6; }
.log-row { border-bottom:1px solid #ececec; }
.log-row:last-child { border-bottom:none; }
.log-row td { padding:10px 14px; vertical-align:top; }
.log-td-time { width:150px; white-space:nowrap; color:#888; font-family:monospace; font-size:11px; }
.log-row-error   { border-left:3px solid #e74c3c; }
.log-row-warning { border-left:3px solid #e67e22; }
.log-row-deprecation { border-left:3px solid #8e44ad; }
.log-msg-text { font-size:12.5px; color:#333; word-break:break-word; line-height:1.5; }
.log-meta-links { margin-top:5px; }
.log-ctx-btn {
  background:none; border:none; padding:0; cursor:pointer;
  color:#C87A3C; font-size:11.5px; text-decoration:underline; font-family:inherit;
}
.log-ctx-btn:hover { color:#9A5020; }
.log-ctx-btn + .log-ctx-btn { margin-left:10px; }
.log-context-detail {
  display:none; margin-top:6px; background:#f5f5f5; border:1px solid #ebebeb;
  border-radius:3px; padding:8px 10px; font-family:monospace; font-size:11px;
  color:#555; white-space:pre-wrap; word-break:break-all;
}
.log-stack-trace {
  max-height:280px; overflow-y:auto; line-height:1.7; color:#444;
}
.log-source-ref {
  display:block; margin-top:4px; font-family:monospace; font-size:11px;
  color:#888; word-break:break-all;
}
.log-deprecation { background:#f3e5f5; color:#6a1b9a; }

/* ── REQUEST / RESPONSE TABS ── */
.rr-tabs { display:flex; background:#f5f3f0; border:1px solid #e6e6e6; border-radius:5px; padding:4px; gap:2px; margin-bottom:24px; width:fit-content; }
.rr-tab {
  padding:7px 16px; font-size:13px; font-weight:600; color:#555;
  border-radius:4px; cursor:pointer; background:transparent; border:none;
  font-family:inherit; transition:background .12s, color .12s;
}
.rr-tab.active { background:#fff; color:#222; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.rr-tab:hover:not(.active) { background:rgba(255,255,255,.6); color:#333; }
.rr-tab-empty { color:#bbb; }
.rr-tab-empty:hover:not(.active) { color:#999; background:rgba(255,255,255,.4); }
.rr-tabpanel { animation:rr-fade .1s ease-in; }
@keyframes rr-fade { from { opacity:0; } to { opacity:1; } }

.curl-block { position:relative; background:#f8f8f8; border:1px solid #e6e6e6; border-radius:4px; padding:16px; }
.curl-copy-btn {
  position:absolute; top:12px; right:12px;
  padding:6px 14px; border:1px solid #d0d0d0; border-radius:4px;
  background:#fff; color:#444; font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:border-color .12s, color .12s;
}
.curl-copy-btn:hover { border-color:#C87A3C; color:#C87A3C; }
.curl-pre { font-family:monospace; font-size:12px; color:#333; white-space:pre-wrap; word-break:break-all; line-height:1.7; margin-top:6px; }

/* ── ROUTES PANEL FILTER (defined once, never overridden by page-level styles) ── */
.route-filter { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.route-filter-btn {
  padding:4px 12px; border-radius:3px; border:1px solid var(--border);
  background:#F0EBE1; color:var(--muted); font-size:11.5px; cursor:pointer;
  transition:all .1s;
}
.route-filter-btn:hover, .route-filter-btn.active {
  background:var(--hover); border-color:var(--accent); color:var(--text);
}