.nextjs-forms-page{--forms-cyan:#16c7e5;--forms-violet:#8062ff;--forms-green:#18a66d;--forms-red:#d94c62;--forms-amber:#d68a18;--forms-ink:#102033;--forms-muted:#607286}
.nextjs-forms-page .blog-hero{background:radial-gradient(circle at 15% 18%,rgba(22,199,229,.14),transparent 38%),radial-gradient(circle at 85% 26%,rgba(128,98,255,.16),transparent 36%),linear-gradient(180deg,#f7fbff 0%,#fff 100%)}
.forms-hero__visual{margin:40px 0 0}.forms-hero__visual img,.nextjs-forms-page .article-art img{display:block;width:100%;height:auto;border:1px solid #d6e5ed;border-radius:24px;box-shadow:0 28px 70px rgba(15,35,58,.14)}
.nextjs-forms-page .article-art{margin:38px 0}.nextjs-forms-page .article-art figcaption{display:grid;gap:5px;margin-top:14px;color:var(--forms-muted);font-size:14px;line-height:1.6}.nextjs-forms-page .article-art figcaption strong{color:var(--forms-ink);font-size:16px}
.advanced-learning-path{margin:36px 0;padding:26px;border:1px solid #d8e6ee;border-radius:20px;background:linear-gradient(135deg,#f0fbfd,#f5f2ff)}.advanced-learning-path h2{margin:0 0 20px!important;font-size:22px!important}.advanced-learning-path ol{display:grid;grid-template-columns:repeat(4,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(3){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(--forms-ink);font-size:15px}.advanced-learning-path em{color:var(--forms-green);font-size:12px;font-style:normal;font-weight:800}
.form-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}.form-diagram figcaption{display:grid;gap:5px;margin-bottom:22px}.form-diagram figcaption strong{color:var(--forms-ink);font-size:18px}.form-diagram figcaption span{color:var(--forms-muted);font-size:14px;line-height:1.55}.form-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(--forms-ink);text-align:center}.form-diagram>div>i{flex:0 0 auto;color:var(--forms-violet);font-size:24px;font-style:normal}.form-diagram>div>b,.form-diagram>div>strong,.form-diagram>div>span{min-width:0;padding:13px 16px;border:1px solid #cfe2e9;border-radius:12px;background:#f8fbfc}.form-diagram section{display:flex;gap:9px;align-items:stretch}.form-diagram section>span,.form-diagram section>b,.form-diagram section>strong{display:grid;place-content:center;min-width:0;padding:12px 14px;border:1px solid #cfe2e9;border-radius:11px;background:#f7fbfc}.form-diagram .good{border-color:#a7ddc8!important;background:#effaf5!important;color:#08734a!important}.form-diagram .bad{border-color:#efbac4!important;background:#fff1f3!important;color:#a5233a!important}.form-diagram .secure{border:1px solid #a7ddc8;border-radius:14px;background:#effaf5}
.validation-flow>div[role=img],.fresh-flow>div[role=img],.accessible-flow>div[role=img]{align-items:stretch}.validation-flow section,.auth-flow section,.contact-flow section,.accessible-flow section{display:grid;gap:8px;padding:17px;border:1px solid #d5e3ea;border-radius:14px}.pending-flow>div[role=img],.auth-flow>div[role=img],.state-flow>div[role=img]{flex-wrap:wrap}.pending-flow section,.state-flow section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.contact-flow section{min-width:min(100%,360px)}
.nextjs-forms-page .table-scroll{margin:24px 0 36px;overflow-x:auto;border:1px solid #d9e6ec;border-radius:16px;background:#fff}.nextjs-forms-page .table-scroll table{width:100%;min-width:680px;margin:0;border-collapse:collapse}.nextjs-forms-page .table-scroll th,.nextjs-forms-page .table-scroll td{padding:15px 17px;border-bottom:1px solid #e2ebef;text-align:left;vertical-align:top}.nextjs-forms-page .table-scroll th{background:#eef7fa;color:var(--forms-ink);font-size:14px}.nextjs-forms-page .table-scroll tr:last-child td{border-bottom:0}
.crud-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0 30px}.crud-grid section{padding:22px;border:1px solid #d9e6ec;border-radius:15px;background:#f8fbfc}.crud-grid h3{margin:0 0 9px;font-size:19px}.crud-grid p{margin:0}.best-practice-list{display:grid;gap:9px;margin:22px 0 36px;padding-left:24px}.best-practice-list li{padding:10px 14px;border-left:3px solid var(--forms-cyan);border-radius:0 10px 10px 0;background:#f4f9fb}
.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-forms-page .tutorial-nav>span{display:flex;flex:1;flex-direction:column;gap:5px;padding:20px;border:1px dashed #cddce4;border-radius:16px;color:var(--forms-muted)}.nextjs-forms-page .tutorial-nav>span small{font-size:12px;text-transform:uppercase}.nextjs-forms-page .tutorial-nav>span strong{color:var(--forms-ink)}
[data-theme=dark] .nextjs-forms-page .blog-hero,.active-dark-mode.nextjs-forms-page .blog-hero{background:radial-gradient(circle at 15% 18%,rgba(22,199,229,.16),transparent 38%),radial-gradient(circle at 85% 26%,rgba(128,98,255,.19),transparent 36%),linear-gradient(180deg,#06111f 0%,#091522 100%)}
[data-theme=dark] .forms-hero__visual img,[data-theme=dark] .nextjs-forms-page .article-art img,.active-dark-mode .forms-hero__visual img,.active-dark-mode.nextjs-forms-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] .form-diagram,[data-theme=dark] .official-sources,.active-dark-mode .advanced-learning-path,.active-dark-mode .form-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] .form-diagram>div[role=img],[data-theme=dark] .crud-grid section,[data-theme=dark] .official-sources a,[data-theme=dark] .nextjs-forms-page .table-scroll,.active-dark-mode .advanced-learning-path li,.active-dark-mode .form-diagram>div[role=img],.active-dark-mode .crud-grid section,.active-dark-mode .official-sources a,.active-dark-mode.nextjs-forms-page .table-scroll{border-color:#294256;background:#0c1a27}
[data-theme=dark] .advanced-learning-path strong,[data-theme=dark] .form-diagram figcaption strong,[data-theme=dark] .form-diagram>div[role=img],[data-theme=dark] .nextjs-forms-page .article-art figcaption strong,[data-theme=dark] .nextjs-forms-page .tutorial-nav>span strong,.active-dark-mode .advanced-learning-path strong,.active-dark-mode .form-diagram figcaption strong,.active-dark-mode .form-diagram>div[role=img],.active-dark-mode.nextjs-forms-page .article-art figcaption strong,.active-dark-mode.nextjs-forms-page .tutorial-nav>span strong{color:#edf7ff}
[data-theme=dark] .form-diagram>div>b,[data-theme=dark] .form-diagram>div>strong,[data-theme=dark] .form-diagram>div>span,[data-theme=dark] .form-diagram section,[data-theme=dark] .form-diagram section>span,[data-theme=dark] .form-diagram section>b,[data-theme=dark] .form-diagram section>strong,.active-dark-mode .form-diagram>div>b,.active-dark-mode .form-diagram>div>strong,.active-dark-mode .form-diagram>div>span,.active-dark-mode .form-diagram section,.active-dark-mode .form-diagram section>span,.active-dark-mode .form-diagram section>b,.active-dark-mode .form-diagram section>strong{border-color:#2b465b;background:#102232}
[data-theme=dark] .nextjs-forms-page .table-scroll th,.active-dark-mode.nextjs-forms-page .table-scroll th{background:#122536;color:#edf7ff}[data-theme=dark] .nextjs-forms-page .table-scroll td,[data-theme=dark] .nextjs-forms-page .table-scroll th,.active-dark-mode.nextjs-forms-page .table-scroll td,.active-dark-mode.nextjs-forms-page .table-scroll th{border-color:#294256}.active-dark-mode .best-practice-list li,[data-theme=dark] .best-practice-list li{background:#102230}
@media(max-width:1050px){.advanced-learning-path ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.form-diagram>div[role=img]{flex-wrap:wrap}.secure-flow>div[role=img],.fresh-flow>div[role=img],.accessible-flow>div[role=img]{display:grid;grid-template-columns:1fr}.form-diagram>div>i{transform:rotate(90deg)}.crud-grid{grid-template-columns:1fr}.validation-flow section{flex:1}}
@media(max-width:560px){.forms-hero__visual{margin-top:26px}.forms-hero__visual img,.nextjs-forms-page .article-art img{border-radius:14px}.form-diagram{margin:28px 0;padding:14px;border-radius:15px}.form-diagram>div[role=img]{padding:15px}.form-diagram section,.pending-flow section,.state-flow section{display:grid;grid-template-columns:1fr;width:100%}.advanced-learning-path{padding:18px}.advanced-learning-path ol{grid-template-columns:1fr}.official-sources ul{display:grid}.official-sources a{justify-content:center}.nextjs-forms-page .tutorial-nav{display:grid}.nextjs-forms-page .table-scroll{margin-inline:-4px}.nextjs-forms-page .table-scroll table{min-width:600px}}