/* Shared demo shell: styling only; uploader theme examples retain control of their own UI. */
:root { --accent:#2559e8; --accent-2:#1946c5; --accent-3:#21478d; --accent-bg:#edf3ff; --accent-glow:rgba(37,89,232,.12); --ink:#142440; --ink-2:#263e61; --ink-3:#546b89; --r-lg:.8rem; }
body { background:#f4f7fc; }
.site-header { background:#fff; box-shadow:none; border-bottom:1px solid #dfe6f2; }
.site-brand-icon { background:#142440; border-radius:.65rem; box-shadow:none; }
.site-nav { background:#f3f6fb; border-radius:.6rem; }
.site-nav a { border-radius:.4rem; }
.site-nav a.is-active { color:#2559e8; box-shadow:none; background:#e8efff; }
.btn-download { background:#2559e8; border-radius:.5rem; box-shadow:none; }
.btn-download:hover { background:#1946c5; }
.tag-bar { background:#f8faff; border-color:#e0e8f4; }
.tag-pill { background:transparent; border:0; box-shadow:none; font-size:.7rem; color:#7386a3; }
.sidebar { background:#fff; border-color:#dfe6f2; }
.sidebar-search { padding:1rem .85rem; }
.sidebar-search input { border-radius:.5rem; background:#f7f9fd; }
.sidebar-category { letter-spacing:.09em; font-size:.62rem; color:#8293af; margin-top:1.4rem; }
.sidebar-link { padding:.55rem .8rem; color:#556d90; border-radius:.4rem; font-size:.79rem; }
.sidebar-link:hover { background:#f3f6fd; }
.sidebar-link.active { background:#edf3ff; color:#2559e8; }
.sidebar-link.active::before { background:#2559e8; }
.sidebar-link .demo-num { background:#f1f5fb; color:#8a9ab3; font-size:.58rem; }
.sidebar-link.active .demo-num { background:#dfeaff; color:#3962b6; }
.main-content { min-width:0; background:#f5f8fc; }
.main-header { background:#fff; padding:1.5rem 2rem; border-bottom:1px solid #e0e7f2; }
.main-header h1 { font-size:clamp(1.4rem,2.5vw,1.9rem); line-height:1.25; letter-spacing:-.04em; }
.breadcrumb-trail { font-size:.63rem; letter-spacing:.08em; margin-bottom:.4rem; }
.main-body { padding:2rem; max-width:1280px; }
.main-body > .alert-light { background:#edf3fc; border-color:#dce6f5 !important; color:#607692; border-radius:.55rem; font-size:.77rem !important; line-height:1.7; }
.demo-card { border:1px solid #dce5f1; border-radius:.8rem; box-shadow:0 14px 35px -32px #14244080; overflow:hidden; }
.demo-card:hover { border-color:#c9d7ec; box-shadow:0 14px 35px -32px #14244080; }
.demo-card-header { background:#fff; border-bottom:1px solid #e3e9f3; color:#294369; padding:1.1rem 1.5rem; font-size:.87rem; font-weight:700; }
.demo-card-body { padding:1.6rem; }
.demo-description { color:#627793; line-height:1.8; font-size:.95rem; }
.demo-card-body .demo-expect { padding:.85rem 1rem; margin:1rem 0 1.4rem; border-left:3px solid #a9c0ef; border-radius:.3rem; background:#f3f7ff; color:#577093; font-size:.82rem; line-height:1.75; }
.code-panel { background:#142440; border:1px solid #253c60; border-radius:.65rem; box-shadow:none; margin-top:1.5rem; }
.code-panel pre { padding:1.25rem; margin:0; font-size:.78rem; line-height:1.8; overflow:auto; }
.code-panel pre code { color:#d4e1f6; background:none; white-space:pre; overflow-wrap:normal; }
:not(pre) > code { overflow-wrap:anywhere; }
.main-body .alert { border-radius:.65rem; }
.main-body h2,.main-body h3 { letter-spacing:-.035em; }
.main-body table { line-height:1.7; }
.sidebar-toggle { border-radius:.5rem; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #3477ed; outline-offset:3px; }
@media(max-width:991px) { .main-header { padding:1.1rem 1rem; }.main-body { padding:1rem; }.demo-card-body { padding:1.1rem; }.site-brand-sub { font-size:.6rem; letter-spacing:.06em; }.site-header-inner { gap:.75rem; }.site-header-actions > a:not(.btn-download) { display:none; } }
@media(max-width:480px) { .site-brand-text { font-size:.95rem; }.site-header-actions .btn-download { font-size:.7rem; padding:.5rem .65rem; }.site-brand-sub { max-width:150px; }.main-body .dl-container { width:100%; }.main-body .dl-hero { padding:1.5rem 0; }.main-body .dl-hero h1 { font-size:2.4rem; } }
@media(prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

.site-header-actions .btn-download { background:#2559e8; border-radius:.5rem; box-shadow:none; }
.site-header-actions .btn-download:hover { background:#1946c5; }
