@media (min-width: 1400px) {

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1300px; }
}
.sb-arch-diagram-container, .sb-arch-reference-ui, .production-checklist-ui, .testing-flow-ui, .spring-boot-final-cta, .framework-fit-ui { max-width: 100%; box-sizing: border-box; }
.title-wrap h1 { font-size: 50px; font-weight: 600; line-height: 140%; letter-spacing: -0.5px; color: #fff; position: relative; z-index: 99; margin: 0; }
/* .title-wrap h1 span {
    color: var(--primarycolor);
    font-family: var(--primaryfont);
} */
.dots { position: relative; }
.title-wrap .h4 .dots { left: 0; top: 6px; width: 8px; height: 8px; border-radius: 100%; background: var(--primarycolor); display: block; }
.title-wrap .h4 { font-size: 14px; color: #4C596D; font-weight: 500; line-height: 150%; position: relative; padding-bottom: 15px; display: flex; gap: 10px; margin: 0; }
.author-main { margin-top: 10px; }
audio { width: 500px; height: 60px; }
.blog-author-detail p a { color: #192A44; font-size: 20px; font-weight: 600; line-height: 40px; }
.blog-author-detail p a:hover { color: #ff6c1a; }
.author-detail { color: #192A44; font-size: 18px; font-weight: 400; line-height: 24px; }
.blogs-main-content-wrap { margin-top: 85px; }
.blog-post-content ul li, .blog-post-content ol li, .blog-post-content p { color: #192A44; font-size: 18px; font-weight: 400; line-height: 35px; padding-bottom: 14px; }
label { color: #192A44; font-size: 18px; font-weight: 400; padding-bottom: 14px; }
li b, p b { font-weight: 600; }
@media (max-width:1199px) {

    .title-wrap h1 { font-size: 34px; line-height: 132%; }
    audio { width: 400px; height: 50px; }
    .blogs-main-content-wrap { margin-top: 60px; }
}
@media (max-width:991px) {

    audio { width: 300px; height: 50px; }
    .blogs-main-content-wrap { margin-top: 50px; }
}
.blog-post-content .h2, .blog-post-content h2 { color: #192A44; font-size: 26px; font-weight: 700; line-height: 36px; padding-bottom: 20px; }
.blog-post-content h3, .blog-post-content .h3 { color: #192A44; font-size: 22px; font-weight: 700; line-height: normal; padding: 10px 0 10px 0px; }
.blog-post-content h4, .blog-post-content .h4 { color: #192A44; font-size: 20px; font-weight: 600; line-height: normal; padding: 10px 0px; }
@media (max-width: 767px) {
    .blog-post-content .h2, .blog-post-content h2 { font-size: 22px; }
    .blog-post-content h3, .blog-post-content .h3 { font-size: 18px; }
}
@media (max-width: 480px) {
    .blog-post-content .h2, .blog-post-content h2 { font-size: 20px; }
}
.sub-titles { color: #192A44; font-size: 18px; font-weight: 600; line-height: normal; margin-bottom: 10px; }
/* Table of contents start */
.table-of-content-section { position: sticky; top: 100px; }
.blog-toc { border: 3px solid #FF6C1A66; border-radius: 15px; padding-top: 10px; }
.recent-blogs-head .h2 { color: #192A44; font-size: 20px; font-weight: 700; line-height: 150%; padding-left: 20px; }
.sidebar-blogs-single .h4 { margin-bottom: 0; }
.smart-header .h4 { display: block; color: #192A44; font-size: 16px; font-weight: 400; line-height: 25px; padding: 10px 25px; border-radius: 4px; width: 100%; margin-bottom: 0; }
.sidebar-blogs-single .h4 a { display: block; color: #192A44; font-size: 16px; font-weight: 400; line-height: 25px; padding: 10px 25px; border-radius: 4px; width: 100%; }
.smart-image { padding: 10px 10px 0 10px; }
.smart-image img { border-radius: 15px; }
.smart-blog-first { cursor: pointer; }
.popular-item:hover .popular-number { color: #FF8A3D !important; transition: 0.3s ease-in-out; }
.popular-item:hover .h4 { color: #FF8A3D; transition: 0.3s ease-in-out; }
.toc-scroll .menu-link.active { background: rgba(255, 108, 26, 0.15); color: #FF6C1A; font-weight: 600; }
.toc-scroll { display: flex; flex-direction: column; gap: 3px; }
.table-responsive.ai-table td, .table-responsive.ai-table th { padding: 14px; text-align: start; border: 1px solid #E5E7EB; }
.ai-table .table th { font-size: 16px; font-weight: 600; background: rgba(255, 108, 26, 0.10); color: #FF6C1A; }
.ai-table .table td ul li, .ai-table .table td { font-size: 18px; font-weight: 400; }
.ai-table .table td.spark { min-width: 250px; }
.ai-table .table { font-size: 20px; border-collapse: separate; border-spacing: 0; border-radius: 20px 20px 0px 0px; overflow: hidden; border: 1px solid #E5E7EB; min-width: 800px !important; }
@media (max-width:1199px) {

    .ai-table .table td ul li, .ai-table .table td { font-size: 16px; }
    .smart-header .h4 { padding: 10px 15px; }
}
@media (max-width:991px) {

    .blog-post-content .h2, .blog-post-content h2 { font-size: 24px; line-height: 32px; }
    .ai-table .table td.spark { min-width: auto; }
    .title-wrap h1 { font-size: 30px; }
    .ai-table { margin-bottom: 20px; }
    .ai-table .table td ul li, .ai-table .table td { font-size: 16px; font-weight: 400; }
    .smart-image { padding: 0; }
    .recent-blogs-head .h2 { padding: 0px 0px 10px 0px }
}
@media (max-width: 700px) {

    .title-wrap h1 { font-size: 28px; }
    .blog-author-detail img { width: 33px !important; height: 33px !important; }
    .blog-author-detail p a { font-size: 18px; line-height: 130%; }
    .author-detail { font-size: 16px; }
    .blogs-main-content-wrap { margin-top: 35px; }
    .blog-post-content .h2, .blog-post-content h2 { font-size: 22px; line-height: 28px; }
    .blog-post-content ul li, .blog-post-content ol li, .blog-post-content p { font-size: 17px; line-height: 150%; }
    label { font-size: 17px; }
    .blog-post-content h4, .blog-post-content .h4 { font-size: 18px; }
    .blog-post-content .h2 { text-align: center !important; }
    .blog-post-content h3, .blog-post-content .h3 { font-size: 18px; padding: 25px 0 5px 0px; }
}
@media (max-width: 575px) {

    .title-wrap h1 { font-size: 26px; }
    .author-detail { font-size: 14px; }
    audio { height: 40px; }
}
@media (max-width: 480px) {

    .title-wrap h1 { font-size: 24px; }
    .blog-post-content .h2, .blog-post-content h2 { font-size: 20px; line-height: 26px; padding-bottom: 15px; }
    .blog-post-content ul li, .blog-post-content ol li, .blog-post-content p { font-size: 16px; }
    label { font-size: 16px; }
    .sub-titles { font-size: 16px; }
    .blog-post-content h4, .blog-post-content .h4 { font-size: 17px; }
}
/* Blog Scroll Section style start here */
.blog-section .blog-card { padding-bottom: 0 }
.blog-section .blog-card figure { margin-bottom: 0 }
.blog-section .desc { padding: 15px; background: #f7f7f7; border: 1px solid #ededed }
.blog-section .bolg-category-title .h4, .blog-section .bolg-category-title h4 { font-size: 14px; line-height: 21px; font-weight: 600; color: #192a44; padding-right: 10px; margin: 0; }
.blog-section .blog-card .bolg-category-title img { visibility: hidden; }
.blog-section .blog-card:hover .bolg-category-title img { transition: 1s ease-in-out; visibility: visible; }
.blog-section .blog-card h3, .blog-section .blog-card .h3 { color: var(--secondrycolor); font-size: 20px; font-weight: 600; line-height: 150%; transition: .3s ease-in-out; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 60px; margin: 0 !important; padding: 0; }
.blog-section .blog-card:hover h3 { color: var(--primarycolor) }
@media screen and (max-width:1199px) {

    .blog-section .blog-card h3, .blog-section .blog-card .h3 { font-size: 18px; min-height: 54px; }
}
@media screen and (max-width:767px) {

    .blog-section { padding-left: 12px !important; padding-right: 12px !important; }
    .blog-section .blog-card h3, .blog-section .blog-card .h3 { font-size: 17px; min-height: 50px; }
}
@media screen and (max-width:480px) {

    .blog-section .desc { padding: 10px; }
    .blog-section .bolg-category-title .h4, .blog-section .bolg-category-title h4 { font-size: 13px; }
    .blog-section .blog-card h3, .blog-section .blog-card .h3 { font-size: 15px; min-height: 45px; }
}
/* Blog Scroll Section style ends here */
.pros-cons { background-color: #f3f6f9; }
.list-img.tick li:before { background: url(../images/tick.svg) no-repeat left top; }
.list-img.exclamation li:before { background: url(../images/exclamation-red.svg) no-repeat left top; }
/* FAQ Start */
.faq .accordion-item { border: 0; border-bottom: 1px solid #E5E7EB; &:last-child { border-bottom: 0; } }
.faq .accordion-button { font-size: 20px; color: #4C596D; padding: 30px 0; gap: 5px; }
.faq .accordion-button:not(.collapsed) { font-weight: 600; color: #111928; background-color: transparent; box-shadow: 0 0 0 0; }
.faq .accordion-button::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.0007 0.0820312C8.10555 0.0820312 0.0839844 8.1036 0.0839844 17.9987C0.0839844 27.8939 8.10555 35.9154 18.0007 35.9154C27.8958 35.9154 35.9173 27.8939 35.9173 17.9987C35.9173 8.1036 27.8958 0.0820312 18.0007 0.0820312ZM19.6673 11.332C19.6673 10.4116 18.9212 9.66536 18.0007 9.66536C17.0802 9.66536 16.334 10.4116 16.334 11.332V16.332H11.334C10.4135 16.332 9.66732 17.0782 9.66732 17.9987C9.66732 18.9192 10.4135 19.6654 11.334 19.6654H16.334V24.6654C16.334 25.5859 17.0802 26.332 18.0007 26.332C18.9212 26.332 19.6673 25.5859 19.6673 24.6654V19.6654H24.6673C25.5878 19.6654 26.334 18.9192 26.334 17.9987C26.334 17.0782 25.5878 16.332 24.6673 16.332H19.6673V11.332Z" fill="%23FF6C1A" fill-opacity="0.2"/></svg>'); width: 40px; height: 40px; background-size: 40px; }
.faq .accordion-button:not(.collapsed)::after { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.0007 2.08203C10.1056 2.08203 2.08398 10.1036 2.08398 19.9987C2.08398 29.8939 10.1056 37.9154 20.0007 37.9154C29.8958 37.9154 37.9173 29.8939 37.9173 19.9987C37.9173 10.1036 29.8958 2.08203 20.0007 2.08203ZM13.334 18.332C12.4135 18.332 11.6673 19.0782 11.6673 19.9987C11.6673 20.9192 12.4135 21.6654 13.334 21.6654H26.6673C27.5878 21.6654 28.334 20.9192 28.334 19.9987C28.334 19.0782 27.5878 18.332 26.6673 18.332H13.334Z" fill="%23FF6C1A"/></svg>'); }
.faq .accordion-button:focus { box-shadow: 0 0 0 0; }
.faq .accordion-body { padding: 0 0 30px; }
.faq .accordion-body p { color: #192A44; font-size: 18px; font-weight: 400; line-height: 162%; }
.faq .accordion-body p strong { color: #192A44; font-weight: 600; }
/* FAQ End */
@media (max-width: 767px) {

    .faq .accordion-button { font-size: 18px; padding: 20px 0; }
    .faq .accordion-body p { font-size: 17px; }
}
@media (max-width: 576px) {

    .faq .accordion-button { font-size: 16px; padding: 20px 0; }
    .faq .accordion-body p { font-size: 15px; }
    .faq .accordion-button::after { width: 30px; height: 30px; background-size: 30px; }
}
/* Footer Start */
.lines-white hr { background: #D1D5DB; }
.social-icons ul li a { transition: 0.3s ease-in-out; &:hover svg path { fill: #ff6c1a; } }
.footer-heading ul li a:hover { font-weight: 400 !important; }
@media screen and (max-width: 991px) {

    .footer-heading p { padding-bottom: 25px !important; }
    .lines-white hr { margin: 0 0 25px; }
}
/* Footer End */
/* Table of Contents style start here */
body button.btn.btn-toc { background: #ff6c1a !important; color: #fff !important; border-radius: 0; position: relative; }
body button.btn.btn-toc.dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; }
.toc-main { position: relative; margin-top: 30px; margin-bottom: -60px; z-index: 1; }
.btn-toc { background: #ff6c1a !important; color: #fff !important; border-radius: 0; }
.btn-toc .btn.show { color: #fff !important; }
.btn-toc.dropdown-menu.show { position: relative !important; transform: translate(0, 0) !important; transition: all 2s ease-in-out; }
.btn-toc.toc-tab-menu.dropdown-menu.show { position: relative !important; top: 0 !important; left: 0 !important; transform: none !important; max-height: 300px !important; overflow-y: auto !important; }
.btn-toc.toc-tab-menu.dropdown-menu.show::-webkit-scrollbar { width: 5px !important; }
.btn-toc.toc-tab-menu.dropdown-menu.show::-webkit-scrollbar-thumb { background-color: #ff6c1a !important; border-radius: 20px !important; }
.btn-toc.dropdown-menu { width: 100%; background: #f3f6f9 !important; border-radius: 6px; padding: 25px }
.btn-toc.dropdown-menu li { list-style: disc; list-style-position: inside; color: #000 }
.btn-toc.dropdown-menu li a { font-size: 16px; color: #4c596d !important }
.btn-toc.dropdown-menu li a:hover { color: #ff6c1a !important }
@media (max-width:991px) {

    .toc-main { margin-bottom: -40px; }
    .table-of-content-section { top: 20px; }
}
@media (max-width:767px) {

    .toc-main { margin-bottom: -20px; }
    .btn-toc.dropdown-menu li a { font-size: 14px; }
    .btn-toc.dropdown-menu { padding: 15px; }
}
@media (max-width:576px) {

    .btn-toc.dropdown-menu { padding: 10px; }
}
.ai-table::-webkit-scrollbar { background-color: #e5e7eb; width: 5px; height: 5px; /* width of the entire scrollbar */ }
.ai-table::-webkit-scrollbar-thumb { background-color: #ff6c1a; border-radius: 6px; width: 5px; height: 5px; }
/* Interactive Spring Boot framework finder */
.framework-fit-ui { background: #ffffff; border: 1px solid #dce5f0; border-radius: 18px; box-shadow: 0 18px 36px rgba(25, 42, 68, 0.09); overflow: hidden; }
.framework-fit-head { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px; background: linear-gradient(135deg, #10153f 0%, #192A44 62%, #27425f 100%); }
.framework-fit-title { color: #ffffff; font-size: 22px; font-weight: 800; line-height: 1.32; padding-top: 8px; }
.framework-fit-controls { display: flex; flex-wrap: wrap; gap: 10px; overflow: visible; }
.fit-priority-btn { border: 1px solid #d8e2ee; border-radius: 999px; background: #ffffff; color: #192A44; cursor: pointer; flex: 0 1 auto; font-size: 14px; font-weight: 800; line-height: 1; padding: 12px 16px; transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease; }
.fit-priority-btn:hover, .fit-priority-btn.is-active { background: #ff6c1a; border-color: #ff6c1a; color: #ffffff; transform: translateY(-1px); }
.framework-compare-panel { display: grid; grid-template-columns: minmax(150px, 0.85fr) minmax(260px, 1.3fr) minmax(150px, 0.85fr); gap: 16px; align-items: stretch; padding: 18px; background: #f5f8fc; border-bottom: 1px solid #e4ebf4; }
.framework-picker { display: flex; flex-direction: column; justify-content: center; }
.framework-picker-label { color: #4C596D; display: block; font-size: 12px; font-weight: 900; line-height: 1.2; padding-bottom: 8px; text-transform: uppercase; }
.framework-choice-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.framework-choice-btn { width: 100%; border: 1px solid #d8e2ee; border-radius: 12px; background: #ffffff; color: #192A44; cursor: pointer; font-size: 14px; font-weight: 900; line-height: 1.2; min-height: 42px; padding: 10px 12px; text-align: left; transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease; }
.framework-choice-btn:hover, .framework-choice-btn.is-active { background: rgba(255, 108, 26, 0.10); border-color: #ff6c1a; color: #10153f; transform: translateY(-1px); }
.framework-vs-card { border: 1px solid #dfe8f3; border-radius: 14px; background: #ffffff; padding: 16px; text-align: center; }
.framework-vs-card > span { color: #ff6c1a; display: block; font-size: 13px; font-weight: 900; line-height: 1.2; padding-bottom: 12px; text-transform: uppercase; }
.framework-vs-card div { display: grid; grid-template-columns: 1fr 38px 1fr; align-items: center; gap: 10px; }
.framework-vs-card p { border: 1px solid #e1e9f3; border-radius: 12px; background: #f8fbff; margin: 0 !important; min-width: 0; padding: 14px !important; }
.framework-vs-card p b { color: #75839a; display: block; font-size: 12px; font-weight: 900; line-height: 1.2; padding-bottom: 6px; }
.framework-vs-card p strong { color: #10153f; display: block; font-size: 18px; font-weight: 900; line-height: 1.25; word-break: break-word; }
.framework-vs-card i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #ff6c1a; color: #ffffff; font-size: 12px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.framework-current-feature { padding: 18px; background: #fbfcff; }
.framework-feature-title { color: #10153f; font-size: 17px; font-weight: 900; line-height: 1.25; padding-bottom: 12px; }
.framework-value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.framework-value-grid div { border: 1px solid #e1e9f3; border-radius: 12px; background: #f8fbff; min-width: 0; padding: 12px; transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease; }
.framework-value-grid div.is-highlighted { background: rgba(255, 108, 26, 0.10); border-color: #ff8a3d; transform: translateY(-1px); }
.framework-value-grid span { color: #75839a; display: block; font-size: 12px; font-weight: 800; line-height: 1.2; padding-bottom: 5px; }
.framework-value-grid b { color: #192A44; display: block; font-size: 15px; line-height: 1.35; word-break: break-word; }
@media (max-width: 991px) {
    .framework-fit-head { grid-template-columns: 1fr; }
    .framework-fit-controls { width: 100%; }
    .framework-compare-panel { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .framework-fit-head { padding: 18px; }
    .framework-fit-title { font-size: 18px; }
    .fit-priority-btn { font-size: 13px; padding: 10px 13px; }
    .framework-compare-panel { padding: 14px; }
    .framework-vs-card div { grid-template-columns: 1fr; }
    .framework-vs-card i { margin: 0 auto; }
    .framework-current-feature { padding: 14px; }
    .framework-value-grid { grid-template-columns: 1fr; }
}
.spring-boot-feature-list { list-style: none !important; padding-left: 0 !important; margin: 22px 0 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.spring-boot-feature-list li { list-style: none !important; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; color: #192A44; font-size: 15px !important; line-height: 1.55 !important; }
.spring-feature-icon { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #fff0e6; color: #FF6C1A; font-size: 21px; border: 1px solid #ffedd5; }
.spring-boot-feature-list li b { display: block; color: #10153f; font-size: 16px; line-height: 1.25; font-weight: 800; margin-bottom: 5px; }
.spring-boot-feature-list li a { font-weight: 700; }
@media (max-width: 767px) {

    .spring-boot-feature-list { grid-template-columns: 1fr; gap: 10px; margin-top: 16px !important; }
    .spring-boot-feature-list li { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 12px; font-size: 13px !important; line-height: 1.45 !important; }
    .spring-feature-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
    .spring-boot-feature-list li b { font-size: 14px; margin-bottom: 3px; }
}
/* Keep TOC labels in logical LTR order even inside RTL scroll containers */
.blog-toc .menu-link { direction: ltr; unicode-bidi: isolate; text-align: left; display: block; }
.toc-scroll .toc-subitems .menu-link.active { background: transparent; }
.toc-subitems li { list-style: none; position: relative; padding-left: 30px; }
.toc-scroll .toc-subitems li .menu-link.active::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 100%; background: #ff6c1a; left: 15px; top: 12px; transform: translate(-50%, -50%); }

/* ==========================================================================
   Spring Boot Project Architecture Visual Diagram Component
   ========================================================================== */
.sb-arch-diagram-container { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 20px !important; padding: 32px 24px !important; margin: 28px 0 !important; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06), inset 0 1px 0 #ffffff !important; color: #1e293b !important; font-family: "Fira Code", "JetBrains Mono", "Consolas", monospace, sans-serif !important; position: relative !important; }
.sb-arch-stepper-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #e2e8f0; }
.sb-arch-step-tab { padding: 8px 16px; font-size: 13px; font-weight: 700; color: #475569; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; outline: none; }
.sb-arch-step-tab:hover { border-color: #FF6C1A; color: #FF6C1A; background: #fff5ed; }
.sb-arch-step-tab.is-active { background: #FF6C1A; color: #ffffff; border-color: #FF6C1A; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.25); }
.sb-arch-step-group { display: none; }
.sb-arch-step-group.is-active { display: block; animation: sbArchFadeIn 0.3s ease; }
.sb-arch-diagram-container.is-view-all .sb-arch-step-group { display: block !important; margin-bottom: 24px; }
.sb-arch-diagram-container.is-view-all .sb-arch-step-footer { display: none !important; }
.sb-arch-step-footer { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px dashed #cbd5e1; }
.sb-arch-next-btn { padding: 10px 22px; font-size: 14px; font-weight: 700; color: #ffffff; background: #FF6C1A; border: none; border-radius: 24px; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 12px rgba(255, 108, 26, 0.2); }
.sb-arch-next-btn:hover { background: #e55b0f; transform: translateY(-1px); }
.sb-arch-prev-btn { padding: 10px 22px; font-size: 14px; font-weight: 600; color: #475569; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 24px; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 6px; }
.sb-arch-prev-btn:hover { border-color: #94a3b8; color: #0f172a; background: #f1f5f9; }
@keyframes sbArchFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Client Top Box */
.sb-arch-client-wrapper { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin-bottom: 8px !important; }

.sb-arch-client-box-row { display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; width: 100% !important; }

.sb-arch-client-box { background: #eff6ff !important; border: 1.5px solid #3b82f6 !important; border-radius: 12px !important; padding: 12px 48px !important; color: #1d4ed8 !important; font-weight: 700 !important; font-size: 17px !important; box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12) !important; transition: all 0.25s ease !important; }
.sb-arch-client-box:hover { box-shadow: 0 6px 20px rgba(59, 130, 246, 0.22) !important; transform: translateY(-2px) !important; background: #dbeafe !important; }

.sb-arch-client-meta { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; color: #64748b !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.5px !important; }

/* Down Arrow Connector */
.sb-arch-arrow-down { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 12px 0 !important; }
.sb-arch-arrow-label { font-size: 11px !important; font-weight: 700 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 4px !important; }
.sb-arch-arrow-line { width: 2px !important; height: 18px !important; background: #3b82f6 !important; position: relative !important; }
.sb-arch-arrow-head { width: 0 !important; height: 0 !important; border-left: 5px solid transparent !important; border-right: 5px solid transparent !important; border-top: 6px solid #3b82f6 !important; }

.sb-arch-arrow-line.amber { background: #d97706 !important; }
.sb-arch-arrow-head.amber { border-top-color: #d97706 !important; }

.sb-arch-arrow-line.emerald { background: #059669 !important; }
.sb-arch-arrow-head.emerald { border-top-color: #059669 !important; }

.sb-arch-arrow-line.pink { background: #db2777 !important; }
.sb-arch-arrow-head.pink { border-top-color: #db2777 !important; }

.sb-arch-arrow-line.slate { background: #64748b !important; }
.sb-arch-arrow-head.slate { border-top-color: #64748b !important; }

/* Section Box Base */
.sb-arch-layer-box { border-radius: 16px !important; padding: 20px 22px !important; margin-bottom: 4px !important; position: relative !important; transition: all 0.25s ease !important; }
.sb-arch-layer-box:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important; }

.sb-arch-layer-title { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; margin-bottom: 16px !important; }

/* Layer Grids */
.sb-arch-grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }

/* Inner Card Base */
.sb-arch-card { border-radius: 12px !important; padding: 16px 14px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; transition: all 0.25s ease !important; }
.sb-arch-card:hover { transform: translateY(-3px) !important; }

.sb-arch-card-title { font-size: 15px !important; font-weight: 700 !important; margin-bottom: 8px !important; line-height: 1.3 !important; }

.sb-arch-card-text { font-size: 12.5px !important; line-height: 1.5 !important; }

.sb-arch-code-line { font-size: 12px !important; font-weight: 600 !important; margin-top: 2px !important; }

/* Color Variant: PRESENTATION LAYER (Blue) */
.sb-arch-layer-box.presentation { background: #ffffff !important; border: 1.5px solid #93c5fd !important; }
.sb-arch-layer-box.presentation .sb-arch-layer-title { color: #1d4ed8 !important; }
.sb-arch-card.presentation-card { background: #f0f9ff !important; border: 1px solid #bae6fd !important; }
.sb-arch-card.presentation-card:hover { border-color: #3b82f6 !important; background: #e0f2fe !important; }
.sb-arch-card.presentation-card .sb-arch-card-title { color: #0369a1 !important; }
.sb-arch-card.presentation-card .sb-arch-card-text { color: #0284c7 !important; }
.sb-arch-card.presentation-card .sb-arch-code-line { color: #0284c7 !important; }

/* Color Variant: SECURITY FILTER CHAIN (Amber) */
.sb-arch-security-banner { background: #fffbe6 !important; border: 1.5px solid #f59e0b !important; border-radius: 12px !important; padding: 16px 20px !important; text-align: center !important; transition: all 0.25s ease !important; }
.sb-arch-security-banner:hover { background: #fef3c7 !important; border-color: #d97706 !important; transform: translateY(-2px) !important; }
.sb-arch-security-title { color: #b45309 !important; font-size: 16px !important; font-weight: 800 !important; margin-bottom: 6px !important; }
.sb-arch-security-items { color: #d97706 !important; font-size: 13px !important; font-weight: 700 !important; }

/* Color Variant: SERVICE LAYER (Green / Emerald) */
.sb-arch-layer-box.service { background: #ffffff !important; border: 1.5px solid #6ee7b7 !important; }
.sb-arch-layer-box.service .sb-arch-layer-title { color: #047857 !important; }
.sb-arch-card.service-card { background: #ecfdf5 !important; border: 1px solid #a7f3d0 !important; }
.sb-arch-card.service-card:hover { border-color: #10b981 !important; background: #d1fae5 !important; }
.sb-arch-card.service-card .sb-arch-card-title { color: #047857 !important; }
.sb-arch-card.service-card .sb-arch-card-text { color: #1e293b !important; }
.sb-arch-card.service-card .sb-arch-code-line { color: #059669 !important; }

/* Color Variant: REPOSITORY / DATA ACCESS LAYER (Pink / Magenta) */
.sb-arch-layer-box.repository { background: #ffffff !important; border: 1.5px solid #fbcfe8 !important; }
.sb-arch-layer-box.repository .sb-arch-layer-title { color: #be185d !important; }
.sb-arch-card.repository-card { background: #fdf2f8 !important; border: 1px solid #fbcfe8 !important; }
.sb-arch-card.repository-card:hover { border-color: #ec4899 !important; background: #fce7f3 !important; }
.sb-arch-card.repository-card .sb-arch-card-title { color: #be185d !important; }
.sb-arch-card.repository-card .sb-arch-card-text { color: #1e293b !important; }
.sb-arch-card.repository-card .sb-arch-code-line { color: #db2777 !important; }

/* Color Variant: DATABASE / INFRASTRUCTURE (Slate) */
.sb-arch-layer-box.database { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; }
.sb-arch-layer-box.database .sb-arch-layer-title { color: #334155 !important; }
.sb-arch-card.database-card { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; }
.sb-arch-card.database-card:hover { border-color: #94a3b8 !important; background: #f1f5f9 !important; }
.sb-arch-card.database-card .sb-arch-card-title { color: #1e293b !important; }
.sb-arch-card.database-card .sb-arch-card-text { color: #475569 !important; }

/* Cross-Cutting Concerns */
.sb-arch-cross-cutting-wrap { margin-top: 24px !important; text-align: center !important; }
.sb-arch-cross-cutting-title { font-size: 11px !important; font-weight: 800 !important; color: #64748b !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin-bottom: 14px !important; }
.sb-arch-grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
.sb-arch-pill-card { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; padding: 12px 14px !important; color: #1e293b !important; font-weight: 700 !important; font-size: 14px !important; text-align: center !important; transition: all 0.25s ease !important; }
.sb-arch-pill-card:hover { border-color: #3b82f6 !important; color: #1d4ed8 !important; background: #eff6ff !important; transform: translateY(-2px) !important; }

/* Mobile Responsiveness */
@media (max-width: 767px) {

    .sb-arch-diagram-container { padding: 20px 14px !important; }
    .sb-arch-stepper-nav { gap: 6px; margin-bottom: 16px; padding-bottom: 12px; }
    .sb-arch-step-tab { padding: 6px 12px; font-size: 11.5px; }
    .sb-arch-step-footer { flex-direction: column; gap: 8px; margin-top: 16px; }
    .sb-arch-next-btn, .sb-arch-prev-btn { width: 100%; justify-content: center; padding: 8px 16px; font-size: 13px; }
    .sb-arch-grid-3 { grid-template-columns: 1fr !important; gap: 10px !important; }
    .sb-arch-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .sb-arch-client-meta { position: static !important; transform: none !important; margin-top: 8px !important; text-align: center !important; }
    .sb-arch-client-box-row { flex-direction: column !important; }
    .sb-arch-security-items { font-size: 11.5px !important; word-break: break-word !important; }
}
.toc-subitems { flex-direction: column; gap: 10px; margin: 10px 0; }
.custom-scroll { /* max-height: calc(100vh - 150px); */ max-height: 300px; overflow-y: auto; padding-right: 6px; direction: rtl; text-align: end; &::-webkit-scrollbar { width: 5px; } &::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 20px; } }
.custom-scrolls { max-height: 600px; overflow-y: auto; padding-right: 6px; direction: rtl; text-align: end; position: sticky; top: 100px; &::-webkit-scrollbar { width: 5px; } &::-webkit-scrollbar-thumb { background-color: #ff6c1a; border-radius: 20px; } }
.popular-number { margin: auto; color: #FF6C1A66; font-size: 32px; font-weight: 700; line-height: 1; min-width: 46px; display: flex; justify-content: center; align-items: center; }
.popular-section { border: 3px solid #FF6C1A66; padding: 10px; border-radius: 15px; }
.horizontal-line { margin: 30px 0px; height: 0px; border-top: 0 solid #e6e8ea; position: relative; height: 2px; opacity: 1; background: #e6e8ea; }
.horizontal-lines { margin: 30px 0px 20px 0px; height: 0px; border-top: 0 solid #e6e8ea; position: relative; height: 2px; opacity: 1; background: #e6e8ea; }
.horizontal-lines:before, .horizontal-lines:after, .horizontal-line:before, .horizontal-line:after { width: 35px; height: 2px; background: #ff6c1a; content: ""; position: absolute; left: 0; top: 0; }
.horizontal-lines:after, .horizontal-line:after { width: 6px; background: #fff; left: 35px; }
.responsive-height { height: auto; /* mobile (default) */ }
@media (min-width: 768px) {

    .responsive-height { height: 100%; /* tablet + desktops */ }
}
.toc-subitems { display: none; }
/* End */
/* how-to-build-deploy-spring-boot-application blog Start */
.content-main { border-radius: 15px; background: #2b2f35; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.content-main:hover { transform: translateY(-3px); }
.content-copy { padding: 10px 15px; border-radius: 15px 15px 0 0; border-bottom: 1px solid #ffddb9; }
.content-body { padding: 15px 15px; }
.content-body p { color: #ffddb9; }
.copy-wrapper { position: relative; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 8px; color: #fff; background: #ff6c1a; padding: 3px 10px; cursor: pointer; &:hover { background-color: #e65a00; } }
.content-body pre { &::-webkit-scrollbar { height: 4px; } &::-webkit-scrollbar-thumb { background-color: #ff6c1a; border-radius: 20px; } }
.content-body pre code { color: #ffddb9; }
.copy-main { position: absolute; right: 10px; top: 10px; }
.copy-tooltip { position: absolute; top: -30px; right: 0; background-color: #fff; color: #000; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity 0.3s ease, transform 0.3s ease; z-index: 10; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.copy-tooltip.show { opacity: 1; transform: translateY(0); }
@media (max-width:991px) {

    .copy-main { position: relative; right: 10px; top: 10px; display: flex; justify-content: end; margin-bottom: 5px; }
}
.banner-new { background-color: #4c596d; align-items: center; justify-content: center; }
/* .banner-image {
    width: calc(100% - 250px);
} */
.blog-banner-header { background-color: #192A44; height: 430px; padding: 20px; }
.blog-banner { height: 100%; }
@media(max-width:1199px) {

    .blog-banner-header { height: auto; }
    .blog-banner { height: auto; }
}
@media(max-width: 991px) {

    .popular-number { text-align: end; margin: 0; }
}
@media(max-width:576px) {

    .blog-header h1 { text-align: center !important; margin: auto !important; }
    .blog-banner-header { display: flex; align-items: center; height: 200px; }
    .blog-banner { display: block; align-items: center !important; margin: auto; }
    .banner-image { display: none; }
}
@media (max-width:991px) {

    .popular-content hr { border-top: 0 solid #e6e8ea; position: relative; height: 2px; opacity: 1; background: #e6e8ea; margin: 70px 0px 10px 0px; }
    .popular-content hr:before, .popular-content hr:after { width: 35px; height: 2px; background: #ff6c1a; content: ""; position: absolute; left: 0; top: 0; }
    .popular-content hr:after { width: 6px; background: #fff; left: 35px; }
}
@media (max-width: 480px) {

    .popular-content hr { margin: 40px 0px 60px 0px; }
}
/* preferred notes Start */
.preferred-box { padding: 20px 24px!important; margin: 15px 0px!important; background-color: transparent; border-left: 4px solid transparent; transition: background-color 0.4s ease, border-left 0.4s ease, transform 0.3s ease; }
.preferred-box { border-left: 4px solid #FF6C1A; background-color: #f3f7ff; transform: translateY(-2px); }
.preferred-box:hover { transform: translateY(-4px); }
.preferred-box strong { color: #000000 !important; font-weight: 600 !important; }
/* preferred notes End */
.blog-post-content p strong { color: #000000 !important; font-weight: 600 !important; }
.blog-post-content ul.deployment-pros-cons-list { list-style: none !important; padding-left: 14px !important; margin-left: 0 !important; }
.blog-post-content ul.deployment-pros-cons-list li { list-style: none !important; display: flex; align-items: baseline; gap: 8px; color: #192A44; font-size: 17px; line-height: 1.6; padding-bottom: 8px; }
.blog-post-content ul.deployment-pros-cons-list li::marker { content: "" !important; }
.blog-post-content ul.deployment-pros-cons-list li span { flex: 0 0 auto; width: 14px; color: #6f7478; font-size: 18px; line-height: 1; font-weight: 800; text-align: center; }
.blog-post-content ul.deployment-checklist { list-style: none !important; padding-left: 14px !important; margin-left: 0 !important; }
.blog-post-content ul.deployment-checklist li { list-style: none !important; color: #192A44; font-size: 17px; line-height: 1.6; padding-bottom: 8px; }
.blog-post-content ul.deployment-checklist li::marker { content: "" !important; }
.blog-post-content .ai-table td strong { color: #000000 !important; font-weight: 600 !important; }
.production-checklist-ui { position: relative; overflow: hidden; margin: 28px 0 12px; padding: 28px 34px 34px; border-radius: 20px; background: #ffffff; border: 1px solid #e2e8f0; }
.production-checklist-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.production-checklist-orb-blue { width: 150px; height: 150px; right: -52px; top: -42px; background: rgba(113, 137, 255, 0.08); }
.production-checklist-orb-orange { width: 160px; height: 160px; left: -82px; bottom: -60px; background: rgba(255, 108, 26, 0.08); }
.production-checklist-header { position: relative; z-index: 1; min-height: 82px; display: flex; align-items: center; gap: 22px; padding: 12px 30px 12px 112px; margin: 0 16px 28px 0; border-radius: 14px; background: #FF6C1A; }
.production-checklist-title { color: #ffffff !important; font-size: 24px !important; line-height: 1.15 !important; font-weight: 800 !important; padding: 0 !important; margin: 0 !important; }
.production-checklist-header-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 84px; height: 84px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #ff8533; }
.production-checklist-header-icon svg { width: 58px; height: 58px; }
.production-checklist-ui > p { position: relative; z-index: 1; color: #192A44 !important; font-size: 20px !important; line-height: 1.55 !important; font-weight: 500 !important; margin: 0 0 20px 36px !important; padding-bottom: 0 !important; }
.production-progress-area { margin-bottom: 24px; position: relative; z-index: 1; }
.production-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 700; color: #192A44; font-size: 16px; }
.production-progress-percent { font-weight: 800; color: #FF6C1A; font-size: 18px; }
.production-progress-track { height: 14px; background: #e2e8f0; border-radius: 30px; overflow: hidden; }
.production-progress-fill { height: 100%; width: 0%; background: #22c55e; border-radius: 30px; transition: width 0.5s ease; }
.production-status-badge { margin-top: 14px; font-size: 16px; font-weight: 800; color: #f57c00; transition: color 0.3s ease; }
.production-success-banner { margin-top: 24px; padding: 18px 22px; background: #f0fdf4; border-left: 4px solid #16a34a; border-radius: 10px; font-size: 17px; font-weight: 700; color: #15803d; animation: productionFade 0.5s ease-in-out; }
@keyframes productionFade { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
.production-checklist-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 26px; align-items: center; }
.blog-post-content .production-checklist-list { display: grid; gap: 12px; padding: 0 !important; margin: 0 !important; }
.blog-post-content .production-checklist-list li { padding: 0 !important; line-height: 1 !important; }
.production-checklist-item { width: 100%; min-height: 54px; border: 1px solid #e2e8f0; border-radius: 10px; background: #ffffff; display: grid; grid-template-columns: 36px 2px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 16px; color: #0f172a; font-family: var(--primaryfont); font-size: 17px; line-height: 1.2; font-weight: 700; text-align: left; transition: border-color 0.2s ease, background 0.2s ease; cursor: pointer; }
.production-checklist-item:hover { border-color: #FF6C1A; background: #fffaf5; }
.production-check-icon { width: 30px; height: 30px; border-radius: 6px; background: #22c55e; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; font-weight: 900; }
.production-check-divider { width: 2px; height: 26px; border-radius: 999px; background: #ffaa75; }
.production-check-text { min-width: 0; }
.production-check-status { justify-self: end; min-width: 90px; border-radius: 999px; padding: 6px 12px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; font-size: 13px; line-height: 1; font-weight: 700; text-align: center; }
.production-checklist-item:not(.is-done) .production-check-icon { background: #f1f5f9; color: #94a3b8; }
.production-checklist-item:not(.is-done) .production-check-status { background: #fff7ed; border-color: #ffedd5; color: #FF6C1A; }
.production-checklist-visual { position: relative; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.production-shield { position: relative; width: 120px; z-index: 2; margin-bottom: -18px; animation: productionFloat 3.2s ease-in-out infinite; }
.production-shield svg { display: block; width: 100%; height: auto; }
.production-server-stack { position: relative; z-index: 1; width: 150px; display: grid; gap: 8px; }
.production-server-stack span { height: 48px; border-radius: 10px; background: #7000ff; position: relative; display: block; box-shadow: 0 4px 14px rgba(112, 0, 255, 0.2); }
.production-server-stack span::before { content: ""; position: absolute; left: 14px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: #ff7b1a; }
.production-checklist-cta { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 24px; }
.production-checklist-cta a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 28px; border-radius: 999px; background: #FF6C1A; color: #ffffff !important; font-size: 15px; line-height: 1.2; font-weight: 700; text-decoration: none; transition: background 0.2s ease; }
.production-checklist-cta a:hover { background: #e0590c; }
@keyframes productionFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 991px) {

    .production-checklist-ui { padding: 24px 18px 28px; }
    .production-checklist-header { padding-left: 94px; margin-right: 0; }
    .production-checklist-title { font-size: 22px !important; }
    .production-checklist-header-icon { width: 72px; height: 72px; }
    .production-checklist-layout { grid-template-columns: 1fr; }
    .production-checklist-visual { display: none; }
    .production-checklist-ui > p { margin-left: 0 !important; }
}
@media (max-width: 575px) {

    .production-checklist-header { min-height: 72px; padding: 12px 16px 12px 76px; border-radius: 14px; }
    .production-checklist-title { font-size: 18px !important; }
    .production-checklist-header-icon { width: 58px; height: 58px; left: 10px; border-radius: 14px; }
    .production-checklist-header-icon svg { width: 42px; height: 42px; }
    .production-checklist-ui > p { font-size: 16px !important; }
    .production-checklist-item { grid-template-columns: 34px 2px minmax(0, 1fr) auto; gap: 9px; font-size: 14px; padding: 10px 10px; }
    .production-check-status { grid-column: auto; justify-self: end; margin-top: 0; min-width: 70px; font-size: 11px; padding: 6px 9px; }
    .production-checklist-cta { margin-top: 18px; }
    .production-checklist-cta a { width: 100%; min-height: 42px; font-size: 14px; padding: 10px 18px; }
}
.monitor-dashboard-ui { margin: 22px 0 28px; padding: 20px; border-radius: 14px; background: #090f1d; border: 1px solid #1b263b; color: #ffffff; }
.monitor-dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.monitor-dashboard-head h3 { margin: 0 !important; color: #ffffff !important; font-size: 24px !important; line-height: 1.15 !important; font-weight: 800 !important; }
.monitor-dashboard-head h3 span { color: #ff8a18; }
.monitor-live-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px; background: rgba(32, 223, 135, 0.10); border: 1px solid rgba(32, 223, 135, 0.25); color: #20df87; font-size: 14px; line-height: 1; font-weight: 700; }
.monitor-live-pill span { width: 8px; height: 8px; border-radius: 50%; background: #20df87; }
.monitor-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.monitor-stat-card { min-height: 128px; border: 1px solid #1c2b46; border-radius: 10px; background: #0e192e; color: #ffffff; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto 1fr auto; gap: 2px 10px; padding: 14px 12px; text-align: left; transition: border-color 0.2s ease, background 0.2s ease; cursor: pointer; }
.monitor-stat-card:hover, .monitor-stat-card.is-active { border-color: #ff8a18; background: #12203b; }
.monitor-stat-icon { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #ffffff; }
.monitor-stat-card.cpu .monitor-stat-icon { background: #ff8a18; }
.monitor-stat-card.memory .monitor-stat-icon { background: #3b82f6; }
.monitor-stat-card.requests .monitor-stat-icon { background: #10b981; }
.monitor-stat-card.errors .monitor-stat-icon { background: #ef4444; }
.monitor-stat-name { color: #e2e8f0; font-size: 15px; line-height: 1.2; font-weight: 700; }
.monitor-stat-card strong { font-size: 24px; line-height: 1.05; font-weight: 800; }
.monitor-stat-card.cpu strong { color: #ff8a18; }
.monitor-stat-card.memory strong { color: #3b82f6; }
.monitor-stat-card.requests strong { color: #10b981; }
.monitor-stat-card.errors strong { color: #ef4444; }
.monitor-sparkline { grid-column: 1 / -1; width: 100%; height: 34px; margin: 4px 0; overflow: visible; }
.monitor-sparkline polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; animation: monitorDraw 2.6s ease-in-out infinite alternate; }
.cpu .monitor-sparkline polyline { stroke: #ff8a18; }
.memory .monitor-sparkline polyline { stroke: #3b82f6; }
.requests .monitor-sparkline polyline { stroke: #10b981; }
.errors .monitor-sparkline polyline { stroke: #ef4444; }
.monitor-stat-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; color: #94a3b8; font-size: 12px; line-height: 1.2; }
.monitor-stat-foot b { color: #ffffff; font-weight: 700; }
.monitor-chart-panel { border: 1px solid #1c2b46; border-radius: 10px; background: #0e192e; padding: 14px 14px 10px; margin-bottom: 14px; }
.monitor-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
.monitor-chart-head h4 { color: #ffffff !important; font-size: 17px !important; line-height: 1.2 !important; margin: 0 !important; font-weight: 700 !important; }
.monitor-range-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.monitor-range-tabs button { border: 1px solid #1c2b46; border-radius: 999px; background: #13223f; color: #94a3b8; padding: 6px 12px; font-size: 12px; font-weight: 700; transition: all 0.2s ease; }
.monitor-range-tabs button:hover, .monitor-range-tabs button.is-active { color: #ffffff; border-color: #ff8a18; background: #ff8a18; }
.monitor-legend { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; color: #94a3b8; font-size: 13px; margin-bottom: 8px; }
.monitor-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 999px; margin-right: 7px; vertical-align: middle; }
.monitor-legend .cpu::before { background: #ff8a18; }
.monitor-legend .memory::before { background: #3b82f6; }
.monitor-legend .requests::before { background: #10b981; }
.monitor-legend .errors::before { background: #ef4444; }
.monitor-main-chart { width: 100%; height: 170px; display: block; overflow: visible; }
.monitor-grid path { stroke: #1e2d4a; stroke-width: 1; }
.monitor-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; animation: monitorChartDraw 3.4s ease-in-out infinite alternate; }
.monitor-line.cpu { stroke: #ff8a18; }
.monitor-line.memory { stroke: #3b82f6; }
.monitor-line.requests { stroke: #10b981; }
.monitor-line.errors { stroke: #ef4444; }
.monitor-now-line { stroke: #3b82f6; stroke-width: 2; stroke-dasharray: 6 6; animation: monitorNow 1.5s linear infinite; }
.monitor-info-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; border: 1px solid #1c2b46; border-radius: 10px; background: #1c2b46; overflow: hidden; }
.monitor-info-strip span { padding: 12px 12px; display: grid; gap: 4px; background: #0e192e; }
.monitor-info-strip b { color: #94a3b8; font-size: 11px; font-weight: 600; }
.monitor-info-strip strong { color: #10b981; font-size: 15px; line-height: 1.2; font-weight: 700; }
.monitor-info-strip span:nth-child(3) strong { color: #3b82f6; }
.monitor-info-strip span:nth-child(4) strong { color: #f59e0b; }
@keyframes monitorPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes monitorDraw { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
@keyframes monitorChartDraw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@keyframes monitorNow { to { stroke-dashoffset: -14; } }
@media (max-width: 1199px) {

    .monitor-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .monitor-info-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {

    .monitor-dashboard-ui { padding: 20px 14px; border-radius: 16px; }
    .monitor-dashboard-head { align-items: flex-start; flex-direction: column; }
    .monitor-dashboard-head h3 { font-size: 24px !important; }
    .monitor-stat-grid { grid-template-columns: 1fr; }
    .monitor-chart-head { align-items: flex-start; flex-direction: column; }
    .monitor-main-chart { height: 180px; }
    .monitor-info-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {

    .monitor-dashboard-ui { margin: 18px 0 24px !important; padding: 14px 10px !important; border-radius: 14px !important; }
    .monitor-dashboard-head { gap: 10px !important; margin-bottom: 12px !important; }
    .monitor-dashboard-head h3 { font-size: 22px !important; line-height: 1.15 !important;padding-top:0px; }
    .monitor-live-pill { padding: 6px 10px !important; gap: 6px !important; font-size: 12px !important; }
    .monitor-live-pill span { width: 8px !important; height: 8px !important; }
    .monitor-stat-grid { grid-template-columns: 1fr !important; gap: 8px !important; margin-bottom: 10px !important; }
    .monitor-stat-card { min-height: 104px !important; grid-template-columns: 42px 1fr !important; gap: 1px 8px !important; padding: 12px 12px !important; border-radius: 11px !important; }
    .monitor-stat-card:hover, .monitor-stat-card.is-active { transform: translateY(-2px) !important; }
    .monitor-stat-icon { width: 34px !important; height: 34px !important; border-radius: 8px !important; font-size: 17px !important; }
    .monitor-stat-name { font-size: 13px !important; }
    .monitor-stat-card strong { font-size: 21px !important; }
    .monitor-sparkline { height: 24px !important; margin: 2px 0 !important; }
    .monitor-sparkline polyline { stroke-width: 3 !important; }
    .monitor-stat-foot { font-size: 11px !important; gap: 8px !important; }
    .monitor-chart-panel { padding: 12px 10px 8px !important; border-radius: 11px !important; margin-bottom: 10px !important; }
    .monitor-chart-head { gap: 10px !important; margin-bottom: 10px !important; }
    .monitor-chart-head h4 { font-size: 15px !important; }
    .monitor-range-tabs { gap: 6px !important; }
    .monitor-range-tabs button { padding: 6px 9px !important; font-size: 11px !important; }
    .monitor-legend { gap: 10px !important; justify-content: flex-start !important; font-size: 10px !important; margin-bottom: 4px !important; }
    .monitor-legend span::before { width: 12px !important; height: 2px !important; margin-right: 5px !important; }
    .monitor-main-chart { height: 132px !important; }
    .monitor-line { stroke-width: 3 !important; }
    .monitor-info-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-radius: 11px !important; }
    .monitor-info-strip span { padding: 10px 10px !important; gap: 3px !important; }
    .monitor-info-strip b { font-size: 10px !important; }
    .monitor-info-strip strong { font-size: 13px !important; }
}
.testing-flow-visual { position: relative; overflow: hidden; margin: 18px 0 24px; padding: 20px 14px 24px; border-radius: 16px; background: #ffffff; border: 1px solid #e2e8f0; }
.testing-flow-orb { position: absolute; border-radius: 50%; background: rgba(96, 124, 255, 0.08); pointer-events: none; }
.testing-flow-orb-one { width: 88px; height: 88px; top: 38px; left: 8%; }
.testing-flow-orb-two { width: 46px; height: 46px; right: 10%; bottom: 74px; }
.testing-flow-title { position: relative; z-index: 2; margin: 0 0 18px !important; color: #0B1F3F !important; font-size: 24px !important; line-height: 1.1 !important; font-weight: 800 !important; text-align: center; letter-spacing: -0.2px; }
.testing-flow-stack { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.testing-flow-card { width: min(100%, 360px); min-height: 74px; border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 12px 24px; color: #0B1F3F; font-family: var(--primaryfont); font-size: 18px; line-height: 1.15; font-weight: 800; text-align: left; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; cursor: pointer; }
.testing-flow-card:hover, .testing-flow-card.is-active { color: #FF6C1A; border-color: #FF6C1A; background: #fffaf5; }
.testing-flow-icon { position: relative; flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.testing-flow-svg-icon { border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.testing-flow-svg-icon svg { width: 34px; height: 34px; display: block; }
.testing-flow-svg-orange { color: #FF6C1A; }
.testing-flow-svg-blue { color: #4F7CFF; }
.testing-flow-svg-mixed { color: #FF6C1A; }
.testing-flow-card:hover .testing-flow-svg-icon, .testing-flow-card.is-active .testing-flow-svg-icon { background: #fff0e6; border-color: #ffaa75; }
.testing-flow-down { position: relative; width: 3px; height: 34px; background: #6186ff; }
.testing-flow-down::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 12px; height: 12px; border-right: 3px solid #6186ff; border-bottom: 3px solid #6186ff; transform: translateX(-50%) rotate(45deg); }
.testing-flow-wire { position: absolute; z-index: 1; width: 78px; height: 144px; pointer-events: none; }
.testing-flow-wire svg { width: 100%; height: 100%; overflow: visible; }
.testing-flow-wire-left { left: calc(50% - 250px); top: 108px; }
.testing-flow-wire-right { right: calc(50% - 250px); top: 206px; }
.testing-flow-path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 10; animation: testingArrowDash 1.4s linear infinite; }
.testing-flow-path-orange { stroke: #FF6C1A; }
.testing-flow-path-blue { stroke: #6186ff; }
.testing-flow-dot { fill: currentColor; }
.testing-flow-dot-orange { color: #FF6C1A; }
.testing-flow-dot-blue { color: #6186ff; }
@keyframes testingArrowDash { to { stroke-dashoffset: -42; } }
@media (max-width: 991px) {

    .testing-flow-wire { display: none; }
    .testing-flow-card { width: min(100%, 360px); font-size: 18px; padding: 12px 22px; }
}
@media (max-width: 575px) {

    .testing-flow-visual { padding: 20px 10px 26px; }
    .testing-flow-title { font-size: 23px !important; margin-bottom: 16px !important; }
    .testing-flow-card { min-height: 70px; gap: 12px; padding: 12px 14px; font-size: 17px; }
    .testing-flow-icon { flex-basis: 42px; width: 42px; height: 42px; transform: none; }
    .testing-flow-down { height: 30px; }
}
/* End */
.trust-badges { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 16px; font-weight: 500; }
.trust-badges > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255, 108, 26, 0.15); border: 1px solid #f68e44; border-radius: 999px; box-shadow: 0 6px 14px rgba(17, 24, 39, 0.06); }
.trust-badges .trust-rating-icon { font-size: 1.05em; color: #FF6C1A; }
.trust-badges .rating-value { font-weight: 700; color: #111827; }
.trust-badges .rating-stars { display: inline-flex; align-items: center; gap: 2px; line-height: 1; }
.trust-badges .rating-stars i { font-size: 0.95em; color: #f59e0b; }
.rating-flex { flex-wrap: wrap; }
@media (max-width: 767px) {

    .trust-badges { gap: 8px; font-size: 14px; }
    .trust-badges > span { width: 100%; justify-content: flex-start; padding: 8px 12px; border-radius: 14px; line-height: 1.4; }
    .trust-badges > span b { white-space: nowrap; }
}
.trend-stats-wrap { background:rgba(255, 108, 26, 0.10); border:1px solid #E5E7EB; border-radius:16px; padding:18px; }
.trend-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.trend-stat-card { background:rgba(255, 108, 26, 0.10); border:1px solid #E5E7EB; border-radius:14px; padding:18px 16px; box-shadow:0 10px 24px #f3f6f9; height:100%; }
.trend-stat-value { color:#FF6C1A; font-weight:800; font-size:28px; line-height:1.15; letter-spacing:-0.02em; margin-bottom:10px; }
.trend-stat-title { color:#000; font-weight:600; font-size:13px; line-height:1.35; margin-bottom:10px; }
.trend-stat-source { color:#000; font-size:12px; line-height:1.3; }
@media (max-width: 1199px) {

    .trend-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575px) {

    .trend-stats-wrap { padding:14px;border-radius:14px; }
    .trend-stats-grid { grid-template-columns:1fr;gap:12px; }
    .trend-stat-value { font-size:26px; }
}

/* Spring Boot layered architecture visual */
/* Spring Boot layered architecture visual (Flat 2D Aesthetic) */
.sb-arch-reference-ui { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; padding: 28px 22px !important; box-shadow: none !important; font-family: var(--primaryfont), Montserrat, sans-serif !important; overflow: hidden; }
.sb-arch-reference-ui .sb-arch-client-box-row { min-height: 66px !important; }
.sb-arch-reference-ui .sb-arch-client-box { min-width: 240px !important; border: 1px solid #cbd5e1 !important; background: #ffffff !important; border-radius: 14px !important; padding: 12px 30px !important; color: #1e293b !important; font-size: 22px !important; font-weight: 800 !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; }
.sb-arch-reference-ui .sb-arch-client-image { width: 42px; height: 42px; object-fit: cover; object-position: 50% 56%; display: block; flex: 0 0 auto; }
.sb-arch-reference-ui .sb-arch-client-meta { right: 0 !important; color: #64748b !important; font-size: 13px !important; font-weight: 600 !important; }
.sb-arch-reference-ui .sb-arch-arrow-label { color: #64748b !important; font-size: 13px !important; letter-spacing: 0.6px !important; }
.sb-arch-reference-ui .sb-arch-arrow-line { width: 2px !important; height: 22px !important; background: #94a3b8 !important; }
.sb-arch-reference-ui .sb-arch-arrow-head { border-left-width: 6px !important; border-right-width: 6px !important; border-top-width: 7px !important; border-top-color: #94a3b8 !important; }
.sb-arch-reference-ui .sb-arch-layer-box { padding: 34px 22px 24px !important; margin: 0 0 8px !important; border-radius: 16px !important; box-shadow: none !important; }
.sb-arch-reference-ui .sb-arch-layer-title { position: absolute !important; top: -16px !important; left: 22px !important; min-width: 250px !important; margin: 0 !important; padding: 8px 22px !important; border-radius: 8px !important; color: #ffffff !important; font-size: 15px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: 0.5px !important; box-shadow: none !important; text-align: center !important; }
.sb-arch-reference-ui .sb-arch-layer-box .sb-arch-layer-title { color: #ffffff !important; }
.sb-arch-reference-ui .sb-arch-grid-3 { gap: 24px !important; }
.sb-arch-reference-ui .sb-arch-card { min-height: 150px !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: none !important; padding: 20px 16px !important; }
.sb-arch-reference-ui .sb-arch-card:hover, .sb-arch-reference-ui .sb-arch-pill-card:hover, .sb-arch-reference-ui .sb-arch-security-banner:hover { transform: none !important; box-shadow: none !important; }
.sb-arch-reference-ui .sb-arch-icon { width: 52px; height: 52px; margin: 0 auto 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #fff; font-size: 24px; clip-path: none; box-shadow: none; }
.sb-arch-reference-ui .sb-arch-image-icon { background: transparent !important; box-shadow: none !important; clip-path: none !important; overflow: visible; padding: 0; }
.sb-arch-reference-ui .sb-arch-image-icon img { width: 52px; height: 52px; object-fit: contain; display: block; }
.sb-arch-reference-ui .sb-arch-card-title { font-size: 18px !important; line-height: 1.3 !important; font-weight: 800 !important; margin-bottom: 8px !important; }
.sb-arch-reference-ui .sb-arch-card-text, .sb-arch-reference-ui .sb-arch-code-line { font-size: 13.5px !important; line-height: 1.5 !important; color: #334155 !important; font-weight: 500 !important; }
.sb-arch-reference-ui .presentation { border: 1px solid #ddd6fe !important; background: #f5f3ff !important; }
.sb-arch-reference-ui .presentation .sb-arch-layer-title { background: #7c3aed !important; }
.sb-arch-reference-ui .presentation .sb-arch-card-title { color: #6d28d9 !important; }
.sb-arch-reference-ui .presentation .sb-arch-card-text, .sb-arch-reference-ui .presentation .sb-arch-code-line { color: #5b21b6 !important; }
.sb-arch-reference-ui .presentation .sb-arch-card { background: #ffffff !important; border-color: #ddd6fe !important; }
.sb-arch-reference-ui .presentation .sb-arch-card:hover { border-color: #7c3aed !important; background: #faf5ff !important; }
.sb-arch-reference-ui .sb-arch-security-banner { max-width: 760px !important; margin: 0 auto 8px !important; display: grid !important; grid-template-columns: 60px 1fr !important; align-items: center !important; gap: 16px !important; border: 1px solid #fde68a !important; border-radius: 14px !important; padding: 16px 24px !important; background: #fffbe6 !important; box-shadow: none !important; }
.sb-arch-reference-ui .sb-arch-security-banner .sb-arch-icon { margin: 0; background: #d97706 !important; color: #fff; }
.sb-arch-reference-ui .sb-arch-security-title { color: #b45309 !important; font-size: 20px !important; font-weight: 800 !important; margin-bottom: 4px !important; }
.sb-arch-reference-ui .sb-arch-security-items { color: #d97706 !important; font-size: 13.5px !important; font-weight: 600 !important; }
.sb-arch-reference-ui .service { border: 1px solid #a7f3d0 !important; background: #ecfdf5 !important; }
.sb-arch-reference-ui .service .sb-arch-layer-title { background: #059669 !important; }
.sb-arch-reference-ui .service .sb-arch-card { background: #ffffff !important; border-color: #a7f3d0 !important; }
.sb-arch-reference-ui .service .sb-arch-card:hover { border-color: #059669 !important; background: #f0fdf4 !important; }
.sb-arch-reference-ui .service .sb-arch-card-title { color: #047857 !important; }
.sb-arch-reference-ui .service .sb-arch-card-text, .sb-arch-reference-ui .service .sb-arch-code-line { color: #065f46 !important; }
.sb-arch-reference-ui .repository { border: 1px solid #fbcfe8 !important; background: #fdf2f8 !important; }
.sb-arch-reference-ui .repository .sb-arch-layer-title { background: #db2777 !important; }
.sb-arch-reference-ui .repository .sb-arch-card { background: #ffffff !important; border-color: #fbcfe8 !important; }
.sb-arch-reference-ui .repository .sb-arch-card:hover { border-color: #db2777 !important; background: #fdf2f8 !important; }
.sb-arch-reference-ui .repository .sb-arch-card-title { color: #be185d !important; }
.sb-arch-reference-ui .repository .sb-arch-card-text, .sb-arch-reference-ui .repository .sb-arch-code-line { color: #9d174d !important; }
.sb-arch-reference-ui .database { border: 1px solid #bfdbfe !important; background: #eff6ff !important; }
.sb-arch-reference-ui .database .sb-arch-layer-title { background: #2563eb !important; }
.sb-arch-reference-ui .database .sb-arch-card { background: #ffffff !important; border-color: #bfdbfe !important; }
.sb-arch-reference-ui .database .sb-arch-card:hover { border-color: #2563eb !important; background: #eff6ff !important; }
.sb-arch-reference-ui .database .sb-arch-card-title { color: #1d4ed8 !important; }
.sb-arch-reference-ui .database .sb-arch-card-text, .sb-arch-reference-ui .database .sb-arch-code-line { color: #1e40af !important; }
.sb-arch-reference-ui .presentation .sb-arch-image-icon, .sb-arch-reference-ui .service .sb-arch-image-icon, .sb-arch-reference-ui .repository .sb-arch-image-icon, .sb-arch-reference-ui .database .sb-arch-image-icon, .sb-arch-reference-ui .sb-arch-security-banner .sb-arch-image-icon { background: transparent !important; box-shadow: none !important; }
.sb-arch-reference-ui .sb-arch-cross-cutting-wrap { margin-top: 22px !important; }
.sb-arch-reference-ui .sb-arch-cross-cutting-title { color: #475569 !important; font-size: 14px !important; letter-spacing: 0.4px !important; margin-bottom: 12px !important; font-weight: 800 !important; }
.sb-arch-reference-ui .sb-arch-pill-card { min-height: 52px; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; border: 1px solid #cbd5e1 !important; background: #ffffff !important; box-shadow: none !important; border-radius: 10px !important; color: #1e293b !important; }
.sb-arch-reference-ui .sb-arch-pill-card:hover { border-color: #FF6C1A !important; background: #fffaf5 !important; }
.sb-arch-reference-ui .sb-arch-pill-image { width: 28px; height: 28px; object-fit: contain; display: block; flex: 0 0 auto; }
@media (max-width: 991px) {

    .sb-arch-reference-ui .sb-arch-client-box { min-width: 240px !important; font-size: 24px !important; }
    .sb-arch-reference-ui .sb-arch-client-meta { position: static !important; transform: none !important; margin-top: 12px !important; }
    .sb-arch-reference-ui .sb-arch-grid-3 { grid-template-columns: 1fr !important; gap: 18px !important; }
    .sb-arch-reference-ui .sb-arch-layer-title { position: static !important; display: inline-block !important; min-width: 0 !important; margin-bottom: 18px !important; }
    .sb-arch-reference-ui .sb-arch-security-banner { grid-template-columns: 1fr !important; text-align: center !important; }
    .sb-arch-reference-ui .sb-arch-security-banner .sb-arch-icon { margin: 0 auto; }
    .sb-arch-reference-ui .sb-arch-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 575px) {

    .sb-arch-reference-ui { padding: 20px 12px !important; }
    .sb-arch-reference-ui .sb-arch-client-box { min-width: 0 !important; width: 100% !important; font-size: 22px !important; }
    .sb-arch-reference-ui .sb-arch-grid-4 { grid-template-columns: 1fr !important; }
}
@media (max-width: 767px) {

    .testing-flow-visual { margin: 16px 0 22px !important; padding: 16px 10px 20px !important; border-radius: 14px !important; }
    .testing-flow-orb-one { width: 58px !important; height: 58px !important; top: 36px !important; left: 4% !important; }
    .testing-flow-orb-two { width: 34px !important; height: 34px !important; right: 10% !important; bottom: 70px !important; }
    .testing-flow-title { font-size: 22px !important; margin-bottom: 14px !important; line-height: 1.1 !important; }
    .testing-flow-card { width: min(100%, 320px) !important; min-height: 62px !important; gap: 10px !important; padding: 10px 14px !important; border-radius: 12px !important; font-size: 15px !important; }
    .testing-flow-card:hover, .testing-flow-card.is-active { transform: none !important; }
    .testing-flow-icon { flex-basis: 36px !important; width: 36px !important; height: 36px !important; }
    .testing-flow-svg-icon { border-radius: 10px !important; }
    .testing-flow-svg-icon svg { width: 30px !important; height: 30px !important; }
    .testing-flow-down { width: 100% !important; height: 38px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; align-self: stretch !important; background: transparent !important; box-shadow: none !important; position: relative !important; z-index: 4 !important; }
    .testing-flow-down::before { content: "\2193" !important; position: static !important; width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; border-radius: 999px !important; background: #ffffff !important; color: #6186ff !important; border: 1px solid #e2e8f0 !important; font-size: 20px !important; line-height: 1 !important; font-weight: 800 !important; }
    .testing-flow-down::after { display: none !important; content: none !important; }
    .sb-arch-reference-ui { padding: 14px 10px 18px !important; border-radius: 14px !important; }
    .sb-arch-reference-ui .sb-arch-client-wrapper { margin-bottom: 2px !important; }
    .sb-arch-reference-ui .sb-arch-client-box-row { min-height: auto !important; }
    .sb-arch-reference-ui .sb-arch-client-box { min-height: 52px !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; margin: 0 auto !important; padding: 10px 22px !important; border-radius: 13px !important; font-size: 18px !important; gap: 8px !important; }
    .sb-arch-reference-ui .sb-arch-client-image { width: 30px !important; height: 30px !important; }
    .sb-arch-reference-ui .sb-arch-client-meta { margin-top: 8px !important; font-size: 11px !important; line-height: 1.3 !important; }
    .sb-arch-reference-ui .sb-arch-arrow-label { font-size: 11px !important; margin-bottom: 4px !important; }
    .sb-arch-reference-ui .sb-arch-arrow-line { height: 16px !important; width: 2px !important; }
    .sb-arch-reference-ui .sb-arch-arrow-head { border-left-width: 5px !important; border-right-width: 5px !important; border-top-width: 6px !important; }
    .sb-arch-reference-ui .sb-arch-layer-box { padding: 16px 10px 12px !important; margin-bottom: 8px !important; border-radius: 14px !important; }
    .sb-arch-reference-ui .sb-arch-layer-title, .sb-arch-reference-ui .repository .sb-arch-layer-title, .sb-arch-reference-ui .database .sb-arch-layer-title { min-width: 0 !important; height: auto !important; padding: 8px 14px !important; margin-bottom: 12px !important; border-radius: 7px !important; font-size: 13px !important; line-height: 1.1 !important; letter-spacing: 0.2px !important; box-shadow: none !important; }
    .sb-arch-reference-ui .sb-arch-grid-3 { gap: 12px !important; }
    .sb-arch-reference-ui .sb-arch-card, .sb-arch-reference-ui .presentation-card, .sb-arch-reference-ui .service-card { min-height: 126px !important; padding: 14px 12px !important; border-radius: 12px !important; }
    .sb-arch-reference-ui .repository-card, .sb-arch-reference-ui .database-card { min-height: 92px !important; padding: 14px 12px !important; grid-template-columns: 52px 1fr !important; column-gap: 10px !important; border-radius: 12px !important; text-align: left !important; justify-items: stretch !important; }
    .sb-arch-reference-ui .sb-arch-icon { width: 42px !important; height: 42px !important; margin-bottom: 8px !important; }
    .sb-arch-reference-ui .sb-arch-image-icon img { width: 44px !important; height: 44px !important; }
    .sb-arch-reference-ui .repository-card .sb-arch-image-icon img, .sb-arch-reference-ui .database-card .sb-arch-image-icon img { width: 42px !important; height: 42px !important; }
    .sb-arch-reference-ui .sb-arch-card-title { font-size: 15px !important; line-height: 1.25 !important; margin-bottom: 5px !important; }
    .sb-arch-reference-ui .sb-arch-card-text, .sb-arch-reference-ui .sb-arch-code-line { font-size: 12px !important; line-height: 1.45 !important; }
    .sb-arch-reference-ui .sb-arch-security-banner { min-height: auto !important; grid-template-columns: 44px 1fr !important; gap: 10px !important; padding: 12px 14px !important; border-radius: 12px !important; text-align: left !important; }
    .sb-arch-reference-ui .sb-arch-security-banner .sb-arch-icon { margin: 0 !important; }
    .sb-arch-reference-ui .sb-arch-security-title { font-size: 16px !important; line-height: 1.2 !important; margin-bottom: 4px !important; text-align: left !important; }
    .sb-arch-reference-ui .sb-arch-security-items { font-size: 11px !important; line-height: 1.35 !important; text-align: left !important; }
    .sb-arch-reference-ui .sb-arch-cross-cutting-wrap { margin-top: 12px !important; }
    .sb-arch-reference-ui .sb-arch-cross-cutting-title { font-size: 13px !important; margin-bottom: 8px !important; }
    .sb-arch-reference-ui .sb-arch-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    .sb-arch-reference-ui .sb-arch-pill-card { min-height: 46px !important; padding: 8px 10px !important; gap: 8px !important; border-radius: 10px !important; font-size: 13px !important; }
    .sb-arch-reference-ui .sb-arch-pill-image { width: 24px !important; height: 24px !important; }
}

.spring-boot-final-cta { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; margin: 34px 0 18px; padding: 30px 34px; overflow: hidden; border: 1px solid rgba(255, 108, 26, 0.22); border-radius: 18px; background: radial-gradient(circle at 94% 10%, rgba(255, 108, 26, 0.16) 0, rgba(255, 108, 26, 0) 30%), linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #fff4ec 100%); box-shadow: 0 18px 42px rgba(15, 28, 67, 0.10); }

.spring-boot-final-cta::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 6px; background: linear-gradient(180deg, #ff8a1d 0%, #ff4f00 100%); }

.spring-boot-final-cta h2 { margin: 0 0 12px; padding: 0 !important; color: #080d3f; font-size: 26px; font-weight: 800; line-height: 1.25; }

.spring-boot-final-cta p { max-width: 760px; margin: 0; color: #1d244c; font-size: 17px; line-height: 1.75; }

.spring-boot-final-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 24px; border-radius: 999px; background: linear-gradient(135deg, #ff7a1a 0%, #ff4f00 100%); box-shadow: 0 14px 28px rgba(255, 108, 26, 0.28); color: #ffffff !important; font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none !important; white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }

.spring-boot-final-cta-btn:hover { transform: translateY(-2px); background: linear-gradient(135deg, #ff8a1d 0%, #ff5c00 100%); box-shadow: 0 18px 34px rgba(255, 108, 26, 0.34); }

/* Restored legacy helper styles */
.common-media { padding: 60px 0 7px 0; }
.details-img-wrap img { margin: 0; }
.banner-right-content { padding: 24px 16px; background: rgba(255, 108, 26, 0.05); }
.banner-right-content .h3, .banner-right-content h3 { color: #192A44; font-size: 22px; font-weight: 600; line-height: 29px; padding-bottom: 24px; margin-bottom: 0; }
.banner-right-content p { color: #192A44; font-size: 14px; font-weight: 400; line-height: 22px; }
.sub-titles { color: #192A44; font-size: 18px; font-weight: 600; line-height: normal; margin-bottom: 10px; }
.ai-cta-request { border-radius: 24px; border: 1.5px solid #E5E7EB; background: rgba(255, 108, 26, 0.02); padding: 50px 60px; max-width: 830px; margin: 0 auto; }
.ai-cta-main { padding: 70px 0; }
.ai-cta { border: 1px solid #E5E7EB; border-radius: 15px; background: rgba(255, 108, 26, 0.02); min-height: 336px; margin: 0 auto; }
.ai-cta .title-wrap { padding: 0 0 0 45px; }
.ai-cta-imgs { border-radius: 0px 15px 15px 0px; }
.banner-cta-btns { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 20px; }
.banner-cta-btns a { display: block; padding: 8px 20px; border-radius: 8px; font-size: 16px; font-weight: 600; transition: all 0.5s; }
.banner-cta-btns a:first-child { border: 1px solid #ff6c1a; background: rgba(255, 108, 26, 0.10); color: #ff6c1a; }
.banner-cta-btns a:hover { color: #fff; background: #ff6c1a; }
.banner-list p { color: #192A44; font-size: 14px; font-weight: 600; }
.banner-list p span { color: #FF6C1A; }
.pros-cons { background-color: #f3f6f9; }
.list-img.tick li:before { background: url(../images/tick.svg) no-repeat left top; }
.list-img.exclamation li:before { background: url(../images/exclamation-red.svg) no-repeat left top; }
.author-detail-img { width: calc(100% - 70px); & img { width: 100%; } }
.banner-new { background-color: #4c596d; align-items: center; justify-content: center; }
.recommend { display: flex; border-radius: 24px; border: 1.5px solid #ff6c1a; background: rgba(255, 108, 26, 0.02); padding: 30px 40px; max-width: 830px; margin: 0 auto; flex-direction: row; background: linear-gradient(240deg, #ffe6cf, #fff2e8); }
.recommend h4 { padding: 10px 0 5px 0 !important; }
.recommend h5 { font-size: 14px !important; padding: 7px !important; border-radius: 24px; font-size: 12px; font-weight: 600; color: #ff7a00; background: linear-gradient(180deg, #ffe6cf); width: fit-content; }
.recommend p { font-size: 16px; padding: 0px; }
.protips { display: flex; border-radius: 24px; border: 1.5px solid #2563EB; background: rgba(255, 108, 26, 0.02); padding: 30px 40px; max-width: 830px; margin: 0 auto; flex-direction: row; background: linear-gradient(180deg, #DCE6F6 10%, #FFFFFF 100%); }
.protips span { color: #2563EB !important; }
.protips p { color: #2563EB !important; }
.protips ul li { color: #2563EB !important; }
.protips h4,.protips .h4 { color: #2563EB !important; }
.protips.orange { background: linear-gradient(180deg, #FFE6CF 10%, #FFFFFF 100%); border: 1.5px solid #FF6C1A; }
.protips.orange span { color: #FF6C1A !important; }
.protips.orange p { color: #FF6C1A !important; }
.protips.orange ul li { color: #FF6C1A !important; }
.protips.orange h4, .protips.orange .h4 { color: #FF6C1A !important; }
.quote-box { background: #f5f5f5; border-left: 4px solid #F97316; padding: 16px 18px; font-style: italic; font-family: "Georgia", "Times New Roman", serif; color: #1F2937; font-size: 20px; max-width: 880px; margin: 10px 0; }
.important-box { border-left: 4px solid #FF6C1A; padding: 5px 20px; margin: 10px 0; }
.quick-facts { display: flex; flex-direction: column; gap: 12px; }
.fact-item { display: flex; align-items: center; gap: 10px; }
.fact-item span { font-size: 18px; }
.blog-post-content ul.star-list { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.blog-post-content ul.star-list li { list-style: none !important; position: relative; padding-left: 22px; }
.blog-post-content ul.star-list li::before { content: "\2605"; position: absolute; left: 0; top: 10px; color: #000000; font-size: 14px; line-height: 1; }
.testing-flow-cube { width: 40px; height: 40px; border-radius: 10px; background: #FF6C1A; box-shadow: none; transform: none; }
.testing-flow-check { position: absolute; right: 5px; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; background: #FF6C1A; box-shadow: none; font-size: 17px; font-weight: 900; }
.testing-flow-icon-blue::before, .testing-flow-icon-blue::after { content: ""; position: absolute; width: 34px; height: 4px; background: #173366; border-radius: 999px; transform-origin: center; }
.testing-flow-icon-blue::before { transform: rotate(-24deg); top: 28px; left: 10px; }
.testing-flow-icon-blue::after { transform: rotate(65deg); top: 30px; right: 10px; }
.testing-flow-node { position: absolute; width: 25px; height: 25px; border-radius: 50%; background: #4F7CFF; box-shadow: none; }
.testing-flow-node.node-one { left: 4px; top: 30px; }
.testing-flow-node.node-two { left: 25px; top: 15px; }
.testing-flow-node.node-three { right: 6px; bottom: 8px; }
.testing-flow-icon-api { flex-direction: column; gap: 3px; color: #ffffff; }
.testing-flow-icon-api::before { content: ""; width: 44px; height: 14px; border-radius: 5px; background: #FF6C1A; box-shadow: none; }
.testing-flow-icon-api span { width: 48px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: #0B1F3F; color: #ffffff; font-size: 15px; font-weight: 800; box-shadow: none; }
.testing-flow-icon-api::after { content: ""; width: 58px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, #4f7cff, #ff6c1a, #4f7cff); }
.content-copy { padding: 10px 15px; border-radius: 15px 15px 0 0; border-bottom: 1px solid #ffddb9; }
.trust-badges { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 16px; font-weight: 500; }
.trust-badges > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255, 108, 26, 0.15); border: 1px solid #f68e44; border-radius: 999px; box-shadow: 0 6px 14px rgba(17, 24, 39, 0.06); }
.trust-badges .trust-rating-icon { font-size: 1.05em; color: #FF6C1A; }
.trust-badges .rating-value { font-weight: 700; color: #111827; }
.trust-badges .rating-stars { display: inline-flex; align-items: center; gap: 2px; line-height: 1; }
.trust-badges .rating-stars i { font-size: 0.95em; color: #f59e0b; }
.rating-flex { flex-wrap: wrap; }
.trend-stats-wrap { background:rgba(255, 108, 26, 0.10); border:1px solid #E5E7EB; border-radius:16px; padding:18px; }
.trend-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.trend-stat-card { background:rgba(255, 108, 26, 0.10); border:1px solid #E5E7EB; border-radius:14px; padding:18px 16px; box-shadow:0 10px 24px #f3f6f9; height:100%; }
.trend-stat-value { color:#FF6C1A; font-weight:800; font-size:28px; line-height:1.15; letter-spacing:-0.02em; margin-bottom:10px; }
.trend-stat-title { color:#000; font-weight:600; font-size:13px; line-height:1.35; margin-bottom:10px; }
.trend-stat-source { color:#000; font-size:12px; line-height:1.3; }
@media screen and (max-width:1199px) {
    .common-media { padding: 55px 0px 12px 0; }
}
@media screen and (max-width:991px) {
    .common-media { padding: 50px 0 26px 0; }
}
@media screen and (max-width:767px) {
    .common-media { padding: 45px 0px 37px 0; }
}
@media (max-width:576px) {
    .common-media { padding: 35px 0; }
}
@media (max-width:480px) {
    .common-media { padding: 25px 0; }
}
@media (max-width:1199px) {
    .banner-right-content .h3, .banner-right-content h3 { font-size: 20px; font-weight: 600; line-height: 24px; margin-bottom: 0; }
    .ai-cta .title-wrap { padding: 50px 0px 50px 50px; }
    .ai-cta-request { padding: 40px 50px; }
    .ai-cta .title-wrap h2 { font-size: 24px; }
    .ai-cta-main { padding-top: 0; }
    .banner-cta-btns a { font-size: 15px; padding: 12px; }
    .banner-list p { font-size: 12px; }
    .ai-cta { min-height: auto; }
    .recommend { padding: 20px 24px; }
    .protips { padding: 20px 24px; }
    .quote-box { max-width: 100%; font-size: 18px; }
    .trend-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:991px) {
    .ai-cta-request { padding: 40px; border-radius: 10px; }
    .blog-video iframe { height: 270px !important; }
    .ai-cta .title-wrap { padding: 40px; }
    .ai-cta-main { padding: 0 0 60px; }
    .ai-cta { margin: 0px; }
    .author-detail-img { width: auto; & img { width: auto; } }
    .banner-cta-btns a { padding: 10px 12px; }
}
@media (max-width:700px) {
    .ai-cta-request { padding: 35px 40px; margin: 0; }
    .ai-cta .title-wrap { padding: 26px; }
    .author-detail-img { width: calc(100% - 70px); & img { width: 100% !important; height: auto !important; } }
    .fact-item span { font-size: 17px; }
}
@media (max-width:767px) {
    .ai-cta .title-wrap h2 { font-size: 22px; }
    .ai-cta .title-wrap { padding: 40px; }
    .banner-cta-btns a { font-size: 14px; }
    .recommend { flex-direction: column; padding: 16px 18px; }
    .recommend p { padding-bottom: 10px; }
    .protips { padding: 16px 18px; }
    .quote-box { max-width: 100%; font-size: 16px; }
    .important-box { border-left: 3px solid #FF6C1A; padding: 3px 8px; }
    .trust-badges { gap: 8px; font-size: 14px; }
    .trust-badges > span { width: 100%; justify-content: flex-start; padding: 8px 12px; border-radius: 14px; line-height: 1.4; }
    .trust-badges > span b { white-space: nowrap; }
}
@media (max-width:575px) {
    .blog-video iframe { height: 250px !important; }
    .trend-stats-wrap { padding:14px;border-radius:14px; }
    .trend-stats-grid { grid-template-columns:1fr;gap:12px; }
    .trend-stat-value { font-size:26px; }
}
@media (max-width:567px) {
    .banner-cta-btns a { padding: 8px 10px; }
}
@media (max-width:480px) {
    .ai-cta-request { padding: 30px 15px; border-radius: 16px; }
    .banner-cta-btns a { font-size: 12px; }
    .ai-cta .title-wrap h2 { font-size: 20px; }
    .ai-cta .title-wrap { padding: 30px 20px; }
    .ai-cta-main { padding: 0 0 45px; }
    .fact-item span { font-size: 16px; }
    .sub-titles { font-size: 16px; }
}
@media (max-width: 767px) {
    .spring-boot-final-cta { grid-template-columns: 1fr; gap: 16px; margin: 26px 0 14px; padding: 22px 18px; border-radius: 15px; }
    .spring-boot-final-cta h2 { margin-bottom: 9px; font-size: 22px; line-height: 1.3; }
    .spring-boot-final-cta p { font-size: 15px; line-height: 1.65; }
    .spring-boot-final-cta-btn { width: 100%; min-height: 44px; padding: 11px 18px; font-size: 14px; }
}