.nextjs-security-page{--security-cyan:#22d3ee;--security-blue:#2563eb;--security-violet:#7c3aed;--security-green:#0f9f78;--security-amber:#f59e0b;--security-red:#ef476f;--security-ink:#10213a;--security-muted:#586b82;--security-line:#d9e6f2}
.security-hero__visual,.security-art{overflow:hidden;margin:30px 0;border:1px solid rgba(34,211,238,.24);border-radius:22px;background:#071322;box-shadow:0 24px 60px rgba(7,19,34,.18)}
.security-hero__visual img,.security-art img{display:block;width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover}.security-art figcaption{padding:18px 22px;background:linear-gradient(135deg,#f0fbff,#f5f2ff);color:var(--security-muted);line-height:1.65}.security-art figcaption strong{color:var(--security-ink)}
.security-architecture{overflow:hidden;margin:28px 0;border:1px solid rgba(34,211,238,.25);border-radius:20px;background:radial-gradient(circle at 85% 10%,rgba(124,58,237,.11),transparent 30%),#fff;box-shadow:0 18px 48px rgba(33,55,92,.09)}
.security-architecture figcaption{padding:23px 25px 20px;border-bottom:1px solid var(--security-line);background:linear-gradient(135deg,#eefcff,#f7f4ff)}.security-architecture figcaption strong,.security-architecture figcaption span{display:block}.security-architecture figcaption strong{margin-bottom:7px;color:var(--security-ink);font-size:1.06rem}.security-architecture figcaption span{max-width:760px;color:var(--security-muted);font-size:.92rem;line-height:1.6}
.security-flow{display:grid;place-items:center;gap:9px;padding:28px}.security-flow>i{color:var(--security-violet);font-style:normal;font-size:1.25rem;font-weight:900}.security-node{display:grid;min-width:240px;min-height:56px;place-content:center;padding:13px 18px;border:1px solid var(--security-line);border-radius:14px;background:linear-gradient(145deg,#fff,#f5f9fd);color:var(--security-ink);font-weight:800;text-align:center;box-shadow:0 8px 22px rgba(33,55,92,.08)}.security-node--request{border-color:rgba(37,99,235,.35);background:#eef5ff}.security-node--gateway{border-color:rgba(124,58,237,.35);background:#f5f1ff}.security-node--browser{border-color:rgba(15,159,120,.35);background:#edfbf6}
.security-header-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,720px)}.security-header-stack span{padding:13px;border:1px solid rgba(34,211,238,.28);border-radius:12px;background:#f1fcfe;color:#0d5870;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;font-weight:700;text-align:center}.security-header-stack span:last-child{grid-column:1/-1}
.security-table{max-width:100%;overflow-x:auto;margin:24px 0;border:1px solid var(--security-line);border-radius:15px}.security-table table{min-width:720px;margin:0}.security-table th{background:#eff9fc;color:var(--security-ink)}.security-table th,.security-table td{padding:14px 16px;vertical-align:top}
.security-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin:25px 0}.security-card-grid section{min-width:0;padding:21px;border:1px solid rgba(34,211,238,.2);border-radius:17px;background:linear-gradient(145deg,#fff,rgba(124,58,237,.045));box-shadow:0 10px 28px rgba(33,55,92,.06)}.security-card-grid section>span{display:inline-grid;min-width:42px;height:30px;place-items:center;margin-bottom:12px;padding:0 9px;border-radius:99px;background:rgba(37,99,235,.09);color:var(--security-blue);font-size:.73rem;font-weight:900;letter-spacing:.06em}.security-card-grid h3{margin:0 0 8px}.security-card-grid p{margin:0}
.security-directives{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:24px 0}.security-directives section{padding:18px;border-left:4px solid var(--security-cyan);border-radius:0 14px 14px 0;background:#f7fbff}.security-directives section:nth-child(3n+2){border-color:var(--security-violet)}.security-directives section:nth-child(3n){border-color:var(--security-green)}.security-directives h3{margin:0 0 7px;font-size:1rem}.security-directives p{margin:0;color:var(--security-muted);font-size:.94rem;line-height:1.65}
.security-rollout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:25px 0;counter-reset:rollout}.security-rollout section{position:relative;padding:22px 18px;border:1px solid var(--security-line);background:#fff}.security-rollout section:first-child{border-radius:16px 0 0 16px}.security-rollout section:last-child{border-radius:0 16px 16px 0}.security-rollout section+section{border-left:0}.security-rollout section+section:before{position:absolute;z-index:2;top:25px;left:-8px;content:'\203A';color:var(--security-violet);font-size:1.7rem;font-weight:900}.security-rollout strong{display:block;margin-bottom:8px;color:var(--security-ink)}.security-rollout p{margin:0;color:var(--security-muted);font-size:.9rem;line-height:1.6}
.security-track-path{margin:28px 0;padding:24px;border:1px solid rgba(34,211,238,.22);border-radius:20px;background:linear-gradient(145deg,#f2fbff,#f7f3ff)}.security-track-path h2{margin:0 0 18px!important;font-size:1.25rem!important}.security-track-path ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.security-track-path li{position:relative;display:grid;align-content:start;gap:5px;min-width:0;padding:15px;border:1px solid var(--security-line);border-radius:13px;background:#fff}.security-track-path li:not(:last-child):after{position:absolute;z-index:2;top:50%;right:-9px;content:'\203A';transform:translateY(-50%);color:var(--security-violet);font-size:1.5rem;font-weight:900}.security-track-path span,.security-track-path em{color:var(--security-muted);font-size:.72rem;font-style:normal;text-transform:uppercase;letter-spacing:.05em}.security-track-path strong{color:var(--security-ink);font-size:.87rem;line-height:1.35}.security-track-path .is-current{border-color:rgba(34,211,238,.55);box-shadow:inset 0 0 0 2px rgba(34,211,238,.08)}.security-track-path .is-current em,.security-track-path .is-complete em{color:var(--security-green);font-weight:800}
.security-diagram{overflow:hidden;margin:26px 0;border:1px solid rgba(34,211,238,.24);border-radius:18px;background:#fff;box-shadow:0 14px 38px rgba(33,55,92,.07)}.security-diagram figcaption{padding:20px 22px;border-bottom:1px solid var(--security-line);background:linear-gradient(135deg,#eefcff,#f7f4ff)}.security-diagram figcaption strong,.security-diagram figcaption span{display:block}.security-diagram figcaption strong{margin-bottom:6px;color:var(--security-ink)}.security-diagram figcaption span{color:var(--security-muted);font-size:.9rem;line-height:1.55}.security-diagram>div{display:flex;align-items:stretch;justify-content:center;gap:11px;padding:24px}.security-diagram>div>span,.security-diagram>div>b,.security-diagram>div>section{display:grid;min-width:0;place-content:center;gap:7px;padding:14px;border:1px solid var(--security-line);border-radius:13px;background:linear-gradient(145deg,#fff,#f5f9fd);color:var(--security-ink);font-size:.9rem;text-align:center}.security-diagram>div>span,.security-diagram>div>b{flex:1}.security-diagram>div>section{flex:1.5}.security-diagram>div>section span,.security-diagram>div>section strong{display:block;padding:7px 9px;border-radius:8px;background:rgba(37,99,235,.07)}.security-diagram>div>i{align-self:center;color:var(--security-violet);font-size:1.3rem;font-style:normal;font-weight:900}.security-diagram .good{color:#087557;background:rgba(15,159,120,.1)}.security-diagram .bad{color:#b72848;background:rgba(239,71,111,.1)}.frame-flow>div,.static-dynamic>div,.cors-flow>div{display:grid;grid-template-columns:1fr 1fr}.frame-flow section,.static-dynamic section,.cors-flow section{padding:21px!important}.testing-loop>div{flex-wrap:wrap}.testing-loop>div>*{flex:1 1 90px}.split-policy>div>section{flex:2}
.security-checklist{columns:2;column-gap:34px}.security-checklist li{break-inside:avoid;margin-bottom:10px}.nextjs-security-page .code-block pre{max-width:100%;overflow-x:auto}
body.active-dark-mode.nextjs-security-page .security-architecture{border-color:rgba(34,211,238,.3);background:radial-gradient(circle at 85% 10%,rgba(124,58,237,.14),transparent 30%),#071322}body.active-dark-mode.nextjs-security-page .security-architecture figcaption{border-color:rgba(103,177,255,.18);background:rgba(4,17,34,.75)}body.active-dark-mode.nextjs-security-page .security-architecture figcaption strong,body.active-dark-mode.nextjs-security-page .security-node,body.active-dark-mode.nextjs-security-page .security-art figcaption strong,body.active-dark-mode.nextjs-security-page .security-rollout strong{color:#f4f8ff}body.active-dark-mode.nextjs-security-page .security-architecture figcaption span,body.active-dark-mode.nextjs-security-page .security-art figcaption,body.active-dark-mode.nextjs-security-page .security-rollout p{color:#b9cbe0}body.active-dark-mode.nextjs-security-page .security-node,body.active-dark-mode.nextjs-security-page .security-card-grid section,body.active-dark-mode.nextjs-security-page .security-rollout section{border-color:rgba(103,177,255,.22);background:#0b2139}body.active-dark-mode.nextjs-security-page .security-header-stack span{border-color:rgba(34,211,238,.26);background:#0b2941;color:#a9effa}body.active-dark-mode.nextjs-security-page .security-art figcaption{background:#0b2139}body.active-dark-mode.nextjs-security-page .security-directives section{background:#0b2139}body.active-dark-mode.nextjs-security-page .security-table{border-color:rgba(103,177,255,.22)}body.active-dark-mode.nextjs-security-page .security-table th{background:#102a44;color:#f4f8ff}
body.active-dark-mode.nextjs-security-page .security-track-path,body.active-dark-mode.nextjs-security-page .security-diagram figcaption{border-color:rgba(103,177,255,.22);background:#091b30}body.active-dark-mode.nextjs-security-page .security-track-path li,body.active-dark-mode.nextjs-security-page .security-diagram,body.active-dark-mode.nextjs-security-page .security-diagram>div>span,body.active-dark-mode.nextjs-security-page .security-diagram>div>b,body.active-dark-mode.nextjs-security-page .security-diagram>div>section{border-color:rgba(103,177,255,.22);background:#0b2139}body.active-dark-mode.nextjs-security-page .security-track-path strong,body.active-dark-mode.nextjs-security-page .security-diagram figcaption strong,body.active-dark-mode.nextjs-security-page .security-diagram>div>*{color:#f4f8ff}body.active-dark-mode.nextjs-security-page .security-track-path span,body.active-dark-mode.nextjs-security-page .security-track-path em,body.active-dark-mode.nextjs-security-page .security-diagram figcaption span{color:#b9cbe0}
@media(max-width:900px){.security-rollout{grid-template-columns:1fr 1fr;gap:12px}.security-rollout section,.security-rollout section:first-child,.security-rollout section:last-child{border:1px solid var(--security-line);border-radius:14px}.security-rollout section+section:before{display:none}}
@media(max-width:767px){.security-card-grid,.security-directives,.security-rollout,.security-header-stack,.security-track-path ol,.frame-flow>div,.static-dynamic>div,.cors-flow>div{grid-template-columns:1fr}.security-track-path li:not(:last-child):after{top:auto;right:50%;bottom:-14px;transform:translateX(50%) rotate(90deg)}.security-diagram>div{flex-direction:column;padding:17px}.security-diagram>div>i{transform:rotate(90deg)}.security-diagram figcaption{padding:18px 17px}.security-header-stack span:last-child{grid-column:auto}.security-checklist{columns:1}.security-node{width:100%;min-width:0}.security-architecture figcaption{padding:19px 17px}.security-flow{padding:18px}.security-art figcaption{padding:16px 17px}}

/* The CSP diagrams contain essential instructional text, not decorative labels. */
.nextjs-security-page .security-diagram figcaption strong{font-size:1.08rem}
.nextjs-security-page .security-diagram figcaption span{font-size:1rem;line-height:1.6}
.nextjs-security-page .security-diagram>div>span,
.nextjs-security-page .security-diagram>div>b,
.nextjs-security-page .security-diagram>div>section,
.nextjs-security-page .security-diagram>div>section span,
.nextjs-security-page .security-diagram>div>section strong{font-size:1rem!important;line-height:1.45}
.nextjs-security-page .security-diagram>div>section{gap:9px;padding:16px}
.nextjs-security-page .security-diagram>div>section span,
.nextjs-security-page .security-diagram>div>section strong{padding:9px 11px}