.demo-main{min-height:70vh;background:var(--theme-bg-primary);color:var(--theme-text-primary)}
.demo-container{width:min(1180px,calc(100% - 32px));margin:0 auto}.demo-narrow{max-width:760px}
.demo-hero,.demo-page-hero{border-bottom:1px solid var(--theme-border-primary);background:var(--theme-bg-secondary)}
.demo-hero-inner{padding:88px 0 72px}.demo-page-hero .demo-container{padding:64px 0 48px}
.demo-hero h1,.demo-page-hero h1{max-width:850px;margin:10px 0 0;font-size:clamp(2.25rem,5vw,4.75rem);line-height:1.06;font-weight:800}
.demo-page-hero h1{font-size:clamp(2rem,4vw,3.5rem)}
.demo-hero p,.demo-page-hero p{max-width:720px;margin:20px 0 0;color:var(--theme-text-secondary);font-size:1.05rem;line-height:1.8}
.demo-eyebrow{margin:0!important;color:var(--theme-primary)!important;font-size:.78rem!important;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.demo-actions,.demo-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.demo-filter-list{display:flex;flex-wrap:nowrap;gap:10px;margin-top:28px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.demo-filter-list::-webkit-scrollbar{display:none}
.demo-filter-list a{flex:0 0 auto;white-space:nowrap}
.demo-button,.demo-filter-list a,.demo-tags a{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--theme-border-primary);border-radius:6px;padding:10px 16px;color:var(--theme-text-primary);font-weight:700;text-decoration:none;background:var(--theme-bg-elevated)}
.demo-button-primary,.demo-filter-list a.is-active{border-color:var(--theme-primary);background:var(--theme-primary);color:var(--theme-text-white)}
.demo-section{padding:64px 0}.demo-section-soft{background:var(--theme-bg-secondary);border-block:1px solid var(--theme-border-primary)}
.demo-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.demo-section-head h2{margin:6px 0 0;font-size:clamp(1.6rem,3vw,2.4rem)}
.demo-text-link{color:var(--theme-primary);font-weight:700;text-decoration:none}
.demo-category-grid,.demo-tag-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.demo-category-item,.demo-tag-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--theme-border-primary);border-radius:8px;padding:20px;background:var(--theme-bg-elevated);color:var(--theme-text-primary);text-decoration:none}
.demo-category-item span,.demo-tag-card span{color:var(--theme-text-secondary);font-size:.9rem;line-height:1.6}
.demo-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.demo-card{min-width:0;border:1px solid var(--theme-border-light);border-radius:8px;overflow:hidden;background:var(--theme-bg-elevated)}
.zf-layout-header__desktop .zf-nav-link-active{background:transparent!important;box-shadow:none!important}
.demo-card-link{display:block;height:100%;color:inherit;text-decoration:none}.demo-card-image,.demo-card-placeholder{width:100%;aspect-ratio:16/10;object-fit:cover}
.demo-card-placeholder{display:flex;align-items:center;justify-content:center;background:var(--theme-bg-tertiary);color:var(--theme-text-muted);font-size:2rem;font-weight:800}
.demo-card-body{padding:18px}.demo-card-title{margin:0;font-size:1.08rem;line-height:1.45}.demo-card-summary{margin:10px 0 0;color:var(--theme-text-secondary);font-size:.9rem;line-height:1.65}
.demo-card-meta,.demo-article-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;color:var(--theme-text-muted);font-size:.8rem}
.demo-breadcrumb{margin-bottom:18px;color:var(--theme-text-muted);font-size:.9rem}.demo-breadcrumb a{color:inherit}
.demo-empty{border:1px dashed var(--theme-border-primary);border-radius:8px;padding:64px 24px;text-align:center;background:var(--theme-bg-elevated)}.demo-empty h2{margin:0}.demo-empty p{margin:12px 0 0;color:var(--theme-text-secondary)}
.demo-pagination{margin-top:32px}.demo-pagination ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}.demo-pagination li a,.demo-pagination li span{display:flex;min-width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--theme-border-primary);border-radius:5px;padding:0 10px;color:var(--theme-text-primary);background:var(--theme-bg-elevated)}
.demo-article{max-width:900px;padding-top:64px;padding-bottom:72px}.demo-article-head h1{margin:0;font-size:clamp(2rem,5vw,4rem);line-height:1.12}.demo-article-head>p{margin:20px 0 0;color:var(--theme-text-secondary);font-size:1.08rem;line-height:1.8}
.demo-article-cover{width:100%;max-height:560px;object-fit:cover;border-radius:8px;margin:34px 0}.demo-prose{font-size:1.02rem;line-height:1.9;color:var(--theme-text-primary)}.demo-prose img{max-width:100%;height:auto}.demo-prose a{color:var(--theme-primary)}
.demo-search-form{display:flex;gap:10px;margin-top:24px}.demo-search-form input{min-width:0;flex:1;height:48px;border:1px solid var(--theme-border-primary);border-radius:6px;padding:0 14px;background:var(--theme-bg-elevated);color:var(--theme-text-primary)}.demo-search-form button{border:0;border-radius:6px;padding:0 22px;background:var(--theme-primary);color:var(--theme-text-white);font-weight:700}
.demo-category-item:hover,.demo-tag-card:hover,.demo-card:hover{border-color:var(--theme-border-focus);box-shadow:0 10px 28px rgba(0,0,0,.08)}
@media(max-width:960px){.demo-card-grid,.demo-category-grid,.demo-tag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-hero-inner{padding:64px 0 54px}}
@media(max-width:600px){.demo-container{width:min(100% - 24px,1180px)}.demo-card-grid,.demo-category-grid,.demo-tag-grid{grid-template-columns:1fr}.demo-section{padding:44px 0}.demo-page-hero .demo-container{padding:44px 0 36px}.demo-section-head{align-items:flex-start;flex-direction:column}.demo-search-form{flex-direction:column}.demo-search-form button{height:46px}.demo-article{padding-top:44px;padding-bottom:52px}}
.zf-user-app-page,.zf-user-app-shell{background:var(--theme-bg-secondary)!important}.zf-user-app-sidebar{background:color-mix(in srgb,var(--theme-bg-elevated) 92%,transparent)!important}.zf-user-app-page #zf-page-content{background:linear-gradient(180deg,color-mix(in srgb,var(--theme-bg-secondary) 90%,transparent),var(--theme-bg-secondary)),radial-gradient(circle at top right,color-mix(in srgb,var(--theme-primary) 10%,transparent),transparent 32rem)!important}.zf-user-app-page .zf-user-list-panel,.zf-user-app-page .dashboard-hero-card,.zf-user-app-page .dashboard-activity-card{background:color-mix(in srgb,var(--theme-bg-elevated) 90%,transparent)!important;border-color:var(--theme-border-primary)!important}.zf-user-app-nav__item:hover,.zf-user-app-nav__item.is-active{background:var(--theme-bg-accent)!important;color:var(--theme-primary)!important;border-color:color-mix(in srgb,var(--theme-primary) 22%,transparent)!important}#zf-page-content input:focus,#zf-page-content select:focus,#zf-page-content textarea:focus{border-color:var(--theme-border-focus)!important;box-shadow:0 0 0 3px var(--theme-bg-accent)!important}.user-dashboard-page .dashboard-credit-btn,.zf-user-app-membership__btn.is-primary{background:var(--theme-primary)!important;color:var(--theme-text-white)!important}.user-dashboard-page .dashboard-credit-btn:hover,.zf-user-app-membership__btn.is-primary:hover{background:var(--theme-primary-dark)!important}.user-dashboard-page .bg-blue-100\/50,.user-dashboard-page .bg-purple-100\/50,.user-dashboard-page .bg-pink-100\/50{background:var(--theme-bg-accent)!important}.user-dashboard-page .group:hover .group-hover\:bg-blue-200\/50,.user-dashboard-page .group:hover .group-hover\:bg-purple-200\/50,.user-dashboard-page .group:hover .group-hover\:bg-pink-200\/50{background:color-mix(in srgb,var(--theme-primary) 16%,transparent)!important}
@media(max-width:640px){.zf-layout-header__nav>.flex.min-w-0.items-center.shrink-0:first-child{flex:1 1 auto;min-width:0}.zf-layout-header__nav>.flex.min-w-0.items-center.shrink-0:first-child>a{max-width:100%;overflow:hidden}.zf-layout-header__nav .zf-header-logo-img{flex:0 0 auto;max-width:96px!important}.zf-layout-header__nav .zf-header-logo-text{flex:1 1 auto;max-width:none!important;min-width:0;font-size:1rem}}