/* ApiLens UI. Colour carries meaning (health); the brand indigo only marks selection and focus. */

:root, [data-theme="light"] {
  --paper: #f4f6f9;
  --surface: #ffffff;
  --ink: #0f1b2d;
  --graphite: #5b6b7f;
  --rule: #dde3ea;
  --rule-strong: #c3ccd8;
  --wash: #eaeef4;
  --brand: #4f46e5;
  --brand-ink: #3730a3;
  --brand-wash: #eceafd;
  --lens: #0891b2;
  --ok: #15803d;
  --ok-wash: #e3f4e8;
  --warn: #b45309;
  --warn-wash: #fbefdc;
  --bad: #c62828;
  --bad-wash: #fbe6e6;
  --bar: #cfd8ea;
  --shadow: 0 12px 40px rgba(15, 27, 45, .18);
  --get: #0e7490; --post: #15803d; --put: #b45309; --patch: #7c3aed; --delete: #c62828;
  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #0b1220;
  --surface: #111b2e;
  --ink: #e6edf7;
  --graphite: #92a3ba;
  --rule: #223049;
  --rule-strong: #33445f;
  --wash: #16223a;
  --brand: #818cf8;
  --brand-ink: #c7d2fe;
  --brand-wash: #1c2347;
  --lens: #22d3ee;
  --ok: #4ade80;
  --ok-wash: #11301f;
  --warn: #fbbf24;
  --warn-wash: #3a2a0c;
  --bad: #f87171;
  --bad-wash: #3d1717;
  --bar: #26385a;
  --shadow: 0 12px 40px rgba(0, 0, 0, .55);
  --get: #22d3ee; --post: #4ade80; --put: #fbbf24; --patch: #c4b5fd; --delete: #f87171;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 "Segoe UI Variable Text", "Segoe UI", "Avenir Next", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: 26px; letter-spacing: -.02em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 13px; }
.muted { color: var(--graphite); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; border-radius: 6px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.rail {
  position: sticky; top: 0; height: 100vh; overflow: auto;
  border-right: 1px solid var(--rule); background: var(--surface);
  display: flex; flex-direction: column; padding: 20px 14px 14px;
}
.brand { display: block; padding: 0 6px 18px; }
.brand img { height: 30px; width: auto; display: block; }
.brand .logo-dark { display: none; }
[data-theme="dark"] .brand .logo-dark { display: block; }
[data-theme="dark"] .brand .logo-light { display: none; }
.rail-title { font-weight: 650; font-size: 13px; color: var(--graphite); padding: 0 8px 6px; }
.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail nav a {
  display: block; padding: 7px 8px; border-radius: 6px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail nav a:hover { background: var(--wash); text-decoration: none; }
.rail nav a[aria-current="page"] { background: var(--brand-wash); color: var(--brand-ink); font-weight: 600; }
.rail-foot { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }

main { padding: 28px 36px 64px; max-width: 1920px; width: 100%; min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 8px; }
.page-head .sub { color: var(--graphite); margin-top: 4px; }
.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- controls ---------- */
button, select, input, textarea { font: inherit; color: inherit; }
.btn {
  appearance: none; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  padding: 7px 14px; border-radius: 6px; cursor: pointer; font-weight: 550;
}
.btn:hover { border-color: var(--graphite); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-theme="dark"] .btn.primary { color: #0b1220; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn { width: 34px; height: 34px; padding: 0; display: inline-grid; place-items: center; }
select, input[type="text"], input[type="search"], textarea {
  border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 6px; padding: 7px 10px; min-width: 0;
}
textarea { width: 100%; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
label.toggle { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; user-select: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); display: inline-block; }
.is-live .live-dot { background: var(--ok); }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--rule); margin: 18px 0 26px; overflow-x: auto; }
.tabs a { padding: 10px 2px; color: var(--graphite); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 550; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }
.tabs .count { margin-left: 6px; background: var(--warn-wash); color: var(--warn); border-radius: 10px; padding: 0 7px; font-size: 12px; font-weight: 650; }

/* ---------- readout strip (no cards) ---------- */
.readout { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 30px; }
.readout > div { padding: 16px 20px 14px; border-left: 1px solid var(--rule); }
.readout > div:first-child { border-left: 0; padding-left: 0; }
.readout .v { font-size: 32px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.readout .v small { font-size: 15px; color: var(--graphite); font-weight: 400; margin-left: 3px; }
.readout .k { color: var(--graphite); margin-top: 4px; font-size: 13px; }
.readout .bad { color: var(--bad); }
.readout .warn { color: var(--warn); }
.readout .ok { color: var(--ok); }

/* ---------- sections ---------- */
.section { margin-bottom: 34px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.panel { border: 1px solid var(--rule); background: var(--surface); }
.panel.pad { padding: 16px 18px; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: var(--graphite); font-size: 13px; padding: 9px 12px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th.num, td.num { text-align: right; }
tbody tr.row { cursor: pointer; }
tbody tr.row:hover { background: var(--wash); }
tbody tr.row:focus-visible { outline-offset: -2px; }
td .why { color: var(--graphite); font-size: 13px; margin-top: 3px; max-width: 62ch; }
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
.table-wrap table th:first-child, .table-wrap table td:first-child { padding-left: 16px; }

/* ---------- method badges, chips ---------- */
.method { display: inline-block; min-width: 54px; text-align: center; font-weight: 700; font-size: 12px; letter-spacing: .02em; padding: 2px 6px; border-radius: 4px; border: 1px solid currentColor; margin-right: 8px; }
.m-GET { color: var(--get); } .m-POST { color: var(--post); } .m-PUT { color: var(--put); }
.m-PATCH { color: var(--patch); } .m-DELETE { color: var(--delete); } .m-HEAD, .m-OPTIONS { color: var(--graphite); }
.route { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; word-break: break-all; }
.chip { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--wash); color: var(--graphite); }
.chip.high, .chip.critical { background: var(--bad-wash); color: var(--bad); }
.chip.medium, .chip.warning { background: var(--warn-wash); color: var(--warn); }
.chip.low { background: var(--ok-wash); color: var(--ok); }
.chip.info { background: var(--wash); color: var(--graphite); }
.chip.undoc { background: var(--warn-wash); color: var(--warn); margin-left: 8px; }
.chip.dep { background: var(--warn-wash); color: var(--warn); margin-left: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--rule-strong); flex: none; }
.dot.low { background: var(--ok); } .dot.medium { background: var(--warn); } .dot.high { background: var(--bad); }
.meter { width: 64px; height: 6px; background: var(--wash); border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.meter > i { display: block; height: 100%; background: var(--ok); }
.meter.medium > i { background: var(--warn); } .meter.high > i { background: var(--bad); }

/* ---------- attention list ---------- */
.attention { border-top: 1px solid var(--rule); }
.attention > a { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 13px 4px; border-bottom: 1px solid var(--rule); color: inherit; }
.attention > a:hover { background: var(--wash); text-decoration: none; }
.attention .dot { margin-top: 7px; }
.attention .why { color: var(--graphite); font-size: 13.5px; margin-top: 2px; }
.attention .score { font-size: 22px; font-weight: 300; }

/* ---------- charts ---------- */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--graphite); font-size: 11.5px; font-family: inherit; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .c-bar { fill: var(--bar); }
.chart .c-err { fill: var(--bad); opacity: .85; }
.chart .c-p95 { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .c-p50 { fill: none; stroke: var(--lens); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart .guide { stroke: var(--graphite); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); padding: 8px 10px; border-radius: 6px; font-size: 12.5px; line-height: 1.45; white-space: nowrap; z-index: 5; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--graphite); font-size: 13px; margin-top: 8px; }
.legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.spark { display: block; }
.spark path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .idle { stroke: var(--rule-strong); stroke-dasharray: 2 3; }
.spark.low { color: var(--ok); } .spark.medium { color: var(--warn); } .spark.high { color: var(--bad); } .spark.unknown { color: var(--graphite); }
.statusbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--wash); }
.statusbar i { display: block; height: 100%; }
.s2 { background: var(--ok); } .s3 { background: var(--lens); } .s4 { background: var(--warn); } .s5 { background: var(--bad); }

/* ---------- docs ---------- */
.docs { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 0; border: 1px solid var(--rule); background: var(--surface); min-height: 560px; }
.docs-list { border-right: 1px solid var(--rule); max-height: calc(100vh - 210px); overflow: auto; position: sticky; top: 12px; align-self: start; }
.docs-list .search { padding: 12px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.docs-list .search input { width: 100%; }
.docs-group { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; margin: 0; border: 0; border-top: 1px solid var(--rule); background: var(--wash); font: inherit; font-weight: 650; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--graphite); text-align: left; cursor: pointer; position: sticky; top: 57px; z-index: 1; }
.docs-group:first-of-type { border-top: 0; }
.docs-group:hover { color: var(--brand-ink); }
.docs-group .gn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-group .gc { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); letter-spacing: 0; }
.docs-group .chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; flex: none; }
.docs-group.closed .chev { transform: rotate(-45deg); }
.docs-empty { padding: 24px 16px; color: var(--graphite); text-align: center; }
.ep { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 3px 8px; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; color: inherit; transition: background .12s, border-color .12s; }
.ep:hover { background: var(--wash); text-decoration: none; }
.ep[aria-current="true"] { background: var(--brand-wash); border-color: color-mix(in srgb, var(--brand) 35%, transparent); box-shadow: inset 3px 0 0 var(--brand); }
.ep-m { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-align: center; padding: 4px 0; border-radius: 6px; background: color-mix(in srgb, currentColor 12%, transparent); }
.ep .t { min-width: 0; }
.ep .t .route { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; }
.ep .t .s { display: block; color: var(--graphite); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-r { display: flex; align-items: center; gap: 8px; }
.ep-r .spark { width: 56px; }
.ep-r .dot { flex: none; }
.docs-detail { padding: 24px 28px 36px; min-width: 0; }
.docs-detail h2 { font-size: 22px; margin-bottom: 4px; word-break: break-all; }
.vitals { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 16px 0 6px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.vitals .v { font-size: 22px; font-weight: 300; }
.vitals .k { font-size: 12.5px; color: var(--graphite); }
.block { margin-top: 26px; }
.block > h3 { margin-bottom: 10px; }
pre { margin: 0; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); overflow: auto; max-height: 340px; white-space: pre; border-radius: 6px; }
.resp-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.resp-row .code { font-weight: 700; }
.resp-row .code.c2 { color: var(--ok); } .resp-row .code.c4 { color: var(--warn); } .resp-row .code.c5 { color: var(--bad); }
.resp-row.undeclared { background: var(--warn-wash); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 4px; }
.tryit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.tryit .field { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 8px; }
.tryit .field label { color: var(--graphite); font-size: 13px; }
.tryit .field input { width: 100%; }
.status-pill { display: inline-block; font-weight: 700; padding: 2px 10px; border-radius: 10px; background: var(--ok-wash); color: var(--ok); }
.status-pill.bad { background: var(--bad-wash); color: var(--bad); }
.status-pill.warn { background: var(--warn-wash); color: var(--warn); }
.note { color: var(--graphite); font-size: 13px; margin-top: 8px; }
.callout { padding: 12px 14px; border-left: 3px solid var(--warn); background: var(--warn-wash); border-radius: 0 6px 6px 0; }
.callout.bad { border-left-color: var(--bad); background: var(--bad-wash); }

/* ---------- drift ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filters button { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 16px; padding: 4px 14px; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.drift-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--rule); }
.glyph { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.glyph.critical { background: var(--bad-wash); color: var(--bad); }
.glyph.warning { background: var(--warn-wash); color: var(--warn); }
.glyph.info { background: var(--wash); color: var(--graphite); }
.drift-row .d { color: var(--graphite); margin-top: 3px; }

/* ---------- map ---------- */

.mapbox svg { display: block; width: 100%; height: auto; min-width: 640px; }
.mapbox text { font-family: inherit; fill: var(--ink); }
.mapbox .sub { fill: var(--graphite); font-size: 12px; }





/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(8, 14, 25, .45); z-index: 50; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--surface); z-index: 51; box-shadow: var(--shadow); overflow: auto; padding: 22px 26px 40px; animation: slide-in .18s ease-out; }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.reasons { margin: 8px 0 0; padding-left: 18px; }
.reasons li { margin: 3px 0; }
.err-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }

/* ---------- misc ---------- */
.empty { padding: 44px 24px; text-align: center; border: 1px dashed var(--rule-strong); background: var(--surface); }
.empty h2 { margin-bottom: 8px; }
.empty p { color: var(--graphite); max-width: 56ch; margin: 0 auto 16px; }
.plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.plist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--rule); align-items: center; }
.plist a.name { font-size: 17px; font-weight: 600; color: var(--ink); }
.form-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 28px; }
.form-row input { flex: 1 1 260px; }
.error { color: var(--bad); margin-top: 8px; }
.steps { counter-reset: step; display: grid; gap: 30px; }
.step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
.step::before { counter-increment: step; content: counter(step); width: 26px; height: 26px; border-radius: 50%; background: var(--brand-wash); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; font-size: 13px; margin-top: 1px; }
.step h3 { margin-bottom: 6px; }
.keybox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.keybox code { background: var(--wash); padding: 6px 10px; border-radius: 6px; user-select: all; word-break: break-all; }
.tabs-mini { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.tabs-mini button { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.tabs-mini button[aria-pressed="true"] { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.loading { color: var(--graphite); padding: 24px 0; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; z-index: 80; }

/* ---------- small screens ---------- */
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .brand { padding: 0; }
  .rail-title { display: none; }
  .rail nav { flex-direction: row; overflow-x: auto; flex: 1; }
  .rail nav a { flex: 0 0 auto; max-width: 160px; }
  .table-wrap table { min-width: 640px; }
  .table-wrap td:first-child { white-space: nowrap; }
  .rail-foot { margin: 0; padding: 0; }
  main { padding: 20px 16px 48px; }
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .readout > div { border-top: 1px solid var(--rule); }
  .docs { grid-template-columns: 1fr; }
  .docs-list { position: static; max-height: 320px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .docs-detail { padding: 18px 16px 28px; }
  .tryit { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- additions for pages ---------- */
a.drift-row { color: inherit; }
a.drift-row:hover { background: var(--wash); text-decoration: none; }
.mapbox .elabel { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.docs-detail h2 .method { vertical-align: middle; }
.docs-detail details summary { cursor: pointer; color: var(--graphite); font-size: 13px; }
.keybox .muted { font-size: 13px; }
input[type="file"] { max-width: 100%; }

/* ---------- sign-in, team, access ---------- */
input[type="email"], input[type="password"] {
  border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 6px; padding: 7px 10px; min-width: 0;
}
.form-row input[type="email"] { flex: 1 1 260px; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 32px 28px; }
.auth-card h1 { font-size: 22px; margin: 22px 0 6px; }
.auth-card .sub { margin: 0 0 14px; color: var(--graphite); }
.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; max-width: 400px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 550; font-size: 14px; }
.auth-form .btn { align-self: flex-start; }
.rail-user { margin-top: auto; padding: 12px 0 0; border-top: 1px solid var(--rule); font-size: 13px; }
.rail-user + .rail-foot { margin-top: 10px; }
.rail-user-name { color: var(--graphite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user-links { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.linklike { background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; font: inherit; }
.linklike:hover { text-decoration: underline; }
.access-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 20px; }
.access-row { padding: 2px 0; }
.auth-card .logo-dark { display: none; }
[data-theme="dark"] .auth-card .logo-dark { display: block; }
[data-theme="dark"] .auth-card .logo-light { display: none; }

/* ---- try-it environments, history, load test; alerts; samples; share */
[hidden] { display: none !important; }
.tryit select { width: 100%; }
.env-manage { border: 1px solid var(--rule); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.env-edit { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.env-edit input { width: 100%; }

.hist-row .route { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sample { border-bottom: 1px solid var(--rule); padding: 8px 0; }
.sample summary { cursor: pointer; }
.sample pre { max-height: 240px; overflow: auto; }
.arow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 10px; }
.arow > label { color: var(--graphite); font-size: 13px; }
.arow > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.arow input[type="text"], .arow input[type="url"] { flex: 1 1 260px; }
.arow input[type="number"] { width: 90px; }
@media (max-width: 960px) {
  .env-edit { grid-template-columns: 1fr; }
  .arow { grid-template-columns: 1fr; }
}

/* ---- request form and response: blue names, red required marks and strings */
:root { --name: #1d4ed8; --str: #b3261e; --num: #0f766e; --lit: #7c3aed; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --name: #7aa7ff; --str: #ff8a80; --num: #5eead4; --lit: #c4b5fd; } }
:root[data-theme="dark"] { --name: #7aa7ff; --str: #ff8a80; --num: #5eead4; --lit: #c4b5fd; }
.p-group { margin: 14px 0 6px; font-weight: 600; font-size: 13px; color: var(--graphite); border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.p-row { display: grid; grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr); gap: 10px; align-items: start; padding: 8px 0; }
.p-row input, .p-row select { width: 100%; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
.p-name .pn { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; color: var(--name); font-size: 14px; }
.p-name .req { color: var(--bad); font-weight: 700; }
.p-name .pt { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--graphite); margin-top: 2px; }
.p-name .pd { font-size: 12.5px; color: var(--graphite); margin-top: 2px; }
.resp-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
pre.code { background: var(--wash); border: 1px solid var(--rule); border-left: 3px solid var(--name); border-radius: 6px; padding: 12px 14px; overflow: auto; max-height: 420px; line-height: 1.55; }
pre.code.warn { border-left-color: var(--warn); }
pre.code.bad { border-left-color: var(--bad); }
.j-key { color: var(--name); font-weight: 600; }
.j-str { color: var(--str); }
.j-num { color: var(--num); }
.j-lit { color: var(--lit); font-weight: 600; }
.hist-row { display: flex; gap: 6px; align-items: stretch; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.hist-main { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: inherit; font: inherit; }
.hist-main:hover, .hist-main:focus-visible { background: var(--wash); }
.hist-main .route { flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
@media (max-width: 960px) { .p-row { grid-template-columns: 1fr; gap: 4px; } }
.tryit { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tryit .env-edit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .tryit .env-edit { grid-template-columns: 1fr; } }

/* ---- history: one tidy row per request */
.hist-list { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-top: 8px; }
.hist-row { display: flex; align-items: center; gap: 10px; padding: 0 10px 0 0; border-bottom: 1px solid var(--rule); }
.hist-row:last-child { border-bottom: 0; }
.hist-row:hover { background: var(--wash); }
.hist-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: none; border: 0; border-radius: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.hist-main:hover { background: none; }
.hist-main:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.hist-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-text .route { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hist-text .muted { font-size: 12px; }
.hist-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.hist-actions .btn { white-space: nowrap; }
@media (max-width: 560px) { .hist-row { flex-wrap: wrap; padding: 0 10px 8px; } .hist-main { flex-basis: 100%; padding-left: 0; } }
.hist-text .route { flex: 0 0 auto; word-break: normal; }
.hist-main { flex-wrap: nowrap; }
.hist-main .status-pill { flex: 0 0 auto; }
.hist-text { flex: 1 1 auto; }

/* ---- settings and legal links */
.rail-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 12px 0; font-size: 12.5px; }
.rail-legal a { color: var(--graphite); text-decoration: none; }
.rail-legal a:hover { color: var(--brand); text-decoration: underline; }
form .arow input[type="email"], form .arow input[type="tel"], form .arow input[type="url"], form .arow input[type="number"] { flex: 1 1 260px; }
form .arow input[type="number"] { flex: 0 0 140px; }

/* ---- licences */
.warnv .v { color: var(--warn); }
.keybox-new { display: block; border: 1px solid var(--brand); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.table-wrap td .muted { font-size: 12.5px; }
.table-wrap td .controls { flex-wrap: wrap; }

/* Database workbench */
.db-conns { display: grid; gap: 8px; margin: 12px 0; }
.db-conn { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 10px; padding: 8px 12px; background: var(--surface); }
.db-conn.on { border-color: var(--brand); }
.db-conn-main { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: none; border: 0; cursor: pointer; text-align: left; padding: 4px 0; }
.db-split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.db-schema { max-height: 520px; overflow: auto; border-right: 1px solid var(--rule); padding-right: 12px; }
.db-group { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--graphite); margin: 12px 0 4px; }
.db-obj { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.db-obj .link, .db-col { background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; word-break: break-all; color: var(--brand); }
.db-cols { display: grid; padding-left: 12px; }
.db-col { color: inherit; font-size: 13px; }
.db-params .p-row { display: grid; grid-template-columns: 1fr 90px 120px 1fr auto; gap: 6px; margin-bottom: 6px; }
.db-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin-top: 10px; }
.db-tab { background: none; border: 0; padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.db-tab.on { border-bottom-color: var(--brand); font-weight: 600; }
.ok-text { color: var(--ok); } .bad-text { color: var(--bad); }
label.inline { display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 760px) { .db-split { grid-template-columns: minmax(0, 1fr); } .db-schema { border-right: 0; max-height: 220px; } .db-params .p-row { grid-template-columns: 1fr 1fr; } }
.block + .block, .block { margin-bottom: 18px; }

/* deploy markers on the charts, and the SLO card */
.chart .deploy-line { stroke: #d9822b; stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart .deploy-flag { fill: #d9822b; }
.slo { display: grid; gap: 10px; }
.slo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.slo-head .big { font-size: 1.6rem; font-weight: 700; }
.slo-bar { height: 12px; border-radius: 6px; background: var(--rule, #ddd); overflow: hidden; }
.slo-bar > i { display: block; height: 100%; background: #2f8f4e; }
.slo.warning .slo-bar > i { background: #d89a1b; }
.slo.breached .slo-bar > i { background: #c0392b; }
.deploy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.deploy-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }

.explain-box { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--rule, #ddd); border-radius: 8px; background: var(--brand-wash, #eceafd); }
.explain-box ul { margin: 4px 0 8px 18px; padding: 0; }

.cfg-card { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--rule, #ddd); border-radius: 12px; }
.cfg-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule, #ddd); }
.cfg-row:first-of-type { border-top: 0; }
.cfg-label { font-weight: 600; }
.cfg-label .muted { font-weight: 400; font-size: .85em; }
.cfg-value code { word-break: break-all; }
.cfg-value input { width: 100%; }
@media (max-width: 640px) { .cfg-row { grid-template-columns: 1fr; } }
.disc-name { width: 100%; min-width: 160px; font-weight: 600; }

.cfg-block { margin: 0 0 4px; padding: 10px 12px; border-radius: 8px; background: rgba(127,127,127,.12); overflow-x: auto; white-space: pre; user-select: all; }

.plan-badge { font-size: .85em; opacity: .85; margin-bottom: 6px; }
.locked-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px dashed currentColor; opacity: .9; margin-top: 10px; }
details.is-locked > summary::after { content: " (Pro)"; opacity: .7; }
.callout.good { border-left-color: #22a06b; background: rgba(34,160,107,.12); }

.qsplit { height: 8px; border-radius: 4px; background: rgba(127,127,127,.2); overflow: hidden; margin-bottom: 2px; }
.qsplit-db { height: 100%; background: #6c7bff; }
tr.q-slow td:first-child { box-shadow: inset 3px 0 0 #e0a030; }
.q-sql summary { cursor: pointer; opacity: .75; font-size: .9em; }
.q-sql pre { white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; }
.svc-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rule, rgba(127,127,127,.3)); }
#service-select { max-width: 280px; }

.cfg-svcs { margin: 6px 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(127,127,127,.08); }
.cfg-svc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 4px 0; }

.bld { width: min(1100px, calc(100vw - 24px)); max-height: 88vh; }
.bld-back { align-items: center; padding-top: 0; }
.bld-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px 8px; }
.bld-progress { padding: 0 20px 10px; font-size: .95em; }
.bld-progress.is-ready { color: #1f9d63; }
.bld-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; padding: 0 20px 10px; overflow: auto; }
@media (max-width: 800px) { .bld-body { grid-template-columns: 1fr; } }
.bld-form h4 { margin: 8px 0; }
.bld-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule, rgba(127,127,127,.25)); align-items: start; }
.bld-name .muted { font-size: .82em; }
.bld-input input, .bld-input select, .bld-input textarea { width: 100%; }
.bld-input .is-missing { box-shadow: 0 0 0 1px #e0a030 inset; }
.bld-err { color: #d6453d; font-size: .85em; min-height: 1em; }
.bld-uuid { display: flex; gap: 6px; }
.bld-preview { white-space: pre-wrap; word-break: break-word; max-height: 52vh; overflow: auto; margin: 8px 0 0; }
.bld-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 20px 16px; border-top: 1px solid var(--rule, rgba(127,127,127,.25)); }
.tabs-mini .tab-mini.on { font-weight: 700; text-decoration: underline; }

.bld-json { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; margin-top: 8px; }
.bld-okline { color: #1f9d63; font-size: .9em; margin-top: 4px; }

.up-box { width: min(520px, calc(100vw - 32px)); max-height: 88vh; overflow: auto; }
.up-form { padding: 0 20px 10px; display: grid; gap: 12px; }
.up-form label { display: grid; gap: 6px; font-weight: 600; }
.up-form select, .up-form textarea { width: 100%; font-weight: 400; }
.up-price { font-size: 2em; font-weight: 800; }
.upgrade-action { margin-top: 8px; }
.upgrade-action .upgrade-btn { width: 100%; }

.disc-h { margin: 12px 0 6px; }
.disc-more { margin-top: 10px; }
.disc-more > summary { cursor: pointer; opacity: .8; }

/* ---- Account page: header, licence, key, integration ---- */
.acct-hero { display: flex; align-items: center; gap: 22px; background: var(--banner-bg); }
.acct-avatar { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; font-weight: 800; color: #fff; background: linear-gradient(145deg, #a681ff, #6a52e6); box-shadow: 0 10px 24px rgba(122, 92, 242, .35); }
.acct-hero-text { min-width: 0; }
.acct-hero-text h1 { font-size: 28px; margin: 0 0 6px; color: var(--navy); overflow-wrap: anywhere; }
.acct-hero-text p { margin: 8px 0 0; max-width: 720px; }
.acct-role { font-weight: 700; }
.acct-plan { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-weight: 700; font-size: 13px; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.acct-col { min-width: 0; }
.acct-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--rule); border-radius: 12px; background: var(--wash); }
.acct-label { color: var(--graphite); font-size: 14px; }
.acct-value { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: ui-monospace, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; }
.acct-value select { font: inherit; max-width: 100%; }
.acct-dots { letter-spacing: 2px; }
.acct-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.acct-fields label { display: grid; gap: 4px; font-size: 13px; color: var(--graphite); }
.acct-fields input { font: inherit; padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 0; }
.acct-codebox { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; margin: 10px 0; }
.acct-codehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; background: var(--wash); border-bottom: 1px solid var(--rule); }
.acct-code { padding: 12px 14px; font-family: ui-monospace, Consolas, monospace; font-size: 13.5px; line-height: 1.7; overflow-x: auto; }
.acct-line { white-space: pre; }
.acct-line .k { color: var(--brand); } .acct-line .v { color: var(--warn); }
.acct-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.acct-help { display: flex; align-items: center; gap: 16px; }
.acct-help-text { flex: 1; min-width: 0; } .acct-help-text h2 { margin: 0; font-size: 18px; } .acct-help-text p { margin: 2px 0 0; }
@media (max-width: 900px) { .acct-grid, .acct-fields { grid-template-columns: 1fr; } .acct-hero { flex-direction: column; align-items: flex-start; } .acct-help { flex-wrap: wrap; } .acct-help-text { flex-basis: 70%; } .acct-row { grid-template-columns: 1fr auto; } .acct-label { grid-column: 1 / -1; } }

/* ---- Project page: icon tabs, selectors, live cards ---- */
.tabs a { display: inline-flex; align-items: center; gap: 8px; }
.tabs a .ico { opacity: .75; } .tabs a[aria-current="page"] .ico { opacity: 1; color: var(--brand); }
.sel { position: relative; display: inline-flex; align-items: center; }
.sel .ico { position: absolute; left: 12px; pointer-events: none; color: var(--graphite); }
.sel select { padding-left: 36px; }
.toggle { font-weight: 700; font-size: 16px; }
.is-live .live-dot { width: 12px; height: 12px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
.live-stats { gap: 16px; }
.live-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 16px; background: var(--wash); }
.live-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 6px; }
.live-ico.violet { color: #8b7bff; background: color-mix(in srgb, #8b7bff 16%, transparent); }
.live-ico.green { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.live-ico.red { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.live-ico.blue { color: var(--lens); background: color-mix(in srgb, var(--lens) 16%, transparent); }
.live-num { font-size: 32px; }
.live-label { display: flex; align-items: center; gap: 8px; }
.live-tip { display: inline-flex; color: var(--graphite); cursor: help; }
.live-chartcard { border: 1px solid var(--rule); border-radius: 16px; padding: 14px 18px; }
.live-charthead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.live-charthead select { margin-left: auto; font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); }
.live-chart, .live-bars { height: 150px; }
@media (max-width: 700px) { .tabs a { font-size: 14px; } }

/* ---- Account dashboard ---- */
.acct-tabs { margin-top: 0; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 20px; }
.dash-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); box-shadow: var(--card-shadow); }
.dash-tile .live-ico { margin: 0; flex: 0 0 auto; width: 46px; height: 46px; }
.dash-tile .live-num { font-size: 28px; }
.dash-tile-label, .dash-tile-sub { font-size: 13px; }
.dash-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dash-two > .card { min-width: 0; height: 100%; box-sizing: border-box; }
.dash-perks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.dash-perks li { display: flex; gap: 10px; align-items: center; } .dash-perks .ico { color: var(--ok); }
.dash-meter { margin-bottom: 14px; } .dash-meter-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 14px; }
.dash-bars { display: flex; align-items: flex-end; gap: 3px; height: 170px; padding: 6px 0; }
.dash-bar { flex: 1 1 0; min-width: 3px; background: color-mix(in srgb, var(--brand) 70%, transparent); border-radius: 4px 4px 0 0; position: relative; display: block; }
.dash-bar:hover { background: var(--brand); }
.dash-bar i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bad); border-radius: 0; display: block; }
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.qa { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--wash); color: var(--ink); text-decoration: none; }
.qa:hover { border-color: var(--brand); text-decoration: none; transform: translateY(-1px); }
.qa .live-ico { margin-bottom: 6px; } .qa span.muted { font-size: 13px; }
.qa-go { position: absolute; top: 14px; right: 14px; color: var(--graphite); }
.dash-links { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) { .dash-two { grid-template-columns: 1fr; } }

/* ---- Plan card (sidebar and billing): crown, plan name, perks, glowing button ---- */
.upgrade .plan-top { display: flex; align-items: center; justify-content: space-between; color: #b794f6; margin-bottom: 4px; }
.plan-pill { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); }
.upgrade .plan-badge { margin: 4px 0 2px; font-size: 22px; font-weight: 800; opacity: 1; color: var(--navy, #1b1b4b); }
.upgrade .plan-tagline { margin: 2px 0 10px; font-size: 13.5px; }
.plan-perks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.plan-perks li { display: flex; align-items: center; gap: 10px; color: var(--ink); } .plan-perks .ico { color: var(--ok); flex: 0 0 auto; }
.upgrade .plan-more { font-size: 12px; margin: 0 0 8px; }
.upgrade .upgrade-head { color: var(--graphite); font-size: 13px; margin-bottom: 6px; }
.upgrade .btn.upgrade-btn { background: transparent; color: var(--accent); border: 1px solid var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; }
.upgrade .btn.upgrade-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); filter: none; }
.upgrade .btn.upgrade-btn[disabled] { box-shadow: none; }
[data-theme="dark"] .upgrade .plan-badge { color: #fff; }
[data-theme="dark"] .upgrade .upgrade-head { color: #c4cde6; }
[data-theme] .upgrade .btn.upgrade-btn { color: var(--accent); border: 1px solid var(--accent); background: transparent; }

/* ---- Connection doctor ---- */
.doctor-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.doctor-head > div { flex: 1; min-width: 220px; } .doctor-head h2 { margin: 0; font-size: 18px; } .doctor-head p { margin: 2px 0 0; }
.doctor-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.doctor-dot.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.doctor-dot.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.doctor-dot.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.doctor-steps { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14px; }

/* ---- Get started checklist ---- */
.check-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-steps li { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--wash); }
.check-steps li > div { flex: 1; min-width: 0; } .check-steps .muted { font-size: 13px; }
.check-dot { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 1px solid var(--rule-strong); color: var(--graphite); }
.check-steps li.done .check-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.check-steps li.done b { text-decoration: none; opacity: .85; }

/* ---- sidebar status dots and project cards ---- */
.rail-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rule-strong); flex: 0 0 auto; }
.rail-dot.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.rail-dot.off { background: var(--rule-strong); }
.proj-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-bottom: 20px; }
.pc { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pc-top { display: flex; gap: 12px; align-items: center; } .pc-top .live-ico { margin: 0; flex: 0 0 auto; width: 44px; height: 44px; }
.pc-title { flex: 1; min-width: 0; } .pc-title .name { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.pc-meta { font-size: 13px; display: flex; align-items: center; gap: 6px; }
.pc-links { display: flex; gap: 6px; flex-wrap: wrap; }
/* project names in the sidebar: the name shortens, the status dot always stays visible */
.rail nav.proj-nav a { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.rail nav.proj-nav .rail-name { flex: 1 1 auto; }
.rail nav.proj-nav .rail-dot { margin-left: auto; }
@media (max-width: 960px) { .rail nav.proj-nav, .rail .proj-nav { display: none; } }
@media (max-width: 960px) { .rail .upgrade { display: none; } }

/* a dialog is open: the page behind it must not scroll */
html:has(.pal-back), body:has(.pal-back) { overflow: hidden; }
.pal-back { overscroll-behavior: contain; }

/* every project tab stays visible: the bar wraps instead of hiding Setup and Access off the edge */
.stage .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; }

/* ===== Dashboard ===== */
.dash { display: flex; flex-direction: column; gap: 18px; }
.dash-welcome { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 26px; border-radius: 20px; color: var(--ink);
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 16%, var(--surface)), color-mix(in srgb, #ec4899 8%, var(--surface))); border: 1px solid var(--rule); }
.dash-welcome h1 { margin: 0 0 4px; font-size: 28px; }
.dash-welcome p { margin: 0; color: var(--graphite); }
.dash-range { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule-strong); border-radius: 12px; padding: 4px 10px; background: var(--surface); }
.dash-range select { border: 0; background: transparent; color: var(--ink); font: inherit; padding: 6px 4px; cursor: pointer; }
.dash-body { display: flex; flex-direction: column; gap: 18px; }
.dash-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.dash-stat { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: 16px; border: 1px solid var(--rule); background: var(--surface); }
.dash-stat-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.dash-stat.violet .dash-stat-ico { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.dash-stat.blue .dash-stat-ico { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.dash-stat.green .dash-stat-ico { background: linear-gradient(135deg, #22c55e, #15803d); }
.dash-stat.indigo .dash-stat-ico { background: linear-gradient(135deg, #818cf8, #6366f1); }
.dash-stat.orange .dash-stat-ico { background: linear-gradient(135deg, #fb923c, #ea580c); }
.dash-stat-label { color: var(--graphite); font-size: 13px; }
.dash-stat-value { font-size: 28px; font-weight: 750; line-height: 1.15; }
.dash-stat-foot { font-size: 12px; margin-top: 2px; }
.dash-spark { grid-column: 1 / -1; height: 34px; margin: 4px -4px -8px; }
.dash-spark svg { width: 100%; height: 100%; display: block; }
.dash-delta { font-weight: 650; font-size: 12px; } .dash-delta.good { color: var(--ok); } .dash-delta.bad { color: var(--danger, #dc2626); } .dash-delta.flat { color: var(--graphite); font-weight: 500; }
.dash-row { display: grid; gap: 14px; align-items: stretch; }
.dash-row.two { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
.dash-row.three { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.dash-stack { display: flex; flex-direction: column; gap: 14px; }
.dash-card { margin: 0; padding: 18px; border-radius: 18px; }
.dash-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dash-card-head h2 { margin: 0; font-size: 17px; } .dash-card-head p { margin: 2px 0 0; font-size: 13px; }
.dash-card-head > .btn, .dash-legend-inline { margin-left: auto; }
.dash-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.dash-ico.blue { background: linear-gradient(135deg, #3b82f6, #4f46e5); } .dash-ico.indigo { background: linear-gradient(135deg, #6366f1, #7c3aed); }
.dash-ico.green { background: linear-gradient(135deg, #10b981, #059669); } .dash-ico.amber { background: linear-gradient(135deg, #f59e0b, #d97706); } .dash-ico.violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.dash-legend-inline { display: flex; gap: 14px; font-size: 13px; color: var(--graphite); }
.dash-legend-inline i, .dash-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dash-chart { position: relative; }
.dash-chart svg { width: 100%; height: auto; display: block; }
.dash-chart text { fill: var(--graphite); font-size: 11px; }
.dash-chart .g { stroke: var(--rule); stroke-dasharray: 3 4; }
.dash-chart .req { fill: none; stroke: #3b82f6; stroke-width: 2.5; stroke-linejoin: round; }
.dash-chart .err { fill: none; stroke: #ec4899; stroke-width: 2; }
.dash-chart .area { fill: #3b82f6; opacity: .14; }
.dash-chart .cross { stroke: var(--graphite); stroke-dasharray: 3 3; opacity: .6; }
.dash-tip { position: absolute; top: 6px; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 8px 10px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.25); pointer-events: none; width: 150px; }
.dash-empty { padding: 28px 8px; text-align: center; }
.dash-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.dash-donut { position: relative; width: 150px; height: 150px; color: var(--ink); }
.dash-donut svg { width: 100%; height: 100%; }
.dash-donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dash-donut-mid b { font-size: 24px; } .dash-donut-mid span { font-size: 12px; }
.dash-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 130px; }
.dash-legend li { display: flex; align-items: center; gap: 4px; } .dash-legend b { margin-left: auto; }
.dash-svc { display: flex; flex-direction: column; gap: 8px; }
.dash-svc-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--rule); border-radius: 14px; color: var(--ink); text-decoration: none; }
.dash-svc-row:hover { border-color: var(--brand); text-decoration: none; }
.dash-svc-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, #10b981 18%, transparent); color: #10b981; }
.dash-svc-name { min-width: 0; } .dash-svc-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-table { width: 100%; font-size: 13px; } .dash-table td, .dash-table th { padding: 9px 8px; white-space: nowrap; } .dash-table td.mono { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.mth { display: inline-block; min-width: 52px; text-align: center; border-radius: 6px; padding: 2px 6px; font-size: 11px; font-weight: 750; color: #fff; background: #64748b; }
.mth.m-get { background: #16a34a; } .mth.m-post { background: #2563eb; } .mth.m-put { background: #d97706; } .mth.m-delete { background: #dc2626; } .mth.m-patch { background: #7c3aed; }
.dash-act { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dash-act li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.dash-act-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.dash-act-ico.alert { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #d97706; }
.dash-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dash-quick .btn { justify-content: flex-start; font-size: 13px; padding: 8px 10px; }
.dash-upsell { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--rule)); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.dash-upsell > div { flex: 1; min-width: 200px; }
@media (max-width: 1280px) { .dash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-row.three { grid-template-columns: 1fr 1fr; } .dash-row.three .dash-stack { grid-column: 1 / -1; } }
@media (max-width: 900px) { .dash-row.two, .dash-row.three { grid-template-columns: 1fr; } .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dash-stats { grid-template-columns: 1fr; } .dash-welcome h1 { font-size: 22px; } }
/* Pro benefits pop-up */
.pro-list { list-style: none; margin: 0; padding: 14px 20px; display: grid; gap: 14px; }
.pro-list li { display: flex; gap: 12px; align-items: flex-start; }
.pro-list-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 10px 20px; }
.pro-list-compact li { align-items: center; gap: 8px; font-size: 14px; }
@media (max-width: 560px) { .pro-list-compact { grid-template-columns: 1fr; } }
.pro-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }

.dash-card .table-wrap { overflow-x: auto; }
.dash-table { font-size: 12.5px; } .dash-table td, .dash-table th { padding: 8px 6px; }
.dash-table td:nth-child(3) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.dash-row.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); }
.dash-table td:nth-child(3) { max-width: 90px; }
@media (max-width: 1280px) { .dash-row.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .dash-row.three { grid-template-columns: 1fr; } }

.plan-link { display: inline-block; margin: 2px 0 8px; font-size: 13px; font-weight: 600; color: var(--brand); }

.acct-upsell { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.acct-upsell p { margin: 0; max-width: 560px; color: var(--graphite); }
.acct-help { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px 20px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.acct-help > div:nth-child(2) { flex: 1; }
.acct-help-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3b82f6, #4f46e5); }
.dash-row > *, .dash-body, .dash, .dash-stack > * { min-width: 0; }
.dash-svc-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
@media (max-width: 520px) { .dash-svc-row { grid-template-columns: auto minmax(0, 1fr) auto; } .dash-svc-row > span.muted { display: none; } .dash-quick { grid-template-columns: 1fr; } }

/* Account: every project module as a compact row of links, shown on every Account tab */
.acct-modules { display: grid; gap: 8px; margin: 0 0 6px; }
.acct-tabs { margin: 0; overflow-x: auto; flex-wrap: nowrap; }
.acct-tabs a { padding: 12px 2px; }
.acct-mod-head { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.acct-mod-head select { max-width: 240px; }
.acct-mod-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stage .acct-tabs { flex-wrap: wrap; overflow-x: visible; gap: 2px 18px; }
.stage .acct-tabs a { flex: 0 0 auto; gap: 7px; }
.stage .acct-tabs.acct-tabs-empty { flex-wrap: wrap; padding: 14px 18px; gap: 12px; align-items: center; }
.pp-tiles { margin-bottom: 16px; }
.pp-card { padding: 6px 18px 16px; }
.pp-tabs { margin: 0 0 14px; }
.pp-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.pp-tools input { flex: 1 1 220px; max-width: 340px; }
.pp-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pp-nav { display: inline-flex; align-items: center; gap: 10px; }
.pp-page { font-weight: 600; }
.pp-confirm { padding: 22px 24px; max-width: 520px; }
.pp-confirm h3 { font-size: 20px; }
.pp-confirm p { margin: 8px 0; line-height: 1.5; }
.pro-list-detail { grid-template-columns: 1fr; }
.pro-list-detail .pro-text { font-size: 13px; font-weight: 400; margin-top: 2px; }

/* Request dialog: Free and Pro side by side, one choice */
.up-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 20px 12px; }
.up-plan { text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1.5px solid var(--rule-strong, rgba(127,127,127,.35)); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: grid; gap: 8px; align-content: start; }
.up-plan[aria-checked="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.up-plan-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.up-plan-head b { font-size: 16px; }
.up-tag { font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--brand-wash, rgba(124,92,255,.15)); color: var(--brand-ink, var(--brand)); }
.up-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.up-plan li { display: flex; align-items: center; gap: 8px; }
.up-plan li.on .ico { color: var(--ok, #1f9d63); }
.up-plan li.off { opacity: .55; text-decoration: line-through; }
@media (max-width: 560px) { .up-plans { grid-template-columns: 1fr; } }
/* Project tabs: one row when the window is wide enough, otherwise a tidy second row (never hidden behind a scroll) */
.stage nav.tabs[aria-label="Project sections"] { flex-wrap: wrap; overflow-x: visible; gap: 2px 18px; }
.stage nav.tabs[aria-label="Project sections"] a { flex: 0 0 auto; font-size: 14px; gap: 6px; }
/* The sidebar request entry fits on one line */
.nav-request .nav-label { white-space: nowrap; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.up-plan-price { font-size: 20px; font-weight: 800; display: grid; gap: 2px; }
.up-plan-price small { font-size: 12px; font-weight: 500; }

/* first-run guide (no projects yet) */
.first-run { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fr-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px; }
.fr-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--accent, #6d4aff); color: #fff; }
@media (max-width: 760px) { .first-run { grid-template-columns: 1fr; } }

/* skeleton loader + page fade (smooth navigation) */
.skel { display: grid; gap: 14px; padding: 4px 0; }
.skel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.skel-bar { height: 70px; border-radius: 14px; background: linear-gradient(90deg, rgba(120,120,150,.10) 25%, rgba(120,120,150,.22) 37%, rgba(120,120,150,.10) 63%); background-size: 400% 100%; animation: skel 1.3s ease infinite; }
.skel-hero { height: 150px; } .skel-tall { height: 260px; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
main > *, .stage > * { animation: page-in .18s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .skel-bar, main > *, .stage > * { animation: none !important; } html { scroll-behavior: auto; } }
@media (max-width: 600px) { .skel-row { grid-template-columns: 1fr; } }

/* service map (redesign) */
.mapbox { border: 1px solid var(--rule); border-radius: 18px; padding: 10px;
  background: radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 0) 0 0 / 22px 22px, var(--surface); overflow: auto; }
.mapbox svg { min-width: 760px; }
.mapbox .nm { font-size: 14px; font-weight: 700; }
.mapbox .node { cursor: pointer; outline: none; transition: opacity .2s; }
.mapbox .node .card { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1.5; filter: drop-shadow(0 6px 14px rgba(15, 27, 45, .12)); transition: stroke .2s; }
.mapbox .node:hover .card, .mapbox .node:focus-visible .card, .mapbox .node.sel .card { stroke: var(--brand); stroke-width: 2.5; }
.mapbox .node .bar { fill: var(--ok); } .mapbox .node.warning .bar { fill: var(--warn); } .mapbox .node.critical .bar { fill: var(--bad); }
.mapbox .node .ico-bg { fill: var(--brand-wash); } .mapbox .node .ico { stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mapbox .node .ico .dot { fill: var(--brand); stroke: none; }
.mapbox .node .hp rect { fill: var(--ok-wash); } .mapbox .node.warning .hp rect { fill: var(--warn-wash); } .mapbox .node.critical .hp rect { fill: var(--bad-wash); }
.mapbox .node .hp text { font-size: 12px; font-weight: 600; fill: var(--ok); } .mapbox .node.warning .hp text { fill: var(--warn); } .mapbox .node.critical .hp text { fill: var(--bad); }
.mapbox .edge { fill: none; stroke: var(--bar); stroke-linecap: round; transition: opacity .2s; }
.mapbox .edge.warning { stroke: var(--warn); opacity: .55; } .mapbox .edge.critical { stroke: var(--bad); opacity: .55; }
.mapbox .edge-flow { fill: none; stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 2 14; opacity: .85; animation: flow 1.1s linear infinite; }
.mapbox .edge-flow.warning { stroke: var(--warn); } .mapbox .edge-flow.critical { stroke: var(--bad); }
@keyframes flow { to { stroke-dashoffset: -16; } }
.mapbox .arrow { fill: var(--brand); } .mapbox .arrow.warning { fill: var(--warn); } .mapbox .arrow.critical { fill: var(--bad); }
.mapbox .edge-head { fill: none; stroke: none; }
.mapbox .pill rect { fill: var(--surface); stroke: var(--rule-strong); } .mapbox .pill.warning rect { stroke: var(--warn); } .mapbox .pill.critical rect { stroke: var(--bad); }
.mapbox .pill text { font-size: 12px; font-weight: 600; }
.mapbox svg.has-sel .node:not(.sel):not(.linked), .mapbox svg.has-sel .edge-g:not(.hot) { opacity: .22; }
.map-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.map-tile { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.map-tile .mt-v { font-size: 22px; font-weight: 700; } .map-tile .mt-l { color: var(--graphite); font-size: 12px; } .map-tile .mt-s { color: var(--graphite); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-tile.ok .mt-v { color: var(--ok); } .map-tile.warn .mt-v { color: var(--warn); } .map-tile.bad .mt-v { color: var(--bad); }
.map-detail { margin-top: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 14px 16px; }
.map-detail .md-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 16px; }
.map-detail .md-grid { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 6px; } .map-detail .md-grid div { display: grid; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; color: var(--graphite); font-size: 13px; }
.map-legend .lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.lg-dot.ok { background: var(--ok); } .lg-dot.warn { background: var(--warn); } .lg-dot.bad { background: var(--bad); }
.map-legend .lg-line { display: inline-block; width: 26px; height: 4px; border-radius: 2px; background: var(--bar); margin-right: 6px; vertical-align: middle; }
.map-hint { display: flex; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--brand-wash); color: var(--ink); }
.map-hint code { background: var(--surface); padding: 1px 6px; border-radius: 6px; }
@media (max-width: 900px) { .map-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .mapbox .edge-flow { animation: none; } }

/* ---- in-app question dialog (replaces the browser prompt) ---- */
.up-box .ask-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.up-box .ask-head h3 { margin: 0 0 4px; font-size: 20px; }
.ask-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.ask-ico.good { background: color-mix(in srgb, #22c55e 16%, transparent); color: #1f9d68; }
.ask-ico.bad { background: color-mix(in srgb, #ef4444 16%, transparent); color: #d6414a; }
.ask-who { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent); color: var(--accent, #6366f1); word-break: break-all; }
.ask-lead { margin: 6px 0 12px; font-size: 14px; }
.ask-label { display: block; font-weight: 600; font-size: 14px; }
.ask-label textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px; border-radius: 12px; font: inherit; font-weight: 400; resize: vertical; min-height: 84px; }
.ask-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.ask-foot .btn.danger { background: #e5484d; color: #fff; border-color: #e5484d; }
/* the plan card: one compact status block */
.upgrade .up-state { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent); font-size: 13px; }
.upgrade .up-state:empty, .upgrade .up-state:not(:has(*:not(:empty))) { display: none; }
.upgrade .up-state .upgrade-head { margin: 0 0 2px; display: flex; align-items: center; gap: 6px; }
.upgrade .up-state .note { margin: 0; }
.upgrade .plan-link { display: inline-block; margin-top: 2px; font-size: 13px; }
.up-box:has(.ask-head) { padding: 26px 26px 22px; border-radius: 20px; width: min(480px, calc(100vw - 32px)); }

/* Invite your team */
.inv-grid { display: grid; gap: 14px; max-width: 760px; }
.inv-step { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 18px 20px; display: grid; gap: 12px; }
.inv-step.done { border-color: color-mix(in srgb, var(--good, #19a56f) 45%, var(--rule)); } .inv-step.locked { opacity: .75; }
.inv-head { display: flex; gap: 14px; align-items: flex-start; } .inv-head h2 { margin: 0; font-size: 17px; } .inv-head p { margin: 2px 0 0; }
.inv-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--wash); color: var(--graphite); }
.inv-n.done { background: #19a56f; color: #fff; } .inv-n.now { background: var(--brand); color: #fff; } .inv-n.wait { background: #f59e0b; color: #fff; }
.inv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* ApiLense Agent tab */
#agent-page .ag-tools { margin: 4px 0 12px; }
.ag-runbox { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); margin-bottom: 12px; }
.ag-prog { height: 8px; border-radius: 6px; background: var(--wash); overflow: hidden; }
.ag-prog i { display: block; height: 100%; background: var(--brand); transition: width .3s; }
.ag-flow { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.ag-diff { overflow: auto; max-height: 320px; background: var(--wash); padding: 10px; border-radius: 8px; font-size: 12px; }
.ag-field { display: grid; gap: 4px; margin: 12px 0; max-width: 560px; }
.ag-field input { padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: 8px; }
.ag-check { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
#agent-page .tbl tr.sel { background: var(--brand-wash); }
/* Agent overview: phase cards and the green pass line */
.ag-hero { padding: 6px 4px 14px; }
.ag-hero h2 { font-size: 30px; margin: 8px 0 4px; }
.ag-done { display: inline-flex; align-items: center; gap: 6px; background: #e6f6ec; color: #17803d; border-radius: 999px; padding: 3px 12px; font-weight: 650; font-size: 13px; }
.ag-done.off { background: var(--wash); color: var(--graphite); }
.ag-phase { display: grid; grid-template-columns: 64px minmax(0, 1fr) 200px auto; gap: 18px; align-items: center; padding: 18px 20px; margin: 12px 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }
.ag-phase h3 { margin: 0 0 4px; font-size: 18px; }
.ag-phase p { margin: 0; }
.ag-pico { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; }
.ag-pico.violet { background: #efeafe; color: #6b4de6; } .ag-pico.teal { background: #e0f5f2; color: #0f9d8a; }
.ag-pico.red { background: #fdeaea; color: #d83a3a; } .ag-pico.amber { background: #fff1de; color: #e08a00; }
.ag-pstat { display: grid; gap: 4px; font-size: 13px; justify-items: start; }
.ag-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--wash); margin-top: 10px; max-width: 420px; }
.ag-bar i.ok { background: #1fa65a; } .ag-bar i.bad { background: #d83a3a; }
#ag-tests tr.ag-pass td:first-child { box-shadow: inset 4px 0 0 #1fa65a; }
#ag-tests tr.ag-fail td:first-child { box-shadow: inset 4px 0 0 #d83a3a; }
@media (max-width: 860px) { .ag-phase { grid-template-columns: 52px minmax(0, 1fr); } .ag-pstat, .ag-phase .btn { grid-column: 1 / -1; } }

/* Dedicated ApiLense Agent page: dark hero with the agent artwork and the live progress list */
.ag-hero2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 24px; align-items: center; min-height: 380px; padding: 28px 30px; border-radius: 20px; color: #fff; margin-bottom: 18px;
  background: linear-gradient(90deg, #06173a 0%, rgba(6, 23, 58, .94) 44%, rgba(6, 23, 58, .12) 66%, rgba(6, 23, 58, .55) 100%), #06173a; }
.ag-hero2-text { max-width: 400px; } .ag-hero2-text h1 { font-size: 40px; margin: 0 0 8px; color: #fff; } .ag-hero2-text h1 span { color: #34b7ff; }
.ag-hero2-text p { color: #cfe0ff; margin: 0 0 14px; }
.ag-pick { display: grid; gap: 4px; max-width: 280px; font-size: 13px; color: #cfe0ff; } .ag-pick select { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(6,23,58,.7); color: #fff; }
.ag-panel { background: rgba(8, 28, 70, .78); border: 1px solid rgba(90, 160, 255, .45); border-radius: 16px; padding: 16px 18px; backdrop-filter: blur(6px); box-shadow: 0 0 32px rgba(40, 120, 255, .35); }
.ag-panel h3 { margin: 0 0 8px; color: #fff; font-size: 18px; }
.ag-step { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid rgba(255,255,255,.12); color: #e6efff; font-size: 14px; }
.ag-step small { color: #9db8e8; }
.ag-step.todo, .ag-step.na { color: #8fa6cf; }
.ag-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; background: rgba(255,255,255,.1); }
.ag-step.done .ag-tick { background: #1fb460; color: #fff; } .ag-step.run .ag-tick { background: #2a7bff; color: #fff; animation: agPulse 1s infinite alternate; }
@keyframes agPulse { to { opacity: .45; } }
@media (max-width: 860px) { .ag-hero2 { grid-template-columns: 1fr; min-height: 0; background-position: 70% 0; } .ag-hero2-text { max-width: none; } .ag-hero2-text h1 { font-size: 32px; } }
.ag-ai { border-left: 4px solid #6b4de6; background: #f6f3ff; border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.ag-ai p { margin: 6px 0; }
.ag-files { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.ag-code { max-height: 520px; white-space: pre; }
.ag-chat { display: grid; gap: 10px; margin: 12px 0; max-height: 560px; overflow: auto; }
.ag-msg { padding: 10px 14px; border-radius: 12px; background: var(--wash); max-width: 880px; }
.ag-msg.user { background: var(--brand-wash); justify-self: end; }
.ag-msg p { margin: 6px 0; white-space: pre-wrap; }
.ag-who { font-weight: 650; font-size: 12px; color: var(--graphite); }
.ag-refs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ag-note { font-size: 12px; margin-top: 6px; }
.ag-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.ag-ask textarea { padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: 8px; font: inherit; resize: vertical; }
.ag-keysteps { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.ag-keyform input[type=password] { padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: 8px; min-width: 280px; flex: 1; }

/* ======================= Shared page polish: summary tiles ======================= */
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 6px 0 20px; }
.ui-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 1px 2px rgba(15,27,45,.04); }
.ui-stat-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-wash); color: var(--brand); }
.ui-stat.ok .ui-stat-ico { background: var(--ok-wash); color: var(--ok); }
.ui-stat.warn .ui-stat-ico { background: var(--warn-wash); color: var(--warn); }
.ui-stat.bad .ui-stat-ico { background: var(--bad-wash); color: var(--bad); }
.ui-stat.mute .ui-stat-ico { background: var(--wash); color: var(--graphite); }
.ui-stat-n { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.ui-stat-l { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.ui-stat-s { font-size: 12.5px; color: var(--graphite); margin-top: 1px; }

/* shared field look (number, url and email inputs had no base style) */
.al-form input[type="text"], .al-form input[type="number"], .al-form input[type="url"], .al-form input[type="email"], .al-form select,
.al-digest input[type="text"], .sv-toolbar input[type="search"] {
  box-sizing: border-box; height: 42px; padding: 0 14px; font: inherit; font-size: 14.5px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 12px; outline: none; transition: border-color .15s, box-shadow .15s; }
.al-form input:focus, .al-form select:focus, .al-digest input:focus, .sv-toolbar input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.al-form input[type="number"] { width: 100px; }
.al-form select { padding-right: 30px; }

/* ======================= Alerts ======================= */
.al-rules { display: grid; gap: 12px; }
.al-rule { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--ok); border-radius: 14px; }
.al-rule.paused { border-left-color: var(--rule-strong); background: color-mix(in srgb, var(--wash) 55%, var(--surface)); }
.al-rule.paused .al-rule-name b, .al-rule.paused .al-rule-when { color: var(--graphite); }
.al-rule-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-wash); color: var(--brand); }
.al-rule-ico.error_rate { background: var(--bad-wash); color: var(--bad); }
.al-rule-ico.p95_ms { background: var(--warn-wash); color: var(--warn); }
.al-rule-ico.service_down { background: var(--bad-wash); color: var(--bad); }
.al-rule-main { flex: 1 1 auto; min-width: 0; }
.al-rule-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.al-rule-name b { font-size: 16px; }
.al-rule-when { margin-top: 3px; color: var(--ink); font-size: 14px; }
.al-rule-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 13px; align-items: center; }
.al-chan { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--wash); font-weight: 600; color: var(--graphite); }
.al-target { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--graphite); }
.al-rule-act { flex: 0 0 auto; }
.al-empty { text-align: center; padding: 28px 18px; }
.al-empty-ico { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 20px; display: grid; place-items: center; background: var(--brand-wash); color: var(--brand); }
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.al-empty .al-chips { justify-content: center; margin: 14px 0 0; }
.al-form .card-head { margin-bottom: 10px; }
.al-sec { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--rule); }
.al-sec-head { display: flex; gap: 12px; align-items: flex-start; }
.al-sec-head b { font-size: 15px; }
.al-sec-head .muted { font-size: 13px; margin-top: 2px; }
.al-step { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--brand); color: #fff; }
.al-sec-body { display: grid; gap: 14px; min-width: 0; }
.al-field { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.al-field > label { color: var(--graphite); font-size: 13.5px; font-weight: 600; }
.al-field > .al-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.al-field > .note { grid-column: 2; margin: 0; }
.al-field input[type="text"], .al-field input[type="url"], .al-field input[type="email"] { flex: 1 1 260px; min-width: 0; }
.al-preview { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--brand-wash); color: var(--brand-ink); font-size: 14px; line-height: 1.5; }
.al-preview svg { flex: 0 0 auto; margin-top: 3px; }
.al-digest-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.al-digest-row input { flex: 1 1 320px; min-width: 0; }
.al-quiet { display: flex; gap: 12px; align-items: center; padding: 6px 2px; }
.al-quiet-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-wash); color: var(--ok); flex: 0 0 auto; }
.al-timeline { display: grid; gap: 0; }
.al-ev { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 12px 0 12px 22px; border-top: 1px solid var(--rule); }
.al-ev:first-child { border-top: 0; }
.al-dot { position: absolute; left: 2px; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.al-ev.fail .al-dot { background: var(--bad); }
.al-ev-main { flex: 1 1 auto; min-width: 0; }
.al-ev-top { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.al-ev-top .muted { font-size: 12.5px; }
.al-ev-text { margin-top: 2px; font-size: 14px; }
.al-ev-err { margin-top: 4px; font-size: 13px; color: var(--bad); }
@media (max-width: 820px) {
  .al-sec { grid-template-columns: 1fr; gap: 12px; }
  .al-field { grid-template-columns: 1fr; }
  .al-field > .note { grid-column: 1; }
  .al-rule { flex-wrap: wrap; }
  .al-rule-act { width: 100%; }
}

/* ======================= Services ======================= */
.sv-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 16px; }
.sv-toolbar input[type="search"] { flex: 1 1 260px; max-width: 380px; }
.sv-filters { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.sv-fchip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--graphite); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sv-fchip:hover { border-color: var(--graphite); }
.sv-fchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sv-hint { flex: 1 1 100%; font-size: 12.5px; }
.sv-list { display: grid; gap: 16px; }
.sv-card { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--ok); border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(15,27,45,.04); }
.sv-card.stale { border-left-color: var(--warn); }
.sv-card.offline { border-left-color: var(--bad); }
.sv-card.unknown { border-left-color: var(--rule-strong); }
.sv-head { display: flex; align-items: center; gap: 14px; }
.sv-title { flex: 1 1 auto; min-width: 0; }
.sv-title h3 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.sv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chip.ver { background: var(--brand-wash); color: var(--brand-ink); }
.chip.env { background: var(--wash); color: var(--graphite); text-transform: lowercase; }
.sv-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 22%, transparent); }
.sv-dot.stale { background: var(--warn); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 22%, transparent); }
.sv-dot.offline { background: var(--bad); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bad) 22%, transparent); }
.sv-dot.unknown { background: var(--rule-strong); box-shadow: none; }
.sv-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 16px 0 14px; }
.sv-m { padding: 10px 12px; border-radius: 12px; background: var(--wash); }
.sv-m-l { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--graphite); }
.sv-m-v { font-size: 21px; font-weight: 800; margin-top: 2px; color: var(--ink); }
.sv-m-s { font-size: 12px; color: var(--graphite); margin-top: 1px; }
.sv-m.warn .sv-m-v { color: var(--warn); } .sv-m.bad .sv-m-v { color: var(--bad); }
.sv-inst { border-radius: 12px; }
.sv-none { margin: 0; }
.mtr { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.mtr-track { flex: 1 1 auto; height: 7px; border-radius: 4px; background: var(--wash); overflow: hidden; }
.mtr-fill { height: 100%; background: var(--ok); border-radius: 4px; }
.mtr-fill.warn { background: var(--warn); } .mtr-fill.bad { background: var(--bad); }
.mtr span { font-size: 12.5px; color: var(--graphite); min-width: 34px; text-align: right; }
@media (max-width: 640px) { .sv-head { flex-wrap: wrap; } .ui-stat-n { font-size: 22px; } }
.sv-list { grid-template-columns: minmax(0, 1fr); }
.sv-card, .sv-page, .alerts-page { min-width: 0; }
.sv-inst { max-width: 100%; }

/* ======================= Agent: project facts, findings, chat panel ======================= */
.ag-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.ag-fact { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--wash); }
.ag-fact b { font-size: 22px; font-weight: 800; color: var(--ink); }
.ag-fact span { font-size: 12.5px; color: var(--graphite); }
.ag-deps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ag-findings { display: grid; gap: 14px; margin-top: 14px; }
.ag-find { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--ok); border-radius: 14px; padding: 16px 18px; }
.ag-find.critical { border-left-color: var(--bad); } .ag-find.medium { border-left-color: var(--warn); } .ag-find.low { border-left-color: var(--rule-strong); }
.ag-find-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ag-find-head b { font-size: 15.5px; flex: 1 1 260px; }
.ag-find-where { display: flex; align-items: center; gap: 6px; color: var(--graphite); font-size: 13px; margin-bottom: 8px; overflow-wrap: anywhere; }
.ag-find p { margin: 8px 0; }
.ag-find pre.ag-diff { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ag-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #7c3aed, #3b82f6); color: #fff; font: inherit; font-weight: 700; box-shadow: 0 10px 30px rgba(79,70,229,.4); cursor: pointer; }
.ag-fab:hover { filter: brightness(1.08); }
.ag-dock { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: min(420px, calc(100vw - 24px)); height: min(640px, calc(100vh - 44px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 20px; box-shadow: 0 24px 60px rgba(15,27,45,.28); overflow: hidden; }
.ag-dock-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #1e1b4b, #3730a3); color: #fff; }
.ag-dock-head div { flex: 1 1 auto; display: flex; flex-direction: column; }
.ag-dock-head small { opacity: .8; font-size: 12px; }
.ag-dock-head .btn { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.ag-dock-bot { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.ag-dock-msgs { flex: 1 1 auto; overflow: auto; padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.ag-dock-msgs .ag-msg { max-width: 100%; font-size: 14px; }
.ag-dock-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--rule); }
.ag-dock-chips .sv-fchip { padding: 5px 11px; font-size: 12.5px; }
.ag-dock-chips .sv-fchip[disabled] { opacity: .5; cursor: not-allowed; }
.ag-dock-in { display: flex; gap: 8px; padding: 10px 14px 14px; align-items: flex-end; }
.ag-dock-in textarea { flex: 1 1 auto; min-width: 0; resize: none; border: 1px solid var(--rule-strong); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); }
@media (max-width: 560px) { .ag-dock { right: 8px; bottom: 8px; height: min(78vh, 640px); } .ag-fab { right: 14px; bottom: 14px; } }

.ag-fab-dot { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 12px; display: inline-grid; place-items: center; }
/* The chat floats over the page; the page keeps its full width */
.ag-ava { display: inline-block; flex: none; border-radius: 50%; background: #eaf1ff url('/site/img/agent-avatar.jpg') center / cover no-repeat; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(15,27,45,.25); }
.ag-fab .ag-ava { width: 34px; height: 34px; margin: -6px 2px -6px -10px; }
.ag-fab { padding-top: 11px; padding-bottom: 11px; }
.ag-dock-bot.ag-ava { width: 40px; height: 40px; background-color: #eaf1ff; border-color: rgba(255,255,255,.7); }
.ag-dock-msgs .ag-msg, .ag-dock-msgs .ag-msg * { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.ag-dock-msgs .ag-msg { white-space: pre-wrap; }
.ag-dock-msgs .ag-msg .chip, .ag-dock-msgs .ag-msg [data-ref] { white-space: normal; max-width: 100%; }

.db-step { margin: 14px 0; border: 1px solid var(--rule); border-left: 4px solid #22c55e; border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.db-step.bad { border-left-color: #ef4444; }
.db-step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.db-step-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #ede9fe; color: #5b21b6; font-weight: 700; font-size: 12px; flex: none; }
.db-step-sql { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* ---- Licences page */
#lic-page .lic-card { margin-top: 22px; scroll-margin-top: 90px; }
#lic-page .lic-h { margin: 18px 0 8px; }
.lic-usage .ui-stat { padding: 12px 16px; }
.lic-usage .ui-stat-n { font-size: 20px; }
.lic-jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.lic-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; margin: 0 0 14px; }
.lic-who { display: flex; align-items: center; gap: 12px; }
.lic-av { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; background: var(--brand-wash); color: var(--brand); }
.lic-av.org { background: #fef3c7; color: #b45309; }
.lic-actions { flex-wrap: wrap; gap: 6px; }
#lic-table td { vertical-align: middle; }
.lic-form { display: grid; gap: 14px; margin-top: 4px; }
.lic-step { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); margin-top: 8px; }
.lic-step span { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-wash); color: var(--brand); display: grid; place-items: center; font-size: 12px; }
.lic-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.lic-kind { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 14px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--surface); cursor: pointer; font: inherit; color: inherit; }
.lic-kind:hover { border-color: var(--brand); }
.lic-kind.on { border-color: var(--brand); background: var(--brand-wash); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.lic-kind small { grid-column: 1 / -1; color: var(--graphite); font-size: 12.5px; line-height: 1.4; }
.lic-kind-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--wash); color: var(--brand); }
.lic-kind-t { display: flex; align-items: center; gap: 8px; }
.lic-tag { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--wash); color: var(--graphite); text-transform: uppercase; letter-spacing: .04em; }
.lic-tag.pro { background: #ede9fe; color: #5b21b6; }
.lic-tag.paid { background: #fef3c7; color: #92400e; }
.lic-tag.free { background: var(--ok-wash); color: var(--ok); }
.lic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.lic-field { display: grid; gap: 5px; align-content: start; }
.lic-field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.lic-field input, .lic-field select { width: 100%; box-sizing: border-box; min-height: 42px; }
.lic-field input[type="number"], .lic-field input[type="date"] { max-width: 240px; }
.lic-hint { color: var(--graphite); font-size: 12px; }
.lic-err { color: var(--bad); font-size: 12.5px; min-height: 0; }
.lic-err:empty { display: none; }
.lic-field.bad input { border-color: var(--bad); }
.lic-period { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--brand-wash); border: 1px solid rgba(99,102,241,.25); }
.lic-period[hidden], .lic-field[hidden], .lic-grid[hidden] { display: none; }
.lic-submit { align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 720px) { .lic-filters { grid-template-columns: 1fr; } }
@media (min-width: 1100px) { #lic-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---- API security page */
#sec-stats { margin-bottom: 14px; }
.sec-posture { background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; display: grid; gap: 10px; }
.sec-posture-t { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.sec-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--wash); }
.sec-bar i { display: block; min-width: 6px; } .sec-bar i + i { border-left: 2px solid var(--surface); }
.sec-bar .FAIL { background: #ef4444; } .sec-bar .WARN { background: #f5a524; } .sec-bar .REVIEW { background: #4f9cff; } .sec-bar .PASS { background: #22c55e; }
.sec-legend { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; margin-top: 4px; font-size: 13px; }
.sec-dot { width: 12px; height: 12px; } .sec-dot.PASS { opacity: .8; }
.sec-rl { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 4px 0 10px; }
.sec-rl-f { display: grid; gap: 4px; font-size: 13px; font-weight: 600; } .sec-rl-f small { color: var(--graphite); font-weight: 400; }
.sec-rl-f input { width: 130px; min-height: 40px; box-sizing: border-box; }
.sec-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.sec-cov { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; background: var(--warn-wash); color: var(--warn); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sec-cov.full { background: var(--ok-wash); color: var(--ok); }
.sec-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.sec-table thead th { position: sticky; top: 0; background: var(--wash); font-size: 12px; text-transform: none; }
.sec-table td { padding: 10px 8px; border-top: 1px solid var(--rule); }
.sec-row { cursor: pointer; } .sec-row:hover td { background: var(--wash); } .sec-row.open td { background: var(--brand-wash); }
.sec-cell { text-align: center; } .sec-found { white-space: nowrap; text-align: left; }
.sec-n { display: inline-block; margin-right: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.sec-n.FAIL { background: var(--bad-wash); color: var(--bad); } .sec-n.WARN { background: var(--warn-wash); color: var(--warn); } .sec-n.REVIEW { background: #e0efff; color: #1d4ed8; } .sec-n.PASS { background: var(--ok-wash); color: var(--ok); }
.sec-detail > td { background: var(--wash); padding: 6px 14px 14px; }
.sec-finding { padding: 12px 14px; margin-top: 10px; border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: 12px; background: var(--surface); }
.sec-finding.st-FAIL { border-left-color: #ef4444; } .sec-finding.st-WARN { border-left-color: #f5a524; } .sec-finding.st-REVIEW { border-left-color: #4f9cff; } .sec-finding.st-PASS { border-left-color: #22c55e; }
.sec-fhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec-finding ul { margin: 8px 0 8px 18px; }
.sec-fix { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--ok-wash); color: var(--ink); font-size: 13.5px; }
.sec-fix svg { flex: none; margin-top: 2px; color: var(--ok); }
.sec-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.sec-grid2 .sec-finding { margin-top: 0; }
#sec-rate, .card { scroll-margin-top: 90px; }
.sec-table { table-layout: auto; } .sec-table th.sec-col, .sec-cell { padding-left: 4px; padding-right: 4px; }
.sec-table td:first-child { min-width: 150px; } .sec-found { white-space: normal; min-width: 110px; } .sec-found .sec-n { margin: 0 4px 4px 0; }
.sec-detail > td { max-width: 0; } .sec-open { min-width: 0; }

/* Settings: provider guides (email and payments) */
.prov-guide { margin: 8px 0 12px; padding: 12px 14px; border: 1px solid var(--line, #e3e8f6); border-radius: 12px; background: #f7f9ff; font-size: 13.5px; }
.prov-guide a { display: inline-block; margin-top: 6px; }
.prov-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.prov-list b { font-weight: 600; }
.prov-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 5px; }
.arow select { max-width: 100%; }
.ready-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ready-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line, #e3e8f6); border-radius: 12px; background: #fff; }
.ready-list .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: #94a3b8; }
.ready-list .ok .dot { background: #059669; } .ready-list .warn .dot { background: #d97706; } .ready-list .bad .dot { background: #dc2626; }
.ready-list .what { flex: 1; } .ready-list .what small { display: block; color: var(--mut, #64708f); }
.ready-bar { height: 8px; border-radius: 99px; background: #e8edfb; overflow: hidden; margin: 8px 0 2px; }
.ready-bar u { display: block; height: 100%; background: linear-gradient(90deg, #34d399, #4f6df5); }

/* Settings forms: every kind of box looks the same, and buttons get room */
.arow input[type="text"], .arow input[type="email"], .arow input[type="tel"], .arow input[type="url"], .arow input[type="number"], .arow input[type="password"], .arow select {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--line, #e3e8f6); border-radius: 10px; background: #fff; color: inherit; font: inherit; }
.arow input:focus, .arow select:focus { outline: 2px solid #c7d2fe; border-color: #4f6df5; }
.arow input[type="number"] { width: 110px; flex: 0 0 110px; }
.arow input[type="checkbox"] { min-height: 0; width: auto; }
.card .controls { margin-top: 12px; }
.ready-list + .controls { margin-top: 14px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .arow input[type="text"], :root:not([data-theme="light"]) .arow input[type="email"], :root:not([data-theme="light"]) .arow input[type="tel"], :root:not([data-theme="light"]) .arow input[type="url"], :root:not([data-theme="light"]) .arow input[type="number"], :root:not([data-theme="light"]) .arow input[type="password"], :root:not([data-theme="light"]) .arow select { background: #0f1630; } }
:root[data-theme="dark"] .arow input[type="text"], :root[data-theme="dark"] .arow input[type="email"], :root[data-theme="dark"] .arow input[type="tel"], :root[data-theme="dark"] .arow input[type="url"], :root[data-theme="dark"] .arow input[type="number"], :root[data-theme="dark"] .arow input[type="password"], :root[data-theme="dark"] .arow select { background: #0f1630; }

/* ---- Agent: quality audit (testing and defect prediction) ---- */
.qa-verdict { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 22px; margin: 4px 0 14px; border-radius: 18px; border: 1px solid var(--rule); background: var(--surface); box-shadow: 0 1px 2px rgba(15,27,45,.05); }
.qa-verdict h2 { margin: 0 0 4px; font-size: 21px; color: var(--ink); }
.qa-verdict ul { margin: 4px 0 6px 18px; padding: 0; color: var(--ink); }
.qa-vico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--wash); color: var(--graphite); }
.qa-vact { display: flex; gap: 8px; flex-wrap: wrap; }
.qa-v-NOT_READY { border-color: #f1b4b4; background: linear-gradient(120deg, var(--bad-wash), var(--surface)); } .qa-v-NOT_READY .qa-vico { background: var(--bad-wash); color: var(--bad); }
.qa-v-INCOMPLETE, .qa-v-CONDITIONAL { border-color: #f0d49a; background: linear-gradient(120deg, var(--warn-wash), var(--surface)); } .qa-v-INCOMPLETE .qa-vico, .qa-v-CONDITIONAL .qa-vico { background: var(--warn-wash); color: var(--warn); }
.qa-v-READY { border-color: #b5e0c3; background: linear-gradient(120deg, var(--ok-wash), var(--surface)); } .qa-v-READY .qa-vico { background: var(--ok-wash); color: var(--ok); }
.qa-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.qa-stage { display: flex; flex-direction: column; gap: 4px; padding: 14px 15px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.qa-stage b { color: var(--ink); font-size: 14px; } .qa-stage small { color: var(--graphite); line-height: 1.4; }
.qa-sico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--wash); color: var(--graphite); }
.qa-sst { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--graphite); }
.qa-s-done { border-color: #b5e0c3; } .qa-s-done .qa-sico { background: var(--ok-wash); color: var(--ok); } .qa-s-done .qa-sst { color: var(--ok); }
.qa-s-warning, .qa-s-done-incomplete, .qa-s-done-with-problems { border-color: #f0d49a; } .qa-s-warning .qa-sico, .qa-s-done-incomplete .qa-sico, .qa-s-done-with-problems .qa-sico { background: var(--warn-wash); color: var(--warn); } .qa-s-warning .qa-sst, .qa-s-done-incomplete .qa-sst, .qa-s-done-with-problems .qa-sst { color: var(--warn); }
.qa-s-failed { border-color: #f1b4b4; } .qa-s-failed .qa-sico { background: var(--bad-wash); color: var(--bad); } .qa-s-failed .qa-sst { color: var(--bad); }
.qa-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 4px 0 10px; }
.qa-tile { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--rule); background: var(--surface); } .qa-tile b { display: block; font-size: 28px; line-height: 1.1; color: var(--ink); } .qa-tile span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--graphite); }
.qa-tile.qa-pass { background: var(--ok-wash); border-color: #b5e0c3; } .qa-tile.qa-pass b { color: var(--ok); }
.qa-tile.qa-fail { background: var(--bad-wash); border-color: #f1b4b4; } .qa-tile.qa-fail b { color: var(--bad); }
.qa-tile.qa-blocked { background: var(--warn-wash); border-color: #f0d49a; } .qa-tile.qa-blocked b { color: var(--warn); }
.qa-tile.qa-skipped { background: var(--brand-wash); border-color: #cfcaf6; } .qa-tile.qa-skipped b { color: var(--brand-ink); }
.qa-tile.qa-sev-high { background: var(--bad-wash); } .qa-tile.qa-sev-medium { background: var(--warn-wash); } .qa-tile.qa-sev-low { background: var(--ok-wash); }
.qa-st { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; background: var(--wash); color: var(--graphite); white-space: nowrap; }
.qa-st.qa-pass { background: var(--ok-wash); color: var(--ok); } .qa-st.qa-fail { background: var(--bad-wash); color: var(--bad); } .qa-st.qa-blocked { background: var(--warn-wash); color: var(--warn); } .qa-st.qa-skipped { background: var(--brand-wash); color: var(--brand-ink); }
.chip.qa-ev-confirmed-test-failure { background: var(--bad-wash); color: var(--bad); } .chip.qa-ev-ai-hypothesis { background: var(--warn-wash); color: var(--warn); } .chip.qa-ev-verified-config-mismatch { background: var(--brand-wash); color: var(--brand-ink); }
.qa-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 4px 0 10px; }
.qa-sel { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--graphite); font-weight: 600; } .qa-sel select, .qa-sel input { min-width: 150px; } .qa-grow { flex: 1 1 220px; } .qa-grow input { width: 100%; }
.qa-find { border: 1px solid var(--rule); border-left-width: 4px; border-radius: 12px; background: var(--surface); margin: 10px 0; padding: 10px 14px; }
.qa-find.qa-f-high { border-left-color: var(--bad); } .qa-find.qa-f-medium { border-left-color: var(--warn); } .qa-find.qa-f-low { border-left-color: var(--ok); } .qa-find.qa-f-info { border-left-color: var(--rule-strong); }
.qa-fhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; text-align: left; background: none; border: 0; padding: 2px 0; cursor: pointer; font: inherit; color: var(--ink); } .qa-fhead b { flex: 1 1 260px; }
.qa-fhead svg { transition: transform .15s; } .qa-find.open .qa-fhead svg { transform: rotate(180deg); }
.qa-score { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; padding: 1px 8px; border-radius: 8px; background: var(--wash); color: var(--ink); }
.qa-fwhere { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--graphite); font-size: 13px; margin-top: 4px; }
.qa-detail { margin: 10px 0 2px; } .qa-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 14px; padding: 6px 0; border-top: 1px solid var(--rule); } .qa-row dt { color: var(--graphite); font-size: 12.5px; font-weight: 600; } .qa-row dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.qa-code { max-height: 360px; overflow: auto; white-space: pre; }
.qa-ep { cursor: pointer; } .qa-ep:hover, .qa-ep.on { background: var(--brand-wash); }
.qa-flow { margin: 4px 0 8px 20px; padding: 0; line-height: 1.9; } .qa-layer { text-transform: lowercase; }
.qa-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .qa-cmp textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
@media (max-width: 860px) { .qa-verdict { grid-template-columns: 44px minmax(0, 1fr); } .qa-vact { grid-column: 1 / -1; } .qa-cmp { grid-template-columns: 1fr; } .qa-row { grid-template-columns: 1fr; } }
@media print { .qa-vact, .qa-tabs, .qa-filters { display: none; } }
/* audit tables scroll inside their card instead of widening the page */
#agent-page .tw, .qa-detail .tw, .qa-cmp-wrap { overflow-x: auto; max-width: 100%; }
#agent-page .card, #agent-page .qa-find { min-width: 0; }
#qa-tests td, #qa-db td { vertical-align: top; }
#qa code, #agent-page .qa-find code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
#qa pre { max-width: 100%; overflow-x: auto; }
#qa .qa-find, #qa .qa-detail, #qa .qa-detail dd { min-width: 0; overflow-wrap: anywhere; }
/* account page on phones: long keys and copy buttons wrap instead of widening the page */
.acct-line, .acct-value, .wk-key { min-width: 0; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
@media (max-width: 520px) { .acct-row { grid-template-columns: minmax(0, 1fr) auto; } .acct-row .acct-label { grid-column: 1 / -1; } }

/* ---- Setup page redesign ---- */
.steps { gap: 18px; }
.setup-hero { display: flex; gap: 24px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 26px 28px; border-radius: 20px; border: 1px solid var(--rule); background: linear-gradient(135deg, #eef0ff 0%, #e6f6fb 100%); }
.setup-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 6px; }
.setup-hero h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.2; color: var(--ink); }
.setup-hero p { margin: 0; color: var(--graphite); max-width: 520px; }
.setup-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setup-flow span { background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13px; color: var(--ink); box-shadow: 0 1px 2px rgba(15,27,45,.06); }
.setup-flow i { font-style: normal; color: var(--brand); font-weight: 700; }
.steps .conn-status { border-radius: 16px; padding: 14px 18px; box-shadow: 0 1px 2px rgba(15,27,45,.05); }
.steps .step { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; box-shadow: 0 2px 10px rgba(15,27,45,.05); }
.steps .step::before { width: 34px; height: 34px; font-size: 15px; margin-top: 0; background: linear-gradient(135deg, var(--brand), var(--lens)); color: #fff; box-shadow: 0 4px 10px rgba(79,70,229,.3); }
.steps .step h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 19px; margin: 3px 0 8px; color: var(--ink); }
.step-danger { border-color: #f1c9c9; background: #fffafa; }
.step-danger::before { background: var(--bad) !important; box-shadow: none !important; }
.pill { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.pill.req { background: var(--bad-wash); color: var(--bad); }
.pill.opt { background: var(--wash); color: var(--graphite); }
.pill.auto { background: var(--ok-wash); color: var(--ok); }
.steps .keybox { padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.steps .keybox code { background: var(--surface); border: 1px solid var(--rule); }
.steps .key-rotate { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--rule-strong); border-radius: 12px; }
.steps textarea { width: 100%; border-radius: 12px; border: 1px solid var(--rule-strong); padding: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--paper); }
.steps input[type=file] { padding: 10px; border: 1px dashed var(--rule-strong); border-radius: 12px; width: 100%; background: var(--paper); }
.steps .btn { border-radius: 10px; }
.cfg-card { margin-top: 18px; padding: 20px; border: 1px solid #cfd2fa; border-radius: 16px; background: linear-gradient(180deg, #f7f8ff, #ffffff 120px); box-shadow: 0 4px 16px rgba(79,70,229,.08); }
.cfg-title { margin: 0 0 4px; font-size: 17px; color: var(--ink); }
.cfg-card .seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--wash); border-radius: 12px; margin: 6px 0 12px; }
.cfg-card .seg-btn { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font-weight: 600; cursor: pointer; color: var(--graphite); }
.cfg-card .seg-btn.on { background: var(--surface); color: var(--brand-ink); box-shadow: 0 1px 3px rgba(15,27,45,.15); }
.cfg-block { background: #0f1b2d; color: #dbe6f5; border-radius: 12px; padding: 16px 18px; line-height: 1.7; font-size: 13px; }
.cfg-group { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--rule); }
.cfg-group b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cfg-group span { color: var(--graphite); font-size: 13px; }
.cfg-group.req b { color: var(--bad); }
.cfg-group.rec b { color: var(--warn); }
.cfg-group.opt b { color: var(--graphite); }
.cfg-group.opt ~ .cfg-row { opacity: .9; }
.cfg-row { padding: 10px 0; }
.cfg-card input[type=text], .cfg-card input[type=url] { padding: 9px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--surface); }
.cfg-svcs { border: 1px solid var(--rule); background: var(--paper); border-radius: 12px; }
.steps .tabs-mini button { border-radius: 999px; padding: 6px 16px; }
.steps pre { border-radius: 12px; }
@media (max-width: 640px) {
  .setup-hero { padding: 20px; } .setup-hero h2 { font-size: 22px; }
  .steps .step { grid-template-columns: 1fr; padding: 18px; }
  .steps .step::before { margin-bottom: -4px; }
}
.steps { grid-template-columns: minmax(0, 1fr); }
.steps .step > div, .cfg-card, .cfg-value { min-width: 0; }
.cfg-row > * { min-width: 0; }
@media (max-width: 640px) { .setup-flow { display: none; } .steps .keybox code { max-width: 100%; } }

/* ---- Agent: Load your code ---- */
.ag-load { border-radius: 20px; padding: 24px 26px; background: linear-gradient(180deg, #f8f9ff, #fff 140px); border: 1px solid #d6d9fa; box-shadow: 0 6px 22px rgba(79,70,229,.08); }
.ag-current { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; margin: 4px 0 18px; border-radius: 14px; background: var(--ok-wash); border: 1px solid #bfe3cb; }
.ag-src-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.ag-src-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--lens)); }
.ag-grow { min-width: 0; }
.ag-grow > p { margin: 2px 0 10px; }
.ag-load select { width: 100%; max-width: 640px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--surface); font-size: 14px; }
.ag-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--graphite); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ag-or::before, .ag-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.ag-load .seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--wash); border-radius: 12px; margin-bottom: 14px; }
.ag-load .seg-btn { border: 0; background: transparent; padding: 8px 18px; border-radius: 9px; font-weight: 600; cursor: pointer; color: var(--graphite); }
.ag-load .seg-btn.on { background: var(--surface); color: var(--brand-ink); box-shadow: 0 1px 3px rgba(15,27,45,.15); }
.ag-pane { max-width: 760px; }
.ag-drop { padding: 18px; border: 2px dashed var(--rule-strong); border-radius: 14px; background: var(--paper); margin-bottom: 12px; }
.ag-drop input { width: 100%; }
.ag-field { display: grid; gap: 6px; margin-bottom: 12px; font-weight: 600; font-size: 13px; }
.ag-field input { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--surface); font-weight: 400; font-size: 14px; width: 100%; }
.ag-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ag-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ag-chip { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 999px; padding: 5px 14px; font-weight: 600; cursor: pointer; }
.ag-chip:hover { border-color: var(--brand); color: var(--brand-ink); }
.ag-fine { font-size: 12.5px; margin: 6px 0 12px; }
.ag-load .ag-check { display: flex; gap: 8px; align-items: center; margin: 20px 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--brand-wash); font-weight: 600; color: var(--brand-ink); cursor: pointer; }
.ag-imsg { margin-top: 10px; min-height: 20px; color: var(--graphite); }
.ag-imsg.bad { color: var(--bad); font-weight: 600; }
@media (max-width: 640px) { .ag-two { grid-template-columns: 1fr; } .ag-load { padding: 18px 16px; } .ag-src-step { grid-template-columns: 1fr; } .ag-src-n { display: none; } }

/* ---- Agent hero: mascot + flow (replaces the dark hero and the plain checklist) ---- */
.ag-hero2.ag-hero3, .ag-hero2 { display: block; min-height: 0; padding: 28px 30px 24px; color: var(--ink); border: 1px solid #d6dcf5; border-radius: 22px;
  background: radial-gradient(900px 300px at 85% 0%, #dff1ff 0%, transparent 70%), linear-gradient(135deg, #f1f4ff 0%, #e8f6fb 100%); box-shadow: 0 6px 24px rgba(79,70,229,.08); }
.ag-hero3-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: center; }
.ag-hero2-text { max-width: 560px; }
.ag-kicker { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 8px; }
.ag-hero2-text h1 { font-size: 42px; margin: 0 0 8px; color: var(--ink); letter-spacing: -.01em; }
.ag-hero2-text h1 span { color: #0d9bd8; }
.ag-hero2-text p { color: var(--graphite); font-size: 15px; line-height: 1.55; }
.ag-pick { color: var(--graphite); font-weight: 600; }
.ag-pick select { border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); padding: 9px 12px; border-radius: 12px; }
.ag-robot { width: 340px; height: 290px; justify-self: center; background: url('/site/img/apilense-agent-light.jpg') no-repeat; background-size: 900px 600px; background-position: -305px -38px;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.ag-flow-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 18px 0 12px; padding-top: 16px; border-top: 1px solid #d6dcf5; }
.ag-flow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 26px; }
.ag-flow .ag-step { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ico tick" "txt txt"; gap: 10px 6px; align-items: start; padding: 14px 12px 14px; border: 1px solid var(--rule); border-top: 1px solid var(--rule);
  border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(15,27,45,.06); font-size: 13px; line-height: 1.35; }
.ag-flow .ag-step:not(:last-child)::after { content: ""; position: absolute; top: 34px; left: calc(100% + 2px); width: 22px; border-top: 2px dashed var(--rule-strong); }
.ag-flow .ag-step.done:not(:last-child)::after { border-top: 2px solid #1fb460; }
.ag-flow .ag-step.run:not(:last-child)::after { border-top-color: #2a7bff; }
.ag-nico { grid-area: ico; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--wash); color: var(--graphite); }
.ag-stt { grid-area: txt; font-weight: 600; } .ag-stt small { display: block; font-weight: 400; color: var(--graphite); margin-top: 2px; }
.ag-flow .ag-tick { grid-area: tick; background: var(--wash); color: var(--graphite); }
.tone-blue .ag-nico { background: #e0efff; color: #1d6fd6; } .tone-violet .ag-nico { background: #ece6ff; color: #6d4ce0; } .tone-teal .ag-nico { background: #dff5f1; color: #0f8f7e; }
.tone-green .ag-nico { background: #def5e6; color: #1b9a52; } .tone-amber .ag-nico { background: #fdf0d6; color: #c47a0a; } .tone-red .ag-nico { background: #fde4e4; color: #d23b3b; } .tone-purple .ag-nico { background: #efe6fb; color: #8a47d6; }
.ag-flow .ag-step.todo, .ag-flow .ag-step.na { color: var(--graphite); background: #fafbfd; }
.ag-flow .ag-step.todo .ag-nico, .ag-flow .ag-step.na .ag-nico { filter: grayscale(.7); opacity: .75; }
.ag-flow .ag-step.done { border-color: #bfe3cb; }
.ag-flow .ag-step.run { border-color: #2a7bff; box-shadow: 0 0 0 3px rgba(42,123,255,.15); }
.ag-flow .ag-step.done .ag-tick { background: #1fb460; color: #fff; } .ag-flow .ag-step.run .ag-tick { background: #2a7bff; color: #fff; }
@media (max-width: 1100px) { .ag-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ag-flow .ag-step:nth-child(4)::after { display: none; } }
@media (max-width: 860px) {
  .ag-hero3-top { grid-template-columns: 1fr; } .ag-robot { width: 260px; height: 222px; background-size: 690px 460px; background-position: -234px -29px; }
  .ag-hero2-text h1 { font-size: 32px; } .ag-hero2 { padding: 20px 16px; }
  .ag-flow { grid-template-columns: 1fr; gap: 20px; }
  .ag-flow .ag-step { grid-template-columns: 44px 1fr auto; grid-template-areas: "ico txt tick"; align-items: center; }
  .ag-flow .ag-step:not(:last-child)::after, .ag-flow .ag-step:nth-child(4)::after { display: block; top: 100%; left: 34px; width: 0; height: 20px; border-top: 0; border-left: 2px dashed var(--rule-strong); }
  .ag-flow .ag-step.done:not(:last-child)::after { border-left: 2px solid #1fb460; }
}
.ag-flow { padding: 0; margin: 0; gap: 22px; }
.ag-flow .ag-step { padding: 14px 10px; overflow-wrap: anywhere; font-size: 12.5px; }
.ag-flow .ag-step:not(:last-child)::after { width: 18px; }
.ag-robot { background-position: -335px -38px; }
@media (max-width: 860px) { .ag-robot { background-position: -258px -29px; } }
.ag-flow { gap: 18px; }
.ag-flow .ag-step { padding: 14px 8px; overflow-wrap: break-word; font-size: 12px; }
.ag-flow .ag-step:not(:last-child)::after { width: 14px; }
@media (max-width: 860px) { .ag-flow { gap: 20px; } .ag-flow .ag-step { padding: 12px; font-size: 13.5px; } }
@media (min-width: 861px) { .ag-flow .ag-step { padding: 14px 6px 14px 8px; font-size: 11.5px; } }
@media (min-width: 861px) and (max-width: 1500px) { .ag-flow .ag-step { padding: 14px 4px 14px 7px; font-size: 11px; letter-spacing: -.01em; } }

/* ===== Lifecycle: triage, what changed, release gate ===== */
.lc-asidebar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }
.lc-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); }
.lc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lc-track { flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: var(--rule-strong); position: relative; transition: background .15s; }
.lc-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,27,45,.3); transition: transform .15s; }
.lc-switch input:checked + .lc-track { background: var(--brand); }
.lc-switch input:checked + .lc-track::after { transform: translateX(16px); }
.lc-switch input:focus-visible + .lc-track { outline: 2px solid var(--brand); outline-offset: 2px; }
.lc-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--graphite); }
.lc-note.warn { color: var(--warn); background: var(--warn-wash); padding: 4px 12px; border-radius: 999px; }

.lc-triage { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.lc-form { display: grid; gap: 10px; margin-top: 10px; padding: 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; }
.lc-form select, .lc-form input[type=text], .lc-form input[type=date] { width: 100%; box-sizing: border-box; }
.lc-until { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.lc-until input { width: auto; }
.lc-decision { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); }
.lc-decision.ar { background: var(--warn-wash); border-color: #f0d49a; }
.lc-decision.fp { background: var(--ok-wash); border-color: #b5e0c3; }
.lc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--surface); color: var(--ink); }
.lc-decision.ar .lc-badge { color: var(--warn); } .lc-decision.fp .lc-badge { color: var(--ok); }
.lc-why { font-weight: 600; color: var(--ink); flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.lc-by { font-size: 12.5px; }

.lc-strip { margin: 4px 0 18px; padding: 16px 20px; background: linear-gradient(135deg, var(--surface) 0%, var(--brand-wash) 160%); border: 1px solid var(--rule); border-radius: 18px; box-shadow: 0 1px 2px rgba(15,27,45,.04); }
.lc-strip-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lc-strip-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #6366f1, #4f46e5); box-shadow: 0 6px 14px rgba(79,70,229,.28); }
.lc-strip-text { flex: 1 1 260px; min-width: 0; }
.lc-strip-text h3 { margin: 0 0 6px; font-size: 16px; }
.lc-strip-text p { margin: 6px 0 0; font-size: 13px; }
.lc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-pill { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 650; background: var(--wash); color: var(--graphite); }
.lc-pill b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.lc-pill.bad { background: var(--bad-wash); color: var(--bad); } .lc-pill.ok { background: var(--ok-wash); color: var(--ok); } .lc-pill.warn { background: var(--warn-wash); color: var(--warn); }
.lc-trend { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lc-spark { width: 180px; height: 46px; overflow: visible; }
.lc-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-area { fill: var(--brand); opacity: .1; stroke: none; }
.lc-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 1.5; } .lc-dot.last { fill: var(--brand); }
.lc-detail { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 10px; }
.lc-detail summary { cursor: pointer; font-weight: 650; color: var(--brand-ink); }
.lc-detail h4 { margin: 12px 0 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--graphite); }
.lc-detail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lc-detail li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.lc-detail li code { font-size: 12px; color: var(--graphite); }

.lc-verdict { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--rule); margin-bottom: 18px; background: var(--surface); box-shadow: 0 1px 2px rgba(15,27,45,.04); }
.lc-verdict.pass { background: linear-gradient(135deg, var(--ok-wash), var(--surface) 80%); border-color: #b5e0c3; }
.lc-verdict.fail { background: linear-gradient(135deg, var(--bad-wash), var(--surface) 80%); border-color: #f1b4b4; }
.lc-verdict.none { background: var(--paper); }
.lc-vico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--graphite); }
.lc-verdict.pass .lc-vico { background: linear-gradient(135deg, #22c55e, #15803d); box-shadow: 0 8px 18px rgba(21,128,61,.3); }
.lc-verdict.fail .lc-vico { background: linear-gradient(135deg, #ef4444, #c62828); box-shadow: 0 8px 18px rgba(198,40,40,.3); }
.lc-vtext { min-width: 0; flex: 1; }
.lc-vtext h2 { margin: 0 0 4px; font-size: 20px; } .lc-vtext ul { margin: 8px 0 12px; padding-left: 18px; } .lc-vtext li { margin: 3px 0; }
.lc-rules { display: grid; gap: 14px; }
.lc-rule { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-weight: 600; font-size: 14px; color: var(--ink); }
.lc-rule select, .lc-rule input { min-width: 0; }
.lc-rule input[type=number] { width: 110px; }
.lc-code { font-size: 12.5px; white-space: pre; overflow: auto; max-height: 340px; }

/* ===== Queries: advice ===== */
.qa2 { margin: 18px 0; }
.qa2-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.qa2-title { display: flex; align-items: center; gap: 14px; min-width: 0; } .qa2-title h2 { margin: 0; font-size: 18px; } .qa2-title p { margin: 2px 0 0; }
.qa2-counts { display: flex; gap: 10px; flex-wrap: wrap; } .qa2-counts .ui-stat { padding: 8px 16px; gap: 8px; border-radius: 14px; } .qa2-counts .ui-stat-n { font-size: 20px; } .qa2-counts .ui-stat.bad .ui-stat-n { color: var(--bad); } .qa2-counts .ui-stat.warn .ui-stat-n { color: var(--warn); }
.qa2-list { display: grid; gap: 12px; }
.qa2-item { border: 1px solid var(--rule); border-left: 4px solid var(--rule-strong); border-radius: 16px; padding: 14px 16px; background: var(--surface); }
.qa2-item.sev-critical { border-left-color: var(--bad); } .qa2-item.sev-medium { border-left-color: var(--warn); } .qa2-item.sev-low { border-left-color: var(--ok); }
.qa2-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .qa2-nums { font-size: 12.5px; margin-left: auto; }
.qa2-issues { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.qa2-issues li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.qa2-iico { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--wash); color: var(--graphite); }
.qa2-iico.critical { background: var(--bad-wash); color: var(--bad); } .qa2-iico.medium { background: var(--warn-wash); color: var(--warn); } .qa2-iico.low { background: var(--ok-wash); color: var(--ok); }
.qa2-where { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 13px; }
.qa2-where code { background: var(--wash); padding: 1px 7px; border-radius: 6px; }
.qa2-fix { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); }
.qa2-fix pre.code { margin: 8px 0; }
.qa2-fixhead { display: flex; align-items: center; gap: 10px; }
.qa2-ba { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: var(--wash); border: 1px solid var(--rule); }
.qa2-ba.ok { background: var(--ok-wash); border-color: #b5e0c3; } .qa2-ba.bad { background: var(--bad-wash); border-color: #f1b4b4; }
.qa2-bacol { display: grid; gap: 1px; text-align: center; min-width: 74px; } .qa2-bacol b { font-size: 20px; letter-spacing: -.02em; }
.qa2-arrow { transform: rotate(-90deg); color: var(--graphite); }
.qa2-batext .btn { justify-self: start; }
.qa2-batext { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; }

/* ===== Alerts: owners and quiet hours ===== */
.rt-how { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 14px; border-radius: 14px; background: var(--brand-wash); color: var(--brand-ink); }
.rt-how p { margin: 0; font-size: 13.5px; } .rt-how-ico { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--brand); }
.rt-owners { display: grid; gap: 12px; margin-bottom: 12px; }
.rt-owner { border: 1px solid var(--rule); border-radius: 16px; padding: 14px 16px; background: var(--surface); }
.rt-owner-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .rt-spacer { flex: 1; }
.rt-avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6366f1, #4f46e5); }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.rt-field { display: grid; gap: 4px; font-size: 13px; font-weight: 650; color: var(--ink); min-width: 0; } .rt-field small { font-weight: 400; } .rt-field input, .rt-field select { width: 100%; box-sizing: border-box; min-width: 0; }
.rt-quiet { margin-top: 16px; padding: 16px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); display: grid; gap: 14px; }
.rt-quiet-body { display: grid; gap: 14px; }
.rt-times { display: flex; flex-wrap: wrap; gap: 14px; } .rt-zonef { min-width: 190px; }
.rt-days, .rt-break { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.rt-day { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; cursor: pointer; }
.rt-day.wide { padding: 5px 14px; }
.rt-day:has(input:checked) { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-ink); }

/* ===== System: retention ===== */
.ret-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ret-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 16px; }
.ret-field { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
.ret-label { font-weight: 700; color: var(--ink); } .ret-inp { display: flex; align-items: center; gap: 8px; } .ret-inp input { width: 96px; }
.ret-est { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--brand-wash); color: var(--brand-ink); margin-bottom: 14px; }
.ret-est p { margin: 4px 0; } .ret-est input { width: 80px; margin: 0 4px; }
.ret-est-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--brand); }

@media (max-width: 640px) {
  .lc-verdict { flex-direction: column; padding: 18px; } .lc-trend { align-items: flex-start; } .qa2-nums { margin-left: 0; }
  .qa2-ba { gap: 10px; } .qa2-arrow { display: none; }
}
/* keep wide code lines inside their card on a phone */
.qa2-list, .rt-owners, .lc-rules { min-width: 0; } .qa2-list > *, .rt-owners > * { min-width: 0; max-width: 100%; }
.qa2-item pre.code, .qa2-fix pre.code, .lc-code { max-width: 100%; box-sizing: border-box; white-space: pre; overflow: auto; }
.qa2-top b, .qa2-issues li > div { min-width: 0; overflow-wrap: anywhere; }
.qa2-where code { overflow-wrap: anywhere; }
.ag-findings { min-width: 0; } .ag-findings > .ag-find { min-width: 0; max-width: 100%; box-sizing: border-box; }
.ag-find .ag-diff { max-width: 100%; box-sizing: border-box; overflow: auto; }
.ag-find-head b, .ag-find p { overflow-wrap: anywhere; min-width: 0; }
.lc-detail li { min-width: 0; } .lc-detail li b, .lc-detail li code { overflow-wrap: anywhere; }

/* Try it: environments with a locked service and key/value headers */
.env-card { display: block; }
.env-pair { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ev-svc { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--wash); border: 1px solid var(--rule); }
.ev-svc .nm { font-weight: 650; overflow-wrap: anywhere; }
.ev-svc .url { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--muted, #667); overflow-wrap: anywhere; }
.ev-lock { font-size: 12px; color: var(--muted, #667); display: flex; gap: 6px; align-items: center; }
.ev-h { margin: 14px 0 8px; font-weight: 650; font-size: 14px; }
.kvh { display: none; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: center; margin-bottom: 12px; }
.kv > :first-child { grid-column: 1 / -1; }
.kv input { width: 100%; min-width: 0; }
.kv-mask { -webkit-text-security: disc; text-security: disc; }
.kv-key { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-width: 0; }
.kv-name { font-weight: 600; overflow-wrap: anywhere; }
.kv-where { flex-basis: 100%; font-size: 12px; color: var(--muted, #667); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Service map: layered board (callers, gateway, services, databases) with a request-flow strip */
.mapbox.lm-box { overflow-x: auto; padding: 14px; background: linear-gradient(180deg, var(--surface), var(--brand-wash)); }
.lm-board { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(215px, 1fr)); column-gap: var(--gap, 76px); row-gap: 16px; min-width: calc(var(--cols) * 215px + (var(--cols) - 1) * var(--gap, 76px)); align-items: stretch; }
.lm-box svg.ico, .lm-box .lm-ico svg, .lm-box .lm-hico svg, .lm-box .lm-ring svg, .lm-box .lm-sep svg, .lm-flow-head svg { width: auto; min-width: 0; height: auto; display: inline-block; }
.lm-ico svg, .lm-ring svg { width: 22px !important; height: 22px !important; } .lm-hico svg { width: 18px !important; height: 18px !important; } .lm-sep svg, .lm-flow-head svg { width: 18px !important; height: 18px !important; }
.mapbox .lm-wires { position: absolute; left: 0; top: 0; width: auto; min-width: 0; height: auto; pointer-events: none; z-index: 1; overflow: visible; }
.mapbox .lm-tags { z-index: 4; }
.mapbox .pill { text-transform: none; letter-spacing: 0; padding: 0; background: none; color: inherit; }
.mapbox .pill .pill-sub { font-size: 11px; font-weight: 500; fill: var(--graphite); }
.lm-col { background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: 0 8px 22px rgba(15, 27, 45, .06); }
.lm-head { display: flex; gap: 10px; align-items: center; }
.lm-hico { width: 34px; height: 34px; border-radius: 10px; background: var(--brand-wash); color: var(--brand); display: grid; place-items: center; flex: none; }
.lm-head b { display: block; font-size: 15px; overflow-wrap: break-word; } .lm-head span:not(.lm-hico) { display: block; color: var(--graphite); font-size: 12px; line-height: 1.3; }
.lm-col-body { flex: 1; display: grid; gap: 14px; align-content: center; padding: 14px 10px; border: 1px dashed var(--rule-strong); border-radius: 14px; min-height: 150px; }
.lm-node { position: relative; z-index: 2; background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: 14px; padding: 12px; cursor: pointer; outline: none; box-shadow: 0 6px 14px rgba(15, 27, 45, .10); transition: opacity .2s, border-color .2s, box-shadow .2s; min-width: 0; }
.lm-node:hover, .lm-node:focus-visible, .lm-node.sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash), 0 8px 18px rgba(15, 27, 45, .14); }
.lm-node.warning { border-color: var(--warn); } .lm-node.critical { border-color: var(--bad); }
.lm-top { display: flex; gap: 10px; align-items: flex-start; }
.lm-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-wash); color: var(--brand); display: grid; place-items: center; flex: none; }
.k-db .lm-ico { background: var(--ok-wash); color: var(--ok); } .k-gateway .lm-ico { background: var(--wash); }
.lm-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.lm-txt .nm { font-size: 15px; font-weight: 700; overflow-wrap: break-word; word-break: normal; } .lm-txt .sub { color: var(--graphite); font-size: 12px; overflow-wrap: break-word; }
.lm-txt .lm-chip { justify-self: start; margin-top: 4px; }
.lm-chip { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--ok-wash); color: var(--ok); white-space: nowrap; flex: none; }
.lm-chip.warning { background: var(--warn-wash); color: var(--warn); } .lm-chip.critical { background: var(--bad-wash); color: var(--bad); }
.lm-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lm-stats span { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 9px; background: var(--wash); color: var(--ink); white-space: nowrap; }
.lm-stats .ok { color: var(--ok); background: var(--ok-wash); } .lm-stats .warn { color: var(--warn); background: var(--warn-wash); } .lm-stats .bad { color: var(--bad); background: var(--bad-wash); }
.mapbox .port { fill: var(--surface); stroke: var(--brand); stroke-width: 3; } .mapbox .port.warning { stroke: var(--warn); } .mapbox .port.critical { stroke: var(--bad); }
.mapbox .pill-arrow { stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lm-board.has-sel .lm-node:not(.sel):not(.linked) { opacity: .35; } .lm-board.has-sel .edge-g:not(.hot) { opacity: .12; }
.lm-flow { margin-top: 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 14px 16px; }
.lm-flow-head { display: flex; gap: 10px; align-items: center; color: var(--brand); margin-bottom: 10px; }
.lm-flow-head b { display: block; color: var(--ink); } .lm-flow-head span { display: block; color: var(--graphite); font-size: 12px; }
.lm-steps { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; }
.lm-sep { color: var(--brand); display: grid; flex: none; }
.lm-step { display: grid; justify-items: center; gap: 2px; min-width: 120px; padding: 8px 10px; background: none; border: 0; border-radius: 12px; cursor: pointer; color: var(--ink); font: inherit; }
.lm-step:hover, .lm-step:focus-visible { background: var(--wash); outline: none; }
.lm-step b { font-size: 13px; max-width: 150px; text-align: center; overflow-wrap: anywhere; } .lm-step span:not(.lm-ring) { font-size: 12px; color: var(--graphite); }
.lm-ring { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-wash); color: var(--ok); border: 2px solid var(--ok); }
.lm-step.warning .lm-ring { background: var(--warn-wash); color: var(--warn); border-color: var(--warn); } .lm-step.critical .lm-ring { background: var(--bad-wash); color: var(--bad); border-color: var(--bad); }
@media (max-width: 760px) { .lm-board { grid-template-columns: 1fr; min-width: 0; } .mapbox .lm-wires { display: none; } }

/* Not graded (callers that are not named services) */
.lm-node.neutral { border-color: var(--rule-strong); }
.lm-chip.neutral { background: var(--wash); color: var(--graphite); }
.lm-step.neutral .lm-ring { background: var(--wash); color: var(--graphite); border-color: var(--rule-strong); }
.map-legend .lg-dot.grey { background: var(--rule-strong); }
.kv-gen { white-space: nowrap; }
.p-input-gen { display: flex; gap: 6px; align-items: center; min-width: 0; } .p-input-gen input { flex: 1 1 auto; min-width: 0; }

.kv-more { margin: 6px 0 12px; } .kv-more summary { cursor: pointer; color: var(--graphite); font-size: 13px; margin-bottom: 10px; }
.kv-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

/* ===== Polish: service headers panel (Try it > Manage environments) ===== */
.env-manage { border: 1px solid var(--rule); border-radius: 20px; padding: 16px; background: linear-gradient(180deg, var(--surface), var(--brand-wash)); box-shadow: 0 10px 28px rgba(15, 27, 45, .07); }
.env-card { border: 0; padding: 0; margin: 0 0 6px; }
.ev-svc { position: relative; border: 1px solid var(--rule-strong); background: linear-gradient(135deg, var(--brand-wash), var(--surface)); box-shadow: 0 6px 16px rgba(79, 70, 229, .10); padding: 14px 16px 14px 20px; overflow: hidden; }
.ev-svc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #7c3aed, #3b82f6); }
.ev-svc .nm { font-size: 17px; letter-spacing: -.01em; }
.ev-svc .url { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--rule); }
.ev-lock { margin-left: 0; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule); }
.ev-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; font-size: 15px; font-weight: 700; }
.ev-h::before { content: ''; width: 4px; height: 16px; border-radius: 4px; background: linear-gradient(180deg, #7c3aed, #3b82f6); }
.env-card > div > p.note, .env-card p.note { color: var(--graphite); font-size: 13px; line-height: 1.45; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); box-shadow: 0 2px 8px rgba(15, 27, 45, .05); transition: border-color .15s, box-shadow .15s; }
.kv:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.kv > :first-child { grid-column: 1 / -1; }
.kv-key { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.kv-name { font-size: 14px; font-weight: 700; font-family: ui-monospace, Consolas, monospace; letter-spacing: -.01em; }
.kv-key .chip.warning { font-size: 11px; padding: 1px 8px; }
.kv-where { flex-basis: auto; display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: 7px; background: var(--wash); font: 600 11px ui-monospace, Consolas, monospace; color: var(--graphite); }
.kv input { border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.kv .btn.small { border-radius: 10px; padding: 7px 12px; }
.kv-more { margin: 4px 0 14px; padding: 12px 14px; border: 1px dashed var(--rule-strong); border-radius: 14px; background: var(--surface); }
.kv-more summary { margin: 0; font-weight: 600; color: var(--brand); }
.kv-more[open] summary { margin-bottom: 10px; }
.kv-pick .btn.small { border-radius: 999px; background: var(--brand-wash); border-color: transparent; color: var(--brand-ink, var(--brand)); font-weight: 600; }
.kv-pick .btn.small:hover { filter: brightness(.96); }
.env-manage .controls .btn { border-radius: 12px; }
.env-manage .controls .btn.primary { background: linear-gradient(135deg, #7c3aed, #3b82f6); border: 0; box-shadow: 0 6px 16px rgba(79, 70, 229, .3); }

/* ===== Polish: Build request modal ===== */
.bld { border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(15, 27, 45, .35); }
.bld-head { align-items: center; padding: 18px 22px 14px; background: linear-gradient(135deg, var(--brand-wash), var(--surface)); border-bottom: 1px solid var(--rule); }
.bld-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7c3aed, #3b82f6); box-shadow: 0 8px 18px rgba(79, 70, 229, .35); flex: none; }
.bld-title { flex: 1; min-width: 0; display: grid; gap: 4px; }
.bld-title h3 { font-size: 19px; letter-spacing: -.01em; }
.bld-route { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bld-route code { padding: 2px 9px; border-radius: 8px; background: var(--surface); border: 1px solid var(--rule); font-size: 13px; overflow-wrap: anywhere; }
.bld-progress { padding: 12px 22px 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.bld-progress.is-ready { color: var(--ok); }
.bld-meter { height: 8px; border-radius: 999px; background: var(--wash); overflow: hidden; }
.bld-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #22c55e); transition: width .25s ease; }
.bld-progress.is-ready .bld-meter i { background: linear-gradient(90deg, #22c55e, #16a34a); }
.bld-body { padding: 16px 22px; gap: 20px; flex: 1; min-height: 0; }
.bld-form h4 { margin: 14px 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.bld-form h4::before { content: ''; width: 4px; height: 15px; border-radius: 4px; background: linear-gradient(180deg, #7c3aed, #3b82f6); }
.bld-row { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); padding: 12px 14px; margin-bottom: 10px; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 12px; align-items: center; box-shadow: 0 2px 8px rgba(15, 27, 45, .04); }
.bld-row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.bld-row.is-required { border-left: 4px solid var(--brand); }
.bld-name code { font-weight: 700; font-size: 14px; }
.bld-name .req { color: var(--bad); font-weight: 700; }
.bld-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.bld-tag { padding: 1px 8px; border-radius: 7px; background: var(--wash); color: var(--graphite); font-size: 11px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bld-tag.where { background: var(--brand-wash); color: var(--brand); } .bld-tag.lim { font-family: ui-monospace, Consolas, monospace; font-weight: 500; }
.bld-input input, .bld-input select, .bld-input textarea { border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.bld-input .is-missing { box-shadow: 0 0 0 2px #f5b94a inset; }
.bld-out { position: sticky; top: 0; align-self: start; display: grid; gap: 4px; }
.bld-out .tabs-mini { background: var(--wash); padding: 4px; border-radius: 12px; gap: 2px; margin: 0; flex-wrap: nowrap; }
.bld-out .tabs-mini button { border: 0; background: transparent; border-radius: 9px; padding: 6px 14px; font-weight: 600; color: var(--graphite); text-decoration: none; }
.bld-out .tabs-mini button[aria-pressed="true"], .bld-out .tabs-mini .tab-mini.on { background: var(--surface); color: var(--brand); text-decoration: none; box-shadow: 0 2px 8px rgba(15, 27, 45, .12); }
.bld-out .controls { justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 8px; }
.bld-out .controls .btn { border-radius: 10px; }
.bld-preview { border-radius: 14px; margin: 6px 0 0; padding: 14px 16px; background: #0f172a; color: #e2e8f0; border: 1px solid #1e293b; font-size: 13px; line-height: 1.55; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.bld-foot { padding: 14px 22px 18px; background: var(--surface); gap: 12px; }
.bld-foot .btn { border-radius: 12px; padding: 10px 18px; font-weight: 600; }
.bld-foot .btn.primary { background: linear-gradient(135deg, #7c3aed, #3b82f6); border: 0; box-shadow: 0 8px 20px rgba(79, 70, 229, .32); color: #fff; }
.bld-foot .btn[disabled] { opacity: .5; box-shadow: none; }
.bld-optparams { margin: 6px 0 10px; padding: 10px 14px; border: 1px dashed var(--rule-strong); border-radius: 14px; } .bld-optparams summary { cursor: pointer; font-weight: 600; color: var(--brand); }
@media (max-width: 800px) { .bld-row { grid-template-columns: 1fr; gap: 8px; } .bld-out { position: static; } }

/* Build request: wider modal, stacked field rows, readable preview */
.pal.bld { width: min(1040px, calc(100vw - 24px)); }
.bld-row, .bld-row.is-required { grid-template-columns: 1fr; gap: 8px; align-items: start; }
.bld-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bld-name .bld-meta { margin-top: 0; }
.bld-name .muted { flex-basis: 100%; }
.bld-out .tabs-mini button { white-space: nowrap; padding: 6px 12px; }
.bld-out .controls { flex-wrap: nowrap; }
.bld-out .controls .tabs-mini { flex: 0 1 auto; }
.bld-preview, .bld-preview * { color: #e2e8f0; }
.bld-preview { border-left: 1px solid #1e293b; font-family: ui-monospace, Menlo, Consolas, monospace; }
.bld-preview[data-ready="0"] { color: #94a3b8; }
.bld-foot .muted { flex-basis: 100%; font-size: 12.5px; margin: 0; }
.bld-foot { padding-top: 12px; row-gap: 8px; }
pre.code.bld-preview { background: #0f172a !important; color: #e2e8f0 !important; border: 1px solid #1e293b !important; border-left: 1px solid #1e293b !important; }
pre.code.bld-preview[data-ready="0"] { color: #94a3b8 !important; }

/* ---------- Project sections as pill buttons ---------- */
.stage nav.tabs[aria-label="Project sections"] { gap: 6px; padding: 8px; margin: 14px 0 22px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); box-shadow: 0 4px 18px rgba(79, 70, 229, .06); }
.stage nav.tabs[aria-label="Project sections"] a { padding: 8px 14px; margin: 0; border: 1px solid transparent; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--graphite); transition: background .14s, color .14s, transform .14s, box-shadow .14s; }
.stage nav.tabs[aria-label="Project sections"] a .ico { opacity: .8; width: 16px; height: 16px; }
.stage nav.tabs[aria-label="Project sections"] a:hover { background: var(--brand-wash); color: var(--brand-ink); transform: translateY(-1px); }
.stage nav.tabs[aria-label="Project sections"] a[aria-current="page"] { background: linear-gradient(135deg, var(--brand), #7c6cf5); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(79, 70, 229, .32); }
.stage nav.tabs[aria-label="Project sections"] a[aria-current="page"] .ico { color: #fff; opacity: 1; }
.stage nav.tabs[aria-label="Project sections"] a[aria-current="page"] .count { background: rgba(255, 255, 255, .25); color: #fff; }
.stage nav.tabs[aria-label="Project sections"] a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 700px) { .stage nav.tabs[aria-label="Project sections"] { padding: 6px; gap: 4px; border-radius: 14px; } .stage nav.tabs[aria-label="Project sections"] a { padding: 7px 10px; font-size: 13px; } }

/* Endpoint list grouped service by service */
.docs-group.svc { position: sticky; top: 57px; padding: 12px 14px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); background: linear-gradient(90deg, var(--brand-wash), var(--wash)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.docs-group.svc .gn { font-weight: 750; }
.svc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rule-strong) 30%, transparent); }
.svc-dot.online { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.svc-dot.offline { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.docs-group.sub { position: static; margin: 8px 8px 2px 22px; width: auto; padding: 4px 8px; border: 0; border-left: 2px solid var(--rule-strong); background: transparent; border-radius: 0; font-size: 11px; }
.docs-group.sub .gc { margin-left: auto; }
.svc-card .docs-group.svc { top: 57px; }

/* ---------- Overview as cards ---------- */
.pg-ov .readout { border: 0; gap: 14px; margin-bottom: 22px; }
.pg-ov .readout > .ro-card, .pg-ov .readout > div { position: relative; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); padding: 18px 20px 16px; box-shadow: 0 6px 20px rgba(15, 27, 45, .05); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.pg-ov .readout > .ro-card:first-child { padding-left: 20px; }
.pg-ov .readout > .ro-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(79, 70, 229, .12); }
.pg-ov .readout > .ro-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--brand), #7c6cf5); opacity: .55; }
.pg-ov .readout > .ro-card.t-bad::after { background: var(--bad); opacity: .8; } .pg-ov .readout > .ro-card.t-warn::after { background: var(--warn); opacity: .8; } .pg-ov .readout > .ro-card.t-ok::after { background: var(--ok); opacity: .7; }
.ro-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; margin-bottom: 12px; background: var(--brand-wash); color: var(--brand); }
.ro-ico.red { background: var(--bad-wash); color: var(--bad); } .ro-ico.amber { background: var(--warn-wash); color: var(--warn); }
.ro-ico.green { background: var(--ok-wash); color: var(--ok); } .ro-ico.teal { background: color-mix(in srgb, var(--lens) 14%, transparent); color: var(--lens); }
.pg-ov .readout .v { font-size: 30px; font-weight: 650; }
.pg-ov .section { background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; padding: 20px 22px 22px; margin-bottom: 20px; box-shadow: 0 6px 20px rgba(15, 27, 45, .04); }
.pg-ov .section-head { align-items: center; margin-bottom: 14px; }
.pg-ov .section-head h2, .pg-ov .section-head h3 { font-size: 17px; font-weight: 700; }
.pg-ov .table-wrap { border-radius: 14px; }
.pg-ov .slo { padding: 4px 0; } .pg-ov .slo-bar { height: 14px; border-radius: 999px; } .pg-ov .slo-bar > i { border-radius: 999px; background-image: linear-gradient(90deg, rgba(255,255,255,.25), transparent); }
.pg-ov .slo-head .big { font-size: 2rem; letter-spacing: -.02em; }
.pg-ov .attention { border-top: 0; display: grid; gap: 8px; }
.pg-ov .attention > a { border: 1px solid var(--rule); border-radius: 14px; padding: 12px 16px; background: var(--paper, var(--wash)); transition: border-color .12s, background .12s; }
.pg-ov .attention > a:hover { border-color: var(--brand); background: var(--brand-wash); }
.pg-ov .deploy-list li { padding: 9px 12px; border: 1px solid var(--rule); border-radius: 12px; }
@media (max-width: 1100px) { .pg-ov .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pg-ov .readout { grid-template-columns: 1fr 1fr; gap: 10px; } .pg-ov .section { padding: 16px 14px; } .pg-ov .readout .v { font-size: 24px; } }

/* ---------- Spec drift as cards ---------- */
.dr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.dr-tile { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); cursor: pointer; font: inherit; color: inherit; box-shadow: 0 6px 20px rgba(15, 27, 45, .04); transition: transform .15s, border-color .15s; }
.dr-tile:hover:not(:disabled) { transform: translateY(-2px); }
.dr-tile:disabled { opacity: .5; cursor: default; }
.dr-tile .dr-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; }
.dr-tile .dr-n { font-size: 26px; font-weight: 700; line-height: 1.1; } .dr-tile .dr-l { color: var(--graphite); font-size: 13px; }
.dr-tile.critical .dr-ico { background: var(--bad-wash); color: var(--bad); } .dr-tile.warning .dr-ico { background: var(--warn-wash); color: var(--warn); } .dr-tile.info .dr-ico { background: var(--brand-wash); color: var(--brand); }
.dr-tile.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.pg-drift .filters { margin-bottom: 12px; }
.pg-drift .filters button { padding: 6px 16px; border-radius: 999px; font-weight: 600; }
.dr-list { display: grid; gap: 10px; }
.pg-drift .drift-row { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); box-shadow: inset 4px 0 0 var(--rule-strong), 0 4px 14px rgba(15, 27, 45, .04); transition: transform .12s, border-color .12s; text-decoration: none; }
.pg-drift a.drift-row:hover { transform: translateX(3px); border-color: var(--brand); }
.pg-drift .drift-row:has(.glyph.critical) { box-shadow: inset 4px 0 0 var(--bad), 0 4px 14px rgba(15, 27, 45, .04); }
.pg-drift .drift-row:has(.glyph.warning) { box-shadow: inset 4px 0 0 var(--warn), 0 4px 14px rgba(15, 27, 45, .04); }
.pg-drift .glyph { width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }
.dr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dr-top .method { margin-right: 0; }
.dr-type { margin-top: 6px; font-weight: 650; }
@media (max-width: 640px) { .dr-tiles { grid-template-columns: 1fr; } .pg-drift .drift-row { grid-template-columns: 34px minmax(0, 1fr); } .pg-drift .drift-row .chip { grid-column: 2; justify-self: start; } }

/* ---------- Export & share ---------- */
.pg-share .sh-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; padding: 20px 22px 22px; margin-top: 0; margin-bottom: 18px; box-shadow: 0 6px 20px rgba(15, 27, 45, .04); }
.sh-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.sh-head h3 { margin: 0 0 3px; font-size: 17px; } .sh-head p { margin: 0; max-width: 78ch; }
.sh-ico, .sh-tico, .al-intro-ico, .acc-ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--brand-wash); color: var(--brand); }
.sh-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sh-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper, var(--wash)); color: inherit; text-decoration: none; transition: transform .14s, border-color .14s, box-shadow .14s; }
.sh-tile:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 10px 24px rgba(79, 70, 229, .12); text-decoration: none; }
.sh-tt { display: grid; gap: 2px; flex: 1; min-width: 0; } .sh-tt small { color: var(--graphite); font-size: 12.5px; }
.sh-go { color: var(--graphite); } .sh-tile:hover .sh-go { color: var(--brand); }

/* ---------- Alerts intro ---------- */
.al-intro { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.al-intro h2 { margin: 0; font-size: 22px; } .al-intro p { margin: 2px 0 0; }

/* ---------- Access ---------- */
.pg-access { display: grid; gap: 18px; max-width: 880px; }
.acc-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; padding: 18px 20px; box-shadow: 0 6px 20px rgba(15, 27, 45, .04); }
.acc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; } .acc-head h3 { margin: 0; font-size: 17px; } .acc-head p { margin: 2px 0 0; }
.acc-row { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background .12s; } .acc-row:hover { background: var(--wash); }
.acc-ava { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #7c6cf5); color: #fff; font-weight: 700; flex: none; }
.acc-who { display: grid; flex: 1; min-width: 0; } .acc-who small { color: var(--graphite); }
.acc-switch { position: relative; width: 44px; height: 26px; flex: none; }
.acc-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.acc-switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--rule-strong); transition: background .15s; }
.acc-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .15s; }
.acc-switch input:checked + i { background: var(--brand); } .acc-switch input:checked + i::after { transform: translateX(18px); }
.acc-switch input:focus-visible + i { outline: 2px solid var(--brand); outline-offset: 2px; }
.acc-save { display: flex; justify-content: flex-end; }

/* ---------- Servers polish ---------- */
.sv-card { border-radius: 20px; box-shadow: 0 6px 20px rgba(15, 27, 45, .05); }
.sv-inst table { table-layout: fixed; width: 100%; }
.sv-inst th:nth-child(1) { width: 20%; } .sv-inst th:nth-child(2) { width: 15%; } .sv-inst th:nth-child(3) { width: 12%; }
.sv-inst th:nth-child(4) { width: 20%; } .sv-inst th:nth-child(5) { width: 15%; } .sv-inst th:nth-child(6) { width: 8%; }
.sv-inst td { overflow: hidden; text-overflow: ellipsis; }
.sv-inst { border-radius: 14px; }
.pg-drift .filters { display: none; }

/* ---------- Database workbench ---------- */
.pg-db .block { background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; padding: 20px 22px; margin: 0 0 18px; box-shadow: 0 6px 20px rgba(15, 27, 45, .04); }
.db-form-head, .db-bench-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.db-form-head h3, .db-bench-title h3 { margin: 0; font-size: 18px; }
.db-bench-title { display: grid; gap: 2px; flex: 1; min-width: 0; }
.db-bench-head .controls { margin-left: auto; align-items: center; }
.db-conn-ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--brand-wash); color: var(--brand); }
.pg-db .db-form .arow { grid-template-columns: 170px minmax(0, 1fr); margin-bottom: 12px; }
.pg-db .db-form .arow input[type="text"], .pg-db .db-form .arow input[type="password"], .pg-db .db-form .arow input[type="number"], .pg-db .db-form .arow select { min-height: 42px; border-radius: 12px; }
.pg-db .db-form .arow input[type="text"] { flex: 1 1 260px; }
.pg-db .db-form .arow input[type="password"] { flex: 1 1 260px; max-width: none; }
.db-conns { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin: 0 0 18px; }
.db-conn { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); box-shadow: 0 6px 20px rgba(15, 27, 45, .04); transition: transform .14s, border-color .14s, box-shadow .14s; }
.db-conn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(79, 70, 229, .12); }
.db-conn.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.db-conn-main { display: flex; gap: 14px; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; min-width: 0; }
.db-conn-txt { display: grid; gap: 4px; min-width: 0; } .db-conn-txt .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-conn-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.db-conn-act { display: flex; gap: 8px; justify-content: flex-end; }
.db-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; border: 0; border-radius: 14px; background: var(--wash); }
.db-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--graphite); font: inherit; font-weight: 600; cursor: pointer; }
.db-tab:hover { color: var(--brand-ink); }
.db-tab.on { background: var(--surface); color: var(--brand); box-shadow: 0 2px 8px rgba(15, 27, 45, .12); border: 0; }
.pg-db .db-split { grid-template-columns: 320px minmax(0, 1fr); gap: 22px; margin-top: 0; align-items: start; }
.pg-db .db-schema { border-right: 0; padding: 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper, var(--wash)); max-height: calc(100vh - 290px); min-height: 380px; overflow: auto; position: sticky; top: 12px; }
.db-seg { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 12px; background: var(--wash); }
.db-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--graphite); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.db-seg button.on { background: var(--surface); color: var(--brand); box-shadow: 0 2px 8px rgba(15, 27, 45, .12); }
.db-seg .gc { font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-ink); }
.pg-db .db-schema input[type="search"] { width: 100%; margin-bottom: 10px; border-radius: 12px; min-height: 38px; }
.db-none { padding: 12px 4px; }
.db-item { margin-bottom: 2px; }
.pg-db .db-obj { display: flex; align-items: center; gap: 4px; padding: 2px; border-radius: 10px; }
.pg-db .db-obj:hover { background: var(--brand-wash); }
.pg-db .db-obj .db-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; font-weight: 600; word-break: normal; text-decoration: none; color: var(--ink); }
.db-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.db-name small { color: var(--graphite); font-weight: 500; margin-left: auto; font-size: 11px; }
.db-tico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--brand-wash); color: var(--brand); } .db-tico.proc { background: var(--warn-wash); color: var(--warn); }
.db-mini { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--graphite); cursor: pointer; opacity: .55; }
.pg-db .db-obj:hover .db-mini { opacity: 1; } .db-mini:hover { background: var(--surface); color: var(--brand); } .db-mini.run:hover { background: var(--brand); color: #fff; }
.pg-db .db-cols { margin: 0 0 6px 34px; padding-left: 10px; border-left: 2px solid var(--rule-strong); }
.pg-db .db-col { padding: 3px 6px; border-radius: 6px; font-size: 12.5px; } .pg-db .db-col:hover { background: var(--brand-wash); }
.db-body textarea { width: 100%; min-height: 230px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: #0f1b2d; color: #e6edf7; font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.db-body textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.db-body .controls { margin: 12px 0; align-items: center; }
.db-body h3 { margin: 18px 0 8px; }
@media (max-width: 900px) { .pg-db .db-split { grid-template-columns: minmax(0, 1fr); } .pg-db .db-schema { position: static; max-height: 300px; min-height: 0; } .pg-db .db-form .arow { grid-template-columns: 1fr; } .db-bench-head { flex-wrap: wrap; } }
.pg-db .db-conn { align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; }
.pg-db .db-conn-main { flex-wrap: nowrap; width: 100%; justify-content: flex-start; }
.pg-db .db-conn-main .db-conn-ico { align-self: center; }
@media (max-width: 520px) { .db-tabs { display: flex; width: 100%; } .db-tab { flex: 1; justify-content: center; padding: 8px 6px; gap: 5px; } .db-conns { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Procedures tab and saved queries ---------- */
.pr-wrap { display: grid; gap: 18px; }
.pr-card { border: 1px solid var(--rule); border-radius: 18px; padding: 18px 20px; background: var(--surface); }
.pr-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .pr-head h3 { margin: 0; font-size: 17px; } .pr-head p { margin: 2px 0 0; }
.pr-name input { width: 100%; min-height: 44px; border-radius: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pg-db .db-params { margin-top: 14px; }
.pg-db .db-params .p-head, .pg-db .db-params .p-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 90px 130px minmax(0, 1.4fr) 38px; gap: 8px; align-items: center; }
.pg-db .db-params .p-head { padding: 0 2px 6px; color: var(--graphite); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pg-db .db-params .p-row { margin-bottom: 8px; }
.pg-db .db-params .p-row input, .pg-db .db-params .p-row select { width: 100%; min-height: 40px; border-radius: 10px; }
.pr-card textarea { width: 100%; min-height: 200px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: #0f1b2d; color: #e6edf7; font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.pr-card .controls { margin: 12px 0 4px; align-items: center; }
.db-savebar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; padding: 10px 12px; border-radius: 14px; background: var(--brand-wash); }
.db-savebar:empty { display: none; }
.db-savebar input { flex: 1 1 260px; min-height: 38px; border-radius: 10px; }
.db-tico.sv { background: color-mix(in srgb, var(--lens) 14%, transparent); color: var(--lens); }
.db-sv { align-items: flex-start !important; }
.db-sv-t { display: grid; gap: 2px; min-width: 0; } .db-sv-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-sv-t code { color: var(--graphite); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; padding: 0; }
.db-mini.del:hover { background: var(--bad-wash); color: var(--bad); }
.db-hist-act { white-space: nowrap; display: flex; gap: 6px; }
@media (max-width: 700px) { .pg-db .db-params .p-head { display: none; } .pg-db .db-params .p-row { grid-template-columns: 1fr 1fr; } .pg-db .db-params .p-row input:nth-child(4) { grid-column: 1 / -1; } }
.db-seg { gap: 2px; padding: 3px; } .db-seg button { padding: 7px 4px; gap: 5px; font-size: 12.5px; min-width: 0; white-space: nowrap; } .db-seg button .ico, .db-seg button svg { display: none; }
.db-seg .gc { padding: 0 6px; font-size: 10.5px; }

/* SQL editors stay light (they follow the theme: white in light mode, the dark surface in dark mode) */
.db-body textarea, .pr-card textarea { background: var(--surface); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: inset 0 1px 3px rgba(15, 27, 45, .05); caret-color: var(--brand); }
.db-body textarea::placeholder, .pr-card textarea::placeholder { color: var(--graphite); opacity: .7; }
.db-body textarea:focus, .pr-card textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
#db-save-q { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Free / Pro badge (used on Pro plan, Licences, everywhere a plan shows) ---------- */
.plan-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 750; letter-spacing: .02em; line-height: 1.4; white-space: nowrap; text-transform: none; }
.plan-badge.pro { background: linear-gradient(135deg, #f6b73c, #f08a24); color: #3b2300; box-shadow: 0 3px 10px rgba(240, 138, 36, .35); border: 0; }
.plan-badge.pro svg { stroke: currentColor; }
.plan-badge.free { background: var(--wash); color: var(--graphite); border: 1px solid var(--rule-strong); }
.plan-badge .pb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--graphite); opacity: .7; }
:root[data-theme="dark"] .plan-badge.pro { color: #2a1900; }
.lic-typeline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Pro plan ---------- */
.pp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0 0 18px; }
.pp-stat { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); box-shadow: 0 6px 20px rgba(15, 27, 45, .05); position: relative; overflow: hidden; }
.pp-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rule-strong); }
.pp-stat.pro::after { background: linear-gradient(90deg, #f6b73c, #f08a24); }
.pp-stat-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--wash); color: var(--graphite); }
.pp-stat.pro .pp-stat-ico { background: linear-gradient(135deg, #f6b73c, #f08a24); color: #3b2300; box-shadow: 0 6px 14px rgba(240, 138, 36, .35); }
.pp-stat .v { font-size: 30px; font-weight: 700; line-height: 1.1; } .pp-stat .k { color: var(--graphite); font-size: 13px; margin-top: 2px; }
.pp-card { padding: 20px 22px 22px; border-radius: 20px; }
.pp-who, .pg-audit .pp-who { display: flex; align-items: center; gap: 12px; }
.pp-av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #7c6cf5); color: #fff; font-weight: 700; font-size: 14px; }
.pp-av.org { border-radius: 11px; background: linear-gradient(135deg, var(--lens), #38bdf8); }
.pp-seats b { font-size: 15px; }
.pp-card .table-wrap { border-radius: 14px; }
.pp-card .table-wrap tbody tr:hover { background: var(--brand-wash); }
.pp-tools input { min-height: 40px; border-radius: 12px; } .pp-tools select { min-height: 40px; border-radius: 12px; }

/* ---------- Audit log ---------- */
.au-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 18px; }
.au-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); box-shadow: 0 6px 20px rgba(15, 27, 45, .05); }
.au-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--brand-wash); color: var(--brand); }
.au-ico.teal { background: color-mix(in srgb, var(--lens) 14%, transparent); color: var(--lens); } .au-ico.red { background: var(--bad-wash); color: var(--bad); } .au-ico.green { background: var(--ok-wash); color: var(--ok); } .au-ico.amber { background: var(--warn-wash); color: var(--warn); }
.au-stat .v { font-size: 24px; font-weight: 700; line-height: 1.1; } .au-stat .k { color: var(--graphite); font-size: 13px; }
.pg-audit .audit-table td { padding-top: 12px; padding-bottom: 12px; vertical-align: middle; }
.pg-audit .audit-tag { padding: 4px 12px; border-radius: 999px; font-weight: 650; font-size: 12.5px; background: var(--brand-wash); color: var(--brand-ink); }
.pg-audit .audit-tag.ok { background: var(--ok-wash); color: var(--ok); } .pg-audit .audit-tag.warn { background: var(--warn-wash); color: var(--warn); } .pg-audit .audit-tag.bad { background: var(--bad-wash); color: var(--bad); }
.pg-audit .table-wrap tbody tr:hover { background: var(--brand-wash); }
.pg-audit .controls input[type="search"], .pg-audit .controls select { min-height: 40px; border-radius: 12px; }

/* ---------- System ---------- */
.pg-system .gauges { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pg-system .gauge { padding: 18px 20px; border-radius: 18px; background: var(--paper, var(--wash)); box-shadow: 0 4px 14px rgba(15, 27, 45, .04); }
.pg-system .gauge-top { align-items: center; gap: 10px; justify-content: flex-start; }
.pg-system .gauge-top b { flex: 1; font-size: 14px; }
.gauge-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--brand-wash); color: var(--brand); }
.gauge.warn .gauge-ico { background: var(--warn-wash); color: var(--warn); } .gauge.bad .gauge-ico { background: var(--bad-wash); color: var(--bad); } .gauge.ok .gauge-ico { background: var(--ok-wash); color: var(--ok); }
.gauge-pct { font-size: 22px; font-weight: 700; }
.pg-system .meter.big { height: 12px; border-radius: 999px; }
.pg-system .meter-fill { border-radius: 999px; }
.gauge.ok .meter-fill { background: var(--ok); }
.sys-up { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--ok-wash); color: var(--ok); font-weight: 650; font-size: 13px; }
.sys-up i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
.sys-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.sys-kv .dir-line { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper, var(--wash)); }
.sys-kv .dir-line span:last-child, .sys-kv .dir-line b { text-align: left; overflow-wrap: anywhere; }
.pg-system .info-strip { margin-top: 0; }

/* ---------- Settings ---------- */
.st-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.st-nav { position: sticky; top: 12px; display: grid; gap: 4px; padding: 10px; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); box-shadow: 0 6px 20px rgba(15, 27, 45, .05); }
.st-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--graphite); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .12s, color .12s; }
.st-nav a:hover { background: var(--brand-wash); color: var(--brand-ink); }
.st-main { display: grid; gap: 18px; min-width: 0; }
.st-main > * { margin-bottom: 0 !important; scroll-margin-top: 16px; }
.pg-settings .card, .pg-settings .block { background: var(--surface); border: 1px solid var(--rule); border-radius: 20px; padding: 22px 24px; box-shadow: 0 6px 20px rgba(15, 27, 45, .04); }
.pg-settings form { display: grid; gap: 18px; }
.pg-settings form > .block { margin: 0; }
.st-bh { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .st-bh h3 { margin: 0; font-size: 18px; } .st-bh p { margin: 2px 0 0; }
.st-bi { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--brand-wash); color: var(--brand); }
.pg-settings .arow { grid-template-columns: 190px minmax(0, 1fr); margin-bottom: 12px; }
.pg-settings .arow input[type="text"], .pg-settings .arow input[type="email"], .pg-settings .arow input[type="url"], .pg-settings .arow input[type="tel"], .pg-settings .arow input[type="password"], .pg-settings .arow input[type="number"], .pg-settings .arow input:not([type]) { flex: 1 1 280px; width: 100%; min-height: 42px; border-radius: 12px; }
.pg-settings .arow select { min-height: 42px; border-radius: 12px; }
.pg-settings .arow input[type="number"] { max-width: 220px; }
.pg-settings textarea { width: 100%; min-height: 220px; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.pg-settings textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.pg-settings form > .controls { position: sticky; bottom: 12px; z-index: 3; padding: 12px 16px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); box-shadow: 0 10px 30px rgba(15, 27, 45, .14); }
.st-pol { height: 0; }
@media (max-width: 960px) { .st-layout { grid-template-columns: minmax(0, 1fr); } .st-nav { position: static; display: flex; overflow-x: auto; gap: 6px; } .st-nav a { white-space: nowrap; } .pg-settings .arow { grid-template-columns: 1fr; } }
.st-layout > *, .st-main > * { min-width: 0; max-width: 100%; }
.st-main > *, #st-contact, #st-price, #st-policies { scroll-margin-top: 90px !important; }

/* ===== Execution flow: a vertical timeline ===== */
.rq-wrap { margin-top: 6px; }
.rq-flow { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; position: relative; }
.rq-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.rq-step:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: -2px; width: 2px; background: linear-gradient(var(--rule-strong, #cdd3ea), var(--rule, #e3e7f5)); }
.rq-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--brand-wash, #eceafd); color: var(--brand, #5b4de0); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rule, #dfe3f3); z-index: 1; }
.rq-card { min-width: 0; border: 1px solid var(--rule, #e3e7f5); border-radius: 12px; padding: 10px 14px; background: var(--paper, #fff); }
.rq-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rq-kind { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: var(--wash, #f1f3fb); color: var(--graphite, #52607a); }
.rq-loc { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--graphite, #52607a); overflow-wrap: anywhere; }
.rq-name { display: block; font-size: 15px; overflow-wrap: anywhere; }
.rq-notes p { margin: 4px 0 0; font-size: 13px; color: var(--graphite, #52607a); overflow-wrap: anywhere; line-height: 1.45; }
.rq-controller .rq-kind { background: #e6efff; color: #1f55c4; } .rq-controller .rq-dot { background: #e6efff; color: #1f55c4; }
.rq-service .rq-kind, .rq-service .rq-dot { background: #e9f7ee; color: #1b7d46; }
.rq-repository .rq-kind, .rq-repository .rq-dot { background: #fff3dd; color: #9a6200; }
.rq-database .rq-kind, .rq-database .rq-dot { background: #f1e8ff; color: #6a35c8; }
.rq-external .rq-kind, .rq-external .rq-dot { background: #ffe9e6; color: #b23a2a; }
.rq-err { margin-top: 6px; border: 1px dashed var(--rule-strong, #cdd3ea); border-radius: 12px; padding: 4px 14px; background: color-mix(in srgb, var(--wash, #f1f3fb) 60%, transparent); }
.rq-err > summary { cursor: pointer; padding: 8px 0; font-weight: 600; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rq-flow-err { padding-top: 6px; }
.rq-flow-err .rq-step { grid-template-columns: 28px minmax(0, 1fr); }
.rq-flow-err .rq-dot { width: 28px; height: 28px; font-size: 12px; background: #fff0ee; color: #b23a2a; }
.rq-flow-err .rq-step:not(:last-child)::before { left: 13px; top: 28px; }
.rq-limits { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fff8e8; border: 1px solid #f0dfb3; font-size: 13px; }
.rq-limits p { margin: 4px 0 0; color: #6b5a22; overflow-wrap: anywhere; }

/* ===== Report ===== */
.rp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.rp-tile { border: 1px solid var(--rule, #e3e7f5); border-radius: 12px; padding: 12px 14px; background: var(--wash, #f7f8fd); display: grid; gap: 2px; }
.rp-tile b { font-size: 26px; line-height: 1.1; }
.rp-tile span { font-size: 12px; color: var(--graphite, #52607a); }
.rp-tile.warn { background: #fff6e8; border-color: #f0dfb3; } .rp-tile.warn b { color: #b4620a; }
.rp-dls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.rp-dl { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--rule, #e3e7f5); border-radius: 12px; padding: 12px 14px; background: var(--paper, #fff); color: inherit; text-decoration: none; cursor: pointer; font: inherit; }
.rp-dl:hover { border-color: var(--brand, #5b4de0); box-shadow: 0 4px 14px rgba(91,77,224,.12); }
.rp-dl-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-wash, #eceafd); color: var(--brand, #5b4de0); flex: none; }
.rp-dl b { display: block; } .rp-dl small { display: block; color: var(--graphite, #52607a); font-size: 12px; }
.rp-list { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.rp-more { border: 1px solid var(--rule, #e3e7f5); border-radius: 12px; padding: 4px 14px; }
.rp-more > summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 12px; }
.rp-chips code { font-size: 12px; padding: 3px 8px; border-radius: 8px; background: var(--wash, #f1f3fb); overflow-wrap: anywhere; }
@media (max-width: 640px) { .rq-step { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; } .rq-dot { width: 28px; height: 28px; } .rq-step:not(:last-child)::before { left: 13px; top: 28px; } }
@media (max-width: 640px) {
  .card-head:has(> select) { flex-wrap: wrap; }
  .card-head:has(> select) > select { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .rq-name { overflow-wrap: break-word; word-break: normal; }
}

/* ===== Fix workspace ===== */
#ag-views button.ok { color: #137a3f; border-color: #8fd6a9; background: color-mix(in srgb, #1fb460 12%, var(--paper, #fff)); }
#ag-views button.ok[aria-pressed="true"] { background: #1fb460; color: #fff; border-color: #1fb460; }
#ag-views button.ok svg { vertical-align: -2px; }
.pg-ws { display: grid; gap: 14px; }
.ws-sum { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between; padding: 14px 18px; border: 1px solid var(--rule, #e3e7f5); border-radius: 14px; background: var(--paper, #fff); }
.ws-sum.clean { border-color: #8fd6a9; background: color-mix(in srgb, #1fb460 8%, var(--paper, #fff)); }
.ws-sum-main { display: grid; gap: 8px; min-width: 240px; flex: 1 1 260px; }
.ws-sum-n { display: flex; gap: 6px; align-items: baseline; }
.ws-sum-n b { font-size: 26px; line-height: 1; color: #d6403d; } .ws-sum-n b.g { color: #1b8a4a; margin-left: 14px; }
.ws-sum-n span { color: var(--graphite, #52607a); font-size: 13px; }
.ws-bar { height: 8px; } .ws-bar i { background: #1fb460; }
.ws-done { flex: 1 1 100%; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #1fb460 14%, var(--paper, #fff)); color: #0f5f32; }
.ws-done span { display: inline; }
.ws-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.ws-tree, .ws-main, .ws-ibox { padding: 0; min-width: 0; }
.ws-tree { position: sticky; top: 12px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.ws-treehead { padding: 12px 14px 8px; display: grid; gap: 6px; border-bottom: 1px solid var(--rule, #e3e7f5); }
.ws-only { font-size: 12px; color: var(--graphite, #52607a); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.ws-treebody { overflow: auto; padding: 8px 6px 12px; font-size: 13px; }
.ws-dirhead, .ws-file { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: 4px 8px; border-radius: 8px; cursor: pointer; min-width: 0; }
.ws-dirhead:hover, .ws-file:hover { background: var(--wash, #f1f3fb); }
.ws-kids { margin-left: 8px; border-left: 1px solid var(--rule, #e3e7f5); padding-left: 4px; }
.ws-caret { display: inline-grid; transition: transform .12s; } .ws-caret.open { transform: rotate(90deg); }
.ws-dname, .ws-fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ws-file.on { background: color-mix(in srgb, var(--brand, #5b4de0) 14%, var(--paper, #fff)); font-weight: 600; }
.ws-file.bad .ws-fname { color: #c9302c; } .ws-file.good .ws-fname { color: #1b7d46; }
.ws-badge { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; color: #fff; }
.ws-bc { background: #4a8df6; } .ws-bt { background: #1fb460; } .ws-bp { background: #e0a030; }
.ws-count { min-width: 18px; padding: 0 6px; height: 18px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.ws-ok { width: 18px; height: 18px; border-radius: 50%; background: #1fb460; color: #fff; display: inline-grid; place-items: center; }
.ws-notest { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: #fff3dd; color: #9a6200; border: 1px solid #f0dfb3; white-space: nowrap; }
.ws-filehead { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--rule, #e3e7f5); flex-wrap: wrap; }
.ws-filehead code { overflow-wrap: anywhere; font-size: 12px; flex: 1 1 220px; min-width: 0; }
.ws-modes { display: flex; gap: 6px; }
.ws-testbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 14px; font-size: 13px; border-bottom: 1px solid var(--rule, #e3e7f5); }
.ws-testbar.warn { background: #fff8e8; color: #7a5200; } .ws-testbar.ok { background: color-mix(in srgb, #1fb460 8%, var(--paper, #fff)); color: #0f5f32; }
.linklike { border: 0; background: none; color: var(--brand, #5b4de0); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.ws-code { overflow: auto; max-height: 72vh; font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace; padding: 6px 0; }
.ws-ln { display: grid; grid-template-columns: 52px max-content auto; gap: 0 10px; white-space: pre; border-left: 3px solid transparent; min-width: 100%; width: max-content; }
.ws-n { text-align: right; color: var(--graphite, #8a94ab); user-select: none; padding-right: 6px; }
.ws-ln.bad { background: color-mix(in srgb, #e5484d 16%, var(--paper, #fff)); border-left-color: #e5484d; }
.ws-ln.bad .ws-c { color: #b3261e; font-weight: 600; }
.ws-ln.flash { background: color-mix(in srgb, #f5c542 28%, var(--paper, #fff)); border-left-color: #f5c542; }
.ws-tag { align-self: center; font: 600 11px system-ui, sans-serif; background: #e5484d; color: #fff; padding: 1px 8px; border-radius: 999px; white-space: nowrap; margin-right: 12px; }
.ws-editor { width: 100%; min-height: 60vh; border: 0; outline: 0; padding: 10px 14px; font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace; resize: vertical; background: var(--paper, #fff); color: inherit; white-space: pre; overflow: auto; box-sizing: border-box; }
.ws-issues { display: grid; gap: 14px; min-width: 0; }
.ws-ibox { padding: 14px; display: grid; gap: 10px; }
.ws-ibox h3 { margin: 0; font-size: 14px; }
.ws-issue { border: 1px solid var(--rule, #e3e7f5); border-left: 4px solid #e5484d; border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; background: var(--paper, #fff); }
.ws-issue.medium { border-left-color: #e0a030; } .ws-issue.low { border-left-color: #6f8bd6; } .ws-issue.good { border-left-color: #1fb460; background: color-mix(in srgb, #1fb460 7%, var(--paper, #fff)); }
.ws-ihead { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .ws-iloc { margin-left: auto; font-size: 11px; }
.ws-ititle { overflow-wrap: anywhere; } .ws-why { margin: 0; font-size: 13px; color: var(--graphite, #52607a); }
.ws-prop { display: grid; gap: 8px; } .ws-prop p { margin: 0; font-size: 13px; }
.ws-diff { border: 1px solid var(--rule, #e3e7f5); border-radius: 8px; overflow: auto; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.ws-d { display: grid; grid-template-columns: 22px max-content; white-space: pre; padding: 0 6px; width: max-content; min-width: 100%; }
.ws-d.del { background: color-mix(in srgb, #e5484d 16%, var(--paper, #fff)); color: #a8231f; } .ws-d.add { background: color-mix(in srgb, #1fb460 16%, var(--paper, #fff)); color: #0f5f32; }
.ws-d code { font: inherit; }
.ws-next { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; text-align: left; width: 100%; border: 1px solid var(--rule, #e3e7f5); border-radius: 10px; padding: 8px 10px; background: var(--paper, #fff); cursor: pointer; font: inherit; color: inherit; }
.ws-next:hover { border-color: var(--brand, #5b4de0); } .ws-next small { grid-column: 2; color: var(--graphite, #52607a); } .ws-nt { overflow-wrap: anywhere; font-size: 13px; }
@media (max-width: 1280px) { .ws-grid { grid-template-columns: 300px minmax(0, 1fr); } .ws-issues { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
@media (max-width: 820px) { .ws-grid { grid-template-columns: minmax(0, 1fr); } .ws-tree { position: static; max-height: 300px; } .ws-code { max-height: 60vh; } }

/* ===== Live checks ===== */
.lv-target { display: grid; gap: 4px; margin: 4px 0 12px; font-size: 14px; } .lv-target code { overflow-wrap: anywhere; }
.lv-eps { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .lv-eps code { font-size: 12px; padding: 2px 8px; border-radius: 8px; background: var(--wash, #f1f3fb); overflow-wrap: anywhere; }
.lv-clear { display: flex; gap: 8px; align-items: center; color: #137a3f; margin: 0; }
.lv-group.ok { border-color: #8fd6a9; }
.ws-pr { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule, #e3e7f5); border-radius: 14px; background: var(--paper, #fff); }
.ws-pr p { margin: 0; font-size: 13px; }
.ws-pr.ok { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-color: #8fd6a9; background: color-mix(in srgb, #1fb460 8%, var(--paper, #fff)); color: #0f5f32; }
.ws-pr.ok > div { flex: 1 1 280px; } .ws-pr.ok code { overflow-wrap: anywhere; }
.ws-pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.ws-pr-f { display: grid; gap: 4px; font-size: 12px; color: var(--graphite, #52607a); } .ws-pr-f input { padding: 9px 10px; border: 1px solid var(--rule-strong, #cdd3ea); border-radius: 10px; font: inherit; font-size: 14px; background: var(--paper, #fff); color: inherit; min-width: 0; }

/* Pods and CPU (Servers tab) */
.rt-panel { margin-bottom: 16px; }
.rt-panel .rt-cpu-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-panel .rt-cpu-v.warn, #sv-list .rt-cpu-v.warn { color: #b45309; }
.rt-panel .rt-cpu-v.bad, #sv-list .rt-cpu-v.bad { color: #b91c1c; }
.rt-chart { margin-top: 12px; }
.rt-chart svg { width: 100%; height: auto; display: block; }
.rt-chart .rt-cpu { fill: none; stroke: var(--brand); stroke-width: 2; }
.rt-chart .rt-max { fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .7; }
.rt-chart .rt-pods { fill: none; stroke: var(--graphite, #475569); stroke-width: 1.5; opacity: .55; }
.rt-chart .rt-hot { stroke: #dc2626; stroke-width: 1; stroke-dasharray: 2 4; opacity: .6; }
.rt-chart .rt-podlabel { fill: var(--graphite, #475569); font-size: 11px; }
.rt-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; margin: 6px 0 0 44px; color: var(--graphite, #475569); }
.rt-k::before { content: ''; display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--brand); vertical-align: middle; margin-right: 6px; }
.rt-k.max::before { border-top-style: dashed; opacity: .7; }
.rt-k.pods::before { border-top-color: var(--graphite, #475569); opacity: .55; }
.rt-k.hot::before { border-top: 1px dotted #dc2626; }
.rt-foot { font-size: 12px; margin-top: 10px; }
.sv-inst { overflow-x: auto; }
.sv-inst table { min-width: 880px; }
.sv-inst th, .sv-inst td { white-space: nowrap; }

/* Servers: pod gauges, findings and cluster columns */
.pl-wrap { margin-top: 18px; }
.pl-lane { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
.pl-pod { flex: 0 0 auto; width: 64px; display: grid; justify-items: center; gap: 5px; }
.pl-gauge { position: relative; width: 36px; height: 84px; border-radius: 12px; background: var(--wash); overflow: hidden; }
.pl-gauge i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--brand); border-radius: 0 0 12px 12px; transition: height .5s cubic-bezier(.2, .8, .2, 1); }
.pl-gauge.warn i { background: var(--warn); }
.pl-gauge.bad i { background: var(--bad); }
.pl-gauge b { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dotted var(--graphite); opacity: .55; }
.pl-val { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1; }
.pl-name { font-size: 11.5px; color: var(--graphite); font-family: ui-monospace, Menlo, Consolas, monospace; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-rs { font-size: 11px; color: var(--graphite); }
.pl-rs.bad { color: var(--bad); font-weight: 650; }
.pl-pod.off { opacity: .5; }
.pl-pod.ghost .pl-gauge { background: transparent; border: 1.5px dashed var(--rule-strong); }
.pl-pod.ghost .pl-val, .pl-pod.ghost .pl-name { color: var(--graphite); }
.pl-more { align-self: center; font-size: 13px; color: var(--graphite); padding-left: 6px; }
.pl-key { margin: 8px 0 0; font-size: 12.5px; color: var(--graphite); }

.rt-advice { margin-top: 20px; }
.rt-adv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.rt-adv-head h4 { margin: 0; font-size: 15px; }
.rt-adv-sum { font-size: 13px; color: var(--graphite); }
.rt-list { list-style: none; margin: 0; padding: 0; }
.rt-adv { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--rule); }
.rt-list > .rt-adv:first-child { border-top: 0; }
.rt-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--rule-strong); justify-self: center; }
.rt-adv.critical .rt-dot { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-wash); }
.rt-adv.warn .rt-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-wash); }
.rt-adv-main { min-width: 0; }
.rt-adv-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.rt-sev { font-size: 12.5px; font-weight: 650; }
.rt-sev.critical { color: var(--bad); }
.rt-sev.warn { color: var(--warn); }
.rt-sev.info { color: var(--graphite); }
.rt-adv-t { margin: 0; font-size: 14.5px; font-weight: 650; }
.rt-adv-svc { font-size: 12.5px; color: var(--graphite); }
.rt-adv-pod { font-size: 12px; color: var(--graphite); background: var(--wash); padding: 1px 7px; border-radius: 6px; }
.rt-adv-d { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--graphite); max-width: 70ch; }
.rt-adv-a { display: flex; gap: 6px; align-items: baseline; margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; font-weight: 550; max-width: 70ch; }
.rt-adv-a svg { flex: 0 0 auto; color: var(--brand); position: relative; top: 2px; }
.rt-notes { border-top: 1px solid var(--rule); }
.rt-notes > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--graphite); padding: 12px 0 2px; list-style: none; }
.rt-notes > summary::-webkit-details-marker { display: none; }
.rt-notes > summary::after { content: " \25BE"; }
.rt-notes[open] > summary::after { content: " \25B4"; }
.rt-good { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; font-size: 13.5px; color: var(--ok); }
.mini-bar { display: block; width: 100%; max-width: 150px; height: 4px; border-radius: 4px; background: var(--wash); margin-top: 5px; overflow: hidden; }
.mini-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.mini-bar.warn i { background: var(--warn); }
.mini-bar.bad i { background: var(--bad); }
.sv-inst td.bad, .sv-inst td.bad .muted { color: var(--bad); font-weight: 600; }
@media (max-width: 640px) { .rt-adv { padding: 10px 11px; gap: 10px; } .rt-adv-ico { width: 28px; height: 28px; } }
.sv-inst.wide table { min-width: 1240px; table-layout: auto; }
.sv-inst.wide td, .sv-inst.wide th { padding-right: 18px; }

/* My company: automatic renewal */
.rn-card { margin: 16px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--ok); display: grid; gap: 4px; }
.rn-card.warn { border-left-color: var(--warn); } .rn-card.bad { border-left-color: var(--bad); }
.rn-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rn-top h3 { margin: 0; font-size: 16px; }
.rn-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ok); }
.rn-card.warn .rn-status { color: var(--warn); } .rn-card.bad .rn-status { color: var(--bad); }
.rn-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rn-line { margin: 2px 0 0; font-size: 18px; }
.rn-line strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.rn-sub { margin: 0; font-size: 13.5px; color: var(--graphite); }
.rn-alert { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; max-width: 62ch; }
.rn-alert strong { color: var(--bad); }
.rn-alert a { font-weight: 600; }
.rn-foot { margin-top: 8px; }

/* Servers list: one calm card per service */
.sv-card { border-left: 1px solid var(--rule); border-radius: 14px; box-shadow: none; padding: 18px 20px 6px; }
.sv-head { align-items: flex-start; }
.sv-title h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 18px; }
.sv-dot { width: 10px; height: 10px; box-shadow: none; }
.sv-state { font-size: 13.5px; font-weight: 600; color: var(--ok); }
.sv-state.stale { color: var(--warn); } .sv-state.offline { color: var(--bad); } .sv-state.unknown { color: var(--graphite); }
.sv-sum { margin: 6px 0 0; font-size: 14px; color: var(--graphite); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.sv-sum .warn { color: var(--warn); font-weight: 600; } .sv-sum .bad { color: var(--bad); font-weight: 600; }
.sv-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--rule-strong); margin: 0 10px; }
.sv-inst { border-radius: 0; margin: 14px -20px 0; border-top: 1px solid var(--rule); }
.sv-inst table { min-width: 760px; table-layout: auto; width: 100%; }
.sv-inst.wide table { min-width: 960px; }
.sv-inst th { background: none; font-size: 13px; color: var(--graphite); font-weight: 600; text-transform: none; letter-spacing: 0; }
.sv-inst th:first-child, .sv-inst td:first-child { padding-left: 20px; }
.sv-inst th, .sv-inst td { width: auto !important; }
.sv-srv { font-size: 13.5px; }
.sv-sub { font-size: 12.5px; color: var(--graphite); margin-top: 2px; }
.sv-inst td .chip + .sv-sub { margin-top: 4px; }
.sv-card .sv-inst { border: 0; border-top: 1px solid var(--rule); border-radius: 0 0 14px 14px; box-shadow: none; background: none; }
.sv-card .sv-inst th { background: none; }
.sv-head .btn { white-space: nowrap; flex: none; }
.sv-card .sv-inst.wide table { min-width: 0; }
.sv-card .sv-inst.wide td, .sv-card .sv-inst.wide th { padding-right: 10px; padding-left: 10px; }
.sv-card .sv-inst.wide td:first-child, .sv-card .sv-inst.wide th:first-child { padding-left: 20px; }
.sv-card .sv-inst.wide .mtr { min-width: 64px; }
.sv-card .sv-inst.wide td, .sv-card .sv-inst.wide th { padding-right: 6px; padding-left: 6px; font-size: 13.5px; }
.sv-card .sv-inst.wide td:first-child, .sv-card .sv-inst.wide th:first-child { padding-left: 20px; }
.sv-card .sv-inst.wide .mtr span { min-width: 30px; }