.nextjs-csrf-page{--csrf-bg:#f4f8fc;--csrf-surface:#fff;--csrf-soft:#eef7fb;--csrf-ink:#10213a;--csrf-muted:#52677f;--csrf-line:#d3e3ef;--csrf-cyan:#0891b2;--csrf-violet:#7c3aed;--csrf-green:#087f5b;--csrf-red:#c92a4b;--csrf-amber:#a86100;background:var(--csrf-bg);color:var(--csrf-ink)}
.nextjs-csrf-page.active-dark-mode{--csrf-bg:#06111f;--csrf-surface:#0b1d31;--csrf-soft:#102943;--csrf-ink:#f1f7ff;--csrf-muted:#b7c9dc;--csrf-line:#294660;--csrf-cyan:#67e8f9;--csrf-violet:#c4b5fd;--csrf-green:#6ee7b7;--csrf-red:#fda4af;--csrf-amber:#fcd34d}
.nextjs-csrf-page .blog-hero--article{border-bottom:1px solid var(--csrf-line);background:radial-gradient(circle at 12% 18%,rgba(8,145,178,.2),transparent 30%),radial-gradient(circle at 88% 12%,rgba(124,58,237,.18),transparent 31%),var(--csrf-bg)}
.nextjs-csrf-page .blog-hero--article .blog-container{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:clamp(34px,5vw,74px);align-items:center}.nextjs-csrf-page .blog-breadcrumbs,.nextjs-csrf-page .blog-eyebrow,.nextjs-csrf-page .blog-hero h1,.nextjs-csrf-page .blog-hero__intro,.nextjs-csrf-page .article-meta{grid-column:1}.csrf-hero{grid-column:2;grid-row:1/7;overflow:hidden;margin:0;border:1px solid var(--csrf-line);border-radius:24px;background:#071322;box-shadow:0 30px 80px rgba(3,12,29,.34)}.csrf-hero img,.csrf-art img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover}
.nextjs-csrf-page .article-layout{width:min(1120px,calc(100% - 40px));grid-template-columns:minmax(0,760px) minmax(220px,280px);gap:64px}.nextjs-csrf-page .article-content>p,.nextjs-csrf-page .article-content>ul,.nextjs-csrf-page .article-content>ol{color:var(--csrf-muted)}
.csrf-audit{margin:28px 0;padding:22px;border:1px solid color-mix(in srgb,var(--csrf-amber) 38%,var(--csrf-line));border-radius:18px;background:color-mix(in srgb,var(--csrf-amber) 8%,var(--csrf-surface))}.csrf-audit strong{display:block;margin-bottom:7px;color:var(--csrf-ink);font-size:1.08rem}.csrf-audit p{margin:0!important;color:var(--csrf-muted)}
.csrf-path{margin:30px 0;padding:25px;border:1px solid var(--csrf-line);border-radius:20px;background:var(--csrf-surface)}.csrf-path h2{margin:0 0 19px!important;font-size:1.35rem!important}.csrf-path ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.csrf-path li{position:relative;display:grid;align-content:start;gap:7px;min-width:0;padding:15px;border:1px solid var(--csrf-line);border-radius:13px;background:var(--csrf-soft)}.csrf-path li:not(:last-child)::after{position:absolute;z-index:2;top:50%;right:-10px;content:'\203A';color:var(--csrf-violet);font-size:1.45rem;font-weight:900;transform:translate(50%,-50%)}.csrf-path span{color:var(--csrf-cyan);font-size:.7rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.csrf-path strong{color:var(--csrf-ink);font-size:.88rem;line-height:1.4}.csrf-path em{color:var(--csrf-green);font-size:.68rem;font-style:normal;font-weight:850;letter-spacing:.05em;text-transform:uppercase}.csrf-path .current{border-color:var(--csrf-cyan);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--csrf-cyan) 12%,transparent)}.csrf-path .upcoming em{color:var(--csrf-amber)}
.csrf-art{overflow:hidden;margin:30px 0;border:1px solid var(--csrf-line);border-radius:22px;background:#071322;box-shadow:0 20px 50px rgba(7,19,34,.16)}.csrf-art figcaption{padding:18px 21px;background:var(--csrf-surface);color:var(--csrf-muted);font-size:1rem;line-height:1.65}.csrf-art figcaption strong{color:var(--csrf-ink)}
.csrf-diagram{overflow:hidden;margin:28px 0;border:1px solid var(--csrf-line);border-radius:19px;background:var(--csrf-surface);box-shadow:0 14px 36px rgba(20,46,79,.07)}.csrf-diagram figcaption{padding:21px 23px;border-bottom:1px solid var(--csrf-line);background:linear-gradient(135deg,color-mix(in srgb,var(--csrf-cyan) 8%,var(--csrf-surface)),color-mix(in srgb,var(--csrf-violet) 7%,var(--csrf-surface)))}.csrf-diagram figcaption strong,.csrf-diagram figcaption span{display:block}.csrf-diagram figcaption strong{margin-bottom:7px;color:var(--csrf-ink);font-size:1.1rem;line-height:1.35}.csrf-diagram figcaption span{max-width:70ch;color:var(--csrf-muted);font-size:1rem;line-height:1.62}.csrf-flow{display:flex;align-items:stretch;justify-content:center;gap:11px;padding:24px}.csrf-flow>span,.csrf-flow>b,.csrf-flow>section{display:grid;flex:1;min-width:0;min-height:62px;place-content:center;gap:8px;padding:14px;border:1px solid var(--csrf-line);border-radius:13px;background:var(--csrf-soft);color:var(--csrf-ink);font-size:.95rem;line-height:1.45;text-align:center}.csrf-flow>i{align-self:center;flex:0 0 auto;color:var(--csrf-violet);font-size:1.25rem;font-style:normal;font-weight:900}.csrf-flow>section{flex:1.35}.csrf-flow section span,.csrf-flow section b{display:block;padding:7px 9px;border-radius:8px;background:color-mix(in srgb,var(--csrf-cyan) 8%,var(--csrf-surface))}.csrf-flow .safe{border-color:color-mix(in srgb,var(--csrf-green) 55%,var(--csrf-line));color:var(--csrf-green)}.csrf-flow .danger{border-color:color-mix(in srgb,var(--csrf-red) 55%,var(--csrf-line));color:var(--csrf-red)}.csrf-flow--stack{display:grid}.csrf-flow--stack>i{justify-self:center;transform:rotate(90deg)}.csrf-flow--split{display:grid;grid-template-columns:1fr 1fr}.csrf-flow--split>section{padding:19px}.csrf-flow--tree{display:grid;grid-template-columns:repeat(3,1fr)}
.csrf-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:25px 0}.csrf-card-grid section{min-width:0;padding:21px;border:1px solid var(--csrf-line);border-radius:17px;background:var(--csrf-surface)}.csrf-card-grid h3{margin:0 0 9px;font-size:1.12rem}.csrf-card-grid p{margin:0;color:var(--csrf-muted);font-size:1rem;line-height:1.7}.csrf-table{max-width:100%;overflow-x:auto;margin:25px 0;border:1px solid var(--csrf-line);border-radius:15px}.csrf-table table{min-width:700px;margin:0}.csrf-table th{background:var(--csrf-soft);color:var(--csrf-ink)}.csrf-table th,.csrf-table td{padding:14px 16px;vertical-align:top}.csrf-checklist{columns:2;column-gap:34px}.csrf-checklist li{break-inside:avoid;margin-bottom:10px}.nextjs-csrf-page .code-block pre{max-width:100%;overflow-x:auto}
@media(max-width:991px){.nextjs-csrf-page .blog-hero--article .blog-container{grid-template-columns:1fr}.nextjs-csrf-page .blog-breadcrumbs,.nextjs-csrf-page .blog-eyebrow,.nextjs-csrf-page .blog-hero h1,.nextjs-csrf-page .blog-hero__intro,.nextjs-csrf-page .article-meta,.csrf-hero{grid-column:1}.csrf-hero{grid-row:auto}.nextjs-csrf-page .article-layout{grid-template-columns:1fr}.nextjs-csrf-page .article-toc{display:none}.csrf-path ol{grid-template-columns:repeat(3,1fr)}.csrf-path li:nth-child(3)::after{display:none}}
@media(max-width:767px){.nextjs-csrf-page .blog-hero--article{padding:102px 0 48px}.nextjs-csrf-page .article-layout{width:min(100% - 28px,760px)}.csrf-path{padding:19px}.csrf-path ol,.csrf-card-grid,.csrf-flow--split,.csrf-flow--tree{grid-template-columns:1fr}.csrf-path li:not(:last-child)::after{top:auto;right:50%;bottom:-17px;display:block;transform:translateX(50%) rotate(90deg)}.csrf-flow{flex-direction:column;padding:18px}.csrf-flow>i{align-self:center;transform:rotate(90deg)}.csrf-flow>span,.csrf-flow>b,.csrf-flow>section{width:100%}.csrf-diagram figcaption{padding:18px}.csrf-checklist{columns:1}.csrf-art,.csrf-hero{border-radius:16px}}
@media(max-width:420px){.nextjs-csrf-page .blog-container{width:min(100% - 22px,1180px)}.csrf-diagram{margin-inline:-2px}.csrf-diagram figcaption strong{font-size:1.02rem}.csrf-diagram figcaption span,.csrf-flow>span,.csrf-flow>b,.csrf-flow>section{font-size:.94rem}.csrf-table table{min-width:620px}}
@media print{.csrf-diagram,.csrf-art{break-inside:avoid}.csrf-hero,.csrf-art{box-shadow:none}}