:root{--modal-bg-color: #ffffff;--modal-text-color: #333333;--modal-overlay-color: rgba(0, 0, 0, .5);--modal-border-color-soft: var(--color-border-subtle, #e5e7eb);--modal-list-hover-bg: var(--color-surface, #fafbfc);--modal-list-selected-bg: var(--color-accent-primary-light, #e0e7ff);--modal-list-selected-border: var(--color-accent-primary, #4f46e5);--modal-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--modal-button-apply-bg: var(--color-accent-primary, #4f46e5);--modal-button-apply-hover-bg: var(--color-accent-primary-hover, #4338ca);--modal-button-cancel-bg: var(--color-text-secondary, #6b7280);--modal-button-cancel-hover-bg: #4b5563}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--modal-overlay-color);display:none;justify-content:center;align-items:center;z-index:1000;opacity:0;transition:opacity .3s ease-in-out}.modal-overlay.visible{display:flex;opacity:1}.modal-content{background-color:var(--modal-bg-color);padding:28px;border-radius:12px;box-shadow:0 10px 25px #0003;width:95%;max-width:1280px;height:95%;max-height:950px;display:flex;flex-direction:column;position:relative;font-family:var(--modal-font-family);color:var(--modal-text-color)}.modal-close-btn{position:absolute;top:15px;right:15px;background:none;border:none;font-size:1.8rem;line-height:1;cursor:pointer;color:#9ca3af;transition:color .2s ease}.modal-close-btn:hover{color:#4b5563}.modal-title{margin-top:0;margin-bottom:24px;font-size:1.6rem;font-weight:600;color:#111827;text-align:center}.modal-body{display:flex;flex-grow:1;overflow:hidden;gap:28px;padding-top:0;padding-bottom:0}.modal-template-list{flex:0 0 480px;display:flex;flex-direction:column;overflow:hidden}.modal-template-controls{padding:.5rem;margin-bottom:.75rem;border-bottom:1px solid var(--modal-border-color-soft);flex-shrink:0}.modal-template-controls input[type=search],.modal-template-controls select{width:100%;padding:.5rem;border:1px solid #cbd5e1;border-radius:.375rem;font-size:.875rem;margin-bottom:.5rem;box-sizing:border-box}.modal-template-controls input[type=search]:focus,.modal-template-controls select:focus{outline:none;border-color:var(--modal-list-selected-border);box-shadow:0 0 0 2px #4f46e526}#template-grid-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;padding:.5rem;overflow-y:auto;flex-grow:1}.template-card{border:1px solid var(--modal-border-color-soft);border-radius:var(--radius-ui, 8px);padding:.75rem;cursor:pointer;transition:all .2s ease-in-out;background-color:#fff;box-shadow:0 1px 3px #0000000d;display:flex;flex-direction:column;align-items:center;text-align:center}.template-card:hover{border-color:var(--modal-list-selected-border);box-shadow:0 8px 20px #0000001f;transform:translateY(-3px)}.template-card.selected{border-color:var(--modal-list-selected-border);background-color:var(--modal-list-selected-bg);box-shadow:0 0 0 2px var(--modal-list-selected-border)}.template-card-thumbnail{width:100%;height:80px;background-color:#e2e8f0;border-radius:4px;display:flex;flex-direction:column;overflow:hidden;position:relative}.template-card-color-band{width:100%;height:10px;flex-shrink:0}.template-card-secondary-color-band{width:50%;height:6px;flex-shrink:0;margin:2px auto 0;border-radius:2px}.template-card-thumbnail img{width:100%;flex-grow:1;object-fit:cover;min-height:0}.template-card-thumbnail .icon-placeholder{font-size:2rem;color:#94a3b8;flex-grow:1;display:flex;align-items:center;justify-content:center;width:100%}.template-card-name{font-size:.8rem;font-weight:500;color:#334155;margin-top:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.template-card--dark{background-color:#1f2937;border-color:#111827}.template-card--dark .template-card-name{color:#e2e8f0}.template-card--dark:hover{border-color:var(--modal-list-selected-border);background-color:#111827}.template-card--dark.selected{background-color:#0f172a;border-color:var(--modal-list-selected-border);box-shadow:0 0 0 2px var(--modal-list-selected-border)}.template-card--dark.selected .template-card-name{color:#f8fafc}.template-card--dark .template-card-thumbnail .icon-placeholder{color:#94a3b8}.modal-template-preview{flex-grow:1;border:1px solid var(--modal-border-color-soft);border-radius:8px;overflow:hidden;position:relative;transition:background-color .3s ease-in-out}.modal-template-preview iframe{width:100%;height:100%;border:none;display:block}.modal-footer{margin-top:0;text-align:right;border-top:1px solid var(--modal-border-color-soft);position:sticky;bottom:0;background-color:var(--modal-bg-color);padding:20px 28px;z-index:10}.modal-footer button{padding:10px 20px;border-radius:var(--radius-ui, 8px);cursor:pointer;margin-left:12px;font-size:.9rem;font-weight:500;border:none;color:#fff;transition:background-color .2s ease-in-out,transform .15s ease,box-shadow .15s ease}.modal-footer button:hover{transform:scale(1.03)}.modal-footer button:active{transform:scale(.97)}.modal-apply-btn{background-color:var(--modal-button-apply-bg)}.modal-apply-btn:hover{background-color:var(--modal-button-apply-hover-bg)}.modal-cancel-btn{background-color:var(--modal-button-cancel-bg)}.modal-cancel-btn:hover{background-color:var(--modal-button-cancel-hover-bg)}.modal-template-separator{list-style:none;padding:0;margin:10px 0;cursor:default}.modal-template-separator:hover{background-color:transparent!important}.modal-template-separator hr{border:none;border-top:1px solid #e2e8f0;height:1px}.modal-template-item{padding:10px 15px;cursor:pointer;border-radius:6px;margin-bottom:6px;border-left:3px solid transparent;transition:background-color .2s ease-in-out,border-left-color .2s ease-in-out;font-size:.95rem;list-style:none}.modal-template-item:hover{background-color:var(--modal-list-hover-bg, #f1f5f9)}.modal-template-item.selected{background-color:var(--modal-list-selected-bg, #e0f2fe);border-left-color:var(--modal-list-selected-border, #38bdf8);font-weight:500;color:#0f172a}.help-modal-content .modal-body{line-height:1.6;padding:10px 20px}.help-modal-content .modal-body h3{font-size:1.4em;font-weight:600;margin-top:20px;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #e2e8f0;color:#1f2937}.help-modal-content .modal-body h3:first-child{margin-top:0}.help-modal-content .modal-body h4{font-size:1.1em;font-weight:600;margin-top:15px;margin-bottom:8px;color:#374151}.help-modal-content .modal-body p{margin-bottom:10px;font-size:.95em;color:#334155}.help-modal-content .modal-body ul,.help-modal-content .modal-body ol{margin-left:20px;margin-bottom:10px;font-size:.95em;color:#334155}.help-modal-content .modal-body li{margin-bottom:5px}.help-modal-content .modal-body code{background-color:#f3f4f6;padding:2px 5px;border-radius:4px;font-size:.9em;color:#111827;border:1px solid #e5e7eb}.help-modal-content .modal-body strong{font-weight:600;color:#111827}.help-modal-content .modal-body .help-image-container{margin:20px 0;text-align:center}.help-modal-content .modal-body img.help-image{max-width:80%;height:auto;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.help-modal-content .modal-body .block-description{padding:12px 15px;border-left:4px solid #93c5fd;margin-top:5px;margin-bottom:20px;background-color:#f9fafb;border-radius:4px}.help-modal-content .modal-body .block-description p:last-child{margin-bottom:0}.help-modal-content .modal-body i.fas,.help-modal-content .modal-body i.fa-solid{color:#4b5563;margin-right:.2em}