.web-banners-module{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);font-family:Arial,sans-serif;margin:20px auto;max-width:1200px;padding:20px;width:100%}.banner-header{align-items:flex-start;display:flex;gap:20px;justify-content:space-between;margin-bottom:20px}.header-content{flex:1}.banner-header h2{color:#1a1a1a;font-size:24px;font-weight:600;margin:0 0 8px}.help-toggle-btn{align-items:center;background:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;color:#495057;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;padding:10px 16px;transition:all .2s ease;white-space:nowrap}.help-toggle-btn:hover{background:#e9ecef;border-color:#adb5bd}.help-toggle-btn svg{flex-shrink:0}.help-guide-overlay{align-items:center;background:rgba(0,0,0,.5);bottom:0;box-sizing:border-box;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.help-guide-panel{animation:slideIn .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.15);display:flex;flex-direction:column;max-height:90vh;max-width:800px;overflow:hidden;width:100%}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.help-header{align-items:center;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;margin-bottom:0;padding:24px 24px 0}.help-header h3{color:#1a1a1a;font-size:20px;font-weight:600;margin:0 0 16px}.help-close-btn{background:none;border:none;border-radius:4px;color:#6c757d;cursor:pointer;margin-bottom:16px;padding:8px;transition:all .2s ease}.help-close-btn:hover{background:#f8f9fa;color:#495057}.help-intro{border-bottom:1px solid #e9ecef;padding:0 24px 20px}.help-intro p{color:#495057;margin:0 0 16px}.help-tabs{border-bottom:1px solid #e9ecef;display:flex;flex-wrap:wrap;gap:4px;padding:0 24px}.help-tab-btn{background:none;border:none;border-bottom:2px solid transparent;color:#6c757d;cursor:pointer;font-size:14px;font-weight:500;padding:12px 16px;transition:all .2s ease;white-space:nowrap}.help-tab-btn:hover{background:#f8f9fa;color:#495057}.help-tab-btn.active{background:#f8f9fa;border-bottom-color:#0d6efd;color:#0d6efd}.help-content{flex:1;overflow-y:auto;padding:24px}.help-panel{display:none}.help-panel.active{animation:fadeIn .2s ease-in;display:block}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.help-panel h4{color:#1a1a1a;font-size:18px;font-weight:600;margin:0 0 12px}.help-panel h5{color:#495057;font-size:16px;font-weight:600;margin:16px 0 8px}.help-panel p{color:#495057;line-height:1.5;margin:0 0 16px}.help-panel ol,.help-panel ul{color:#495057;margin:0 0 16px;padding-left:1.25rem}.help-panel li{margin-bottom:4px}.method-section{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;margin-bottom:16px;padding:16px}.method-section h5{color:#1a1a1a;margin-top:0}.troubleshoot-note{background:#fff3cd;border:1px solid #ffeaa7;border-radius:6px;margin:16px 0;padding:12px}.pro-tip{background:#d1ecf1;border:1px solid #b8daff;border-radius:6px}.contact-support,.pro-tip{margin:16px 0;padding:12px}.contact-support{background:#f8f9fa;border:1px solid #dee2e6;border-radius:6px}.contact-support a{color:#0d6efd;text-decoration:none}.contact-support a:hover{text-decoration:underline}code{background:#f8f9fa;border:1px solid #e9ecef;border-radius:3px;color:#e83e8c;font-family:SF Mono,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.875em;padding:2px 4px}@media (max-width:768px){.help-guide-overlay{padding:10px}.help-guide-panel{max-height:95vh}.help-content,.help-header,.help-intro,.help-tabs{padding-left:16px;padding-right:16px}.help-tab-btn{font-size:13px;padding:10px 12px}.banner-header{flex-direction:column;gap:12px}.help-toggle-btn{align-self:flex-start}}.banner-filters-new{align-items:center;background:#f8f9fa;border-radius:8px;display:flex;gap:24px;justify-content:space-between;margin-bottom:30px;padding:20px}.size-selector-section{flex:1;min-width:0}.size-buttons{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.size-btn[data-size-key=all]{margin-right:24px;position:relative}.size-btn[data-size-key=all]:after{background:#dee2e6;bottom:10%;content:"";position:absolute;right:-18px;top:10%;width:1px}.size-btn{align-items:center;background:#fff;border:2px solid #dee2e6;border-radius:8px;box-shadow:none!important;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:60px;outline:none!important;padding:10px;transition:none!important}.size-btn:hover{background:#f0faf9;border:2px solid #dee2e6;box-shadow:none!important}.size-btn:focus{border:2px solid #dee2e6;outline:none!important}.size-btn:active{background:#e8f5f4;border:2px solid #dee2e6}.size-btn.active{background:#e8f5f4}.size-btn.active,.size-btn.active:hover{border:2px solid #279a93;box-shadow:none!important}.size-btn.active:hover{background:#d4f0ed}.size-visual{align-items:center;display:flex;flex-shrink:0;justify-content:center}.size-btn.active .size-visual,.size-visual{color:#6c757d!important}.all-sizes-visual{flex-shrink:0;height:80px;width:80px}.size-dimensions{color:#6c757d;font-size:12px;font-weight:500;white-space:nowrap}.size-btn.active .size-dimensions{color:#279a93;font-weight:600}.filter-controls-section{align-items:flex-end;display:flex;flex-direction:column;gap:12px;justify-content:center}.style-control{align-items:center;display:flex}.segmented-control{background:#fff;border:1px solid #dee2e6;border-radius:6px;display:inline-flex;overflow:hidden}.segment-btn{background:#fff;border:0!important;border-right:1px solid #dee2e6!important;box-shadow:none!important;box-sizing:border-box;color:#6c757d;cursor:pointer;font-size:14px;font-weight:500;outline:none!important;padding:8px 16px;transition:none!important;white-space:nowrap}.segment-btn:last-child{border-right:0!important}.segment-btn:hover{background:#f8f9fa;border:0!important;border-right:1px solid #dee2e6!important;box-shadow:none!important;outline:none!important}.segment-btn:hover:last-child{border-right:0!important}.segment-btn.active{background:#279a93;border:0!important;border-right:1px solid #dee2e6!important;box-shadow:none!important;color:#fff;outline:none!important}.segment-btn.active:last-child{border-right:0!important}.segment-btn:focus{box-shadow:none!important;outline:none!important}.illustrated-control{align-items:center;display:flex}.checkbox-label{align-items:center;background:#fff;border:1px solid #dee2e6!important;border-radius:6px;box-sizing:border-box;color:#495057;cursor:pointer;display:flex;font-size:14px;gap:8px;padding:6px 12px;transition:none!important}.checkbox-label,.checkbox-label:hover{box-shadow:none!important;outline:none!important}.checkbox-label:hover{background:#f8f9fa;border:1px solid #dee2e6!important}.checkbox-label:focus-within{border:1px solid #dee2e6!important;box-shadow:none!important;outline:none!important}.checkbox-label input[type=checkbox]{accent-color:#279a93;cursor:pointer;height:18px;width:18px}.checkbox-label span{user-select:none}.no-banners-message{background:#f8f9fa;border-radius:8px;color:#6c757d;font-size:16px;margin-bottom:20px;padding:60px 20px;text-align:center}.no-banners-message p{margin:0}.banner-grid-container{margin-bottom:30px}.size-group{margin-bottom:32px}.size-group:last-child{margin-bottom:0}.size-group-header{align-items:baseline;border-bottom:2px solid #dee2e6;display:flex;gap:12px;margin-bottom:16px;padding-bottom:8px}.size-group-header h3{color:#1a1a1a;font-size:18px;font-weight:600;margin:0}.size-group-dimensions{color:#6c757d;font-size:14px;font-weight:400}.banner-grid{align-items:start;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.banner-grid.hidden{display:none}.banner-item{background:transparent;cursor:pointer;flex-direction:column}.banner-item,.banner-preview{display:flex;position:relative}.banner-preview{align-items:center;flex:1;justify-content:center;min-height:120px;padding:0}.banner-preview img{border:1px solid #4a4d56;display:block;height:auto;max-height:300px;max-width:100%;object-fit:contain;object-position:center;width:auto}.banner-output{background:#f8f9fa;border-left:4px solid #007bff;border-radius:8px;margin-top:40px;padding:30px}.banner-output h3{color:#333;font-size:1.5rem;margin:0 0 20px}.selected-banner{align-items:center;background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);display:flex;gap:20px;margin-bottom:30px;padding:20px}.selected-banner img{border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.1);height:auto;max-width:200px}.banner-info h4{color:#333;font-size:1.2rem;margin:0 0 10px}.banner-info p{color:#666;font-size:.9rem;margin:5px 0}.banner-info strong{color:#333}.html-code-section{background:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);padding:20px}.html-code-section h4{color:#333;font-size:1.1rem;margin:0 0 10px}.code-instructions{color:#666;font-size:.9rem;margin:0 0 15px}.code-instructions code{background:#f1f3f4;border-radius:3px;color:#d73502;font-family:Courier New,monospace;font-size:.85rem;padding:2px 6px}.code-help{margin-top:10px}.code-help small{color:#666;font-style:italic}.code-container{position:relative}.code-container textarea{background:#f8f9fa;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-family:Courier New,monospace;font-size:.85rem;line-height:1.4;min-height:120px;padding:15px;resize:vertical;width:100%}.code-container textarea:focus{border-color:#007bff;box-shadow:0 0 0 2px rgba(0,123,255,.25);outline:none}.copy-code-btn{background:#28a745;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.8rem;padding:8px 12px;position:absolute;right:10px;top:10px;transition:background-color .2s}.copy-code-btn:hover{background:#218838}@media (max-width:768px){.web-banners-module{margin:10px;padding:15px}.banner-filters-new{align-items:stretch;flex-direction:column;gap:20px}.filter-controls-section{align-items:stretch}.size-buttons{justify-content:center}.segmented-control{width:100%}.segment-btn{flex:1}.checkbox-label{justify-content:center}.banner-grid{grid-template-columns:1fr}.selected-banner{flex-direction:column;text-align:center}.selected-banner img{max-width:100%}.banner-header{align-items:stretch;flex-direction:column}.banner-header h2{font-size:1.5rem}.help-toggle-btn{justify-content:center;width:100%}}