dialog.template-library{box-sizing:border-box;width:min(1180px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;overflow:hidden;border:1px solid #b9cddd;border-radius:12px;background:#fffdf8;color:#29475f;font:15px/1.5 var(--rocode-font-family,Arial,sans-serif);box-shadow:0 24px 80px #17355235}
dialog.template-library[open]{display:flex;flex-direction:column}
dialog.template-library::backdrop{background:#17355275;backdrop-filter:blur(3px)}
.template-library-heading{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 24px;background:#fffdf8}
.template-library-heading>div{min-width:0}

.template-library-heading h2{margin:0;font-size:22px;line-height:1.25;font-weight:750;color:#23455f}

.template-library button{box-sizing:border-box;min-height:42px;border:1px solid #b9d0e5;border-radius:6px;padding:8px 14px;background:white;color:#305c7d;font:650 14px/1.4 var(--rocode-font-family,Arial,sans-serif);cursor:pointer;transition:border-color .15s,background-color .15s}
.template-library button:hover:not(:disabled){border-color:#4a82d7;background:#f0f7ff}
.template-library button:disabled{opacity:.55;cursor:default}
.template-library :is(button,input,[data-template-preview]):focus-visible{outline:3px solid #3264e6;outline-offset:3px}
.template-library .ui-icon{width:19px;height:19px;flex:none;vertical-align:middle}
.template-library-heading>button{display:grid;place-items:center;width:42px;padding:9px;border-color:transparent;background:transparent;color:#547188;flex:none}
.template-library-tabs{flex:none;display:flex;gap:4px;padding:0 24px;border-bottom:1px solid #cfdfeb;background:#fffdf8}
.template-library-tabs>button{display:flex;align-items:center;gap:8px;position:relative;min-height:48px;padding:10px 18px;border:0;border-radius:6px 6px 0 0;background:transparent;color:#59758a}
.template-library-tabs>button[aria-selected=true]{color:#245abe;background:#edf5ff;box-shadow:inset 0 -3px #3264e6}

.template-library-body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);overflow:hidden;background:#f4f8fb}
.template-browser{min-width:0;min-height:0;display:flex;flex-direction:column;padding:20px 18px 18px 24px;border-right:1px solid #d7e4ee}
.template-search{display:flex;align-items:center;gap:8px;flex:none;padding:0 12px;background:white;border:1px solid #b7cddd;border-radius:6px;color:#6b879b}
.template-search:focus-within{outline:3px solid #3264e6;outline-offset:2px}
.template-search input{width:100%;min-width:0;min-height:42px;margin:0;padding:8px 0;border:0;outline:none!important;border-radius:0;background:transparent;color:#29475f;font:500 14px/1.4 var(--rocode-font-family,Arial,sans-serif)}
.template-results{flex:none;margin:10px 0 11px;font-size:12px;color:#688196}
.template-cards{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;margin-top:14px;align-content:start;gap:14px;overflow:auto;overscroll-behavior:contain;padding:3px 5px 5px 3px}
.template-library .template-card{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;padding:0 0 13px;overflow:hidden;text-align:left;border:1px solid #c6d8e6;border-radius:8px;background:white;box-shadow:0 2px 4px #274b6810}
.template-library .template-card:hover:not(:disabled){border-color:#6e99cf;background:white}
.template-library .template-card[aria-checked=true]{border-color:#3264e6;box-shadow:0 0 0 2px #3264e6;background:#fff}
.template-thumbnail{height:150px;flex:none;overflow:hidden;border-bottom:1px solid #d6e1e9;background:#edf4f9;pointer-events:none}
.template-card>strong{display:block;margin:12px 13px 4px;padding-right:18px;font-size:15px;line-height:1.35;color:#294b64;font-weight:750}
.template-card-description{margin:0 13px;color:#698195;font-size:12px;line-height:1.45;font-weight:450}
.template-card-check{position:absolute;top:9px;right:9px;display:none;place-items:center;width:25px;height:25px;border-radius:50%;background:#3264e6;color:white;border:2px solid white;box-shadow:0 1px 3px #24435f25}
.template-card[aria-checked=true] .template-card-check{display:grid}
.template-card-check .ui-icon{width:15px;height:15px}
.template-preview{min-width:0;min-height:0;display:flex;flex-direction:column;padding:20px 24px 18px 20px}
.template-preview-heading{flex:none;display:flex;flex-direction:column;gap:14px;margin-bottom:14px}


.template-preview-devices{display:inline-flex;align-self:flex-start;border:1px solid #a9c3dc;border-radius:6px;overflow:hidden;background:white}
.template-preview-devices>button{display:flex;align-items:center;gap:6px;min-height:36px;padding:7px 12px;border:0;border-radius:0;font-size:12px}
.template-preview-devices>button[aria-pressed=true]{background:#3264e6;color:white}
.template-preview-devices>button[aria-pressed=true]:hover{background:#2455ce;color:white}
.template-preview-devices .ui-icon{width:16px;height:16px}
.template-preview-window{flex:1 1 auto;min-height:100px;overflow:auto;overscroll-behavior:contain;align-self:stretch;border:1px solid #bdcfdf;border-radius:8px;background:#e9f0f6;box-shadow:0 3px 12px #29465e15}
.template-preview-window .template-render-space{margin:0 auto}
.template-render-space{position:relative;width:100%;min-width:0;overflow:hidden}
.template-render{position:absolute;left:0;top:0;transform-origin:0 0;background:white;pointer-events:none}
.template-preview-window:empty{display:grid;place-items:center;min-height:180px}
.template-preview-window:empty::after{content:'No preview';padding:20px;color:#6b8599;text-align:center;font-size:14px}

.template-style-option{display:flex;align-items:flex-start;gap:8px;flex:none;margin-top:13px;color:#3e6079;font-size:12px;line-height:1.5}
.template-style-option[hidden]{display:none}
.template-style-option input{accent-color:#3264e6;flex:none;width:17px;height:17px;margin:1px 0 0}
.template-library-footer{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px;border-top:1px solid #c8dae7;background:#fffdf8}
.template-library-footer{justify-content:flex-end}.template-library-status{min-width:0;flex:1}.template-library-status[hidden],.template-results[hidden]{display:none}

.template-library .template-library-status{margin:3px 0 0;padding:0;border:0;background:transparent;color:#668095;font-size:12px;line-height:1.4}
.template-library .template-library-status.template-error{color:#a3412d}
.template-library-actions{display:flex;gap:8px;flex:none}
.template-library .template-library-add{display:flex;align-items:center;gap:6px;background:#3264e6;border-color:#3264e6;color:white;min-width:134px;justify-content:center}
.template-library .template-library-add:hover:not(:disabled){background:#2455ce;border-color:#2455ce;color:white}
.page-dialog .page-template-browse{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:52px;margin:12px 0 0;padding:12px 14px;border:1px solid #86a9db;border-radius:7px;background:#f2f7ff;color:#2459b4;font:650 14px/1.4 var(--rocode-font-family,Arial,sans-serif);text-align:left;cursor:pointer}
.page-dialog .page-template-browse:hover{background:#e6f1ff;border-color:#3264e6}
.page-dialog .page-template-browse .ui-icon{width:20px;height:20px;flex:none}
@media(max-width:850px){.template-library-body{grid-template-columns:minmax(0,1fr);overflow:auto}.template-browser{border-right:0;padding-right:24px}.template-cards{max-height:290px;flex:none;overflow:auto;grid-template-columns:repeat(3,minmax(0,1fr))}.template-thumbnail{height:130px}.template-preview{min-height:370px;padding:18px 24px;border-top:1px solid #d4e2ed}.template-preview-window{min-height:220px}.template-preview-heading{flex-direction:row;align-items:flex-start;justify-content:space-between}.template-preview-heading>div:first-child{min-width:0}.template-preview-devices{flex:none}}
@media(max-width:560px){dialog.template-library{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.template-library-heading{padding:16px 16px 12px;gap:12px}.template-library-heading h2{font-size:21px}.template-library-tabs{padding:0 16px}.template-library-tabs>button{padding:9px 14px;min-height:44px}.template-browser{padding:16px}.template-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-height:270px}.template-thumbnail{height:118px}.template-card>strong{font-size:14px;margin-left:10px;margin-right:10px}.template-card-description{font-size:11px;margin-left:10px;margin-right:10px}.template-preview{padding:16px;min-height:350px}.template-preview-heading{flex-direction:column;gap:10px}.template-preview-window{min-height:210px}.template-library-footer{padding:12px 16px;gap:10px;align-items:stretch;flex-direction:column}.template-library-actions{justify-content:flex-end}.template-library .template-library-status{font-size:11px}}
@media(max-height:600px) and (min-width:851px){.template-library-heading{padding-top:12px;padding-bottom:10px}.template-library-heading h2{font-size:22px}.template-browser,.template-preview{padding-top:12px}.template-preview-heading{gap:8px;margin-bottom:10px}.template-library-footer{padding-top:10px;padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.template-library button{transition:none}dialog.template-library,dialog.template-library::backdrop{animation:none;backdrop-filter:none}}