.nextjs-security-page{--security-cyan:#14b8d4;--security-violet:#7c5cff;--security-green:#16a36b;--security-red:#dc4b61;--security-ink:#102033;--security-soft:#eef7fa}
.nextjs-security-page .blog-hero{background:radial-gradient(circle at 15% 18%,rgba(20,184,212,.14),transparent 38%),radial-gradient(circle at 86% 28%,rgba(124,92,255,.15),transparent 34%),linear-gradient(180deg,#f8fbff 0%,#fff 100%)}
.security-hero__visual{margin:40px 0 0}.security-hero__visual img,.nextjs-security-page .article-art img{display:block;width:100%;height:auto;border:1px solid #d8e6ee;border-radius:24px;box-shadow:0 28px 70px rgba(15,35,58,.14)}
.advanced-learning-path{margin:36px 0;padding:26px;border:1px solid #d8e6ee;border-radius:20px;background:linear-gradient(135deg,#f3fbfd,#f6f4ff)}
.advanced-learning-path h2{margin:0 0 20px!important;font-size:22px!important}.advanced-learning-path ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}.advanced-learning-path li{display:grid;gap:5px;padding:18px;border:1px solid #dce8ee;border-radius:14px;background:#fff}.advanced-learning-path li:nth-child(2){border-color:#8b74ff;box-shadow:0 10px 24px rgba(124,92,255,.12)}.advanced-learning-path span{color:#65788b;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.advanced-learning-path strong{color:var(--security-ink);font-size:15px}.advanced-learning-path em{color:var(--security-green);font-size:12px;font-style:normal;font-weight:800}
.security-ordered-list{display:grid;gap:8px;margin:20px 0 28px;padding-left:25px}.security-ordered-list li{padding:10px 14px;border-left:3px solid var(--security-cyan);border-radius:0 10px 10px 0;background:#f4f9fb}
.nextjs-security-page .article-callout--danger{border-color:#f1c3cb;background:#fff5f6}.nextjs-security-page .article-callout--danger strong{color:#a9253c}.nextjs-security-page .code-block--danger{border-color:#e8b4bd}.nextjs-security-page .code-block--danger .code-block__label{color:#b02a42;background:#fff0f2}
.security-diagram{margin:36px 0;padding:24px;border:1px solid #d9e6ec;border-radius:20px;background:linear-gradient(145deg,#f8fcfe,#f4f2ff);box-shadow:0 16px 42px rgba(28,52,77,.08);overflow:hidden}.security-diagram figcaption{display:grid;gap:5px;margin-bottom:22px}.security-diagram figcaption strong{color:var(--security-ink);font-size:18px}.security-diagram figcaption span{color:#607286;font-size:14px;line-height:1.55}.security-diagram>div[role=img]{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;padding:22px;border:1px solid #dbe7ed;border-radius:16px;background:#fff;color:var(--security-ink);text-align:center}.security-diagram b,.security-diagram strong,.security-diagram span,.security-diagram em{min-width:0}.security-diagram>div>i{flex:0 0 auto;color:var(--security-violet);font-size:24px;font-style:normal}.security-diagram>div>b,.security-diagram>div>strong,.security-diagram>div>span{padding:13px 16px;border:1px solid #cfe2e9;border-radius:12px;background:#f8fbfc}.security-diagram section{display:flex;gap:10px;align-items:stretch}.security-diagram section>span,.security-diagram section>b{display:grid;gap:5px;place-content:center;padding:13px 15px;border:1px solid #cfe2e9;border-radius:12px;background:#f7fbfc}.security-diagram section em{color:var(--security-violet);font-style:normal;font-weight:800}.security-diagram section small{color:#617489}.security-diagram .good{border-color:#a9dcc8!important;background:#effaf5!important;color:#08734a!important}.security-diagram .bad{border-color:#efbac4!important;background:#fff1f3!important;color:#a5233a!important}
.env-decision>div[role=img]{flex-direction:column}.env-decision section{width:min(680px,100%)}.env-decision section span{flex:1}.boundary-flow section{display:grid;gap:7px;padding:16px;border:1px solid #cfe2e9;border-radius:14px;background:#f6fafc}.boundary-flow section>span{padding:8px 11px}.boundary-flow .is-public{border-color:#d9ceff;background:#f7f4ff}.secret-flow section{display:grid;gap:8px}.secret-flow section span{color:#a5233a}.secret-flow section em{color:#08734a}.public-flow>div[role=img]{align-items:stretch}.public-flow section{display:grid}.build-flow section{display:grid;gap:6px}.build-flow .runtime{border-color:#b7dfcf;background:#f0fbf6}.entry-flow section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.database-flow section{display:grid}.database-flow section em{color:#a5233a}.docker-flow>div[role=img]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.docker-flow section{display:grid;gap:10px;padding:20px;border:1px solid;border-radius:14px}.docker-flow section strong{font-size:17px}.leak-flow>div[role=img]{flex-wrap:wrap}.csp-flow section,.nonce-flow section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.lifecycle-flow>div[role=img]{flex-wrap:wrap}.lifecycle-flow>div>span{font-weight:800}
.security-checklists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0 36px}.security-checklists section{padding:24px;border:1px solid #d9e6ec;border-radius:16px;background:#f8fbfc}.security-checklists h3{margin:0 0 15px;font-size:20px}.security-checklists ul{display:grid;gap:8px;margin:0;padding-left:22px}.security-checklists li{padding-left:4px}.official-sources{margin:42px 0 0;padding:26px;border:1px solid #d9e6ec;border-radius:18px;background:#f7fafc}.official-sources h2{margin:0 0 16px!important;font-size:24px!important}.official-sources ul{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}.official-sources a{display:inline-flex;padding:9px 13px;border:1px solid #cfe0e8;border-radius:999px;background:#fff;font-size:13px;font-weight:700}
.nextjs-security-page .tutorial-nav>span{display:flex;flex:1;flex-direction:column;gap:5px;padding:20px;border:1px dashed #cddce4;border-radius:16px;color:#607286}.nextjs-security-page .tutorial-nav>span small{font-size:12px;text-transform:uppercase}.nextjs-security-page .tutorial-nav>span strong{color:var(--security-ink)}
[data-theme=dark] .nextjs-security-page .blog-hero,.active-dark-mode.nextjs-security-page .blog-hero{background:radial-gradient(circle at 15% 18%,rgba(20,184,212,.16),transparent 38%),radial-gradient(circle at 86% 28%,rgba(124,92,255,.18),transparent 34%),linear-gradient(180deg,#06111f 0%,#091522 100%)}
[data-theme=dark] .security-hero__visual img,[data-theme=dark] .nextjs-security-page .article-art img,.active-dark-mode .security-hero__visual img,.active-dark-mode.nextjs-security-page .article-art img{border-color:#24394b;box-shadow:0 28px 70px rgba(0,0,0,.32)}
[data-theme=dark] .advanced-learning-path,[data-theme=dark] .security-diagram,[data-theme=dark] .official-sources,.active-dark-mode .advanced-learning-path,.active-dark-mode .security-diagram,.active-dark-mode .official-sources{border-color:#284054;background:linear-gradient(145deg,#0b1926,#11172b)}
[data-theme=dark] .advanced-learning-path li,[data-theme=dark] .security-diagram>div[role=img],[data-theme=dark] .security-checklists section,[data-theme=dark] .official-sources a,.active-dark-mode .advanced-learning-path li,.active-dark-mode .security-diagram>div[role=img],.active-dark-mode .security-checklists section,.active-dark-mode .official-sources a{border-color:#294256;background:#0c1a27}
[data-theme=dark] .advanced-learning-path strong,[data-theme=dark] .security-diagram figcaption strong,[data-theme=dark] .security-diagram>div[role=img],[data-theme=dark] .nextjs-security-page .tutorial-nav>span strong,.active-dark-mode .advanced-learning-path strong,.active-dark-mode .security-diagram figcaption strong,.active-dark-mode .security-diagram>div[role=img],.active-dark-mode.nextjs-security-page .tutorial-nav>span strong{color:#edf7ff}
[data-theme=dark] .security-diagram>div>b,[data-theme=dark] .security-diagram>div>strong,[data-theme=dark] .security-diagram>div>span,[data-theme=dark] .security-diagram section,[data-theme=dark] .security-diagram section>span,[data-theme=dark] .security-diagram section>b,.active-dark-mode .security-diagram>div>b,.active-dark-mode .security-diagram>div>strong,.active-dark-mode .security-diagram>div>span,.active-dark-mode .security-diagram section,.active-dark-mode .security-diagram section>span,.active-dark-mode .security-diagram section>b{border-color:#2b465b;background:#102232}
[data-theme=dark] .security-ordered-list li,.active-dark-mode .security-ordered-list li{background:#102230}
@media(max-width:900px){.advanced-learning-path ol{grid-template-columns:1fr}.security-diagram>div[role=img]{flex-wrap:wrap}.boundary-flow>div[role=img],.secret-flow>div[role=img],.build-flow>div[role=img],.entry-flow>div[role=img],.database-flow>div[role=img]{display:grid;grid-template-columns:1fr}.security-diagram>div>i{transform:rotate(90deg)}.docker-flow>div[role=img],.security-checklists{grid-template-columns:1fr}.csp-flow section,.nonce-flow section{width:100%}}
@media(max-width:560px){.security-hero__visual{margin-top:26px}.security-hero__visual img,.nextjs-security-page .article-art img{border-radius:14px}.security-diagram{margin:28px 0;padding:14px;border-radius:15px}.security-diagram>div[role=img]{padding:15px}.env-decision section,.csp-flow section,.nonce-flow section{display:grid;grid-template-columns:1fr;width:100%}.entry-flow section{grid-template-columns:1fr}.official-sources ul{display:grid}.official-sources a{justify-content:center}.nextjs-security-page .tutorial-nav{display:grid}.advanced-learning-path{padding:18px}}