.modular-template-preview,.modular-template-preview *,.modular-template-preview :before,.modular-template-preview :after{box-sizing:border-box;margin:0;padding:0}.modular-template-preview{--bg:#fff;--bg2:#f7f6f3;--bg3:#f0efeb;--text:#37352f;--text2:#787774;--text3:#a8a7a2;--accent:#2383e2;--accent-light:#e8f0fe;--green:#0f7b0f;--green-light:#e6f4e6;--orange:#cf9f02;--orange-light:#fef6e0;--red:#eb5757;--red-light:#fde8e8;--purple:#9065b0;--purple-light:#f3e8ff;--pink:#d44c91;--pink-light:#fce8f3;--border:#e3e2de;--shadow:0 1px 3px #0000000a,0 4px 12px #0000000f;--radius:8px;--radius-lg:12px;--max-w:1100px;--font:"Inter",system-ui,-apple-system,sans-serif;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;isolation:isolate;line-height:1.6}.modular-template-preview .topbar{z-index:40;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#ffffffeb;padding:0 24px;position:sticky;top:0}.modular-template-preview .topbar-inner{max-width:var(--max-w);justify-content:space-between;align-items:center;height:52px;margin:0 auto;display:flex}.modular-template-preview .topbar-left{align-items:center;gap:10px;display:flex}.modular-template-preview .topbar-logo{color:var(--text);align-items:center;gap:8px;font-size:18px;font-weight:700;display:flex}.modular-template-preview .topbar-logo span{font-size:20px}.modular-template-preview .topbar-right{align-items:center;gap:12px;display:flex}.modular-template-preview .lang-toggle{background:var(--bg2);border:1px solid var(--border);border-radius:6px;display:flex;overflow:hidden}.modular-template-preview .lang-btn{min-width:44px;min-height:44px;font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;color:var(--text2);background:0 0;border:none;padding:6px 10px;transition:all .2s}.modular-template-preview .lang-btn.active{background:var(--accent);color:#fff}.modular-template-preview .checkout-bar{color:#fff;background:linear-gradient(135deg,#0f0f13 0%,#1a1a24 100%);border-bottom:1px solid #ffffff14;padding:20px 24px}.modular-template-preview .checkout-bar-inner{max-width:var(--max-w);flex-wrap:wrap;align-items:center;gap:16px;margin:0 auto;display:flex}.modular-template-preview .checkout-price{margin:0;font-size:28px;font-weight:800}.modular-template-preview .checkout-note{color:#ffffffbf;flex:1;min-width:220px;margin:0;font-size:13px}.modular-template-preview .checkout-actions{flex-wrap:wrap;gap:10px;display:flex}.modular-template-preview .checkout-btn{border-radius:8px;justify-content:center;align-items:center;padding:10px 18px;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex}.modular-template-preview .checkout-btn-primary{color:#0f0f13;background:#fff}.modular-template-preview .checkout-btn-secondary{color:#fff;background:0 0;border:1px solid #ffffff59}.modular-template-preview .checkout-btn:hover{opacity:.92}.modular-template-preview .detail-disclaimer{background:var(--orange-light);border-left:3px solid var(--orange)}.modular-template-preview .hero{max-width:var(--max-w);text-align:center;margin:0 auto;padding:64px 24px 48px}.modular-template-preview .hero-badge{text-transform:uppercase;letter-spacing:.5px;background:var(--accent-light);color:var(--accent);border-radius:20px;margin-bottom:16px;padding:4px 14px;font-size:12px;font-weight:600;display:inline-block}.modular-template-preview .hero-title{color:var(--text);margin-bottom:16px;font-size:clamp(28px,5vw,44px);font-weight:800;line-height:1.15}.modular-template-preview .hero p{color:var(--text2);max-width:680px;margin:0 auto 32px;font-size:clamp(15px,2vw,18px);line-height:1.7}.modular-template-preview .hero-stats{flex-wrap:wrap;justify-content:center;gap:40px;display:flex}.modular-template-preview .hero-stat{text-align:center}.modular-template-preview .hero-stat .num{color:var(--accent);font-size:28px;font-weight:700}.modular-template-preview .hero-stat .label{color:var(--text2);margin-top:2px;font-size:13px}.modular-template-preview .principles{max-width:var(--max-w);margin:0 auto;padding:0 24px 48px}.modular-template-preview .principles-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.modular-template-preview .principle-card{background:var(--bg2);border-radius:var(--radius);text-align:center;padding:20px}.modular-template-preview .principle-icon{margin-bottom:8px;font-size:28px}.modular-template-preview .principle-card h3{margin-bottom:4px;font-size:14px;font-weight:600}.modular-template-preview .principle-card p{color:var(--text2);font-size:13px;line-height:1.5}.modular-template-preview .search-section{max-width:var(--max-w);margin:0 auto;padding:0 24px 16px}.modular-template-preview .search-wrap{max-width:560px;margin:0 auto 20px;position:relative}.modular-template-preview .search-icon{color:var(--text3);pointer-events:none;font-size:16px;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.modular-template-preview .search-input{border:1px solid var(--border);border-radius:var(--radius);width:100%;font-size:15px;font-family:var(--font);color:var(--text);background:var(--bg);padding:12px 16px 12px 44px;transition:all .2s}.modular-template-preview .search-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #2383e226}.modular-template-preview .search-input::placeholder{color:var(--text3)}.modular-template-preview .filter-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.modular-template-preview .filter-btn{min-height:44px;font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text2);border-radius:20px;padding:8px 16px;transition:all .2s}.modular-template-preview .filter-btn:hover{border-color:var(--accent);color:var(--accent)}.modular-template-preview .filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.modular-template-preview .components-section{max-width:var(--max-w);margin:0 auto;padding:24px 24px 64px}.modular-template-preview .components-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;display:grid}.modular-template-preview .comp-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all .25s;overflow:hidden}.modular-template-preview .comp-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.modular-template-preview .comp-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.modular-template-preview .comp-card-header{align-items:flex-start;gap:14px;padding:20px 20px 16px;display:flex}.modular-template-preview .comp-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:22px;display:flex}.modular-template-preview .comp-meta{flex:1;min-width:0}.modular-template-preview .comp-meta h3{margin-bottom:2px;font-size:15px;font-weight:600;line-height:1.3}.modular-template-preview .comp-meta p{color:var(--text2);font-size:13px;line-height:1.5}.modular-template-preview .comp-tags{flex-wrap:wrap;gap:6px;padding:0 20px 16px;display:flex}.modular-template-preview .comp-tag{background:var(--bg2);color:var(--text2);border-radius:4px;padding:2px 10px;font-size:11px;font-weight:500}.modular-template-preview .comp-tag.complexity-simple{background:var(--green-light);color:var(--green)}.modular-template-preview .comp-tag.complexity-medium{background:var(--orange-light);color:#946800}.modular-template-preview .comp-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.modular-template-preview .comp-time{color:var(--text3);align-items:center;gap:4px;font-size:12px;display:flex}.modular-template-preview .comp-expand-hint{color:var(--accent);font-size:12px;font-weight:500}.modular-template-preview .comp-detail-overlay{z-index:200;background:#0006;justify-content:center;align-items:flex-start;padding:40px 16px;display:none;position:fixed;inset:0;overflow-y:auto}.modular-template-preview .comp-detail-overlay.open{display:flex}.modular-template-preview .comp-detail{background:var(--bg);border-radius:var(--radius-lg);width:100%;max-width:720px;margin:auto;animation:.25s modularSlideUp;overflow:hidden;box-shadow:0 8px 40px #00000026}@keyframes modularSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modular-template-preview .comp-detail-head{align-items:flex-start;gap:16px;padding:28px 32px 20px;display:flex}.modular-template-preview .comp-detail-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:26px;display:flex}.modular-template-preview .comp-detail-title h2{margin-bottom:4px;font-size:22px;font-weight:700}.modular-template-preview .comp-detail-title p{color:var(--text2);font-size:14px}.modular-template-preview .comp-detail-close{background:var(--bg2);cursor:pointer;width:44px;height:44px;color:var(--text2);border:none;border-radius:6px;justify-content:center;align-items:center;font-size:18px;transition:all .15s;display:flex;position:absolute;top:20px;right:20px}.modular-template-preview .comp-detail-close:hover{background:var(--bg3);color:var(--text)}.modular-template-preview .comp-detail-body{padding:0 32px 28px;position:relative}.modular-template-preview .detail-section{margin-bottom:24px}.modular-template-preview .detail-section h4{text-transform:uppercase;letter-spacing:.5px;color:var(--text2);align-items:center;gap:6px;margin-bottom:10px;font-size:13px;font-weight:600;display:flex}.modular-template-preview .detail-section h4 span{font-size:14px}.modular-template-preview .detail-content{color:var(--text);font-size:14px;line-height:1.7}.modular-template-preview .detail-content p{margin-bottom:8px}.modular-template-preview .detail-content ul{margin-bottom:8px;padding-left:20px}.modular-template-preview .detail-content li{margin-bottom:4px;font-size:14px}.modular-template-preview .props-table{border-collapse:collapse;width:100%;font-size:13px}.modular-template-preview .props-table th{text-align:left;background:var(--bg2);border-bottom:1px solid var(--border);padding:8px 12px;font-weight:600}.modular-template-preview .props-table td{border-bottom:1px solid var(--border);padding:8px 12px}.modular-template-preview .props-table tr:last-child td{border-bottom:none}.modular-template-preview .detail-tip{background:var(--accent-light);border-radius:var(--radius);color:var(--accent);gap:8px;padding:14px 16px;font-size:13px;line-height:1.6;display:flex}.modular-template-preview .detail-tip .tip-icon{flex-shrink:0;font-size:16px}.modular-template-preview .guide-section{max-width:var(--max-w);margin:0 auto;padding:0 24px 64px}.modular-template-preview .guide-section h2{text-align:center;margin-bottom:8px;font-size:24px;font-weight:700}.modular-template-preview .guide-section>p{text-align:center;color:var(--text2);margin-bottom:32px;font-size:15px}.modular-template-preview .guide-steps{max-width:640px;margin:0 auto}.modular-template-preview .guide-step{gap:16px;margin-bottom:24px;display:flex}.modular-template-preview .step-num{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;font-weight:700;display:flex}.modular-template-preview .step-content h4{margin-bottom:4px;font-size:15px;font-weight:600}.modular-template-preview .step-content p{color:var(--text2);font-size:14px;line-height:1.6}.modular-template-preview .footer{text-align:center;border-top:1px solid var(--border);color:var(--text3);padding:32px 24px;font-size:13px}.modular-template-preview .no-results{text-align:center;color:var(--text2);padding:48px 24px;display:none}.modular-template-preview .no-results .emoji{margin-bottom:12px;font-size:40px}.modular-template-preview .no-results p{font-size:15px}@media (width<=680px){.modular-template-preview .hero{padding:40px 16px 32px}.modular-template-preview .hero-stats{gap:24px}.modular-template-preview .components-grid{grid-template-columns:1fr}.modular-template-preview .comp-detail-head{padding:24px 20px 16px}.modular-template-preview .comp-detail-body{padding:0 20px 24px}.modular-template-preview .comp-detail-overlay{padding:20px 12px}.modular-template-preview .principles-grid{grid-template-columns:1fr 1fr}.modular-template-preview .guide-section,.modular-template-preview .search-section,.modular-template-preview .components-section,.modular-template-preview .principles{padding-left:16px;padding-right:16px}}@media (width<=400px){.modular-template-preview .principles-grid{grid-template-columns:1fr}}.modular-template-preview .bg-blue{background:#e8f0fe}.modular-template-preview .bg-green{background:#e6f4e6}.modular-template-preview .bg-orange{background:#fef6e0}.modular-template-preview .bg-purple{background:#f3e8ff}.modular-template-preview .bg-pink{background:#fce8f3}.modular-template-preview .bg-red{background:#fde8e8}.modular-template-preview .bg-teal{background:#e0f5f0}.modular-template-preview .bg-yellow{background:#fbf3d5}.modular-template-preview .bg-gray{background:#eeeeed}.modular-template-preview .bg-indigo{background:#e8e4f8}.modular-template-preview .bg-cyan{background:#ddf4fa}.modular-template-preview .bg-rose{background:#fde8ec}.modular-template-preview ::-webkit-scrollbar{width:8px}.modular-template-preview ::-webkit-scrollbar-track{background:0 0}.modular-template-preview ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.modular-template-preview ::-webkit-scrollbar-thumb:hover{background:var(--text3)}.modular-template-preview .hidden{display:none!important}.modular-template-preview .requires-base{max-width:var(--max-w);background:var(--accent-light);border-radius:var(--radius);color:var(--accent);text-align:center;margin:0 auto 24px;padding:12px 16px;font-size:14px}.modular-template-preview .comp-tag.tier-core{color:#2383e2;background:#e8f0fe}.modular-template-preview .comp-tag.tier-industry{color:#9065b0;background:#f3e8ff}.modular-template-preview:has(.comp-detail-overlay.open){z-index:60;position:relative}