/* Template status uses actual page evidence; only running states animate. */
.template-dashboard{padding:24px;color:#18223b;font-size:14px;max-width:1100px;margin:auto;width:100%;box-sizing:border-box}.template-dashboard>header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.template-dashboard>header small{color:#72809b}.template-dashboard h2{font-size:25px;line-height:1.3;margin:8px 0}.template-dashboard>header p{margin:4px 0;color:#65718b}.template-summary{border:1px solid #dceaff;background:linear-gradient(115deg,#f4f9ff,#eef5ff);border-radius:14px;padding:22px}.template-summary-top{display:flex;gap:30px;align-items:center}.template-ring{width:142px;height:142px;flex:none;border-radius:50%;background:conic-gradient(#2874ff var(--template-angle),#dce3ef 0);padding:13px;box-sizing:border-box;transition:background .4s}.template-ring>div{height:100%;border-radius:50%;background:#f3f8ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.template-ring strong{font-size:38px;line-height:1}.template-ring small{font-size:18px;font-weight:400;color:#62718c}.template-ring span{font-size:12px;color:#62718c}.template-current{min-width:0}.template-current h3{font-size:clamp(19px,1.8vw,29px);line-height:1.5;margin:0;color:#153c97}.template-current p{margin:8px 0;color:#536380}.template-pulse{display:inline-flex;gap:6px;margin-left:12px;vertical-align:middle}.template-pulse i{width:7px;height:7px;background:#347dff;border-radius:50%;animation:template-status-pulse 1.4s infinite}.template-pulse i:nth-child(2){animation-delay:.2s}.template-pulse i:nth-child(3){animation-delay:.4s}.template-segments{display:flex;gap:4px;list-style:none;padding:0!important;margin:18px 0 0!important;overflow-x:auto}.template-segments li{flex:1;min-width:15px;text-align:center;color:#77859b;font-size:11px}.template-segments li>i{display:block;border-radius:7px;background:#dce3ee;height:12px;line-height:12px;font-size:10px;font-style:normal;margin-bottom:6px;color:white}.template-segments .completed>i{background:#0ab675}.template-segments .running>i{background:#367eff;animation:template-status-pulse 1.4s infinite}.template-segments .failed>i,.template-segments .blocked>i{background:#f16b72}.template-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 22px}.template-metric{border:1px solid #e7eaf0;border-radius:10px;padding:14px 12px;background:#fafbfd}.template-metric>span{display:flex;align-items:center;gap:6px;font-size:12px;color:#51617c}.template-metric i{width:8px;height:8px;background:#9aa7bb;border-radius:50%}.template-metric strong{display:block;font-size:29px;margin:8px 0 0}.template-metric strong small{font-size:12px;font-weight:400;margin-left:4px}.template-metric.completed{background:#f5fcf8;border-color:#d7f4e7}.template-metric.completed i{background:#0ab675}.template-metric.running{background:#f5f9ff;border-color:#dfeaff}.template-metric.running i{background:#347dff}.template-metric.failed{background:#fffbfb;border-color:#fae4e8}.template-metric.failed i{background:#f16b72}.template-page-section h3{font-size:16px;margin:0 0 14px}.template-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0!important;padding:0!important;list-style:none}.template-page-grid>li{display:flex;gap:12px;align-items:center;border:1px solid #e5eaf3;border-radius:10px;padding:13px 12px;min-width:0;background:#fafbfd}.template-page-grid>li>div{min-width:0}.template-page-grid strong{font-size:13px;font-weight:500;display:block;margin-bottom:8px}.template-page-grid div>span{display:flex;align-items:center;gap:7px;font-size:12px}.template-page-symbol{font-size:27px;background:#eef2f7;border-radius:7px;width:39px;height:42px;display:grid;place-items:center;flex:none;color:#a8b5c7}.template-page-grid .completed{background:#f5fcf9;border-color:#d7f2e6}.template-page-grid .completed div>span{color:#079a62}.template-page-grid .completed .template-page-symbol{background:#e1f7eb;color:#97dbb7}.template-page-grid .running{background:#f2f7ff;border-color:#a6c8ff;animation:template-status-border 1.8s infinite}.template-page-grid .running div>span{color:#246eff}.template-page-grid .running .template-page-symbol{background:#e1edff;color:#a8caff}.template-state-icon{font-style:normal;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#e6eaf1;color:#8090a7}.completed .template-state-icon{background:#0ab675;color:white}.running .template-state-icon{box-sizing:border-box;border:2px solid #c7dcff;border-top-color:#2874ff;background:transparent;animation:template-status-spin 1s linear infinite}.failed .template-state-icon,.blocked .template-state-icon{background:#f16b72;color:white}.template-page-grid .failed,.template-page-grid .blocked{background:#fff8f8;border-color:#f5d6d9}.template-delivery-status{font-size:12px;color:#78869c;line-height:1.7;margin-top:18px}.template-status-empty{grid-column:1/-1;color:#78869c}.template-source-view{padding:22px 18px;color:#243149;height:auto;box-sizing:border-box;display:flex;flex-direction:column}.template-source-view h2{font-size:18px;margin:0 0 18px}.template-source-view>header{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:#71809a;margin-bottom:16px}.template-source-view .is-running{color:#2874ff}.template-source-canvas{min-height:0;flex:none;display:block;background:transparent;border:0;padding:0}.template-source-canvas img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:top;border-radius:4px}.template-source-canvas p{color:#8190a5;text-align:center;font-size:13px}.template-source-view nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:18px}.template-source-view nav button{padding:0!important;min-width:29px!important;width:29px;height:29px;min-height:29px!important;border-radius:50%;border:0;background:#f0f3f8;color:#667692;font-size:12px}.template-source-view nav button[aria-pressed=true]{background:#2874ff;color:white}.template-source-caption{text-align:center;font-size:12px;color:#7c8ba3;margin:12px 0 0}@keyframes template-status-pulse{50%{opacity:.4}}@keyframes template-status-spin{to{transform:rotate(360deg)}}@keyframes template-status-border{50%{border-color:#5093ff;box-shadow:0 0 0 2px #e7f0ff}}@media(max-width:1200px){.template-dashboard{padding:18px}.template-summary{padding:16px}.template-summary-top{gap:18px}.template-ring{width:116px;height:116px;padding:11px}.template-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-page-symbol{display:none}.template-metric{padding:12px 8px}}@media(max-width:640px){.template-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.template-current h3{font-size:18px}.template-ring{width:98px;height:98px}.template-ring strong{font-size:27px}.template-dashboard{padding:12px}}@media(prefers-reduced-motion:reduce){.template-dashboard *{animation:none!important;transition:none!important}}
/* Diagnostic geometry follows the displayed source image; it never changes layout. */
.template-source-canvas{position:relative;overflow:hidden}
.template-native-overlay-host{position:absolute;inset:0;pointer-events:none;z-index:1}
.template-native-overlay{width:100%;height:100%;display:block}
.template-native-overlay rect{fill:none;stroke-width:2}
.template-native-overlay .expected{stroke:#1664ff;stroke-dasharray:6 3}
.template-native-overlay .actual{stroke:#c42b35}
.template-native-diagnostic{margin-top:14px;font-size:13px}
.template-native-diagnostic[hidden]{display:none}
.template-native-diagnostic h3{font-size:14px;margin:0 0 8px}
.template-native-diagnostic p{line-height:1.6;color:#64748b}
.template-native-diagnostic ol{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.template-native-diagnostic button{display:grid;gap:4px;text-align:left;width:100%;padding:8px;border:1px solid #dce2eb;border-radius:4px;background:#fff;color:#243149;overflow-wrap:anywhere}
.template-native-diagnostic button[aria-pressed=true]{border-color:#1664ff;background:#f4f8ff}
.template-native-diagnostic button:focus-visible{outline:2px solid #1664ff;outline-offset:2px}