/* Scoped to the new library; existing growth, map composer and demo panels are untouched. */
.tpl-mask,.tpl-viewer{position:fixed;inset:72px 20px 20px;z-index:11000;display:flex;align-items:center;justify-content:center;color:#24354a;font-family:inherit}
.tpl-mask:before,.tpl-viewer:before{content:"";position:fixed;inset:64px 0 0;background:rgba(13,34,53,.35);backdrop-filter:blur(3px);z-index:-1}
.tpl-panel{width:min(1280px,100%);height:100%;max-height:990px;background:#f5f8fb;border:1px solid #deebe6;border-radius:18px;box-shadow:0 18px 70px #122a4540;display:flex;flex-direction:column;overflow:hidden}
.tpl-header{display:flex;align-items:center;gap:18px;padding:22px 28px;background:linear-gradient(115deg,#125d56,#158575 68%,#2fa37e);color:#fff;flex-shrink:0}
.tpl-header-icon{height:52px;width:52px;display:grid;place-items:center;background:#ffffff20;border:1px solid #ffffff36;border-radius:14px;font-size:25px}
.tpl-eyebrow{font-size:11px;letter-spacing:2px;opacity:.8;margin-bottom:6px}
.tpl-header h2{font-size:23px;margin:0;font-weight:700;letter-spacing:.5px}
.tpl-header p{margin:7px 0 0;font-size:12px;opacity:.85}
.tpl-mask button,.tpl-dock button,.tpl-viewer button{font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #dce5ed;border-radius:7px;background:white;color:#40566b;padding:8px 10px;font-size:12px;transition:background .15s,border-color .15s}
.tpl-mask button:hover,.tpl-dock button:hover{background:#ecf9f4;border-color:#73cbb0}
.tpl-mask button:disabled,.tpl-dock button:disabled{opacity:.45;cursor:not-allowed}
.tpl-mask button:focus-visible,.tpl-dock button:focus-visible,.tpl-viewer button:focus-visible,.tpl-mask select:focus-visible,.tpl-mask summary:focus-visible{outline:3px solid #5bc5a4;outline-offset:2px}
.tpl-header .tpl-close{margin-left:auto;background:#ffffff1f;color:white;border:1px solid #ffffff32;font-size:16px;width:34px;height:34px;padding:0;flex-shrink:0}
.tpl-body{overflow:auto;overscroll-behavior:contain;padding:20px 26px 18px;flex:1}
.tpl-summary{display:flex;align-items:center;gap:30px;padding:0 0 18px;border-bottom:1px solid #e1e9ed}
.tpl-summary>div{display:flex;align-items:baseline;gap:8px}
.tpl-summary strong{font-size:27px;color:#087c65;font-weight:700}
.tpl-summary span{font-size:12px;color:#697e8c}
.tpl-summary p{margin:0 0 0 auto;display:flex;flex-direction:column;gap:7px;text-align:right}
.tpl-summary b{font-size:13px;font-weight:600}
.tpl-filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 0}
.tpl-filter-row button{border-color:transparent;background:transparent;padding:8px 14px}
.tpl-filter-row button.active{background:#087f68;color:white;border-color:#087f68}
.tpl-filter-row label{margin-left:auto;font-size:12px;color:#627685;display:flex;align-items:center;gap:8px}
.tpl-mask select,.tpl-dock select,.tpl-viewer select{font:inherit;font-size:12px;border:1px solid #dce5ed;border-radius:7px;padding:8px 10px;background:white;color:#304a5b}
.tpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tpl-card{border:1px solid #dce6ec;border-radius:12px;background:#fff;min-width:0;box-shadow:0 3px 10px #17384d05}
.tpl-card-image{height:188px;position:relative;border-bottom:1px solid #e7edf1;background:#f7f9fc;border-radius:12px 12px 0 0;overflow:hidden}
.tpl-card-image img{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);object-fit:contain;background:white;opacity:0}
.tpl-card-image img.ready{opacity:1}
.tpl-image-placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#8295a5;font-size:12px;background:linear-gradient(140deg,#fafcff,#eef2f7)}
.tpl-image-placeholder>i{font-size:38px;color:var(--product-color);opacity:.5}
.tpl-image-placeholder small{font-size:11px;color:#97a4b2}
.tpl-stage-tag,.tpl-code-tag{position:absolute;top:12px;font-size:11px;padding:5px 10px;border:1px solid #e2e9f0;border-radius:5px;background:#fffffff5;color:#476374;box-shadow:0 2px 6px #20385208}
.tpl-stage-tag{left:12px}.tpl-code-tag{right:12px;font-weight:700;color:var(--product-color)}
.tpl-card-content{padding:15px}
.tpl-card h3,.tpl-dock h3{margin:0;font-size:17px;font-weight:700;color:#20374c}
.tpl-card h3 small,.tpl-dock h3 small{font-size:11px;font-weight:400;color:#8b9aaa;margin-left:8px}
.tpl-period{font-size:11px;color:#7c8e9d;margin:9px 0 12px;line-height:1.6}
.tpl-swatches{display:flex;gap:7px;margin:12px 0}
.tpl-swatches>span{font-size:10px;color:#718293;flex:1;white-space:nowrap}
.tpl-swatches i{display:block;height:5px;border-radius:3px;margin-bottom:5px}
.tpl-details{font-size:11px;color:#758794;margin:12px 0;line-height:1.7}
.tpl-details summary{cursor:pointer;color:#6b7f91}
.tpl-details p{margin:6px 0}
.tpl-card-actions{display:flex;align-items:center;gap:6px;border-top:1px solid #edf1f5;padding-top:12px;position:relative}
.tpl-card-actions>button{flex:1;font-size:11px;padding:8px 5px;white-space:nowrap}
.tpl-mask button.tpl-primary{background:#0a9476;border-color:#0a9476;color:white}
.tpl-mask button.tpl-primary:hover{background:#087c63}
.tpl-download{position:relative;font-size:11px;color:#4e697d;flex:1}
.tpl-download summary{list-style:none;cursor:pointer;display:flex;gap:5px;justify-content:center;padding:8px 3px;white-space:nowrap;border:1px solid #dce5ed;border-radius:7px}
.tpl-download summary[aria-disabled=true]{opacity:.45}
.tpl-download>div{position:absolute;bottom:37px;right:0;width:158px;background:white;padding:7px;border:1px solid #dce5ed;border-radius:8px;box-shadow:0 5px 20px #1b394f25;z-index:4}
.tpl-download>div button{width:100%;border:0;justify-content:flex-start;padding:10px}
.tpl-download>div p{padding:6px;line-height:1.6}
.tpl-bottom-note{font-size:11px;color:#7e929f;padding-top:15px;line-height:1.7}
.tpl-footer{padding:12px 26px;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#768e99;background:white;border-top:1px solid #e3ebf0;flex-shrink:0}
.tpl-footer i{color:#0b9d7c;margin-right:5px}
.tpl-status{grid-column:1/-1;padding:65px 16px;text-align:center;color:#71869a;line-height:1.9;font-size:14px}
.tpl-status>i{font-size:28px;color:#35a78d}
.tpl-dock{position:fixed;left:24px;top:92px;width:320px;background:#fff;border:1px solid #dce7e3;border-radius:12px;box-shadow:0 8px 30px #15385035;z-index:3500;overflow:hidden;color:#30485b}
.tpl-dock>header{background:linear-gradient(100deg,#106a5e,#24a480);color:white;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.tpl-dock>header button{background:#ffffff20;border-color:#ffffff30;color:white;padding:6px 8px;font-size:11px}
.tpl-dock-body{padding:17px}
.tpl-dock-body>p{font-size:12px;color:#8495a2;margin:8px 0}
.tpl-dock label{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:16px 0 12px}
.tpl-map-classes{display:grid;grid-template-columns:1fr 1fr;gap:9px;font-size:12px}
.tpl-map-classes span{display:flex;gap:8px;align-items:center}
.tpl-map-classes i{width:18px;height:10px;border-radius:2px}
.tpl-rainbow{height:9px;border-radius:5px;background:linear-gradient(90deg,#6e00be,#005aff,#00d7f0,#46e146,#fff000,#ff7800,#dc0000)}
.tpl-range{display:flex;justify-content:space-between;font-size:11px;margin-top:6px;color:#7e8e9a}
.tpl-dock-body .tpl-map-status{padding:12px 0 6px;font-size:11px;line-height:1.6;color:#228875}
.tpl-dock-actions{display:flex;gap:5px;margin:8px 0 12px}
.tpl-dock-actions button{font-size:11px;padding:7px 6px;flex:1;white-space:nowrap}
.tpl-dock-hint{display:block;font-size:10px;color:#8b9aa8;line-height:1.7}
.tpl-viewer{z-index:12000;inset:80px 35px 25px}
.tpl-viewer section{height:100%;width:100%;max-width:1500px;background:white;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;box-shadow:0 10px 50px #122a4555}
.tpl-viewer header{display:flex;align-items:center;gap:20px;padding:15px 20px;background:#f8fafc;border-bottom:1px solid #dbe6ed}
.tpl-viewer header div{flex:1}
.tpl-viewer header strong{font-size:16px;color:#26445a}
.tpl-viewer header small{display:block;margin-top:6px;font-size:11px;color:#8194a1}
.tpl-viewer header label{font-size:12px;color:#728595}
.tpl-viewer-canvas{flex:1;overflow:auto;min-height:0;text-align:center;background:#e9eef3;padding:12px}
.tpl-viewer-canvas img.fit{width:100%;height:100%;object-fit:contain}
.tpl-viewer-canvas img.zoomed{max-width:none;max-height:none;height:auto;display:block;margin:0 auto}
@media(min-width:1600px){.tpl-card-image{height:225px}}
@media(max-width:1100px){.tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tpl-summary{gap:20px}.tpl-filter-row label{margin-left:0}}
@media(max-width:650px){.tpl-mask{inset:70px 8px 8px}.tpl-header{padding:16px;gap:10px}.tpl-header-icon{display:none}.tpl-header h2{font-size:18px}.tpl-header p{font-size:10px}.tpl-body{padding:14px}.tpl-grid{grid-template-columns:1fr}.tpl-summary{gap:16px}.tpl-summary strong{font-size:23px}.tpl-summary p{display:none}.tpl-summary span{font-size:10px}.tpl-filter-row{gap:4px}.tpl-filter-row button{padding:7px 9px;font-size:11px}.tpl-footer{padding:10px 14px}.tpl-footer>span:last-child{display:none}.tpl-dock{top:auto;bottom:28px;left:10px;width:285px;max-height:45vh;overflow:auto}.tpl-dock-body{padding:12px}.tpl-viewer{inset:72px 8px 10px}.tpl-viewer header{padding:10px;gap:8px}.tpl-viewer header strong{font-size:13px}.tpl-viewer header small{font-size:10px}}