.nextjs-monitoring-page{--obs-cyan:#19acd0;--obs-violet:#7a5cf5;--obs-green:#1d9d70;--obs-amber:#e99a2c;--obs-red:#e94e68;--obs-ink:#10213a;--obs-muted:#586b82;--obs-line:#dbe5f1}
.nextjs-monitoring-page .compose-diagram{overflow:hidden;border-color:rgba(25,172,208,.24);background:radial-gradient(circle at 92% 4%,rgba(122,92,245,.1),transparent 28%),radial-gradient(circle at 4% 100%,rgba(25,172,208,.08),transparent 32%),#fff;box-shadow:0 18px 48px rgba(33,55,92,.1)}
.nextjs-monitoring-page .compose-diagram figcaption{padding:23px 25px 20px;border-bottom:1px solid var(--obs-line);background:linear-gradient(135deg,#f3f9ff,#f8f5ff)}.nextjs-monitoring-page .compose-diagram figcaption strong{display:block;margin-bottom:7px;color:var(--obs-ink);font-size:1.06rem}.nextjs-monitoring-page .compose-diagram figcaption span{display:block;max-width:700px;color:var(--obs-muted);font-size:.91rem;line-height:1.6}
.nextjs-monitoring-page .compose-diagram>[role="img"]{display:flex;align-items:stretch;gap:15px;padding:24px}.nextjs-monitoring-page .compose-diagram .node,.nextjs-monitoring-page .compose-diagram section{position:relative;display:grid;min-width:0;flex:1;place-content:center;gap:7px;padding:17px;border:1px solid var(--obs-line);border-radius:14px;background:linear-gradient(145deg,#fff,#f7faff);color:var(--obs-ink);text-align:center;box-shadow:0 9px 22px rgba(33,55,92,.08)}.nextjs-monitoring-page .compose-diagram strong{color:var(--obs-ink)}.nextjs-monitoring-page .compose-diagram span,.nextjs-monitoring-page .compose-diagram em{color:var(--obs-muted);font-size:.8rem}.nextjs-monitoring-page .arrow{align-self:center;color:var(--obs-violet);font-style:normal;font-weight:900}
.nextjs-monitoring-page .compose-diagram .logs{border-color:rgba(25,172,208,.45);background:linear-gradient(145deg,#fff,#effbfe)}.nextjs-monitoring-page .compose-diagram .metrics{border-color:rgba(29,157,112,.42);background:linear-gradient(145deg,#fff,#effbf6)}.nextjs-monitoring-page .compose-diagram .traces{border-color:rgba(122,92,245,.42);background:linear-gradient(145deg,#fff,#f5f2ff)}.nextjs-monitoring-page .compose-diagram .alert{border-color:rgba(233,78,104,.46);background:linear-gradient(145deg,#fff,#fff2f5)}.nextjs-monitoring-page .compose-diagram .warn{border-color:rgba(233,154,44,.46);background:linear-gradient(145deg,#fff,#fff8eb)}
.nextjs-monitoring-page .compose-diagram .safe{border-color:rgba(29,157,112,.42);background:linear-gradient(145deg,#fff,#effbf6)}
.obs-flow>[role="img"]{overflow-x:auto}.obs-flow .node{min-width:108px}.obs-grid>[role="img"]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}.obs-pillars>[role="img"]{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}.obs-stack>[role="img"]{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}.obs-lifecycle .node:not(:last-child)::after{position:absolute;top:50%;right:-14px;z-index:2;color:var(--obs-violet);content:"\2192";transform:translateY(-50%)}
.obs-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin:24px 0}.obs-card-grid section{min-width:0;padding:21px;border:1px solid rgba(25,172,208,.18);border-radius:17px;background:linear-gradient(145deg,#fff,rgba(122,92,245,.045));box-shadow:0 10px 28px rgba(33,55,92,.06)}.obs-card-grid h3{margin-top:0}.obs-comparison{gap:20px;margin:28px 0 32px}.obs-card-grid .obs-comparison__card{position:relative;isolation:isolate;overflow:hidden;min-height:245px;padding:30px 28px 27px;border:1px solid #c9dce9;border-radius:20px;background:linear-gradient(145deg,#fff 0%,#f3f9fd 100%);box-shadow:0 16px 38px rgba(24,52,86,.1)}.obs-comparison__card::before{position:absolute;top:0;right:0;left:0;height:5px;background:var(--obs-card-accent);content:""}.obs-comparison__card::after{position:absolute;z-index:-1;top:-75px;right:-70px;width:190px;height:190px;border-radius:50%;background:var(--obs-card-glow);content:""}.obs-comparison__card--monitoring{--obs-card-accent:#0f94b6;--obs-card-glow:rgba(25,172,208,.14)}.obs-comparison__card--observability{--obs-card-accent:#6f55df;--obs-card-glow:rgba(122,92,245,.14)}.obs-comparison__label{display:inline-flex;align-items:center;min-height:30px;margin-bottom:17px;padding:5px 11px;border:1px solid color-mix(in srgb,var(--obs-card-accent) 30%,transparent);border-radius:999px;background:color-mix(in srgb,var(--obs-card-accent) 10%,#fff);color:var(--obs-card-accent);font-size:.76rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.obs-card-grid .obs-comparison__card h3{margin:0 0 12px;color:var(--obs-ink);font-size:clamp(1.55rem,3vw,1.85rem);line-height:1.2}.obs-card-grid .obs-comparison__card p{margin:0;color:#41546b;font-size:1rem;line-height:1.72}.obs-page-table{max-width:100%;overflow-x:auto;border-radius:14px}.obs-page-table table{min-width:690px}.nextjs-monitoring-page .code-block pre{max-width:100%;overflow-x:auto}.nextjs-monitoring-page .compose-learning-path{grid-template-columns:repeat(5,minmax(0,1fr))}.obs-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}.obs-kpi span{padding:15px;border:1px solid var(--obs-line);border-radius:12px;background:#f7fbff;text-align:center;font-weight:700}.obs-checklist{columns:2;column-gap:30px}.obs-checklist li{break-inside:avoid;margin-bottom:9px}.nextjs-monitoring-page .compose-article-art img{width:100%;height:auto}
.active-dark-mode .nextjs-monitoring-page .compose-diagram{border-color:rgba(25,172,208,.3);background:radial-gradient(circle at 92% 4%,rgba(122,92,245,.14),transparent 28%),#071322}.active-dark-mode .nextjs-monitoring-page .compose-diagram figcaption{background:rgba(4,17,34,.72);border-color:rgba(103,177,255,.18)}.active-dark-mode .nextjs-monitoring-page .compose-diagram strong{color:#f4f8ff}.active-dark-mode .nextjs-monitoring-page .compose-diagram figcaption span,.active-dark-mode .nextjs-monitoring-page .compose-diagram span,.active-dark-mode .nextjs-monitoring-page .compose-diagram em{color:#b9cbe0}.active-dark-mode .nextjs-monitoring-page .compose-diagram .node,.active-dark-mode .nextjs-monitoring-page .compose-diagram section{border-color:rgba(103,177,255,.25);background:linear-gradient(145deg,#12304f,#0a1f37);color:#fff}.active-dark-mode .nextjs-monitoring-page .obs-kpi span{border-color:rgba(103,177,255,.22);background:#0b2139;color:#eaf4ff}.active-dark-mode .nextjs-monitoring-page .obs-card-grid .obs-comparison__card{border-color:#294966;background:linear-gradient(145deg,#102a43 0%,#091a2d 100%);box-shadow:0 18px 42px rgba(0,0,0,.24)}.active-dark-mode .nextjs-monitoring-page .obs-comparison__card::after{opacity:.9}.active-dark-mode .nextjs-monitoring-page .obs-comparison__label{border-color:color-mix(in srgb,var(--obs-card-accent) 52%,transparent);background:color-mix(in srgb,var(--obs-card-accent) 17%,#091a2d);color:#dff8ff}.active-dark-mode .nextjs-monitoring-page .obs-comparison__card--observability .obs-comparison__label{color:#e7e0ff}.active-dark-mode .nextjs-monitoring-page .obs-card-grid .obs-comparison__card h3{color:#f7fbff}.active-dark-mode .nextjs-monitoring-page .obs-card-grid .obs-comparison__card p{color:#c4d3e4}

/* Unified information-card treatment for the complete monitoring article. */
.obs-comparison__card--monitoring {
  --obs-card-accent: #08758f;
}

.obs-card-grid:not(.obs-comparison) section {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-color: #cbdce9;
  border-top: 4px solid var(--obs-cyan);
  background: linear-gradient(145deg, #fff, #f5f9fd);
  box-shadow: 0 14px 34px rgba(24, 52, 86, .08);
}

.obs-card-grid:not(.obs-comparison) section:nth-child(even) {
  border-top-color: var(--obs-violet);
}

.obs-card-grid:not(.obs-comparison) h3 {
  margin: 0 0 11px;
  color: var(--obs-ink);
  font-size: 1.28rem;
  line-height: 1.3;
}

.obs-card-grid:not(.obs-comparison) :is(p, li) {
  color: #465a72;
  line-height: 1.68;
}

.obs-card-grid:not(.obs-comparison) ul {
  margin-bottom: 0;
}

.obs-page-table {
  margin: 26px 0 32px;
  border: 1px solid var(--dep-border);
  background: var(--dep-surface);
}

.obs-page-table th {
  background: var(--dep-soft);
  color: var(--dep-text);
}

.obs-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  columns: auto;
  margin: 24px 0 32px !important;
  padding: 0 !important;
  list-style: none;
}

.obs-checklist li {
  position: relative;
  margin: 0;
  padding: 14px 15px 14px 45px;
  border: 1px solid var(--dep-border);
  border-radius: 12px;
  background: var(--dep-surface);
  color: var(--dep-muted);
}

.obs-checklist li::before {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: rgba(29, 157, 112, .13);
  color: var(--obs-green);
  content: "\2713";
  font-size: 12px;
  font-weight: 900;
}

.active-dark-mode .nextjs-monitoring-page .obs-card-grid:not(.obs-comparison) section {
  border-color: #294966;
  border-top-color: #35c8e9;
  background: linear-gradient(145deg, #102a43, #091a2d);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .2);
}

.active-dark-mode .nextjs-monitoring-page .obs-card-grid:not(.obs-comparison) section:nth-child(even) {
  border-top-color: #9b87ff;
}

.active-dark-mode .nextjs-monitoring-page .obs-card-grid:not(.obs-comparison) h3 {
  color: #f7fbff;
}

.active-dark-mode .nextjs-monitoring-page .obs-card-grid:not(.obs-comparison) :is(p, li) {
  color: #c4d3e4;
}

.active-dark-mode .nextjs-monitoring-page .compose-learning-path li {
  border-color: #294966;
  background: #0d2138;
  color: #dce9f7;
}

.active-dark-mode .nextjs-monitoring-page .compose-learning-path em {
  color: #65ddb0;
}
@media(max-width:900px){.nextjs-monitoring-page .compose-learning-path{grid-template-columns:repeat(2,minmax(0,1fr))}.obs-stack>[role="img"]{grid-template-columns:repeat(2,minmax(0,1fr))}.obs-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.obs-card-grid,.obs-grid>[role="img"],.obs-pillars>[role="img"],.obs-stack>[role="img"],.nextjs-monitoring-page .compose-learning-path,.obs-checklist{grid-template-columns:1fr}.nextjs-monitoring-page .compose-diagram>[role="img"]{display:flex!important;overflow:visible;flex-direction:column;gap:12px}.nextjs-monitoring-page .arrow{transform:rotate(90deg)}.obs-lifecycle .node:not(:last-child)::after{top:auto;right:50%;bottom:-22px;transform:translateX(50%) rotate(90deg)}.obs-checklist{columns:1}}
@media(max-width:420px){.nextjs-monitoring-page .compose-diagram>[role="img"]{padding:15px}.nextjs-monitoring-page .compose-diagram figcaption{padding:19px 17px}.obs-card-grid section{padding:17px}.obs-card-grid .obs-comparison__card{min-height:0;padding:25px 21px 23px}.obs-kpi{grid-template-columns:1fr}}