.nextjs-database-page{--db-cyan:#19c7df;--db-violet:#8062ff;--db-green:#19a873;--db-red:#d74d64;--db-amber:#d79222;--db-ink:#102033;--db-muted:#607286}
.nextjs-database-page .blog-hero{background:radial-gradient(circle at 14% 18%,rgba(25,199,223,.14),transparent 38%),radial-gradient(circle at 86% 25%,rgba(128,98,255,.16),transparent 36%),linear-gradient(180deg,#f7fbff 0%,#fff 100%)}
.database-hero__visual{margin:40px 0 0}.database-hero__visual img,.nextjs-database-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-database-page .article-art{margin:38px 0}.nextjs-database-page .article-art figcaption{display:grid;gap:5px;margin-top:14px;color:var(--db-muted);font-size:14px;line-height:1.6}.nextjs-database-page .article-art figcaption strong{color:var(--db-ink);font-size:16px}
.nextjs-database-page .advanced-learning-path ol{grid-template-columns:repeat(5,minmax(0,1fr))}.nextjs-database-page .advanced-learning-path li:nth-child(3){border-color:#dce8ee;box-shadow:none}.nextjs-database-page .advanced-learning-path li:nth-child(4){border-color:#8b74ff;box-shadow:0 10px 24px rgba(124,92,255,.12)}
.db-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}.db-diagram figcaption{display:grid;gap:5px;margin-bottom:22px}.db-diagram figcaption strong{color:var(--db-ink);font-size:18px}.db-diagram figcaption span{color:var(--db-muted);font-size:14px;line-height:1.55}.db-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(--db-ink);text-align:center}.db-diagram i{flex:0 0 auto;color:var(--db-violet);font-size:24px;font-style:normal}.db-diagram b,.db-diagram strong,.db-diagram span,.db-diagram em{min-width:0}.db-diagram>div>b,.db-diagram>div>strong,.db-diagram>div>span{padding:13px 16px;border:1px solid #cfe2e9;border-radius:12px;background:#f8fbfc}.db-diagram section{display:grid;gap:8px;padding:16px;border:1px solid #cfe2e9;border-radius:14px;background:#f7fbfc}.db-diagram section>span,.db-diagram section>b,.db-diagram section>strong{padding:9px 12px;border:1px solid #d5e5eb;border-radius:9px;background:#fff}.db-diagram .good{border-color:#a7ddc8!important;background:#effaf5!important;color:#08734a!important}.db-diagram .bad{border-color:#efbac4!important;background:#fff1f3!important;color:#a5233a!important}.db-diagram .warning{border-color:#ecd29e!important;background:#fff9ec!important;color:#8a5810!important}
.architecture-flow section,.production-flow section{grid-template-columns:repeat(3,minmax(0,1fr))}.layer-flow section{grid-template-columns:repeat(3,minmax(0,1fr))}.cache-flow section{grid-template-columns:repeat(2,minmax(0,1fr));width:min(720px,100%)}.cache-flow>div[role=img],.transaction-flow>div[role=img]{flex-direction:column}.transaction-flow section{width:min(640px,100%)}.pool-flow section{grid-template-columns:repeat(3,minmax(0,1fr))}.crud-flow section{grid-template-columns:repeat(3,minmax(0,1fr))}.db-diagram .stack{display:grid;gap:8px}.db-diagram .stack span{padding:9px 12px;border:1px solid #d5e5eb;border-radius:9px;background:#fff}.rollback{font-weight:800;color:var(--db-red)}
.database-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0 34px}.database-grid section{padding:22px;border:1px solid #d9e6ec;border-radius:15px;background:#f8fbfc}.database-grid h3{margin:0 0 9px;font-size:19px}.database-grid p{margin:0}.nextjs-database-page .table-scroll{margin:24px 0 36px;overflow-x:auto;border:1px solid #d9e6ec;border-radius:16px;background:#fff}.nextjs-database-page .table-scroll table{width:100%;min-width:700px;margin:0;border-collapse:collapse}.nextjs-database-page .table-scroll th,.nextjs-database-page .table-scroll td{padding:15px 17px;border-bottom:1px solid #e2ebef;text-align:left;vertical-align:top}.nextjs-database-page .table-scroll th{background:#eef7fa;color:var(--db-ink);font-size:14px}.nextjs-database-page .table-scroll tr:last-child td{border-bottom:0}
.nextjs-database-page .tutorial-nav>span{display:flex;flex:1;flex-direction:column;gap:5px;padding:20px;border:1px dashed #cddce4;border-radius:16px;color:var(--db-muted)}.nextjs-database-page .tutorial-nav>span small{font-size:12px;text-transform:uppercase}.nextjs-database-page .tutorial-nav>span strong{color:var(--db-ink)}
[data-theme=dark] .nextjs-database-page .blog-hero,.active-dark-mode.nextjs-database-page .blog-hero{background:radial-gradient(circle at 14% 18%,rgba(25,199,223,.16),transparent 38%),radial-gradient(circle at 86% 25%,rgba(128,98,255,.19),transparent 36%),linear-gradient(180deg,#06111f 0%,#091522 100%)}
[data-theme=dark] .database-hero__visual img,[data-theme=dark] .nextjs-database-page .article-art img,.active-dark-mode .database-hero__visual img,.active-dark-mode.nextjs-database-page .article-art img{border-color:#24394b;box-shadow:0 28px 70px rgba(0,0,0,.32)}
[data-theme=dark] .db-diagram,.active-dark-mode .db-diagram{border-color:#284054;background:linear-gradient(145deg,#0b1926,#11172b)}
[data-theme=dark] .db-diagram>div[role=img],[data-theme=dark] .db-diagram section,[data-theme=dark] .database-grid section,[data-theme=dark] .nextjs-database-page .table-scroll,.active-dark-mode .db-diagram>div[role=img],.active-dark-mode .db-diagram section,.active-dark-mode .database-grid section,.active-dark-mode.nextjs-database-page .table-scroll{border-color:#294256;background:#0c1a27}
[data-theme=dark] .db-diagram figcaption strong,[data-theme=dark] .db-diagram>div[role=img],[data-theme=dark] .nextjs-database-page .article-art figcaption strong,[data-theme=dark] .nextjs-database-page .tutorial-nav>span strong,.active-dark-mode .db-diagram figcaption strong,.active-dark-mode .db-diagram>div[role=img],.active-dark-mode.nextjs-database-page .article-art figcaption strong,.active-dark-mode.nextjs-database-page .tutorial-nav>span strong{color:#edf7ff}
[data-theme=dark] .db-diagram>div>b,[data-theme=dark] .db-diagram>div>strong,[data-theme=dark] .db-diagram>div>span,[data-theme=dark] .db-diagram section>span,[data-theme=dark] .db-diagram section>b,[data-theme=dark] .db-diagram section>strong,[data-theme=dark] .db-diagram .stack span,.active-dark-mode .db-diagram>div>b,.active-dark-mode .db-diagram>div>strong,.active-dark-mode .db-diagram>div>span,.active-dark-mode .db-diagram section>span,.active-dark-mode .db-diagram section>b,.active-dark-mode .db-diagram section>strong,.active-dark-mode .db-diagram .stack span{border-color:#2b465b;background:#102232}
[data-theme=dark] .nextjs-database-page .table-scroll th,.active-dark-mode.nextjs-database-page .table-scroll th{background:#122536;color:#edf7ff}[data-theme=dark] .nextjs-database-page .table-scroll td,[data-theme=dark] .nextjs-database-page .table-scroll th,.active-dark-mode.nextjs-database-page .table-scroll td,.active-dark-mode.nextjs-database-page .table-scroll th{border-color:#294256}
@media(max-width:1100px){.nextjs-database-page .advanced-learning-path ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.db-diagram>div[role=img]{flex-wrap:wrap}.db-diagram>div>i{transform:rotate(90deg)}.architecture-flow>div[role=img],.secret-flow>div[role=img],.migration-flow>div[role=img],.query-flow>div[role=img],.pool-flow>div[role=img],.crud-flow>div[role=img],.production-flow>div[role=img]{display:grid;grid-template-columns:1fr}.architecture-flow section,.production-flow section,.layer-flow section,.pool-flow section,.crud-flow section{grid-template-columns:1fr}.database-grid{grid-template-columns:1fr}}
@media(max-width:560px){.database-hero__visual{margin-top:26px}.database-hero__visual img,.nextjs-database-page .article-art img{border-radius:14px}.db-diagram{margin:28px 0;padding:14px;border-radius:15px}.db-diagram>div[role=img]{padding:15px}.cache-flow section{grid-template-columns:1fr}.nextjs-database-page .advanced-learning-path{padding:18px}.nextjs-database-page .advanced-learning-path ol{grid-template-columns:1fr}.nextjs-database-page .tutorial-nav{display:grid}.nextjs-database-page .table-scroll{margin-inline:-4px}.nextjs-database-page .table-scroll table{min-width:620px}}