.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-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}
body.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}body.active-dark-mode.nextjs-monitoring-page .compose-diagram figcaption{background:rgba(4,17,34,.72);border-color:rgba(103,177,255,.18)}body.active-dark-mode.nextjs-monitoring-page .compose-diagram strong{color:#f4f8ff}body.active-dark-mode.nextjs-monitoring-page .compose-diagram figcaption span,body.active-dark-mode.nextjs-monitoring-page .compose-diagram span,body.active-dark-mode.nextjs-monitoring-page .compose-diagram em{color:#b9cbe0}body.active-dark-mode.nextjs-monitoring-page .compose-diagram .node,body.active-dark-mode.nextjs-monitoring-page .compose-diagram section{border-color:rgba(103,177,255,.25);background:linear-gradient(145deg,#12304f,#0a1f37);color:#fff}body.active-dark-mode.nextjs-monitoring-page .obs-kpi span{border-color:rgba(103,177,255,.22);background:#0b2139;color:#eaf4ff}
@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{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-kpi{grid-template-columns:1fr}}