/* SMCMS Frontend Lab | Bootstrap 5.3 compatible | 2026-11-08
   Deliberately light: no resets to module controllers, links or form actions. */
:root{--sm-ink:#202c3d;--sm-muted:#64748b;--sm-border:#e3e9f1;--sm-canvas:#f6f8fb;--sm-accent:#2964d7;--sm-accent-pale:#ebf2ff}
html{scroll-behavior:smooth}body.smcms-lab{min-height:100vh;background:var(--sm-canvas);color:var(--sm-ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.68}
.smcms-lab .site-navbar{background:#fff;border-bottom:1px solid var(--sm-border)}
.smcms-lab .brand-mark{display:inline-flex;align-items:center;justify-content:center;width:37px;height:37px;border-radius:11px;background:var(--sm-accent);color:#fff;font-size:15px;font-weight:800;letter-spacing:-.04em}
.smcms-lab .brand-label{font-weight:800;letter-spacing:-.035em;font-size:1.13rem;color:#243044}
.smcms-lab .brand-label small{display:block;color:var(--sm-muted);font-weight:500;letter-spacing:0;font-size:.67rem;line-height:1.2}
.smcms-lab .navbar .nav-link{font-size:.91rem;color:#4d5a6d;padding:.7rem .75rem}
.smcms-lab .navbar .nav-link:hover,.smcms-lab .navbar .nav-link:focus{color:var(--sm-accent)}
.smcms-lab .smcms-main{min-height:68vh;padding-top:3rem;padding-bottom:4rem}
.smcms-lab .eyebrow{color:var(--sm-accent);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.73rem}
.smcms-lab h1,.smcms-lab h2,.smcms-lab h3,.smcms-lab h4{letter-spacing:-.035em;line-height:1.22;color:#17253a}
.smcms-lab h1{font-size:clamp(2rem,3.7vw,3.2rem);font-weight:760}.smcms-lab h2{font-weight:730}.smcms-lab h3{font-weight:680}
.smcms-lab p,.smcms-lab li{overflow-wrap:break-word}
.smcms-lab .intro{font-size:1.12rem;color:var(--sm-muted);max-width:55rem}
.smcms-lab .hero-panel{background:#fff;border:1px solid var(--sm-border);border-radius:1.3rem;padding:clamp(1.5rem,4vw,3.6rem);box-shadow:0 12px 35px rgba(26,47,77,.04)}
.smcms-lab .test-card,.smcms-lab .module-card{height:100%;background:#fff;border:1px solid var(--sm-border);border-radius:1rem;box-shadow:0 6px 20px rgba(20,40,75,.025);padding:1.45rem;transition:box-shadow .15s,border-color .15s}
.smcms-lab .test-card:hover{border-color:#c8d8f2;box-shadow:0 12px 28px rgba(20,40,75,.07)}
.smcms-lab .test-card h3{font-size:1.12rem;margin-bottom:.5rem}.smcms-lab .test-card p{font-size:.93rem;color:var(--sm-muted)}
.smcms-lab .test-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .66rem;border:1px solid #dae6ff;background:#f3f7ff;border-radius:99px;color:#315ea3;font-size:.74rem;font-weight:650}
.smcms-lab .section-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1.1rem}
.smcms-lab .section-heading p{margin-bottom:0;color:var(--sm-muted)}
.smcms-lab .btn-primary{--bs-btn-bg:#2964d7;--bs-btn-border-color:#2964d7;--bs-btn-hover-bg:#1c52c2;--bs-btn-hover-border-color:#1c52c2}
.smcms-lab .btn-outline-primary{--bs-btn-color:#2964d7;--bs-btn-border-color:#bfd2f7;--bs-btn-hover-bg:#2964d7;--bs-btn-hover-border-color:#2964d7}
.smcms-lab .demo-code{color:#194579;background:#f0f5fb;padding:.15rem .35rem;border-radius:.25rem;font-size:.87em}
.smcms-lab .soft-panel{background:#eaf2ff;border:1px solid #cbdffc;border-radius:.85rem;padding:1.3rem}
.smcms-lab .content-sample,.smcms-lab .article-body{background:#fff;border:1px solid var(--sm-border);border-radius:1rem;padding:clamp(1.2rem,3.4vw,2.4rem)}
.smcms-lab .article-body>img,.smcms-lab .article-body figure img{max-width:100%;height:auto;border-radius:.75rem}
.smcms-lab .article-meta{font-size:.85rem;color:var(--sm-muted)}
.smcms-lab blockquote{border-left:4px solid var(--sm-accent);padding:1rem 1.4rem;margin:1.5rem 0;background:#f5f8fe;color:#40506b}
.smcms-lab .media-placeholder{display:flex;align-items:center;justify-content:center;min-height:150px;background:#eaf0fa;border:1px solid var(--sm-border);border-radius:.85rem;color:#587195;font-size:.85rem}
.smcms-lab .media-placeholder img{width:100%;height:auto;display:block;border-radius:.75rem}
.smcms-lab .btn-primary a{color:#ffffff}.smcms-lab a:hover{color:#143f94}
.smcms-lab .btn-outline-primary a{color:#2964d7}
.smcms-lab .smcms-main img{max-width:100%;height:auto}
.smcms-lab .smcms-main table{width:100%;max-width:100%}
.smcms-lab .smcms-main .table{--bs-table-bg:transparent;--bs-table-border-color:var(--sm-border);font-size:.94rem}
.smcms-lab .smcms-main label{font-weight:620;margin-bottom:.3rem;font-size:.91rem}
.smcms-lab .smcms-main :is(input,select,textarea):focus{border-color:#94b5f7;box-shadow:0 0 0 .22rem rgba(41,100,215,.10)}
.smcms-lab .form-check-input,.smcms-lab .form-check-label{cursor:pointer}
.smcms-lab .accordion-button:not(.collapsed){background:#f0f5ff;color:#204c99}
.smcms-lab .pagination{gap:.25rem;flex-wrap:wrap}
.smcms-lab .pagination :is(a,span){display:inline-block;padding:.38rem .75rem;text-decoration:none;border:1px solid var(--sm-border);border-radius:.45rem;background:#fff}
.smcms-lab .smcms-main :is(.module-list,.news-list,.blog-list){margin-bottom:1.6rem}
.smcms-lab .site-footer{background:#fff;border-top:1px solid var(--sm-border);padding:2.2rem 0;color:var(--sm-muted);font-size:.87rem}
.smcms-lab .site-footer a{color:#52647f;text-decoration:none}.smcms-lab .site-footer a:hover{color:var(--sm-accent)}
.smcms-lab .footer-links{display:flex;gap:1rem;flex-wrap:wrap}
.smcms-lab .form-slot{background:#fff;border:1px solid var(--sm-border);border-radius:1rem;padding:1.5rem}
.smcms-lab .qa-note{border-left:3px solid #f1b451;background:#fff9eb;padding:.85rem 1.1rem;border-radius:0 .5rem .5rem 0;color:#7b5d24;font-size:.9rem}
.smcms-lab .image-grid img{aspect-ratio:4/3;object-fit:cover;width:100%}
.smcms-lab .small-upper{font-size:.74rem;font-weight:720;letter-spacing:.1em;text-transform:uppercase;color:var(--sm-muted)}
@media(max-width:767px){.smcms-lab .smcms-main{padding-top:1.6rem;padding-bottom:2.6rem}.smcms-lab .hero-panel{border-radius:1rem}.smcms-lab .section-heading{display:block}.smcms-lab .site-footer{text-align:center}.smcms-lab .footer-links{justify-content:center;margin-top:1rem}}
